PageSourceSearch
Opt out API access

https://tramsangtao.ai/wp-content/themes/tram-sang-tao-ai-remix-wo…/components/WorkshopCalendarPage.js?v=1.4.9

js tramsangtao.ai collected 2026-10-05 15:25:47 UTC 47,215 bytes, 275 lines download raw bytes 

1import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2import React, { useState, useEffect } from 'react';
3import { motion } from 'motion/react';
4import { MONTHLY_WORKSHOPS_DATA, OFFLINE_EVENTS_DATA } from '../data/content.js?v=1.4.9';
5import { Clock, ArrowRight, Flame, Users, ExternalLink, MapPin, ZoomIn, X } from 'lucide-react';
6export function WorkshopCalendarPage({ onBackToHome, onRegisterEvent, onOpenDiagnostic, onOpenAIVideoSalesPage, initialSection }) {
7    const [activeFilter, setActiveFilter] = useState('all');
8    const [previewOfflineImage, setPreviewOfflineImage] = useState(null);
9    useEffect(() => {
10        if (initialSection) {
11            if (initialSection === 'challenge') {
12                setActiveFilter('challenge');
13            }
14            else if (initialSection === 'upcoming') {
15                setActiveFilter('all');
16            }
17            setTimeout(() => {
18                const targetId = initialSection === 'challenge' ? 'challenge' : initialSection;
19                const el = document.getElementById(targetId) || document.getElementById(initialSection);
20                if (el) {
21                    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
22                }
23            }, 200);
24        }
25    }, [initialSection]);
26    // Live Countdown state for the featured workshop (29.09.2026, 19:30)
27    const [timeLeft, setTimeLeft] = useState({
28        days: 8,
29        hours: 18,
30        minutes: 45,
31        seconds: 10
32    });
33    useEffect(() => {
34        const timer = setInterval(() => {
35            setTimeLeft((prev) => {
36                if (prev.seconds > 0) {
37                    return { ...prev, seconds: prev.seconds - 1 };
38                }
39                else if (prev.minutes > 0) {
40                    return { ...prev, minutes: prev.minutes - 1, seconds: 59 };
41                }
42                else if (prev.hours > 0) {
43                    return { ...prev, hours: prev.hours - 1, minutes: 59, seconds: 59 };
44                }
45                else if (prev.days > 0) {
46                    return { ...prev, days: prev.days - 1, hours: 23, minutes: 59, seconds: 59 };
47                }
48                return prev;
49            });
50        }, 1000);
51        return () => clearInterval(timer);
52    }, []);
53    const formatNumber = (num) => num.toString().padStart(2, '0');
54    // Active Featured Workshop (from current content)
55    const activeWorkshop = MONTHLY_WORKSHOPS_DATA[0];
56    const handleRegisterActiveWorkshop = () => {
57        const adaptedEvent = {
58            id: activeWorkshop.id,
59            title: activeWorkshop.title,
60            subtitle: activeWorkshop.subtitle,
61            tag: activeWorkshop.sessionBadge || activeWorkshop.statusLabel,
62            status: 'hot',
63            date: 'Thứ Ba, Ngày 29/09/2026',
64            time: activeWorkshop.time,
65            format: activeWorkshop.format,
66            description: activeWorkshop.summary,
67            image: activeWorkshop.image,
68            speakers: activeWorkshop.speakers,
69            countdown: {
70                days: timeLeft.days,
71                hours: timeLeft.hours,
72                minutes: timeLeft.minutes,
73                seconds: timeLeft.seconds
74            },
75            isFeatured: true
76        };
77        onRegisterEvent(adaptedEvent);
78    };
79    const handleRegisterPastWorkshop = (title, summary, date, image) => {
80        const adaptedEvent = {
81            id: 'past-workshop-' + Date.now(),
82            title,
83            subtitle: 'Xem lại toàn bộ Video Record HD và tài liệu đính kèm',
84            tag: 'Record & Tài Liệu',
85            status: 'ended',
86            date,
87            time: 'Đã hoàn thành | Có Record Full HD',
88            format: 'Trực tuyến (Zoom Replay)',
89            description: summary,
90            image,
91            countdown: { days: 0, hours: 0, minutes: 0, seconds: 0 },
92            isFeatured: false
93        };
94        onRegisterEvent(adaptedEvent);
95    };
96    // Full Archive Workshops from the Vault
97    const archiveWorkshopsList = [
98        {
99            month: 'Tháng 07/2026',
100            title: 'Thiết Kế Template Với Canva AI',
101            desc: 'Hướng dẫn thiết kế template Canva kết hợp trí tuệ nhân tạo chuyên nghiệp.',
102            image: 'https://community.cstation.io/wp-content/uploads/2026/07/1783871901190_526722801261576663_526722801261576663_4587b25f31e6a2cdfd4f9d

1025484701daa.jpg',
103            link: 'https://community.cstation.io/thiet-ke-template-voi-canva-ai/',
104            price: '999.000đ'
105        },
106        {
107            month: 'Tháng 02/2026',
108            title: 'ChatGPT Image 2 vs Nano Banana — Khi “Chuối” Không Còn Ngọt Nữa',
109            desc: 'So sánh workflow tạo ảnh, chỉnh ảnh, giữ nhân vật, tạo visual bán hàng và ứng dụng thực tế.',
110            image: 'https://community.cstation.io/wp-content/uploads/2026/08/GPT-Image-2-vs-Nano-Banana-i3e8.webp',
111            link: 'https://pay.cstation.io/membership',
112            price: '999.000đ'
113        },
114        {
115            month: 'Tháng 03/2026',
116            title: 'Master AI Voice — Bí Kíp Ứng Dụng AI Voice Xây Kênh Nội Dung Triệu View',
117            desc: 'Tạo voice-over, clone voice và đưa AI Voice vào quy trình sản xuất nội dung.',
118            image: 'https://community.cstation.io/wp-content/uploads/2026/08/Master-Voice-AI-pslh.webp',
119            link: 'https://pay.cstation.io/membership',
120            price: '999.000đ'
121        },
122        {
123            month: 'Tháng 04/2026',
124            title: '60 Phút Làm Video Hoạt Hình Với AI — Ý Tưởng Trong Đầu, Thu Nhập Trong Tay',
125            desc: 'Từ ý tưởng đến storyboard, tạo ảnh, chuyển động, voice và dựng video hoạt hình ngắn.',
126            image: 'https://community.cstation.io/wp-content/uploads/2026/08/60-PHU-T-LA-M-VIDEO-HOA-T-HI-NH-VO-I-AI-nv39.webp',
127            link: 'https://pay.cstation.io/membership',
128            price: '999.000đ'
129        },
130        {
131            month: 'Tháng 05/2026',
132            title: 'Làm Video UGC Affiliate Với AI — Biến Virtual Avatar Thành Cỗ Máy Kiếm Tiền',
133            desc: 'Tạo video UGC, avatar ảo, kịch bản bán hàng và quy trình sản xuất affiliate hàng loạt.',
134            image: 'https://community.cstation.io/wp-content/uploads/2026/08/La-m-video-UGC-Affiliate-vo-i-AI-wsaf.webp',
135            link: 'https://pay.cstation.io/membership',
136            price: '999.000đ'
137        },
138        {
139            month: 'Tháng 06/2026',
140            title: 'Video AI Bán Hàng Bằng Workflow — Tạo Video AI Thì Dễ, Bán Được Hàng Mới Khó',
141            desc: 'Xây workflow video bán hàng từ insight, hook, kịch bản, hình ảnh, voice, motion và CTA.',
142            image: 'https://community.cstation.io/wp-content/uploads/2026/06/722664722_10242287944286125_683900529859323901_n.jpg',
143            link: 'https://workshop.tramsangtao.ai',
144            price: '999.000đ'
145        },
146        {
147            month: 'Tháng 06/2026',
148            title: 'Làm Truyện AI Hái Ngay Thu Nhập — Không Hoa Tay, Vẫn Có Truyện Hay Mang Về',
149            desc: 'Ứng dụng AI để viết truyện, tạo nhân vật, tạo khung hình và phát triển sản phẩm truyện.',
150            image: 'https://community.cstation.io/wp-content/uploads/2026/08/LA-M-TRUYE-N-AI-HA-I-NGAY-THU-NHA-P-usni.webp',
151            link: 'https://pay.cstation.io/membership',
152            price: '999.000đ'
153        },
154        {
155            month: 'Tháng 06/2026',
156            title: 'Vibe Code — Biến Ý Tưởng Kinh Doanh Thành Landing Page Bán Hàng Bằng AI',
157            desc: 'Tự lên cấu trúc landing page, viết nội dung, tạo layout và triển khai trang bán hàng bằng AI.',
158            image: 'https://community.cstation.io/wp-content/uploads/2026/08/VIBE-CODE-LA-M-LANDING-PAGE-BA-N-HA-NG-4wdi.webp',
159            link: 'https://workshop.tramsangtao.ai',
160            price: '999.000đ'
161        },
162        {
163            month: 'Tháng 06/2026',
164            title: 'Quy Trình 5 Bước Làm Phim Ngắn Chuẩn Điện Ảnh Bằng Công Cụ AI',
165            desc: 'Từ concept, kịch bản, hình ảnh, chuyển động đến hậu kỳ để tạo một phim ngắn AI có chất điện ảnh.',
166            image: 'https://community.cstation.io/wp-content/uploads/2026/08/QUY-TRI-NH-SA-NG-TA-O-VIDEO-AI-TOA-N-DIE-N-hr0i.webp',
167            link: 'https://www.facebook.com/rabbithoang/videos/1024851966896176',
168            price: '999.000đ'
169        }
170    ];
171    // Up-to-date events list binding to current actual events
172    const upcomingEvents = [
173        {
174            id: 'ev-1',
175            type: 'workshop',
176            typeLabel: 'Workshop Thực Chiến 180 Phút',
177            title: 'Bản Đồ Xây Dựng AI Video Trong Digital Marketing Cho Doanh Nghiệp',
178            desc: 'Bức tranh toàn cảnh, tư duy hệ thống và quy trình sản xuất AI Video thực chiến tối ưu 70% thời gian cho Marketer & Doanh nghiệp. Cầm tay chỉ việc tạo video 30-90s ngay trong buổi.',
179            date: '29/09/2026',
180            time: '19:30 – 22:30',
181            format: 'Online (Zoom & Group FB Trạm)',
182            badge: 'Mở Đăng Ký',
183            isHot: true,
184            actionText: 'Đăng ký ngay',
185            linkAction: () => { if (onOpenAIVideoSalesPage)
186                onOpenAIVideoSalesPage();
187            else
188                window.location.href = '/ban-do-xay-dung-ai-video-digital-marketing/'; }
189        },
190        {
191            id: 'ev-2',
192            type: 'livestream',
193            typeLabel: 'Livestream Định Hướng (Chặng 1)',
194            title: 'Livestream Khởi Động: Hiểu Bản Đồ Video Trong Digital Marketing',
195            desc: 'Khai mở vị trí của video trong phễu bán hàng, chọn đúng loại video và khung phát triển quy trình sản xuất tự động.',
196            date: '15/09/2026',
197            time: '19:30 – 21:00',
198            format: 'Online (Livestream)',
199            badge: 'Miễn Phí',
200            actionText: 'Tham gia',
201            linkAction: () => window.open('https://www.facebook.com/groups/550225273920804', '_blank')
202        },
203        {
204            id: 'ev-3',
205            type: 'challenge',
206            typeLabel: 'Pre-Challenge (Chặng 2)',
207            title: 'Pre-Challenge 6 Ngày: Vẽ Lộ Trình Trước Khi Làm Video',
208            desc: 'Mỗi ngày 30–45 phút trong Group Facebook Trạm, lần lượt xác định các bước cốt lõi từ Sản phẩm → Khách hàng → Mục tiêu trước khi bấm máy.',
209            date: '16/09 – 21/09/2026',
210            time: '6 Ngày Thực Hành',
211            format: 'Group FB Trạm',
212            badge: 'Thực Hành',
213            actionText: 'Xem chi tiết',
214            linkAction: () => window.open('https://www.facebook.com/groups/550225273920804', '_blank')
215        },
216        {
217            id: 'ev-4',
218            type: 'challenge',
219            typeLabel: 'The Launch Pad Challenge (Chặng 4)',
220            title: 'The Launch Pad Challenge: Video Marketing & Đưa AI Vào Thực Tế',

221            desc: 'Cuộc thi thực hành trong cộng đồng Facebook của Trạm: tạo và xuất bản video marketing hoàn chỉnh từ 30–90 giây, có cơ hội nhận giải thưởng & feedback.',
222            date: '23/09 – 29/09/2026',
223            time: '7 Ngày Cuộc Thi',
224            format: 'Cộng đồng Facebook Trạm',
225            badge: 'Giải Thưởng',
226            isHot: true,
227            actionText: 'Tham gia Challenge',
228            linkAction: () => window.open('https://www.facebook.com/groups/550225273920804', '_blank')
229        },
230        {
231            id: 'ev-5',
232            type: 'workshop',
233            typeLabel: 'Showcase Đêm Tổng Kết (Chặng 5)',
234            title: 'Showcase & Trao Giải Video Marketing Challenge Cộng Đồng',
235            desc: 'Đêm tổng kết trực tuyến: Công bố và trình chiếu các sản phẩm video marketing xuất sắc nhất, trao giải thưởng và đúc kết quy trình nhân bản.',
236            date: '02/10/2026',
237            time: '19:30 – 21:30',
238            format: 'Online Cộng Đồng',
239            badge: 'Đêm Trao Giải',
240            actionText: 'Xem chi tiết',
241            linkAction: () => window.open('https://www.facebook.com/groups/550225273920804', '_blank')
242        },
243    ];
244    const filteredEvents = upcomingEvents.filter(ev => {
245        if (activeFilter === 'all')
246            return true;
247        return ev.type === activeFilter;
248    });
249    const scrollToSection = (id) => {
250        const el = document.getElementById(id);
251        if (el) {
252            el.scrollIntoView({ behavior: 'smooth' });
253        }
254    };
255    return (_jsxs("div", { id: "events-hub-page", className: "min-h-screen bg-[#090909] text-white font-sans selection:bg-[#FF6B1A] selection:text-white", children: [_jsxs("section", { id: "top", className: "relative py-16 sm:py-24 overflow-hidden border-b border-white/[0.08] bg-[radial-gradient(circle_at_80%_20%,rgba(255,107,26,0.19),transparent_35%),radial-gradient(circle_at_8%_80%,rgba(255,107,26,0.08),transparent_30%),#090909]", children: [_jsx("div", { className: "absolute inset-0 pointer-events-none opacity-20", style: {
256                            backgroundImage: `
257              linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
258              linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)
259            `,
260                            backgroundSize: '36px 36px'
261                        } }), _jsxs("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 relative z-10 text-center space-y-6", children: [_jsx("div", { className: "inline-block text-[#FF6B1A] text-xs font-mono font-black tracking-widest uppercase", children: "S\u1EF0 KI\u1EC6N T\u1EA0I TR\u1EA0M" }), _jsx("h1", { className: "text-3xl sm:text-5xl lg:text-[62px] font-black tracking-tight leading-[1.05] text-white max-w-4xl mx-auto", children: "M\u1ED7i th\u00E1ng, m\u1ED9t \u0111i\u1EC3m ch\u1EA1m \u0111\u1EC3 h\u1ECDc, l\u00E0m v\u00E0 k\u1EBFt n\u1ED1i." }), _jsxs("div", { className: "space-y-3 max-w-3xl mx-auto text-sm sm:text-lg text-zinc-300 leading-relaxed font-medium", children: [_jsx("p", { children: "C\u00E1c s\u1EF1 ki\u1EC7n c\u1EE7a Tr\u1EA1m l\u00E0 nh\u1EEFng \u0111i\u1EC3m ch\u1EA1m \u0111\u1EC3 b\u1EA1n c\u1EADp nh\u1EADt g\u00F3c nh\u00ECn m\u1EDBi, tr\u1EF1c ti\u1EBFp th\u1EF1c h\u00E0nh v\u00E0 k\u1EBFt n\u1ED1i v\u1EDBi c\u1ED9ng \u0111\u1ED3ng \u0111ang c\u00F9ng \u1EE9ng d\u1EE5ng S\u00E1ng t\u1EA1o Chi\u1EBFn l\u01B0\u1EE3c v\u00E0 AI v\u00E0o c\u00F4ng vi\u1EC7c th\u1EF1c t\u1EBF." }), _jsxs("p", { className: "text-zinc-400 text-xs sm:text-base", children: ["T\u1EEB ", _jsx("strong", { className: "text-white font-bold", children: "The Launch Pad Workshop" }), ", Livestream \u0111\u1EBFn Challenge h\u1EB1ng th\u00E1ng, m\u1ED7i ho\u1EA1t \u0111\u1ED9ng c\u00F3 m\u1ED9t c\u00E1ch tham gia v\u00E0 m\u1ED9t m\u1EE5c ti\u00EAu kh\u00E1c nhau."] })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 pt-2", children: [_jsxs("button", { onClick: () => scrollToSection('upcoming'), className: "inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-full bg-[#FF6B1A] hover:bg-[#FF8C4A] text-white text-xs sm:text-sm font-black shadow-[0_12px_28px_rgba(255,107,26,0.28)] hover:-translate-y-0.5 transition-all cursor-pointer", children: [_jsx("span", { children: "Xem s\u1EF1 ki\u1EC7n s\u1EAFp t\u1EDBi" }), _jsx(ArrowRight, { className: "w-4 h-4" })] }), _jsx("button", { onClick: () => scrollToSection('featured'), className: "inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-full bg-white/[0.05] hover:bg-white/[0.1] text-white hover:text-[#FF6B1A] border border-white/20 hover:border-[#FF6B1A]/60 text-xs sm:text-sm font-bold transition-all cursor-pointer", children: _jsx("span", { children: "Kh\u00E1m ph\u00E1 The Launch Pad Workshop" }) })] })] })] }), _jsx("section", { id: "featured", className: "py-20 sm:py-24 bg-[#F4F1EC] text-[#121212] relative overflow-hidden", children: _jsxs("div", { className: "max-w-5xl mx-auto px-4 sm:px-6", children: [_jsxs("div", { className: "text-center max-w-2xl mx-auto mb-12 space-y-2", children: [_jsx("div", { className: "inline-block text-[#FF6B1A] text-xs font-mono font-black tracking-widest uppercase", children: "\u0110ANG DI\u1EC4N RA" }), _jsx("h2", { className: "text-2xl sm:text-4xl font-black tracking-tight text-[#121212]", children: "S\u1EF1 ki\u1EC7n n\u1ED5i b\u1EADt t\u1EA1i Tr\u1EA1m" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8 items-start rounded-3xl bg-white border border-black/10 shadow-[0_20px_50px_rgba(0,0,0,0.06)] overflow-hidden p-5 sm:p-8", children: [_jsxs("div", { className: "lg:col-span-6 flex flex-col justify-between space-y-4 select-none", children: [_jsxs("div", { className: "relative w-full aspect-[16/9] rounded-2xl overflow-hidden bg-black shadow-lg border border-black/10 group", children: [_jsx("img", { src: activeWorkshop.image, alt: activeWorkshop.title, referrerPolicy: "no-referrer", className: "w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-500" }), _jsxs("div", { className: "absolute top-3 left-3 z-10 min-w-16 h-16 sm:min-w-18 sm:h-18 px-2 rounded-2xl bg-[#FF6B1A] text-white flex flex-col items-center justify-center shadow-xl border border-white/20", children: [_jsx("b", { className: "text-xl sm:text-2xl font-black leading-none", children: "22" }), _jsx("span", { className: "text-[8px] sm:text-[9px] font-mono font-black tracking-wider up

261percase mt-0.5", children: "TH\u00C1NG 09" })] }), _jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-black/75 backdrop-blur-md border border-white/20 text-[10px] sm:text-[11px] font-mono font-bold text-white uppercase shadow-md", children: [_jsx(Flame, { className: "w-3.5 h-3.5 text-[#FF6B1A] animate-pulse" }), _jsx("span", { children: "WORKSHOP T\u00C2M \u0110I\u1EC2M \u00B7 180 PH\u00DAT" })] }) })] }), _jsxs("div", { className: "p-3.5 sm:p-4 rounded-2xl bg-[#111111] text-white border border-black/10 shadow-sm space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between text-xs px-0.5", children: [_jsxs("span", { className: "font-mono text-[11px] font-bold text-zinc-400 uppercase tracking-wider flex items-center gap-1.5", children: [_jsx(Clock, { className: "w-3.5 h-3.5 text-[#FF6B1A]" }), _jsx("span", { children: "\u0110\u1EBEM NG\u01AF\u1EE2C: THE LAUNCH PAD WORKSHOP (22.09.2026)" })] }), _jsx("span", { className: "text-[10px] font-mono font-bold text-[#FF6B1A] uppercase", children: "19:30 \u2013 22:30 (ONLINE)" })] }), _jsxs("div", { className: "grid grid-cols-4 gap-2 text-center font-mono", children: [_jsxs("div", { className: "p-2 rounded-xl bg-black/80 border border-white/10 text-white", children: [_jsx("span", { className: "text-base sm:text-lg font-black text-[#FF6B1A] block leading-tight", children: formatNumber(timeLeft.days) }), _jsx("span", { className: "text-[9px] uppercase text-zinc-400 block font-sans", children: "Ng\u00E0y" })] }), _jsxs("div", { className: "p-2 rounded-xl bg-black/80 border border-white/10 text-white", children: [_jsx("span", { className: "text-base sm:text-lg font-black block leading-tight", children: formatNumber(timeLeft.hours) }), _jsx("span", { className: "text-[9px] uppercase text-zinc-400 block font-sans", children: "Gi\u1EDD" })] }), _jsxs("div", { className: "p-2 rounded-xl bg-black/80 border border-white/10 text-white", children: [_jsx("span", { className: "text-base sm:text-lg font-black block leading-tight", children: formatNumber(timeLeft.minutes) }), _jsx("span", { className: "text-[9px] uppercase text-zinc-400 block font-sans", children: "Ph\u00FAt" })] }), _jsxs("div", { className: "p-2 rounded-xl bg-black/80 border border-orange-500/40 text-white", children: [_jsx("span", { className: "text-base sm:text-lg font-black text-[#FF6B1A] block leading-tight", children: formatNumber(timeLeft.seconds) }), _jsx("span", { className: "text-[9px] uppercase text-[#FF6B1A] block font-sans", children: "Gi\u00E2y" })] })] })] })] }), _jsxs("article", { className: "lg:col-span-6 flex flex-col justify-between space-y-5", children: [_jsxs("div", { className: "space-y-3.5", children: [_jsx("div", { className: "inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#FF6B1A]/10 border border-[#FF6B1A]/30 text-[#FF6B1A] text-xs font-mono font-black uppercase", children: _jsx("span", { children: "T\u00C2M \u0110I\u1EC2M TH\u00C1NG 09/2026 \u00B7 THE LAUNCH PAD WORKSHOP" }) }), _jsx("h3", { className: "text-xl sm:text-2xl font-black text-[#121212] tracking-tight leading-snug", children: activeWorkshop.title }), _jsx("p", { className: "text-xs sm:text-sm text-[#4E4E4E] leading-relaxed", children: activeWorkshop.subtitle }), _jsxs("div", { className: "p-3.5 rounded-2xl bg-[#F7F5F0] border border-black/10 text-xs grid grid-cols-1 sm:grid-cols-3 gap-3", children: [_jsxs("div", { children: [_jsx("span", { className: "text-[10px] font-mono font-bold text-zinc-500 uppercase block", children: "Th\u1EDDi Gian" }), _jsx("strong", { className: "text-zinc-900 block mt-0.5", children: "19:30 \u2013 22:30 (180p)" }), _jsx("span", { className: "text-zinc-500 text-[11px]", children: "Th\u1EE9 Ba, 29/09/2026" })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[10px] font-mono font-bold text-zinc-500 uppercase block", children: "H\u00ECnh Th\u1EE9c" }), _jsx("strong", { className: "text-zinc-900 block mt-0.5", children: "Tr\u1EF1c Tuy\u1EBFn Online" }), _jsx("span", { className: "text-zinc-500 text-[11px]", children: "Zoom & Group FB Tr\u1EA1m" })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[10px] font-mono font-bold text-[#FF6B1A] uppercase block", children: "\u0110\u1EA7u Ra Bu\u1ED5i H\u1ECDc" }), _jsx("strong", { className: "text-zinc-900 block mt-0.5", children: "01 Video 30\u201390 Gi\u00E2y" }), _jsx("span", { className: "text-zinc-500 text-[11px]", children: "Quy tr\u00ECnh t\u1ED1i \u01B0u 70% th\u1EDDi gian" })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2.5 pt-1", children: [_jsxs("div", { className: "flex items-center gap-2.5 p-2 rounded-xl bg-zinc-50 border border-black/5", children: [_jsx("img", { src: "https://i.imgur.com/Zz2bEiL.jpeg", alt: "Tr\u01B0\u01A1ng Ho\u00E0ng Th\u1ECD", referrerPolicy: "no-referrer", className: "w-9 h-9 rounded-full object-cover border border-black/10 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-black text-[#121212] truncate", children: "Tr\u01B0\u01A1ng Ho\u00E0ng Th\u1ECD" }), _jsx("div", { className: "text-[10px] text-zinc-500 truncate", children: "Founder Tr\u1EA1m S\u00E1ng T\u1EA1o AI" })] })] }), _jsxs("div", { className: "flex items-center gap-2.5 p-2 rounded-xl bg-zinc-50 border border-black/5", children: [_jsx("img", { src: "https://thaikhoa.aiagency.vn/wp-content/uploads/2026/04/z7738888773336_601f163b952a82ec7a674128cc29751d.jpg", alt: "Th\u00E1i Khoa", referrerPolicy: "no-referrer", className: "w-9 h-9 rounded-full object-cover border border-black/10 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-black text-[#121212] truncate", children: "Th\u00E1i Khoa" }), _jsx("div", { className: "text-[10px] text-zinc-500 truncate", children: "Leader Ctech \u00B7 Founder AI Agency" })] })] })] })] }), _jsxs("div", { className: "pt-2 flex flex-wrap items-center gap-3", children: [onOpenAIVideoSalesPage ? (_jsxs("button", { onClick: onOpenAIVideoSalesPage, className: "inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-full bg-[#FF6B1A] hover:bg-[#FF8C4A] text-white text-xs sm:text-sm font-black shadow-lg shadow-orange-950/20 hover:-translate-y-0.5 transition-all cursor-pointer", children: [_jsx("span", { children: "Xem Landing Page & \u0110\u0103ng K\u00FD Ngay" }), _jsx(ArrowRight, { className: "w-4 h-4" })] })) : (_jsxs("button", { onClick: handleRegisterActiveWorkshop, className: "inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-full bg-[#FF6B1A] hover:bg-[#FF8C4A] text-white text-xs sm:text-sm font-black shadow-lg shadow-orange-950/20 hover:-translate-y-0.5 transition-all cursor-pointer", children: [_jsx("span", { children: "Xem chi ti\u1EBFt & \u0110\u0103ng k\u00FD" }), _jsx(ArrowRight, { className: "w-4 h-4" })] })), _jsx("button", { onClick: handleRegisterActiveWorkshop, className: "inline-flex items-center justify-center gap-1.5 px-4 py-3.5 rounded-full bg-white hover:bg-zinc-50 text-zinc-800 border border-black/15 text-xs font-bold transition-all cursor-pointer", children: _jsx("span", { children: "\u0110\u0103ng k\u00FD nhanh" }) })] })] })] })] }) }), _jsx("section", { id: "livestream", className: "py-20 sm:py-24 border-b border-white/[0.08] bg-[#101010]", children: _jsxs("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 space-y-12", children: [_jsxs("div", { className: "text-center max-w-2xl mx-auto 

261space-y-2", children: [_jsx("div", { className: "inline-block text-[#FF6B1A] text-xs font-mono font-black tracking-widest uppercase", children: "CHUY\u00CAN GIA XU\u1EA4T HI\u1EC6N TRONG TH\u00C1NG N\u00C0Y" }), _jsx("h2", { className: "text-2xl sm:text-4xl font-black tracking-tight text-white", children: "\u0110\u1ED3ng h\u00E0nh c\u00F9ng Founder & Chuy\u00EAn gia th\u1EF1c chi\u1EBFn" }), _jsx("p", { className: "text-sm sm:text-base text-zinc-400 leading-relaxed", children: "C\u00E1c phi\u00EAn chia s\u1EBB tr\u1EF1c ti\u1EBFp, workshop v\u00E0 gi\u1EA3i \u0111\u00E1p chuy\u00EAn s\u00E2u c\u00F9ng \u0111\u1ED9i ng\u0169 tr\u1EF1c ti\u1EBFp x\u00E2y d\u1EF1ng v\u00E0 \u1EE9ng d\u1EE5ng AI v\u00E0o doanh nghi\u1EC7p trong th\u00E1ng n\u00E0y." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 overflow-hidden", children: [_jsxs(motion.article, { initial: { opacity: 0, x: -80 }, whileInView: { opacity: 1, x: 0 }, viewport: { once: true, margin: "-50px" }, transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] }, className: "relative aspect-square w-full rounded-3xl bg-[#121212] border border-white/10 overflow-hidden flex flex-col justify-end group shadow-2xl", children: [_jsx("img", { src: "https://i.imgur.com/Zz2bEiL.jpeg", alt: "Tr\u01B0\u01A1ng Ho\u00E0ng Th\u1ECD", referrerPolicy: "no-referrer", className: "absolute inset-0 w-full h-full object-cover object-top group-hover:scale-105 transition-all duration-700 ease-out" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black via-black/85 to-transparent pointer-events-none" }), _jsx("div", { className: "absolute top-5 left-5 z-10", children: _jsx("span", { className: "px-3 py-1 rounded-full bg-black/60 border border-white/20 text-[#FF8C4A] text-[10px] font-mono font-black uppercase backdrop-blur-md shadow-md", children: "CHUY\u00CAN GIA TH\u00C1NG N\u00C0Y" }) }), _jsxs("div", { className: "relative z-10 p-6 sm:p-7 space-y-2", children: [_jsx("span", { className: "text-[11px] font-mono font-black text-[#FF8C4A] tracking-wider uppercase block drop-shadow-sm", children: "FOUNDER \u00B7 TR\u1EA0M S\u00C1NG T\u1EA0O AI" }), _jsx("h3", { className: "text-2xl sm:text-3xl font-black text-white tracking-tight drop-shadow-md", children: "Tr\u01B0\u01A1ng Ho\u00E0ng Th\u1ECD" }), _jsx("p", { className: "text-xs sm:text-sm text-zinc-200 leading-relaxed max-w-md drop-shadow-sm", children: "\u0110\u1ECBnh h\u01B0\u1EDBng t\u01B0 duy h\u1EC7 th\u1ED1ng, chi\u1EBFn l\u01B0\u1EE3c \u1EE9ng d\u1EE5ng AI v\u00E0o v\u1EADn h\u00E0nh tinh g\u1ECDn, gi\u1EA3i m\u00E3 quy tr\u00ECnh \u0111\u00F3ng g\u00F3i v\u00E0 ph\u00E1t tri\u1EC3n s\u1EA3n ph\u1EA9m th\u1EF1c chi\u1EBFn." })] })] }), _jsxs(motion.article, { initial: { opacity: 0, x: 80 }, whileInView: { opacity: 1, x: 0 }, viewport: { once: true, margin: "-50px" }, transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] }, className: "relative aspect-square w-full rounded-3xl bg-[#121212] border border-white/10 overflow-hidden flex flex-col justify-end group shadow-2xl", children: [_jsx("img", { src: "https://thaikhoa.aiagency.vn/wp-content/uploads/2026/04/z7738888773336_601f163b952a82ec7a674128cc29751d.jpg", alt: "Th\u00E1i Khoa", referrerPolicy: "no-referrer", className: "absolute inset-0 w-full h-full object-cover object-top group-hover:scale-105 transition-all duration-700 ease-out" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black via-black/85 to-transparent pointer-events-none" }), _jsx("div", { className: "absolute top-5 left-5 z-10", children: _jsx("span", { className: "px-3 py-1 rounded-full bg-black/60 border border-white/20 text-[#FF8C4A] text-[10px] font-mono font-black uppercase backdrop-blur-md shadow-md", children: "CHUY\u00CAN GIA TH\u00C1NG N\u00C0Y" }) }), _jsxs("div", { className: "relative z-10 p-6 sm:p-7 space-y-2", children: [_jsx("span", { className: "text-[11px] font-mono font-black text-[#FF8C4A] tracking-wider uppercase block drop-shadow-sm", children: "LEADER CTECH \u00B7 FOUNDER AI AGENCY" }), _jsx("h3", { className: "text-2xl sm:text-3xl font-black text-white tracking-tight drop-shadow-md", children: "Th\u00E1i Khoa" }), _jsx("p", { className: "text-xs sm:text-sm text-zinc-200 leading-relaxed max-w-md drop-shadow-sm", children: "Th\u1EF1c chi\u1EBFn s\u1EA3n xu\u1EA5t AI Video h\u00E0ng lo\u1EA1t, t\u1ED1i \u01B0u quy tr\u00ECnh t\u1EEB k\u1ECBch b\u1EA3n, \u00E2m thanh \u0111\u1EBFn h\u00ECnh \u1EA3nh t\u1EF1 \u0111\u1ED9ng gi\u00FAp doanh nghi\u1EC7p ti\u1EBFt ki\u1EC7m 70% chi ph\u00ED s\u1EA3n xu\u1EA5t." })] })] })] })] }) }), _jsx("section", { id: "upcoming", className: "py-20 sm:py-24 bg-[#F4F1EC] text-[#121212] border-b border-black/10", children: _jsxs("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 space-y-8", children: [_jsxs("div", { className: "text-center max-w-2xl mx-auto 

261space-y-2", children: [_jsx("div", { className: "inline-block text-[#FF6B1A] text-xs font-mono font-black tracking-widest uppercase", children: "S\u1EAEP DI\u1EC4N RA" }), _jsx("h2", { className: "text-2xl sm:text-4xl font-black tracking-tight text-[#121212]", children: "Ch\u1ECDn ho\u1EA1t \u0111\u1ED9ng ph\u00F9 h\u1EE3p v\u1EDBi c\u00E1ch b\u1EA1n mu\u1ED1n tham gia." })] }), _jsx("div", { className: "flex flex-wrap items-center justify-center gap-2", children: ['all', 'workshop', 'livestream', 'challenge'].map((f) => {
262                                const labels = {
263                                    all: 'Tất cả sự kiện',
264                                    workshop: 'Workshop',
265                                    livestream: 'Livestream',
266                                    challenge: 'Challenge'
267                                };
268                                const isActive = activeFilter === f;
269                                return (_jsx("button", { onClick: () => setActiveFilter(f), className: `px-4 py-2 rounded-full text-xs font-bold transition-all cursor-pointer border ${isActive
270                                        ? 'bg-[#FF6B1A] text-white border-[#FF6B1A] shadow-md'
271                                        : 'bg-white text-zinc-700 border-black/15 hover:border-[#FF6B1A] hover:text-[#FF6B1A]'}`, children: labels[f] }, f));
272                            }) }), _jsx("div", { className: "rounded-3xl bg-white border border-black/10 shadow-[0_15px_40px_rgba(0,0,0,0.05)] divide-y divide-black/10 overflow-hidden", children: filteredEvents.map((ev) => (_jsxs("div", { id: ev.id === 'ev-4' ? 'challenge' : undefined, className: `p-5 sm:p-6 grid grid-cols-1 md:grid-cols-12 gap-4 items-center hover:bg-zinc-50 transition-colors ${ev.id === 'ev-4' ? 'scroll-mt-28' : ''}`, children: [_jsxs("div", { className: "md:col-span-3 space-y-0.5", children: [_jsx("span", { className: "text-xs sm:text-sm font-black text-black block", children: ev.date }), _jsx("span", { className: "text-[11px] font-mono text-zinc-500 block", children: ev.time }), _jsx("span", { className: "text-[10px] font-mono font-bold text-[#FF6B1A] uppercase block", children: ev.format })] }), _jsxs("div", { className: "md:col-span-6 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "text-[10px] font-mono font-black text-[#FF6B1A] uppercase tracking-wider", children: ev.typeLabel }), ev.badge && (_jsx("span", { className: `text-[9px] font-mono font-bold px-2 py-0.5 rounded-full ${ev.isHot
273                                                            ? 'bg-orange-500 text-white'
274                                                            : 'bg-zinc-100 text-zinc-600 border border-black/10'}`, children: ev.badge }))] }), _jsx("h3", { className: "text-sm sm:text-base font-black text-[#121212] leading-snug", children: ev.title }), _jsx("p", { className: "text-xs text-zinc-600 line-clamp-2 leading-relaxed", children: ev.desc })] }), _jsx("div", { className: "md:col-span-3 flex md:justify-end", children: _jsxs("button", { onClick: ev.linkAction, className: "inline-flex items-center gap-1.5 px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-black hover:bg-[#FF6B1A] text-white text-xs font-bold transition-all cursor-pointer", children: [_jsx("span", { children: ev.actionText }), _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }) })] }, ev.id))) })] }) }), _jsx("section", { id: "archive", className: "py-20 sm:py-24 border-b border-white/[0.08] bg-[#101010]", children: _jsxs("div", { className: "max-w-6xl mx-auto px-4 sm:px-6 space-y-12", children: [_jsxs("div", { className: "text-center max-w-3xl mx-auto space-y-3", children: [_jsx("div", { className: "inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-[#FF6B1A]/35 bg-white/[0.035] text-[#FF6B1A] text-xs font-mono font-black uppercase tracking-widest", children: "KHO L\u01AFU TR\u1EEE WORKSHOP" }), _jsx("h2", { className: "text-2xl sm:text-4xl font-black text-white tracking-tight", children: "Kho Workshop \u0110\u00E3 Di\u1EC5n Ra" }), _jsx("p", { className: "text-sm sm:text-base text-zinc-400 leading-relaxed", children: "Truy c\u1EADp to\u00E0n b\u1ED9 record c\u00E1c bu\u1ED5i workshop th\u1EF1c chi\u1EBFn ch\u1EA5t l\u01B0\u1EE3ng cao tr\u01B0\u1EDBc \u0111\u00E2y. Xem l\u1EA1i video full HD k\u00E8m t\u00E0i li\u1EC7u, prompt pack v\u

27400E0 workflow th\u1EF1c h\u00E0nh." })] }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "p-5 rounded-2xl bg-white/[0.04] border border-white/10 text-center", children: [_jsx("strong", { className: "block text-2xl sm:text-3xl font-black text-white", children: "12+" }), _jsx("span", { className: "text-xs text-zinc-400 mt-1 block", children: "Workshop chuy\u00EAn s\u00E2u" })] }), _jsxs("div", { className: "p-5 rounded-2xl bg-white/[0.04] border border-white/10 text-center", children: [_jsx("strong", { className: "block text-2xl sm:text-3xl font-black text-[#FF6B1A]", children: "Tr\u1ECDn b\u1ED9" }), _jsx("span", { className: "text-xs text-zinc-400 mt-1 block", children: "Xem l\u1EA1i to\u00E0n b\u1ED9 record" })] }), _jsxs("div", { className: "p-5 rounded-2xl bg-white/[0.04] border border-white/10 text-center", children: [_jsx("strong", { className: "block text-2xl sm:text-3xl font-black text-white", children: "999.000\u0111" }), _jsx("span", { className: "text-xs text-zinc-400 mt-1 block", children: "Gi\u00E1 mua l\u1EBB m\u1ED7i bu\u1ED5i" })] }), _jsxs("div", { className: "p-5 rounded-2xl bg-white/[0.04] border border-white/10 text-center", children: [_jsx("strong", { className: "block text-2xl sm:text-3xl font-black text-[#FF6B1A]", children: "100% Th\u1EF1c chi\u1EBFn" }), _jsx("span", { className: "text-xs text-zinc-400 mt-1 block", children: "Case study & t\u00E0i li\u1EC7u \u0111\u1EA7y \u0111\u1EE7" })] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: archiveWorkshopsList.map((item, idx) => (_jsxs("article", { className: "group relative rounded-2xl border border-white/10 bg-[#141418] overflow-hidden flex flex-col justify-between transition-all duration-300 hover:-translate-y-1.5 hover:border-white/20 hover:shadow-2xl hover:shadow-black/60", children: [_jsxs("div", { className: "relative aspect-video w-full overflow-hidden bg-black/50", children: [_jsx("img", { src: item.image, alt: item.title, referrerPolicy: "no-referrer", loading: "lazy", className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/20 pointer-events-none" }), _jsx("span", { className: "absolute top-3 left-3 px-2.5 py-1 rounded-full bg-black/75 border border-white/15 text-[10px] font-mono font-bold text-white uppercase backdrop-blur-md", children: item.month }), _jsx("span", { className: "absolute top-3 right-3 px-2 py-1 rounded-full bg-white/15 border border-white/20 text-[10px] font-mono font-semibold text-zinc-200 uppercase backdrop-blur-md", children: "\u0110\u00E3 di\u1EC5n ra" })] }), _jsxs("div", { className: "p-5 flex-1 flex flex-col justify-between space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm sm:text-base font-black text-white leading-snug line-clamp-2 group-hover:text-[#FF8C4A] transition-colors", children: item.title }), _jsx("p", { className: "text-xs text-zinc-400 line-clamp-2 leading-relaxed", children: item.desc })] }), _jsxs("div", { className: "pt-3 border-t border-dashed border-white/10 flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-[10px] text-zinc-500 block uppercase font-mono", children: "Gi\u00E1 mua l\u1EBB" }), _jsx("span", { className: "text-xs sm:text-sm font-black text-[#FF6B1A]", children: item.price })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { onClick: () => handleRegisterPastWorkshop(item.title, item.desc, item.month, item.image), className: "px-3 py-1.5 rounded-lg bg-white/10 hover:bg-[#FF6B1A] text-white text-xs font-bold transition-all cursor-pointer", children: "\u0110\u0103ng k\u00FD record" }), _jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "p-1.5 rounded-lg bg-white/5 hover:bg-white/15 text-zinc-400 hover:text-white transition-all cursor-pointer", title: "Xem trang g\u1ED1c", children: _jsx(ExternalLink, { className: "w-3.5 h-3.5" }) })] })] })] })] }, idx))) }), _jsxs("div", { className: "rounded-3xl border border-white/15 bg-gradient-to-r from-[#181820] to-[#121214] p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between gap-6 shadow-2xl", children: [_jsxs("div", { className: "space-y-1 text-center sm:text-left", children: [_jsx("h4", { className: "text-lg sm:text-xl font-black text-white", children: "V\u00E0o G\u00F3i N\u0103m l\u00E0 m\u1EDF kh\u00F3a tr\u1ECDn b\u1ED9 kho Workshop" }), _jsx("p", { className: "text-xs sm:text-sm text-zinc-400", children: "M\u1ED7i workshop b\u00E1n l\u1EBB 999.000\u0111. Th\u00E0nh vi\u00EAn \u0111\u01B0\u1EE3c xem l\u1EA1i to\u00E0n b\u1ED9 th\u01B0 vi\u1EC7n record \u0111\u00E3 di\u1EC5n ra v\u00E0 tham gia t\u1EA5t c\u1EA3 c\u00E1c bu\u1ED5i m\u1EDBi trong su\u1ED1t 12 th\u00E1ng." })] }), _jsx("a", { href: "https://pay.cstation.io/membership", target: "_blank", rel: "noopener noreferrer", className: "px-6 py-3.5 rounded-xl bg-gradient-to-r from-[#FF6B1A] to-[#FF8738] hover:brightness-110 text-white text-xs sm:text-sm font-black uppercase tracking-wider shadow-lg whitespace-nowrap cursor-pointer transition-all hover:-translate-y-0.5", children: "L\u1EA5y Tr\u1ECDn B\u1ED9 Workshop \u2192" })] })] }) }), OFFLINE_EVENTS_DATA.length > 0 && _jsx(_Fragment, { children: _jsx("section", { id: "offline-showcase", className: "py-20 sm:py-24 border-b border-white/[0.08] bg-[#0c0c10] text-left", children: _jsxs("div", { className: "max-w-6xl mx-auto px-4 sm:px-6 space-y-12", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-4", children: [_jsxs("div", { className: "space-y-3 max-w-2xl", children: [_jsxs("div", { className: "inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-orange-500/35 bg-orange-500/10 text-orange-400 text-xs font-mono font-black uppercase tracking-widest", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-orange-500 animate-pulse" }), _jsx("span", { children: "OFFLINE & IN-HOUSE WORKSHOPS" })] }), _jsx("h2", { className: "text-2xl sm:text-4xl font-black text-white tracking-tight", children: "H\u00ECnh \u1EA2nh Workshop & S\u1EF1 Ki\u1EC7n Offline Th\u1EF1c Chi\u1EBFn" }), _jsx("p", { className: "text-sm sm:text-base text-zinc-300 leading-relaxed font-normal", children: "Kh\u00F4ng gian giao l\u01B0u, \u0111\u00E0o t\u1EA1o v\u00E0 chuy\u1EC3n giao gi\u1EA3i ph\u00E1p AI tr\u1EF1c ti\u1EBFp t\u1EA1i TP.HCM, c\u00E1c t\u1EADp \u0111o\u00E0n b\u00E1n l\u1EBB (MWG) v\u00E0 c\u00E1c tr\u01B0\u1EDDng \u0111\u1EA1i h\u1ECDc h\u00E0ng \u0111\u1EA7u (UEH)." })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs font-mono text-orange-400 bg-zinc-900 px-4 py-2 rounded-xl border border-zinc-800 w-fit", children: [_jsx(Users, { className: "w-4 h-4" }), _jsx("span", { children: "1.200+ Nh\u00E0 s\u00E1ng t\u1EA1o & Doanh nghi\u1EC7p" })] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8", children: OF

274FLINE_EVENTS_DATA.map((item) => (_jsxs("article", { className: "group rounded-3xl bg-[#14141c] border border-zinc-800 hover:border-orange-500/60 transition-all duration-300 flex flex-col justify-between overflow-hidden shadow-2xl", children: [_jsxs("div", { children: [_jsxs("div", { className: "relative aspect-[16/9] w-full overflow-hidden bg-black cursor-pointer", onClick: () => setPreviewOfflineImage({ url: item.image, title: item.title, subtitle: item.subtitle }), title: "Nh\u1EA5n \u0111\u1EC3 xem \u1EA3nh ph\u00F3ng to", children: [_jsx("img", { src: item.image, alt: item.title, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-700", loading: "lazy", referrerPolicy: "no-referrer" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-[#14141c] via-transparent to-black/40 pointer-events-none" }), _jsxs("div", { className: "absolute top-3 left-3 right-3 flex items-center justify-between gap-2 pointer-events-none", children: [_jsx("span", { className: "px-2.5 py-1 rounded-md bg-orange-500 text-white text-[10px] font-black uppercase tracking-wider shadow", children: item.tag }), _jsx("span", { className: "px-2.5 py-1 rounded-md bg-black/80 backdrop-blur-md border border-white/10 text-orange-400 text-[10px] font-mono font-bold", children: item.date })] }), _jsx("div", { className: "absolute bottom-3 right-3 p-2 rounded-xl bg-black/70 backdrop-blur-md text-white/80 group-hover:text-white group-hover:bg-orange-500 transition-all shadow", children: _jsx(ZoomIn, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "p-5 sm:p-6 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs text-zinc-400 font-mono", children: [_jsx(MapPin, { className: "w-3.5 h-3.5 text-orange-400" }), _jsx("span", { className: "truncate", children: item.location }), item.attendees && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-zinc-600", children: "\u2022" }), _jsx("span", { className: "text-zinc-300", children: item.attendees })] }))] }), _jsx("h3", { className: "text-base sm:text-lg font-bold text-white group-hover:text-orange-400 transition-colors leading-snug", children: item.title }), _jsx("p", { className: "text-xs sm:text-sm text-zinc-300 leading-relaxed font-normal", children: item.desc }), _jsx("div", { className: "pt-2 space-y-1.5 border-t border-zinc-800", children: item.highlights.map((h, i) => (_jsxs("div", { className: "flex items-center gap-2 text-xs text-zinc-400", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-orange-400 shrink-0" }), _jsx("span", { className: "truncate", children: h })] }, i))) })] })] }), _jsx("div", { className: "p-5 sm:p-6 pt-0", children: _jsxs("button", { onClick: () => setPreviewOfflineImage({ url: item.image, title: item.title, subtitle: item.subtitle }), className: "w-full py-2.5 rounded-xl bg-zinc-900 hover:bg-orange-500 hover:text-white border border-zinc-700/80 hover:border-orange-500 text-zinc-200 text-xs font-bold transition-all cursor-pointer flex items-center justify-center gap-2 shadow", children: [_jsx(ZoomIn, { className: "w-3.5 h-3.5" }), _jsx("span", { children: "Xem \u1EA2nh To\u00E0n C\u1EA3nh" })] }) })] }, item.id))) })] }) }) }), previewOfflineImage && (_jsx("div", { className: "fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex items-center justify-center p-4 sm:p-6", onClick: () => setPreviewOfflineImage(null), children: _jsxs("div", { className: "relative max-w-5xl w-full bg-[#0e0e14] border border-zinc-700 rounded-3xl overflow-hidden shadow-2xl", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between p-4 sm:p-5 border-b border-zinc-800", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-base sm:text-lg font-bold text-white", children: previewOfflineImage.title }), previewOfflineImage.subtitle && (_jsx("p", { className: "text-xs sm:text-sm text-orange-400", children: previewOfflineImage.subtitle }))] }), _jsx("button", { onClick: () => setPreviewOfflineImage(null), className: "p-2 rounded-xl bg-zinc-800/80 hover:bg-zinc-700 text-zinc-300 hover:text-white transition-colors cursor-pointer", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "relative aspect-[16/10] sm:aspect-[16/9] bg-black", children: _jsx("img", { src: previewOfflineImage.url, alt: previewOfflineImage.title, className: "w-full h-full object-contain" }) })] }) })), _jsx("footer", { className: "py-8 bg-[#070707] border-t border-white/[0.08] text-zinc-500 text-xs", children: _jsxs("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4", children: [_jsx("div", { children: "Tr\u1EA1m S\u00E1ng T\u1EA1o AI \u00B7 C-Station Events Hub" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }), className: "hover:text-white transition-colors cursor-pointer", children: "L\u00EAn \u0111\u1EA7u trang \u2191" }), _jsx("span", { children: "\u2022" }), _jsx("button", { onClick: onBackToHome, className: "text-[#FF6B1A] hover:underline cursor-pointer", children: "Quay l\u1EA1i Trang Ch\u1EE7" })] })] }) })] }));
275}

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.