{"id":3640,"date":"2025-10-17T03:55:18","date_gmt":"2025-10-16T20:55:18","guid":{"rendered":"https:\/\/cellbio.site\/?page_id=3640"},"modified":"2025-10-17T04:00:20","modified_gmt":"2025-10-16T21:00:20","slug":"mc-gpt5","status":"publish","type":"page","link":"https:\/\/cellbio.site\/vi\/mc-gpt5\/","title":{"rendered":"MC-GPT5"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3640\" class=\"elementor elementor-3640\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48c51c1 e-flex e-con-boxed e-con e-parent\" data-id=\"48c51c1\" data-element_type=\"container\">\r\n\t\t\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f334c9c elementor-widget elementor-widget-html\" data-id=\"f334c9c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\tD\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t t\u1ec7p HTML duy nh\u1ea5t \u0111\u00e3 s\u1eb5n s\u00e0ng \u0111\u1ec3 tri\u1ec3n khai. T\u1ec7p n\u00e0y bao g\u1ed3m thi\u1ebft k\u1ebf ch\u1ea5t l\u01b0\u1ee3ng cao \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng, video YouTube, tr\u00ecnh chi\u1ebfu \u1ea3nh, s\u1ed1 l\u01b0\u1ee3ng ng\u01b0\u1eddi \u0111\u0103ng k\u00fd (50 ng\u01b0\u1eddi tham gia), b\u1ed9 \u0111\u1ebfm th\u1eddi gian (t\u00ednh \u0111\u1ebfn 17:00 ng\u00e0y 03\/11\/2025), l\u01b0u tr\u1eef \u0111\u0103ng k\u00fd v\u00e0 ng\u0103n ch\u1eb7n tr\u00f9ng l\u1eb7p d\u1ef1a tr\u00ean localStorage, v\u00e0 th\u1eadm ch\u00ed c\u1ea3 x\u1eed l\u00fd th\u1eddi h\u1ea1n \u0111\u0103ng k\u00fd. N\u1ebfu c\u1ea7n, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng thay th\u1ebf b\u1eb1ng API l\u01b0u tr\u1eef ph\u00eda m\u00e1y ch\u1ee7 th\u1ef1c t\u1ebf, nh\u01b0 \u0111\u01b0\u1ee3c m\u00f4 t\u1ea3 trong ph\u1ea7n b\u00ecnh lu\u1eadn. L\u01b0u \u00fd: - L\u01b0u tr\u1eef d\u1eef li\u1ec7u: M\u1eb7c \u0111\u1ecbnh l\u00e0 localStorage (\u0111\u01b0\u1ee3c l\u01b0u tr\u1eef an to\u00e0n trong tr\u00ecnh duy\u1ec7t). Khi k\u1ebft n\u1ed1i v\u1edbi m\u00e1y ch\u1ee7, ch\u1ec9 c\u1ea7n thay th\u1ebf c\u00e1c h\u00e0m saveRegistration v\u00e0 getRegistrationCount. - M\u00fai gi\u1edd: \u0110\u1eb7t th\u00e0nh 17:00 ng\u00e0y 03\/11\/2025 (+09:00). - Gi\u1edbi h\u1ea1n \u0111\u0103ng k\u00fd: Khi \u0111\u1ea1t \u0111\u1ebfn 50 ng\u01b0\u1eddi tham gia, n\u00fat s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u l\u00e0 &quot;\u0111\u00e3 \u0111\u00f3ng&quot;. Sao ch\u00e9p v\u00e0 l\u01b0u d\u01b0\u1edbi d\u1ea1ng .html \u0111\u1ec3 xem tr\u00ean tr\u00ecnh duy\u1ec7t di \u0111\u1ed9ng. ```html\r\n<!DOCTYPE html>\r\n<html lang=\"ko\">\r\n<head>\r\n  <meta charset=\"utf-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,viewport-fit=cover\" \/>\r\n  <meta name=\"theme-color\" content=\"#0b0b10\" \/>\r\n  <title>\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad<\/title>\r\n  <meta name=\"description\" content=\"\ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5, 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58. 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc. O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c, \uc138\ubbf8\ub098\uc640 \ub9cc\ucc2c \ud3ec\ud568. 50\uba85 \uc81c\ud55c \ucd08\uccad. \ucc38\uac00\ub4f1\ub85d \ud544\uc218.\">\r\n  <meta property=\"og:title\" content=\"\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad\">\r\n  <meta property=\"og:description\" content=\"1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 2025.11.03 17:00~20:00 \u00b7 \uc138\ubbf8\ub098 & \ub9cc\ucc2c \u00b7 50\uba85 \uc81c\ud55c\">\r\n  <meta property=\"og:type\" content=\"website\">\r\n  <meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1529101091764-c3526daf38fe?q=80&w=1600&auto=format&fit=crop\">\r\n  <meta property=\"og:locale\" content=\"ko_KR\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" crossorigin>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    :root{\r\n      --bg:#0b0b10;\r\n      --bg-soft:#11121a;\r\n      --card:#141621;\r\n      --text:#eef1f7;\r\n      --text-dim:#b9bfd1;\r\n      --line:#23283b;\r\n      --gold:#d4af37;\r\n      --gold-2:#f5d06f;\r\n      --accent: linear-gradient(135deg, #f5d06f 0%, #d4af37 100%);\r\n      --brand:#57c1ff;\r\n      --ok:#1fd290;\r\n      --warn:#ffb020;\r\n      --err:#ff5c5c;\r\n      --shadow: 0 10px 30px rgba(0,0,0,.45);\r\n      --radius-2:14px;\r\n      --radius-3:22px;\r\n      --radius-pill:999px;\r\n      --gap: 16px;\r\n      --fz-1: clamp(12px, 3vw, 14px);\r\n      --fz-2: clamp(14px, 4vw, 16px);\r\n      --fz-3: clamp(16px, 5vw, 18px);\r\n      --fz-4: clamp(18px, 6vw, 22px);\r\n      --fz-5: clamp(22px, 7vw, 28px);\r\n      --fz-6: clamp(28px, 9vw, 40px);\r\n    }\r\n    *{box-sizing:border-box}\r\n    html,body{height:100%}\r\n    body{\r\n      margin:0; background:radial-gradient(1200px 800px at 100% -10%, rgba(212,175,55,.08), transparent 60%), var(--bg);\r\n      color:var(--text); font-family:\"Noto Sans KR\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;\r\n    }\r\n    a{color:inherit;text-decoration:none}\r\n    .wrap{max-width:980px;margin:0 auto;padding:16px 16px 120px}\r\n    header.top{\r\n      display:flex;align-items:center;justify-content:space-between;gap:10px;\r\n      padding:12px; border:1px solid var(--line); border-radius:var(--radius-2);\r\n      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));\r\n      box-shadow:var(--shadow);\r\n      position:sticky; top:12px; z-index:30; backdrop-filter: blur(10px);\r\n    }\r\n    .tag{\r\n      font-size:var(--fz-1); color:var(--text-dim);\r\n      border:1px solid var(--line); padding:6px 10px; border-radius:var(--radius-pill);\r\n      display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.02)\r\n    }\r\n    .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}\r\n    .brand{display:flex;align-items:center;gap:8px;font-weight:700}\r\n    .brand .logo{\r\n      width:34px;height:34px;border-radius:10px; background:var(--accent);\r\n      display:grid;place-items:center;color:#111;font-weight:900;letter-spacing:.5px;\r\n      border:1px solid rgba(255,255,255,.4);\r\n    }\r\n    .cta-small{\r\n      padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line);\r\n      background:linear-gradient(180deg, #192033, #141621);\r\n      font-size:var(--fz-1); color:var(--text); display:inline-flex; gap:8px; align-items:center;\r\n    }\r\n    .hero{\r\n      margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-3);\r\n      background:\r\n        radial-gradient(1200px 600px at -20% -10%, rgba(87,193,255,.12), transparent 60%),\r\n        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)),\r\n        var(--card);\r\n      padding:22px; position:relative; overflow:hidden;\r\n    }\r\n    .hero h1{\r\n      font-size:var(--fz-6); line-height:1.1; margin:6px 0 10px; letter-spacing:-.3px;\r\n      font-weight:800;\r\n    }\r\n    .hero h1 .accent{background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}\r\n    .hero p.sub{font-size:var(--fz-3); color:var(--text-dim); margin:0 0 18px}\r\n    .pill{\r\n      display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px\r\n    }\r\n    .pill .chip{\r\n      border:1px solid var(--line); padding:8px 12px; border-radius:var(--radius-pill);\r\n      font-size:var(--fz-1); color:var(--text-dim); background:rgba(255,255,255,.02)\r\n    }\r\n    .countdown{\r\n      display:flex; gap:10px; align-items:stretch; margin:14px 0 8px\r\n    }\r\n    .box{\r\n      flex:1; min-width:0; background:rgba(255,255,255,.03); border:1px solid var(--line);\r\n      border-radius:12px; padding:12px; text-align:center\r\n    }\r\n    .box .num{font-size:clamp(18px, 8vw, 36px); font-weight:800; letter-spacing:-.5px}\r\n    .box .lab{font-size:var(--fz-1); color:var(--text-dim)}\r\n    .meta{\r\n      display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px\r\n    }\r\n    .meta .card{\r\n      background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:12px;\r\n      display:flex; gap:10px; align-items:center;\r\n    }\r\n    .icon{\r\n      width:34px;height:34px;border-radius:10px; display:grid;place-items:center;\r\n      background:linear-gradient(135deg, rgba(245,208,111,.2), rgba(212,175,55,.12));\r\n      border:1px solid rgba(212,175,55,.35); color:#f6e7ab\r\n    }\r\n    .title{font-size:var(--fz-2); font-weight:700}\r\n    .muted{color:var(--text-dim); font-size:var(--fz-1)}\r\n    .progress{\r\n      height:10px; background:#0e111a; border-radius:999px; border:1px solid var(--line); overflow:hidden\r\n    }\r\n    .progress .bar{\r\n      height:100%; background:var(--accent); width:0%; transition:width .4s ease\r\n    }\r\n    .actions{display:flex; gap:10px; margin-top:16px}\r\n    .btn{\r\n      border:none; cursor:pointer; border-radius:var(--radius-pill); padding:14px 18px; font-size:var(--fz-2);\r\n      font-weight:700; letter-spacing:.2px; transition:transform .06s ease, filter .2s ease, opacity .2s ease;\r\n      display:inline-flex; align-items:center; gap:10px;\r\n    }\r\n    .btn:active{transform:translateY(1px)}\r\n    .btn-primary{\r\n      background:var(--accent); color:#111; box-shadow:0 12px 28px rgba(245,208,111,.24)\r\n    }\r\n    .btn-ghost{\r\n      background:transparent; border:1px solid var(--line); color:var(--text)\r\n    }\r\n\r\n    \/* Video + Gallery *\/\r\n    section{\r\n      margin-top:22px; border:1px solid var(--line); border-radius:var(--radius-3);\r\n      background:var(--card); padding:18px;\r\n    }\r\n    .section-title{\r\n      font-size:var(--fz-4); font-weight:800; margin:2px 0 14px;\r\n    }\r\n    .vid{\r\n      position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16\/9;\r\n      border:1px solid var(--line); background:#000; box-shadow:var(--shadow);\r\n    }\r\n    .gallery{\r\n      display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x mandatory;\r\n      -webkit-overflow-scrolling: touch;\r\n    }\r\n    .gallery::-webkit-scrollbar{height:6px}\r\n    .gallery::-webkit-scrollbar-thumb{background:#31364d;border-radius:999px}\r\n    .slide{\r\n      min-width:78%; max-width:78%; scroll-snap-align:start; position:relative; border-radius:14px; overflow:hidden;\r\n      border:1px solid var(--line)\r\n    }\r\n    .slide img{width:100%; height:230px; object-fit:cover; display:block}\r\n    .slide .cap{\r\n      position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-size:var(--fz-1);\r\n      background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6))\r\n    }\r\n\r\n    \/* Info list *\/\r\n    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}\r\n    .info-card{\r\n      background:rgba(255,255,255,.03); border:1px solid var(--line); padding:12px; border-radius:12px\r\n    }\r\n    .info-card .hd{display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:6px}\r\n\r\n    \/* Floating CTA *\/\r\n    .dock{\r\n      position:fixed; left:0; right:0; bottom:0; padding:10px 14px 14px; background:linear-gradient(180deg, rgba(11,11,16,.0), rgba(11,11,16,.88) 30%, rgba(11,11,16,.98));\r\n      display:grid; gap:10px; z-index:40;\r\n      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\r\n    }\r\n    .dock .panel{\r\n      border:1px solid var(--line); background:linear-gradient(180deg, #121525, #0f1220);\r\n      padding:10px; border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:10px\r\n    }\r\n    .dock .mini{display:flex; flex-direction:column}\r\n    .dock .mini .when{font-size:var(--fz-1); color:var(--text-dim)}\r\n    .dock .mini .remain{font-size:var(--fz-2)}\r\n    .dock .btn-primary{padding:12px 16px}\r\n\r\n    \/* Modal (bottom sheet) *\/\r\n    .sheet{\r\n      position:fixed; inset:0; display:none; z-index:60; background:rgba(0,0,0,.52);\r\n    }\r\n    .sheet.active{display:block}\r\n    .sheet .body{\r\n      position:absolute; left:0; right:0; bottom:0; border-radius:18px 18px 0 0; border:1px solid var(--line);\r\n      background:linear-gradient(180deg, #141621, #0f1120); max-height:84%; overflow:auto; padding:14px 16px 22px; box-shadow:var(--shadow);\r\n      transform:translateY(100%); animation:slideUp .22s ease forwards;\r\n    }\r\n    @keyframes slideUp{to{transform:translateY(0)}}\r\n    .dragbar{width:44px;height:4px;border-radius:999px;background:#2d3147;margin:8px auto 10px}\r\n\r\n    form .row{display:grid; gap:8px; margin:10px 0}\r\n    label{font-size:var(--fz-1); color:var(--text-dim)}\r\n    input,select{\r\n      width:100%; padding:14px 12px; border-radius:12px; border:1px solid var(--line); background:#0d1020; color:var(--text);\r\n      font-size:var(--fz-2); outline:none; transition:border-color .2s ease, box-shadow .2s ease;\r\n    }\r\n    input:focus{border-color:#3a62ff; box-shadow:0 0 0 3px rgba(58,98,255,.2)}\r\n    .helper{font-size:var(--fz-1); color:var(--text-dim)}\r\n    .form-actions{display:flex; gap:8px; margin-top:10px}\r\n    .btn-line{border:1px solid var(--line); background:transparent; color:var(--text)}\r\n\r\n    \/* Toast *\/\r\n    .toast{\r\n      position:fixed; left:50%; transform:translateX(-50%); bottom:90px; z-index:80; display:none;\r\n      background:#0e1326; border:1px solid #2b3250; color:#eaf2ff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow); font-size:var(--fz-2)\r\n    }\r\n    .toast.show{display:block; animation:fade .2s ease}\r\n    @keyframes fade{from{opacity:0; transform:translateX(-50%) translateY(6px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}\r\n\r\n    \/* Desktop tweaks *\/\r\n    @media(min-width:840px){\r\n      .hero{padding:28px 28px 24px}\r\n      .slide img{height:280px}\r\n      .gallery .slide{min-width:48%; max-width:48%}\r\n      .wrap{padding-bottom:140px}\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"wrap\">\r\n    <header class=\"top\">\r\n      <span class=\"tag\"><span class=\"dot\"><\/span> D\u1ef1 \u00e1n h\u1ed7 tr\u1ee3 c\u00f4ng ngh\u1ec7 c\u1ee7a ch\u00ednh ph\u1ee7 H\u00e0n Qu\u1ed1c<\/span>\r\n      <div class=\"brand\">\r\n        <div class=\"logo\">M<\/div>\r\n        <div>\r\n          <div style=\"font-size:var(--fz-2);line-height:1;font-weight:800\">MCDI x O2&amp;B<\/div>\r\n          <div class=\"muted\" style=\"font-size:var(--fz-1)\">Vi\u1ec7t Nam T\u1ed1i \u01b0u h\u00f3a \u0110\u1ed5i m\u1edbi To\u00e0n v\u1eb9n<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <button class=\"cta-small\" id=\"btnAddCalendar\" aria-label=\"Th\u00eam v\u00e0o L\u1ecbch\">\r\n        \ud83d\udcc5 Th\u00eam l\u1ecbch\r\n      <\/button>\r\n    <\/header>\r\n\r\n    <section class=\"hero\" aria-label=\"Gi\u1edbi thi\u1ec7u s\u1ef1 ki\u1ec7n\">\r\n      <h1>T\u1ed1i \u01b0u h\u00f3a Vi\u1ec7t Nam, <span class=\"accent\">MCDI m\u1edf ra t\u01b0\u01a1ng lai<\/span><\/h1>\r\n      <p class=\"sub\">H\u1ec7 th\u1ed1ng l\u1ecdc n\u01b0\u1edbc 100 t\u1ea5n\/ng\u00e0y \u00b7 L\u1eafp \u0111\u1eb7t th\u00ed \u0111i\u1ec3m t\u1ea1i L\u00e0o Cai \u00b7 H\u1ec7 th\u1ed1ng O2&amp;B mi\u1ec5n ph\u00ed<\/p>\r\n      <div class=\"pill\">\r\n        <span class=\"chip\">Bao g\u1ed3m h\u1ed9i th\u1ea3o v\u00e0 b\u1eefa t\u1ed1i<\/span>\r\n        <span class=\"chip\">Gi\u1edbi h\u1ea1n l\u1eddi m\u1eddi: 50 ng\u01b0\u1eddi<\/span>\r\n        <span class=\"chip\">Th\u1ee9 Hai, ng\u00e0y 3 th\u00e1ng 11 n\u0103m 2025, 5:00 chi\u1ec1u - 8:00 t\u1ed1i<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"countdown\" role=\"timer\" aria-live=\"polite\">\r\n        <div class=\"box\">\r\n          <div class=\"num\" id=\"dd\">0<\/div>\r\n          <div class=\"lab\">Ng\u00e0y<\/div>\r\n        <\/div>\r\n        <div class=\"box\">\r\n          <div class=\"num\" id=\"hh\">00<\/div>\r\n          <div class=\"lab\">gi\u1edd<\/div>\r\n        <\/div>\r\n        <div class=\"box\">\r\n          <div class=\"num\" id=\"mm\">00<\/div>\r\n          <div class=\"lab\">ph\u00fat<\/div>\r\n        <\/div>\r\n        <div class=\"box\">\r\n          <div class=\"num\" id=\"ss\">00<\/div>\r\n          <div class=\"lab\">n\u1ebfn<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"meta\">\r\n        <div class=\"card\">\r\n          <div class=\"icon\">\u23f1\ufe0f<\/div>\r\n          <div>\r\n            <div class=\"title\">L\u1ecbch tr\u00ecnh s\u1ef1 ki\u1ec7n<\/div>\r\n            <div class=\"muted\">Th\u1ee9 Hai, ng\u00e0y 3 th\u00e1ng 11 n\u0103m 2025, 5:00 chi\u1ec1u - 8:00 t\u1ed1i (KST)<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"card\">\r\n          <div class=\"icon\">\ud83d\udc65<\/div>\r\n          <div style=\"flex:1\">\r\n            <div class=\"title\">T\u00ecnh tr\u1ea1ng tham gia<\/div>\r\n            <div class=\"muted\"><span id=\"countText\">0<\/span> \/ <span id=\"capText\">50<\/span>s\u1ed1 l\u01b0\u1ee3ng ng\u01b0\u1eddi<\/div>\r\n            <div class=\"progress\" aria-label=\"Ti\u1ebfn \u0111\u1ed9 \u1ee9ng d\u1ee5ng\">\r\n              <div class=\"bar\" id=\"progressBar\" style=\"width:0%\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"actions\">\r\n        <button class=\"btn btn-primary\" id=\"btnOpenForm\" aria-haspopup=\"dialog\">\ud83c\udf9f\ufe0f \u0110\u0103ng k\u00fd<\/button>\r\n        <a class=\"btn btn-ghost\" href=\"#video\">\u25b6\ufe0f Video Thi\u1ebft b\u1ecb\/C\u00f4ng ngh\u1ec7<\/a>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"video\" aria-label=\"Video Thi\u1ebft b\u1ecb v\u00e0 C\u00f4ng ngh\u1ec7\">\r\n      <div class=\"section-title\">Thi\u1ebft b\u1ecb v\u00e0 c\u00f4ng ngh\u1ec7 trong video<\/div>\r\n      <div class=\"vid\">\r\n        <!-- \uc6d0\ud558\ub294 \uc7a5\ube44\/\uae30\uc220 \uc601\uc0c1\uc73c\ub85c \uad50\uccb4 \uac00\ub2a5 -->\r\n        <iframe width=\"100%\" height=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/_dW9Efz0U-w?rel=0&modestbranding=1&playsinline=1&color=white\"\r\n          title=\"C\u00f4ng ngh\u1ec7 x\u1eed l\u00fd n\u01b0\u1edbc\" frameborder=\"0\"\r\n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n          allowfullscreen><\/iframe>\r\n      <\/div>\r\n      <p class=\"helper\" style=\"margin-top:8px\">Video ch\u1ec9 mang t\u00ednh ch\u1ea5t tham kh\u1ea3o. Bu\u1ed5i tr\u00ecnh di\u1ec5n th\u1ef1c t\u1ebf s\u1ebd di\u1ec5n ra t\u1ea1i ch\u1ed7.<\/p>\r\n    <\/section>\r\n\r\n    <section aria-label=\"\u1ea2nh tr\u01b0\u1ee3t\">\r\n      <div class=\"section-title\">Xem tr\u01b0\u1edbc \u1ea3nh h\u1ec7 th\u1ed1ng<\/div>\r\n      <div class=\"gallery\" id=\"gallery\">\r\n        <figure class=\"slide\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509391366360-2e959784a276?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc815\uc218 \uc2dc\uc2a4\ud15c \ubaa8\ub4c8\" loading=\"lazy\">\r\n          <figcaption class=\"cap\">H\u1ec7 th\u1ed1ng l\u1ecdc n\u01b0\u1edbc m\u00f4-\u0111un<\/figcaption>\r\n        <\/figure>\r\n        <figure class=\"slide\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1502304877804-088d480482c7?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc218\ucc98\ub9ac \uacf5\uc815 \ud30c\uc774\ud504\ub77c\uc778\" loading=\"lazy\">\r\n          <figcaption class=\"cap\">Thi\u1ebft k\u1ebf \u0111\u01b0\u1eddng \u1ed1ng hi\u1ec7u su\u1ea5t cao<\/figcaption>\r\n        <\/figure>\r\n        <figure class=\"slide\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551292831-023188e78222?q=80&w=1600&auto=format&fit=crop\" alt=\"\ud488\uc9c8 \uad00\ub9ac \ubc0f \ubaa8\ub2c8\ud130\ub9c1\" loading=\"lazy\">\r\n          <figcaption class=\"cap\">Gi\u00e1m s\u00e1t ch\u1ea5t l\u01b0\u1ee3ng th\u1eddi gian th\u1ef1c<\/figcaption>\r\n        <\/figure>\r\n        <figure class=\"slide\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581093458791-9d42e3b7a3f2?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc5d0\ub108\uc9c0 \ucd5c\uc801\ud654 \uc7a5\ube44\" loading=\"lazy\">\r\n          <figcaption class=\"cap\">C\u01a1 s\u1edf t\u1ed1i \u01b0u h\u00f3a n\u0103ng l\u01b0\u1ee3ng<\/figcaption>\r\n        <\/figure>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section aria-label=\"Th\u00f4ng tin s\u1ef1 ki\u1ec7n\">\r\n      <div class=\"section-title\">T\u1ed5ng quan s\u1ef1 ki\u1ec7n<\/div>\r\n      <div class=\"grid-2\">\r\n        <div class=\"info-card\">\r\n          <div class=\"hd\">\ud83d\udccd V\u1ecb tr\u00ed<\/div>\r\n          <div class=\"muted\">\u0110\u1ecba \u0111i\u1ec3m l\u1eafp \u0111\u1eb7t th\u00ed \u0111i\u1ec3m t\u1ea1i L\u00e0o Cai, Vi\u1ec7t Nam<\/div>\r\n        <\/div>\r\n        <div class=\"info-card\">\r\n          <div class=\"hd\">\ud83d\uddd3\ufe0f L\u1ecbch tr\u00ecnh<\/div>\r\n          <div class=\"muted\">Th\u1ee9 Hai, ng\u00e0y 3 th\u00e1ng 11 n\u0103m 2025, 5:00 chi\u1ec1u - 8:00 t\u1ed1i<\/div>\r\n        <\/div>\r\n        <div class=\"info-card\">\r\n          <div class=\"hd\">\ud83c\udfa4 Ch\u01b0\u01a1ng tr\u00ecnh<\/div>\r\n          <div class=\"muted\">H\u1ed9i th\u1ea3o, tr\u00ecnh di\u1ec5n t\u1ea1i ch\u1ed7 v\u00e0 ti\u1ec7c t\u1ed1i giao l\u01b0u<\/div>\r\n        <\/div>\r\n        <div class=\"info-card\">\r\n          <div class=\"hd\">\ud83c\udf81 \u0110\u00e3 cung c\u1ea5p<\/div>\r\n          <div class=\"muted\">Tr\u00ecnh di\u1ec5n h\u1ec7 th\u1ed1ng mi\u1ec5n ph\u00ed O2&amp;B v\u00e0 thu th\u1eadp d\u1eef li\u1ec7u<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n  <\/div>\r\n\r\n  <!-- Floating Dock CTA -->\r\n  <div class=\"dock\" role=\"region\" aria-label=\"Khu v\u1ef1c m\u1eddi c\u1ed1 \u0111\u1ecbnh \u1edf ph\u00eda d\u01b0\u1edbi\">\r\n    <div class=\"panel\">\r\n      <div class=\"mini\">\r\n        <div class=\"when\">2025.11.03 17:00 (KST)<\/div>\r\n        <div class=\"remain\"><strong id=\"dockRemain\">c\u00f2n l\u1ea1i 50<\/strong> \u00b7 <span id=\"dockCount\">0\/50<\/span><\/div>\r\n      <\/div>\r\n      <button class=\"btn btn-primary\" id=\"btnOpenForm2\">\u0110\u0103ng k\u00fd tham gia<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Registration Sheet -->\r\n  <div class=\"sheet\" id=\"sheet\">\r\n    <div class=\"body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"regTitle\">\r\n      <div class=\"dragbar\"><\/div>\r\n      <h2 id=\"regTitle\" style=\"margin:4px 0 6px; font-size:var(--fz-4)\">\u0110\u0103ng k\u00fd tham d\u1ef1 s\u1ef1 ki\u1ec7n<\/h2>\r\n      <p class=\"helper\">Gi\u1edbi h\u1ea1n l\u1eddi m\u1eddi: 50 ng\u01b0\u1eddi \u00b7 Ng\u0103n ch\u1eb7n vi\u1ec7c \u0111\u0103ng k\u00fd tr\u00f9ng l\u1eb7p d\u1ef1a tr\u00ean th\u00f4ng tin li\u00ean h\u1ec7.<\/p>\r\n      <form id=\"regForm\" autocomplete=\"on\" novalidate action=\"\">\r\n        <div class=\"row\">\r\n          <label for=\"org\">T\u00ean c\u00f4ng ty\/t\u1ed5 ch\u1ee9c<\/label>\r\n          <input id=\"org\" name=\"org\" type=\"text\" inputmode=\"text\" placeholder=\"V\u00ed d\u1ee5) O2&amp;B\" required>\r\n        <\/div>\r\n        <div class=\"row\">\r\n          <label for=\"title\">ti\u00eau \u0111\u1ec1<\/label>\r\n          <input id=\"title\" name=\"title\" type=\"text\" inputmode=\"text\" placeholder=\"V\u00ed d\u1ee5) Gi\u00e1m \u0111\u1ed1c ph\u00e1t tri\u1ec3n\" required>\r\n        <\/div>\r\n        <div class=\"row\">\r\n          <label for=\"name\">t\u00ean<\/label>\r\n          <input id=\"name\" name=\"name\" type=\"text\" inputmode=\"text\" placeholder=\"Hong Gil-dong\" required>\r\n        <\/div>\r\n        <div class=\"row\">\r\n          <label for=\"phone\">li\u00ean h\u1ec7<\/label>\r\n          <input id=\"phone\" name=\"phone\" type=\"tel\" inputmode=\"tel\" placeholder=\"010-1234-5678\" required>\r\n          <div class=\"helper\">B\u1ea1n c\u00f3 th\u1ec3 nh\u1eadp m\u00e0 kh\u00f4ng c\u1ea7n d\u1ea5u g\u1ea1ch n\u1ed1i (-).<\/div>\r\n        <\/div>\r\n        <div class=\"form-actions\">\r\n          <button type=\"button\" class=\"btn btn-line\" id=\"btnClose\">h\u1ee7y b\u1ecf<\/button>\r\n          <button type=\"submit\" class=\"btn btn-primary\" id=\"btnSubmit\">\u00c1p d\u1ee5ng<\/button>\r\n        <\/div>\r\n        <p class=\"helper\" style=\"margin-top:8px\">Sau khi g\u1eedi, th\u00f4ng tin s\u1ebd \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef an to\u00e0n trong tr\u00ecnh duy\u1ec7t v\u00e0 c\u00f3 th\u1ec3 chuy\u1ec3n sang l\u01b0u tr\u1eef tr\u00ean m\u00e1y ch\u1ee7 theo y\u00eau c\u1ea7u c\u1ee7a qu\u1ea3n tr\u1ecb vi\u00ean.<\/p>\r\n      <input type=\"hidden\" name=\"trp-form-language\" value=\"vi\"\/><\/form>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Toast -->\r\n  <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">\u0110\u01a1n \u0111\u0103ng k\u00fd c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c nh\u1eadn. Ch\u00fang t\u00f4i s\u1ebd s\u1edbm g\u1eedi tin nh\u1eafn x\u00e1c nh\u1eadn.<\/div>\r\n\r\n  <script>\r\n    \/\/ ====== \uc124\uc815 ======\r\n    const MAX_CAPACITY = 50;\r\n    const EVENT_ISO = '2025-11-03T17:00:00+09:00'; \/\/ KST \uae30\uc900\r\n    const LS_KEY = 'mcdi_event_registrations_v1';\r\n\r\n    \/\/ ====== \uc720\ud2f8 ======\r\n    const $ = (q)=>document.querySelector(q);\r\n    const $$ = (q)=>document.querySelectorAll(q);\r\n    const toast = (msg, ms=2200)=>{\r\n      const t = $('#toast');\r\n      t.textContent = msg; t.classList.add('show');\r\n      clearTimeout(t._t); t._t = setTimeout(()=>t.classList.remove('show'), ms);\r\n    };\r\n    const sanitizePhone = (v)=> (v||'').replace(\/[^\\d]\/g, '');\r\n    const formatCount = (n)=>`${n}\/${MAX_CAPACITY}`;\r\n\r\n    \/\/ ====== \ub85c\uceec \uc800\uc7a5\uc18c(\uae30\ubcf8) ======\r\n    function loadRegs(){\r\n      try{\r\n        const raw = localStorage.getItem(LS_KEY);\r\n        const arr = raw ? JSON.parse(raw) : [];\r\n        return Array.isArray(arr) ? arr : [];\r\n      }catch(e){ return []; }\r\n    }\r\n    function saveRegs(arr){\r\n      localStorage.setItem(LS_KEY, JSON.stringify(arr));\r\n    }\r\n    function existsByPhone(phone){\r\n      const p = sanitizePhone(phone);\r\n      return loadRegs().some(x=> x.phone === p);\r\n    }\r\n    function getRegistrationCount(){\r\n      return loadRegs().length;\r\n    }\r\n    function saveRegistration(data){\r\n      \/\/ \uc11c\ubc84 \uc5f0\ub3d9\uc774 \ud544\uc694\ud558\uba74 \uc774 \ud568\uc218\ub97c fetch POST\ub85c \uad50\uccb4\ud558\uc138\uc694.\r\n      const regs = loadRegs();\r\n      regs.push(data);\r\n      saveRegs(regs);\r\n      return true;\r\n    }\r\n\r\n    \/\/ ====== UI \uac31\uc2e0 ======\r\n    function updateCounts(){\r\n      const n = getRegistrationCount();\r\n      const remain = Math.max(0, MAX_CAPACITY - n);\r\n      const pct = Math.max(0, Math.min(100, Math.round((n \/ MAX_CAPACITY) * 100)));\r\n      $('#countText').textContent = n;\r\n      $('#capText').textContent = MAX_CAPACITY;\r\n      $('#dockCount').textContent = formatCount(n);\r\n      $('#dockRemain').textContent = `\uc794\uc5ec ${remain}`;\r\n      $('#progressBar').style.width = pct + '%';\r\n\r\n      const buttons = [$('#btnOpenForm'), $('#btnOpenForm2'), $('#btnSubmit')].filter(Boolean);\r\n      if(n >= MAX_CAPACITY){\r\n        buttons.forEach(b=>{\r\n          b.disabled = true;\r\n          if(b.id === 'btnSubmit') b.textContent = '\ub9c8\uac10';\r\n          else b.textContent = '\uc811\uc218 \ub9c8\uac10';\r\n          b.style.opacity = .7;\r\n        });\r\n      }else{\r\n        buttons.forEach(b=>{\r\n          b.disabled = false;\r\n          if(b.id === 'btnSubmit') b.textContent = '\uc811\uc218\ud558\uae30';\r\n          else b.textContent = '\ucc38\uac00\ub4f1\ub85d';\r\n          b.style.opacity = 1;\r\n        });\r\n      }\r\n    }\r\n\r\n    \/\/ ====== \uce74\uc6b4\ud2b8\ub2e4\uc6b4 ======\r\n    function startCountdown(){\r\n      const target = new Date(EVENT_ISO).getTime();\r\n      const dd = $('#dd'), hh = $('#hh'), mm = $('#mm'), ss = $('#ss');\r\n      function tick(){\r\n        const now = Date.now();\r\n        let diff = Math.max(0, target - now);\r\n        const d = Math.floor(diff \/ (1000*60*60*24)); diff -= d*(1000*60*60*24);\r\n        const h = Math.floor(diff \/ (1000*60*60)); diff -= h*(1000*60*60);\r\n        const m = Math.floor(diff \/ (1000*60)); diff -= m*(1000*60);\r\n        const s = Math.floor(diff \/ 1000);\r\n        dd.textContent = d;\r\n        hh.textContent = String(h).padStart(2,'0');\r\n        mm.textContent = String(m).padStart(2,'0');\r\n        ss.textContent = String(s).padStart(2,'0');\r\n      }\r\n      tick();\r\n      setInterval(tick, 1000);\r\n    }\r\n\r\n    \/\/ ====== \ud3fc \ucc98\ub9ac ======\r\n    function openSheet(){ $('#sheet').classList.add('active'); setTimeout(()=>$('#org').focus(), 150); }\r\n    function closeSheet(){ $('#sheet').classList.remove('active'); }\r\n\r\n    function validateForm(form){\r\n      const org = form.org.value.trim();\r\n      const title = form.title.value.trim();\r\n      const name = form.name.value.trim();\r\n      const phone = sanitizePhone(form.phone.value);\r\n      if(!org || !title || !name || !phone){\r\n        toast('\ud544\uc218 \ud56d\ubaa9\uc744 \ubaa8\ub450 \uc785\ub825\ud574\uc8fc\uc138\uc694.'); return null;\r\n      }\r\n      if(phone.length < 8){\r\n        toast('\uc5f0\ub77d\ucc98 \ud615\uc2dd\uc774 \uc62c\ubc14\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.'); return null;\r\n      }\r\n      return { org, title, name, phone };\r\n    }\r\n\r\n    function attachForm(){\r\n      $('#btnOpenForm')?.addEventListener('click', openSheet);\r\n      $('#btnOpenForm2')?.addEventListener('click', openSheet);\r\n      $('#btnClose')?.addEventListener('click', closeSheet);\r\n\r\n      $('#regForm')?.addEventListener('submit', (e)=>{\r\n        e.preventDefault();\r\n        if(getRegistrationCount() >= MAX_CAPACITY){\r\n          toast('\uc811\uc218\uac00 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.'); updateCounts(); return;\r\n        }\r\n        const data = validateForm(e.target);\r\n        if(!data) return;\r\n        if(existsByPhone(data.phone)){\r\n          toast('\uc774\ubbf8 \ub4f1\ub85d\ub41c \uc5f0\ub77d\ucc98\uc785\ub2c8\ub2e4.'); return;\r\n        }\r\n        \/\/ \uc800\uc7a5\r\n        const payload = {\r\n          ...data,\r\n          ts: new Date().toISOString()\r\n        };\r\n        const ok = saveRegistration(payload);\r\n        if(ok){\r\n          updateCounts();\r\n          toast('\uc811\uc218 \uc644\ub8cc! \ucc38\uc11d\uc744 \ud658\uc601\ud569\ub2c8\ub2e4.');\r\n          e.target.reset();\r\n          closeSheet();\r\n        }else{\r\n          toast('\uc800\uc7a5 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4. \uc7a0\uc2dc \ud6c4 \ub2e4\uc2dc \uc2dc\ub3c4\ud574\uc8fc\uc138\uc694.');\r\n        }\r\n      });\r\n    }\r\n\r\n    \/\/ ====== \uce98\ub9b0\ub354 \ucd94\uac00 (ICS) ======\r\n    function addCalendar(){\r\n      const start = new Date(EVENT_ISO);\r\n      const end = new Date(start.getTime() + 3*60*60*1000); \/\/ 3\uc2dc\uac04 \ud589\uc0ac\r\n      const toICS = (d)=> d.toISOString().replace(\/[-:]\/g,'').replace(\/\\.\\d{3}Z$\/,'Z');\r\n      const ics =\r\n`BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-\/\/MCDI\/\/Invitation\/\/KR\r\nCALSCALE:GREGORIAN\r\nMETHOD:PUBLISH\r\nBEGIN:VEVENT\r\nUID:${crypto.randomUUID ? crypto.randomUUID() : ('mcdi-'+Date.now())}\r\nDTSTAMP:${toICS(new Date())}\r\nDTSTART:${toICS(start)}\r\nDTEND:${toICS(end)}\r\nSUMMARY:\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \u2014 \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58\r\nDESCRIPTION:1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \u00b7 \uc138\ubbf8\ub098 & \ub9cc\ucc2c \ud3ec\ud568\r\nLOCATION:\ub77c\uc624\uae4c\uc774(\ubca0\ud2b8\ub0a8) \uc2dc\ubc94 \uc124\uce58 \ud604\uc7a5\r\nEND:VEVENT\r\nEND:VCALENDAR`;\r\n      const blob = new Blob([ics], {type:'text\/calendar'});\r\n      const url = URL.createObjectURL(blob);\r\n      const a = document.createElement('a');\r\n      a.href = url; a.download = 'MCDI_invite_2025-11-03.ics'; a.click();\r\n      setTimeout(()=>URL.revokeObjectURL(url), 2000);\r\n    }\r\n\r\n    \/\/ ====== \uac24\ub7ec\ub9ac \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc(\ubd80\ub4dc\ub7ec\uc6b4 \uc790\ub3d9 \uc2a4\ud06c\ub864) ======\r\n    function autoScrollGallery(){\r\n      const g = $('#gallery'); if(!g) return;\r\n      let idx = 0;\r\n      const slides = g.querySelectorAll('.slide');\r\n      if(slides.length <= 1) return;\r\n      function go(){\r\n        idx = (idx + 1) % slides.length;\r\n        const target = slides[idx];\r\n        target.scrollIntoView({behavior:'smooth', inline:'start'});\r\n      }\r\n      let t = setInterval(go, 3600);\r\n      \/\/ \uc0ac\uc6a9\uc790\uac00 \uc2a4\ud06c\ub864\ud558\uba74 \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc \uc7a0\uc2dc \uc911\uc9c0\r\n      let isUser = false, userTimer;\r\n      g.addEventListener('scroll', ()=>{\r\n        isUser = true; clearTimeout(userTimer); clearInterval(t);\r\n        userTimer = setTimeout(()=>{ isUser=false; t = setInterval(go, 3600); }, 4000);\r\n      }, {passive:true});\r\n    }\r\n\r\n    \/\/ ====== \ucd08\uae30\ud654 ======\r\n    function init(){\r\n      updateCounts();\r\n      startCountdown();\r\n      attachForm();\r\n      autoScrollGallery();\r\n      $('#btnAddCalendar')?.addEventListener('click', addCalendar);\r\n\r\n      \/\/ \uc811\uadfc\uc131: \uc2dc\ud2b8 \ubc14\uae65 \ud074\ub9ad \ub2eb\uae30\r\n      $('#sheet')?.addEventListener('click', (e)=>{ if(e.target.id === 'sheet') closeSheet(); });\r\n    }\r\n    document.addEventListener('DOMContentLoaded', init);\r\n\r\n    \/\/ ====== \uc11c\ubc84 \uc5f0\ub3d9 \ud301 ======\r\n    \/\/ 1) saveRegistration()\ub97c fetch('\/api\/register', { method: 'POST', body: JSON.stringify(payload) })\ub85c \uad50\uccb4\r\n    \/\/ 2) getRegistrationCount()\ub97c \uc11c\ubc84\uc758 \ucd1d\ud569 \uce74\uc6b4\ud2b8\ub97c \ubc18\ud658\ud558\ub294 fetch('\/api\/count')\ub85c \uad50\uccb4\r\n    \/\/ 3) \uad50\uccb4 \uc2dc \ub85c\uceec \uc800\uc7a5 loadRegs\/saveRegs\ub294 \uc81c\uac70 \uac00\ub2a5\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n``` N\u1ebfu b\u1ea1n mu\u1ed1n: - T\u00f4i c\u0169ng c\u00f3 th\u1ec3 s\u1eeda \u0111\u1ed5i n\u00f3 th\u00e0nh phi\u00ean b\u1ea3n t\u00edch h\u1ee3p API l\u01b0u tr\u1eef m\u00e1y ch\u1ee7 th\u1ef1c t\u1ebf (Firebase\/Supabase\/Google Apps Script). - T\u00f4i c\u0169ng c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi m\u00e0u logo\/th\u01b0\u01a1ng hi\u1ec7u s\u1ef1 ki\u1ec7n, thay th\u1ebf video\/h\u00ecnh \u1ea3nh v\u00e0 th\u00eam ph\u1ea7n th\u00f4ng tin chi ti\u1ebft v\u1ec1 ch\u01b0\u01a1ng tr\u00ecnh.\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>\uc544\ub798\ub294 \ubc14\ub85c \ubc30\ud3ec \uac00\ub2a5\ud55c \ub2e8\uc77c HTML \ud30c\uc77c\uc785\ub2c8\ub2e4. \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \uace0\uae09 \ub514\uc790\uc778, \uc720\ud29c\ube0c \uc601\uc0c1, \uc0ac\uc9c4 \uc2ac\ub77c\uc774\ub4dc, \uc811\uc218 \uce74\uc6b4\ud2b8(50\uba85), \ud0c0\uc774\uba38(2025-11-03 17:00 \uae30\uc900), \ub85c\uceec \uc800\uc7a5(localStorage) \uae30\ubc18\uc758 \ucc38\uac00 \ub4f1\ub85d \uc800\uc7a5\uacfc \uc911\ubcf5 \ubc29\uc9c0, \uc811\uc218 \ub9c8\uac10 \ucc98\ub9ac\uae4c\uc9c0 \ud3ec\ud568\ud588\uc2b5\ub2c8\ub2e4. \ud544\uc694 \uc2dc \uc8fc\uc11d\uc5d0 \ub530\ub77c \uc2e4\uc81c \uc11c\ubc84 \uc800\uc7a5 API\ub85c \uad50\uccb4\ub3c4 \uc27d\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucc38\uace0: &#8211; \ub370\uc774\ud130 \uc800\uc7a5: \uae30\ubcf8\uc740 localStorage\ub85c \ub3d9\uc791(\ube0c\ub77c\uc6b0\uc800\uc5d0 \uc548\uc804\ud558\uac8c \uc800\uc7a5). \uc11c\ubc84 [&hellip;]<\/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-3640","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.site\/vi\/wp-json\/wp\/v2\/pages\/3640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.site\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.site\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.site\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.site\/vi\/wp-json\/wp\/v2\/comments?post=3640"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.site\/vi\/wp-json\/wp\/v2\/pages\/3640\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.site\/vi\/wp-json\/wp\/v2\/media?parent=3640"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.site\/vi\/wp-json\/wp\/v2\/wf_page_folders?post=3640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}