{"id":4450,"date":"2025-12-25T18:25:36","date_gmt":"2025-12-25T16:25:36","guid":{"rendered":"https:\/\/science.knu.ua\/new\/?page_id=4450"},"modified":"2026-03-23T16:13:36","modified_gmt":"2026-03-23T14:13:36","slug":"viddil-proyektnoyi-diyalnosti","status":"publish","type":"page","link":"https:\/\/science.knu.ua\/new\/?page_id=4450","title":{"rendered":"\u0412\u0456\u0434\u0434\u0456\u043b \u043f\u0440\u043e\u0454\u043a\u0442\u043d\u043e\u0457 \u0434\u0456\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0456"},"content":{"rendered":"<div class=\"vpd-wrapper\">\r\n    <!-- \u041f\u0456\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u0448\u0440\u0438\u0444\u0442\u0443 Montserrat \u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0438\u0445 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\r\n\r\n    <!-- \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u0443\u0434\u0438 \u0431\u0443\u0434\u0435 \u0437\u0433\u0435\u043d\u0435\u0440\u043e\u0432\u0430\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 -->\r\n    <div id=\"vpd-dynamic-content\"><\/div>\r\n\r\n    <style>\r\n        \/* ========================================== *\/\r\n        \/* CSS \u0417\u041c\u0406\u041d\u041d\u0406 (\u041a\u041e\u041b\u042c\u041e\u0420\u0418 \u0422\u0410 \u041f\u0410\u0420\u0410\u041c\u0415\u0422\u0420\u0418) *\/\r\n        \/* ========================================== *\/\r\n        .vpd-wrapper {\r\n            --knu-blue: #0b5394;\r\n            --knu-blue-dark: #073b6b;\r\n            --knu-blue-light: #e6f0fa;\r\n            --knu-red: #b80000;\r\n            --knu-red-dark: #8f0000;\r\n            --text-dark: #1e293b;\r\n            --text-muted: #475569;\r\n            --bg-page: #ffffff;\r\n            --bg-alt: #f8fafc;\r\n            --border-color: #e2e8f0;\r\n            --radius-md: 8px;\r\n            --radius-lg: 12px;\r\n            --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);\r\n            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08);\r\n            --shadow-lg: 0 10px 25px rgba(0,0,0,0.06);\r\n            --transition: all 0.25s ease-in-out;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u0411\u0410\u0417\u041e\u0412\u0406 \u0421\u0422\u0418\u041b\u0406 \u0422\u0410 \u0422\u0418\u041f\u041e\u0413\u0420\u0410\u0424\u0406\u041a\u0410 *\/\r\n        \/* ========================================== *\/\r\n        .vpd-wrapper {\r\n            font-family: 'Montserrat', sans-serif;\r\n            font-size: 18px; \r\n            line-height: 1.6;\r\n            color: var(--text-dark);\r\n            background: var(--bg-page);\r\n            width: 100%;\r\n            overflow-x: hidden;\r\n            margin: 0 auto;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n        \r\n        .vpd-wrapper * {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        .vpd-section {\r\n            padding: 60px 24px;\r\n        }\r\n\r\n        .vpd-container-inner {\r\n            max-width: 1050px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .vpd-wrapper h2 {\r\n            font-size: 28px;\r\n            font-weight: 600;\r\n            margin-bottom: 16px;\r\n            line-height: 1.3;\r\n            color: var(--text-dark);\r\n        }\r\n\r\n        .vpd-wrapper h3 {\r\n            font-size: 20px;\r\n            font-weight: 500;\r\n            color: var(--text-muted);\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* HEADER \/ HERO \u0421\u0415\u041a\u0426\u0406\u042f *\/\r\n        \/* ========================================== *\/\r\n        .vpd-hero {\r\n            background: linear-gradient(135deg, var(--knu-blue-dark) 0%, var(--knu-blue) 100%);\r\n            color: #fff;\r\n            text-align: center;\r\n            padding: 70px 24px 80px;\r\n            position: relative;\r\n        }\r\n        .vpd-hero::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0; left: 0; right: 0;\r\n            height: 24px;\r\n            background: var(--bg-page);\r\n            clip-path: polygon(0 100%, 100% 100%, 100% 0);\r\n        }\r\n        .vpd-hero .icon-wrapper {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 72px; height: 72px;\r\n            background: rgba(255,255,255,0.1);\r\n            border-radius: 50%;\r\n            margin-bottom: 24px;\r\n        }\r\n        .vpd-hero h2 {\r\n            color: #fff;\r\n            margin-bottom: 12px;\r\n            font-size: 38px;\r\n            letter-spacing: -0.01em;\r\n        }\r\n        .vpd-hero h3 {\r\n            color: #cbd5e1;\r\n            margin-bottom: 24px;\r\n            font-size: 22px;\r\n        }\r\n        .vpd-hero p {\r\n            font-size: 18px;\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            color: #e2e8f0;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u041f\u0420\u041e \u041a\u041e\u041d\u0421\u0423\u041b\u042c\u0422\u0410\u0426\u0406\u0407 (ABOUT) *\/\r\n        \/* ========================================== *\/\r\n        .vpd-about {\r\n            background-color: var(--bg-page);\r\n            padding-top: 20px;\r\n        }\r\n        .vpd-about-card {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 24px;\r\n            background: var(--bg-alt);\r\n            padding: 32px 40px;\r\n            border-radius: var(--radius-md);\r\n            border-left: 4px solid var(--knu-red);\r\n            box-shadow: var(--shadow-sm);\r\n        }\r\n        .vpd-about-icon {\r\n            color: var(--knu-red);\r\n            background: #fff;\r\n            padding: 16px;\r\n            border-radius: var(--radius-md);\r\n            box-shadow: var(--shadow-sm);\r\n            flex-shrink: 0;\r\n        }\r\n        .vpd-about-card p {\r\n            font-size: 18px;\r\n            font-weight: 400;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u041a\u041e\u041c\u0410\u041d\u0414\u0410 \u0412\u0406\u0414\u0414\u0406\u041b\u0423 (TEAM) *\/\r\n        \/* ========================================== *\/\r\n        .vpd-team-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n        .vpd-team-title {\r\n            color: var(--knu-red);\r\n            font-size: 28px;\r\n        }\r\n        .vpd-team-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n            gap: 20px;\r\n        }\r\n        .vpd-card {\r\n            background: #fff;\r\n            border: 1px solid var(--border-color);\r\n            border-radius: var(--radius-md);\r\n            padding: 24px;\r\n            transition: var(--transition);\r\n            position: relative;\r\n            display: flex;\r\n            flex-direction: column;\r\n            height: 100%;\r\n        }\r\n        .vpd-card:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: var(--shadow-lg);\r\n            border-color: var(--knu-blue);\r\n        }\r\n        .vpd-card.is-overlay-open {\r\n            z-index: 100 !important;\r\n            border-color: var(--knu-blue);\r\n            box-shadow: var(--shadow-md);\r\n        }\r\n        .vpd-card-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 16px;\r\n            margin-bottom: 16px;\r\n            border-bottom: 1px solid #f0f0f0;\r\n            padding-bottom: 16px;\r\n            min-height: 100px;\r\n        }\r\n        .vpd-photo-wrapper {\r\n            width: 72px; height: 72px; flex-shrink: 0;\r\n            border-radius: 50%; overflow: hidden;\r\n            background-color: var(--bg-alt); border: 2px solid #e6e6e6;\r\n            display: flex; align-items: center; justify-content: center;\r\n        }\r\n        .vpd-photo { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n        .vpd-fallback-icon { width: 32px; height: 32px; color: #999; display: none; }\r\n        .vpd-photo-wrapper.is-missing .vpd-photo { display: none; }\r\n        .vpd-photo-wrapper.is-missing .vpd-fallback-icon { display: block; }\r\n        \r\n        .vpd-text-group { display: flex; flex-direction: column; justify-content: center; width: 100%; padding-right: 5px; }\r\n        .vpd-role { font-size: 13px; font-weight: 700; color: var(--knu-red); margin-bottom: 6px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px;}\r\n        .vpd-name { font-size: 18px; font-weight: 700; color: var(--text-dark); line-height: 1.3; }\r\n        \r\n        .vpd-details { display: flex; flex-direction: column; flex-grow: 1; font-size: 15px; color: var(--text-muted); }\r\n        .vpd-detail-item { display: flex; align-items: flex-start; margin-bottom: 12px; word-break: break-word; position: relative;}\r\n        .vpd-detail-item .icon { width: 18px; height: 18px; margin-right: 12px; color: var(--knu-blue); flex-shrink: 0; margin-top: 3px; }\r\n        \r\n        .vpd-link { color: var(--text-dark); text-decoration: none; transition: color 0.2s; border-bottom: 1px dotted #ccc; }\r\n        .vpd-link:hover { color: var(--knu-blue); border-bottom-color: var(--knu-blue); }\r\n        \r\n        .vpd-qr-btn { background: none; border: none; cursor: pointer; padding: 4px; margin-left: 6px; color: #aaa; display: inline-flex; align-items: center; transition: all 0.2s; border-radius: 4px; }\r\n        .vpd-qr-btn:hover { color: var(--knu-blue); background: var(--knu-blue-light); }\r\n        \r\n        .vpd-qr-overlay {\r\n            position: absolute; top: 90px; right: 15px; width: 230px; height: auto; min-height: 130px;\r\n            background: #fff; border: 1px solid var(--border-color); box-shadow: var(--shadow-lg);\r\n            display: none; flex-direction: column; align-items: center; justify-content: flex-start;\r\n            border-radius: var(--radius-md); z-index: 20; padding: 12px; font-size: 13px;\r\n        }\r\n        .vpd-qr-overlay.active { display: flex; animation: popIn 0.2s ease; }\r\n        .vpd-qr-overlay img { width: 100px; height: 100px; object-fit: contain; margin-top: 5px; }\r\n        .vpd-overlay-header { display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 1px solid #eee; padding-bottom: 6px; margin-bottom: 10px; }\r\n        .vpd-overlay-title { font-weight: 700; color: var(--knu-blue); font-size: 13px; flex-grow: 1; text-align: left; }\r\n        .vpd-overlay-close { background: none; border: none; cursor: pointer; padding: 4px; color: #999; transition: color 0.2s; display: flex; align-items: center; border-radius: 4px;}\r\n        .vpd-overlay-close:hover { color: var(--knu-red); background: #ffeeee; }\r\n        \r\n        @keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }\r\n        \r\n        .vpd-links-row { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px dashed #eee; min-height: 40px; align-items: center; }\r\n        .vpd-ext-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--knu-blue); text-decoration: none; background: var(--knu-blue-light); padding: 6px 12px; border-radius: 20px; transition: all 0.2s ease; border: 1px solid transparent; line-height: 1.2; }\r\n        .vpd-ext-link:hover { background: var(--knu-blue); color: #fff; box-shadow: 0 4px 8px rgba(11, 83, 148, 0.2); }\r\n        .vpd-ext-link svg { width: 14px; height: 14px; flex-shrink: 0; }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u0417\u0410\u0412\u0414\u0410\u041d\u041d\u042f (TASKS) *\/\r\n        \/* ========================================== *\/\r\n        .vpd-tasks {\r\n            background-color: var(--bg-alt);\r\n            padding-top: 40px;\r\n            padding-bottom: 60px;\r\n        }\r\n        .vpd-tasks-title {\r\n            color: var(--knu-blue);\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n            max-width: 800px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            font-size: 26px;\r\n        }\r\n        .vpd-tasks-list {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 16px;\r\n            max-width: 1050px;\r\n            margin: 0 auto;\r\n            list-style: none;\r\n            padding: 0;\r\n        }\r\n        .vpd-task-item {\r\n            display: flex;\r\n            align-items: flex-start;\r\n            gap: 20px;\r\n            background: #fff;\r\n            padding: 24px 30px;\r\n            border-radius: var(--radius-md);\r\n            box-shadow: var(--shadow-sm);\r\n            border: 1px solid var(--border-color);\r\n            transition: var(--transition);\r\n        }\r\n        .vpd-task-item:hover {\r\n            border-color: #cbd5e1;\r\n        }\r\n        .vpd-task-item svg {\r\n            color: var(--knu-blue);\r\n            width: 24px; height: 24px;\r\n            flex-shrink: 0;\r\n            margin-top: 2px;\r\n        }\r\n        .vpd-task-item span {\r\n            color: var(--text-dark);\r\n            font-size: 18px;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u0423\u0421\u041f\u0406\u0428\u041d\u0406 \u041f\u0420\u041e\u0404\u041a\u0422\u0418 (SUCCESS) *\/\r\n        \/* ========================================== *\/\r\n        .vpd-success {\r\n            background: linear-gradient(135deg, var(--knu-blue) 0%, var(--knu-blue-dark) 100%);\r\n            color: #fff;\r\n            text-align: center;\r\n            padding: 60px 24px;\r\n        }\r\n        .vpd-success h2 {\r\n            color: #cbd5e1;\r\n            font-weight: 400;\r\n            font-size: 22px;\r\n            margin-bottom: 24px;\r\n        }\r\n        .vpd-success-projects {\r\n            font-size: 20px;\r\n            font-weight: 600;\r\n            color: #fff;\r\n            letter-spacing: 1px;\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n            gap: 16px 20px;\r\n        }\r\n        .vpd-success-projects a {\r\n            background: rgba(255,255,255,0.15);\r\n            padding: 10px 24px;\r\n            border-radius: 40px;\r\n            border: 1px solid rgba(255,255,255,0.2);\r\n            transition: var(--transition);\r\n            text-decoration: none;\r\n            color: #fff;\r\n            display: inline-block;\r\n        }\r\n        .vpd-success-projects a:hover {\r\n            background: rgba(255,255,255,0.25);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u0414\u041e\u041b\u0423\u0427\u0418\u0422\u0418\u0421\u042f (JOIN & QR) *\/\r\n        \/* ========================================== *\/\r\n        .vpd-join {\r\n            background: var(--bg-page);\r\n        }\r\n        .vpd-join-title {\r\n            color: var(--text-dark);\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n            font-size: 28px;\r\n        }\r\n        .vpd-join-list {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 24px;\r\n            max-width: 1100px;\r\n            margin: 0 auto;\r\n            list-style: none;\r\n            padding: 0;\r\n        }\r\n        .vpd-join-item {\r\n            background: #fff;\r\n            border-radius: var(--radius-md);\r\n            box-shadow: var(--shadow-sm);\r\n            border: 1px solid var(--border-color);\r\n            overflow: hidden;\r\n            transition: var(--transition);\r\n            display: flex;\r\n            flex-direction: column;\r\n            position: relative; \/* \u0414\u043e\u0434\u0430\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0456\u043e\u043d\u0443\u0432\u0430\u043d\u043d\u044f \u043e\u0432\u0435\u0440\u043b\u0435\u044e *\/\r\n        }\r\n        .vpd-join-item:hover {\r\n            border-color: #cbd5e1;\r\n            transform: translateY(-4px);\r\n            box-shadow: var(--shadow-lg);\r\n        }\r\n        .vpd-join-row {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 36px 24px;\r\n            gap: 20px;\r\n            text-align: center;\r\n            flex-grow: 1;\r\n        }\r\n        .vpd-join-info {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 16px;\r\n            flex-grow: 1;\r\n        }\r\n        .vpd-join-info span {\r\n            font-size: 18px;\r\n            font-weight: 600;\r\n            color: var(--text-dark);\r\n            line-height: 1.4;\r\n        }\r\n        .vpd-join-actions {\r\n            display: flex;\r\n            gap: 12px;\r\n            width: 100%;\r\n            justify-content: center;\r\n        }\r\n        .vpd-btn {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 8px;\r\n            background: var(--knu-red);\r\n            color: #fff !important;\r\n            text-decoration: none;\r\n            padding: 12px 20px;\r\n            border-radius: 6px;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            transition: var(--transition);\r\n            border: none;\r\n            cursor: pointer;\r\n            flex-grow: 1;\r\n        }\r\n        .vpd-btn:hover {\r\n            background: var(--knu-red-dark);\r\n        }\r\n        .vpd-qr-toggle {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            background: var(--bg-alt);\r\n            color: var(--knu-blue);\r\n            border: 1px solid var(--border-color);\r\n            padding: 12px;\r\n            border-radius: 6px;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            flex-shrink: 0;\r\n        }\r\n        .vpd-qr-toggle:hover {\r\n            background: var(--knu-blue-light);\r\n            border-color: var(--knu-blue);\r\n        }\r\n        \r\n        \/* \u0421\u0442\u0438\u043b\u0456 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u0432\u0435\u0440\u043b\u0435\u044e QR-\u043a\u043e\u0434\u0443 *\/\r\n        .vpd-join-qr-overlay {\r\n            position: absolute;\r\n            top: 0; left: 0; right: 0; bottom: 0;\r\n            background: rgba(255, 255, 255, 0.96);\r\n            backdrop-filter: blur(4px);\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n            transition: all 0.3s ease;\r\n            z-index: 10;\r\n            text-align: center;\r\n        }\r\n        .vpd-join-qr-overlay.active {\r\n            opacity: 1;\r\n            pointer-events: auto;\r\n        }\r\n        .vpd-join-qr-close {\r\n            position: absolute;\r\n            top: 12px;\r\n            right: 12px;\r\n            background: rgba(0,0,0,0.05);\r\n            border: none;\r\n            border-radius: 50%;\r\n            width: 32px; height: 32px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            color: var(--text-muted);\r\n            transition: var(--transition);\r\n        }\r\n        .vpd-join-qr-close:hover {\r\n            color: #fff;\r\n            background: var(--knu-red);\r\n        }\r\n        .vpd-qr-box {\r\n            background: #fff;\r\n            padding: 16px;\r\n            border-radius: 8px;\r\n            box-shadow: var(--shadow-sm);\r\n            border: 1px solid var(--border-color);\r\n            display: inline-block;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u041a\u041e\u041d\u0422\u0410\u041a\u0422\u0418 (CONTACTS) *\/\r\n        \/* ========================================== *\/\r\n        .vpd-contacts {\r\n            background: var(--bg-alt);\r\n            border-top: 1px solid var(--border-color);\r\n            padding-bottom: 80px;\r\n        }\r\n        .vpd-contacts-title {\r\n            text-align: center;\r\n            font-size: 24px;\r\n            margin-bottom: 50px;\r\n            font-weight: 600;\r\n            max-width: 700px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            color: var(--text-dark);\r\n        }\r\n        .vpd-contacts-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 24px;\r\n            max-width: 900px;\r\n            margin: 0 auto;\r\n        }\r\n        .vpd-contact-item {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            text-align: center;\r\n            background: #fff;\r\n            padding: 40px 24px;\r\n            border-radius: var(--radius-md);\r\n            box-shadow: var(--shadow-sm);\r\n            border: 1px solid var(--border-color);\r\n            transition: var(--transition);\r\n        }\r\n        .vpd-contact-item:hover {\r\n            box-shadow: var(--shadow-md);\r\n            transform: translateY(-2px);\r\n        }\r\n        .vpd-contact-actions-row {\r\n            display: flex;\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n            gap: 24px;\r\n            width: 100%;\r\n            margin-bottom: 24px;\r\n        }\r\n        .vpd-contact-action {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 10px;\r\n            flex: 1;\r\n            min-width: 180px;\r\n        }\r\n        .vpd-contact-action .icon-circle {\r\n            width: 60px; height: 60px;\r\n            background: var(--knu-blue-light);\r\n            color: var(--knu-blue);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        .vpd-action-label {\r\n            font-size: 13px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            color: var(--text-muted);\r\n            font-weight: 600;\r\n            margin-bottom: -4px;\r\n        }\r\n        .vpd-contact-action .vpd-action-link {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 6px;\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n            color: var(--knu-blue);\r\n            background: var(--knu-blue-light);\r\n            padding: 10px 20px;\r\n            border-radius: 30px;\r\n            text-decoration: none;\r\n            transition: all 0.2s;\r\n            text-align: center;\r\n            line-height: 1.4;\r\n        }\r\n        .vpd-contact-action .vpd-action-link:hover {\r\n            color: #fff;\r\n            background: var(--knu-blue);\r\n            box-shadow: 0 4px 8px rgba(11, 83, 148, 0.2);\r\n        }\r\n        .vpd-contact-extra {\r\n            font-size: 16px;\r\n            color: var(--text-muted);\r\n            line-height: 1.5;\r\n            max-width: 80%;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* \u041c\u0415\u0414\u0406\u0410 \u0417\u0410\u041f\u0418\u0422\u0418 \u0414\u041b\u042f \u0410\u0414\u0410\u041f\u0422\u0418\u0412\u041d\u041e\u0421\u0422\u0406 *\/\r\n        \/* ========================================== *\/\r\n        @media (max-width: 900px) {\r\n            .vpd-join-list { grid-template-columns: repeat(2, 1fr); }\r\n            .vpd-team-grid { grid-template-columns: repeat(2, 1fr); }\r\n            .vpd-tasks-list { grid-template-columns: 1fr; }\r\n        }\r\n        @media (max-width: 768px) {\r\n            .vpd-section { padding: 40px 20px; }\r\n            .vpd-hero { padding: 50px 20px 60px; }\r\n            .vpd-hero h2 { font-size: 30px; }\r\n            .vpd-hero p { font-size: 16px; }\r\n            .vpd-about-card { flex-direction: column; align-items: center; text-align: center; padding: 24px; }\r\n            .vpd-success-projects { font-size: 18px; flex-direction: column; align-items: center; gap: 12px; }\r\n            .vpd-task-item { padding: 20px; flex-direction: column; align-items: center; text-align: center;}\r\n            .vpd-join-list { grid-template-columns: 1fr; }\r\n            .vpd-team-grid { grid-template-columns: 1fr; }\r\n            .vpd-qr-overlay { width: 200px; right: auto; left: 50%; transform: translateX(-50%); }\r\n            \r\n            .vpd-contacts-grid { grid-template-columns: 1fr; }\r\n            .vpd-contact-actions-row { gap: 20px; }\r\n            .vpd-contact-action .vpd-action-link { font-size: 14px; padding: 10px 16px; width: 100%; }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n        \/\/ ======================================================================\r\n        \/\/ 1. \u0414\u0410\u041d\u0406 \u0414\u041b\u042f \u0420\u0415\u0414\u0410\u0413\u0423\u0412\u0410\u041d\u041d\u042f\r\n        \/\/ ======================================================================\r\n        const VPD_DATA = {\r\n            hero: {\r\n\t\t\t\t                title: \"\u0412\u0456\u0434\u0434\u0456\u043b \u043f\u0440\u043e\u0454\u043a\u0442\u043d\u043e\u0457 \u0434\u0456\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0456\",\r\n                description: \"\u041f\u0456\u0434\u0440\u043e\u0437\u0434\u0456\u043b \u043d\u0430\u0443\u043a\u043e\u0432\u043e-\u0434\u043e\u0441\u043b\u0456\u0434\u043d\u043e\u0457 \u0447\u0430\u0441\u0442\u0438\u043d\u0438 (\u041d\u0414\u0427), \u0449\u043e \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0443\u0454 \u043f\u043e\u0432\u043d\u0438\u0439 \u0446\u0438\u043a\u043b \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u043c\u0456\u0436\u043d\u0430\u0440\u043e\u0434\u043d\u0438\u0445 \u043d\u0430\u0443\u043a\u043e\u0432\u0438\u0445 \u0456\u043d\u0456\u0446\u0456\u0430\u0442\u0438\u0432: \u0432\u0456\u0434 \u043f\u043e\u0448\u0443\u043a\u0443 \u0433\u0440\u0430\u043d\u0442\u043e\u0432\u0438\u0445 \u043c\u043e\u0436\u043b\u0438\u0432\u043e\u0441\u0442\u0435\u0439 \u0434\u043e \u0437\u0432\u0456\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430 \u0440\u0435\u0430\u043b\u0456\u0437\u043e\u0432\u0430\u043d\u0438\u043c\u0438 \u043f\u0440\u043e\u0454\u043a\u0442\u0430\u043c\u0438.\"\r\n            },\r\n            about: {\r\n                text: \"\u0412\u0456\u0434\u0434\u0456\u043b \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0443\u0454 \u0434\u043e\u0441\u043b\u0456\u0434\u043d\u0438\u0446\u044c\u043a\u0456 \u043a\u043e\u043c\u0430\u043d\u0434\u0438 \u0449\u043e\u0434\u043e \u0443\u0447\u0430\u0441\u0442\u0456 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0430\u0445 \u0404\u0421 (Horizon Europe, Creative Europe), \u041d\u0410\u0422\u041e \u0442\u0430 \u0423\u041d\u0422\u0426, \u0441\u0443\u043f\u0440\u043e\u0432\u043e\u0434\u0436\u0443\u0454 \u043f\u0456\u0434\u043f\u0438\u0441\u0430\u043d\u043d\u044f \u043c\u0456\u0436\u043d\u0430\u0440\u043e\u0434\u043d\u0438\u0445 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0456\u0432 \u043d\u0430 \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u043d\u0430\u0443\u043a\u043e\u0432\u043e-\u0434\u043e\u0441\u043b\u0456\u0434\u043d\u0438\u0445 \u0440\u043e\u0431\u0456\u0442 \u0432 \u0456\u043d\u043e\u0437\u0435\u043c\u043d\u0456\u0439 \u0432\u0430\u043b\u044e\u0442\u0456 \u0442\u0430 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0438\u043c \u043f\u0456\u0434\u0440\u043e\u0437\u0434\u0456\u043b\u0430\u043c \u0423\u043d\u0456\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0443 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0454\u043a\u0442\u0438 \u043c\u0456\u0436\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0457 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0438.\"\r\n            },\r\n            team: {\r\n                title: \"\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0432\u0456\u0434\u0434\u0456\u043b\u0443 \u043f\u0440\u043e\u0454\u043a\u0442\u043d\u043e\u0457 \u0434\u0456\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0456 (\u0412\u041f\u0414)\",\r\n                items:[\r\n                    {\r\n                        name: \"\u0413\u0430\u0432\u0440\u0438\u043b\u0435\u043d\u043a\u043e \u041e\u043b\u0435\u043d\u0430 \u0421\u0435\u0440\u0433\u0456\u0457\u0432\u043d\u0430\",\r\n                        role: \"\u0417\u0430\u0432\u0456\u0434\u0443\u0432\u0430\u0447 \u0432\u0456\u0434\u0434\u0456\u043b\u0443\",\r\n                        photo: \"https:\/\/science.knu.ua\/new\/wp-content\/uploads\/2026\/02\/image-1.jpg\",\r\n                        phone: \"+38 0 (44) 239-32-56\",\r\n                        email:[\"grant.ndch@knu.ua\", \"havrylenko.olena@knu.ua\"],\r\n                        links:[\r\n                            { label: \"\u041f\u0440\u043e\u0454\u043a\u0442\u0438\", url: \"https:\/\/science.knu.ua\/new\/?page_id=4488\", icon: \"file-text\" },\r\n                            { label: \"\u041a\u043e\u043d\u043a\u0443\u0440\u0441\u0438\", url: \"https:\/\/science.knu.ua\/new\/?page_id=4491\", icon: \"file-text\" }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: \"\u041a\u043e\u043b\u043e\u043c\u0456\u0454\u0446\u044c \u041e\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440 \u041e\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440\u043e\u0432\u0438\u0447\",\r\n                        role: \"\u041f\u0440\u043e\u0432\u0456\u0434\u043d\u0438\u0439 \u044e\u0440\u0438\u0441\u0442\",\r\n                        photo: \"https:\/\/science.knu.ua\/new\/wp-content\/uploads\/2026\/03\/foto_kolomiyecz_oo.png\",\r\n                        phone: \"+38 0 (44) 239-32-56\",\r\n                        email:[\"grant.ndch@knu.ua\", \"oleksandr.kolomiiets@knu.ua\"],\r\n                        links:[\r\n                            { label: \"\u0414\u043e\u0433\u043e\u0432\u043e\u0440\u0438\", url: \"https:\/\/science.knu.ua\/new\/?page_id=4505\", icon: \"file-text\" },\r\n                            { label: \"\u0428\u0430\u0431\u043b\u043e\u043d\u0438\", url: \"https:\/\/science.knu.ua\/new\/?page_id=4422\", icon: \"file-text\" }\r\n                        ]\r\n                    },\r\n                    {\r\n                        name: \"\u041a\u0438\u0440\u0438\u043a \u0406\u043b\u043e\u043d\u0430 \u041c\u0438\u043a\u043e\u043b\u0430\u0457\u0432\u043d\u0430\",\r\n                        role: \"\u041f\u0440\u043e\u0432\u0456\u0434\u043d\u0438\u0439 \u0444\u0430\u0445\u0456\u0432\u0435\u0446\u044c\",\r\n                        photo: \"https:\/\/science.knu.ua\/new\/wp-content\/uploads\/2026\/03\/foto_kyryk_im.png\",\r\n                        phone: \"+38 0 (44) 239-32-56\",\r\n                        email:[\"grant.ndch@knu.ua\", \"ilona.kyryk@knu.ua\"],\r\n                        links:[\r\n                            { label: \"\u041f\u0440\u043e\u0454\u043a\u0442\u0438\", url: \"https:\/\/science.knu.ua\/new\/?page_id=4488\", icon: \"file-text\" },\r\n                            { label: \"\u041a\u043e\u043d\u043a\u0443\u0440\u0441\u0438\", url: \"https:\/\/science.knu.ua\/new\/?page_id=4491\", icon: \"file-text\" }\r\n                        ]\r\n                    },\r\n\t\t\t\t\t]\r\n                    },\r\n            tasks: {\r\n                title: \"\u041d\u0430 \u0432\u0456\u0434\u0434\u0456\u043b \u043f\u043e\u043a\u043b\u0430\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u0432\u0434\u0430\u043d\u044c:\",\r\n                items:[\r\n                    \"\u041d\u0430\u0434\u0430\u043d\u043d\u044f \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0439\u043d\u043e-\u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0456\u0439\u043d\u043e\u0457 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u0449\u043e\u0434\u043e \u0443\u0447\u0430\u0441\u0442\u0456 \u0423\u043d\u0456\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0443 \u0432 \u043c\u0456\u0436\u043d\u0430\u0440\u043e\u0434\u043d\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0430\u0445 \u0442\u0430 \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u0430\u0445 \u043d\u0430 \u0437\u0430\u043b\u0443\u0447\u0435\u043d\u043d\u044f \u0433\u0440\u0430\u043d\u0442\u043e\u0432\u043e\u0433\u043e \u0444\u0456\u043d\u0430\u043d\u0441\u0443\u0432\u0430\u043d\u043d\u044f (Horizon Europe, Euratom, Creative Europe, \u041d\u0410\u0422\u041e, \u0423\u041d\u0422\u0426 \u0442\u043e\u0449\u043e).\",\r\n                    \"\u041f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0442\u0430 \u043f\u043e\u0448\u0438\u0440\u0435\u043d\u043d\u044f \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0439\u043d\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b\u0456\u0432 \u0434\u043b\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0438\u0445 \u043f\u0456\u0434\u0440\u043e\u0437\u0434\u0456\u043b\u0456\u0432 \u0423\u043d\u0456\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0443 \u0449\u043e\u0434\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0438\u0445 \u043c\u043e\u0436\u043b\u0438\u0432\u043e\u0441\u0442\u0435\u0439 \u0433\u0440\u0430\u043d\u0442\u043e\u0432\u043e\u0457 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u043d\u0430\u0443\u043a\u043e\u0432\u043e\u0457 \u0434\u0456\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0456.\",\r\n                    \"\u041e\u0440\u0433\u0430\u043d\u0456\u0437\u0430\u0446\u0456\u0439\u043d\u0438\u0439 \u0442\u0430 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0442\u0438\u0432\u043d\u0438\u0439 \u0441\u0443\u043f\u0440\u043e\u0432\u0456\u0434 \u0440\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u043c\u0456\u0436\u043d\u0430\u0440\u043e\u0434\u043d\u0438\u0445 \u043d\u0430\u0443\u043a\u043e\u0432\u0438\u0445 \u043f\u0440\u043e\u0454\u043a\u0442\u0456\u0432 \u0442\u0430 \u0433\u0440\u0430\u043d\u0442\u0456\u0432, \u043e\u0431\u043b\u0456\u043a \u043f\u043e\u043a\u0430\u0437\u043d\u0438\u043a\u0456\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456 \u0437\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0430\u043c\u0438 \u0434\u0456\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0456.\",\r\n                    \"\u041e\u0440\u0433\u0430\u043d\u0456\u0437\u0430\u0446\u0456\u044f \u0442\u0430 \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0435\u043d\u043d\u044f \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u0443 \u0437\u0430\u0445\u043e\u0434\u0456\u0432 \u0456\u0437 \u0443\u043a\u043b\u0430\u0434\u0430\u043d\u043d\u044f \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0456\u0432 \u043d\u0430 \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u0434\u043e\u0441\u043b\u0456\u0434\u0436\u0435\u043d\u044c \u0456 \u0440\u043e\u0437\u0440\u043e\u0431\u043e\u043a \u0437\u0430 \u043a\u043e\u0448\u0442\u0438 \u0444\u0456\u0437\u0438\u0447\u043d\u0438\u0445 \u0442\u0430 \u044e\u0440\u0438\u0434\u0438\u0447\u043d\u0438\u0445 \u043e\u0441\u0456\u0431 \u0432 \u0456\u043d\u043e\u0437\u0435\u043c\u043d\u0456\u0439 \u0432\u0430\u043b\u044e\u0442\u0456.\",\r\n                    \"\u041f\u0456\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0442\u0430 \u043f\u043e\u0434\u0430\u0447\u0430 \u0437\u0432\u0456\u0442\u043d\u043e\u0457 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0457 \u0434\u043e \u041c\u0456\u043d\u0456\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 \u043e\u0441\u0432\u0456\u0442\u0438 \u0456 \u043d\u0430\u0443\u043a\u0438 \u0423\u043a\u0440\u0430\u0457\u043d\u0438 \u0442\u0430 \u0456\u043d\u0448\u0438\u0445 \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u0430\u0446\u0456\u0439, \u0432 \u0442\u043e\u043c\u0443 \u0447\u0438\u0441\u043b\u0456 \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0440\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u043c\u0456\u0436\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0457 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0457 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0438.\"\r\n                ]\r\n            },\r\n            success: {\r\n                title: \"\u041d\u0430\u0443\u043a\u043e\u0432\u0446\u0456 \u041a\u041d\u0423 \u0432\u0436\u0435 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0431\u0435\u0440\u0443\u0442\u044c \u0443\u0447\u0430\u0441\u0442\u044c \u0443 \u043f\u0440\u043e\u0454\u043a\u0442\u0430\u0445:\",\r\n                projects:[\r\n                    { name: \"HORIZON EUROPE\", url: \"https:\/\/horizon-europe.org.ua\/uk\/home\/\" },\r\n                    { name: \"NATO\", url: \"https:\/\/www.nato.int\/en\/about-us\/organization\/nato-structure\/science-for-peace-and-security-hub\/grant-mechanisms\" },\r\n                    { name: \"CRDF\", url: \"https:\/\/www.crdfglobal.org\/funding-opportunities\/\" },\r\n                    { name: \"ERC\", url: \"https:\/\/erc.europa.eu\/apply-grant\" }\r\n                ]\r\n            },\r\n            join: {\r\n                title: \"\u0414\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435\u0441\u044f \u0434\u043e \u043c\u0456\u0436\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0457 \u043d\u0430\u0443\u043a\u043e\u0432\u043e\u0457 \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0442\u0438\",\r\n                items:[\r\n                    {\r\n                        icon: \"clipboard-list\",\r\n                        label: \"\u0417\u0430\u043f\u043e\u0432\u043d\u0438\u0442\u0438 \u0430\u043d\u043a\u0435\u0442\u0443 \u043d\u0430\u0443\u043a\u043e\u0432\u0446\u044f \u0434\u043b\u044f \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u0457 \u0437 \u0432\u0456\u0434\u0434\u0456\u043b\u043e\u043c\",\r\n                        url: \"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScmEwop2PopQbC8qLqS0Fy1zAjtZcIyJdQbBn2V_f1gYjvNWw\/viewform\"\r\n                    },\r\n                    {\r\n                        icon: \"mail-plus\",\r\n                        label: \"\u041f\u0456\u0434\u043f\u0438\u0441\u0430\u0442\u0438\u0441\u044f \u043d\u0430 \u0440\u043e\u0437\u0441\u0438\u043b\u043a\u0443 Google \u0413\u0440\u0443\u043f\u0438\",\r\n                        url: \"https:\/\/groups.google.com\/g\/grantndch\"\r\n                    },\r\n                    {\r\n                        icon: \"globe\",\r\n                        label: \"\u041f\u043e\u0442\u043e\u0447\u043d\u0456 \u0437\u0432'\u044f\u0437\u043a\u0438 \u0423\u043d\u0456\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0443\",\r\n                        url: \"https:\/\/ec.europa.eu\/info\/funding-tenders\/opportunities\/portal\/screen\/how-to-participate\/org-details\/994789903?keywords=taras%20shevchenko%20national%20university&isExactMatch=true&type=ORGANISATION,PERSON&order=DESC&pageNumber=1&pageSize=50&sortBy=lastModified\"\r\n                    }\r\n                ]\r\n            },\r\n            contacts: {\r\n                intro: \"\u0422\u0430 \u0437\u0432\u0435\u0440\u0442\u0430\u0439\u0442\u0435\u0441\u044f \u0437\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u044e \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0454\u044e\",\r\n                phone: \"(044)239-32-25\",\r\n                phone_link: \"+380442393225\",\r\n                email: \"grant.ndch@knu.ua\",\r\n                location: \"\u043a. 107, \u0413\u043e\u043b\u043e\u0432\u043d\u0438\u0439 \u043a\u043e\u0440\u043f\u0443\u0441 \u0423\u043d\u0456\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0443 (\u0412\u043e\u043b\u043e\u0434\u0438\u043c\u0438\u0440\u0441\u044c\u043a\u0430, 60)\",\r\n                projects_label: \"\u041f\u0440\u043e\u0454\u043a\u0442\u0438\",\r\n                projects_url: \"https:\/\/science.knu.ua\/new\/?page_id=4488&year=active&type=%D0%B7%D0%B0%D0%BA%D0%BE%D1%80%D0%B4%D0%BE%D0%BD%D0%BD%D0%B8%D0%B9\",\r\n                contests_label: \"\u041a\u043e\u043d\u043a\u0443\u0440\u0441\u0438\",\r\n                contests_url: \"https:\/\/science.knu.ua\/new\/?page_id=4491&year=active&type=%D0%B7%D0%B0%D0%BA%D0%BE%D1%80%D0%B4%D0%BE%D0%BD%D0%BD%D0%B8%D0%B9\",\r\n                ndch_desc: \"\u043d\u0430 \u0441\u0430\u0439\u0442\u0456 \u043d\u0430\u0443\u043a\u043e\u0432\u043e-\u0434\u043e\u0441\u043b\u0456\u0434\u043d\u043e\u0457 \u0447\u0430\u0441\u0442\u0438\u043d\u0438 (\u0442\u0430\u043a\u043e\u0436 \u043d\u0430\u044f\u0432\u043d\u0435 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u0430\u0440\u0456\u0457 \u041a\u041d\u0423)\"\r\n            }\r\n        };\r\n\r\n        \/\/ ======================================================================\r\n        \/\/ 2. \u0413\u0415\u041d\u0415\u0420\u0410\u0426\u0406\u042f \u041a\u041e\u041d\u0422\u0415\u041d\u0422\u0423\r\n        \/\/ ======================================================================\r\n        document.addEventListener(\"DOMContentLoaded\", () => {\r\n            const wrapper = document.getElementById(\"vpd-dynamic-content\");\r\n            if (!wrapper) return;\r\n\r\n            const createSection = (tag, className, innerHTML) => {\r\n                const el = document.createElement(tag);\r\n                el.className = `vpd-section ${className}`;\r\n                el.innerHTML = `<div class=\"vpd-container-inner\">${innerHTML}<\/div>`;\r\n                return el;\r\n            };\r\n\r\n            \/\/ 1. HERO\r\n            wrapper.appendChild(createSection(\"header\", \"vpd-hero\", `\r\n                <div class=\"icon-wrapper\">\r\n                    <i data-lucide=\"globe-2\" style=\"width: 36px; height: 36px;\"><\/i>\r\n                <\/div>\r\n                <h2>${VPD_DATA.hero.title}<\/h2>\r\n                <p>${VPD_DATA.hero.description}<\/p>\r\n            `));\r\n\r\n            \/\/ 2. ABOUT\r\n            wrapper.appendChild(createSection(\"section\", \"vpd-about\", `\r\n                <div class=\"vpd-about-card\">\r\n                    <div class=\"vpd-about-icon\"><i data-lucide=\"compass\" style=\"width: 32px; height: 32px;\"><\/i><\/div>\r\n                    <p>${VPD_DATA.about.text}<\/p>\r\n                <\/div>\r\n            `));\r\n\r\n            \/\/ 3. TEAM (\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0456 \u043a\u0430\u0440\u0442\u043a\u0438)\r\n            let teamHTML = `\r\n                <div class=\"vpd-team-header\">\r\n                    <h2 class=\"vpd-team-title\">${VPD_DATA.team.title}<\/h2>\r\n                <\/div>\r\n                <div class=\"vpd-team-grid\">\r\n            `;\r\n            VPD_DATA.team.items.forEach(person => {\r\n                const hasPhoto = person.photo && person.photo.trim() !== \"\";\r\n                \r\n                let phoneHTML = '';\r\n                if(person.phone) {\r\n                    const phoneClean = person.phone.replace(\/[^\\d+]\/g, '');\r\n                    phoneHTML = `\r\n                        <div class=\"vpd-detail-item\">\r\n                            <i data-lucide=\"phone\" class=\"icon\"><\/i>\r\n                            <div style=\"display:flex; align-items:center; flex-wrap:wrap;\">\r\n                                <a href=\"tel:${phoneClean}\" class=\"vpd-link\">${person.phone}<\/a>\r\n                                <button class=\"vpd-qr-btn\" onclick=\"window.toggleTeamQR(this, 'tel:${phoneClean}')\" title=\"QR \u0434\u043b\u044f \u0434\u0437\u0432\u0456\u043d\u043a\u0430\">\r\n                                    <i data-lucide=\"qr-code\" style=\"width:14px; height:14px;\"><\/i>\r\n                                <\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                }\r\n\r\n                let emailHTML = '';\r\n                if(person.email && person.email.length > 0) {\r\n                    person.email.forEach(em => {\r\n                        emailHTML += `\r\n                            <div class=\"vpd-detail-item\">\r\n                                <i data-lucide=\"mail\" class=\"icon\"><\/i>\r\n                                <div style=\"display:flex; align-items:center; flex-wrap:wrap;\">\r\n                                    <a href=\"mailto:${em}\" class=\"vpd-link\">${em}<\/a>\r\n                                    <button class=\"vpd-qr-btn\" onclick=\"window.toggleTeamQR(this, 'mailto:${em}')\" title=\"QR \u0434\u043b\u044f \u043f\u043e\u0448\u0442\u0438\">\r\n                                        <i data-lucide=\"qr-code\" style=\"width:14px; height:14px;\"><\/i>\r\n                                    <\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                        `;\r\n                    });\r\n                }\r\n\r\n                let linksHTML = '';\r\n                if(person.links && person.links.length > 0) {\r\n                    person.links.forEach(l => {\r\n                        linksHTML += `\r\n                            <a href=\"${l.url}\" class=\"vpd-ext-link\" target=\"_blank\" title=\"${l.label}\">\r\n                                <i data-lucide=\"${l.icon}\"><\/i> ${l.label}\r\n                            <\/a>\r\n                        `;\r\n                    });\r\n                }\r\n\r\n                teamHTML += `\r\n                    <div class=\"vpd-card\">\r\n                        <div class=\"vpd-qr-overlay\"><\/div>\r\n                        <div class=\"vpd-card-header\">\r\n                            <div class=\"vpd-photo-wrapper ${!hasPhoto ? 'is-missing' : ''}\">\r\n                                <img decoding=\"async\" src=\"${person.photo}\" alt=\"\u0424\u043e\u0442\u043e\" class=\"vpd-photo\" loading=\"lazy\" onerror=\"this.parentNode.classList.add('is-missing')\">\r\n                                <i data-lucide=\"user\" class=\"vpd-fallback-icon\"><\/i>\r\n                            <\/div>\r\n                            <div class=\"vpd-text-group\">\r\n                                <div class=\"vpd-role\">${person.role}<\/div>\r\n                                <div class=\"vpd-name\">${person.name}<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"vpd-details\">\r\n                            ${phoneHTML}\r\n                            ${emailHTML}\r\n                            ${linksHTML ? `<div class=\"vpd-links-row\">${linksHTML}<\/div>` : ''}\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n            });\r\n            teamHTML += `<\/div>`;\r\n            wrapper.appendChild(createSection(\"section\", \"vpd-team\", teamHTML));\r\n\r\n            \/\/ 4. TASKS\r\n            let tasksHTML = `<h2>${VPD_DATA.tasks.title}<\/h2><ul class=\"vpd-tasks-list\">`;\r\n            VPD_DATA.tasks.items.forEach(task => {\r\n                tasksHTML += `\r\n                    <li class=\"vpd-task-item\">\r\n                        <i data-lucide=\"check-circle-2\"><\/i>\r\n                        <span>${task}<\/span>\r\n                    <\/li>\r\n                `;\r\n            });\r\n            tasksHTML += `<\/ul>`;\r\n            const taskSection = createSection(\"section\", \"vpd-tasks\", tasksHTML);\r\n            taskSection.querySelector('h2').className = 'vpd-tasks-title';\r\n            wrapper.appendChild(taskSection);\r\n\r\n            \/\/ 5. SUCCESS\r\n            const projectBadges = VPD_DATA.success.projects.map(p => `<a href=\"${p.url}\" target=\"_blank\" rel=\"noopener noreferrer\">${p.name}<\/a>`).join('');\r\n            wrapper.appendChild(createSection(\"section\", \"vpd-success\", `\r\n                <i data-lucide=\"award\" style=\"width: 44px; height: 44px; color: #fff; margin-bottom: 12px; opacity: 0.9;\"><\/i>\r\n                <h2>${VPD_DATA.success.title}<\/h2>\r\n                <div class=\"vpd-success-projects\">${projectBadges}<\/div>\r\n            `));\r\n\r\n            \/\/ 6. JOIN & QR\r\n            let joinHTML = `<h2 class=\"vpd-join-title\">${VPD_DATA.join.title}<\/h2><ul class=\"vpd-join-list\">`;\r\n            VPD_DATA.join.items.forEach((item, index) => {\r\n                const qrId = `vpd-join-qr-${index}`;\r\n                joinHTML += `\r\n                    <li class=\"vpd-join-item\">\r\n                        <div class=\"vpd-join-row\">\r\n                            <div class=\"vpd-join-info\">\r\n                                <i data-lucide=\"${item.icon}\" style=\"color: var(--knu-blue); width: 36px; height: 36px; margin-bottom: 8px;\"><\/i>\r\n                                <span>${item.label}<\/span>\r\n                            <\/div>\r\n                            <div class=\"vpd-join-actions\">\r\n                                <a href=\"${item.url}\" target=\"_blank\" class=\"vpd-btn\">\u0412\u0456\u0434\u043a\u0440\u0438\u0442\u0438 <i data-lucide=\"external-link\" style=\"width: 18px; height: 18px;\"><\/i><\/a>\r\n                                <button class=\"vpd-qr-toggle\" onclick=\"window.toggleVpdQr('${qrId}', '${item.url}')\" title=\"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 QR-\u043a\u043e\u0434\">\r\n                                    <i data-lucide=\"qr-code\" style=\"width: 20px; height: 20px;\"><\/i>\r\n                                <\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div id=\"${qrId}\" class=\"vpd-join-qr-overlay\">\r\n                            <button class=\"vpd-join-qr-close\" onclick=\"window.toggleVpdQr('${qrId}', '${item.url}')\" title=\"\u0417\u0430\u043a\u0440\u0438\u0442\u0438\">\r\n                                <i data-lucide=\"x\" style=\"width: 20px; height: 20px;\"><\/i>\r\n                            <\/button>\r\n                            <a href=\"${item.url}\" target=\"_blank\" title=\"\u041d\u0430\u0442\u0438\u0441\u043d\u0456\u0442\u044c, \u0449\u043e\u0431 \u043f\u0435\u0440\u0435\u0439\u0442\u0438\">\r\n                                <div class=\"vpd-qr-box\"><\/div>\r\n                            <\/a>\r\n                            <p style=\"margin-top: 16px; font-size: 14px; color: var(--text-muted); font-weight: 500;\">\u0412\u0456\u0434\u0441\u043a\u0430\u043d\u0443\u0439\u0442\u0435 \u0430\u0431\u043e \u043d\u0430\u0442\u0438\u0441\u043d\u0456\u0442\u044c<\/p>\r\n                        <\/div>\r\n                    <\/li>\r\n                `;\r\n            });\r\n            joinHTML += `<\/ul>`;\r\n            wrapper.appendChild(createSection(\"section\", \"vpd-join\", joinHTML));\r\n\r\n            \/\/ 7. CONTACTS\r\n            wrapper.appendChild(createSection(\"footer\", \"vpd-contacts\", `\r\n                <h2 class=\"vpd-contacts-title\">${VPD_DATA.contacts.intro}<\/h2>\r\n                <div class=\"vpd-contacts-grid\">\r\n                    <div class=\"vpd-contact-item\">\r\n                        <div class=\"vpd-contact-actions-row\">\r\n                            <div class=\"vpd-contact-action\">\r\n                                <div class=\"icon-circle\"><i data-lucide=\"phone\" style=\"width: 26px; height: 26px;\"><\/i><\/div>\r\n                                <span class=\"vpd-action-label\">\u0422\u0435\u043b\u0435\u0444\u043e\u043d<\/span>\r\n                                <a href=\"tel:${VPD_DATA.contacts.phone_link}\" class=\"vpd-action-link\">${VPD_DATA.contacts.phone}<\/a>\r\n                            <\/div>\r\n                            <div class=\"vpd-contact-action\">\r\n                                <div class=\"icon-circle\"><i data-lucide=\"mail\" style=\"width: 26px; height: 26px;\"><\/i><\/div>\r\n                                <span class=\"vpd-action-label\">\u041f\u043e\u0448\u0442\u0430<\/span>\r\n                                <a href=\"mailto:${VPD_DATA.contacts.email}\" class=\"vpd-action-link\">${VPD_DATA.contacts.email}<\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <span class=\"vpd-contact-extra\">${VPD_DATA.contacts.location}<\/span>\r\n                    <\/div>\r\n                    <div class=\"vpd-contact-item\">\r\n                        <div class=\"vpd-contact-actions-row\">\r\n                            <div class=\"vpd-contact-action\">\r\n                                <div class=\"icon-circle\"><i data-lucide=\"folder-open\" style=\"width: 26px; height: 26px;\"><\/i><\/div>\r\n                                <span class=\"vpd-action-label\" style=\"opacity: 0; user-select: none;\">-<\/span>\r\n                                <a href=\"${VPD_DATA.contacts.projects_url}\" target=\"_blank\" class=\"vpd-action-link\">${VPD_DATA.contacts.projects_label} <i data-lucide=\"external-link\" style=\"width: 16px; height: 16px;\"><\/i><\/a>\r\n                            <\/div>\r\n                            <div class=\"vpd-contact-action\">\r\n                                <div class=\"icon-circle\"><i data-lucide=\"rocket\" style=\"width: 26px; height: 26px;\"><\/i><\/div>\r\n                                <span class=\"vpd-action-label\" style=\"opacity: 0; user-select: none;\">-<\/span>\r\n                                <a href=\"${VPD_DATA.contacts.contests_url}\" target=\"_blank\" class=\"vpd-action-link\">${VPD_DATA.contacts.contests_label} <i data-lucide=\"external-link\" style=\"width: 16px; height: 16px;\"><\/i><\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <span class=\"vpd-contact-extra\">${VPD_DATA.contacts.ndch_desc}<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            `));\r\n\r\n            \/\/ \u0406\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u0456\u043a\u043e\u043d\u043e\u043a\r\n            const initLucide = () => {\r\n                if (typeof lucide !== 'undefined') {\r\n                    lucide.createIcons();\r\n                } else {\r\n                    setTimeout(initLucide, 100);\r\n                }\r\n            };\r\n            initLucide();\r\n        });\r\n\r\n        \/\/ ======================================================================\r\n        \/\/ 3. \u041b\u041e\u0413\u0406\u041a\u0410 \u0410\u041d\u0406\u041c\u0410\u0426\u0406\u0407 \u0422\u0410 \u0413\u0415\u041d\u0415\u0420\u0410\u0426\u0406\u0407 QR-\u041a\u041e\u0414\u0406\u0412\r\n        \/\/ ======================================================================\r\n        \r\n        \/\/ \u041b\u043e\u0433\u0456\u043a\u0430 \u0434\u043b\u044f QR-\u043a\u043e\u0434\u0456\u0432 \u0432 \u0431\u043b\u043e\u0446\u0456 \"\u0414\u043e\u043b\u0443\u0447\u0438\u0442\u0438\u0441\u044f\" (\u0447\u0435\u0440\u0435\u0437 Overlay)\r\n        window.toggleVpdQr = function(overlayId, url) {\r\n            const overlayEl = document.getElementById(overlayId);\r\n            if (!overlayEl) return;\r\n\r\n            const qrBox = overlayEl.querySelector('.vpd-qr-box');\r\n\r\n            if (overlayEl.classList.contains('active')) {\r\n                overlayEl.classList.remove('active');\r\n            } else {\r\n                if (qrBox.innerHTML.trim() === \"\") {\r\n                    const generateQR = () => {\r\n                        if (typeof QRCode !== 'undefined') {\r\n                            new QRCode(qrBox, {\r\n                                text: url,\r\n                                width: 140, \r\n                                height: 140,\r\n                                colorDark : \"#0b5394\",\r\n                                colorLight : \"#ffffff\",\r\n                                correctLevel : QRCode.CorrectLevel.H\r\n                            });\r\n                        } else {\r\n                            setTimeout(generateQR, 100);\r\n                        }\r\n                    };\r\n                    generateQR();\r\n                }\r\n                overlayEl.classList.add('active');\r\n            }\r\n        };\r\n\r\n        \/\/ \u041b\u043e\u0433\u0456\u043a\u0430 \u0434\u043b\u044f QR-\u043a\u043e\u0434\u0456\u0432 (\u0421\u043f\u043b\u0438\u0432\u0430\u044e\u0447\u0435 \u0432\u0456\u043a\u043d\u043e) \u043d\u0430 \u041a\u0430\u0440\u0442\u043a\u0430\u0445 \u041a\u043e\u043c\u0430\u043d\u0434\u0438\r\n        window.toggleTeamQR = function(btn, data) {\r\n            const card = btn.closest('.vpd-card');\r\n            const overlay = card.querySelector('.vpd-qr-overlay');\r\n            const currentData = overlay.getAttribute('data-current');\r\n            \r\n            if (overlay.classList.contains('active') && currentData === data) {\r\n                overlay.classList.remove('active');\r\n                overlay.setAttribute('data-current', '');\r\n                card.classList.remove('is-overlay-open');\r\n            } else {\r\n                const headerHtml = `\r\n                    <div class=\"vpd-overlay-header\">\r\n                        <span class=\"vpd-overlay-title\">QR-\u043a\u043e\u0434<\/span>\r\n                        <button class=\"vpd-overlay-close\" onclick=\"this.closest('.vpd-qr-overlay').classList.remove('active'); this.closest('.vpd-card').classList.remove('is-overlay-open');\" title=\"\u0417\u0430\u043a\u0440\u0438\u0442\u0438\">\r\n                            <i data-lucide=\"x\" style=\"width:16px; height:16px;\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                    <div id=\"qr-target-${Date.now()}\"><\/div>\r\n                `;\r\n                overlay.innerHTML = headerHtml; \r\n                const qrTarget = overlay.querySelector('div[id^=\"qr-target-\"]');\r\n                \r\n                const generateQR = () => {\r\n                    if (typeof QRCode !== 'undefined') {\r\n                        new QRCode(qrTarget, {\r\n                            text: data,\r\n                            width: 100, \r\n                            height: 100,\r\n                            colorDark : \"#0b5394\",\r\n                            colorLight : \"#ffffff\",\r\n                            correctLevel : QRCode.CorrectLevel.H\r\n                        });\r\n                    } else {\r\n                        setTimeout(generateQR, 100);\r\n                    }\r\n                };\r\n                generateQR();\r\n\r\n                overlay.classList.add('active');\r\n                overlay.setAttribute('data-current', data);\r\n                card.classList.add('is-overlay-open');\r\n                \r\n                if(typeof lucide !== 'undefined') lucide.createIcons();\r\n            }\r\n        };\r\n    <\/script>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4450","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=\/wp\/v2\/pages\/4450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4450"}],"version-history":[{"count":2,"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=\/wp\/v2\/pages\/4450\/revisions"}],"predecessor-version":[{"id":5885,"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=\/wp\/v2\/pages\/4450\/revisions\/5885"}],"wp:attachment":[{"href":"https:\/\/science.knu.ua\/new\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}