{"id":3648,"date":"2025-10-17T04:03:19","date_gmt":"2025-10-16T21:03:19","guid":{"rendered":"https:\/\/cellbio.shop\/?page_id=3648"},"modified":"2025-10-17T04:09:36","modified_gmt":"2025-10-16T21:09:36","slug":"cl-41","status":"publish","type":"page","link":"https:\/\/cellbio.shop\/vi\/cl-41\/","title":{"rendered":"CL-41"},"content":{"rendered":"
\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n color: #333;\r\n }\r\n\r\n .container {\r\n max-width: 480px;\r\n margin: 0 auto;\r\n background: white;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* \ud5e4\ub354 \uc139\uc158 *\/\r\n .header {\r\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\r\n animation: pulse 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n }\r\n\r\n .gov-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.2);\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 12px;\r\n margin-bottom: 15px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n h1 {\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\r\n }\r\n\r\n .subtitle {\r\n font-size: 16px;\r\n opacity: 0.95;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* \ud0c0\uc774\uba38 \uc139\uc158 *\/\r\n .timer-section {\r\n background: #f8f9fa;\r\n padding: 25px 20px;\r\n border-bottom: 1px solid #e9ecef;\r\n }\r\n\r\n .timer-title {\r\n text-align: center;\r\n color: #495057;\r\n font-size: 14px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .timer {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .timer-item {\r\n background: white;\r\n padding: 15px;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.08);\r\n text-align: center;\r\n min-width: 70px;\r\n }\r\n\r\n .timer-value {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .timer-label {\r\n font-size: 11px;\r\n color: #6c757d;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud604\ud669 *\/\r\n .registration-status {\r\n background: white;\r\n padding: 20px;\r\n margin: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n }\r\n\r\n .status-bar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .status-text {\r\n font-size: 14px;\r\n color: #495057;\r\n }\r\n\r\n .status-count {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .progress-bar {\r\n width: 100%;\r\n height: 8px;\r\n background: #e9ecef;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 10px;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* \uc774\ubca4\ud2b8 \uc815\ubcf4 *\/\r\n .event-info {\r\n padding: 30px 20px;\r\n }\r\n\r\n .info-card {\r\n background: #f8f9fa;\r\n padding: 25px;\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .info-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: #1e3c72;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .info-icon {\r\n width: 30px;\r\n height: 30px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 8px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: 10px;\r\n color: white;\r\n }\r\n\r\n .info-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 12px;\r\n padding-left: 40px;\r\n }\r\n\r\n .info-label {\r\n color: #6c757d;\r\n font-size: 14px;\r\n margin-right: 10px;\r\n }\r\n\r\n .info-value {\r\n color: #333;\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \uc2ac\ub77c\uc774\ub354 *\/\r\n .slider-container {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .slider {\r\n position: relative;\r\n width: 100%;\r\n height: 250px;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .slide-caption {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\r\n color: white;\r\n padding: 20px;\r\n font-size: 14px;\r\n }\r\n\r\n .slider-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 15px;\r\n }\r\n\r\n .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #dee2e6;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n\r\n .dot.active {\r\n background: #667eea;\r\n width: 24px;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* \ube44\ub514\uc624 \uc139\uc158 *\/\r\n .video-section {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .video-wrapper {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .video-wrapper iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud3fc *\/\r\n .registration-form {\r\n padding: 30px 20px;\r\n background: #f8f9fa;\r\n }\r\n\r\n .form-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n text-align: center;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 14px;\r\n color: #495057;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n }\r\n\r\n input {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #e9ecef;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n background: white;\r\n }\r\n\r\n input:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .submit-btn {\r\n width: 100%;\r\n padding: 18px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n margin-top: 10px;\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .submit-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .submit-btn:disabled {\r\n background: #6c757d;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* \ud478\ud130 *\/\r\n .footer {\r\n background: #1e3c72;\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n }\r\n\r\n .footer-logo {\r\n font-size: 20px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .footer-text {\r\n font-size: 13px;\r\n opacity: 0.8;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \uc131\uacf5 \uba54\uc2dc\uc9c0 *\/\r\n .success-message {\r\n display: none;\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: white;\r\n padding: 30px;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n z-index: 1000;\r\n text-align: center;\r\n max-width: 90%;\r\n width: 350px;\r\n }\r\n\r\n .success-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n font-size: 30px;\r\n }\r\n\r\n .overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 999;\r\n }\r\n\r\n \/* \ubc18\uc751\ud615 *\/\r\n @media (max-width: 380px) {\r\n h1 { font-size: 24px; }\r\n .timer-value { font-size: 24px; }\r\n .timer-item { min-width: 60px; padding: 12px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <!-- \ud5e4\ub354 -->\r\n <div class=\"header\">\r\n <div class=\"gov-badge\">\ud83c\uddf0\ud83c\uddf7 D\u1ef1 \u00e1n h\u1ed7 tr\u1ee3 c\u00f4ng ngh\u1ec7 c\u1ee7a Ch\u00ednh ph\u1ee7 H\u00e0n Qu\u1ed1c<\/div>\r\n <h1>MCDI m\u1edf ra t\u01b0\u01a1ng lai<\/h1>\r\n <div class=\"subtitle\">\r\n H\u1ec7 th\u1ed1ng l\u1ecdc n\u01b0\u1edbc t\u1ed1i \u01b0u c\u1ee7a Vi\u1ec7t Nam<br>\r\n C\u00f4ng ngh\u1ec7 l\u1ecdc n\u01b0\u1edbc 100 t\u1ea5n\/ng\u00e0y\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ud0c0\uc774\uba38 -->\r\n <div class=\"timer-section\">\r\n <div class=\"timer-title\">Cho \u0111\u1ebfn khi h\u1ed9i th\u1ea3o b\u1eaft \u0111\u1ea7u<\/div>\r\n <div class=\"timer\" id=\"countdown\">\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"days\">0<\/div>\r\n <div class=\"timer-label\">Ng\u00e0y<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"hours\">0<\/div>\r\n <div class=\"timer-label\">gi\u1edd<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"minutes\">0<\/div>\r\n <div class=\"timer-label\">ph\u00fat<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"seconds\">0<\/div>\r\n <div class=\"timer-label\">n\u1ebfn<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ub4f1\ub85d \ud604\ud669 -->\r\n <div class=\"registration-status\">\r\n <div class=\"status-bar\">\r\n <span class=\"status-text\">S\u1ed1 l\u01b0\u1ee3ng ng\u01b0\u1eddi \u0111\u0103ng k\u00fd hi\u1ec7n t\u1ea1i<\/span>\r\n <span class=\"status-count\"><span id=\"currentCount\">12<\/span> \/ 50 ng\u01b0\u1eddi<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" id=\"progressBar\" style=\"width: 24%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \uc774\ubca4\ud2b8 \uc815\ubcf4 -->\r\n <div class=\"event-info\">\r\n <div class=\"info-card\">\r\n <div class=\"info-title\">\r\n <span class=\"info-icon\">\ud83d\udcc5<\/span>\r\n Th\u00f4ng tin s\u1ef1 ki\u1ec7n\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">ng\u00e0y:<\/span>\r\n <span class=\"info-value\">Ng\u00e0y 3 th\u00e1ng 11 n\u0103m 2025, 5:00 chi\u1ec1u - 8:00 t\u1ed1i<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">v\u1ecb tr\u00ed:<\/span>\r\n <span class=\"info-value\">\u0110\u1ecba \u0111i\u1ec3m l\u1eafp \u0111\u1eb7t th\u00ed \u0111i\u1ec3m L\u00e0o Cai<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">chi ti\u1ebft:<\/span>\r\n <span class=\"info-value\">H\u1ed9i th\u1ea3o v\u00e0 B\u1eefa t\u1ed1i H\u1ec7 th\u1ed1ng Mi\u1ec5n ph\u00ed O2&B<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">v\u01b0\u1eddn:<\/span>\r\n <span class=\"info-value\">Gi\u1edbi h\u1ea1n cho 50 ng\u01b0\u1eddi \u0111\u1ea7u ti\u00ean<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \uc774\ubbf8\uc9c0 \uc2ac\ub77c\uc774\ub354 -->\r\n <div class=\"slider-container\">\r\n <div class=\"slider\">\r\n <div class=\"slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/4A90E2\/FFFFFF?text=\uc815\uc218+\uc2dc\uc2a4\ud15c+\uc804\uacbd\" alt=\"\uc815\uc218 \uc2dc\uc2a4\ud15c\">\r\n <div class=\"slide-caption\">H\u1ec7 th\u1ed1ng l\u1ecdc n\u01b0\u1edbc hi\u1ec7n \u0111\u1ea1i<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/7B68EE\/FFFFFF?text=\uae30\uc220+\uc124\uba85\ud68c\" alt=\"\uae30\uc220 \uc124\uba85\">\r\n <div class=\"slide-caption\">Phi\u00ean h\u1ecdp t\u00f3m t\u1eaft k\u1ef9 thu\u1eadt chuy\u00ean gia<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/9370DB\/FFFFFF?text=\ud604\uc7a5+\uc124\uce58\" alt=\"\ud604\uc7a5 \uc124\uce58\">\r\n <div class=\"slide-caption\">L\u1eafp \u0111\u1eb7t t\u1ea1i L\u00e0o Cai<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"slider-dots\">\r\n <span class=\"dot active\" onclick=\"currentSlide(1)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(2)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(3)\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ube44\ub514\uc624 \uc139\uc158 -->\r\n <div class=\"video-section\">\r\n <div class=\"info-title\" style=\"margin-bottom: 15px;\">\r\n <span class=\"info-icon\">\ud83c\udfa5<\/span>\r\n Video gi\u1edbi thi\u1ec7u c\u00f4ng ngh\u1ec7\r\n <\/div>\r\n <div class=\"video-wrapper\">\r\n <iframe src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\" \r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ub4f1\ub85d \ud3fc -->\r\n <div class=\"registration-form\">\r\n <h2 class=\"form-title\">S\u1ef1 \u0111\u0103ng k\u00fd<\/h2>\r\n <form id=\"registrationForm\" action=\"\">\r\n <div class=\"form-group\">\r\n <label for=\"company\">T\u00ean c\u00f4ng ty\/t\u1ed5 ch\u1ee9c *<\/label>\r\n <input type=\"text\" id=\"company\" name=\"company\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"position\">Ti\u00eau \u0111\u1ec1 *<\/label>\r\n <input type=\"text\" id=\"position\" name=\"position\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"name\">t\u00ean *<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">li\u00ean h\u1ec7 *<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"010-0000-0000\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\u0110\u0103ng k\u00fd tham gia<\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"vi\"\/><\/form>\r\n <\/div>\r\n\r\n <!-- \ud478\ud130 -->\r\n <div class=\"footer\">\r\n <div class=\"footer-logo\">MCDI<\/div>\r\n <div class=\"footer-text\">\r\n D\u1ef1 \u00e1n h\u1ed7 tr\u1ee3 c\u00f4ng ngh\u1ec7 c\u1ee7a ch\u00ednh ph\u1ee7 H\u00e0n Qu\u1ed1c<br>\r\n H\u1ec7 th\u1ed1ng l\u1ecdc n\u01b0\u1edbc t\u1ed1i \u01b0u c\u1ee7a Vi\u1ec7t Nam<br>\r\n \u00a9 2024 MCDI. B\u1ea3o l\u01b0u m\u1ecdi quy\u1ec1n.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \uc131\uacf5 \uba54\uc2dc\uc9c0 -->\r\n <div class=\"overlay\" id=\"overlay\"><\/div>\r\n <div class=\"success-message\" id=\"successMessage\">\r\n <div class=\"success-icon\">\u2713<\/div>\r\n <h3 style=\"margin-bottom: 10px;\">\u0110\u00e3 ho\u00e0n t\u1ea5t \u0111\u0103ng k\u00fd!<\/h3>\r\n <p style=\"color: #6c757d; font-size: 14px;\">\u0110\u01a1n xin tham gia c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c nh\u1eadn th\u00e0nh c\u00f4ng.<\/p>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \uce74\uc6b4\ud2b8\ub2e4\uc6b4 \ud0c0\uc774\uba38\r\n function updateCountdown() {\r\n const targetDate = new Date('2025-11-03T17:00:00+09:00');\r\n const now = new Date();\r\n const difference = targetDate - now;\r\n\r\n if (difference > 0) {\r\n const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\r\n const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n const minutes = Math.floor((difference % (1000 * 60 * 60)) \/ (1000 * 60));\r\n const seconds = Math.floor((difference % (1000 * 60)) \/ 1000);\r\n\r\n document.getElementById('days').textContent = days;\r\n document.getElementById('hours').textContent = hours;\r\n document.getElementById('minutes').textContent = minutes;\r\n document.getElementById('seconds').textContent = seconds;\r\n } else {\r\n document.getElementById('countdown').innerHTML = '<div style=\"font-size: 20px; color: #e74c3c;\">\ud589\uc0ac\uac00 \uc885\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4<\/div>';\r\n }\r\n }\r\n\r\n setInterval(updateCountdown, 1000);\r\n updateCountdown();\r\n\r\n \/\/ \uc774\ubbf8\uc9c0 \uc2ac\ub77c\uc774\ub354\r\n let slideIndex = 1;\r\n \r\n function currentSlide(n) {\r\n showSlide(slideIndex = n);\r\n }\r\n\r\n function showSlide(n) {\r\n const slides = document.getElementsByClassName('slide');\r\n const dots = document.getElementsByClassName('dot');\r\n \r\n if (n > slides.length) slideIndex = 1;\r\n if (n < 1) slideIndex = slides.length;\r\n \r\n for (let i = 0; i < slides.length; i++) {\r\n slides[i].classList.remove('active');\r\n }\r\n \r\n for (let i = 0; i < dots.length; i++) {\r\n dots[i].classList.remove('active');\r\n }\r\n \r\n slides[slideIndex - 1].classList.add('active');\r\n dots[slideIndex - 1].classList.add('active');\r\n }\r\n\r\n \/\/ \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc\r\n setInterval(() => {\r\n slideIndex++;\r\n showSlide(slideIndex);\r\n }, 4000);\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uad00\ub9ac (localStorage \uc0ac\uc6a9)\r\n let registrationCount = parseInt(localStorage.getItem('registrationCount') || '12');\r\n \r\n function updateRegistrationCount() {\r\n document.getElementById('currentCount').textContent = registrationCount;\r\n const percentage = (registrationCount \/ 50) * 100;\r\n document.getElementById('progressBar').style.width = percentage + '%';\r\n \r\n if (registrationCount >= 50) {\r\n document.getElementById('submitBtn').disabled = true;\r\n document.getElementById('submitBtn').textContent = '\uc815\uc6d0 \ub9c8\uac10';\r\n }\r\n }\r\n\r\n updateRegistrationCount();\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c \ucc98\ub9ac\r\n document.getElementById('registrationForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n if (registrationCount >= 50) {\r\n alert('\uc8c4\uc1a1\ud569\ub2c8\ub2e4. \uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n \/\/ \ud3fc \ub370\uc774\ud130 \uc218\uc9d1\r\n const formData = {\r\n company: document.getElementById('company').value,\r\n position: document.getElementById('position').value,\r\n name: document.getElementById('name').value,\r\n phone: document.getElementById('phone').value,\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n \/\/ localStorage\uc5d0 \uc800\uc7a5 (\uc2e4\uc81c\ub85c\ub294 \uc11c\ubc84\ub85c \uc804\uc1a1)\r\n let registrations = JSON.parse(localStorage.getItem('registrations') || '[]');\r\n registrations.push(formData);\r\n localStorage.setItem('registrations', JSON.stringify(registrations));\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uc99d\uac00\r\n registrationCount++;\r\n localStorage.setItem('registrationCount', registrationCount);\r\n updateRegistrationCount();\r\n\r\n \/\/ \uc131\uacf5 \uba54\uc2dc\uc9c0 \ud45c\uc2dc\r\n document.getElementById('overlay').style.display = 'block';\r\n document.getElementById('successMessage').style.display = 'block';\r\n\r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n this.reset();\r\n\r\n \/\/ 3\ucd08 \ud6c4 \uba54\uc2dc\uc9c0 \uc228\uae30\uae30\r\n setTimeout(() => {\r\n document.getElementById('overlay').style.display = 'none';\r\n document.getElementById('successMessage').style.display = 'none';\r\n }, 3000);\r\n\r\n console.log('\ub4f1\ub85d \ub370\uc774\ud130:', formData);\r\n console.log('\uc804\uccb4 \ub4f1\ub85d \ubaa9\ub85d:', registrations);\r\n });\r\n\r\n \/\/ \uc804\ud654\ubc88\ud638 \ud3ec\ub9f7\ud305\r\n document.getElementById('phone').addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/[^0-9]\/g, '');\r\n if (value.length > 3 && value.length <= 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3);\r\n } else if (value.length > 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);\r\n }\r\n e.target.value = value;\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n``` C\u00e1c t\u00ednh n\u0103ng ch\u00ednh c\u1ee7a trang \u0111\u00edch ch\u00fang t\u00f4i \u0111\u00e3 t\u1ea1o: ## \u2728 Thi\u1ebft k\u1ebf & UX - **T\u1ed1i \u01b0u h\u00f3a cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng**: Thi\u1ebft k\u1ebf \u0111\u00e1p \u1ee9ng ho\u1ea1t \u0111\u1ed9ng ho\u00e0n h\u1ea3o tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb di \u0111\u1ed9ng - **Chuy\u1ec3n m\u00e0u sang tr\u1ecdng**: S\u1ef1 k\u1ebft h\u1ee3p m\u00e0u s\u1eafc tinh t\u1ebf gi\u1eefa t\u00edm v\u00e0 xanh lam - **Ho\u1ea1t \u1ea3nh m\u01b0\u1ee3t m\u00e0**: Tr\u1ea3i nghi\u1ec7m t\u01b0\u01a1ng t\u00e1c v\u1edbi hi\u1ec7u \u1ee9ng di chu\u1ed9t v\u00e0 chuy\u1ec3n ti\u1ebfp - **Kh\u1ea3 n\u0103ng \u0111\u1ecdc \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a**: K\u00edch th\u01b0\u1edbc ph\u00f4ng ch\u1eef th\u00e2n thi\u1ec7n v\u1edbi thi\u1ebft b\u1ecb di \u0111\u1ed9ng (16px tr\u1edf l\u00ean) v\u00e0 kho\u1ea3ng tr\u1eafng r\u1ed9ng r\u00e3i ## \ud83d\udd27 C\u00e1c t\u00ednh n\u0103ng ch\u00ednh 1. **\u0110\u1ebfm ng\u01b0\u1ee3c th\u1eddi gian th\u1ef1c**: T\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n \u0111\u1ebfn 5 gi\u1edd chi\u1ec1u ng\u00e0y 3 th\u00e1ng 11 n\u0103m 2025 2. **Qu\u1ea3n l\u00fd s\u1ed1 l\u01b0\u1ee3ng ng\u01b0\u1eddi \u0111\u0103ng k\u00fd**: Gi\u1edbi h\u1ea1n \u1edf 50, hi\u1ec3n th\u1ecb ti\u1ebfn tr\u00ecnh theo th\u1eddi gian th\u1ef1c 3. **Tr\u00ecnh chi\u1ebfu h\u00ecnh \u1ea3nh**: T\u1ef1 \u0111\u1ed9ng chuy\u1ec3n \u0111\u1ed5i gi\u1eefa 3 h\u00ecnh \u1ea3nh (kho\u1ea3ng th\u1eddi gian 4 gi\u00e2y) 4. **Video YouTube**: Ph\u00e1t ho\u00e0n h\u1ea3o v\u1edbi iframe \u0111\u00e1p \u1ee9ng 5. **L\u01b0u tr\u1eef d\u1eef li\u1ec7u**: L\u01b0u th\u00f4ng tin \u0111\u0103ng k\u00fd b\u1eb1ng localStorage ## \ud83d\udcf1 T\u1ed1i \u01b0u h\u00f3a cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng - K\u00edch th\u01b0\u1edbc n\u00fat c\u1ea3m \u1ee9ng (t\u1ed1i thi\u1ec3u 44px) - Hi\u1ec7u \u1ee9ng t\u1ef1 \u0111\u1ed9ng l\u1ea5y n\u00e9t cho c\u00e1c tr\u01b0\u1eddng nh\u1eadp li\u1ec7u - T\u1ef1 \u0111\u1ed9ng \u0111\u1ecbnh d\u1ea1ng s\u1ed1 \u0111i\u1ec7n tho\u1ea1i (010-0000-0000) - Cu\u1ed9n m\u01b0\u1ee3t m\u00e0 v\u00e0 ph\u1ea3n h\u1ed3i c\u1ea3m \u1ee9ng ## \ud83d\udcbe Qu\u1ea3n l\u00fd d\u1eef li\u1ec7u - T\u1ea5t c\u1ea3 d\u1eef li\u1ec7u \u0111\u0103ng k\u00fd \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef trong localStorage c\u1ee7a tr\u00ecnh duy\u1ec7t - D\u1eef li\u1ec7u \u0111\u0103ng k\u00fd c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ki\u1ec3m tra trong b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n - T\u1ef1 \u0111\u1ed9ng ch\u1eb7n \u0111\u0103ng k\u00fd khi s\u1ed1 l\u01b0\u1ee3ng ng\u01b0\u1eddi v\u01b0\u1ee3t qu\u00e1 50 Trang n\u00e0y c\u00f3 \u0111\u1ea7y \u0111\u1ee7 ch\u1ee9c n\u0103ng v\u00e0 s\u1eb5n s\u00e0ng s\u1eed d\u1ee5ng. \u0110\u1ec3 v\u1eadn h\u00e0nh th\u1ef1c t\u1ebf, b\u1ea1n c\u00f3 th\u1ec3 t\u00edch h\u1ee3p v\u1edbi API m\u00e1y ch\u1ee7 thay v\u00ec localStorage.\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ud83c\uddf0\ud83c\uddf7 \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \uc815\uc218 \uc2dc\uc2a4\ud15c 1\uc77c 100\ud1a4 \uc815\uc218 \ucc98\ub9ac \uae30\uc220 \uc138\ubbf8\ub098 \uc2dc\uc791\uae4c\uc9c0 0 \uc77c 0 \uc2dc\uac04 0 \ubd84 0 \ucd08 \ud604\uc7ac \ub4f1\ub85d \uc778\uc6d0 12 \/ 50\uba85 \ud83d\udcc5 \ud589\uc0ac \uc815\ubcf4 \uc77c\uc2dc: 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc \uc7a5\uc18c: \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ud604\uc7a5 \ub0b4\uc6a9: […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3648","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/pages\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/pages\/3648\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.shop\/vi\/wp-json\/wp\/v2\/wf_page_folders?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}