{"id":17542,"date":"2026-02-24T11:50:10","date_gmt":"2026-02-24T11:50:10","guid":{"rendered":"https:\/\/smartedujo.com\/?page_id=17542"},"modified":"2026-03-25T10:11:59","modified_gmt":"2026-03-25T07:11:59","slug":"%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d8%aa%d8%b9%d8%b1%d9%8a%d9%81-%d8%a7%d9%84%d8%b7%d8%a7%d9%82%d8%a9-%d9%81%d9%8a-%d8%a7%d9%84%d8%aa%d9%81%d8%a7%d8%b9%d9%84%d8%a7%d8%aa","status":"publish","type":"page","link":"https:\/\/smartedujo.com\/ar\/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d8%aa%d8%b9%d8%b1%d9%8a%d9%81-%d8%a7%d9%84%d8%b7%d8%a7%d9%82%d8%a9-%d9%81%d9%8a-%d8%a7%d9%84%d8%aa%d9%81%d8%a7%d8%b9%d9%84%d8%a7%d8%aa\/","title":{"rendered":"\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0637\u0627\u0642\u0629 \u0641\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629"},"content":{"rendered":"\n
\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0637\u0627\u0642\u0629 \u0641\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <!-- Font Awesome \u0644\u0644\u0631\u0645\u0648\u0632 -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n \r\n \/* \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 *\/\r\n .type-switch {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n .type-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.7rem 1.5rem;\r\n border-radius: 2rem;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n border: none;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n background: rgba(255, 255, 255, 0.05);\r\n color: #94a3b8;\r\n border: 1px solid transparent;\r\n }\r\n .type-btn i {\r\n font-size: 1.2rem;\r\n }\r\n .type-btn.active-exo {\r\n background: #dc2626;\r\n color: white;\r\n box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);\r\n }\r\n .type-btn.active-endo {\r\n background: #2563eb;\r\n color: white;\r\n box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);\r\n }\r\n .beaker-container {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 1.5rem;\r\n border: 1px solid rgba(255,255,255,0.05);\r\n height: 260px;\r\n position: relative;\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: center;\r\n padding-bottom: 1rem;\r\n overflow: hidden;\r\n }\r\n .beaker {\r\n position: relative;\r\n width: 130px;\r\n height: 170px;\r\n border-bottom: 5px solid rgba(255,255,255,0.2);\r\n border-left: 2px solid rgba(255,255,255,0.2);\r\n border-right: 2px solid rgba(255,255,255,0.2);\r\n border-radius: 0 0 30px 30px;\r\n background: rgba(255, 255, 255, 0.03);\r\n backdrop-filter: blur(4px);\r\n overflow: hidden;\r\n z-index: 5;\r\n }\r\n .liquid {\r\n position: absolute;\r\n bottom: 0;\r\n width: 100%;\r\n height: 70%;\r\n transition: background-color 0.1s linear, box-shadow 0.2s;\r\n opacity: 0.8;\r\n }\r\n .bubbles {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n }\r\n .bubble {\r\n position: absolute;\r\n bottom: 0;\r\n background: rgba(255,255,255,0.4);\r\n border-radius: 50%;\r\n animation: bubbleUp 1.2s infinite ease-in;\r\n }\r\n @keyframes bubbleUp {\r\n 0% { transform: translateY(0); opacity: 0.6; }\r\n 100% { transform: translateY(-80px); opacity: 0; }\r\n }\r\n .thermometer {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n z-index: 20;\r\n }\r\n .therm-icon {\r\n font-size: 3.2rem;\r\n filter: drop-shadow(0 4px 6px black);\r\n }\r\n .temp-value {\r\n background: rgba(0,0,0,0.6);\r\n padding: 0.25rem 0.6rem;\r\n border-radius: 1rem;\r\n font-size: 0.8rem;\r\n font-family: monospace;\r\n color: white;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n margin-top: 0.2rem;\r\n direction: ltr;\r\n }\r\n .environment-glow {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n }\r\n .glow-effect {\r\n width: 180px;\r\n height: 180px;\r\n border-radius: 50%;\r\n filter: blur(40px);\r\n animation: pulseGlow 2s infinite;\r\n }\r\n .heat-label {\r\n position: absolute;\r\n top: 30px;\r\n font-weight: bold;\r\n font-size: 0.8rem;\r\n background: rgba(0,0,0,0.4);\r\n padding: 0.2rem 0.8rem;\r\n border-radius: 20px;\r\n backdrop-filter: blur(4px);\r\n }\r\n @keyframes pulseGlow {\r\n 0% { opacity: 0.3; transform: scale(1); }\r\n 50% { opacity: 0.8; transform: scale(1.1); }\r\n 100% { opacity: 0.3; transform: scale(1); }\r\n }\r\n .graph-container {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 1.5rem;\r\n border: 1px solid rgba(255,255,255,0.05);\r\n padding: 1rem;\r\n height: 260px;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .graph-title {\r\n color: #94a3b8;\r\n font-size: 0.8rem;\r\n text-align: right;\r\n margin-bottom: 0.5rem;\r\n }\r\n .graph-wrapper {\r\n flex: 1;\r\n position: relative;\r\n border-right: 1px solid #475569;\r\n border-bottom: 1px solid #475569;\r\n margin-right: 1.5rem;\r\n margin-bottom: 1.2rem;\r\n }\r\n .y-axis-label {\r\n position: absolute;\r\n right: -1.8rem;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(-90deg);\r\n color: #64748b;\r\n font-size: 0.7rem;\r\n white-space: nowrap;\r\n }\r\n .x-axis-label {\r\n position: absolute;\r\n bottom: -1.5rem;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: #64748b;\r\n font-size: 0.7rem;\r\n }\r\n .graph-svg {\r\n width: 100%;\r\n height: 100%;\r\n overflow: visible;\r\n }\r\n .action-btn {\r\n display: block;\r\n margin: 2rem auto 0;\r\n padding: 0.9rem 2.5rem;\r\n border-radius: 40px;\r\n border: none;\r\n font-weight: bold;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.4);\r\n background: #16a34a;\r\n color: white;\r\n }\r\n .action-btn.reset {\r\n background: #334155;\r\n }\r\n .action-btn:hover {\r\n transform: translateY(-3px);\r\n filter: brightness(1.1);\r\n }\r\n .ltr {\r\n direction: ltr;\r\n }\r\n .simulation-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 2rem;\r\n margin-bottom: 1rem;\r\n }\r\n @media (max-width: 700px) {\r\n .simulation-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <!-- \u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629 -->\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0637\u0627\u0642\u0629 \u0641\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u0639\u0627\u0634\u0631<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- \u0645\u0634\u063a\u0644 \u0627\u0644\u0635\u0648\u062a -->\r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/energyInReactions.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/energyInReactions.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a -->\r\n <div class=\"space-y-6 text-right\">\r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n <h1 class=\"text-2xl l:text-3xl font-bold text-purple-300 mb-4 border-b border-purple-500\/30 pb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0637\u0627\u0642\u0629 \u0641\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h1>\r\n\r\n <!-- Main Idea -->\r\n <section class=\"bg-slate-800\/50 p-4 sm:p-6 rounded-2xl border border-white\/5 shadow-sm\">\r\n <h2 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\r\n <span class=\"w-2 h-6 bg-purple-500 rounded-full\"><\/span>\r\n \u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629\r\n <\/h2>\r\n <p class=\"text-slate-300 text-l leading-relaxed\">\r\n \u064a\u0631\u0627\u0641\u0642 \u0627\u0644\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0648\u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u062d\u062f\u062b \u0644\u0644\u0645\u0648\u0627\u062f \u0627\u0645\u062a\u0635\u0627\u0635 \u0644\u0644\u0637\u0627\u0642\u0629 \u0623\u0648 \u0627\u0646\u0628\u0639\u0627\u062b \u0644\u0647\u0627. \u0645\u0635\u062f\u0631 \u0647\u0630\u0647 \u0627\u0644\u0637\u0627\u0642\u0629 \u064a\u0639\u0648\u062f \u0625\u0644\u0649 \u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a \u0644\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0645\u062a\u0641\u0627\u0639\u0644\u0629 \u0648\u0627\u0644\u0646\u0627\u062a\u062c\u0629.\r\n <\/p>\r\n <\/section>\r\n\r\n <!-- Enthalpy Concept -->\r\n <section class=\"bg-slate-800\/50 p-4 sm:p-6 rounded-2xl border border-white\/5 shadow-sm\">\r\n <h2 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\r\n <span class=\"w-2 h-6 bg-blue-500 rounded-full\"><\/span>\r\n \u0661. \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a (Enthalpy - H)\r\n <\/h2>\r\n \r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border-r-4 border-indigo-500 mb-6\">\r\n <strong class=\"text-indigo-300 block mb-1\">\u0627\u0644\u062a\u0639\u0631\u064a\u0641:<\/strong>\r\n <p class=\"text-l text-slate-300\">\u0647\u0648 \u0643\u0645\u064a\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062e\u0632\u0648\u0646\u0629 \u0641\u064a \u0645\u0648\u0644 \u0648\u0627\u062d\u062f \u0645\u0646 \u0627\u0644\u0645\u0627\u062f\u0629. \u0644\u0627 \u064a\u0645\u0643\u0646 \u0642\u064a\u0627\u0633 \u0642\u064a\u0645\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629\u060c \u0648\u0644\u0643\u0646 \u064a\u0645\u0643\u0646 \u0642\u064a\u0627\u0633 <strong>\u0627\u0644\u062a\u063a\u064a\u0631<\/strong> \u0641\u064a\u0647.<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center mb-6\">\r\n <p class=\"text-slate-400 text-l mb-2\">\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a (\u0394H)<\/p>\r\n <div class=\"font-mono text-yellow-300 text-lg ltr dir-ltr\">\r\n \u0394H = H(products) - H(reactants)\r\n <\/div>\r\n <p class=\"text-slate-500 text-l mt-2\">\u0627\u0644\u0648\u062d\u062f\u0629: kJ \u0623\u0648 kJ\/mol<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Exothermic vs Endothermic -->\r\n <section class=\"bg-slate-800\/50 p-4 sm:p-6 rounded-2xl border border-white\/5 shadow-sm\">\r\n <h2 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\r\n <span class=\"w-2 h-6 bg-green-500 rounded-full\"><\/span>\r\n \u0662. \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u062d\u0633\u0628 \u062a\u063a\u064a\u0631 \u0627\u0644\u0637\u0627\u0642\u0629\r\n <\/h2>\r\n\r\n <p class=\"text-slate-300 text-l mb-6\">\r\n \u062a\u0642\u0633\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u062a\u062c\u0627\u0647 \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0646\u0638\u0627\u0645 (\u0627\u0644\u062a\u0641\u0627\u0639\u0644) \u0648\u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0645\u062d\u064a\u0637 \u0625\u0644\u0649 \u0646\u0648\u0639\u064a\u0646 \u0631\u0626\u064a\u0633\u064a\u064a\u0646:\r\n <\/p>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\r\n <!-- Exothermic -->\r\n <div class=\"bg-slate-900\/50 p-5 rounded-xl border-t-4 border-red-500 shadow-lg relative overflow-hidden group hover:bg-slate-900 transition-colors\">\r\n <div class=\"absolute top-0 right-0 w-20 h-20 bg-red-500\/10 rounded-bl-full -mr-10 -mt-10 transition-transform group-hover:scale-150\"><\/div>\r\n \r\n <h3 class=\"font-bold text-red-400 mb-3 flex items-center gap-2 text-lg\">\r\n \u062a\u0641\u0627\u0639\u0644 \u0637\u0627\u0631\u062f \u0644\u0644\u062d\u0631\u0627\u0631\u0629 (Exothermic)\r\n <\/h3>\r\n \r\n <p class=\"text-l text-slate-300 mb-4 leading-relaxed\">\r\n \u0647\u0648 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0630\u064a <strong>\u064a\u0637\u0644\u0642<\/strong> \u0637\u0627\u0642\u0629 \u062d\u0631\u0627\u0631\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0645\u062d\u064a\u0637\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0625\u0644\u0649 <strong>\u0627\u0631\u062a\u0641\u0627\u0639<\/strong> \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0648\u0633\u0637.\r\n <\/p>\r\n\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/5 mb-4\">\r\n <p class=\"text-l text-slate-400 mb-1\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <div class=\"font-mono ltr text-center text-red-300 text-l\">\r\n Reactants \u2192 Products + <span class=\"text-yellow-400 font-bold\">Energy<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <ul class=\"space-y-2 text-l text-slate-300\">\r\n <li class=\"flex items-center gap-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-red-500\"><\/span>\r\n <span>\u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a \u0644\u0644\u0645\u062a\u0641\u0627\u0639\u0644\u0627\u062a (H) > \u0627\u0644\u0646\u0648\u0627\u062a\u062c.<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-red-500\"><\/span>\r\n <span>\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a (\u0394H) <strong>\u0633\u0627\u0644\u0628\u0629<\/strong>.<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-red-500\"><\/span>\r\n <span>\u062a\u0646\u062a\u0642\u0644 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0645\u0646 \u0627\u0644\u0646\u0638\u0627\u0645 \u2190 \u0627\u0644\u0645\u062d\u064a\u0637.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Endothermic -->\r\n <div class=\"bg-slate-900\/50 p-5 rounded-xl border-t-4 border-blue-500 shadow-lg relative overflow-hidden group hover:bg-slate-900 transition-colors\">\r\n <div class=\"absolute top-0 right-0 w-20 h-20 bg-blue-500\/10 rounded-bl-full -mr-10 -mt-10 transition-transform group-hover:scale-150\"><\/div>\r\n\r\n <h3 class=\"font-bold text-blue-400 mb-3 flex items-center gap-2 text-lg\">\r\n \u062a\u0641\u0627\u0639\u0644 \u0645\u0627\u0635 \u0644\u0644\u062d\u0631\u0627\u0631\u0629 (Endothermic)\r\n <\/h3>\r\n \r\n <p class=\"text-l text-slate-300 mb-4 leading-relaxed\">\r\n \u0647\u0648 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0630\u064a <strong>\u064a\u0645\u062a\u0635<\/strong> \u0637\u0627\u0642\u0629 \u062d\u0631\u0627\u0631\u064a\u0629 \u0645\u0646 \u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0645\u062d\u064a\u0637\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0625\u0644\u0649 <strong>\u0627\u0646\u062e\u0641\u0627\u0636<\/strong> \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0648\u0633\u0637.\r\n <\/p>\r\n\r\n <div class=\"bg-black\/30 p-3 rounded-lg border border-white\/5 mb-4\">\r\n <p class=\"text-l text-slate-400 mb-1\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <div class=\"font-mono ltr text-center text-blue-300 text-l\">\r\n Reactants + <span class=\"text-yellow-400 font-bold\">Energy<\/span> \u2192 Products\r\n <\/div>\r\n <\/div>\r\n\r\n <ul class=\"space-y-2 text-l text-slate-300\">\r\n <li class=\"flex items-center gap-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-blue-500\"><\/span>\r\n <span>\u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a \u0644\u0644\u0645\u062a\u0641\u0627\u0639\u0644\u0627\u062a (H) < \u0627\u0644\u0646\u0648\u0627\u062a\u062c.<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-blue-500\"><\/span>\r\n <span>\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a (\u0394H) <strong>\u0645\u0648\u062c\u0628\u0629<\/strong>.<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-blue-500\"><\/span>\r\n <span>\u062a\u0646\u062a\u0642\u0644 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0645\u0646 \u0627\u0644\u0645\u062d\u064a\u0637 \u2190 \u0627\u0644\u0646\u0638\u0627\u0645.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 (\u0645\u062d\u062f\u062b\u0629) -->\r\n <div class=\"my-8 bg-slate-900\/80 p-6 rounded-2xl border border-purple-500\/30 text-center shadow-xl backdrop-blur-sm\">\r\n <h3 class=\"text-purple-300 font-bold mb-4 text-lg border-b border-white\/10 pb-2\">\u26a1 \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0637\u0627\u0642\u0629 \u0641\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a<\/h3>\r\n\r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0646\u0648\u0639 -->\r\n <div class=\"type-switch\">\r\n <button id=\"btnExo\" class=\"type-btn active-exo\"><i class=\"fas fa-fire\"><\/i> \u0637\u0627\u0631\u062f \u0644\u0644\u062d\u0631\u0627\u0631\u0629<\/button>\r\n <button id=\"btnEndo\" class=\"type-btn\"><i class=\"far fa-snowflake\"><\/i> \u0645\u0627\u0635 \u0644\u0644\u062d\u0631\u0627\u0631\u0629<\/button>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0644\u0645\u062d\u0627\u0643\u0627\u0629 -->\r\n <div class=\"simulation-grid\">\r\n <!-- \u0627\u0644\u0643\u0623\u0633 \u0648\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 -->\r\n <div class=\"beaker-container\" id=\"beakerContainer\">\r\n <div class=\"beaker\">\r\n <div id=\"liquid\" class=\"liquid\" style=\"background: #3b82f6;\"><\/div>\r\n <div id=\"bubblesArea\" class=\"bubbles\" style=\"display: none;\">\r\n <div class=\"bubble\" style=\"left: 20%; width: 8px; height: 8px; animation-delay: 0s;\"><\/div>\r\n <div class=\"bubble\" style=\"left: 50%; width: 6px; height: 6px; animation-delay: 0.3s;\"><\/div>\r\n <div class=\"bubble\" style=\"left: 70%; width: 10px; height: 10px; animation-delay: 0.1s;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- \u062a\u0631\u0645\u0648\u0645\u062a\u0631 -->\r\n <div class=\"thermometer\">\r\n <i id=\"thermIcon\" class=\"fas fa-thermometer-half therm-icon\" style=\"color: #cbd5e1;\"><\/i>\r\n <span id=\"tempDisplay\" class=\"temp-value\">25.0 \u00b0C<\/span>\r\n <\/div>\r\n <!-- \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062a\u0648\u0647\u062c \u0648\u0627\u0644\u0646\u0635 -->\r\n <div class=\"environment-glow\" id=\"envGlow\" style=\"display: none;\">\r\n <div id=\"glowCircle\" class=\"glow-effect\" style=\"background: rgba(239,68,68,0.2);\"><\/div>\r\n <div id=\"heatMsg\" class=\"heat-label\" style=\"color:#f87171;\">Heat Out<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0644\u0644\u0637\u0627\u0642\u0629 -->\r\n <div class=\"graph-container\">\r\n <div class=\"graph-title\"> \u0645\u062e\u0637\u0637 \u0633\u064a\u0631 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 (Energy Profile)<\/div>\r\n <div class=\"graph-wrapper\">\r\n <span class=\"y-axis-label\">\u0627\u0644\u0637\u0627\u0642\u0629 (H)<\/span>\r\n <span class=\"x-axis-label\">\u0633\u064a\u0631 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/span>\r\n <svg id=\"energyGraph\" class=\"graph-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\r\n <!-- \u062e\u0637 \u0627\u0644\u0645\u062a\u0641\u0627\u0639\u0644\u0627\u062a -->\r\n <line id=\"reactLine\" x1=\"0\" y1=\"30\" x2=\"30\" y2=\"30\" stroke=\"white\" stroke-width=\"2\" \/>\r\n <text id=\"reactText\" x=\"2\" y=\"25\" fill=\"#94a3b8\" font-size=\"5\">\u0627\u0644\u0645\u062a\u0641\u0627\u0639\u0644\u0627\u062a<\/text>\r\n <!-- \u062e\u0637 \u0627\u0644\u0646\u0648\u0627\u062a\u062c -->\r\n <line id=\"prodLine\" x1=\"70\" y1=\"80\" x2=\"100\" y2=\"80\" stroke=\"white\" stroke-width=\"2\" \/>\r\n <text id=\"prodText\" x=\"72\" y=\"85\" fill=\"#94a3b8\" font-size=\"5\">\u0627\u0644\u0646\u0648\u0627\u062a\u062c<\/text>\r\n <!-- \u0645\u0646\u062d\u0646\u0649 \u0627\u0644\u062a\u0646\u0634\u064a\u0637 -->\r\n <path id=\"curvePath\" d=\"M 30 30 Q 50 5 70 80\" fill=\"none\" stroke=\"#6366f1\" stroke-width=\"1\" stroke-dasharray=\"2 1\" \/>\r\n <!-- \u0643\u0631\u0629 \u0627\u0644\u062a\u0642\u062f\u0645 -->\r\n <circle id=\"ball\" cx=\"0\" cy=\"30\" r=\"3\" fill=\"#facc15\" stroke=\"white\" stroke-width=\"0.5\" \/>\r\n <!-- \u0633\u0647\u0645 \u0394H -->\r\n <g id=\"deltaGroup\" opacity=\"0.9\">\r\n <line id=\"deltaLine\" x1=\"85\" y1=\"30\" x2=\"85\" y2=\"80\" stroke=\"#ef4444\" stroke-width=\"1\" marker-end=\"url(#arrowHead)\" \/>\r\n <text id=\"deltaText\" x=\"88\" y=\"55\" fill=\"#ef4444\" font-size=\"4\" font-weight=\"bold\">\u0394H -<\/text>\r\n <\/g>\r\n <defs>\r\n <marker id=\"arrowHead\" markerWidth=\"6\" markerHeight=\"4\" refX=\"0\" refY=\"2\" orient=\"auto\">\r\n <polygon id=\"arrowPoly\" points=\"0 0, 6 2, 0 4\" fill=\"#ef4444\" \/>\r\n <\/marker>\r\n <\/defs>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0632\u0631 \u0627\u0644\u0628\u062f\u0621 \/ \u0627\u0644\u0625\u0639\u0627\u062f\u0629 -->\r\n <button id=\"actionButton\" class=\"action-btn\">\u0628\u062f\u0621 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/button>\r\n <\/div>\r\n\r\n <!-- Comparison Table -->\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-4\">\u0645\u0642\u0627\u0631\u0646\u0629 \u0634\u0627\u0645\u0644\u0629<\/h3>\r\n <table class=\"w-full text-l text-right text-slate-300 bg-slate-900\/50 rounded-xl border border-white\/10\">\r\n <thead class=\"bg-white\/5 text-l text-slate-200 uppercase\">\r\n <tr>\r\n <th class=\"px-4 py-3 border-b border-white\/10\">\u0648\u062c\u0647 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629<\/th>\r\n <th class=\"px-4 py-3 border-b border-white\/10 text-red-300\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0637\u0627\u0631\u062f<\/th>\r\n <th class=\"px-4 py-3 border-b border-white\/10 text-blue-300\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0645\u0627\u0635<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody class=\"divide-y divide-white\/5 text-l l:text-l\">\r\n <tr>\r\n <td class=\"px-4 py-3 font-bold text-slate-400\">\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/td>\r\n <td class=\"px-4 py-3\">\u062a\u0646\u0637\u0644\u0642 \u0645\u0646 \u0627\u0644\u0646\u0638\u0627\u0645 \u0644\u0644\u0645\u062d\u064a\u0637<\/td>\r\n <td class=\"px-4 py-3\">\u062a\u0645\u062a\u0635 \u0645\u0646 \u0627\u0644\u0645\u062d\u064a\u0637 \u0644\u0644\u0646\u0638\u0627\u0645<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-4 py-3 font-bold text-slate-400\">\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u062d\u064a\u0637<\/td>\r\n <td class=\"px-4 py-3 text-red-400 font-bold\">\u062a\u0631\u062a\u0641\u0639 (\u064a\u0633\u062e\u0646 \u0627\u0644\u0648\u0639\u0627\u0621)<\/td>\r\n <td class=\"px-4 py-3 text-blue-400 font-bold\">\u062a\u0646\u062e\u0641\u0636 (\u064a\u0628\u0631\u062f \u0627\u0644\u0648\u0639\u0627\u0621)<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-4 py-3 font-bold text-slate-400\">\u0625\u0634\u0627\u0631\u0629 \u0394H<\/td>\r\n <td class=\"px-4 py-3 font-mono dir-ltr\">- (Negative)<\/td>\r\n <td class=\"px-4 py-3 font-mono dir-ltr\">+ (Positive)<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-4 py-3 font-bold text-slate-400\">\u0637\u0627\u0642\u0629 \u0627\u0644\u0648\u0636\u0639<\/td>\r\n <td class=\"px-4 py-3\">\u0627\u0644\u0646\u0648\u0627\u062a\u062c \u0623\u0642\u0644 \u0637\u0627\u0642\u0629 (\u0623\u0643\u062b\u0631 \u0627\u0633\u062a\u0642\u0631\u0627\u0631\u0627\u064b)<\/td>\r\n <td class=\"px-4 py-3\">\u0627\u0644\u0646\u0648\u0627\u062a\u062c \u0623\u0639\u0644\u0649 \u0637\u0627\u0642\u0629 (\u0623\u0642\u0644 \u0627\u0633\u062a\u0642\u0631\u0627\u0631\u0627\u064b)<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-4 py-3 font-bold text-slate-400\">\u0623\u0645\u062b\u0644\u0629<\/td>\r\n <td class=\"px-4 py-3\">\u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0642\u060c \u0627\u0644\u062a\u0639\u0627\u062f\u0644\u060c \u0627\u0644\u062a\u0646\u0641\u0633<\/td>\r\n <td class=\"px-4 py-3\">\u0627\u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0636\u0648\u0626\u064a\u060c \u0627\u0644\u062a\u062d\u0644\u0644 \u0627\u0644\u062d\u0631\u0627\u0631\u064a\u060c \u0627\u0644\u0643\u0645\u0627\u062f\u0629 \u0627\u0644\u0628\u0627\u0631\u062f\u0629<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Phase Changes (\u0646\u0641\u0633 \u0627\u0644\u0643\u0648\u062f \u0627\u0644\u0633\u0627\u0628\u0642) -->\r\n <section class=\"bg-slate-800\/50 p-4 sm:p-6 rounded-2xl border border-white\/5 shadow-sm\">\r\n <h2 class=\"text-xl font-bold text-white mb-6 flex items-center gap-2\">\r\n <span class=\"w-2 h-6 bg-yellow-500 rounded-full\"><\/span>\r\n \u0663. \u0627\u0644\u0637\u0627\u0642\u0629 \u0648\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629\r\n <\/h2>\r\n \r\n <!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u062d\u0648\u0644\u0627\u062a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 (\u0643\u0645\u0627 \u0647\u0648 \u0633\u0627\u0628\u0642\u0627\u064b) -->\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8\">\r\n <div class=\"bg-red-900\/10 p-4 rounded-xl border border-red-500\/20\">\r\n <h3 class=\"text-red-400 font-bold mb-3 text-l flex items-center gap-2\">\u0639\u0645\u0644\u064a\u0627\u062a \u0645\u0627\u0635\u0629 \u0644\u0644\u0637\u0627\u0642\u0629<\/h3>\r\n <div class=\"space-y-3\">\r\n <div class=\"bg-black\/20 p-2 rounded border-r-2 border-red-500\">\r\n <strong class=\"text-slate-200 text-l block\">\u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631 (Melting)<\/strong>\r\n <p class=\"text-[10px] text-slate-400\">\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0635\u0644\u0628\u0629 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-2 rounded border-r-2 border-red-500\">\r\n <strong class=\"text-slate-200 text-l block\">\u0627\u0644\u062a\u0628\u062e\u0631 (Vaporization)<\/strong>\r\n <p class=\"text-[10px] text-slate-400\">\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-2 rounded border-r-2 border-red-500\">\r\n <strong class=\"text-slate-200 text-l block\">\u0627\u0644\u062a\u0633\u0627\u0645\u064a (Sublimation)<\/strong>\r\n <p class=\"text-[10px] text-slate-400\">\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0635\u0644\u0628\u0629 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u0645\u0628\u0627\u0634\u0631\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-blue-900\/10 p-4 rounded-xl border border-blue-500\/20\">\r\n <h3 class=\"text-blue-400 font-bold mb-3 text-l flex items-center gap-2\">\u0639\u0645\u0644\u064a\u0627\u062a \u0637\u0627\u0631\u062f\u0629 \u0644\u0644\u0637\u0627\u0642\u0629<\/h3>\r\n <div class=\"space-y-3\">\r\n <div class=\"bg-black\/20 p-2 rounded border-r-2 border-blue-500\">\r\n <strong class=\"text-slate-200 text-l block\">\u0627\u0644\u062a\u062c\u0645\u062f (Freezing)<\/strong>\r\n <p class=\"text-[10px] text-slate-400\">\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0635\u0644\u0628\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-2 rounded border-r-2 border-blue-500\">\r\n <strong class=\"text-slate-200 text-l block\">\u0627\u0644\u062a\u0643\u0627\u062b\u0641 (Condensation)<\/strong>\r\n <p class=\"text-[10px] text-slate-400\">\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0628\u0627\u0642\u064a \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u062d\u0648\u0644\u0627\u062a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 (\u0643\u0645\u0627 \u0647\u0648 \u0641\u064a \u0627\u0644\u0643\u0648\u062f \u0627\u0644\u0623\u0635\u0644\u064a) -->\r\n <div class=\"mb-8 p-4 bg-slate-900\/50 rounded-xl border border-white\/5 flex flex-col items-center\">\r\n <h3 class=\"text-center text-slate-300 text-l mb-6\">\u0645\u062e\u0637\u0637 \u062a\u062d\u0648\u0644\u0627\u062a \u0627\u0644\u0645\u0627\u062f\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629<\/h3>\r\n <div class=\"flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 w-full max-w-2xl relative\">\r\n <!-- Solid -->\r\n <div class=\"flex flex-col items-center gap-2\">\r\n <div class=\"w-20 h-20 bg-blue-200\/20 border-2 border-blue-300 rounded-lg flex flex-wrap content-start p-1 gap-1 shadow-[0_0_15px_rgba(147,197,253,0.1)]\">\r\n <div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div>\r\n <div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div>\r\n <div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div>\r\n <div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-300 rounded-sm\"><\/div>\r\n <\/div>\r\n <span class=\"font-bold text-white\">\u0635\u0644\u0628\u0629<\/span>\r\n <span class=\"text-[10px] text-slate-400\">\u062c\u0632\u064a\u0626\u0627\u062a \u0645\u062a\u0631\u0627\u0635\u0629<\/span>\r\n <\/div>\r\n\r\n <!-- Arrows Solid <-> Liquid -->\r\n <div class=\"flex flex-col gap-4 items-center flex-1\">\r\n <div class=\"flex flex-col items-center w-full\">\r\n <span class=\"text-[10px] text-red-400 mb-1\">\u0627\u0646\u0635\u0647\u0627\u0631 (\u0645\u0627\u0635) +Energy<\/span>\r\n <div class=\"w-full h-1 bg-gradient-to-r from-red-500\/20 to-red-500 relative\">\r\n <div class=\"absolute right-0 -top-1 w-2 h-2 border-t-2 border-r-2 border-red-500 rotate-45\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col items-center w-full\">\r\n <div class=\"w-full h-1 bg-gradient-to-l from-blue-500\/20 to-blue-500 relative\">\r\n <div class=\"absolute left-0 -top-1 w-2 h-2 border-b-2 border-l-2 border-blue-500 rotate-45\"><\/div>\r\n <\/div>\r\n <span class=\"text-[10px] text-blue-400 mt-1\">\u062a\u062c\u0645\u062f (\u0637\u0627\u0631\u062f) -Energy<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Liquid -->\r\n <div class=\"flex flex-col items-center gap-2\">\r\n <div class=\"w-20 h-20 bg-blue-400\/20 border-2 border-blue-400 rounded-full flex flex-wrap justify-center content-center p-2 gap-1 shadow-[0_0_15px_rgba(96,165,250,0.1)] relative overflow-hidden\">\r\n <div class=\"absolute bottom-0 w-full h-3\/4 bg-blue-500\/30\"><\/div>\r\n <div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div>\r\n <div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div>\r\n <div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div><div class=\"w-3.5 h-3.5 bg-blue-400 rounded-full z-10\"><\/div>\r\n <\/div>\r\n <span class=\"font-bold text-white\">\u0633\u0627\u0626\u0644\u0629<\/span>\r\n <span class=\"text-[10px] text-slate-400\">\u062d\u0631\u0643\u0629 \u0627\u0646\u062a\u0642\u0627\u0644\u064a\u0629<\/span>\r\n <\/div>\r\n\r\n <!-- Arrows Liquid <-> Gas -->\r\n <div class=\"flex flex-col gap-4 items-center flex-1\">\r\n <div class=\"flex flex-col items-center w-full\">\r\n <span class=\"text-[10px] text-red-400 mb-1\">\u062a\u0628\u062e\u0631 (\u0645\u0627\u0635) +Energy<\/span>\r\n <div class=\"w-full h-1 bg-gradient-to-r from-red-500\/20 to-red-500 relative\">\r\n <div class=\"absolute right-0 -top-1 w-2 h-2 border-t-2 border-r-2 border-red-500 rotate-45\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col items-center w-full\">\r\n <div class=\"w-full h-1 bg-gradient-to-l from-blue-500\/20 to-blue-500 relative\">\r\n <div class=\"absolute left-0 -top-1 w-2 h-2 border-b-2 border-l-2 border-blue-500 rotate-45\"><\/div>\r\n <\/div>\r\n <span class=\"text-[10px] text-blue-400 mt-1\">\u062a\u0643\u062b\u0641 (\u0637\u0627\u0631\u062f) -Energy<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Gas -->\r\n <div class=\"flex flex-col items-center gap-2\">\r\n <div class=\"w-20 h-20 border-2 border-dashed border-slate-500 rounded-lg flex items-center justify-center relative\">\r\n <div class=\"absolute top-2 left-2 w-3 h-3 bg-slate-300 rounded-full animate-bounce\"><\/div>\r\n <div class=\"absolute bottom-4 right-4 w-3 h-3 bg-slate-300 rounded-full animate-pulse\"><\/div>\r\n <div class=\"absolute top-8 right-2 w-3 h-3 bg-slate-300 rounded-full\"><\/div>\r\n <\/div>\r\n <span class=\"font-bold text-white\">\u063a\u0627\u0632\u064a\u0629<\/span>\r\n <span class=\"text-[10px] text-slate-400\">\u062d\u0631\u0643\u0629 \u0639\u0634\u0648\u0627\u0626\u064a\u0629 \u0633\u0631\u064a\u0639\u0629<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062c\u062f\u0648\u0644 \u0627\u0644\u062a\u062d\u0648\u0644\u0627\u062a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 -->\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <table class=\"w-full text-l text-right text-slate-300 bg-black\/20 rounded-lg border border-white\/5\">\r\n <thead class=\"bg-white\/10 text-l text-slate-200 uppercase\">\r\n <tr>\r\n <th class=\"px-3 py-3\">\u0627\u0644\u062a\u062d\u0648\u0644 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a<\/th>\r\n <th class=\"px-3 py-3 text-center\">\u0646\u0648\u0639 \u0627\u0644\u0637\u0627\u0642\u0629<\/th>\r\n <th class=\"px-3 py-3 text-center\">\u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u0627\u0644\u0637\u0627\u0642\u0629<\/th>\r\n <th class=\"px-3 py-3\">\u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0628\u064a\u0626\u064a\/\u0627\u0644\u062d\u064a\u0627\u062a\u064a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody class=\"divide-y divide-white\/5\">\r\n <tr class=\"hover:bg-white\/5 transition-colors\">\r\n <td class=\"px-3 py-3 font-bold text-slate-200\">\u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631 (Fusion)<\/td>\r\n <td class=\"px-3 py-3 text-center\"><span class=\"bg-red-900\/30 text-red-300 px-2 py-1 rounded text-l border border-red-500\/20\">\u0645\u0627\u0635 \u0644\u0644\u0637\u0627\u0642\u0629 (+ve)<\/span><\/td>\r\n <td class=\"px-3 py-3 text-center font-mono ltr text-yellow-300\">6.01 kJ\/mol<\/td>\r\n <td class=\"px-3 py-3 text-l\">\u0627\u0646\u0635\u0647\u0627\u0631 \u0627\u0644\u062b\u0644\u0648\u062c \u064a\u0645\u062a\u0635 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0645\u0646 \u0627\u0644\u062c\u0648 \u0641\u064a\u0628\u0631\u062f\u0647.<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-white\/5 transition-colors\">\r\n <td class=\"px-3 py-3 font-bold text-slate-200\">\u0627\u0644\u062a\u0628\u062e\u0631 (Evaporation)<\/td>\r\n <td class=\"px-3 py-3 text-center\"><span class=\"bg-red-900\/30 text-red-300 px-2 py-1 rounded text-l border border-red-500\/20\">\u0645\u0627\u0635 \u0644\u0644\u0637\u0627\u0642\u0629 (+ve)<\/span><\/td>\r\n <td class=\"px-3 py-3 text-center font-mono ltr text-yellow-300\">40.7 kJ\/mol<\/td>\r\n <td class=\"px-3 py-3 text-l\">\u062a\u0628\u062e\u0631 \u0627\u0644\u0639\u0631\u0642 \u064a\u0645\u062a\u0635 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u062c\u0633\u0645 \u0641\u064a\u0628\u0631\u062f\u0647 (\u062a\u0644\u0637\u064a\u0641).<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-white\/5 transition-colors bg-purple-900\/10\">\r\n <td class=\"px-3 py-3 font-bold text-purple-300\">\u0627\u0644\u062a\u0633\u0627\u0645\u064a (Sublimation)<\/td>\r\n <td class=\"px-3 py-3 text-center\"><span class=\"bg-red-900\/30 text-red-300 px-2 py-1 rounded text-l border border-red-500\/20\">\u0645\u0627\u0635 \u0644\u0644\u0637\u0627\u0642\u0629 (+ve)<\/span><\/td>\r\n <td class=\"px-3 py-3 text-center font-mono ltr text-yellow-300\">~ 46.7 kJ\/mol<\/td>\r\n <td class=\"px-3 py-3 text-l\">\u062a\u0633\u0627\u0645\u064a \u0627\u0644\u062c\u0644\u064a\u062f \u0627\u0644\u062c\u0627\u0641 (CO\u2082) \u0648\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u0641\u064a \u0627\u0644\u062a\u0628\u0631\u064a\u062f \u0627\u0644\u0641\u0627\u0626\u0642.<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-white\/5 transition-colors\">\r\n <td class=\"px-3 py-3 font-bold text-slate-200\">\u0627\u0644\u062a\u062c\u0645\u062f (Freezing)<\/td>\r\n <td class=\"px-3 py-3 text-center\"><span class=\"bg-blue-900\/30 text-blue-300 px-2 py-1 rounded text-l border border-blue-500\/20\">\u0637\u0627\u0631\u062f \u0644\u0644\u0637\u0627\u0642\u0629 (-ve)<\/span><\/td>\r\n <td class=\"px-3 py-3 text-center font-mono ltr text-cyan-300\">-6.01 kJ\/mol<\/td>\r\n <td class=\"px-3 py-3 text-l\">\u0631\u0634 \u0627\u0644\u0645\u0627\u0621 \u0639\u0644\u0649 \u0627\u0644\u0623\u0634\u062c\u0627\u0631 \u0634\u062a\u0627\u0621\u064b \u064a\u062d\u0645\u064a\u0647\u0627 (\u062a\u062c\u0645\u062f \u0627\u0644\u0645\u0627\u0621 \u064a\u0637\u0644\u0642 \u062d\u0631\u0627\u0631\u0629 \u062a\u062f\u0641\u0626 \u0627\u0644\u0628\u0631\u0627\u0639\u0645).<\/td>\r\n <\/tr>\r\n <tr class=\"hover:bg-white\/5 transition-colors\">\r\n <td class=\"px-3 py-3 font-bold text-slate-200\">\u0627\u0644\u062a\u0643\u062b\u0641 (Condensation)<\/td>\r\n <td class=\"px-3 py-3 text-center\"><span class=\"bg-blue-900\/30 text-blue-300 px-2 py-1 rounded text-l border border-blue-500\/20\">\u0637\u0627\u0631\u062f \u0644\u0644\u0637\u0627\u0642\u0629 (-ve)<\/span><\/td>\r\n <td class=\"px-3 py-3 text-center font-mono ltr text-cyan-300\">-40.7 kJ\/mol<\/td>\r\n <td class=\"px-3 py-3 text-l\">\u062d\u0631\u0648\u0642 \u0628\u062e\u0627\u0631 \u0627\u0644\u0645\u0627\u0621 \u0623\u0634\u062f \u0645\u0646 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0645\u063a\u0644\u064a (\u0644\u0623\u0646\u0647 \u064a\u0637\u0644\u0642 \u0637\u0627\u0642\u0629 \u062a\u0643\u062b\u0641 \u0625\u0636\u0627\u0641\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u062c\u0644\u062f).<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Molar Energy Definitions -->\r\n <div class=\"mt-8 border-t border-white\/10 pt-6\">\r\n <h3 class=\"text-lg font-bold text-white mb-4\">\u062a\u0639\u0631\u064a\u0641\u0627\u062a \u0627\u0644\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n \r\n <!-- Fusion and Freezing -->\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border border-indigo-500\/30\">\r\n <div class=\"flex items-center justify-between mb-3 border-b border-white\/10 pb-2\">\r\n <span class=\"text-l font-bold text-white\">\u062a\u062d\u0648\u0644\u0627\u062a \u0627\u0644\u0635\u0644\u0628 \u21cc \u0627\u0644\u0633\u0627\u0626\u0644<\/span>\r\n <span class=\"text-l text-slate-400\">\u0394Hfus = -\u0394Hsolid<\/span>\r\n <\/div>\r\n \r\n <div class=\"mb-4\">\r\n <div class=\"flex items-center gap-2 mb-1\">\r\n <span class=\"w-2 h-2 bg-red-500 rounded-full\"><\/span>\r\n <strong class=\"text-red-300 text-l\">\u0637\u0627\u0642\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 (Molar Heat of Fusion)<\/strong>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 mr-4 leading-relaxed\">\r\n \u0643\u0645\u064a\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u062a\u062d\u0648\u064a\u0644 <span class=\"text-white font-bold\">1 \u0645\u0648\u0644<\/span> \u0645\u0646 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0635\u0644\u0628\u0629 \u0625\u0644\u0649 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631.\r\n <\/p>\r\n <\/div>\r\n\r\n <div>\r\n <div class=\"flex items-center gap-2 mb-1\">\r\n <span class=\"w-2 h-2 bg-blue-500 rounded-full\"><\/span>\r\n <strong class=\"text-blue-300 text-l\">\u0637\u0627\u0642\u0629 \u0627\u0644\u062a\u062c\u0645\u062f \u0627\u0644\u0645\u0648\u0644\u064a\u0629 (Molar Heat of Solidification)<\/strong>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 mr-4 leading-relaxed\">\r\n \u0643\u0645\u064a\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0646\u0628\u0639\u062b\u0629 \u0639\u0646\u062f \u062a\u062d\u0648\u0644 <span class=\"text-white font-bold\">1 \u0645\u0648\u0644<\/span> \u0645\u0646 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0625\u0644\u0649 \u0627\u0644\u0635\u0644\u0628\u0629 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u0627\u0644\u062a\u062c\u0645\u062f.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Vaporization and Condensation -->\r\n <div class=\"bg-teal-900\/20 p-4 rounded-xl border border-teal-500\/30\">\r\n <div class=\"flex items-center justify-between mb-3 border-b border-white\/10 pb-2\">\r\n <span class=\"text-l font-bold text-white\">\u062a\u062d\u0648\u0644\u0627\u062a \u0627\u0644\u0633\u0627\u0626\u0644 \u21cc \u0627\u0644\u063a\u0627\u0632<\/span>\r\n <span class=\"text-l text-slate-400\">\u0394Hvap = -\u0394Hcond<\/span>\r\n <\/div>\r\n \r\n <div class=\"mb-4\">\r\n <div class=\"flex items-center gap-2 mb-1\">\r\n <span class=\"w-2 h-2 bg-red-500 rounded-full\"><\/span>\r\n <strong class=\"text-red-300 text-l\">\u0637\u0627\u0642\u0629 \u0627\u0644\u062a\u0628\u062e\u0631 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 (Molar Heat of Vaporization)<\/strong>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 mr-4 leading-relaxed\">\r\n \u0643\u0645\u064a\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u062a\u062d\u0648\u064a\u0644 <span class=\"text-white font-bold\">1 \u0645\u0648\u0644<\/span> \u0645\u0646 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0625\u0644\u0649 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u0627\u0644\u063a\u0644\u064a\u0627\u0646.\r\n <\/p>\r\n <\/div>\r\n\r\n <div>\r\n <div class=\"flex items-center gap-2 mb-1\">\r\n <span class=\"w-2 h-2 bg-blue-500 rounded-full\"><\/span>\r\n <strong class=\"text-blue-300 text-l\">\u0637\u0627\u0642\u0629 \u0627\u0644\u062a\u0643\u0627\u062b\u0641 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 (Molar Heat of Condensation)<\/strong>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 mr-4 leading-relaxed\">\r\n \u0643\u0645\u064a\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0646\u0628\u0639\u062b\u0629 \u0639\u0646\u062f \u062a\u062d\u0648\u0644 <span class=\"text-white font-bold\">1 \u0645\u0648\u0644<\/span> \u0645\u0646 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u0627\u0644\u062a\u0643\u0627\u062b\u0641.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Sublimation -->\r\n <div class=\"bg-purple-900\/20 p-4 rounded-xl border border-purple-500\/30 md:col-span-2\">\r\n <div class=\"flex items-center justify-between mb-3 border-b border-white\/10 pb-2\">\r\n <span class=\"text-l font-bold text-white\">\u062a\u062d\u0648\u0644\u0627\u062a \u0627\u0644\u0635\u0644\u0628 \u21cc \u0627\u0644\u063a\u0627\u0632<\/span>\r\n <span class=\"text-l text-slate-400\">\u0394Hsub = \u0394Hfus + \u0394Hvap<\/span>\r\n <\/div>\r\n \r\n <div class=\"mb-0\">\r\n <div class=\"flex items-center gap-2 mb-1\">\r\n <span class=\"w-2 h-2 bg-red-500 rounded-full\"><\/span>\r\n <strong class=\"text-red-300 text-l\">\u0637\u0627\u0642\u0629 \u0627\u0644\u062a\u0633\u0627\u0645\u064a \u0627\u0644\u0645\u0648\u0644\u064a\u0629 (Molar Heat of Sublimation)<\/strong>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 mr-4 leading-relaxed\">\r\n \u0643\u0645\u064a\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u062a\u062d\u0648\u064a\u0644 <span class=\"text-white font-bold\">1 \u0645\u0648\u0644<\/span> \u0645\u0646 \u0627\u0644\u0645\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0635\u0644\u0628\u0629 \u0625\u0644\u0649 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u0645\u0628\u0627\u0634\u0631\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <!-- Example Note -->\r\n <div class=\"mt-4 bg-black\/20 p-3 rounded-lg flex items-center gap-3\">\r\n <div class=\"bg-yellow-500\/20 p-2 rounded-full text-yellow-300\"><\/div>\r\n <p class=\"text-l text-slate-300\">\r\n \u0644\u0627\u062d\u0638 \u0623\u0646 \u0637\u0627\u0642\u0629 \u0627\u0644\u062a\u0628\u062e\u0631 \u062f\u0627\u0626\u0645\u0627\u064b <span class=\"text-red-400 font-bold\">\u0623\u0643\u0628\u0631 \u0628\u0643\u062b\u064a\u0631<\/span> \u0645\u0646 \u0637\u0627\u0642\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631 (40.7 vs 6.01 \u0644\u0644\u0645\u0627\u0621)\u060c \u0644\u0623\u0646 \u0627\u0644\u062a\u0628\u062e\u0631 \u064a\u062a\u0637\u0644\u0628 \u062a\u0643\u0633\u064a\u0631 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0628\u064a\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u062a\u0645\u0627\u0645\u0627\u064b\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631 \u064a\u0636\u0639\u0641\u0647\u0627 \u0641\u0642\u0637.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Real Life Application -->\r\n <section class=\"bg-slate-800\/50 p-4 sm:p-6 rounded-2xl border border-white\/5 shadow-sm\">\r\n <h2 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\r\n <span class=\"w-2 h-6 bg-purple-500 rounded-full\"><\/span>\r\n \u0664. \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062d\u064a\u0627\u062a\u064a\u0629: \u0627\u0644\u0643\u0645\u0627\u062f\u0627\u062a\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-red-900\/10 p-4 rounded-xl border border-red-500\/20\">\r\n <h3 class=\"font-bold text-red-300 mb-2\">\u0627\u0644\u0643\u0645\u0627\u062f\u0629 \u0627\u0644\u0633\u0627\u062e\u0646\u0629<\/h3>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u0645\u0644\u0627\u062d \u0645\u062b\u0644 <strong>\u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645<\/strong> \u0623\u0648 \u0643\u0628\u0631\u064a\u062a\u0627\u062a \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645. \u0639\u0646\u062f \u0630\u0648\u0628\u0627\u0646\u0647\u0627 \u0641\u064a \u0627\u0644\u0645\u0627\u0621\u060c \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644 <strong>\u0637\u0627\u0631\u062f \u0644\u0644\u062d\u0631\u0627\u0631\u0629<\/strong>\u060c \u0641\u062a\u0631\u062a\u0641\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0643\u0645\u0627\u062f\u0629 \u0648\u062a\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u062e\u0641\u064a\u0641 \u0622\u0644\u0627\u0645 \u0627\u0644\u0639\u0636\u0644\u0627\u062a.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-blue-900\/10 p-4 rounded-xl border border-blue-500\/20\">\r\n <h3 class=\"font-bold text-blue-300 mb-2\">\u0627\u0644\u0643\u0645\u0627\u062f\u0629 \u0627\u0644\u0628\u0627\u0631\u062f\u0629<\/h3>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 <strong>\u0646\u062a\u0631\u0627\u062a \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0648\u0645<\/strong>. \u0639\u0646\u062f \u0630\u0648\u0628\u0627\u0646\u0647\u0627 \u0641\u064a \u0627\u0644\u0645\u0627\u0621\u060c \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644 <strong>\u0645\u0627\u0635 \u0644\u0644\u062d\u0631\u0627\u0631\u0629<\/strong> (\u064a\u0633\u062d\u0628 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0645\u0646 \u0627\u0644\u0645\u0627\u0621)\u060c \u0641\u062a\u0646\u062e\u0641\u0636 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u062a\u0633\u062a\u062e\u062f\u0645 \u0644\u0644\u0625\u0633\u0639\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0648\u0644\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Lesson Summary -->\r\n <section class=\"bg-indigo-900\/30 p-4 sm:p-6 rounded-2xl border border-indigo-500\/30 mt-8\">\r\n <h2 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\r\n \u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 text-l text-slate-300\">\r\n <div>\r\n <h3 class=\"font-bold text-white mb-2 border-b border-white\/10 pb-1\">\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u062d\u0631\u0627\u0631\u064a\u0627\u064b<\/h3>\r\n <ul class=\"list-disc list-inside space-y-2\">\r\n <li><strong>\u0637\u0627\u0631\u062f \u0644\u0644\u0637\u0627\u0642\u0629 (Exothermic):<\/strong> \u062a\u0646\u0637\u0644\u0642 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (\u0627\u0644\u0646\u0638\u0627\u0645 \u2190 \u0627\u0644\u0645\u062d\u064a\u0637)\u060c \u062a\u0631\u062a\u0641\u0639 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0648\u0633\u0637\u060c \u0394H \u0633\u0627\u0644\u0628\u0629.<\/li>\r\n <li><strong>\u0645\u0627\u0635 \u0644\u0644\u0637\u0627\u0642\u0629 (Endothermic):<\/strong> \u062a\u0645\u062a\u0635 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (\u0627\u0644\u0645\u062d\u064a\u0637 \u2190 \u0627\u0644\u0646\u0638\u0627\u0645)\u060c \u062a\u0646\u062e\u0641\u0636 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0648\u0633\u0637\u060c \u0394H \u0645\u0648\u062c\u0628\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h3 class=\"font-bold text-white mb-2 border-b border-white\/10 pb-1\">\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629<\/h3>\r\n <ul class=\"list-disc list-inside space-y-2\">\r\n <li><strong>\u0639\u0645\u0644\u064a\u0627\u062a \u0645\u0627\u0635\u0629 (+):<\/strong> \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631\u060c \u0627\u0644\u062a\u0628\u062e\u0631\u060c \u0627\u0644\u062a\u0633\u0627\u0645\u064a. (\u062a\u062d\u062a\u0627\u062c \u0637\u0627\u0642\u0629 \u0644\u062a\u0641\u0643\u064a\u0643 \u0627\u0644\u0631\u0648\u0627\u0628\u0637).<\/li>\r\n <li><strong>\u0639\u0645\u0644\u064a\u0627\u062a \u0637\u0627\u0631\u062f\u0629 (-):<\/strong> \u0627\u0644\u062a\u062c\u0645\u062f\u060c \u0627\u0644\u062a\u0643\u062b\u0641. (\u062a\u0637\u0644\u0642 \u0637\u0627\u0642\u0629 \u0639\u0646\u062f \u062a\u0643\u0648\u0646 \u0627\u0644\u0631\u0648\u0627\u0628\u0637).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4 bg-black\/20 p-3 rounded-lg text-center\">\r\n <p class=\"text-l text-slate-400\">\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0639\u0627\u0645 \u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u064a:<\/p>\r\n <div class=\"font-mono text-yellow-300 text-lg ltr dir-ltr mt-1\">\u0394H = H(products) - H(reactants)<\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ ---------- \u0627\u0644\u062d\u0627\u0644\u0629 ----------\r\n let type = 'exothermic'; \/\/ 'exothermic' or 'endothermic'\r\n let progress = 0; \/\/ 0..100\r\n let isRunning = false;\r\n let interval = null;\r\n\r\n \/\/ ---------- \u0639\u0646\u0627\u0635\u0631 DOM ----------\r\n const btnExo = document.getElementById('btnExo');\r\n const btnEndo = document.getElementById('btnEndo');\r\n const actionBtn = document.getElementById('actionButton');\r\n const liquid = document.getElementById('liquid');\r\n const bubblesArea = document.getElementById('bubblesArea');\r\n const thermIcon = document.getElementById('thermIcon');\r\n const tempDisplay = document.getElementById('tempDisplay');\r\n const envGlow = document.getElementById('envGlow');\r\n const glowCircle = document.getElementById('glowCircle');\r\n const heatMsg = document.getElementById('heatMsg');\r\n \r\n \/\/ SVG elements\r\n const reactLine = document.getElementById('reactLine');\r\n const reactText = document.getElementById('reactText');\r\n const prodLine = document.getElementById('prodLine');\r\n const prodText = document.getElementById('prodText');\r\n const curvePath = document.getElementById('curvePath');\r\n const ball = document.getElementById('ball');\r\n const deltaLine = document.getElementById('deltaLine');\r\n const deltaText = document.getElementById('deltaText');\r\n const arrowPoly = document.getElementById('arrowPoly');\r\n\r\n \/\/ ---------- \u062f\u0648\u0627\u0644 \u0627\u0644\u062a\u062d\u062f\u064a\u062b ----------\r\n function setTypeStyle() {\r\n if (type === 'exothermic') {\r\n btnExo.className = 'type-btn active-exo';\r\n btnEndo.className = 'type-btn';\r\n } else {\r\n btnEndo.className = 'type-btn active-endo';\r\n btnExo.className = 'type-btn';\r\n }\r\n }\r\n\r\n \/\/ \u062d\u0633\u0627\u0628 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\r\n function getCurrentTemp() {\r\n if (type === 'exothermic') {\r\n return 25 + (55 * (progress \/ 100));\r\n } else {\r\n return 25 - (35 * (progress \/ 100));\r\n }\r\n }\r\n\r\n \/\/ \u0644\u0648\u0646 \u0627\u0644\u0633\u0627\u0626\u0644\r\n function getLiquidColor() {\r\n if (type === 'exothermic') {\r\n let r = Math.min(255, 59 + progress * 2);\r\n let g = Math.max(0, 130 - progress * 1.3);\r\n let b = Math.max(0, 246 - progress * 2.4);\r\n return `rgb(${r}, ${g}, ${b})`;\r\n } else {\r\n let r = Math.min(220, 59 + progress * 1.6);\r\n let g = Math.min(250, 130 + progress * 1.2);\r\n let b = 246;\r\n return `rgb(${r}, ${g}, ${b})`;\r\n }\r\n }\r\n\r\n \/\/ \u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u0631\u0629\r\n function getBallPosition() {\r\n const yReact = type === 'exothermic' ? 30 : 80;\r\n const yProd = type === 'exothermic' ? 80 : 30;\r\n const yPeak = 5;\r\n const x = progress;\r\n let y = yReact;\r\n if (x <= 30) {\r\n y = yReact;\r\n } else if (x >= 70) {\r\n y = yProd;\r\n } else {\r\n const t = (x - 30) \/ 40;\r\n const inv = 1 - t;\r\n y = inv * inv * yReact + 2 * inv * t * yPeak + t * t * yProd;\r\n }\r\n return { cx: x, cy: y };\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0631\u0626\u064a\u0629\r\n function refreshUI() {\r\n \/\/ \u0627\u0644\u0633\u0627\u0626\u0644\r\n liquid.style.backgroundColor = getLiquidColor();\r\n if (type === 'exothermic' && progress > 20) {\r\n liquid.style.boxShadow = '0 0 20px rgba(239,68,68,0.6)';\r\n } else {\r\n liquid.style.boxShadow = 'none';\r\n }\r\n\r\n \/\/ \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629\r\n const temp = getCurrentTemp();\r\n tempDisplay.textContent = temp.toFixed(1) + ' \u00b0C';\r\n if (temp > 40) {\r\n thermIcon.className = 'fas fa-thermometer-full therm-icon';\r\n thermIcon.style.color = '#ef4444';\r\n } else if (temp < 10) {\r\n thermIcon.className = 'fas fa-thermometer-empty therm-icon';\r\n thermIcon.style.color = '#7dd3fc';\r\n } else {\r\n thermIcon.className = 'fas fa-thermometer-half therm-icon';\r\n thermIcon.style.color = '#cbd5e1';\r\n }\r\n\r\n \/\/ \u0627\u0644\u0641\u0642\u0627\u0639\u0627\u062a\r\n if (isRunning) {\r\n bubblesArea.style.display = 'block';\r\n } else {\r\n bubblesArea.style.display = 'none';\r\n }\r\n\r\n \/\/ \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u0628\u064a\u0626\u064a\u0629\r\n if (isRunning && progress > 20) {\r\n envGlow.style.display = 'flex';\r\n if (type === 'exothermic') {\r\n glowCircle.style.background = 'rgba(239,68,68,0.25)';\r\n heatMsg.style.color = '#fca5a5';\r\n heatMsg.textContent = ' Heat Out';\r\n } else {\r\n glowCircle.style.background = 'rgba(37,99,235,0.25)';\r\n heatMsg.style.color = '#93c5fd';\r\n heatMsg.textContent = ' Heat In';\r\n }\r\n } else {\r\n envGlow.style.display = 'none';\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\r\n const yReact = type === 'exothermic' ? 30 : 80;\r\n const yProd = type === 'exothermic' ? 80 : 30;\r\n\r\n reactLine.setAttribute('y1', yReact);\r\n reactLine.setAttribute('y2', yReact);\r\n reactText.setAttribute('y', yReact - 5);\r\n\r\n prodLine.setAttribute('y1', yProd);\r\n prodLine.setAttribute('y2', yProd);\r\n prodText.setAttribute('y', yProd + 5);\r\n\r\n \/\/ \u0645\u0633\u0627\u0631 \u0627\u0644\u0645\u0646\u062d\u0646\u0649\r\n if (type === 'exothermic') {\r\n curvePath.setAttribute('d', 'M 30 30 Q 50 5 70 80');\r\n } else {\r\n curvePath.setAttribute('d', 'M 30 80 Q 50 5 70 30');\r\n }\r\n\r\n \/\/ \u0627\u0644\u0643\u0631\u0629\r\n const pos = getBallPosition();\r\n ball.setAttribute('cx', pos.cx);\r\n ball.setAttribute('cy', pos.cy);\r\n\r\n \/\/ \u0633\u0647\u0645 \u0394H\r\n deltaLine.setAttribute('y1', yReact);\r\n deltaLine.setAttribute('y2', yProd);\r\n const arrowColor = type === 'exothermic' ? '#ef4444' : '#3b82f6';\r\n deltaLine.setAttribute('stroke', arrowColor);\r\n deltaText.setAttribute('fill', arrowColor);\r\n deltaText.textContent = type === 'exothermic' ? '\u0394H -' : '\u0394H +';\r\n arrowPoly.setAttribute('fill', arrowColor);\r\n }\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0639\u064a\u064a\u0646\r\n function resetSimulation() {\r\n if (interval) {\r\n clearInterval(interval);\r\n interval = null;\r\n }\r\n progress = 0;\r\n isRunning = false;\r\n actionBtn.textContent = '\u0628\u062f\u0621 \u0627\u0644\u062a\u0641\u0627\u0639\u0644';\r\n actionBtn.className = 'action-btn';\r\n refreshUI();\r\n }\r\n\r\n \/\/ \u0628\u062f\u0621 \u0627\u0644\u062a\u0642\u062f\u0645\r\n function startSimulation() {\r\n if (isRunning) return;\r\n resetSimulation(); \/\/ \u064a\u0636\u0645\u0646 \u0648\u0642\u0648\u0641 \u0623\u064a \u0645\u0624\u0642\u062a \u0633\u0627\u0628\u0642 \u0648\u064a\u0628\u062f\u0623 \u0645\u0646 0\r\n isRunning = true;\r\n actionBtn.textContent = '\u0625\u0639\u0627\u062f\u0629';\r\n actionBtn.className = 'action-btn reset';\r\n refreshUI();\r\n\r\n interval = setInterval(() => {\r\n progress = Math.min(progress + 1, 100);\r\n refreshUI();\r\n if (progress === 100) {\r\n clearInterval(interval);\r\n interval = null;\r\n isRunning = false;\r\n actionBtn.textContent = '\u0625\u0639\u0627\u062f\u0629';\r\n actionBtn.className = 'action-btn reset';\r\n refreshUI();\r\n }\r\n }, 30);\r\n }\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0633\u062a\u0645\u0639\u064a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\r\n if (btnExo && btnEndo && actionBtn) {\r\n btnExo.addEventListener('click', () => {\r\n type = 'exothermic';\r\n setTypeStyle();\r\n resetSimulation();\r\n });\r\n\r\n btnEndo.addEventListener('click', () => {\r\n type = 'endothermic';\r\n setTypeStyle();\r\n resetSimulation();\r\n });\r\n\r\n actionBtn.addEventListener('click', () => {\r\n if (!isRunning && progress === 0) {\r\n startSimulation();\r\n } else {\r\n resetSimulation();\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0623\u0648\u0644\u064a\u0629\r\n setTypeStyle();\r\n refreshUI();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17542","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/comments?post=17542"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17542\/revisions"}],"predecessor-version":[{"id":17543,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17542\/revisions\/17543"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}