{"id":3571,"date":"2026-08-07T16:07:16","date_gmt":"2026-08-07T08:07:16","guid":{"rendered":"https:\/\/www.ukm.my\/minggudigital\/?page_id=3571"},"modified":"2026-10-15T16:54:58","modified_gmt":"2026-10-15T08:54:58","slug":"program-new","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/minggudigital\/program-new\/","title":{"rendered":"PROGRAM"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3571\" class=\"elementor elementor-3571\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f7aaab e-flex e-con-boxed e-con e-parent\" data-id=\"9f7aaab\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f5a72e1 e-con-full e-flex e-con e-child\" data-id=\"f5a72e1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-f550662 e-con-full e-flex e-con e-child\" data-id=\"f550662\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc8175f elementor-widget elementor-widget-heading\" data-id=\"cc8175f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Program &amp; Aktiviti<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-10d077c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"10d077c\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b66de80\" data-id=\"b66de80\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e24e9fd elementor-widget elementor-widget-text-editor\" data-id=\"e24e9fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<strong>Sedia untuk teroka dunia digital?<\/strong>\n\n<br> \ud83d\ude80 Buat julung kalinya, Pusat Teknologi Digital\u00a0 menganjurkan Minggu Digital UKM 2026! Inilah masanya untuk mendapatkan berbagai ilmu dan mendengar perkongsian eksklusif daripada pakar-pakar hebat sama ada di Podcast atau pun di Zoom. Pameran fizikal teknologi dan inovasi perkhidmatan digital juga ada.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-ab10814\" data-id=\"ab10814\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-411310a elementor-widget elementor-widget-text-editor\" data-id=\"411310a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong>Cara Menyertai<\/strong><\/p><ul><li>\ud83d\udccc <strong>Klik pada kad jadual<\/strong> untuk melihat senarai lengkap program dan aktiviti yang ditawarkan.<\/li><li>\ud83c\udfa7 <strong>Klik pada pautan yang disediakan<\/strong> untuk terus menyertai sesi Podcast atau Zoom.<\/li><li>\u00a0<\/li><\/ul><p><strong>Jangan lepaskan peluang, jom sertai program Minggu Digital UKM! <\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-761f176 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"761f176\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7123806\" data-id=\"7123806\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-996da3c elementor-widget elementor-widget-html\" data-id=\"996da3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"ms\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Jadual Interaktif Minggu Digital 2026 UKM<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n    \n    <style>\n        body {\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            background-color: #f8fafc;\n            color: #0f172a;\n            overflow-x: hidden;\n        }\n        .cyber-font {\n            font-family: 'Space Grotesk', sans-serif;\n        }\n        \/* Glassmorphic control panel *\/\n        .glass-panel {\n            background: rgba(255, 255, 255, 0.94);\n            backdrop-filter: blur(14px);\n            border: 1px solid rgba(226, 232, 240, 0.9);\n            box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05);\n        }\n        \/* Card interactive lift & glow *\/\n        .schedule-card {\n            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n        .schedule-card:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);\n        }\n        \/* Pastel card styles *\/\n        .card-rasmi {\n            background-color: #fefce8;\n            border-color: #fef08a;\n        }\n        .card-rasmi:hover {\n            border-color: #eab308;\n            box-shadow: 0 12px 26px -4px rgba(234, 179, 8, 0.22);\n        }\n        .card-podcast {\n            background-color: #fff1f2;\n            border-color: #fecdd3;\n        }\n        .card-podcast:hover {\n            border-color: #f43f5e;\n            box-shadow: 0 12px 26px -4px rgba(244, 63, 94, 0.18);\n        }\n        .card-online {\n            background-color: #eff6ff;\n            border-color: #bfdbfe;\n        }\n        .card-online:hover {\n            border-color: #3b82f6;\n            box-shadow: 0 12px 26px -4px rgba(59, 130, 246, 0.2);\n        }\n        .card-bersemuka {\n            background-color: #ecfeff;\n            border-color: #a5f3fc;\n        }\n        .card-bersemuka:hover {\n            border-color: #06b6d4;\n            box-shadow: 0 12px 26px -4px rgba(6, 182, 212, 0.18);\n        }\n        \/* Day Header & State Tabs *\/\n        .day-header-title {\n            color: #ffffff;\n            font-weight: 900;\n            letter-spacing: 0.03em;\n        }\n        .day-header-date {\n            color: rgba(255, 255, 255, 0.9);\n        }\n        .day-tab-active {\n            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);\n            color: #ffffff !important;\n            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);\n        }\n        .filter-btn-active {\n            background: #4f46e5 !important;\n            color: #ffffff !important;\n            box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);\n            font-weight: 700;\n        }\n        \/* Custom Scrollbar *\/\n        ::-webkit-scrollbar {\n            width: 7px;\n            height: 7px;\n        }\n        ::-webkit-scrollbar-track {\n            background: #f1f5f9;\n        }\n        ::-webkit-scrollbar-thumb {\n            background: #cbd5e1;\n            border-radius: 4px;\n        }\n        ::-webkit-scrollbar-thumb:hover {\n            background: #94a3b8;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-[#f8fafc] text-slate-900 min-h-screen relative flex flex-col selection:bg-indigo-500 selection:text-white\">\n\n    <header class=\"sticky top-0 z-40 glass-panel border-b border-slate-200\/90 px-4 lg:px-8 py-2.5\">\n        <div class=\"max-w-7xl mx-auto flex flex-nowrap items-center justify-between gap-3 lg:gap-4 overflow-x-auto scrollbar-none\">\n            <!-- Tajuk Program -->\n            <div class=\"flex items-center gap-2.5 shrink-0\">\n                <div class=\"w-9 h-9 rounded-xl bg-gradient-to-tr from-cyan-500 via-indigo-600 to-fuchsia-600 flex items-center justify-center text-white shadow-md shadow-indigo-500\/20 shrink-0\">\n                    <i class=\"fa-solid fa-microchip text-base\"><\/i>\n                <\/div>\n                <h1 class=\"text-xs sm:text-sm lg:text-base font-extrabold tracking-tight bg-gradient-to-r from-slate-900 via-indigo-950 to-purple-800 bg-clip-text text-transparent whitespace-nowrap\">\n                    SLOT AKTIVITI\/PROGRAM MINGGU DIGITAL 2026\n                <\/h1>\n            <\/div>\n\n            <!-- Bar Tapisan Sesi & Kotak Carian -->\n            <div class=\"flex items-center gap-2.5 shrink-0\">\n                <!-- Quick Filter Tabs -->\n                <div class=\"flex items-center gap-1 bg-slate-100 p-1 rounded-2xl border border-slate-200 text-xs font-semibold shrink-0\">\n                    <button id=\"filter-all\" class=\"filter-tab-btn filter-btn-active px-2.5 py-1 rounded-xl text-slate-600 transition-all text-xs whitespace-nowrap\" onclick=\"setFilter('all')\">\n                        <i class=\"fa-solid fa-border-all mr-1\"><\/i> Semua Sesi\n                    <\/button>\n                    <button id=\"filter-pagi\" class=\"filter-tab-btn px-2.5 py-1 rounded-xl text-slate-600 hover:text-slate-900 transition-all text-xs whitespace-nowrap\" onclick=\"setFilter('pagi')\">\n                        <i class=\"fa-solid fa-sun text-amber-500 mr-1\"><\/i> Sesi Pagi\n                    <\/button>\n                    <button id=\"filter-petang\" class=\"filter-tab-btn px-2.5 py-1 rounded-xl text-slate-600 hover:text-slate-900 transition-all text-xs whitespace-nowrap\" onclick=\"setFilter('petang')\">\n                        <i class=\"fa-solid fa-cloud-sun text-sky-500 mr-1\"><\/i> Sesi Petang\n                    <\/button>\n                    <button id=\"filter-podcast\" class=\"filter-tab-btn px-2.5 py-1 rounded-xl text-slate-600 hover:text-slate-900 transition-all text-xs whitespace-nowrap\" onclick=\"setFilter('podcast')\">\n                        <i class=\"fa-solid fa-podcast text-rose-500 mr-1\"><\/i> Podcast\n                    <\/button>\n                    <button id=\"filter-online\" class=\"filter-tab-btn px-2.5 py-1 rounded-xl text-slate-600 hover:text-slate-900 transition-all text-xs whitespace-nowrap\" onclick=\"setFilter('online')\">\n                        <i class=\"fa-solid fa-video text-blue-600 mr-1\"><\/i> Zoom \/ Online\n                    <\/button>\n                <\/div>\n\n                <!-- Search Input Box -->\n                <div class=\"relative flex items-center shrink-0\">\n                    <i class=\"fa-solid fa-magnifying-glass absolute left-3 text-slate-400 text-xs pointer-events-none\"><\/i>\n                    <input \n                        type=\"text\" \n                        id=\"searchInput\" \n                        placeholder=\"Cari slot, tajuk, penceramah...\" \n                        class=\"w-36 sm:w-44 lg:w-56 pl-8 pr-7 py-1 text-xs rounded-xl bg-white border border-slate-300 text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500\/40 focus:border-indigo-500 transition-all font-medium shadow-sm\"\n                        oninput=\"handleSearch(this.value)\"\n                    \/>\n                    <button \n                        id=\"clearSearchBtn\" \n                        onclick=\"clearSearch()\" \n                        class=\"hidden absolute right-2 text-slate-400 hover:text-slate-600 text-xs w-4 h-4 rounded-full flex items-center justify-center transition-colors\">\n                        <i class=\"fa-solid fa-xmark\"><\/i>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main class=\"relative z-10 flex-1 w-full max-w-7xl mx-auto p-4 sm:p-6 lg:p-8 flex flex-col gap-6\">\n        <!-- Program Sepanjang Minggu (Top Highlights) -->\n        <section class=\"grid grid-cols-1 md:grid-cols-3 gap-3.5\">\n            <!-- Program 1 -->\n            <div class=\"glass-panel p-4 rounded-2xl border border-cyan-200 shadow-sm flex items-start gap-3.5 hover:shadow-md transition-shadow bg-cyan-50\/50\">\n                <div class=\"w-11 h-11 rounded-xl bg-cyan-500\/15 border border-cyan-400\/30 text-cyan-700 flex items-center justify-center text-lg shrink-0\">\n                    <i class=\"fa-solid fa-vr-cardboard\"><\/i>\n                <\/div>\n                <div class=\"min-w-0 flex-1\">\n                    <div class=\"flex items-center gap-2 mb-0.5\">\n                        <span class=\"text-[9px] font-bold px-2 py-0.5 rounded-full bg-cyan-100 text-cyan-800 border border-cyan-200 uppercase tracking-wide\">Program Minggu<\/span>\n                    <\/div>\n                    <h3 class=\"text-xs sm:text-sm font-bold text-slate-900 truncate\">Hari Bersama Pelanggan (Hibrid)<\/h3>\n                    <p class=\"text-[11px] text-slate-600 font-medium\">Metaverse (2 jam timeslot pagi & petang)<\/p>\n                    <p class=\"text-[10.5px] text-cyan-700 font-semibold mt-1\"><i class=\"fa-regular fa-clock mr-1\"><\/i>9.00 - 11.00 pagi, 2.30 - 4.30 petang<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Program 2 -->\n            <div class=\"glass-panel p-4 rounded-2xl border border-rose-200 shadow-sm flex items-start gap-3.5 hover:shadow-md transition-shadow bg-rose-50\/50\">\n                <div class=\"w-11 h-11 rounded-xl bg-rose-500\/15 border border-rose-400\/30 text-rose-700 flex items-center justify-center text-lg shrink-0\">\n                    <i class=\"fa-solid fa-podcast\"><\/i>\n                <\/div>\n                <div class=\"min-w-0 flex-1\">\n                    <div class=\"flex items-center gap-2 mb-0.5\">\n                        <span class=\"text-[9px] font-bold px-2 py-0.5 rounded-full bg-rose-100 text-rose-800 border border-rose-200 uppercase tracking-wide\">Siri Podcast<\/span>\n                    <\/div>\n                    <h3 class=\"text-xs sm:text-sm font-bold text-slate-900 truncate\">Wadah Digital<\/h3>\n                    <p class=\"text-[11px] text-slate-600 font-medium\">Podcast Digital Sepanjang Minggu<\/p>\n                    <a href=\"https:\/\/www.youtube.com\/@wadahdigitalukm\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-1.5 text-[10.5px] text-red-600 hover:text-red-700 font-semibold mt-1 transition-colors\">\n                        <i class=\"fa-brands fa-youtube text-sm\"><\/i> @wadahdigitalukm <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Program 3 -->\n            <div class=\"glass-panel p-4 rounded-2xl border border-pink-200 shadow-sm flex items-start gap-3.5 hover:shadow-md transition-shadow bg-pink-50\/50\">\n                <div class=\"w-11 h-11 rounded-xl bg-pink-500\/15 border border-pink-400\/30 text-pink-700 flex items-center justify-center text-lg shrink-0\">\n                    <i class=\"fa-solid fa-shield-halved\"><\/i>\n                <\/div>\n                <div class=\"min-w-0 flex-1\">\n                    <div class=\"flex items-center gap-2 mb-0.5\">\n                        <span class=\"text-[9px] font-bold px-2 py-0.5 rounded-full bg-pink-100 text-pink-800 border border-pink-200 uppercase tracking-wide\">Penyertaan Telah Ditutup<\/span>\n                    <\/div>\n                    <h3 class=\"text-xs sm:text-sm font-bold text-slate-900 truncate\">Pertandingan Video Pendek \/ Reel<\/h3>\n                    <p class=\"text-[11px] text-slate-600 font-medium\">Keselamatan Siber<\/p>\n                    <p class=\"text-[10.5px] text-pink-700 font-semibold mt-1\"><i class=\"fa-solid fa-trophy mr-1\"><\/i>Pemenang akan diumumkan semasa Majlis Penutup pada hari Jumaat, 16 Oktober 2026<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <div id=\"scheduleCanvasWrapper\" class=\"relative w-full flex flex-col gap-6\">\n            <!-- Day Navigation Selector -->\n            <section class=\"glass-panel p-2 sm:p-2.5 rounded-2xl border border-slate-200 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-3\">\n                <div class=\"flex items-center gap-2 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0 scrollbar-none\" id=\"dayTabsContainer\">\n                    <button class=\"day-tab day-tab-active px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold transition-all whitespace-nowrap\" onclick=\"switchDayView('all', this)\">\n                        <i class=\"fa-solid fa-calendar-days mr-1.5\"><\/i> Semua Hari\n                    <\/button>\n                    <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(0, this)\">\n                        Isnin <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">12 Okt<\/span>\n                    <\/button>\n                    <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(1, this)\">\n                        Selasa <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">13 Okt<\/span>\n                    <\/button>\n                    <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(2, this)\">\n                        Rabu <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">14 Okt<\/span>\n                    <\/button>\n                    <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(3, this)\">\n                        Khamis <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">15 Okt<\/span>\n                    <\/button>\n                    <button class=\"day-tab px-3.5 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-bold text-slate-600 hover:text-slate-900 transition-all whitespace-nowrap\" onclick=\"switchDayView(4, this)\">\n                        Jumaat <span class=\"text-[11px] opacity-75 font-normal ml-0.5\">16 Okt<\/span>\n                    <\/button>\n                <\/div>\n                <!-- View Switcher Info -->\n                <div class=\"text-[11.5px] text-slate-500 font-medium flex items-center gap-1.5 shrink-0 px-2\">\n                    <i class=\"fa-solid fa-layer-group text-indigo-500\"><\/i>\n                    <span id=\"activeDayLabel\">Memaparkan 5 Hari Penuh<\/span>\n                <\/div>\n            <\/section>\n\n            <!-- Schedule Days Cards Container -->\n            <div id=\"scheduleDaysContainer\" class=\"flex flex-col gap-8\">\n                <!-- Dijana secara dinamik melalui JavaScript -->\n            <\/div>\n        <\/div>\n\n        <!-- Floating Notice Bar -->\n        <div class=\"sticky bottom-4 z-20 max-w-5xl mx-auto w-full px-2 pointer-events-none mt-4\">\n            <div class=\"pointer-events-auto glass-panel px-5 py-3 rounded-2xl shadow-xl border border-slate-200 flex flex-wrap items-center justify-between gap-3 bg-white\/95 backdrop-blur-md\">\n                <div class=\"flex items-center gap-2.5 text-amber-700 font-semibold text-xs sm:text-[13px]\">\n                    <i class=\"fa-solid fa-triangle-exclamation text-amber-600 animate-pulse text-base\"><\/i>\n                    <span class=\"text-slate-700 font-medium\">Jadual ini tertakluk kepada perubahan oleh Pihak Penganjur Pusat Teknologi Digital<\/span>\n                <\/div>\n                <div class=\"flex items-center gap-2 text-slate-500 font-medium text-xs sm:text-[12.5px]\">\n                    <i class=\"fa-solid fa-calendar-check text-indigo-600\"><\/i>\n                    <span class=\"font-mono font-bold text-slate-800 bg-slate-100 px-3 py-1.5 rounded-lg border border-slate-300\">Kemaskini: 15 Oktober 2026<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/main>\n\n    <div id=\"detailModal\" class=\"fixed inset-0 z-50 bg-slate-900\/60 backdrop-blur-md flex items-center justify-center p-4 opacity-0 pointer-events-none transition-all duration-300\">\n        <div class=\"bg-white border border-slate-200 w-full max-w-xl max-h-[90vh] overflow-y-auto rounded-3xl shadow-2xl p-6 sm:p-7 relative transform scale-95 transition-all duration-300 text-slate-900\" id=\"modalContainer\">\n            <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 text-slate-400 hover:text-slate-700 w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center transition-colors\">\n                <i class=\"fa-solid fa-xmark text-base\"><\/i>\n            <\/button>\n            <div id=\"modalContent\">\n                <!-- Dijana mengikut kad yang dipilih -->\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const SCHEDULE_DAYS = [\n            { \n                id: 0, \n                date: '12 Oktober 2026', \n                day: 'Isnin', \n                gradient: 'from-sky-600 via-blue-600 to-indigo-700', \n                badgeBg: 'bg-white\/20 text-white border-white\/30',\n                icon: 'fa-calendar-day' \n            },\n            { \n                id: 1, \n                date: '13 Oktober 2026', \n                day: 'Selasa', \n                gradient: 'from-violet-600 via-purple-600 to-indigo-700', \n                badgeBg: 'bg-white\/20 text-white border-white\/30',\n                icon: 'fa-calendar-day' \n            },\n            { \n                id: 2, \n                date: '14 Oktober 2026', \n                day: 'Rabu', \n                gradient: 'from-teal-600 via-emerald-600 to-cyan-700', \n                badgeBg: 'bg-white\/20 text-white border-white\/30',\n                icon: 'fa-calendar-day' \n            },\n            { \n                id: 3, \n                date: '15 Oktober 2026', \n                day: 'Khamis', \n                gradient: 'from-pink-600 via-fuchsia-600 to-rose-700', \n                badgeBg: 'bg-white\/20 text-white border-white\/30',\n                icon: 'fa-calendar-day' \n            },\n            { \n                id: 4, \n                date: '16 Oktober 2026', \n                day: 'Jumaat', \n                gradient: 'from-indigo-600 via-blue-600 to-slate-800', \n                badgeBg: 'bg-white\/20 text-white border-white\/30',\n                icon: 'fa-calendar-day' \n            }\n        ];\n\n        const SCHEDULE_ITEMS = [\n            \/\/ ==================== 12 OKTOBER (ISNIN) ====================\n            {\n                id: 'slot-1-asmah',\n                dayIndex: 0,\n                session: 'pagi',\n                time: '9:00 pagi \u2013 10:00 pagi',\n                category: 'Ceramah (Bersemuka)',\n                title: 'Transformasi Digital Dalam Sektor Awam: Inisiatif Terkini Kerajaan Malaysia',\n                speaker: 'Puan Asmah binti Adam',\n                role: 'Timbalan Pengarah, Bahagian Pembangunan Strategik dan Arkitektur Digital (BSA), Jabatan Digital Negara',\n                location: 'Persada Canselori',\n                synopsis: 'Kertas pembentangan ini mengupas Rancangan Pendigitalan Sektor Awam (RPSA) 2026\u20132030, iaitu dokumen kerangka kerja dan panduan strategik transformasi digital sektor awam bertemakan \"Paduan Dinamik Keseluruhan Kerajaan\". Pelan ini merangkumi 5 Teras Strategik, 18 strategi, 44 program, serta 44 sasaran utama. RPSA telah diluncurkan secara rasmi oleh YBhg. Tan Sri Shamsul Azri bin Abu Bakar, Ketua Setiausaha Negara pada 28 September 2026 di PICC. Pembentangan ini memberi tumpuan khusus inisiatif-inisiatif yang terlibat dalam mentransformasikan digital dalam sektor awam demi merealisasikan visi \"Rakyat Pintar Digital\". Status pencapaian RPSA dipantau rapi 2 kali setahun dan dilaporkan dalam Mesyuarat Kerajaan Digital bagi memastikan ia memberikan impak sebenar kepada rakyat.',\n                linkUrl: 'https:\/\/tinyurl.com\/ceramahdigitalslot1',\n                isOnline: false,\n                icon: 'fa-landmark',\n                accentColor: '#0284c7',\n                order: 1\n            },\n            {\n                id: 'slot-2-tahrizi',\n                dayIndex: 0,\n                session: 'pagi',\n                time: '10:00 pagi \u2013 11:00 pagi',\n                category: 'Ceramah (Bersemuka)',\n                title: 'Adab Mendahului Reka Bentuk Keselamatan Siber: Memperkukuh Kepercayaan dalam Dunia Digital',\n                speaker: 'Ts. Tahrizi Tahreb',\n                role: 'Ketua Pegawai Keselamatan Maklumat (CISO), Bank Rakyat | Pengerusi MCCO & rawSEC',\n                location: 'Persada Canselori',\n                synopsis: 'Adab merupakan teras dalam membentuk nilai tanggungjawab serta etika semasa berinteraksi di ruang digital. Penerapan nilai murni bukan sahaja membina kepercayaan, malah memperkukuh keselamatan maklumat. Sesi ini meneroka bagaimana pemikiran adab-dahulu dan konsep keselamatan Jepun, anshin (ketenangan fikiran), menjadi benteng utama dalam reka bentuk keselamatan siber. Pembudayaan adab ini secara tidak langsung membentuk disiplin dalam reka bentuk persekitaran digital, seterusnya menjadikan institusi sebagai pemegang amanah yang memelihara kepercayaan warganya.',\n                linkUrl: 'https:\/\/www.ukm.my\/minggudigital\/wp-content\/uploads\/2026\/10\/02-Adab-Mendahului-Reka-Bentuk-Keselamatan-Siber-update.pdf',\n                isOnline: false,\n                icon: 'fa-shield-halved',\n                accentColor: '#0284c7',\n                order: 2\n            },\n            {\n                id: 'slot-3-perasmian',\n                dayIndex: 0,\n                session: 'pagi',\n                time: '11:00 pagi \u2013 12:30 t\/hari',\n                category: 'Majlis Rasmi',\n                title: 'Majlis Perasmian',\n                speaker: '',\n                role: 'Persada Canselori',\n                location: 'Persada Canselori',\n                details: [\n                    { text: 'Ucapan Alu-Aluan', indent: false },\n                    { text: 'Ucapan Perasmian', indent: false },\n                    { text: 'Montaj', indent: false },\n                    { text: 'Pelancaran PSD', indent: true },\n                    { text: 'Pelancaran Wadah Digital', indent: true },\n                    { text: 'Pelancaran Gerbang Perkhidmatan Digital (Digital4u)', indent: true },\n                    { text: 'Majlis Penghargaan Tamat Latihan UKM & Blackberry', indent: false },\n                    { text: 'CCOE Baseline Certification', indent: true },\n                    { text: 'Chief Information Security Officer (CISO)', indent: true }\n                ],\n                isOnline: false,\n                icon: 'fa-award',\n                accentColor: '#d97706',\n                highlight: true,\n                order: 3\n            },\n            {\n                id: 'slot-3',\n                dayIndex: 0,\n                session: 'petang',\n                time: '12:30 t\/hari \u2013 4:00 petang',\n                category: 'Pameran',\n                title: 'Pameran Inovasi & Perkhidmatan Digital',\n                speaker: '',\n                role: 'Pameran Inovasi & Perkhidmatan Digital Pusat Teknologi Digital',\n                location: 'Persada Canselori',\n                synopsis: 'Pameran fizikal teknologi dan inovasi perkhidmatan digital yang berlangsung di Persada Canselori bersempena Minggu Digital 2026.',\n                isOnline: false,\n                icon: 'fa-building-columns',\n                accentColor: '#06b6d4',\n                order: 4\n            },\n            {\n                id: 'slot-5',\n                dayIndex: 0,\n                session: 'petang',\n                time: '2:30 petang \u2013 4:30 petang',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Pembangunan Chatbot: Dari Asas ke Penyelesaian Pintar',\n                speaker: 'Prof. Madya Dr. Abdul Hadi bin Abdul Rahman',\n                role: 'Timbalan Dekan (Penyelidikan & Inovasi), Fakulti Teknologi & Sains Maklumat (FTSM), UKM',\n                location: '',\n                synopsis: 'Membicarakan evolusi pembangunan chatbot daripada fungsi asas kepada penyelesaian digital yang lebih pintar. Sesi ini meneroka bagaimana integrasi teknologi AI mampu meningkatkan kecekapan respons dan automasi perkhidmatan. Ia amat sesuai untuk memahami langkah praktikal dalam menaik taraf sistem perbualan dalam talian organisasi.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/96490993297?pwd=JrbUVAMVhsciky7uy2afcIjUL3JG4a.1',\n                isOnline: true,\n                icon: 'fa-comments',\n                accentColor: '#2563eb',\n                order: 5\n            },\n            {\n                id: 'slot-6',\n                dayIndex: 0,\n                session: 'petang',\n                time: '2:30 petang \u2013 3:00 petang',\n                category: 'Podcast',\n                title: 'AI untuk Perniagaan: Merangka Strategi, Memacu Inovasi, Menjana Pertumbuhan',\n                speaker: 'Mohd Zulhazri bin Azmi (Coach Zul)',\n                role: 'Business Master Coach',\n                synopsis: 'Sesi podcast membincangkan aplikasi praktikal kecerdasan buatan (AI) dalam memperkasakan urusan, merangka strategi berdaya saing serta memacu inovasi dan pertumbuhan perniagaan moden.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 6\n            },\n            {\n                id: 'slot-7',\n                dayIndex: 0,\n                session: 'petang',\n                time: '3:15 petang \u2013 3:45 petang',\n                category: 'Podcast',\n                title: 'Merungkai Gen Z: Mencipta Pengalaman Digital yang Bermakna',\n                speaker: 'Dr. Mohd Fadhli Shah Khaidzir',\n                role: 'Timbalan Pengarah, Pusat Hal Ehwal Pelajar (HEP-UKM)',\n                synopsis: 'Perkongsian mengenai pendekatan dan strategi membina pengalaman digital yang relevan, inklusif dan dinamik untuk generasi Gen Z di universiti.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 7\n            },\n            {\n                id: 'slot-8',\n                dayIndex: 0,\n                session: 'petang',\n                time: '4:00 petang \u2013 4:30 petang',\n                category: 'Podcast',\n                title: 'Sahsiah Digital: Jiwa di Dunia Nyata, Minda di Alam Maya',\n                speaker: 'Ts. Dr. Ahmad Firdhaus Arham',\n                role: 'Pengetua Kolej Keris Mas, UKM',\n                synopsis: 'Kupasan mendalam mengenai pembentukan jati diri, sahsiah terpuji dan keseimbangan psikologi warga dalam mengharmonikan kehidupan di dunia nyata dan alam maya.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 8\n            },\n\n            \/\/ ==================== 13 OKTOBER (SELASA) ====================\n            {\n                id: 'slot-9',\n                dayIndex: 1,\n                session: 'pagi',\n                time: '9:00 pagi \u2013 11:00 pagi',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Jangan Jadi Mangsa Scam: Bijak & Selamat di Dunia Digital',\n                speaker: 'Supt Noor Azwan Bin Mohammed',\n                role: 'SUPT Koordinasi Dasar\/ Teknikal, Cawangan Maklumat Sumber Manusia (MSM), Jabatan Pengurusan PDRM',\n                location: '',\n                synopsis: 'Ceramah ini memberi pendedahan menyeluruh mengenai pelbagai modus operandi dan taktik terkini penipuan dalam talian (scam). Para peserta akan mempelajari langkah-langkah praktikal untuk melindungi data peribadi dan kewangan agar kekal selamat di alam siber. Program ini bertujuan membina masyarakat yang lebih peka, bijak, dan berwaspada semasa mengendalikan teknologi serta perkhidmatan digital.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/93993198969?pwd=GbShojRYbXFhcC7ifzTWJWO1efB0UJ.1',\n                isOnline: true,\n                icon: 'fa-user-shield',\n                accentColor: '#2563eb',\n                order: 1\n            },\n            {\n                id: 'slot-10',\n                dayIndex: 1,\n                session: 'pagi',\n                time: '9:30 pagi \u2013 11:00 pagi',\n                category: 'Kursus (Dalam Talian)',\n                title: 'Literasi Komputer: Cakna AI',\n                speaker: 'Puan Suzilawati Ismail',\n                role: 'Anjuran Perpustakaan Tun Seri Lanang (PTSL)',\n                location: 'Facebook Live',\n                synopsis: 'Kursus Literasi Komputer: Cakna AI anjuran Perpustakaan Tun Seri Lanang (PTSL) ini bertujuan memberi bimbingan praktikal mengenai aplikasi kecerdasan buatan (AI) serta memperkasakan kemahiran literasi maklumat dan digital warga UKM.',\n                fbUrl: 'https:\/\/www.facebook.com\/share\/1C2sGvff1o\/?mibextid=wwXIfr',\n                isOnline: true,\n                icon: 'fa-book-bookmark',\n                accentColor: '#1877f2',\n                order: 2\n            },\n            {\n                id: 'slot-11',\n                dayIndex: 1,\n                session: 'pagi',\n                time: '9:30 pagi \u2013 11:00 pagi',\n                category: 'Podcast',\n                title: 'Dari Mainframe ke AI: Menelusuri Evolusi, Revolusi dan Transformasi Dunia Digital',\n                speaker: 'Prof. Emeritus Dato\\' Ir. Dr. Mohamad Zawawi Ismail, En. Idris Takyan & Dr. Shanuddin (M)',\n                role: '',\n                synopsis: 'Perbincangan retrospektif dan pandangan hadapan tentang bagaimana landskap pengkomputeran berevolusi daripada era kerangka utama (mainframe) sehinggalah revolusi kecerdasan buatan masa kini.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 3\n            },\n            {\n                id: 'slot-12',\n                dayIndex: 1,\n                session: 'pagi',\n                time: '11:00 pagi \u2013 12:30 t\/hari',\n                category: 'Bengkel (Dalam Talian)',\n                title: 'Prompt Bijak: Cipta Poster, Sticker dan Video dengan Gemini Pro',\n                speaker: 'Dr. Zaihosnita Hood',\n                role: 'Pusat Kajian Teknologi & Pengurusan Perisian (SOFTAM), FTSM UKM',\n                synopsis: 'Menguji kreativiti dan kemahiran peserta dalam mereka bentuk arahan yang tepat bagi menghasilkan output AI yang optimum. Peserta akan mempelajari teknik menulis arahan AI yang efektif untuk menghasilkan rekaan visual yang menarik, iaitu rekaan poster dan pelekat (sticker) dengan mudah.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/93728062381?pwd=UenJpfevFnOVWyT9R2CbPCuAwBPqdR.1',\n                isOnline: true,\n                icon: 'fa-wand-magic-sparkles',\n                accentColor: '#2563eb',\n                order: 4\n            },\n            {\n                id: 'slot-14',\n                dayIndex: 1,\n                session: 'petang',\n                time: '2:30 petang \u2013 2:50 petang',\n                category: 'Podcast',\n                title: 'Klik, Kembara & Kalbu: Menjelajah Dunia Solo Travel Bersama AI',\n                speaker: 'Dr Kartini Abd Wahab',\n                role: 'Fakulti Sains Sosial & Kemanusiaan',\n                synopsis: 'Perkongsian santai pengalaman pengembaraan solo dan bagaimana teknologi AI menjadi pembantu pintar dalam merancang perjalanan bermakna.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 5\n            },\n            {\n                id: 'slot-13',\n                dayIndex: 1,\n                session: 'petang',\n                time: '2:30 petang \u2013 4:30 petang',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'AI untuk Pentadbir: Memperkasa Produktiviti dan Transformasi Kerja Digital',\n                speaker: 'Prof. Ahmad Kamal Ariffin Mohd Ihsan',\n                role: 'Anjuran Kerjasama: DigitalUKM dan PERTADI UKM',\n                synopsis: 'Program ceramah ini membantu pentadbir memanfaatkan alatan AI bagi memacu produktiviti dan kecekapan operasi secara maksimum. Para peserta akan mempelajari strategi integrasi teknologi pintar dalam pelaksanaan tugas harian dan pembuat keputusan. Langkah ini penting untuk memperkasakan peranan pentadbir sebagai penggerak utama transformasi digital organisasi.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/98591426328?pwd=gcvMfKQmmyTuwYJM2m09nvhbkbGxhi.1',\n                isOnline: true,\n                icon: 'fa-robot',\n                accentColor: '#2563eb',\n                order: 6\n            },\n            {\n                id: 'slot-15b',\n                dayIndex: 1,\n                session: 'petang',\n                time: '3:00 petang \u2013 3:20 petang',\n                category: 'Podcast',\n                title: 'Bahasa Rancu Dalam Media Sosial: Antara Kreativiti, Kekeliruan dan Krisis Bahasa',\n                speaker: 'Dr. Daing Zairi bin Ma\\'Arof',\n                role: 'Penceramah Jemputan Siri Wadah Digital',\n                synopsis: 'Perkongsian tajam dan santai yang mengupas fenomena bahasa rancu dan slanga di media sosial masa kini \u2013 sama ada ia satu bentuk ekspresi kreativiti anak muda, punca kekeliruan komunikasi, atau ancaman krisis keaslian bahasa ibunda.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 7\n            },\n            {\n                id: 'slot-13b',\n                dayIndex: 1,\n                session: 'petang',\n                time: '3:00 petang \u2013 5:00 petang',\n                category: 'Webinar (Dalam Talian)',\n                title: 'Webinar PKAUKM 2026 - Integriti Akademik 2026 : Antara Prestasi dan Integriti, Di Mana Pendirian Kita?',\n                speaker: 'Prof. Dr. Nazura Abdul Manap',\n                role: 'Pusat Kajian Undang-Undang Antarabangsa & Siyar (CILAS), Fakulti Undang-Undang UKM',\n                synopsis: 'Webinar ini terbuka kepada semua warga PKAUKM. Jom bersama-sama mendalami kepentingan integriti akademik dalam mengimbangi tuntutan prestasi dan kecemerlangan akademik.\\n\\nKehadiran akan diberikan e-sijil kepada semua peserta yang menghadiri webinar ini.',\n                meetUrl: 'https:\/\/meet.google.com\/mse-kjyz-vxw',\n                isOnline: true,\n                icon: 'fa-scale-balanced',\n                accentColor: '#2563eb',\n                order: 8\n            },\n            {\n                id: 'slot-16',\n                dayIndex: 1,\n                session: 'petang',\n                time: '3:30 petang \u2013 3:50 petang',\n                category: 'Podcast',\n                title: 'Mula Cepat, Tampil Hebat: Membina Keusahawanan dan Jenama Peribadi dalam Era AI',\n                speaker: 'Ling Chin Wei (Pelajar)',\n                role: 'Fakulti Teknologi & Sains Maklumat',\n                synopsis: 'Pandangan anak muda tentang penerapan teknologi AI untuk merangsang inovasi, membina jenama peribadi yang berdaya tahan dan mencetuskan peluang keusahawanan pelajar.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 9\n            },\n            {\n                id: 'slot-17',\n                dayIndex: 1,\n                session: 'petang',\n                time: '4:00 petang \u2013 4:20 petang',\n                category: 'Podcast',\n                title: 'Anjakan Minda Digital: AI Memperkasa, Pelajar Berfikir, Pendidikan Berevolusi',\n                speaker: 'Ts. Dr. Azura Ishak',\n                role: 'Fakulti Teknologi & Sains Maklumat',\n                synopsis: 'Meneliti bagaimana AI dapat memperkasakan dan merevolusikan proses pengajaran dan pembelajaran (PdP) tanpa mengorbankan daya fikir kritis dan kognitif pelajar.',\n                isOnline: true,\n                isPodcast: true,\n                icon: 'fa-podcast',\n                accentColor: '#e11d48',\n                order: 10\n            },\n\n            \/\/ ==================== 14 OKTOBER (RABU) ====================\n            {\n                id: 'slot-18',\n                dayIndex: 2,\n                session: 'pagi',\n                time: '9:00 pagi \u2013 11:00 pagi',\n                category: 'Latihan (Dalam Talian)',\n                title: 'Biarkan Power Automate Kerja Keras, dan Kita Kerja Bijak',\n                speaker: 'Puan Nor Daina binti Mohamad Yunus',\n                role: 'Power Platform Specialist, Enfrasys Solutions Sdn. Bhd.',\n                synopsis: 'Ceramah ini mengupas bagaimana Microsoft Power Automate berupaya merevolusikan cara menguruskan tugas dan proses kerja melalui automasi yang pintar dan teratur. Dengan keupayaan menghubungkan pelbagai aplikasi, perkhidmatan dan sumber data, teknologi ini mampu mengoptimumkan aliran kerja merentas pelbagai platform serta meminimumkan risiko kesilapan. Selain itu, peserta turut didedahkan kepada peranan Kecerdasan Buatan (AI) dalam memperkayakan automasi, membolehkan maklumat dianalisis dan diproses dengan lebih bijak.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/94968541145?pwd=jw5DxmCg6aBMLT66khTTSiFjxAHQT9.1',\n                linkUrl: 'https:\/\/www.ukm.my\/minggudigital\/wp-content\/uploads\/2026\/10\/06-Slaid-Nota-Biarkan-Power-Automate-Kerja-Keras-dan-Kita-Kerja-Bijak.pdf',\n                isOnline: true,\n                icon: 'fa-gears',\n                accentColor: '#2563eb',\n                order: 1\n            },\n            {\n                id: 'slot-19',\n                dayIndex: 2,\n                session: 'pagi',\n                time: '11:00 pagi \u2013 12:30 t\/hari',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Gemini 101: Bagaimana AI Menyelamatkan Anda Daripada \\'Burnout\\' di Pejabat',\n                speaker: 'Ts. Ahmad Omar Bin Arbain',\n                role: 'Pengurus, Workspace Solutions Engineer, Awantec Systems Sdn Bhd',\n                synopsis: 'Mendedahkan teknik mengoptimumkan Google Gemini Workspace untuk mengautomasikan tugasan rutin pejabat, mengurus beban kerja dengan lebih tenang, dan mengelakkan burnout.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/92860107641?pwd=Uq9dQHw0d7G6iTILpSUAiNbGspwS4y.1',\n                linkUrl: 'https:\/\/www.ukm.my\/minggudigital\/wp-content\/uploads\/2026\/10\/07a-Nota-1-_-Gemini-101_-Bagaimana-AI-Menyelamatkan-Anda-Daripada-Burnout-di-Pejabat-Peserta.pdf',\n                extraLinks: [\n                    {\n                        title: 'Prompting Guide 101',\n                        url: 'https:\/\/www.ukm.my\/minggudigital\/wp-content\/uploads\/2026\/10\/07b-Nota-2-_-gemini_for_workspace_prompt_guide_october_2024_digital_final.pdf'\n                    }\n                ],\n                isOnline: true,\n                icon: 'fa-brain',\n                accentColor: '#2563eb',\n                order: 2\n            },\n            {\n                id: 'slot-20a',\n                dayIndex: 2,\n                session: 'petang',\n                time: '2:30 petang \u2013 3:30 petang',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Future-Ready Learning and Work: AI-Powered Collaboration with Zoom',\n                speaker: 'Rendy Irawan',\n                role: 'Solution Engineer, Zoom (Indonesia)',\n                synopsis: 'Perkongsian eksklusif bersama wakil Zoom mengenai integrasi AI dan teknologi kolaborasi pintar dalam memperkasa pembelajaran serta persekitaran kerja masa hadapan yang dinamik dan efisien.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/96227178784?pwd=zi9jTg39Tlad1ybezDax188Iqt8SoX.1',\n                isOnline: true,\n                icon: 'fa-video',\n                accentColor: '#2563eb',\n                order: 3\n            },\n            {\n                id: 'slot-20b',\n                dayIndex: 2,\n                session: 'petang',\n                time: '3:30 petang \u2013 4:40 petang',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'TENDZONE Next-Gen Smart Campus',\n                speaker: 'Korshal Bhandari',\n                role: 'Business Development Director, Tendzone (M) Sdn. Bhd.',\n                synopsis: 'TENDZONE Next-Gen Smart Campus ialah konsep kampus pintar yang mengintegrasikan AI, Smart Classroom, Internet of Things (IoT), sistem audio visual, rangkaian dan pengurusan berpusat bagi mewujudkan persekitaran pendidikan yang pintar, interaktif dan bersedia untuk masa hadapan. Konsep ini menghubungkan pelbagai sistem dan peranti bagi menyokong pengajaran dan pembelajaran, pengurusan ruang serta operasi kampus secara cekap dan bersepadu. Antara komponen utama konsep ini ialah Smart Classroom, Integrasi AI & IoT, Pengurusan Berpusat, Pembelajaran Digital dan Kecekapan Operasi Kampus, yang bersama-sama menyokong Future-Ready Education.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/96653291331?pwd=iCki9MIchuOD2rk2EI4BrOORxeM0Az.1',\n                isOnline: true,\n                icon: 'fa-chalkboard-user',\n                accentColor: '#2563eb',\n                order: 4\n            },\n\n            \/\/ ==================== 15 OKTOBER (KHAMIS) ====================\n            {\n                id: 'slot-21',\n                dayIndex: 3,\n                session: 'pagi',\n                time: '9:00 pagi \u2013 11:00 pagi',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Teknologi Memuncul Dunia Digital: Apa Seterusnya?',\n                speaker: 'Prof. Dr. Mohamad Haniff Md Saad',\n                role: 'Pengarah, Pusat Teknologi Digital UKM',\n                synopsis: 'Sesi ceramah ini mengupas evolusi dan impak teknologi memuncul (emerging technologies) dalam membentuk landskap dunia digital masa hadapan serta strategi persediaan organisasi dalam mengharungi gelombang inovasi seterusnya.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/94979263360?pwd=VHOONgyM4CusVbwLI1FU6laWAz3pdG.1',\n                isOnline: true,\n                icon: 'fa-microchip',\n                accentColor: '#2563eb',\n                order: 1\n            },\n            {\n                id: 'slot-22',\n                dayIndex: 3,\n                session: 'pagi',\n                time: '11:00 pagi \u2013 12:30 t\/hari',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Perundangan dan Digital: Elakkan Tindakan Mahkamah Terhadap Anda',\n                speaker: 'Puan Raihanah Abd Razak',\n                role: 'Timbalan Pendakwa Raya, Jabatan Peguam Negara Malaysia',\n                synopsis: 'Perkembangan teknologi digital dan ruang siber yang pesat mempermudahkan urusan harian. Namun tanpa disedari, kesilapan kecil dalam penggunaan platform digital seperti menghantar e-mel palsu, penyebaran maklumat tidak sahih, buli siber mahupun pelanggaran hak cipta boleh mendedahkan individu kepada implikasi undang-undang yang serius.\\n\\nCeramah ini memberikan kesedaran dan pemahaman mengenai batasan serta implikasi undang-undang berkaitan penyalahgunaan teknologi digital.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/95402524986?pwd=BUiuwVug2aeEa8DH3GX31LBUwzC2zL.1',\n                linkUrl: 'https:\/\/drive.google.com\/file\/d\/1JX6seXVmyN6hqPEvyMXhI1DL4n5Ogop9\/view',\n                isOnline: true,\n                icon: 'fa-scale-balanced',\n                accentColor: '#2563eb',\n                order: 2\n            },\n            {\n                id: 'slot-23',\n                dayIndex: 3,\n                session: 'petang',\n                time: '2:30 petang \u2013 3:30 petang',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Evolusi AI: Dari sistem pakar ke Agentic AI',\n                speaker: 'Ts. Dr. Mohd Nor Akmal Khalid',\n                role: 'Pensyarah Kanan, Pusat Kajian Teknologi Kecerdasan Buatan (CAIT), FTSM UKM',\n                synopsis: 'Perkembangan kecerdasan buatan (AI) merangkumi evolusi daripada sistem pakar berasaskan peraturan kepada AI generatif yang mampu menghasilkan kandungan, dan seterusnya kepada Agentic AI yang berupaya merancang, membuat keputusan serta melaksanakan tugasan secara lebih autonomi. Sesi ini membincangkan perkembangan teknologi tersebut serta implikasinya terhadap cara manusia bekerja, membuat keputusan dan berinteraksi dengan teknologi.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/92668877093?pwd=rZtIQVx7sayC4de11cfH1cvzrpvQoZ.1',\n                isOnline: true,\n                icon: 'fa-robot',\n                accentColor: '#2563eb',\n                order: 3\n            },\n\n            \/\/ ==================== 16 OKTOBER (JUMAAT) ====================\n            {\n                id: 'slot-24',\n                dayIndex: 4,\n                session: 'pagi',\n                time: '9:00 pagi \u2013 11:00 pagi',\n                category: 'Ceramah (Dalam Talian)',\n                title: 'Dosa dan Pahala Digital',\n                speaker: 'Prof. Dato\u2019 Dr. Haji Mohd Izhar Ariff bin Mohd Kashim',\n                role: 'Dekan, Fakulti Pengajian Islam UKM',\n                location: '',\n                synopsis: 'Dosa dan Pahala Digital membincangkan bagaimana kehidupan manusia di alam digital turut mempunyai dimensi pahala dan dosa. Setiap hantaran, komen, perkongsian, tontonan dan jejak digital bukan sekadar aktiviti teknologi, tetapi boleh menjadi amal yang diberi ganjaran atau perbuatan yang dipertanggungjawabkan di sisi Allah SWT.\\n\\nBerpandukan al-Quran, al-Sunnah dan prinsip fiqh semasa, Dosa dan Pahala Digital mengajak peserta membina \"takwa digital\" \u2014 iaitu menggunakan teknologi dengan ilmu, adab dan rasa bertanggungjawab, kerana apa yang ditaip dengan jari hari ini mungkin menjadi pahala yang terus mengalir atau dosa yang terus berulang, walaupun selepas seseorang meninggal dunia.',\n                zoomUrl: 'https:\/\/ukm-edu-my.zoom.us\/j\/98645628887?pwd=YmJEab89XVbmJ8mEBhsrc1O82mAUWB.1',\n                isOnline: true,\n                icon: 'fa-compass-drafting',\n                accentColor: '#2563eb',\n                order: 1\n            },\n            {\n                id: 'slot-25',\n                dayIndex: 4,\n                session: 'pagi',\n                time: '11:15 pagi',\n                category: 'Majlis Rasmi',\n                title: 'Majlis Penutup & Penyampaian Hadiah',\n                speaker: '',\n                role: 'Penutupan rasmi & penyampaian hadiah',\n                location: 'Bilik Mesyuarat Teratai, Pusat Teknologi Digital',\n                details: [\n                    { text: 'Ucapan penutup', indent: false },\n                    { text: 'Penyampaian hadiah pertandingan', indent: false },\n                    { text: 'Pertandingan Video Pendek', indent: true },\n                    { text: 'Penyampaian hadiah Artikel terbaik Wadah Digital', indent: true },\n                    { text: 'Penyampaian cenderahati juri Artikel Terbaik Wadah Digital bagi edisi Khas Gemini Notebook', indent: false }\n                ],\n                isOnline: false,\n                icon: 'fa-flag-checkered',\n                accentColor: '#d97706',\n                highlight: true,\n                order: 2\n            }\n        ];\n\n        let activeDayView = 'all';\n        let activeFilter = 'all';\n        let searchQuery = '';\n\n        function handleSearch(val) {\n            searchQuery = val;\n            const clearBtn = document.getElementById('clearSearchBtn');\n            if (clearBtn) {\n                if (val.trim().length > 0) {\n                    clearBtn.classList.remove('hidden');\n                } else {\n                    clearBtn.classList.add('hidden');\n                }\n            }\n            renderScheduleCards();\n        }\n\n        function clearSearch() {\n            const input = document.getElementById('searchInput');\n            if (input) {\n                input.value = '';\n            }\n            handleSearch('');\n        }\n\n        function setFilter(filterType) {\n            activeFilter = filterType;\n            document.querySelectorAll('.filter-tab-btn').forEach(btn => {\n                btn.classList.remove('filter-btn-active');\n            });\n            const activeBtn = document.getElementById(`filter-${filterType}`);\n            if (activeBtn) {\n                activeBtn.classList.add('filter-btn-active');\n            }\n            renderScheduleCards();\n        }\n\n        function switchDayView(day, element) {\n            activeDayView = day;\n            document.querySelectorAll('.day-tab').forEach(btn => {\n                btn.classList.remove('day-tab-active');\n                btn.classList.add('text-slate-600');\n            });\n            element.classList.add('day-tab-active');\n            element.classList.remove('text-slate-600');\n\n            const labelEl = document.getElementById('activeDayLabel');\n            if (day === 'all') {\n                labelEl.textContent = 'Memaparkan 5 Hari Penuh';\n            } else {\n                const targetDay = SCHEDULE_DAYS.find(d => d.id === day);\n                labelEl.textContent = `${targetDay.day} (${targetDay.date})`;\n            }\n\n            renderScheduleCards();\n        }\n\n        function renderScheduleCards() {\n            const container = document.getElementById('scheduleDaysContainer');\n            container.innerHTML = '';\n\n            const daysToRender = activeDayView === 'all' \n                ? SCHEDULE_DAYS \n                : SCHEDULE_DAYS.filter(d => d.id === activeDayView);\n\n            let totalRenderedSlots = 0;\n\n            daysToRender.forEach(day => {\n                let dayItems = SCHEDULE_ITEMS.filter(it => it.dayIndex === day.id);\n\n                dayItems.sort((a, b) => (a.order || 0) - (b.order || 0));\n\n                if (activeFilter === 'pagi') {\n                    dayItems = dayItems.filter(it => it.session === 'pagi');\n                } else if (activeFilter === 'petang') {\n                    dayItems = dayItems.filter(it => it.session === 'petang');\n                } else if (activeFilter === 'podcast') {\n                    dayItems = dayItems.filter(it => it.isPodcast);\n                } else if (activeFilter === 'online') {\n                    dayItems = dayItems.filter(it => it.isOnline);\n                }\n\n                if (searchQuery.trim() !== '') {\n                    const q = searchQuery.toLowerCase().trim();\n                    dayItems = dayItems.filter(it => {\n                        const titleMatch = (it.title || '').toLowerCase().includes(q);\n                        const speakerMatch = (it.speaker || '').toLowerCase().includes(q);\n                        const roleMatch = (it.role || '').toLowerCase().includes(q);\n                        const locMatch = (it.location || '').toLowerCase().includes(q);\n                        const synopsisMatch = (it.synopsis || '').toLowerCase().includes(q);\n                        const categoryMatch = (it.category || '').toLowerCase().includes(q);\n                        const detailsMatch = it.details ? it.details.some(d => (typeof d === 'string' ? d : d.text || '').toLowerCase().includes(q)) : false;\n                        return titleMatch || speakerMatch || roleMatch || locMatch || synopsisMatch || categoryMatch || detailsMatch;\n                    });\n                }\n\n                if (dayItems.length === 0) return;\n\n                totalRenderedSlots += dayItems.length;\n\n                const daySection = document.createElement('section');\n                daySection.className = 'flex flex-col gap-4 animate-fadeIn';\n\n                daySection.innerHTML = `\n                    <div class=\"bg-gradient-to-r ${day.gradient} text-white px-5 py-3 rounded-2xl shadow-md border border-white\/20 flex items-center justify-between\">\n                        <div class=\"flex items-center gap-3\">\n                            <div class=\"w-8 h-8 rounded-xl bg-slate-950\/40 backdrop-blur-sm flex items-center justify-center text-sm font-bold border border-cyan-400\/50 text-cyan-300 shadow-[0_0_10px_rgba(6,182,212,0.4)]\">\n                                <i class=\"fa-solid ${day.icon}\"><\/i>\n                            <\/div>\n                            <div>\n                                <h2 class=\"text-base sm:text-lg font-extrabold tracking-wide cyber-font flex items-center gap-2 text-white\">\n                                    <span class=\"day-header-title text-lg sm:text-xl font-black\">${day.day.toUpperCase()}<\/span>\n                                    <span class=\"day-header-date font-bold text-xs sm:text-sm\">\/ ${day.date}<\/span>\n                                <\/h2>\n                            <\/div>\n                        <\/div>\n                        <span class=\"text-xs font-bold px-3 py-1 rounded-full ${day.badgeBg} backdrop-blur-sm border shadow-sm\">\n                            ${dayItems.length} Aktiviti\n                        <\/span>\n                    <\/div>\n\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\" id=\"cards-grid-${day.id}\">\n                    <\/div>\n                `;\n\n                container.appendChild(daySection);\n                const cardsGrid = daySection.querySelector(`#cards-grid-${day.id}`);\n\n                dayItems.forEach(item => {\n                    const cardEl = document.createElement('div');\n                    \n                    let pastelClass = 'card-bersemuka';\n                    let accentStripe = '#0891b2';\n\n                    if (item.category === 'Majlis Rasmi' || item.highlight) {\n                        pastelClass = 'card-rasmi';\n                        accentStripe = '#d97706';\n                    } else if (item.isPodcast) {\n                        pastelClass = 'card-podcast';\n                        accentStripe = '#f43f5e';\n                    } else if (item.fbUrl) {\n                        pastelClass = 'card-online';\n                        accentStripe = '#1877f2';\n                    } else if (item.zoomUrl || item.meetUrl || (item.isOnline && !item.isPodcast)) {\n                        pastelClass = 'card-online';\n                        accentStripe = '#2563eb';\n                    } else {\n                        pastelClass = 'card-bersemuka';\n                        accentStripe = '#06b6d4';\n                    }\n\n                    cardEl.className = `schedule-card ${pastelClass} rounded-2xl p-5 border flex flex-col justify-between cursor-pointer relative overflow-hidden shadow-sm`;\n\n                    cardEl.onclick = () => {\n                        showModal(item);\n                    };\n\n                    let formatBadge = '';\n                    if (item.category === 'Majlis Rasmi') {\n                        formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-300\">\u2605 MAJLIS RASMI<\/span>';\n                    } else if (item.isPodcast) {\n                        formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-rose-100 text-rose-700 border border-rose-300\">\ud83c\udf99 PODCAST<\/span>';\n                    } else if (item.fbUrl) {\n                        formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-900 border border-blue-300\">\u25cf DALAM TALIAN<\/span>';\n                    } else if (item.category === 'Ceramah (Hybrid)') {\n                        formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800 border border-blue-300\">\u25cf HIBRID<\/span>';\n                    } else if (item.isOnline) {\n                        formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800 border border-blue-300\">\u25cf DALAM TALIAN<\/span>';\n                    } else {\n                        formatBadge = '<span class=\"text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-cyan-100 text-cyan-800 border border-cyan-300\">BERSEMUKA<\/span>';\n                    }\n\n                    const zoomBadge = item.zoomUrl \n                        ? `<span class=\"inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-md bg-blue-600 text-white shadow-sm shadow-blue-500\/20\">\n                            <i class=\"fa-solid fa-video text-[9px]\"><\/i> Zoom\n                           <\/span>` \n                        : '';\n\n                    const meetBadge = item.meetUrl \n                        ? `<span class=\"inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-md bg-emerald-600 text-white shadow-sm shadow-emerald-500\/20\">\n                            <i class=\"fa-solid fa-video text-[9px]\"><\/i> Meet\n                           <\/span>` \n                        : '';\n\n                    const fbBadge = item.fbUrl \n                        ? `<span class=\"inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-md bg-blue-600 text-white shadow-sm shadow-blue-600\/20\">\n                            <i class=\"fa-brands fa-facebook text-[9px]\"><\/i> FB Live\n                           <\/span>` \n                        : '';\n\n                    const linkBadge = (item.linkUrl && !item.isPodcast)\n                        ? `<span class=\"inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-md bg-sky-600 text-white shadow-sm shadow-sky-500\/20\">\n                            <i class=\"fa-solid fa-file-powerpoint text-[9px]\"><\/i> Nota Pembentangan\n                           <\/span>`\n                        : '';\n\n                    let extraTitleButtonsHtml = '';\n                    if (item.extraLinks && item.extraLinks.length > 0) {\n                        extraTitleButtonsHtml = `\n                            <div class=\"mt-2 flex flex-wrap gap-1.5\">\n                                ${item.extraLinks.map(ext => `\n                                    <a href=\"${ext.url}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-[11px] font-semibold transition-all shadow-sm hover:shadow\">\n                                        <i class=\"fa-solid fa-book-open text-[10px]\"><\/i>\n                                        <span>${ext.title}<\/span>\n                                        <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px] opacity-80\"><\/i>\n                                    <\/a>\n                                `).join('')}\n                            <\/div>\n                        `;\n                    }\n\n                    let actionButtons = [];\n                    if (item.zoomUrl) {\n                        actionButtons.push(`<a href=\"${item.zoomUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"px-2.5 py-1 rounded-lg bg-blue-600 hover:bg-blue-700 text-white border border-blue-500 text-[11px] font-semibold transition-colors flex items-center gap-1 shadow-sm\">\n                            <i class=\"fa-solid fa-video text-[10px]\"><\/i> Zoom <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n                        <\/a>`);\n                    }\n                    if (item.meetUrl) {\n                        actionButtons.push(`<a href=\"${item.meetUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"px-2.5 py-1 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white border border-emerald-500 text-[11px] font-semibold transition-colors flex items-center gap-1 shadow-sm\">\n                            <i class=\"fa-solid fa-video text-[10px]\"><\/i> Meet <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n                        <\/a>`);\n                    }\n                    if (item.fbUrl) {\n                        actionButtons.push(`<a href=\"${item.fbUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"px-2.5 py-1 rounded-lg bg-blue-600 hover:bg-blue-700 text-white border border-blue-500 text-[11px] font-semibold transition-colors flex items-center gap-1 shadow-sm\">\n                            <i class=\"fa-brands fa-facebook text-[10px]\"><\/i> FB Live <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n                        <\/a>`);\n                    }\n                    if (item.linkUrl) {\n                        const isYt = item.isPodcast || item.linkUrl.includes('youtube');\n                        const btnLabel = isYt ? 'Tonton' : 'Pautan Nota';\n                        const btnIcon = isYt ? 'fa-brands fa-youtube' : 'fa-solid fa-link';\n                        const btnBg = isYt ? 'bg-rose-600 hover:bg-rose-700 border-rose-500' : 'bg-sky-600 hover:bg-sky-700 border-sky-500';\n                        actionButtons.push(`<a href=\"${item.linkUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"event.stopPropagation()\" class=\"px-2.5 py-1 rounded-lg ${btnBg} text-white border text-[11px] font-semibold transition-colors flex items-center gap-1 shadow-sm\">\n                            <i class=\"${btnIcon} text-[10px]\"><\/i> ${btnLabel} <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n                        <\/a>`);\n                    }\n\n                    const actionButtonsHtml = actionButtons.length > 0\n                        ? `<div class=\"flex items-center flex-wrap gap-1.5\">${actionButtons.join('')}<\/div>`\n                        : '';\n\n                    cardEl.innerHTML = `\n                        <div class=\"absolute left-0 top-3 bottom-3 w-1 rounded-r-full\" style=\"background: ${accentStripe}\"><\/div>\n\n                        <div>\n                            <div class=\"flex items-center justify-between gap-2 mb-3\">\n                                <div class=\"flex items-center flex-wrap gap-1.5\">\n                                    ${formatBadge}\n                                    ${zoomBadge}\n                                    ${meetBadge}\n                                    ${fbBadge}\n                                    ${linkBadge}\n                                <\/div>\n                                <span class=\"text-[11px] font-semibold font-mono text-slate-600 bg-white\/80 px-2 py-0.5 rounded-md border border-slate-200\">\n                                    ${item.time.includes('\u2013') ? item.time.split('\u2013')[0].trim() : item.time}\n                                <\/span>\n                            <\/div>\n\n                            <div class=\"flex items-start gap-3 mb-3\">\n                                <div class=\"w-9 h-9 rounded-xl flex items-center justify-center text-sm shrink-0 shadow-sm bg-white border border-slate-200\" style=\"color: ${accentStripe}\">\n                                    <i class=\"fa-solid ${item.icon}\"><\/i>\n                                <\/div>\n                                <div class=\"min-w-0 flex-1\">\n                                    <h4 class=\"text-sm font-bold text-slate-900 leading-snug hover:text-indigo-600 transition-colors\">\n                                        ${item.title}\n                                    <\/h4>\n                                    <span class=\"text-[11px] text-slate-600 block mt-0.5\"><i class=\"fa-regular fa-clock mr-1 text-slate-500\"><\/i>${item.time}<\/span>\n                                    ${extraTitleButtonsHtml}\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"pt-3 border-t border-slate-200\/80 mt-2 flex flex-col gap-2\">\n                            ${item.speaker ? `\n                                <div class=\"min-w-0\">\n                                    <p class=\"text-xs font-bold text-slate-800 flex items-center gap-1.5 truncate\">\n                                        <i class=\"fa-solid fa-microphone-lines text-slate-500 text-[11px]\"><\/i>\n                                        <span>${item.speaker}<\/span>\n                                    <\/p>\n                                    ${item.role ? `<p class=\"text-[11px] text-slate-600 truncate pl-4\">${item.role}<\/p>` : ''}\n                                <\/div>\n                            ` : ''}\n\n                            ${item.location ? `\n                                <p class=\"text-xs font-semibold ${item.category === 'Majlis Rasmi' ? 'text-amber-900' : (item.isOnline ? 'text-blue-900' : 'text-cyan-900')} flex items-center gap-1.5 truncate\">\n                                    <i class=\"fa-solid fa-location-dot ${item.category === 'Majlis Rasmi' ? 'text-amber-600' : (item.isOnline ? 'text-blue-600' : 'text-cyan-700')} text-[11px]\"><\/i>\n                                    <span>${item.location}<\/span>\n                                <\/p>\n                            ` : ''}\n\n                            <div class=\"flex items-center justify-between gap-2 pt-1 flex-wrap\">\n                                <span class=\"text-[11px] font-bold text-slate-700 hover:text-indigo-600 flex items-center gap-1\">\n                                    ${item.synopsis ? '<i class=\"fa-solid fa-circle-info\"><\/i> Sinopsis' : (item.details ? '<i class=\"fa-solid fa-list-check\"><\/i> Perincian' : '<i class=\"fa-solid fa-circle-info\"><\/i> Maklumat')}\n                                    <i class=\"fa-solid fa-arrow-right text-[9px] transition-transform group-hover:translate-x-0.5\"><\/i>\n                                <\/span>\n                                ${actionButtonsHtml}\n                            <\/div>\n                        <\/div>\n                    `;\n\n                    cardsGrid.appendChild(cardEl);\n                });\n            });\n\n            if (totalRenderedSlots === 0) {\n                container.innerHTML = `\n                    <div class=\"glass-panel p-10 rounded-3xl border border-slate-200 text-center flex flex-col items-center justify-center gap-3 my-4 bg-white\">\n                        <div class=\"w-14 h-14 rounded-2xl bg-indigo-50 border border-indigo-100 text-indigo-500 flex items-center justify-center text-xl shadow-sm\">\n                            <i class=\"fa-solid fa-magnifying-glass\"><\/i>\n                        <\/div>\n                        <h3 class=\"text-base font-bold text-slate-800\">Tiada Aktiviti Ditemui<\/h3>\n                        <p class=\"text-xs text-slate-500 max-w-md\">\n                            Tiada slot atau program yang sepadan dengan kata kunci carian \n                            <span class=\"font-semibold text-indigo-600\">\"${searchQuery}\"<\/span>.\n                        <\/p>\n                        <button onclick=\"clearSearch()\" class=\"mt-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-semibold shadow-md shadow-indigo-500\/20 transition-all flex items-center gap-1.5\">\n                            <i class=\"fa-solid fa-arrow-rotate-left\"><\/i> Set Semula Carian\n                        <\/button>\n                    <\/div>\n                `;\n            }\n        }\n\n        function showModal(data) {\n            const modal = document.getElementById('detailModal');\n            const container = document.getElementById('modalContainer');\n            const content = document.getElementById('modalContent');\n\n            const html = `\n                <div class=\"flex items-start gap-3.5 mb-4\">\n                    <div class=\"w-12 h-12 rounded-2xl flex items-center justify-center text-white text-xl shrink-0 shadow-md\" style=\"background: ${data.accentColor || '#4f46e5'}\">\n                        <i class=\"fa-solid ${data.icon}\"><\/i>\n                    <\/div>\n                    <div>\n                        <div class=\"flex items-center flex-wrap gap-2 mb-2\">\n                            ${data.category === 'Majlis Rasmi'\n                                ? '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-300\">\u2605 MAJLIS RASMI<\/span>'\n                                : (data.isPodcast\n                                    ? '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-rose-100 text-rose-700 border border-rose-300\">\ud83c\udf99 PODCAST<\/span>'\n                                    : (data.category === 'Ceramah (Hybrid)'\n                                        ? '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800 border border-blue-300\">\u25cf HIBRID<\/span>'\n                                        : (data.isOnline\n                                              ? '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800 border border-blue-300\">DALAM TALIAN<\/span>'\n                                              : '<span class=\"text-[10.5px] font-bold px-2.5 py-0.5 rounded-full bg-cyan-100 text-cyan-800 border border-cyan-300\">BERSEMUKA<\/span>')))}\n                            ${data.category ? `<span class=\"text-[10.5px] font-semibold px-2.5 py-0.5 rounded-md bg-slate-100 text-slate-700 border border-slate-200\">${data.category}<\/span>` : ''}\n                        <\/div>\n                        <h3 class=\"text-base sm:text-lg font-bold text-slate-900 leading-snug\">${data.title}<\/h3>\n                        <p class=\"text-xs text-slate-500 font-mono mt-1.5\"><i class=\"fa-regular fa-clock mr-1 text-indigo-500\"><\/i>${data.time}<\/p>\n                    <\/div>\n                <\/div>\n\n                ${data.speaker ? `\n                    <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200 space-y-1 mb-3.5\">\n                        <span class=\"text-[10px] font-bold tracking-wider text-slate-400 uppercase\">Penceramah \/ Penyampai<\/span>\n                        <p class=\"font-bold text-slate-800 text-sm flex items-center gap-2\">\n                            <i class=\"fa-solid fa-microphone text-indigo-500\"><\/i> ${data.speaker}\n                        <\/p>\n                        ${data.role ? `<p class=\"text-xs text-slate-600 leading-relaxed\">${data.role}<\/p>` : ''}\n                    <\/div>\n                ` : ''}\n\n                ${data.location ? `\n                    <div class=\"bg-slate-50 p-3.5 rounded-xl border border-slate-200 text-xs text-slate-900 font-medium flex items-center gap-2 mb-3.5\">\n                        <i class=\"fa-solid fa-location-dot text-indigo-600 text-sm\"><\/i>\n                        <span>Lokasi \/ Tempat: <strong class=\"text-slate-950 font-bold\">${data.location}<\/strong><\/span>\n                    <\/div>\n                ` : ''}\n\n                ${data.fbUrl ? `\n                    <div class=\"mb-3.5\">\n                        <a href=\"${data.fbUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold text-xs transition-colors shadow-md shadow-blue-600\/20\">\n                            <i class=\"fa-brands fa-facebook text-base\"><\/i> Tonton di Facebook Live PTSL <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\n                        <\/a>\n                    <\/div>\n                ` : ''}\n\n                ${data.zoomUrl ? `\n                    <div class=\"mb-3.5\">\n                        <a href=\"${data.zoomUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold text-xs transition-colors shadow-md shadow-blue-500\/20\">\n                            <i class=\"fa-solid fa-video text-sm\"><\/i> Sertai Sesi Zoom (Klik Di Sini) <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\n                        <\/a>\n                    <\/div>\n                ` : ''}\n\n                ${data.meetUrl ? `\n                    <div class=\"mb-3.5\">\n                        <a href=\"${data.meetUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs transition-colors shadow-md shadow-emerald-500\/20\">\n                            <i class=\"fa-solid fa-video text-sm\"><\/i> Sertai Sesi Google Meet (Klik Di Sini) <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\n                        <\/a>\n                    <\/div>\n                ` : ''}\n\n                ${data.linkUrl ? `\n                    <div class=\"mb-3 flex flex-wrap gap-2\">\n                        <a href=\"${data.linkUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl ${data.isPodcast || data.linkUrl.includes('youtube') ? 'bg-rose-600 hover:bg-rose-700 shadow-rose-500\/20' : 'bg-sky-600 hover:bg-sky-700 shadow-sky-500\/20'} text-white font-semibold text-xs transition-colors shadow-md\">\n                            <i class=\"${data.isPodcast || data.linkUrl.includes('youtube') ? 'fa-brands fa-youtube text-base' : 'fa-solid fa-file-pdf text-sm'}\"><\/i> \n                            ${data.isPodcast || data.linkUrl.includes('youtube') ? 'Tonton di YouTube @wadahdigitalukm' : (data.extraLinks ? 'Muat Turun Nota 1 (Peserta)' : 'Muat Turun Nota \/ Dokumen Pembentangan')} \n                            <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\n                        <\/a>\n\n                        ${data.extraLinks ? data.extraLinks.map(ext => `\n                            <a href=\"${ext.url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-xs transition-colors shadow-md shadow-indigo-500\/20\">\n                                <i class=\"fa-solid fa-file-lines text-sm\"><\/i> ${ext.title} <i class=\"fa-solid fa-arrow-up-right-from-square text-[10px]\"><\/i>\n                            <\/a>\n                        `).join('') : ''}\n                    <\/div>\n                ` : ''}\n\n                ${data.details && data.details.length > 0 ? `\n                    <div class=\"bg-amber-50\/80 p-4 rounded-2xl border border-amber-200 text-xs text-slate-800 mb-3.5 space-y-2\">\n                        <div class=\"flex items-center gap-1.5 text-amber-800 font-bold uppercase tracking-wider text-[11px]\">\n                            <i class=\"fa-solid fa-list-check text-amber-600\"><\/i> Pengisian & Perincian Atur Cara\n                        <\/div>\n                        <ul class=\"space-y-1.5 text-slate-700 list-none pl-0\">\n                            ${data.details.map(d => {\n                                const isObj = typeof d === 'object';\n                                const text = isObj ? d.text : d;\n                                const isIndent = isObj ? d.indent : false;\n                                if (isIndent) {\n                                    return `<li class=\"flex items-start gap-2 ml-5\">\n                                        <i class=\"fa-solid fa-circle text-amber-500 mt-1.5 text-[6px] shrink-0\"><\/i>\n                                        <span class=\"leading-relaxed font-medium text-slate-700\">${text}<\/span>\n                                    <\/li>`;\n                                } else {\n                                    return `<li class=\"flex items-start gap-2\">\n                                        <i class=\"fa-solid fa-circle-check text-amber-600 mt-0.5 text-[11px] shrink-0\"><\/i>\n                                        <span class=\"leading-relaxed font-semibold text-slate-800\">${text}<\/span>\n                                    <\/li>`;\n                                }\n                            }).join('')}\n                        <\/ul>\n                    <\/div>\n                ` : ''}\n\n                ${data.synopsis ? `\n                    <div class=\"bg-indigo-50\/70 p-4 rounded-2xl border border-indigo-200 text-xs text-slate-700 mb-3.5 space-y-1.5\">\n                        <div class=\"flex items-center gap-1.5 text-indigo-700 font-bold uppercase tracking-wider text-[11px]\">\n                            <i class=\"fa-solid fa-circle-info\"><\/i> Sinopsis Aktiviti\n                        <\/div>\n                        <p class=\"leading-relaxed text-slate-700 text-justify whitespace-pre-line\">${data.synopsis}<\/p>\n                    <\/div>\n                ` : ''}\n\n                <div class=\"flex justify-end pt-2\">\n                    <button onclick=\"closeModal()\" class=\"px-5 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-semibold shadow transition-all\">\n                        Tutup\n                    <\/button>\n                <\/div>\n            `;\n\n            content.innerHTML = html;\n            modal.classList.remove('opacity-0', 'pointer-events-none');\n            container.classList.remove('scale-95');\n            container.classList.add('scale-100');\n        }\n\n        function closeModal() {\n            const modal = document.getElementById('detailModal');\n            const container = document.getElementById('modalContainer');\n            modal.classList.add('opacity-0', 'pointer-events-none');\n            container.classList.remove('scale-100');\n            container.classList.add('scale-95');\n        }\n\n        document.getElementById('detailModal').addEventListener('click', (e) => {\n            if (e.target.id === 'detailModal') closeModal();\n        });\n\n        \/\/ Initialize cards on page load\n        window.addEventListener('load', () => {\n            renderScheduleCards();\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Program &amp; Aktiviti Sedia untuk teroka dunia digital? \ud83d\ude80 Buat julung kalinya, Pusat Teknologi Digital\u00a0 menganjurkan Minggu Digital UKM 2026! Inilah masanya untuk mendapatkan berbagai<a class=\"ut-readmore\" href=\"https:\/\/www.ukm.my\/minggudigital\/program-new\/\"> &#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3571","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages\/3571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/comments?post=3571"}],"version-history":[{"count":161,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages\/3571\/revisions"}],"predecessor-version":[{"id":4328,"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/pages\/3571\/revisions\/4328"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/minggudigital\/wp-json\/wp\/v2\/media?parent=3571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}