M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/title>\n <style>\n :root{\n --bg:#f6fbff;\n --card:#ffffff;\n --ink:#16324f;\n --soft:#6b7a90;\n --primary:#2b7fff;\n --good:#13a36e;\n --warn:#ef8b17;\n --bad:#e34b4b;\n --accent:#8e5cff;\n --pink:#ff5fa2;\n --border:#dbe7f3;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family: Arial, Helvetica, sans-serif;\n background:linear-gradient(180deg,#eef7ff 0%, #f9fcff 100%);\n color:var(--ink);\n }\n .wrap{\n max-width:1280px;\n margin:0 auto;\n padding:20px;\n }\n .hero{\n background:linear-gradient(135deg,#2b7fff 0%, #7d57ff 100%);\n color:#fff;\n border-radius:24px;\n padding:24px;\n box-shadow:0 14px 36px rgba(43,127,255,.18);\n }\n .hero h1{\n margin:0 0 8px 0;\n font-size:clamp(28px,4vw,42px);\n }\n .hero p{\n margin:6px 0;\n line-height:1.6;\n opacity:.98;\n }\n .pill-row{\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n margin-top:14px;\n }\n .pill{\n background:rgba(255,255,255,.16);\n border:1px solid rgba(255,255,255,.25);\n padding:8px 12px;\n border-radius:999px;\n font-size:14px;\n }\n\n .grid{\n display:grid;\n grid-template-columns: 1.3fr .95fr;\n gap:18px;\n margin-top:18px;\n }\n .card{\n background:var(--card);\n border:1px solid var(--border);\n border-radius:20px;\n padding:18px;\n box-shadow:0 8px 26px rgba(15,58,99,.06);\n }\n .card h2, .card h3{\n margin-top:0;\n }\n canvas{\n width:100%;\n max-width:100%;\n border:1px solid var(--border);\n border-radius:16px;\n background:#fff;\n display:block;\n }\n\n .stepbar{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:10px;\n margin-top:14px;\n }\n .step{\n padding:10px 12px;\n border-radius:14px;\n border:1px solid var(--border);\n background:#f8fbff;\n text-align:center;\n font-size:14px;\n color:var(--soft);\n }\n .step.active{\n background:#e9f2ff;\n color:var(--primary);\n border-color:#bcd7ff;\n font-weight:700;\n }\n .step.done{\n background:#eafaf4;\n color:var(--good);\n border-color:#bfead6;\n font-weight:700;\n }\n\n .controls{\n display:grid;\n gap:14px;\n }\n .control{\n padding:14px;\n border:1px solid var(--border);\n border-radius:16px;\n background:#fbfdff;\n }\n .control label{\n display:flex;\n justify-content:space-between;\n gap:10px;\n font-weight:700;\n margin-bottom:8px;\n }\n .control small{\n color:var(--soft);\n display:block;\n line-height:1.5;\n margin-top:6px;\n }\n input[type=\"range\"]{\n width:100%;\n }\n\n .btn-row{\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n margin-top:10px;\n }\n button{\n border:none;\n border-radius:14px;\n padding:11px 16px;\n font-weight:700;\n cursor:pointer;\n transition:.2s ease;\n }\n button:hover{ transform:translateY(-1px); }\n .btn-primary{ background:var(--primary); color:#fff; }\n .btn-soft{ background:#eef5ff; color:var(--primary); }\n .btn-accent{ background:var(--accent); color:#fff; }\n .btn-reset{ background:#f4f4f4; color:#444; }\n\n .stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:12px;\n margin-top:14px;\n }\n .stat{\n border-radius:18px;\n padding:14px;\n color:#fff;\n min-height:92px;\n }\n .s1{ background:linear-gradient(135deg,#2b7fff,#5ea6ff); }\n .s2{ background:linear-gradient(135deg,#13a36e,#38c18b); }\n .s3{ background:linear-gradient(135deg,#8e5cff,#b38bff); }\n .s4{ background:linear-gradient(135deg,#ff8f1f,#ffb24d); }\n .stat .k{\n font-size:13px;\n opacity:.92;\n }\n .stat .v{\n font-size:28px;\n font-weight:800;\n margin-top:6px;\n }\n\n .note{\n border-left:4px solid var(--primary);\n background:#f4f9ff;\n padding:12px 14px;\n border-radius:12px;\n line-height:1.6;\n color:#27435f;\n }\n .obs{\n margin:0;\n padding-left:20px;\n line-height:1.7;\n }\n .legend{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:10px;\n margin-top:12px;\n }\n .legend div{\n border:1px dashed var(--border);\n border-radius:12px;\n padding:10px;\n font-size:14px;\n background:#fcfeff;\n }\n\n #feedback { display:none; margin-top:12px; }\n #feedback input, #feedback textarea{\n width:100%;\n padding:10px 12px;\n border-radius:12px;\n border:1px solid var(--border);\n margin:8px 0;\n font-family:inherit;\n }\n #feedback textarea{ min-height:90px; resize:vertical; }\n\n .footer-tip{\n margin-top:14px;\n color:var(--soft);\n font-size:14px;\n line-height:1.6;\n }\n\n @media (max-width: 960px){\n .grid{ grid-template-columns:1fr; }\n .stats{ grid-template-columns:repeat(2,1fr); }\n .stepbar{ grid-template-columns:repeat(2,1fr); }\n .legend{ grid-template-columns:1fr; }\n }\n @media (max-width: 560px){\n .stats{ grid-template-columns:1fr; }\n .stepbar{ grid-template-columns:1fr; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <section class=\"hero\">\n <h1>T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/h1>\n <p><strong>M\u1ee5c ti\u00eau:<\/strong> Thi\u1ebft k\u1ebf b\u1ed9 kit t\u00e1ch chi\u1ebft DNA v\u00e0 d\u00f9ng n\u00f3 \u0111\u1ec3 tinh s\u1ea1ch DNA t\u1eeb d\u00e2u t\u00e2y.<\/p>\n <p><strong>C\u00e2u h\u1ecfi l\u1edbn:<\/strong> L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 \u0111\u01b0a DNA ra kh\u1ecfi t\u1ebf b\u00e0o? Vai tr\u00f2 c\u1ee7a <strong>ch\u1ea5t t\u1ea9y r\u1eeda<\/strong>, <strong>mu\u1ed1i<\/strong> v\u00e0 <strong>c\u1ed3n l\u1ea1nh<\/strong> l\u00e0 g\u00ec?<\/p>\n <div class=\"pill-row\">\n <div class=\"pill\">Sinh h\u1ecdc ph\u00e2n t\u1eed c\u01a1 b\u1ea3n<\/div>\n <div class=\"pill\">STEM l\u1edbp 6<\/div>\n <div class=\"pill\">M\u00f4 ph\u1ecfng \u0111\u1ecbnh t\u00ednh<\/div>\n <div class=\"pill\">C\u00f3 ph\u1ea3n h\u1ed3i s\u01b0 ph\u1ea1m<\/div>\n <\/div>\n <\/section>\n\n <div class=\"grid\">\n <section class=\"card\">\n <h2>B\u00e0n th\u00ed nghi\u1ec7m \u1ea3o<\/h2>\n <p class=\"note\">\n H\u00e3y \u0111i\u1ec1u ch\u1ec9nh th\u00f4ng s\u1ed1, r\u1ed3i th\u1ef1c hi\u1ec7n \u0111\u00fang tr\u00ecnh t\u1ef1:\n <strong>Nghi\u1ec1n d\u00e2u \u2192 Th\u00eam dung d\u1ecbch ly gi\u1ea3i \u2192 L\u1ecdc \u2192 R\u00f3t c\u1ed3n l\u1ea1nh<\/strong>.\n N\u1ebfu l\u00e0m sai ho\u1eb7c t\u1ed1i \u01b0u k\u00e9m, l\u01b0\u1ee3ng DNA thu \u0111\u01b0\u1ee3c s\u1ebd \u00edt ho\u1eb7c kh\u00f3 quan s\u00e1t.\n <\/p>\n\n <canvas id=\"experimentCanvas\" width=\"920\" height=\"430\"><\/canvas>\n\n <div class=\"stepbar\">\n <div id=\"step1\" class=\"step active\">1. Chu\u1ea9n b\u1ecb m\u1eabu<\/div>\n <div id=\"step2\" class=\"step\">2. Ly gi\u1ea3i t\u1ebf b\u00e0o<\/div>\n <div id=\"step3\" class=\"step\">3. L\u1ecdc d\u1ecbch<\/div>\n <div id=\"step4\" class=\"step\">4. K\u1ebft t\u1ee7a DNA<\/div>\n <div id=\"step5\" class=\"step\">5. Quan s\u00e1t<\/div>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn-primary\" onclick=\"doMash()\">B1 – Nghi\u1ec1n d\u00e2u<\/button>\n <button class=\"btn-soft\" onclick=\"doLysis()\">B2 – Th\u00eam dung d\u1ecbch ly gi\u1ea3i<\/button>\n <button class=\"btn-soft\" onclick=\"doFilter()\">B3 – L\u1ecdc qua v\u1ea3i<\/button>\n <button class=\"btn-accent\" onclick=\"doAlcohol()\">B4 – R\u00f3t c\u1ed3n l\u1ea1nh<\/button>\n <button class=\"btn-reset\" onclick=\"resetAll()\">L\u00e0m l\u1ea1i<\/button>\n <\/div>\n\n <div class=\"stats\">\n <div class=\"stat s1\">\n <div class=\"k\">M\u1ee9c ph\u00e1 v\u1ee1 t\u1ebf b\u00e0o<\/div>\n <div class=\"v\" id=\"lysisValue\">0%<\/div>\n <\/div>\n <div class=\"stat s2\">\n <div class=\"k\">\u0110\u1ed9 k\u1ebft t\u1ee5 DNA<\/div>\n <div class=\"v\" id=\"clumpValue\">0%<\/div>\n <\/div>\n <div class=\"stat s3\">\n <div class=\"k\">\u0110\u1ed9 tinh s\u1ea1ch<\/div>\n <div class=\"v\" id=\"purityValue\">0%<\/div>\n <\/div>\n <div class=\"stat s4\">\n <div class=\"k\">Kh\u1ea3 n\u0103ng nh\u00ecn th\u1ea5y DNA<\/div>\n <div class=\"v\" id=\"visibleValue\">0%<\/div>\n <\/div>\n <\/div>\n\n <div class=\"legend\">\n <div><strong>V\u00f9ng tr\u00e1i:<\/strong> t\u00fai d\u00e2u t\u00e2y v\u00e0 m\u1ee9c nghi\u1ec1n m\u1eabu<\/div>\n <div><strong>V\u00f9ng gi\u1eefa:<\/strong> l\u1ecdc d\u1ecbch qua v\u1ea3i\/l\u01b0\u1edbi<\/div>\n <div><strong>V\u00f9ng ph\u1ea3i:<\/strong> \u1ed1ng nghi\u1ec7m v\u1edbi l\u1edbp d\u1ecbch v\u00e0 l\u1edbp c\u1ed3n<\/div>\n <\/div>\n <\/section>\n\n <aside class=\"card\">\n <h2>B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n b\u1ed9 kit<\/h2>\n\n <div class=\"controls\">\n <div class=\"control\">\n <label>\n <span>M\u1ee9c nghi\u1ec1n m\u1eabu<\/span>\n <strong><span id=\"mashOut\">60<\/span>%<\/strong>\n <\/label>\n <input type=\"range\" id=\"mashLevel\" min=\"0\" max=\"100\" value=\"60\" \/>\n <small>Nghi\u1ec1n qu\u00e1 nh\u1eb9 \u2192 \u00edt t\u1ebf b\u00e0o b\u1ecb ph\u00e1 v\u1ee1. Nghi\u1ec1n v\u1eeba \u0111\u1ee7 \u2192 gi\u1ea3i ph\u00f3ng nhi\u1ec1u v\u1eadt ch\u1ea5t t\u1ebf b\u00e0o h\u01a1n.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>L\u01b0\u1ee3ng n\u01b0\u1edbc r\u1eeda ch\u00e9n<\/span>\n <strong><span id=\"soapOut\">15<\/span> ml<\/strong>\n <\/label>\n <input type=\"range\" id=\"soapLevel\" min=\"0\" max=\"30\" value=\"15\" \/>\n <small>Ch\u1ea5t t\u1ea9y r\u1eeda gi\u00fap ph\u00e1 v\u1ee1 m\u00e0ng t\u1ebf b\u00e0o v\u00e0 m\u00e0ng nh\u00e2n. Qu\u00e1 \u00edt th\u00ec ly gi\u1ea3i k\u00e9m, qu\u00e1 nhi\u1ec1u c\u00f3 th\u1ec3 l\u00e0m m\u1eabu \u0111\u1ee5c v\u00e0 kh\u00f3 tinh s\u1ea1ch.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>L\u01b0\u1ee3ng mu\u1ed1i<\/span>\n <strong><span id=\"saltOut\">0.5<\/span> th\u00eca c\u00e0 ph\u00ea<\/strong>\n <\/label>\n <input type=\"range\" id=\"saltLevel\" min=\"0\" max=\"10\" value=\"5\" \/>\n <small>Mu\u1ed1i h\u1ed7 tr\u1ee3 DNA k\u1ebft c\u1ee5m t\u1ed1t h\u01a1n. \u1ede m\u00f4 ph\u1ecfng n\u00e0y, m\u1ee9c t\u1ed1i \u01b0u g\u1ea7n kho\u1ea3ng 0,5 th\u00eca c\u00e0 ph\u00ea.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>Nhi\u1ec7t \u0111\u1ed9 c\u1ed3n isopropyl<\/span>\n <strong><span id=\"tempOut\">0<\/span>\u00b0C<\/strong>\n <\/label>\n <input type=\"range\" id=\"alcoholTemp\" min=\"-10\" max=\"25\" value=\"0\" \/>\n <small>C\u1ed3n c\u00e0ng l\u1ea1nh th\u00ec DNA c\u00e0ng d\u1ec5 k\u1ebft t\u1ee7a v\u00e0 hi\u1ec7n r\u00f5 th\u00e0nh c\u00e1c s\u1ee3i tr\u1eafng \u0111\u1ee5c.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>Ch\u1ea5t l\u01b0\u1ee3ng l\u1ecdc<\/span>\n <strong><span id=\"filterOut\">70<\/span>%<\/strong>\n <\/label>\n <input type=\"range\" id=\"filterQuality\" min=\"0\" max=\"100\" value=\"70\" \/>\n <small>L\u1ecdc t\u1ed1t gi\u00fap gi\u1ea3m b\u00e3 qu\u1ea3 v\u00e0 t\u1ea1p ch\u1ea5t, t\u0103ng \u0111\u1ed9 tinh s\u1ea1ch c\u1ee7a d\u1ecbch chi\u1ebft.<\/small>\n <\/div>\n <\/div>\n\n <h3>Quan s\u00e1t & ph\u1ea3n h\u1ed3i khoa h\u1ecdc<\/h3>\n <ul class=\"obs\" id=\"observationList\"><\/ul>\n\n <h3>Bi\u1ec3u \u0111\u1ed3 k\u1ebft qu\u1ea3<\/h3>\n <canvas id=\"resultGraph\" width=\"520\" height=\"260\"><\/canvas>\n\n <h3>Vai tr\u00f2 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n<\/h3>\n <ul class=\"obs\">\n <li><strong>Ch\u1ea5t t\u1ea9y r\u1eeda:<\/strong> l\u00e0m v\u1ee1 m\u00e0ng lipid c\u1ee7a t\u1ebf b\u00e0o v\u00e0 m\u00e0ng nh\u00e2n.<\/li>\n <li><strong>Mu\u1ed1i:<\/strong> h\u1ed7 tr\u1ee3 DNA b\u1edbt h\u00f2a tan v\u00e0 k\u1ebft c\u1ee5m d\u1ec5 h\u01a1n.<\/li>\n <li><strong>C\u1ed3n l\u1ea1nh:<\/strong> l\u00e0m DNA k\u1ebft t\u1ee7a \u0111\u1ec3 ta nh\u00ecn th\u1ea5y b\u1eb1ng m\u1eaft th\u01b0\u1eddng.<\/li>\n <\/ul>\n\n <div style=\"margin-top:16px\">\n <button class=\"btn-soft\" onclick=\"toggleFeedback()\">G\u1eedi ph\u1ea3n h\u1ed3i v\u1ec1 m\u00f4 ph\u1ecfng<\/button>\n <div id=\"feedback\">\n <input type=\"text\" placeholder=\"T\u00ean\" id=\"name\">\n <input type=\"email\" placeholder=\"Email\" id=\"email\">\n <textarea placeholder=\"G\u00f3p \u00fd c\u1ea3i ti\u1ebfn m\u00f4 ph\u1ecfng\" id=\"message\"><\/textarea>\n <button class=\"btn-primary\" onclick=\"sendFeedback()\">G\u1eedi<\/button>\n <\/div>\n <\/div>\n\n <p class=\"footer-tip\">\n L\u01b0u \u00fd s\u01b0 ph\u1ea1m: th\u1ee9 h\u1ecdc sinh th\u1ea5y \u1edf cu\u1ed1i th\u00ed nghi\u1ec7m l\u00e0 <strong>kh\u1ed1i DNA k\u1ebft t\u1ee5<\/strong>,\n kh\u00f4ng ph\u1ea3i nh\u00ecn th\u1ea5y tr\u1ef1c ti\u1ebfp c\u1ea5u tr\u00fac xo\u1eafn k\u00e9p \u1edf m\u1ee9c m\u1ed9t ph\u00e2n t\u1eed.\n <\/p>\n <\/aside>\n <\/div>\n <\/div>\n\n <script>\n const state = {\n mashed: false,\n lysed: false,\n filtered: false,\n alcoholAdded: false\n };\n\n const ids = [\"mashLevel\",\"soapLevel\",\"saltLevel\",\"alcoholTemp\",\"filterQuality\"];\n ids.forEach(id => document.getElementById(id).addEventListener(\"input\", updateAll));\n\n function clamp(v, min, max){ return Math.max(min, Math.min(max, v)); }\n function triScore(value, optimum, tolerance){\n return clamp(1 - Math.abs(value - optimum) \/ tolerance, 0, 1);\n }\n function pct(v){ return Math.round(v * 100); }\n\n function getParams(){\n const mash = Number(document.getElementById(\"mashLevel\").value) \/ 100;\n const soapMl = Number(document.getElementById(\"soapLevel\").value);\n const saltRaw = Number(document.getElementById(\"saltLevel\").value);\n const saltTsp = +(saltRaw \/ 10).toFixed(1);\n const temp = Number(document.getElementById(\"alcoholTemp\").value);\n const filter = Number(document.getElementById(\"filterQuality\").value) \/ 100;\n return { mash, soapMl, saltTsp, temp, filter };\n }\n\n function computeModel(){\n const p = getParams();\n\n const mashScore = p.mash;\n const soapScore = triScore(p.soapMl, 15, 15);\n const saltScore = triScore(p.saltTsp, 0.5, 0.5);\n const tempScore = p.temp <= 0 ? 1 : clamp(1 - (p.temp \/ 25), 0.15, 1);\n const filterScore = p.filter;\n\n let lysis = (0.55 * mashScore + 0.45 * soapScore);\n if(!state.mashed) lysis *= 0.18;\n if(!state.lysed) lysis *= 0.45;\n\n let clump = (0.6 * saltScore + 0.4 * tempScore);\n if(!state.alcoholAdded) clump *= 0.12;\n\n let purity = 0.2 + 0.8 * filterScore;\n if(!state.filtered) purity *= 0.42;\n\n const yieldScore = clamp(lysis * clump * purity, 0, 1);\n const visible = state.alcoholAdded ? clamp(yieldScore * 1.8, 0, 1) : 0;\n\n return {\n p, mashScore, soapScore, saltScore, tempScore, filterScore,\n lysis, clump, purity, yieldScore, visible\n };\n }\n\n function setOutputLabels(){\n const p = getParams();\n document.getElementById(\"mashOut\").textContent = Math.round(p.mash * 100);\n document.getElementById(\"soapOut\").textContent = p.soapMl;\n document.getElementById(\"saltOut\").textContent = p.saltTsp.toFixed(1);\n document.getElementById(\"tempOut\").textContent = p.temp;\n document.getElementById(\"filterOut\").textContent = Math.round(p.filter * 100);\n }\n\n function doMash(){\n state.mashed = true;\n updateAll();\n }\n\n function doLysis(){\n if(!state.mashed){\n alert(\"H\u00e3y nghi\u1ec1n d\u00e2u tr\u01b0\u1edbc \u0111\u1ec3 t\u0103ng hi\u1ec7u qu\u1ea3 ly gi\u1ea3i.\");\n return;\n }\n state.lysed = true;\n updateAll();\n }\n\n function doFilter(){\n if(!state.lysed){\n alert(\"H\u00e3y th\u00eam dung d\u1ecbch ly gi\u1ea3i tr\u01b0\u1edbc r\u1ed3i m\u1edbi l\u1ecdc.\");\n return;\n }\n state.filtered = true;\n updateAll();\n }\n\n function doAlcohol(){\n if(!state.filtered){\n alert(\"H\u00e3y l\u1ecdc d\u1ecbch tr\u01b0\u1edbc khi r\u00f3t c\u1ed3n l\u1ea1nh.\");\n return;\n }\n state.alcoholAdded = true;\n updateAll();\n }\n\n function resetAll(){\n state.mashed = false;\n state.lysed = false;\n state.filtered = false;\n state.alcoholAdded = false;\n document.getElementById(\"mashLevel\").value = 60;\n document.getElementById(\"soapLevel\").value = 15;\n document.getElementById(\"saltLevel\").value = 5;\n document.getElementById(\"alcoholTemp\").value = 0;\n document.getElementById(\"filterQuality\").value = 70;\n updateAll();\n }\n\n function updateSteps(){\n const s1 = document.getElementById(\"step1\");\n const s2 = document.getElementById(\"step2\");\n const s3 = document.getElementById(\"step3\");\n const s4 = document.getElementById(\"step4\");\n const s5 = document.getElementById(\"step5\");\n [s1,s2,s3,s4,s5].forEach(s=>s.className=\"step\");\n\n if(!state.mashed){\n s1.classList.add(\"active\");\n return;\n }\n s1.classList.add(\"done\");\n\n if(!state.lysed){\n s2.classList.add(\"active\");\n return;\n }\n s2.classList.add(\"done\");\n\n if(!state.filtered){\n s3.classList.add(\"active\");\n return;\n }\n s3.classList.add(\"done\");\n\n if(!state.alcoholAdded){\n s4.classList.add(\"active\");\n return;\n }\n s4.classList.add(\"done\");\n s5.classList.add(\"active\");\n }\n\n function updateStats(m){\n document.getElementById(\"lysisValue\").textContent = pct(m.lysis) + \"%\";\n document.getElementById(\"clumpValue\").textContent = pct(m.clump) + \"%\";\n document.getElementById(\"purityValue\").textContent = pct(m.purity) + \"%\";\n document.getElementById(\"visibleValue\").textContent = pct(m.visible) + \"%\";\n }\n\n function updateObservation(m){\n const obs = [];\n\n if(!state.mashed){\n obs.push(\"B\u1eaft \u0111\u1ea7u b\u1eb1ng c\u00e1ch nghi\u1ec1n d\u00e2u \u0111\u1ec3 ph\u00e1 v\u1ee1 m\u00f4 qu\u1ea3 v\u00e0 gi\u1ea3i ph\u00f3ng nhi\u1ec1u t\u1ebf b\u00e0o h\u01a1n.\");\n } else {\n obs.push(\"M\u1eabu d\u00e2u \u0111\u00e3 \u0111\u01b0\u1ee3c nghi\u1ec1n, di\u1ec7n t\u00edch ti\u1ebfp x\u00fac t\u0103ng l\u00ean.\");\n }\n\n if(m.p.soapMl < 8){\n obs.push(\"Ch\u1ea5t t\u1ea9y r\u1eeda \u0111ang qu\u00e1 \u00edt, m\u00e0ng t\u1ebf b\u00e0o ch\u01b0a b\u1ecb ph\u00e1 v\u1ee1 hi\u1ec7u qu\u1ea3.\");\n } else if(m.p.soapMl > 22){\n obs.push(\"Ch\u1ea5t t\u1ea9y r\u1eeda h\u01a1i nhi\u1ec1u, d\u1ecbch chi\u1ebft c\u00f3 th\u1ec3 \u0111\u1ee5c h\u01a1n v\u00e0 kh\u00f3 tinh s\u1ea1ch.\");\n } else {\n obs.push(\"L\u01b0\u1ee3ng ch\u1ea5t t\u1ea9y r\u1eeda \u0111ang \u1edf v\u00f9ng kh\u00e1 ph\u00f9 h\u1ee3p cho qu\u00e1 tr\u00ecnh ly gi\u1ea3i.\");\n }\n\n if(m.p.saltTsp < 0.3){\n\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>M\u00f4 ph\u1ecfng t\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/title>\n <style>\n :root{\n --bg:#eaf4fb;\n --panel:#ffffff;\n --ink:#0d2b52;\n --muted:#5e7188;\n --blue:#003366;\n --blue2:#0f5fa8;\n --line:#cfe0ef;\n --good:#1f9d55;\n --warn:#ef8a17;\n --bad:#d64545;\n --pill:rgba(255,255,255,.85);\n --shadow:0 8px 24px rgba(0,35,76,.08);\n --radius:18px;\n --topH:68px;\n --bottomH:78px;\n }\n *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}\n html,body{height:100%;margin:0;font-family:Inter,Montserrat,Arial,sans-serif;background:var(--bg);color:var(--ink)}\n body{overflow:auto}\n .topbar{\n position:fixed;top:0;left:0;right:0;z-index:1000;\n display:flex;justify-content:space-between;align-items:center;\n padding:12px 14px;pointer-events:none;\n }\n .titleBadge,.langTop{\n pointer-events:auto;\n background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow);\n border-radius:20px;min-height:44px;display:flex;align-items:center;\n }\n .titleBadge{padding:0 16px;font-size:20px;font-weight:800;max-width:min(72vw,520px)}\n .titleBadge span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n .langTop button,.controlBtn,.fsBtn,.stepBtn,.quizBtn{\n border:none;border-radius:16px;cursor:pointer;font-weight:800;font-size:18px;\n min-height:44px;transition:transform .12s ease, opacity .12s ease;\n }\n button:active{transform:scale(.98)}\n .langTop button{background:var(--blue);color:#fff;padding:10px 18px}\n\n .app{\n min-height:100dvh;\n padding:84px 14px 98px;\n display:grid;grid-template-columns:1.05fr 1.35fr .95fr;gap:14px;align-items:start;\n }\n .panel{\n background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:16px;\n }\n .panel h2{margin:0 0 12px;font-size:18px;line-height:1.2}\n .small{font-size:13px;color:var(--muted)}\n .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}\n .chip{background:#eef7ff;border:1px solid var(--line);padding:8px 10px;border-radius:999px;font-size:14px;font-weight:700}\n .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}\n .item{\n background:#f7fbff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;min-height:68px;\n display:flex;gap:10px;align-items:flex-start\n }\n .ico{font-size:24px;line-height:1}\n .item b{display:block;font-size:15px}\n .item span{font-size:13px;color:var(--muted)}\n\n .lab{\n padding:16px;display:flex;flex-direction:column;gap:12px;\n }\n .stageHead{display:flex;gap:8px;flex-wrap:wrap}\n .stageHead .chip{font-size:15px}\n .bench{\n background:linear-gradient(180deg,#f6fbff 0%,#e8f4ff 100%);\n border:1px solid var(--line);border-radius:22px;padding:12px;\n }\n .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}\n .stepBtn{\n background:#eef7ff;border:1px solid var(--line);padding:10px 8px;color:var(--ink);font-size:14px\n }\n .stepBtn.active{background:var(--blue);color:#fff;border-color:var(--blue)}\n .process{\n display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:center;\n }\n .scene{\n min-height:360px;background:#fff;border:1px solid var(--line);border-radius:20px;position:relative;padding:14px;overflow:hidden;\n }\n .statusBox{\n background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;align-self:stretch;display:flex;flex-direction:column;gap:10px;justify-content:center\n }\n .statusLabel{font-size:14px;color:var(--muted)}\n .progress{height:12px;background:#e8eef5;border-radius:999px;overflow:hidden}\n .bar{height:100%;width:0;background:linear-gradient(90deg,#47b56a,#9adf64);transition:width .25s ease}\n\n .bowl,.glass,.tube,.funnel,.bag{position:absolute;left:50%;transform:translateX(-50%)}\n .bowl{bottom:32px;width:230px;height:120px;border:6px solid #99b5cc;border-top:none;border-radius:0 0 120px 120px;background:linear-gradient(180deg,#fff 0 35%,#f8d4db 35% 100%)}\n .berry{position:absolute;width:34px;height:34px;background:#ea5163;border-radius:55% 45% 55% 45%;box-shadow:inset -6px -6px 0 rgba(0,0,0,.08)}\n .berry::after{content:'';position:absolute;top:-7px;left:11px;width:12px;height:12px;background:#43b05c;clip-path:polygon(50% 0,60% 35%,100% 50%,60% 65%,50% 100%,40% 65%,0 50%,40% 35%)}\n .berry.s1{left:78px;bottom:42px}.berry.s2{left:112px;bottom:48px}.berry.s3{left:148px;bottom:40px}\n\n .bag{bottom:22px;width:220px;height:280px;border:6px solid #b9cada;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(232,244,255,.9));overflow:hidden}\n .bagTop{position:absolute;top:14px;left:16px;right:16px;height:16px;border-radius:8px;background:#dce9f5}\n .mash{position:absolute;left:18px;right:18px;bottom:18px;height:110px;background:repeating-linear-gradient(135deg,#ef7c8b 0 12px,#f49aa6 12px 24px);border-radius:18px;transition:height .25s ease}\n\n .funnel{top:48px;width:120px;height:86px;background:linear-gradient(180deg,#dfeaf4,#b7cadb);clip-path:polygon(0 0,100% 0,68% 46%,58% 46%,58% 100%,42% 100%,42% 46%,32% 46%)}\n .glass{bottom:22px;width:190px;height:250px;border:6px solid #a9bfd2;border-top-width:8px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.7))}\n .liquid{position:absolute;left:10px;right:10px;bottom:10px;height:0;border-radius:0 0 18px 18px;transition:height .25s ease}\n .soap{background:linear-gradient(180deg,#7fd0ff,#8dc0f7)}\n .alcohol{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(228,245,255,.9))}\n .foam{position:absolute;left:22px;right:22px;bottom:112px;height:12px;border-radius:999px;background:rgba(255,255,255,.9);display:none}\n\n .tube{bottom:24px;width:95px;height:270px;border:6px solid #a7bbce;border-top-width:8px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78))}\n .layerBase,.layerTop{position:absolute;left:8px;right:8px;border-radius:0 0 14px 14px;transition:height .25s ease}\n .layerBase{bottom:8px;height:120px;background:linear-gradient(180deg,#f8b5c0,#ec8397)}\n .layerTop{bottom:128px;height:90px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(230,243,252,.95))}\n .dnaStrand{position:absolute;left:50%;top:90px;transform:translateX(-50%);width:54px;height:0;opacity:0;transition:all .25s ease}\n .dnaStrand::before,.dnaStrand::after{content:'';position:absolute;inset:0;background:\n radial-gradient(circle at 30% 10%, rgba(255,255,255,.95) 0 10%, transparent 12%),\n radial-gradient(circle at 60% 25%, rgba(255,255,255,.92) 0 12%, transparent 14%),\n radial-gradient(circle at 40% 45%, rgba(255,255,255,.96) 0 11%, transparent 13%),\n radial-gradient(circle at 55% 68%, rgba(255,255,255,.94) 0 10%, transparent 12%),\n radial-gradient(circle at 35% 85%, rgba(255,255,255,.92) 0 13%, transparent 15%);\n filter:drop-shadow(0 0 3px rgba(255,255,255,.7));\n }\n .dnaStrand.show{height:116px;opacity:1}\n .swirl{position:absolute;inset:auto 0 18px 0;text-align:center;font-size:52px;display:none}\n\n .labelFloat{\n position:absolute;top:14px;left:14px;background:rgba(255,255,255,.84);backdrop-filter:none;\n border:1px solid var(--line);border-radius:14px;padding:8px 10px;font-size:14px;font-weight:700;max-width:80%\n }\n .hand{position:absolute;right:16px;top:16px;font-size:44px;opacity:.95;display:none}\n\n .quiz{display:flex;flex-direction:column;gap:10px}\n .quizBtn{background:#eef7ff;border:1px solid var(--line);padding:12px 10px;color:var(--ink);font-size:14px;text-align:left}\n .quizBtn.correct{background:#e9f8ef;border-color:#b7e7c5}\n .quizBtn.wrong{background:#fff0f0;border-color:#f2c2c2}\n .result{background:#f7fbff;border:1px solid var(--line);border-radius:16px;padding:12px;min-height:88px;font-size:14px;line-height:1.45}\n\n .footerBrand,.controlBar,.fsWrap{position:fixed;z-index:1100}\n .footerBrand{left:10px;bottom:86px;font-size:12px;color:#6c7c8e;background:rgba(255,255,255,.86);padding:6px 10px;border-radius:10px;border:1px solid var(--line)}\n .fsWrap{right:12px;bottom:90px}\n .fsBtn{background:var(--blue);color:#fff;padding:12px 16px}\n .controlBar{\n left:0;right:0;bottom:0;padding:10px 12px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);\n display:flex;justify-content:center;gap:12px\n }\n .controlBtn{padding:12px 20px;background:#fff;color:var(--ink);border:1px solid var(--line)}\n .controlBtn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}\n\n .hide{display:none !important}\n\n @media (max-width: 1100px){\n .app{grid-template-columns:1fr;gap:12px}\n .process{grid-template-columns:1fr}\n .statusBox{order:-1}\n .scene{min-height:330px}\n .steps{grid-template-columns:repeat(5, minmax(78px,1fr));overflow:auto;padding-bottom:2px}\n }\n @media (max-width: 640px){\n .titleBadge{font-size:16px;min-height:42px;padding:0 12px;max-width:78vw}\n .langTop button,.controlBtn,.fsBtn{font-size:16px}\n .panel{padding:12px;border-radius:20px}\n .grid2{grid-template-columns:1fr}\n .scene{min-height:290px;padding:10px}\n .bowl{width:200px;height:104px}\n .bag{width:190px;height:248px}\n .glass{width:168px;height:224px}\n .tube{width:86px;height:240px}\n .footerBrand{max-width:62vw;line-height:1.25}\n .controlBar{justify-content:space-between}\n .controlBtn{flex:1;padding:12px 14px}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"topbar\">\n <div class=\"titleBadge\"><span id=\"simTitle\">\ud83e\uddec Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/span><\/div>\n <div class=\"langTop\"><button id=\"topLangBtn\">VN<\/button><\/div>\n <\/div>\n\n <main class=\"app\">\n <section class=\"panel\">\n <h2 id=\"leftTitle\">\ud83e\uddea D\u1ee5ng c\u1ee5 & kh\u00e1i ni\u1ec7m<\/h2>\n <div class=\"chips\">\n <div class=\"chip\" id=\"objChip\">M\u1ee5c ti\u00eau: t\u00e1ch DNA t\u1eeb d\u00e2u t\u00e2y<\/div>\n <\/div>\n <div class=\"grid2\" id=\"materials\"><\/div>\n <div style=\"height:10px\"><\/div>\n <div class=\"grid2\" id=\"terms\"><\/div>\n <\/section>\n\n <section class=\"panel lab\">\n <div class=\"stageHead\">\n <div class=\"chip\" id=\"head1\">D\u00e2u t\u00e2y c\u00f3 nhi\u1ec1u DNA n\u00ean d\u1ec5 quan s\u00e1t<\/div>\n <div class=\"chip\" id=\"head2\">Th\u1ef1c hi\u1ec7n \u0111\u00fang th\u1ee9 t\u1ef1 c\u00e1c b\u01b0\u1edbc<\/div>\n <\/div>\n <div class=\"bench\">\n <div class=\"steps\" id=\"steps\"><\/div>\n <div class=\"process\">\n <div class=\"scene\" id=\"scene\">\n <div class=\"labelFloat\" id=\"sceneLabel\"><\/div>\n <div class=\"hand\" id=\"sceneHand\">\ud83d\udc47<\/div>\n <\/div>\n <div class=\"statusBox\">\n <div>\n <div class=\"statusLabel\" id=\"statusTitle\">Ti\u1ebfn tr\u00ecnh<\/div>\n <div class=\"progress\"><div class=\"bar\" id=\"bar\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"statusLabel\" id=\"stepNameLabel\">B\u01b0\u1edbc hi\u1ec7n t\u1ea1i<\/div>\n <div style=\"font-weight:800;font-size:18px\" id=\"stepName\">Chu\u1ea9n b\u1ecb<\/div>\n <\/div>\n <div>\n <div class=\"statusLabel\" id=\"dnaTitle\">K\u1ebft qu\u1ea3 DNA<\/div>\n <div style=\"font-weight:800;font-size:18px\" id=\"dnaState\">Ch\u01b0a xu\u1ea5t hi\u1ec7n<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"panel\">\n <h2 id=\"rightTitle\">\ud83c\udfaf T\u01b0\u01a1ng t\u00e1c nhanh<\/h2>\n <div class=\"quiz\">\n <div class=\"small\" id=\"quizPrompt\">\u1ede b\u01b0\u1edbc \u0111ang ch\u1ecdn, th\u00e0nh ph\u1ea7n n\u00e0o l\u00e0 quan tr\u1ecdng nh\u1ea5t?<\/div>\n <div id=\"quizOptions\"><\/div>\n <div class=\"result\" id=\"resultBox\"><\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <div class=\"footerBrand\" id=\"brand\">\u0110\u01a1n v\u1ecb ph\u00e1t tri\u1ec3n: Li\u00ean minh Th\u00fac \u0111\u1ea9y gi\u00e1o d\u1ee5c STEM @sepa.org.vn<\/div>\n <div class=\"fsWrap\"><button class=\"fsBtn\" id=\"fsBtn\">Fullscreen<\/button><\/div>\n <div class=\"controlBar\">\n <button class=\"controlBtn\" id=\"resetBtn\">Reset<\/button>\n <button class=\"controlBtn primary\" id=\"bottomLangBtn\">Ng\u00f4n ng\u1eef: VN\/EN<\/button>\n <\/div>\n\n <script>\n const dict = {\n vi: {\n simTitle:'\ud83e\uddec Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y',\n leftTitle:'\ud83e\uddea D\u1ee5ng c\u1ee5 & kh\u00e1i ni\u1ec7m',\n rightTitle:'\ud83c\udfaf T\u01b0\u01a1ng t\u00e1c nhanh',\n objChip:'M\u1ee5c ti\u00eau: t\u00e1ch DNA t\u1eeb d\u00e2u t\u00e2y',\n head1:'D\u00e2u t\u00e2y c\u00f3 nhi\u1ec1u DNA n\u00ean d\u1ec5 quan s\u00e1t',\n head2:'Th\u1ef1c hi\u1ec7n \u0111\u00fang th\u1ee9 t\u1ef1 c\u00e1c b\u01b0\u1edbc',\n statusTitle:'Ti\u1ebfn tr\u00ecnh', stepNameLabel:'B\u01b0\u1edbc hi\u1ec7n t\u1ea1i', dnaTitle:'K\u1ebft qu\u1ea3 DNA',\n dnaNone:'Ch\u01b0a xu\u1ea5t hi\u1ec7n', dnaSome:'DNA b\u1eaft \u0111\u1ea7u t\u00e1ch', dnaDone:'C\u00f3 th\u1ec3 thu DNA m\u00e0u tr\u1eafng \u0111\u1ee5c',\n brand:'\u0110\u01a1n v\u1ecb ph\u00e1t tri\u1ec3n: Li\u00ean minh Th\u00fac \u0111\u1ea9y gi\u00e1o d\u1ee5c STEM @sepa.org.vn',\n fullscreen:'Fullscreen', reset:'Reset', bottomLang:'Ng\u00f4n ng\u1eef: VN\/EN', topLang:'VN',\n quizPrompt:'\u1ede b\u01b0\u1edbc \u0111ang ch\u1ecdn, th\u00e0nh ph\u1ea7n n\u00e0o l\u00e0 quan tr\u1ecdng nh\u1ea5t?',\n resultDefault:'Ch\u1ecdn m\u1ed9t \u0111\u00e1p \u00e1n. M\u00f4 ph\u1ecfng s\u1ebd gi\u1ea3i th\u00edch vai tr\u00f2 c\u1ee7a t\u1eebng ch\u1ea5t trong quy tr\u00ecnh t\u00e1ch chi\u1ebft DNA.',\n materials:[\n ['\ud83c\udf53 D\u00e2u t\u00e2y','3 qu\u1ea3'],['\ud83e\uddc2 Mu\u1ed1i \u0103n','1\/2 th\u00eca c\u00e0 ph\u00ea'],['\ud83e\uddf4 N\u01b0\u1edbc r\u1eeda ch\u00e9n','1 th\u00eca canh'],['\ud83d\udca7 N\u01b0\u1edbc','d\u00f9ng \u0111\u1ec3 pha dung d\u1ecbch'],['\ud83e\udd5b C\u1ed1c \/ b\u00e1t nh\u1ecf','\u0111\u1ec3 pha v\u00e0 l\u1ecdc'],['\ud83e\uddf5 V\u1ea3i l\u1ecdc \/ kh\u0103n m\u1ecfng','l\u1ecdc b\u00e3 qu\u1ea3'],['\ud83e\uddea \u1ed0ng nghi\u1ec7m \/ l\u1ecd nh\u1ecf','thu d\u1ecbch chi\u1ebft'],['\ud83e\udd76 C\u1ed3n isopropyl 70%','\u0111\u1ec3 l\u1ea1nh, t\u1ea1o k\u1ebft t\u1ee7a DNA']\n ],\n terms:[\n ['\ud83e\uddec DNA','Axit \u0111\u00eaoxiribonucleic'],['\ud83e\uddeb B\u1ed9 gen','To\u00e0n b\u1ed9 th\u00f4ng tin di truy\u1ec1n'],['\ud83d\udca5 Ly gi\u1ea3i t\u1ebf b\u00e0o','L\u00e0m v\u1ee1 m\u00e0ng t\u1ebf b\u00e0o \u0111\u1ec3 gi\u1ea3i ph\u00f3ng DNA'],['\u2744\ufe0f K\u1ebft t\u1ee7a','L\u00e0m DNA t\u00e1ch kh\u1ecfi dung d\u1ecbch']\n ],\n steps:['1. Nghi\u1ec1n d\u00e2u','2. Th\u00eam mu\u1ed1i + ch\u1ea5t t\u1ea9y r\u1eeda','3. L\u1ecdc d\u1ecbch','4. Th\u00eam c\u1ed3n l\u1ea1nh','5. Thu DNA'],\n stepTitles:['Nghi\u1ec1n d\u00e2u','Mu\u1ed1i + ch\u1ea5t t\u1ea9y r\u1eeda','L\u1ecdc d\u1ecbch','Th\u00eam c\u1ed3n l\u1ea1nh','Thu DNA'],\n sceneLabels:[\n 'B\u00f3p nh\u1eb9 t\u00fai \u0111\u1ec3 ph\u00e1 m\u00f4 qu\u1ea3 d\u00e2u.',\n 'Ch\u1ea5t t\u1ea9y r\u1eeda l\u00e0m ly gi\u1ea3i m\u00e0ng t\u1ebf b\u00e0o, mu\u1ed1i gi\u00fap DNA k\u1ebft \u0111\u00e1m.',\n 'L\u1ecdc b\u1ecf b\u00e3 qu\u1ea3 \u0111\u1ec3 thu d\u1ecbch chi\u1ebft.',\n 'R\u00f3t c\u1ed3n l\u1ea1nh nh\u1eb9 nh\u00e0ng \u0111\u1ec3 DNA k\u1ebft t\u1ee7a \u1edf l\u1edbp tr\u00ean.',\n 'D\u00f9ng que k\u00e9o s\u1ee3i DNA tr\u1eafng \u0111\u1ee5c ra kh\u1ecfi \u1ed1ng.'\n ],\n quiz:[\n {q:'B\u01b0\u1edbc n\u00e0y c\u1ea7n thao t\u00e1c n\u00e0o?', opts:['B\u00f3p v\u00e0 nghi\u1ec1n m\u00f4 d\u00e2u','\u0110un n\u00f3ng m\u1ea1nh','Th\u00eam c\u1ed3n ngay'], ok:0, exp:'\u0110\u00fang. Nghi\u1ec1n gi\u00fap ph\u00e1 v\u1ee1 m\u00f4, t\u0103ng di\u1ec7n t\u00edch ti\u1ebfp x\u00fac \u0111\u1ec3 gi\u1ea3i ph\u00f3ng t\u1ebf b\u00e0o.'},\n {q:'Ch\u1ea5t n\u00e0o gi\u00fap ph\u00e1 m\u00e0ng t\u1ebf b\u00e0o?', opts:['Mu\u1ed1i \u0103n','Ch\u1ea5t t\u1ea9y r\u1eeda','C\u1ed3n l\u1ea1nh'], ok:1, exp:'\u0110\u00fang. Ch\u1ea5t t\u1ea9y r\u1eeda l\u00e0m tan l\u1edbp m\u00e0ng lipid c\u1ee7a t\u1ebf b\u00e0o, gi\u1ea3i ph\u00f3ng DNA v\u00e0o dung d\u1ecbch.'},\n {q:'M\u1ee5c \u0111\u00edch c\u1ee7a b\u01b0\u1edbc l\u1ecdc l\u00e0 g\u00ec?', opts:['Lo\u1ea1i b\u00e3 qu\u1ea3','L\u00e0m DNA \u0111\u1ed5i m\u00e0u','T\u1ea1o th\u00eam t\u1ebf b\u00e0o'], ok:0, exp:'\u0110\u00fang. L\u1ecdc gi\u00fap t\u00e1ch ph\u1ea7n r\u1eafn, gi\u1eef l\u1ea1i d\u1ecbch chi\u1ebft ch\u1ee9a DNA h\u00f2a tan.'},\n {q:'V\u00ec sao th\u00eam c\u1ed3n l\u1ea1nh?', opts:['L\u00e0m DNA k\u1ebft t\u1ee7a','L\u00e0m DNA bi\u1ebfn m\u1ea5t','T\u1ea1o v\u1ecb ng\u1ecdt'], ok:0, exp:'\u0110\u00fang. DNA \u00edt tan trong c\u1ed3n l\u1ea1nh n\u00ean s\u1ebd k\u1ebft t\u1ee7a th\u00e0nh c\u00e1c s\u1ee3i tr\u1eafng \u0111\u1ee5c d\u1ec5 nh\u00ecn th\u1ea5y.'},\n {q:'Quan s\u00e1t cu\u1ed1i c\u00f9ng h\u1ee3p l\u00ed nh\u1ea5t l\u00e0 g\u00ec?', opts:['DNA th\u00e0nh s\u1ee3i tr\u1eafng \u0111\u1ee5c','DNA ph\u00e1t s\u00e1ng xanh','DNA n\u1ed5 bong b\u00f3ng'], ok:0, exp:'\u0110\u00fang. DNA th\u01b0\u1eddng xu\u1ea5t hi\u1ec7n nh\u01b0 c\u00e1c s\u1ee3i ho\u1eb7c \u0111\u00e1m tr\u1eafng \u0111\u1ee5c \u1edf l\u1edbp c\u1ed3n.'}\n ]\n },\n en: {\n simTitle:'\ud83e\uddec Strawberry DNA Extraction Simulation',\n leftTitle:'\ud83e\uddea Materials & concepts',\n rightTitle:'\ud83c\udfaf Quick interaction',\n objChip:'Objective: extract DNA from strawberries',\n head1:'Strawberries contain abundant DNA, so it is easier to observe',\n head2:'Follow the correct sequence of steps',\n statusTitle:'Progress', stepNameLabel:'Current step', dnaTitle:'DNA result',\n dnaNone:'Not visible yet', dnaSome:'DNA begins to separate', dnaDone:'Cloudy white DNA can be collected',\n brand:'Developed by: STEM Education Promotion Alliance @sepa.org.vn',\n fullscreen:'Fullscreen', reset:'Reset', bottomLang:'Language: VN\/EN', topLang:'EN',\n quizPrompt:'In the selected step, which component or action is most important?',\n resultDefault:'Choose an answer. The simulation explains the role of each substance in the DNA extraction process.',\n materials:[\n ['\ud83c\udf53 Strawberries','3 fruits'],['\ud83e\uddc2 Salt','1\/2 tsp'],['\ud83e\uddf4 Dishwashing liquid','1 tbsp'],['\ud83d\udca7 Water','for extraction solution'],['\ud83e\udd5b Cup \/ small bowl','for mixing and filtering'],['\ud83e\uddf5 Cheesecloth \/ thin cloth','to filter pulp'],['\ud83e\uddea Test tube \/ small jar','to collect extract'],['\ud83e\udd76 Cold 70% isopropyl alcohol','for DNA precipitation']\n ],\n terms:[\n ['\ud83e\uddec DNA','Deoxyribonucleic acid'],['\ud83e\uddeb Genome','Entire genetic information set'],['\ud83d\udca5 Cell lysis','Breaking cell membranes to release DNA'],['\u2744\ufe0f Precipitation','DNA comes out of solution']\n ],\n steps:['1. Mash strawberries','2. Add salt + detergent','3. Filter extract','4. Add cold alcohol','5. Spool DNA'],\n stepTitles:['Mash strawberries','Salt + detergent','Filter extract','Add cold alcohol','Collect DNA'],\n sceneLabels:[\n 'Gently mash the fruit tissue inside the bag.',\n 'Detergent lyses membranes, and salt helps DNA clump together.',\n 'Filter out the pulp to collect the extract.',\n 'Carefully add cold alcohol so DNA precipitates in the upper layer.',\n 'Use a stick to spool the cloudy white DNA from the tube.'\n ],\n quiz:[\n {q:'What should happen in this step?', opts:['Mash the strawberry tissue','Boil it strongly','Add alcohol immediately'], ok:0, exp:'Correct. Mashing breaks up the tissue and increases contact so cells can be released.'},\n {q:'Which ingredient helps break cell membranes?', opts:['Salt','Detergent','Cold alcohol'], ok:1, exp:'Correct. Detergent dissolves the lipid membrane and releases DNA into solution.'},\n {q:'What is the purpose of filtration?', opts:['Remove pulp','Change DNA color','Create more cells'], ok:0, exp:'Correct. Filtration separates solid fruit pieces from the liquid extract containing DNA.'},\n {q:'Why add cold alcohol?', opts:['To precipitate DNA','To erase DNA','To make it sweeter'], ok:0, exp:'Correct. DNA is less soluble in cold alcohol, so it precipitates as cloudy strands.'},\n {q:'What is the expected final observation?', opts:['Cloudy white DNA strands','Bright blue glowing DNA','DNA bubbles explode'], ok:0, exp:'Correct. DNA usually appears as cloudy white strands or clumps in the alcohol layer.'}\n ]\n }\n };\n\n const scene = document.getElementById('scene');\n const sceneLabel = document.getElementById('sceneLabel');\n const sceneHand = document.getElementById('sceneHand');\n const materials = document.getElementById('materials');\n const terms = document.getElementById('terms');\n const stepsWrap = document.getElementById('steps');\n const quizOptions = document.getElementById('quizOptions');\n const resultBox = document.getElementById('resultBox');\n const bar = document.getElementById('bar');\n const stepName = document.getElementById('stepName');\n const dnaState = document.getElementById('dnaState');\n\n let lang = 'vi';\n let currentStep = 0;\n\n function el(id){ return document.getElementById(id); }\n\n function t(key){ return dict[lang][key]; }\n\n function applyText(){\n ['simTitle','leftTitle','rightTitle','objChip','head1','head2','statusTitle','stepNameLabel','dnaTitle','brand'].forEach(id=>el(id).textContent=t(id));\n el('fsBtn').textContent=t('fullscreen');\n el('resetBtn').textContent=t('reset');\n el('bottomLangBtn').textContent=t('bottomLang');\n el('topLangBtn').textContent=t('topLang');\n el('quizPrompt').textContent=dict[lang].quiz[currentStep].q || t('quizPrompt');\n renderLists();\n renderSteps();\n updateStep();\n }\n\n function renderLists(){\n materials.innerHTML='';\n dict[lang].materials.forEach(([a,b])=>{\n const d=document.createElement('div'); d.className='item';\n d.innerHTML=`<div class=\"ico\">${a.split(' ')[0]}<\/div><div><b>${a.replace(\/^\\S+\\s\/, '')}<\/b><span>${b}<\/span><\/div>`;\n materials.appendChild(d);\n });\n terms.innerHTML='';\n dict[lang].terms.forEach(([a,b])=>{\n const d=document.createElement('div'); d.className='item';\n d.innerHTML=`<div class=\"ico\">${a.split(' ')[0]}<\/div><div><b>${a.replace(\/^\\S+\\s\/, '')}<\/b><span>${b}<\/span><\/div>`;\n terms.appendChild(d);\n });\n }\n\n function renderSteps(){\n stepsWrap.innerHTML='';\n dict[lang].steps.forEach((s,i)=>{\n const b=document.createElement('button');\n b.className='stepBtn'+(i===currentStep?' active':'');\n b.textContent=s;\n b.onclick=()=>{currentStep=i; updateStep();};\n stepsWrap.appendChild(b);\n });\n }\n\n function buildScene(step){\n scene.innerHTML='';\n scene.appendChild(sceneLabel);\n scene.appendChild(sceneHand);\n sceneLabel.textContent=dict[lang].sceneLabels[step];\n sceneHand.style.display = (step===0 || step===4) ? 'block' : 'none';\n\n if(step===0){\n const bag=document.createElement('div'); bag.className='bag';\n bag.innerHTML='<div class=\"bagTop\"><\/div><div class=\"mash\" style=\"height:72px\"><\/div>';\n const mash=bag.querySelector('.mash');\n let level=72;\n const grow=()=>{level=Math.min(150, level+12); mash.style.height=level+'px'; if(level>=132) setTimeout(()=>{currentStep=1; updateStep();},300);};\n bag.addEventListener('click',grow);\n bag.addEventListener('touchstart',grow,{passive:true});\n scene.appendChild(bag);\n }\n if(step===1){\n const glass=document.createElement('div'); glass.className='glass';\n glass.innerHTML='<div class=\"liquid soap\" style=\"height:126px\"><\/div><div class=\"foam\"><\/div>';\n const bowl=document.createElement('div'); bowl.className='bowl';\n bowl.innerHTML='<div class=\"berry s1\"><\/div><div class=\"berry s2\"><\/div><div class=\"berry s3\"><\/div>';\n scene.appendChild(glass); scene.appendChild(bowl);\n const label2=document.createElement('div'); label2.className='chip'; label2.style.position='absolute'; label2.style.bottom='18px'; label2.style.left='18px'; label2.style.background='rgba(255,255,255,.9)';\n label2.textContent = lang==='vi' ? 'Ch\u1ea1m \u0111\u1ec3 th\u00eam mu\u1ed1i + ch\u1ea5t t\u1ea9y r\u1eeda' : 'Tap to add salt + detergent';\n scene.appendChild(label2);\n const add=()=>{ glass.querySelector('.foam').style.display='block'; label2.textContent = lang==='vi' ? '\u0110\u00e3 ly gi\u1ea3i t\u1ebf b\u00e0o' : 'Cell lysis started'; setTimeout(()=>{currentStep=2; updateStep();},400); };\n glass.addEventListener('click',add,{once:true}); glass.addEventListener('touchstart',add,{once:true,passive:true});\n }\n if(step===2){\n const funnel=document.createElement('div'); funnel.className='funnel';\n const glass=document.createElement('div'); glass.className='glass';\n glass.innerHTML='<div class=\"liquid soap\" style=\"height:136px\"><\/div>';\n const swirl=document.createElement('div'); swirl.className='swirl'; swirl.textContent='\ud83e\uddf5';\n scene.appendChild(funnel); scene.appendChild(glass); scene.appendChild(swirl);\n const tip=document.createElement('div'); tip.className='chip'; tip.style.position='absolute'; tip.style.bottom='18px'; tip.style.left='18px'; tip.style.background='rgba(255,255,255,.9)';\n tip.textContent = lang==='vi' ? 'Ch\u1ea1m ph\u1ec5u \u0111\u1ec3 l\u1ecdc' : 'Tap the funnel to filter';\n scene.appendChild(tip);\n const filter=()=>{swirl.style.display='block'; tip.textContent = lang==='vi' ? 'B\u00e3 qu\u1ea3 b\u1ecb gi\u1eef l\u1ea1i, thu d\u1ecbch l\u1ecdc' : 'Pulp removed, filtrate collected'; setTimeout(()=>{currentStep=3; updateStep();},450)};\n funnel.addEventListener('click',filter,{once:true}); funnel.addEventListener('touchstart',filter,{once:true,passive:true});\n }\n if(step===3){\n const tube=document.createElement('div'); tube.className='tube';\n tube.innerHTML='<div class=\"layerBase\"><\/div><div class=\"layerTop\" style=\"height:0\"><\/div><div class=\"dnaStrand\"><\/div>';\n scene.appendChild(tube);\n const tip=document.createElement('div'); tip.className='chip'; tip.style.position='absolute'; tip.style.bottom='18px'; tip.style.left='18px'; tip.style.background='rgba(255,255,255,.9)';\n tip.textContent = lang==='vi' ? 'Ch\u1ea1m \u1ed1ng \u0111\u1ec3 th\u00eam c\u1ed3n l\u1ea1nh' : 'Tap tube to add cold alcohol';\n scene.appendChild(tip);\n const addAlcohol=()=>{\n tube.querySelector('.layerTop').style.height='94px';\n tip.textContent = lang==='vi' ? 'DNA b\u1eaft \u0111\u1ea7u k\u1ebft t\u1ee7a \u1edf l\u1edbp tr\u00ean' : 'DNA begins to precipitate in the upper layer';\n setTimeout(()=>{currentStep=4; updateStep();},450);\n };\n tube.addEventListener('click',addAlcohol,{once:true}); tube.addEventListener('touchstart',addAlcohol,{once:true,passive:true});\n }\n if(step===4){\n const tube=document.createElement('div'); tube.className='tube';\n tube.innerHTML='<div class=\"layerBase\"><\/div><div class=\"layerTop\"><\/div><div class=\"dnaStrand show\"><\/div>';\n scene.appendChild(tube);\n const tip=document.createElement('div'); tip.className='chip'; tip.style.position='absolute'; tip.style.bottom='18px'; tip.style.left='18px'; tip.style.background='rgba(255,255,255,.9)';\n tip.textContent = lang==='vi' ? 'Ch\u1ea1m \u0111\u1ec3 thu DNA b\u1eb1ng que' : 'Tap to spool DNA with a stick';\n scene.appendChild(tip);\n const collect=()=>{\n const dna=tube.querySelector('.dnaStrand');\n dna.style.transform='translateX(-50%) translateY(-24px)';\n tip.textContent = lang==='vi' ? 'Thu \u0111\u01b0\u1ee3c DNA m\u00e0u tr\u1eafng \u0111\u1ee5c' : 'Cloudy white DNA collected';\n };\n tube.addEventListener('click',collect); tube.addEventListener('touchstart',collect,{passive:true});\n }\n }\n\n function renderQuiz(){\n const q = dict[lang].quiz[currentStep];\n el('quizPrompt').textContent = q.q;\n quizOptions.innerHTML='';\n resultBox.textContent = t('resultDefault');\n q.opts.forEach((opt,i)=>{\n const b=document.createElement('button');\n b.className='quizBtn'; b.textContent=opt;\n b.onclick=()=>{\n [...quizOptions.children].forEach(x=>x.className='quizBtn');\n if(i===q.ok){ b.classList.add('correct'); }\n else { b.classList.add('wrong'); }\n resultBox.textContent = q.exp;\n };\n quizOptions.appendChild(b);\n });\n }\n\n function updateStep(){\n renderSteps();\n buildScene(currentStep);\n renderQuiz();\n stepName.textContent = dict[lang].stepTitles[currentStep];\n bar.style.width = ((currentStep+1)\/5*100)+'%';\n dnaState.textContent = currentStep<3 ? t('dnaNone') : currentStep===3 ? t('dnaSome') : t('dnaDone');\n }\n\n function resetAll(){ currentStep=0; applyText(); }\n function toggleLang(){ lang = lang==='vi' ? 'en' : 'vi'; applyText(); }\n\n el('resetBtn').onclick=resetAll;\n el('bottomLangBtn').onclick=toggleLang;\n el('topLangBtn').onclick=toggleLang;\n el('fsBtn').onclick=()=>{\n const doc=document.documentElement;\n if(!document.fullscreenElement){ doc.requestFullscreen?.(); }\n else { document.exitFullscreen?.(); }\n };\n\n applyText();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y M\u1ee5c ti\u00eau: Thi\u1ebft k\u1ebf […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[18],"tags":[],"class_list":["post-229","post","type-post","status-publish","format-standard","hentry","category-sinh-hoc"],"yoast_head":"\n<title>Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com\" \/>\n<meta property=\"og:description\" content=\"M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y M\u1ee5c ti\u00eau: Thi\u1ebft k\u1ebf […]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\" \/>\n<meta property=\"og:site_name\" content=\"davilearn.com\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-29T17:22:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-29T17:33:15+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515\"},\"headline\":\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA\",\"datePublished\":\"2026-03-29T17:22:44+00:00\",\"dateModified\":\"2026-03-29T17:33:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\"},\"wordCount\":672,\"commentCount\":0,\"articleSection\":[\"Sinh h\u1ecdc\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\",\"url\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\",\"name\":\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com\",\"isPartOf\":{\"@id\":\"https:\/\/davilearn.com\/#website\"},\"datePublished\":\"2026-03-29T17:22:44+00:00\",\"dateModified\":\"2026-03-29T17:33:15+00:00\",\"author\":{\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515\"},\"breadcrumb\":{\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/davilearn.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/davilearn.com\/#website\",\"url\":\"https:\/\/davilearn.com\/\",\"name\":\"davilearn.com\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/davilearn.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/davilearn.com\"],\"url\":\"https:\/\/davilearn.com\/index.php\/author\/admin\/\"}]}<\/script>\n","yoast_head_json":{"title":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com","og_description":"M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y M\u1ee5c ti\u00eau: Thi\u1ebft k\u1ebf […]","og_url":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/","og_site_name":"davilearn.com","article_published_time":"2026-03-29T17:22:44+00:00","article_modified_time":"2026-03-29T17:33:15+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#article","isPartOf":{"@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/"},"author":{"name":"admin","@id":"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515"},"headline":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA","datePublished":"2026-03-29T17:22:44+00:00","dateModified":"2026-03-29T17:33:15+00:00","mainEntityOfPage":{"@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/"},"wordCount":672,"commentCount":0,"articleSection":["Sinh h\u1ecdc"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/","url":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/","name":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com","isPartOf":{"@id":"https:\/\/davilearn.com\/#website"},"datePublished":"2026-03-29T17:22:44+00:00","dateModified":"2026-03-29T17:33:15+00:00","author":{"@id":"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515"},"breadcrumb":{"@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/davilearn.com\/"},{"@type":"ListItem","position":2,"name":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA"}]},{"@type":"WebSite","@id":"https:\/\/davilearn.com\/#website","url":"https:\/\/davilearn.com\/","name":"davilearn.com","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/davilearn.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/davilearn.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g","caption":"admin"},"sameAs":["http:\/\/davilearn.com"],"url":"https:\/\/davilearn.com\/index.php\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":2,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":232,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts\/229\/revisions\/232"}],"wp:attachment":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":229,"date":"2026-03-29T17:22:44","date_gmt":"2026-03-29T17:22:44","guid":{"rendered":"https:\/\/davilearn.com\/?p=229"},"modified":"2026-03-29T17:33:15","modified_gmt":"2026-03-29T17:33:15","slug":"thi-nghiem-tach-chiet-dna","status":"publish","type":"post","link":"https:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/","title":{"rendered":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA"},"content":{"rendered":"\n\n\n\n \n \n M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/title>\n <style>\n :root{\n --bg:#f6fbff;\n --card:#ffffff;\n --ink:#16324f;\n --soft:#6b7a90;\n --primary:#2b7fff;\n --good:#13a36e;\n --warn:#ef8b17;\n --bad:#e34b4b;\n --accent:#8e5cff;\n --pink:#ff5fa2;\n --border:#dbe7f3;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family: Arial, Helvetica, sans-serif;\n background:linear-gradient(180deg,#eef7ff 0%, #f9fcff 100%);\n color:var(--ink);\n }\n .wrap{\n max-width:1280px;\n margin:0 auto;\n padding:20px;\n }\n .hero{\n background:linear-gradient(135deg,#2b7fff 0%, #7d57ff 100%);\n color:#fff;\n border-radius:24px;\n padding:24px;\n box-shadow:0 14px 36px rgba(43,127,255,.18);\n }\n .hero h1{\n margin:0 0 8px 0;\n font-size:clamp(28px,4vw,42px);\n }\n .hero p{\n margin:6px 0;\n line-height:1.6;\n opacity:.98;\n }\n .pill-row{\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n margin-top:14px;\n }\n .pill{\n background:rgba(255,255,255,.16);\n border:1px solid rgba(255,255,255,.25);\n padding:8px 12px;\n border-radius:999px;\n font-size:14px;\n }\n\n .grid{\n display:grid;\n grid-template-columns: 1.3fr .95fr;\n gap:18px;\n margin-top:18px;\n }\n .card{\n background:var(--card);\n border:1px solid var(--border);\n border-radius:20px;\n padding:18px;\n box-shadow:0 8px 26px rgba(15,58,99,.06);\n }\n .card h2, .card h3{\n margin-top:0;\n }\n canvas{\n width:100%;\n max-width:100%;\n border:1px solid var(--border);\n border-radius:16px;\n background:#fff;\n display:block;\n }\n\n .stepbar{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:10px;\n margin-top:14px;\n }\n .step{\n padding:10px 12px;\n border-radius:14px;\n border:1px solid var(--border);\n background:#f8fbff;\n text-align:center;\n font-size:14px;\n color:var(--soft);\n }\n .step.active{\n background:#e9f2ff;\n color:var(--primary);\n border-color:#bcd7ff;\n font-weight:700;\n }\n .step.done{\n background:#eafaf4;\n color:var(--good);\n border-color:#bfead6;\n font-weight:700;\n }\n\n .controls{\n display:grid;\n gap:14px;\n }\n .control{\n padding:14px;\n border:1px solid var(--border);\n border-radius:16px;\n background:#fbfdff;\n }\n .control label{\n display:flex;\n justify-content:space-between;\n gap:10px;\n font-weight:700;\n margin-bottom:8px;\n }\n .control small{\n color:var(--soft);\n display:block;\n line-height:1.5;\n margin-top:6px;\n }\n input[type=\"range\"]{\n width:100%;\n }\n\n .btn-row{\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n margin-top:10px;\n }\n button{\n border:none;\n border-radius:14px;\n padding:11px 16px;\n font-weight:700;\n cursor:pointer;\n transition:.2s ease;\n }\n button:hover{ transform:translateY(-1px); }\n .btn-primary{ background:var(--primary); color:#fff; }\n .btn-soft{ background:#eef5ff; color:var(--primary); }\n .btn-accent{ background:var(--accent); color:#fff; }\n .btn-reset{ background:#f4f4f4; color:#444; }\n\n .stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:12px;\n margin-top:14px;\n }\n .stat{\n border-radius:18px;\n padding:14px;\n color:#fff;\n min-height:92px;\n }\n .s1{ background:linear-gradient(135deg,#2b7fff,#5ea6ff); }\n .s2{ background:linear-gradient(135deg,#13a36e,#38c18b); }\n .s3{ background:linear-gradient(135deg,#8e5cff,#b38bff); }\n .s4{ background:linear-gradient(135deg,#ff8f1f,#ffb24d); }\n .stat .k{\n font-size:13px;\n opacity:.92;\n }\n .stat .v{\n font-size:28px;\n font-weight:800;\n margin-top:6px;\n }\n\n .note{\n border-left:4px solid var(--primary);\n background:#f4f9ff;\n padding:12px 14px;\n border-radius:12px;\n line-height:1.6;\n color:#27435f;\n }\n .obs{\n margin:0;\n padding-left:20px;\n line-height:1.7;\n }\n .legend{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:10px;\n margin-top:12px;\n }\n .legend div{\n border:1px dashed var(--border);\n border-radius:12px;\n padding:10px;\n font-size:14px;\n background:#fcfeff;\n }\n\n #feedback { display:none; margin-top:12px; }\n #feedback input, #feedback textarea{\n width:100%;\n padding:10px 12px;\n border-radius:12px;\n border:1px solid var(--border);\n margin:8px 0;\n font-family:inherit;\n }\n #feedback textarea{ min-height:90px; resize:vertical; }\n\n .footer-tip{\n margin-top:14px;\n color:var(--soft);\n font-size:14px;\n line-height:1.6;\n }\n\n @media (max-width: 960px){\n .grid{ grid-template-columns:1fr; }\n .stats{ grid-template-columns:repeat(2,1fr); }\n .stepbar{ grid-template-columns:repeat(2,1fr); }\n .legend{ grid-template-columns:1fr; }\n }\n @media (max-width: 560px){\n .stats{ grid-template-columns:1fr; }\n .stepbar{ grid-template-columns:1fr; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <section class=\"hero\">\n <h1>T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/h1>\n <p><strong>M\u1ee5c ti\u00eau:<\/strong> Thi\u1ebft k\u1ebf b\u1ed9 kit t\u00e1ch chi\u1ebft DNA v\u00e0 d\u00f9ng n\u00f3 \u0111\u1ec3 tinh s\u1ea1ch DNA t\u1eeb d\u00e2u t\u00e2y.<\/p>\n <p><strong>C\u00e2u h\u1ecfi l\u1edbn:<\/strong> L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 \u0111\u01b0a DNA ra kh\u1ecfi t\u1ebf b\u00e0o? Vai tr\u00f2 c\u1ee7a <strong>ch\u1ea5t t\u1ea9y r\u1eeda<\/strong>, <strong>mu\u1ed1i<\/strong> v\u00e0 <strong>c\u1ed3n l\u1ea1nh<\/strong> l\u00e0 g\u00ec?<\/p>\n <div class=\"pill-row\">\n <div class=\"pill\">Sinh h\u1ecdc ph\u00e2n t\u1eed c\u01a1 b\u1ea3n<\/div>\n <div class=\"pill\">STEM l\u1edbp 6<\/div>\n <div class=\"pill\">M\u00f4 ph\u1ecfng \u0111\u1ecbnh t\u00ednh<\/div>\n <div class=\"pill\">C\u00f3 ph\u1ea3n h\u1ed3i s\u01b0 ph\u1ea1m<\/div>\n <\/div>\n <\/section>\n\n <div class=\"grid\">\n <section class=\"card\">\n <h2>B\u00e0n th\u00ed nghi\u1ec7m \u1ea3o<\/h2>\n <p class=\"note\">\n H\u00e3y \u0111i\u1ec1u ch\u1ec9nh th\u00f4ng s\u1ed1, r\u1ed3i th\u1ef1c hi\u1ec7n \u0111\u00fang tr\u00ecnh t\u1ef1:\n <strong>Nghi\u1ec1n d\u00e2u \u2192 Th\u00eam dung d\u1ecbch ly gi\u1ea3i \u2192 L\u1ecdc \u2192 R\u00f3t c\u1ed3n l\u1ea1nh<\/strong>.\n N\u1ebfu l\u00e0m sai ho\u1eb7c t\u1ed1i \u01b0u k\u00e9m, l\u01b0\u1ee3ng DNA thu \u0111\u01b0\u1ee3c s\u1ebd \u00edt ho\u1eb7c kh\u00f3 quan s\u00e1t.\n <\/p>\n\n <canvas id=\"experimentCanvas\" width=\"920\" height=\"430\"><\/canvas>\n\n <div class=\"stepbar\">\n <div id=\"step1\" class=\"step active\">1. Chu\u1ea9n b\u1ecb m\u1eabu<\/div>\n <div id=\"step2\" class=\"step\">2. Ly gi\u1ea3i t\u1ebf b\u00e0o<\/div>\n <div id=\"step3\" class=\"step\">3. L\u1ecdc d\u1ecbch<\/div>\n <div id=\"step4\" class=\"step\">4. K\u1ebft t\u1ee7a DNA<\/div>\n <div id=\"step5\" class=\"step\">5. Quan s\u00e1t<\/div>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn-primary\" onclick=\"doMash()\">B1 – Nghi\u1ec1n d\u00e2u<\/button>\n <button class=\"btn-soft\" onclick=\"doLysis()\">B2 – Th\u00eam dung d\u1ecbch ly gi\u1ea3i<\/button>\n <button class=\"btn-soft\" onclick=\"doFilter()\">B3 – L\u1ecdc qua v\u1ea3i<\/button>\n <button class=\"btn-accent\" onclick=\"doAlcohol()\">B4 – R\u00f3t c\u1ed3n l\u1ea1nh<\/button>\n <button class=\"btn-reset\" onclick=\"resetAll()\">L\u00e0m l\u1ea1i<\/button>\n <\/div>\n\n <div class=\"stats\">\n <div class=\"stat s1\">\n <div class=\"k\">M\u1ee9c ph\u00e1 v\u1ee1 t\u1ebf b\u00e0o<\/div>\n <div class=\"v\" id=\"lysisValue\">0%<\/div>\n <\/div>\n <div class=\"stat s2\">\n <div class=\"k\">\u0110\u1ed9 k\u1ebft t\u1ee5 DNA<\/div>\n <div class=\"v\" id=\"clumpValue\">0%<\/div>\n <\/div>\n <div class=\"stat s3\">\n <div class=\"k\">\u0110\u1ed9 tinh s\u1ea1ch<\/div>\n <div class=\"v\" id=\"purityValue\">0%<\/div>\n <\/div>\n <div class=\"stat s4\">\n <div class=\"k\">Kh\u1ea3 n\u0103ng nh\u00ecn th\u1ea5y DNA<\/div>\n <div class=\"v\" id=\"visibleValue\">0%<\/div>\n <\/div>\n <\/div>\n\n <div class=\"legend\">\n <div><strong>V\u00f9ng tr\u00e1i:<\/strong> t\u00fai d\u00e2u t\u00e2y v\u00e0 m\u1ee9c nghi\u1ec1n m\u1eabu<\/div>\n <div><strong>V\u00f9ng gi\u1eefa:<\/strong> l\u1ecdc d\u1ecbch qua v\u1ea3i\/l\u01b0\u1edbi<\/div>\n <div><strong>V\u00f9ng ph\u1ea3i:<\/strong> \u1ed1ng nghi\u1ec7m v\u1edbi l\u1edbp d\u1ecbch v\u00e0 l\u1edbp c\u1ed3n<\/div>\n <\/div>\n <\/section>\n\n <aside class=\"card\">\n <h2>B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n b\u1ed9 kit<\/h2>\n\n <div class=\"controls\">\n <div class=\"control\">\n <label>\n <span>M\u1ee9c nghi\u1ec1n m\u1eabu<\/span>\n <strong><span id=\"mashOut\">60<\/span>%<\/strong>\n <\/label>\n <input type=\"range\" id=\"mashLevel\" min=\"0\" max=\"100\" value=\"60\" \/>\n <small>Nghi\u1ec1n qu\u00e1 nh\u1eb9 \u2192 \u00edt t\u1ebf b\u00e0o b\u1ecb ph\u00e1 v\u1ee1. Nghi\u1ec1n v\u1eeba \u0111\u1ee7 \u2192 gi\u1ea3i ph\u00f3ng nhi\u1ec1u v\u1eadt ch\u1ea5t t\u1ebf b\u00e0o h\u01a1n.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>L\u01b0\u1ee3ng n\u01b0\u1edbc r\u1eeda ch\u00e9n<\/span>\n <strong><span id=\"soapOut\">15<\/span> ml<\/strong>\n <\/label>\n <input type=\"range\" id=\"soapLevel\" min=\"0\" max=\"30\" value=\"15\" \/>\n <small>Ch\u1ea5t t\u1ea9y r\u1eeda gi\u00fap ph\u00e1 v\u1ee1 m\u00e0ng t\u1ebf b\u00e0o v\u00e0 m\u00e0ng nh\u00e2n. Qu\u00e1 \u00edt th\u00ec ly gi\u1ea3i k\u00e9m, qu\u00e1 nhi\u1ec1u c\u00f3 th\u1ec3 l\u00e0m m\u1eabu \u0111\u1ee5c v\u00e0 kh\u00f3 tinh s\u1ea1ch.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>L\u01b0\u1ee3ng mu\u1ed1i<\/span>\n <strong><span id=\"saltOut\">0.5<\/span> th\u00eca c\u00e0 ph\u00ea<\/strong>\n <\/label>\n <input type=\"range\" id=\"saltLevel\" min=\"0\" max=\"10\" value=\"5\" \/>\n <small>Mu\u1ed1i h\u1ed7 tr\u1ee3 DNA k\u1ebft c\u1ee5m t\u1ed1t h\u01a1n. \u1ede m\u00f4 ph\u1ecfng n\u00e0y, m\u1ee9c t\u1ed1i \u01b0u g\u1ea7n kho\u1ea3ng 0,5 th\u00eca c\u00e0 ph\u00ea.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>Nhi\u1ec7t \u0111\u1ed9 c\u1ed3n isopropyl<\/span>\n <strong><span id=\"tempOut\">0<\/span>\u00b0C<\/strong>\n <\/label>\n <input type=\"range\" id=\"alcoholTemp\" min=\"-10\" max=\"25\" value=\"0\" \/>\n <small>C\u1ed3n c\u00e0ng l\u1ea1nh th\u00ec DNA c\u00e0ng d\u1ec5 k\u1ebft t\u1ee7a v\u00e0 hi\u1ec7n r\u00f5 th\u00e0nh c\u00e1c s\u1ee3i tr\u1eafng \u0111\u1ee5c.<\/small>\n <\/div>\n\n <div class=\"control\">\n <label>\n <span>Ch\u1ea5t l\u01b0\u1ee3ng l\u1ecdc<\/span>\n <strong><span id=\"filterOut\">70<\/span>%<\/strong>\n <\/label>\n <input type=\"range\" id=\"filterQuality\" min=\"0\" max=\"100\" value=\"70\" \/>\n <small>L\u1ecdc t\u1ed1t gi\u00fap gi\u1ea3m b\u00e3 qu\u1ea3 v\u00e0 t\u1ea1p ch\u1ea5t, t\u0103ng \u0111\u1ed9 tinh s\u1ea1ch c\u1ee7a d\u1ecbch chi\u1ebft.<\/small>\n <\/div>\n <\/div>\n\n <h3>Quan s\u00e1t & ph\u1ea3n h\u1ed3i khoa h\u1ecdc<\/h3>\n <ul class=\"obs\" id=\"observationList\"><\/ul>\n\n <h3>Bi\u1ec3u \u0111\u1ed3 k\u1ebft qu\u1ea3<\/h3>\n <canvas id=\"resultGraph\" width=\"520\" height=\"260\"><\/canvas>\n\n <h3>Vai tr\u00f2 c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n<\/h3>\n <ul class=\"obs\">\n <li><strong>Ch\u1ea5t t\u1ea9y r\u1eeda:<\/strong> l\u00e0m v\u1ee1 m\u00e0ng lipid c\u1ee7a t\u1ebf b\u00e0o v\u00e0 m\u00e0ng nh\u00e2n.<\/li>\n <li><strong>Mu\u1ed1i:<\/strong> h\u1ed7 tr\u1ee3 DNA b\u1edbt h\u00f2a tan v\u00e0 k\u1ebft c\u1ee5m d\u1ec5 h\u01a1n.<\/li>\n <li><strong>C\u1ed3n l\u1ea1nh:<\/strong> l\u00e0m DNA k\u1ebft t\u1ee7a \u0111\u1ec3 ta nh\u00ecn th\u1ea5y b\u1eb1ng m\u1eaft th\u01b0\u1eddng.<\/li>\n <\/ul>\n\n <div style=\"margin-top:16px\">\n <button class=\"btn-soft\" onclick=\"toggleFeedback()\">G\u1eedi ph\u1ea3n h\u1ed3i v\u1ec1 m\u00f4 ph\u1ecfng<\/button>\n <div id=\"feedback\">\n <input type=\"text\" placeholder=\"T\u00ean\" id=\"name\">\n <input type=\"email\" placeholder=\"Email\" id=\"email\">\n <textarea placeholder=\"G\u00f3p \u00fd c\u1ea3i ti\u1ebfn m\u00f4 ph\u1ecfng\" id=\"message\"><\/textarea>\n <button class=\"btn-primary\" onclick=\"sendFeedback()\">G\u1eedi<\/button>\n <\/div>\n <\/div>\n\n <p class=\"footer-tip\">\n L\u01b0u \u00fd s\u01b0 ph\u1ea1m: th\u1ee9 h\u1ecdc sinh th\u1ea5y \u1edf cu\u1ed1i th\u00ed nghi\u1ec7m l\u00e0 <strong>kh\u1ed1i DNA k\u1ebft t\u1ee5<\/strong>,\n kh\u00f4ng ph\u1ea3i nh\u00ecn th\u1ea5y tr\u1ef1c ti\u1ebfp c\u1ea5u tr\u00fac xo\u1eafn k\u00e9p \u1edf m\u1ee9c m\u1ed9t ph\u00e2n t\u1eed.\n <\/p>\n <\/aside>\n <\/div>\n <\/div>\n\n <script>\n const state = {\n mashed: false,\n lysed: false,\n filtered: false,\n alcoholAdded: false\n };\n\n const ids = [\"mashLevel\",\"soapLevel\",\"saltLevel\",\"alcoholTemp\",\"filterQuality\"];\n ids.forEach(id => document.getElementById(id).addEventListener(\"input\", updateAll));\n\n function clamp(v, min, max){ return Math.max(min, Math.min(max, v)); }\n function triScore(value, optimum, tolerance){\n return clamp(1 - Math.abs(value - optimum) \/ tolerance, 0, 1);\n }\n function pct(v){ return Math.round(v * 100); }\n\n function getParams(){\n const mash = Number(document.getElementById(\"mashLevel\").value) \/ 100;\n const soapMl = Number(document.getElementById(\"soapLevel\").value);\n const saltRaw = Number(document.getElementById(\"saltLevel\").value);\n const saltTsp = +(saltRaw \/ 10).toFixed(1);\n const temp = Number(document.getElementById(\"alcoholTemp\").value);\n const filter = Number(document.getElementById(\"filterQuality\").value) \/ 100;\n return { mash, soapMl, saltTsp, temp, filter };\n }\n\n function computeModel(){\n const p = getParams();\n\n const mashScore = p.mash;\n const soapScore = triScore(p.soapMl, 15, 15);\n const saltScore = triScore(p.saltTsp, 0.5, 0.5);\n const tempScore = p.temp <= 0 ? 1 : clamp(1 - (p.temp \/ 25), 0.15, 1);\n const filterScore = p.filter;\n\n let lysis = (0.55 * mashScore + 0.45 * soapScore);\n if(!state.mashed) lysis *= 0.18;\n if(!state.lysed) lysis *= 0.45;\n\n let clump = (0.6 * saltScore + 0.4 * tempScore);\n if(!state.alcoholAdded) clump *= 0.12;\n\n let purity = 0.2 + 0.8 * filterScore;\n if(!state.filtered) purity *= 0.42;\n\n const yieldScore = clamp(lysis * clump * purity, 0, 1);\n const visible = state.alcoholAdded ? clamp(yieldScore * 1.8, 0, 1) : 0;\n\n return {\n p, mashScore, soapScore, saltScore, tempScore, filterScore,\n lysis, clump, purity, yieldScore, visible\n };\n }\n\n function setOutputLabels(){\n const p = getParams();\n document.getElementById(\"mashOut\").textContent = Math.round(p.mash * 100);\n document.getElementById(\"soapOut\").textContent = p.soapMl;\n document.getElementById(\"saltOut\").textContent = p.saltTsp.toFixed(1);\n document.getElementById(\"tempOut\").textContent = p.temp;\n document.getElementById(\"filterOut\").textContent = Math.round(p.filter * 100);\n }\n\n function doMash(){\n state.mashed = true;\n updateAll();\n }\n\n function doLysis(){\n if(!state.mashed){\n alert(\"H\u00e3y nghi\u1ec1n d\u00e2u tr\u01b0\u1edbc \u0111\u1ec3 t\u0103ng hi\u1ec7u qu\u1ea3 ly gi\u1ea3i.\");\n return;\n }\n state.lysed = true;\n updateAll();\n }\n\n function doFilter(){\n if(!state.lysed){\n alert(\"H\u00e3y th\u00eam dung d\u1ecbch ly gi\u1ea3i tr\u01b0\u1edbc r\u1ed3i m\u1edbi l\u1ecdc.\");\n return;\n }\n state.filtered = true;\n updateAll();\n }\n\n function doAlcohol(){\n if(!state.filtered){\n alert(\"H\u00e3y l\u1ecdc d\u1ecbch tr\u01b0\u1edbc khi r\u00f3t c\u1ed3n l\u1ea1nh.\");\n return;\n }\n state.alcoholAdded = true;\n updateAll();\n }\n\n function resetAll(){\n state.mashed = false;\n state.lysed = false;\n state.filtered = false;\n state.alcoholAdded = false;\n document.getElementById(\"mashLevel\").value = 60;\n document.getElementById(\"soapLevel\").value = 15;\n document.getElementById(\"saltLevel\").value = 5;\n document.getElementById(\"alcoholTemp\").value = 0;\n document.getElementById(\"filterQuality\").value = 70;\n updateAll();\n }\n\n function updateSteps(){\n const s1 = document.getElementById(\"step1\");\n const s2 = document.getElementById(\"step2\");\n const s3 = document.getElementById(\"step3\");\n const s4 = document.getElementById(\"step4\");\n const s5 = document.getElementById(\"step5\");\n [s1,s2,s3,s4,s5].forEach(s=>s.className=\"step\");\n\n if(!state.mashed){\n s1.classList.add(\"active\");\n return;\n }\n s1.classList.add(\"done\");\n\n if(!state.lysed){\n s2.classList.add(\"active\");\n return;\n }\n s2.classList.add(\"done\");\n\n if(!state.filtered){\n s3.classList.add(\"active\");\n return;\n }\n s3.classList.add(\"done\");\n\n if(!state.alcoholAdded){\n s4.classList.add(\"active\");\n return;\n }\n s4.classList.add(\"done\");\n s5.classList.add(\"active\");\n }\n\n function updateStats(m){\n document.getElementById(\"lysisValue\").textContent = pct(m.lysis) + \"%\";\n document.getElementById(\"clumpValue\").textContent = pct(m.clump) + \"%\";\n document.getElementById(\"purityValue\").textContent = pct(m.purity) + \"%\";\n document.getElementById(\"visibleValue\").textContent = pct(m.visible) + \"%\";\n }\n\n function updateObservation(m){\n const obs = [];\n\n if(!state.mashed){\n obs.push(\"B\u1eaft \u0111\u1ea7u b\u1eb1ng c\u00e1ch nghi\u1ec1n d\u00e2u \u0111\u1ec3 ph\u00e1 v\u1ee1 m\u00f4 qu\u1ea3 v\u00e0 gi\u1ea3i ph\u00f3ng nhi\u1ec1u t\u1ebf b\u00e0o h\u01a1n.\");\n } else {\n obs.push(\"M\u1eabu d\u00e2u \u0111\u00e3 \u0111\u01b0\u1ee3c nghi\u1ec1n, di\u1ec7n t\u00edch ti\u1ebfp x\u00fac t\u0103ng l\u00ean.\");\n }\n\n if(m.p.soapMl < 8){\n obs.push(\"Ch\u1ea5t t\u1ea9y r\u1eeda \u0111ang qu\u00e1 \u00edt, m\u00e0ng t\u1ebf b\u00e0o ch\u01b0a b\u1ecb ph\u00e1 v\u1ee1 hi\u1ec7u qu\u1ea3.\");\n } else if(m.p.soapMl > 22){\n obs.push(\"Ch\u1ea5t t\u1ea9y r\u1eeda h\u01a1i nhi\u1ec1u, d\u1ecbch chi\u1ebft c\u00f3 th\u1ec3 \u0111\u1ee5c h\u01a1n v\u00e0 kh\u00f3 tinh s\u1ea1ch.\");\n } else {\n obs.push(\"L\u01b0\u1ee3ng ch\u1ea5t t\u1ea9y r\u1eeda \u0111ang \u1edf v\u00f9ng kh\u00e1 ph\u00f9 h\u1ee3p cho qu\u00e1 tr\u00ecnh ly gi\u1ea3i.\");\n }\n\n if(m.p.saltTsp < 0.3){\n\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>M\u00f4 ph\u1ecfng t\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/title>\n <style>\n :root{\n --bg:#eaf4fb;\n --panel:#ffffff;\n --ink:#0d2b52;\n --muted:#5e7188;\n --blue:#003366;\n --blue2:#0f5fa8;\n --line:#cfe0ef;\n --good:#1f9d55;\n --warn:#ef8a17;\n --bad:#d64545;\n --pill:rgba(255,255,255,.85);\n --shadow:0 8px 24px rgba(0,35,76,.08);\n --radius:18px;\n --topH:68px;\n --bottomH:78px;\n }\n *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}\n html,body{height:100%;margin:0;font-family:Inter,Montserrat,Arial,sans-serif;background:var(--bg);color:var(--ink)}\n body{overflow:auto}\n .topbar{\n position:fixed;top:0;left:0;right:0;z-index:1000;\n display:flex;justify-content:space-between;align-items:center;\n padding:12px 14px;pointer-events:none;\n }\n .titleBadge,.langTop{\n pointer-events:auto;\n background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow);\n border-radius:20px;min-height:44px;display:flex;align-items:center;\n }\n .titleBadge{padding:0 16px;font-size:20px;font-weight:800;max-width:min(72vw,520px)}\n .titleBadge span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n .langTop button,.controlBtn,.fsBtn,.stepBtn,.quizBtn{\n border:none;border-radius:16px;cursor:pointer;font-weight:800;font-size:18px;\n min-height:44px;transition:transform .12s ease, opacity .12s ease;\n }\n button:active{transform:scale(.98)}\n .langTop button{background:var(--blue);color:#fff;padding:10px 18px}\n\n .app{\n min-height:100dvh;\n padding:84px 14px 98px;\n display:grid;grid-template-columns:1.05fr 1.35fr .95fr;gap:14px;align-items:start;\n }\n .panel{\n background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:16px;\n }\n .panel h2{margin:0 0 12px;font-size:18px;line-height:1.2}\n .small{font-size:13px;color:var(--muted)}\n .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}\n .chip{background:#eef7ff;border:1px solid var(--line);padding:8px 10px;border-radius:999px;font-size:14px;font-weight:700}\n .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}\n .item{\n background:#f7fbff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;min-height:68px;\n display:flex;gap:10px;align-items:flex-start\n }\n .ico{font-size:24px;line-height:1}\n .item b{display:block;font-size:15px}\n .item span{font-size:13px;color:var(--muted)}\n\n .lab{\n padding:16px;display:flex;flex-direction:column;gap:12px;\n }\n .stageHead{display:flex;gap:8px;flex-wrap:wrap}\n .stageHead .chip{font-size:15px}\n .bench{\n background:linear-gradient(180deg,#f6fbff 0%,#e8f4ff 100%);\n border:1px solid var(--line);border-radius:22px;padding:12px;\n }\n .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}\n .stepBtn{\n background:#eef7ff;border:1px solid var(--line);padding:10px 8px;color:var(--ink);font-size:14px\n }\n .stepBtn.active{background:var(--blue);color:#fff;border-color:var(--blue)}\n .process{\n display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:center;\n }\n .scene{\n min-height:360px;background:#fff;border:1px solid var(--line);border-radius:20px;position:relative;padding:14px;overflow:hidden;\n }\n .statusBox{\n background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;align-self:stretch;display:flex;flex-direction:column;gap:10px;justify-content:center\n }\n .statusLabel{font-size:14px;color:var(--muted)}\n .progress{height:12px;background:#e8eef5;border-radius:999px;overflow:hidden}\n .bar{height:100%;width:0;background:linear-gradient(90deg,#47b56a,#9adf64);transition:width .25s ease}\n\n .bowl,.glass,.tube,.funnel,.bag{position:absolute;left:50%;transform:translateX(-50%)}\n .bowl{bottom:32px;width:230px;height:120px;border:6px solid #99b5cc;border-top:none;border-radius:0 0 120px 120px;background:linear-gradient(180deg,#fff 0 35%,#f8d4db 35% 100%)}\n .berry{position:absolute;width:34px;height:34px;background:#ea5163;border-radius:55% 45% 55% 45%;box-shadow:inset -6px -6px 0 rgba(0,0,0,.08)}\n .berry::after{content:'';position:absolute;top:-7px;left:11px;width:12px;height:12px;background:#43b05c;clip-path:polygon(50% 0,60% 35%,100% 50%,60% 65%,50% 100%,40% 65%,0 50%,40% 35%)}\n .berry.s1{left:78px;bottom:42px}.berry.s2{left:112px;bottom:48px}.berry.s3{left:148px;bottom:40px}\n\n .bag{bottom:22px;width:220px;height:280px;border:6px solid #b9cada;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(232,244,255,.9));overflow:hidden}\n .bagTop{position:absolute;top:14px;left:16px;right:16px;height:16px;border-radius:8px;background:#dce9f5}\n .mash{position:absolute;left:18px;right:18px;bottom:18px;height:110px;background:repeating-linear-gradient(135deg,#ef7c8b 0 12px,#f49aa6 12px 24px);border-radius:18px;transition:height .25s ease}\n\n .funnel{top:48px;width:120px;height:86px;background:linear-gradient(180deg,#dfeaf4,#b7cadb);clip-path:polygon(0 0,100% 0,68% 46%,58% 46%,58% 100%,42% 100%,42% 46%,32% 46%)}\n .glass{bottom:22px;width:190px;height:250px;border:6px solid #a9bfd2;border-top-width:8px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.7))}\n .liquid{position:absolute;left:10px;right:10px;bottom:10px;height:0;border-radius:0 0 18px 18px;transition:height .25s ease}\n .soap{background:linear-gradient(180deg,#7fd0ff,#8dc0f7)}\n .alcohol{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(228,245,255,.9))}\n .foam{position:absolute;left:22px;right:22px;bottom:112px;height:12px;border-radius:999px;background:rgba(255,255,255,.9);display:none}\n\n .tube{bottom:24px;width:95px;height:270px;border:6px solid #a7bbce;border-top-width:8px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78))}\n .layerBase,.layerTop{position:absolute;left:8px;right:8px;border-radius:0 0 14px 14px;transition:height .25s ease}\n .layerBase{bottom:8px;height:120px;background:linear-gradient(180deg,#f8b5c0,#ec8397)}\n .layerTop{bottom:128px;height:90px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(230,243,252,.95))}\n .dnaStrand{position:absolute;left:50%;top:90px;transform:translateX(-50%);width:54px;height:0;opacity:0;transition:all .25s ease}\n .dnaStrand::before,.dnaStrand::after{content:'';position:absolute;inset:0;background:\n radial-gradient(circle at 30% 10%, rgba(255,255,255,.95) 0 10%, transparent 12%),\n radial-gradient(circle at 60% 25%, rgba(255,255,255,.92) 0 12%, transparent 14%),\n radial-gradient(circle at 40% 45%, rgba(255,255,255,.96) 0 11%, transparent 13%),\n radial-gradient(circle at 55% 68%, rgba(255,255,255,.94) 0 10%, transparent 12%),\n radial-gradient(circle at 35% 85%, rgba(255,255,255,.92) 0 13%, transparent 15%);\n filter:drop-shadow(0 0 3px rgba(255,255,255,.7));\n }\n .dnaStrand.show{height:116px;opacity:1}\n .swirl{position:absolute;inset:auto 0 18px 0;text-align:center;font-size:52px;display:none}\n\n .labelFloat{\n position:absolute;top:14px;left:14px;background:rgba(255,255,255,.84);backdrop-filter:none;\n border:1px solid var(--line);border-radius:14px;padding:8px 10px;font-size:14px;font-weight:700;max-width:80%\n }\n .hand{position:absolute;right:16px;top:16px;font-size:44px;opacity:.95;display:none}\n\n .quiz{display:flex;flex-direction:column;gap:10px}\n .quizBtn{background:#eef7ff;border:1px solid var(--line);padding:12px 10px;color:var(--ink);font-size:14px;text-align:left}\n .quizBtn.correct{background:#e9f8ef;border-color:#b7e7c5}\n .quizBtn.wrong{background:#fff0f0;border-color:#f2c2c2}\n .result{background:#f7fbff;border:1px solid var(--line);border-radius:16px;padding:12px;min-height:88px;font-size:14px;line-height:1.45}\n\n .footerBrand,.controlBar,.fsWrap{position:fixed;z-index:1100}\n .footerBrand{left:10px;bottom:86px;font-size:12px;color:#6c7c8e;background:rgba(255,255,255,.86);padding:6px 10px;border-radius:10px;border:1px solid var(--line)}\n .fsWrap{right:12px;bottom:90px}\n .fsBtn{background:var(--blue);color:#fff;padding:12px 16px}\n .controlBar{\n left:0;right:0;bottom:0;padding:10px 12px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);\n display:flex;justify-content:center;gap:12px\n }\n .controlBtn{padding:12px 20px;background:#fff;color:var(--ink);border:1px solid var(--line)}\n .controlBtn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}\n\n .hide{display:none !important}\n\n @media (max-width: 1100px){\n .app{grid-template-columns:1fr;gap:12px}\n .process{grid-template-columns:1fr}\n .statusBox{order:-1}\n .scene{min-height:330px}\n .steps{grid-template-columns:repeat(5, minmax(78px,1fr));overflow:auto;padding-bottom:2px}\n }\n @media (max-width: 640px){\n .titleBadge{font-size:16px;min-height:42px;padding:0 12px;max-width:78vw}\n .langTop button,.controlBtn,.fsBtn{font-size:16px}\n .panel{padding:12px;border-radius:20px}\n .grid2{grid-template-columns:1fr}\n .scene{min-height:290px;padding:10px}\n .bowl{width:200px;height:104px}\n .bag{width:190px;height:248px}\n .glass{width:168px;height:224px}\n .tube{width:86px;height:240px}\n .footerBrand{max-width:62vw;line-height:1.25}\n .controlBar{justify-content:space-between}\n .controlBtn{flex:1;padding:12px 14px}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"topbar\">\n <div class=\"titleBadge\"><span id=\"simTitle\">\ud83e\uddec Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y<\/span><\/div>\n <div class=\"langTop\"><button id=\"topLangBtn\">VN<\/button><\/div>\n <\/div>\n\n <main class=\"app\">\n <section class=\"panel\">\n <h2 id=\"leftTitle\">\ud83e\uddea D\u1ee5ng c\u1ee5 & kh\u00e1i ni\u1ec7m<\/h2>\n <div class=\"chips\">\n <div class=\"chip\" id=\"objChip\">M\u1ee5c ti\u00eau: t\u00e1ch DNA t\u1eeb d\u00e2u t\u00e2y<\/div>\n <\/div>\n <div class=\"grid2\" id=\"materials\"><\/div>\n <div style=\"height:10px\"><\/div>\n <div class=\"grid2\" id=\"terms\"><\/div>\n <\/section>\n\n <section class=\"panel lab\">\n <div class=\"stageHead\">\n <div class=\"chip\" id=\"head1\">D\u00e2u t\u00e2y c\u00f3 nhi\u1ec1u DNA n\u00ean d\u1ec5 quan s\u00e1t<\/div>\n <div class=\"chip\" id=\"head2\">Th\u1ef1c hi\u1ec7n \u0111\u00fang th\u1ee9 t\u1ef1 c\u00e1c b\u01b0\u1edbc<\/div>\n <\/div>\n <div class=\"bench\">\n <div class=\"steps\" id=\"steps\"><\/div>\n <div class=\"process\">\n <div class=\"scene\" id=\"scene\">\n <div class=\"labelFloat\" id=\"sceneLabel\"><\/div>\n <div class=\"hand\" id=\"sceneHand\">\ud83d\udc47<\/div>\n <\/div>\n <div class=\"statusBox\">\n <div>\n <div class=\"statusLabel\" id=\"statusTitle\">Ti\u1ebfn tr\u00ecnh<\/div>\n <div class=\"progress\"><div class=\"bar\" id=\"bar\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"statusLabel\" id=\"stepNameLabel\">B\u01b0\u1edbc hi\u1ec7n t\u1ea1i<\/div>\n <div style=\"font-weight:800;font-size:18px\" id=\"stepName\">Chu\u1ea9n b\u1ecb<\/div>\n <\/div>\n <div>\n <div class=\"statusLabel\" id=\"dnaTitle\">K\u1ebft qu\u1ea3 DNA<\/div>\n <div style=\"font-weight:800;font-size:18px\" id=\"dnaState\">Ch\u01b0a xu\u1ea5t hi\u1ec7n<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"panel\">\n <h2 id=\"rightTitle\">\ud83c\udfaf T\u01b0\u01a1ng t\u00e1c nhanh<\/h2>\n <div class=\"quiz\">\n <div class=\"small\" id=\"quizPrompt\">\u1ede b\u01b0\u1edbc \u0111ang ch\u1ecdn, th\u00e0nh ph\u1ea7n n\u00e0o l\u00e0 quan tr\u1ecdng nh\u1ea5t?<\/div>\n <div id=\"quizOptions\"><\/div>\n <div class=\"result\" id=\"resultBox\"><\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <div class=\"footerBrand\" id=\"brand\">\u0110\u01a1n v\u1ecb ph\u00e1t tri\u1ec3n: Li\u00ean minh Th\u00fac \u0111\u1ea9y gi\u00e1o d\u1ee5c STEM @sepa.org.vn<\/div>\n <div class=\"fsWrap\"><button class=\"fsBtn\" id=\"fsBtn\">Fullscreen<\/button><\/div>\n <div class=\"controlBar\">\n <button class=\"controlBtn\" id=\"resetBtn\">Reset<\/button>\n <button class=\"controlBtn primary\" id=\"bottomLangBtn\">Ng\u00f4n ng\u1eef: VN\/EN<\/button>\n <\/div>\n\n <script>\n const dict = {\n vi: {\n simTitle:'\ud83e\uddec Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y',\n leftTitle:'\ud83e\uddea D\u1ee5ng c\u1ee5 & kh\u00e1i ni\u1ec7m',\n rightTitle:'\ud83c\udfaf T\u01b0\u01a1ng t\u00e1c nhanh',\n objChip:'M\u1ee5c ti\u00eau: t\u00e1ch DNA t\u1eeb d\u00e2u t\u00e2y',\n head1:'D\u00e2u t\u00e2y c\u00f3 nhi\u1ec1u DNA n\u00ean d\u1ec5 quan s\u00e1t',\n head2:'Th\u1ef1c hi\u1ec7n \u0111\u00fang th\u1ee9 t\u1ef1 c\u00e1c b\u01b0\u1edbc',\n statusTitle:'Ti\u1ebfn tr\u00ecnh', stepNameLabel:'B\u01b0\u1edbc hi\u1ec7n t\u1ea1i', dnaTitle:'K\u1ebft qu\u1ea3 DNA',\n dnaNone:'Ch\u01b0a xu\u1ea5t hi\u1ec7n', dnaSome:'DNA b\u1eaft \u0111\u1ea7u t\u00e1ch', dnaDone:'C\u00f3 th\u1ec3 thu DNA m\u00e0u tr\u1eafng \u0111\u1ee5c',\n brand:'\u0110\u01a1n v\u1ecb ph\u00e1t tri\u1ec3n: Li\u00ean minh Th\u00fac \u0111\u1ea9y gi\u00e1o d\u1ee5c STEM @sepa.org.vn',\n fullscreen:'Fullscreen', reset:'Reset', bottomLang:'Ng\u00f4n ng\u1eef: VN\/EN', topLang:'VN',\n quizPrompt:'\u1ede b\u01b0\u1edbc \u0111ang ch\u1ecdn, th\u00e0nh ph\u1ea7n n\u00e0o l\u00e0 quan tr\u1ecdng nh\u1ea5t?',\n resultDefault:'Ch\u1ecdn m\u1ed9t \u0111\u00e1p \u00e1n. M\u00f4 ph\u1ecfng s\u1ebd gi\u1ea3i th\u00edch vai tr\u00f2 c\u1ee7a t\u1eebng ch\u1ea5t trong quy tr\u00ecnh t\u00e1ch chi\u1ebft DNA.',\n materials:[\n ['\ud83c\udf53 D\u00e2u t\u00e2y','3 qu\u1ea3'],['\ud83e\uddc2 Mu\u1ed1i \u0103n','1\/2 th\u00eca c\u00e0 ph\u00ea'],['\ud83e\uddf4 N\u01b0\u1edbc r\u1eeda ch\u00e9n','1 th\u00eca canh'],['\ud83d\udca7 N\u01b0\u1edbc','d\u00f9ng \u0111\u1ec3 pha dung d\u1ecbch'],['\ud83e\udd5b C\u1ed1c \/ b\u00e1t nh\u1ecf','\u0111\u1ec3 pha v\u00e0 l\u1ecdc'],['\ud83e\uddf5 V\u1ea3i l\u1ecdc \/ kh\u0103n m\u1ecfng','l\u1ecdc b\u00e3 qu\u1ea3'],['\ud83e\uddea \u1ed0ng nghi\u1ec7m \/ l\u1ecd nh\u1ecf','thu d\u1ecbch chi\u1ebft'],['\ud83e\udd76 C\u1ed3n isopropyl 70%','\u0111\u1ec3 l\u1ea1nh, t\u1ea1o k\u1ebft t\u1ee7a DNA']\n ],\n terms:[\n ['\ud83e\uddec DNA','Axit \u0111\u00eaoxiribonucleic'],['\ud83e\uddeb B\u1ed9 gen','To\u00e0n b\u1ed9 th\u00f4ng tin di truy\u1ec1n'],['\ud83d\udca5 Ly gi\u1ea3i t\u1ebf b\u00e0o','L\u00e0m v\u1ee1 m\u00e0ng t\u1ebf b\u00e0o \u0111\u1ec3 gi\u1ea3i ph\u00f3ng DNA'],['\u2744\ufe0f K\u1ebft t\u1ee7a','L\u00e0m DNA t\u00e1ch kh\u1ecfi dung d\u1ecbch']\n ],\n steps:['1. Nghi\u1ec1n d\u00e2u','2. Th\u00eam mu\u1ed1i + ch\u1ea5t t\u1ea9y r\u1eeda','3. L\u1ecdc d\u1ecbch','4. Th\u00eam c\u1ed3n l\u1ea1nh','5. Thu DNA'],\n stepTitles:['Nghi\u1ec1n d\u00e2u','Mu\u1ed1i + ch\u1ea5t t\u1ea9y r\u1eeda','L\u1ecdc d\u1ecbch','Th\u00eam c\u1ed3n l\u1ea1nh','Thu DNA'],\n sceneLabels:[\n 'B\u00f3p nh\u1eb9 t\u00fai \u0111\u1ec3 ph\u00e1 m\u00f4 qu\u1ea3 d\u00e2u.',\n 'Ch\u1ea5t t\u1ea9y r\u1eeda l\u00e0m ly gi\u1ea3i m\u00e0ng t\u1ebf b\u00e0o, mu\u1ed1i gi\u00fap DNA k\u1ebft \u0111\u00e1m.',\n 'L\u1ecdc b\u1ecf b\u00e3 qu\u1ea3 \u0111\u1ec3 thu d\u1ecbch chi\u1ebft.',\n 'R\u00f3t c\u1ed3n l\u1ea1nh nh\u1eb9 nh\u00e0ng \u0111\u1ec3 DNA k\u1ebft t\u1ee7a \u1edf l\u1edbp tr\u00ean.',\n 'D\u00f9ng que k\u00e9o s\u1ee3i DNA tr\u1eafng \u0111\u1ee5c ra kh\u1ecfi \u1ed1ng.'\n ],\n quiz:[\n {q:'B\u01b0\u1edbc n\u00e0y c\u1ea7n thao t\u00e1c n\u00e0o?', opts:['B\u00f3p v\u00e0 nghi\u1ec1n m\u00f4 d\u00e2u','\u0110un n\u00f3ng m\u1ea1nh','Th\u00eam c\u1ed3n ngay'], ok:0, exp:'\u0110\u00fang. Nghi\u1ec1n gi\u00fap ph\u00e1 v\u1ee1 m\u00f4, t\u0103ng di\u1ec7n t\u00edch ti\u1ebfp x\u00fac \u0111\u1ec3 gi\u1ea3i ph\u00f3ng t\u1ebf b\u00e0o.'},\n {q:'Ch\u1ea5t n\u00e0o gi\u00fap ph\u00e1 m\u00e0ng t\u1ebf b\u00e0o?', opts:['Mu\u1ed1i \u0103n','Ch\u1ea5t t\u1ea9y r\u1eeda','C\u1ed3n l\u1ea1nh'], ok:1, exp:'\u0110\u00fang. Ch\u1ea5t t\u1ea9y r\u1eeda l\u00e0m tan l\u1edbp m\u00e0ng lipid c\u1ee7a t\u1ebf b\u00e0o, gi\u1ea3i ph\u00f3ng DNA v\u00e0o dung d\u1ecbch.'},\n {q:'M\u1ee5c \u0111\u00edch c\u1ee7a b\u01b0\u1edbc l\u1ecdc l\u00e0 g\u00ec?', opts:['Lo\u1ea1i b\u00e3 qu\u1ea3','L\u00e0m DNA \u0111\u1ed5i m\u00e0u','T\u1ea1o th\u00eam t\u1ebf b\u00e0o'], ok:0, exp:'\u0110\u00fang. L\u1ecdc gi\u00fap t\u00e1ch ph\u1ea7n r\u1eafn, gi\u1eef l\u1ea1i d\u1ecbch chi\u1ebft ch\u1ee9a DNA h\u00f2a tan.'},\n {q:'V\u00ec sao th\u00eam c\u1ed3n l\u1ea1nh?', opts:['L\u00e0m DNA k\u1ebft t\u1ee7a','L\u00e0m DNA bi\u1ebfn m\u1ea5t','T\u1ea1o v\u1ecb ng\u1ecdt'], ok:0, exp:'\u0110\u00fang. DNA \u00edt tan trong c\u1ed3n l\u1ea1nh n\u00ean s\u1ebd k\u1ebft t\u1ee7a th\u00e0nh c\u00e1c s\u1ee3i tr\u1eafng \u0111\u1ee5c d\u1ec5 nh\u00ecn th\u1ea5y.'},\n {q:'Quan s\u00e1t cu\u1ed1i c\u00f9ng h\u1ee3p l\u00ed nh\u1ea5t l\u00e0 g\u00ec?', opts:['DNA th\u00e0nh s\u1ee3i tr\u1eafng \u0111\u1ee5c','DNA ph\u00e1t s\u00e1ng xanh','DNA n\u1ed5 bong b\u00f3ng'], ok:0, exp:'\u0110\u00fang. DNA th\u01b0\u1eddng xu\u1ea5t hi\u1ec7n nh\u01b0 c\u00e1c s\u1ee3i ho\u1eb7c \u0111\u00e1m tr\u1eafng \u0111\u1ee5c \u1edf l\u1edbp c\u1ed3n.'}\n ]\n },\n en: {\n simTitle:'\ud83e\uddec Strawberry DNA Extraction Simulation',\n leftTitle:'\ud83e\uddea Materials & concepts',\n rightTitle:'\ud83c\udfaf Quick interaction',\n objChip:'Objective: extract DNA from strawberries',\n head1:'Strawberries contain abundant DNA, so it is easier to observe',\n head2:'Follow the correct sequence of steps',\n statusTitle:'Progress', stepNameLabel:'Current step', dnaTitle:'DNA result',\n dnaNone:'Not visible yet', dnaSome:'DNA begins to separate', dnaDone:'Cloudy white DNA can be collected',\n brand:'Developed by: STEM Education Promotion Alliance @sepa.org.vn',\n fullscreen:'Fullscreen', reset:'Reset', bottomLang:'Language: VN\/EN', topLang:'EN',\n quizPrompt:'In the selected step, which component or action is most important?',\n resultDefault:'Choose an answer. The simulation explains the role of each substance in the DNA extraction process.',\n materials:[\n ['\ud83c\udf53 Strawberries','3 fruits'],['\ud83e\uddc2 Salt','1\/2 tsp'],['\ud83e\uddf4 Dishwashing liquid','1 tbsp'],['\ud83d\udca7 Water','for extraction solution'],['\ud83e\udd5b Cup \/ small bowl','for mixing and filtering'],['\ud83e\uddf5 Cheesecloth \/ thin cloth','to filter pulp'],['\ud83e\uddea Test tube \/ small jar','to collect extract'],['\ud83e\udd76 Cold 70% isopropyl alcohol','for DNA precipitation']\n ],\n terms:[\n ['\ud83e\uddec DNA','Deoxyribonucleic acid'],['\ud83e\uddeb Genome','Entire genetic information set'],['\ud83d\udca5 Cell lysis','Breaking cell membranes to release DNA'],['\u2744\ufe0f Precipitation','DNA comes out of solution']\n ],\n steps:['1. Mash strawberries','2. Add salt + detergent','3. Filter extract','4. Add cold alcohol','5. Spool DNA'],\n stepTitles:['Mash strawberries','Salt + detergent','Filter extract','Add cold alcohol','Collect DNA'],\n sceneLabels:[\n 'Gently mash the fruit tissue inside the bag.',\n 'Detergent lyses membranes, and salt helps DNA clump together.',\n 'Filter out the pulp to collect the extract.',\n 'Carefully add cold alcohol so DNA precipitates in the upper layer.',\n 'Use a stick to spool the cloudy white DNA from the tube.'\n ],\n quiz:[\n {q:'What should happen in this step?', opts:['Mash the strawberry tissue','Boil it strongly','Add alcohol immediately'], ok:0, exp:'Correct. Mashing breaks up the tissue and increases contact so cells can be released.'},\n {q:'Which ingredient helps break cell membranes?', opts:['Salt','Detergent','Cold alcohol'], ok:1, exp:'Correct. Detergent dissolves the lipid membrane and releases DNA into solution.'},\n {q:'What is the purpose of filtration?', opts:['Remove pulp','Change DNA color','Create more cells'], ok:0, exp:'Correct. Filtration separates solid fruit pieces from the liquid extract containing DNA.'},\n {q:'Why add cold alcohol?', opts:['To precipitate DNA','To erase DNA','To make it sweeter'], ok:0, exp:'Correct. DNA is less soluble in cold alcohol, so it precipitates as cloudy strands.'},\n {q:'What is the expected final observation?', opts:['Cloudy white DNA strands','Bright blue glowing DNA','DNA bubbles explode'], ok:0, exp:'Correct. DNA usually appears as cloudy white strands or clumps in the alcohol layer.'}\n ]\n }\n };\n\n const scene = document.getElementById('scene');\n const sceneLabel = document.getElementById('sceneLabel');\n const sceneHand = document.getElementById('sceneHand');\n const materials = document.getElementById('materials');\n const terms = document.getElementById('terms');\n const stepsWrap = document.getElementById('steps');\n const quizOptions = document.getElementById('quizOptions');\n const resultBox = document.getElementById('resultBox');\n const bar = document.getElementById('bar');\n const stepName = document.getElementById('stepName');\n const dnaState = document.getElementById('dnaState');\n\n let lang = 'vi';\n let currentStep = 0;\n\n function el(id){ return document.getElementById(id); }\n\n function t(key){ return dict[lang][key]; }\n\n function applyText(){\n ['simTitle','leftTitle','rightTitle','objChip','head1','head2','statusTitle','stepNameLabel','dnaTitle','brand'].forEach(id=>el(id).textContent=t(id));\n el('fsBtn').textContent=t('fullscreen');\n el('resetBtn').textContent=t('reset');\n el('bottomLangBtn').textContent=t('bottomLang');\n el('topLangBtn').textContent=t('topLang');\n el('quizPrompt').textContent=dict[lang].quiz[currentStep].q || t('quizPrompt');\n renderLists();\n renderSteps();\n updateStep();\n }\n\n function renderLists(){\n materials.innerHTML='';\n dict[lang].materials.forEach(([a,b])=>{\n const d=document.createElement('div'); d.className='item';\n d.innerHTML=`<div class=\"ico\">${a.split(' ')[0]}<\/div><div><b>${a.replace(\/^\\S+\\s\/, '')}<\/b><span>${b}<\/span><\/div>`;\n materials.appendChild(d);\n });\n terms.innerHTML='';\n dict[lang].terms.forEach(([a,b])=>{\n const d=document.createElement('div'); d.className='item';\n d.innerHTML=`<div class=\"ico\">${a.split(' ')[0]}<\/div><div><b>${a.replace(\/^\\S+\\s\/, '')}<\/b><span>${b}<\/span><\/div>`;\n terms.appendChild(d);\n });\n }\n\n function renderSteps(){\n stepsWrap.innerHTML='';\n dict[lang].steps.forEach((s,i)=>{\n const b=document.createElement('button');\n b.className='stepBtn'+(i===currentStep?' active':'');\n b.textContent=s;\n b.onclick=()=>{currentStep=i; updateStep();};\n stepsWrap.appendChild(b);\n });\n }\n\n function buildScene(step){\n scene.innerHTML='';\n scene.appendChild(sceneLabel);\n scene.appendChild(sceneHand);\n sceneLabel.textContent=dict[lang].sceneLabels[step];\n sceneHand.style.display = (step===0 || step===4) ? 'block' : 'none';\n\n if(step===0){\n const bag=document.createElement('div'); bag.className='bag';\n bag.innerHTML='<div class=\"bagTop\"><\/div><div class=\"mash\" style=\"height:72px\"><\/div>';\n const mash=bag.querySelector('.mash');\n let level=72;\n const grow=()=>{level=Math.min(150, level+12); mash.style.height=level+'px'; if(level>=132) setTimeout(()=>{currentStep=1; updateStep();},300);};\n bag.addEventListener('click',grow);\n bag.addEventListener('touchstart',grow,{passive:true});\n scene.appendChild(bag);\n }\n if(step===1){\n const glass=document.createElement('div'); glass.className='glass';\n glass.innerHTML='<div class=\"liquid soap\" style=\"height:126px\"><\/div><div class=\"foam\"><\/div>';\n const bowl=document.createElement('div'); bowl.className='bowl';\n bowl.innerHTML='<div class=\"berry s1\"><\/div><div class=\"berry s2\"><\/div><div class=\"berry s3\"><\/div>';\n scene.appendChild(glass); scene.appendChild(bowl);\n const label2=document.createElement('div'); label2.className='chip'; label2.style.position='absolute'; label2.style.bottom='18px'; label2.style.left='18px'; label2.style.background='rgba(255,255,255,.9)';\n label2.textContent = lang==='vi' ? 'Ch\u1ea1m \u0111\u1ec3 th\u00eam mu\u1ed1i + ch\u1ea5t t\u1ea9y r\u1eeda' : 'Tap to add salt + detergent';\n scene.appendChild(label2);\n const add=()=>{ glass.querySelector('.foam').style.display='block'; label2.textContent = lang==='vi' ? '\u0110\u00e3 ly gi\u1ea3i t\u1ebf b\u00e0o' : 'Cell lysis started'; setTimeout(()=>{currentStep=2; updateStep();},400); };\n glass.addEventListener('click',add,{once:true}); glass.addEventListener('touchstart',add,{once:true,passive:true});\n }\n if(step===2){\n const funnel=document.createElement('div'); funnel.className='funnel';\n const glass=document.createElement('div'); glass.className='glass';\n glass.innerHTML='<div class=\"liquid soap\" style=\"height:136px\"><\/div>';\n const swirl=document.createElement('div'); swirl.className='swirl'; swirl.textContent='\ud83e\uddf5';\n scene.appendChild(funnel); scene.appendChild(glass); scene.appendChild(swirl);\n const tip=document.createElement('div'); tip.className='chip'; tip.style.position='absolute'; tip.style.bottom='18px'; tip.style.left='18px'; tip.style.background='rgba(255,255,255,.9)';\n tip.textContent = lang==='vi' ? 'Ch\u1ea1m ph\u1ec5u \u0111\u1ec3 l\u1ecdc' : 'Tap the funnel to filter';\n scene.appendChild(tip);\n const filter=()=>{swirl.style.display='block'; tip.textContent = lang==='vi' ? 'B\u00e3 qu\u1ea3 b\u1ecb gi\u1eef l\u1ea1i, thu d\u1ecbch l\u1ecdc' : 'Pulp removed, filtrate collected'; setTimeout(()=>{currentStep=3; updateStep();},450)};\n funnel.addEventListener('click',filter,{once:true}); funnel.addEventListener('touchstart',filter,{once:true,passive:true});\n }\n if(step===3){\n const tube=document.createElement('div'); tube.className='tube';\n tube.innerHTML='<div class=\"layerBase\"><\/div><div class=\"layerTop\" style=\"height:0\"><\/div><div class=\"dnaStrand\"><\/div>';\n scene.appendChild(tube);\n const tip=document.createElement('div'); tip.className='chip'; tip.style.position='absolute'; tip.style.bottom='18px'; tip.style.left='18px'; tip.style.background='rgba(255,255,255,.9)';\n tip.textContent = lang==='vi' ? 'Ch\u1ea1m \u1ed1ng \u0111\u1ec3 th\u00eam c\u1ed3n l\u1ea1nh' : 'Tap tube to add cold alcohol';\n scene.appendChild(tip);\n const addAlcohol=()=>{\n tube.querySelector('.layerTop').style.height='94px';\n tip.textContent = lang==='vi' ? 'DNA b\u1eaft \u0111\u1ea7u k\u1ebft t\u1ee7a \u1edf l\u1edbp tr\u00ean' : 'DNA begins to precipitate in the upper layer';\n setTimeout(()=>{currentStep=4; updateStep();},450);\n };\n tube.addEventListener('click',addAlcohol,{once:true}); tube.addEventListener('touchstart',addAlcohol,{once:true,passive:true});\n }\n if(step===4){\n const tube=document.createElement('div'); tube.className='tube';\n tube.innerHTML='<div class=\"layerBase\"><\/div><div class=\"layerTop\"><\/div><div class=\"dnaStrand show\"><\/div>';\n scene.appendChild(tube);\n const tip=document.createElement('div'); tip.className='chip'; tip.style.position='absolute'; tip.style.bottom='18px'; tip.style.left='18px'; tip.style.background='rgba(255,255,255,.9)';\n tip.textContent = lang==='vi' ? 'Ch\u1ea1m \u0111\u1ec3 thu DNA b\u1eb1ng que' : 'Tap to spool DNA with a stick';\n scene.appendChild(tip);\n const collect=()=>{\n const dna=tube.querySelector('.dnaStrand');\n dna.style.transform='translateX(-50%) translateY(-24px)';\n tip.textContent = lang==='vi' ? 'Thu \u0111\u01b0\u1ee3c DNA m\u00e0u tr\u1eafng \u0111\u1ee5c' : 'Cloudy white DNA collected';\n };\n tube.addEventListener('click',collect); tube.addEventListener('touchstart',collect,{passive:true});\n }\n }\n\n function renderQuiz(){\n const q = dict[lang].quiz[currentStep];\n el('quizPrompt').textContent = q.q;\n quizOptions.innerHTML='';\n resultBox.textContent = t('resultDefault');\n q.opts.forEach((opt,i)=>{\n const b=document.createElement('button');\n b.className='quizBtn'; b.textContent=opt;\n b.onclick=()=>{\n [...quizOptions.children].forEach(x=>x.className='quizBtn');\n if(i===q.ok){ b.classList.add('correct'); }\n else { b.classList.add('wrong'); }\n resultBox.textContent = q.exp;\n };\n quizOptions.appendChild(b);\n });\n }\n\n function updateStep(){\n renderSteps();\n buildScene(currentStep);\n renderQuiz();\n stepName.textContent = dict[lang].stepTitles[currentStep];\n bar.style.width = ((currentStep+1)\/5*100)+'%';\n dnaState.textContent = currentStep<3 ? t('dnaNone') : currentStep===3 ? t('dnaSome') : t('dnaDone');\n }\n\n function resetAll(){ currentStep=0; applyText(); }\n function toggleLang(){ lang = lang==='vi' ? 'en' : 'vi'; applyText(); }\n\n el('resetBtn').onclick=resetAll;\n el('bottomLangBtn').onclick=toggleLang;\n el('topLangBtn').onclick=toggleLang;\n el('fsBtn').onclick=()=>{\n const doc=document.documentElement;\n if(!document.fullscreenElement){ doc.requestFullscreen?.(); }\n else { document.exitFullscreen?.(); }\n };\n\n applyText();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y M\u1ee5c ti\u00eau: Thi\u1ebft k\u1ebf […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[18],"tags":[],"class_list":["post-229","post","type-post","status-publish","format-standard","hentry","category-sinh-hoc"],"yoast_head":"\n<title>Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com\" \/>\n<meta property=\"og:description\" content=\"M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y M\u1ee5c ti\u00eau: Thi\u1ebft k\u1ebf […]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\" \/>\n<meta property=\"og:site_name\" content=\"davilearn.com\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-29T17:22:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-29T17:33:15+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515\"},\"headline\":\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA\",\"datePublished\":\"2026-03-29T17:22:44+00:00\",\"dateModified\":\"2026-03-29T17:33:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\"},\"wordCount\":672,\"commentCount\":0,\"articleSection\":[\"Sinh h\u1ecdc\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\",\"url\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\",\"name\":\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com\",\"isPartOf\":{\"@id\":\"https:\/\/davilearn.com\/#website\"},\"datePublished\":\"2026-03-29T17:22:44+00:00\",\"dateModified\":\"2026-03-29T17:33:15+00:00\",\"author\":{\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515\"},\"breadcrumb\":{\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/davilearn.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/davilearn.com\/#website\",\"url\":\"https:\/\/davilearn.com\/\",\"name\":\"davilearn.com\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/davilearn.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/davilearn.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/davilearn.com\"],\"url\":\"https:\/\/davilearn.com\/index.php\/author\/admin\/\"}]}<\/script>\n","yoast_head_json":{"title":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com","og_description":"M\u00f4 ph\u1ecfng STEM – T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y T\u00e1ch chi\u1ebft DNA t\u1eeb d\u00e2u t\u00e2y M\u1ee5c ti\u00eau: Thi\u1ebft k\u1ebf […]","og_url":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/","og_site_name":"davilearn.com","article_published_time":"2026-03-29T17:22:44+00:00","article_modified_time":"2026-03-29T17:33:15+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#article","isPartOf":{"@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/"},"author":{"name":"admin","@id":"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515"},"headline":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA","datePublished":"2026-03-29T17:22:44+00:00","dateModified":"2026-03-29T17:33:15+00:00","mainEntityOfPage":{"@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/"},"wordCount":672,"commentCount":0,"articleSection":["Sinh h\u1ecdc"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/","url":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/","name":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA - davilearn.com","isPartOf":{"@id":"https:\/\/davilearn.com\/#website"},"datePublished":"2026-03-29T17:22:44+00:00","dateModified":"2026-03-29T17:33:15+00:00","author":{"@id":"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515"},"breadcrumb":{"@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/davilearn.com\/index.php\/2026\/03\/29\/thi-nghiem-tach-chiet-dna\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/davilearn.com\/"},{"@type":"ListItem","position":2,"name":"Th\u00ed nghi\u1ec7m t\u00e1ch chi\u1ebft DNA"}]},{"@type":"WebSite","@id":"https:\/\/davilearn.com\/#website","url":"https:\/\/davilearn.com\/","name":"davilearn.com","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/davilearn.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/davilearn.com\/#\/schema\/person\/27b33a809f762e36a06b4f219df33515","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/davilearn.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c4bc15e96abe1e7174b8b1bea5a8373d7ec7f57857bfcd37f475b711a4b86f0?s=96&d=mm&r=g","caption":"admin"},"sameAs":["http:\/\/davilearn.com"],"url":"https:\/\/davilearn.com\/index.php\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":2,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":232,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/posts\/229\/revisions\/232"}],"wp:attachment":[{"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davilearn.com\/index.php\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}