\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\">\r\n <\/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 <style>\r\n \/* === Base === *\/\r\n * {\r\n box-sizing: border-box;\r\n }\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 margin: 0;\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 {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #1e1b4b;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #4f46e5;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* === 3D Simulator === *\/\r\n .sim-wrapper {\r\n background: rgba(15, 15, 40, 0.7);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n border-radius: 1.5rem;\r\n padding: 1.5rem;\r\n backdrop-filter: blur(4px);\r\n box-shadow: 0 0 40px rgba(99, 102, 241, 0.15);\r\n margin: 1.5rem 0 2rem;\r\n }\r\n .sim-grid {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n }\r\n @media (min-width: 768px) {\r\n .sim-grid {\r\n flex-direction: row;\r\n align-items: stretch;\r\n }\r\n .sim-grid>div {\r\n flex: 1;\r\n }\r\n }\r\n .sim-canvas-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 320px;\r\n }\r\n .sim-canvas-wrap canvas {\r\n width: 100%;\r\n max-width: 340px;\r\n aspect-ratio: 1\/1;\r\n border-radius: 1.25rem;\r\n background: radial-gradient(ellipse at center, #1a1a3e 0%, #0c0c1e 100%);\r\n box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.2);\r\n display: block;\r\n touch-action: none;\r\n }\r\n .sim-controls {\r\n display: flex;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n .sim-controls button {\r\n background: rgba(79, 70, 229, 0.25);\r\n border: 1px solid rgba(99, 102, 241, 0.4);\r\n color: #c7d2fe;\r\n padding: 0.4rem 1.2rem;\r\n border-radius: 9999px;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n font-family: 'Cairo', sans-serif;\r\n backdrop-filter: blur(4px);\r\n }\r\n .sim-controls button:hover {\r\n background: rgba(79, 70, 229, 0.45);\r\n border-color: #818cf8;\r\n color: #fff;\r\n }\r\n .sim-controls button.active {\r\n background: rgba(79, 70, 229, 0.5);\r\n border-color: #a5b4fc;\r\n box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .sim-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n justify-content: center;\r\n }\r\n .sim-info-card {\r\n background: rgba(0, 0, 0, 0.35);\r\n padding: 0.9rem 1.2rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n .sim-info-card .label {\r\n font-weight: 700;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n font-size: 0.95rem;\r\n }\r\n .sim-info-card .label .dot {\r\n display: inline-block;\r\n width: 0.6rem;\r\n height: 0.6rem;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n }\r\n .sim-info-card .desc {\r\n color: #cbd5e1;\r\n font-size: 0.85rem;\r\n line-height: 1.6;\r\n margin-top: 0.2rem;\r\n }\r\n .sim-info-card .charge-box {\r\n background: rgba(99, 102, 241, 0.15);\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n border-radius: 0.75rem;\r\n padding: 0.6rem 1rem;\r\n margin-top: 0.3rem;\r\n color: #a5b4fc;\r\n font-size: 0.9rem;\r\n }\r\n .sim-info-card .charge-box strong {\r\n color: #e0e7ff;\r\n }\r\n\r\n \/* === utility === *\/\r\n .icon-svg-inline {\r\n display: inline-block;\r\n width: 1.2em;\r\n height: 1.2em;\r\n vertical-align: middle;\r\n fill: currentColor;\r\n flex-shrink: 0;\r\n }\r\n .no-emoji {\r\n \/* placeholder for emoji-free icons *\/\r\n }\r\n .border-glow {\r\n box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);\r\n }\r\n .bg-card-glass {\r\n background: rgba(30, 27, 75, 0.5);\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n \/* table responsive *\/\r\n .table-wrap {\r\n overflow-x: auto;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n .table-wrap table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n text-align: right;\r\n font-size: 1.125rem;\r\n background: rgba(15, 15, 40, 0.5);\r\n }\r\n .table-wrap thead {\r\n background: rgba(79, 70, 229, 0.2);\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n }\r\n .table-wrap th {\r\n padding: 0.75rem 1rem;\r\n color: #a5b4fc;\r\n font-weight: 700;\r\n font-size: 0.95rem;\r\n }\r\n .table-wrap td {\r\n padding: 0.7rem 1rem;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.04);\r\n color: #e2e8f0;\r\n }\r\n .table-wrap tr:last-child td {\r\n border-bottom: none;\r\n }\r\n .table-wrap tr:hover td {\r\n background: rgba(255, 255, 255, 0.03);\r\n }\r\n .table-wrap td .highlight {\r\n color: #818cf8;\r\n font-weight: 600;\r\n }\r\n\r\n \/* lall fixes *\/\r\n .list-deco {\r\n list-style: none;\r\n padding-right: 0;\r\n }\r\n .list-deco li {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.6rem;\r\n margin-bottom: 0.4rem;\r\n }\r\n .list-deco li .marker {\r\n display: inline-block;\r\n width: 0.4rem;\r\n height: 0.4rem;\r\n border-radius: 50%;\r\n margin-top: 0.5rem;\r\n flex-shrink: 0;\r\n background: #4f46e5;\r\n }\r\n .grid-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\r\n gap: 0.75rem;\r\n }\r\n .grid-cards .card {\r\n background: rgba(0, 0, 0, 0.3);\r\n padding: 0.7rem 0.5rem;\r\n border-radius: 0.75rem;\r\n text-align: center;\r\n border: 1px solid rgba(255, 255, 255, 0.06);\r\n font-weight: 600;\r\n font-size: 1.125rem;\r\n }\r\n \/* override for small elements *\/\r\n .text-small {\r\n font-size: 0.95rem;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n\r\n \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\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/h1>\r\n <p class=\"text-indigo-300 text-lg\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/p>\r\n <\/div>\r\n <div style=\"display:flex;align-items:center;gap:0.5rem;background: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: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\r\n <div class=\"space-y-6 text-right\">\r\n\r\n \r\n <div class=\"mb-10 bg-gradient-to-br from-indigo-900\/60 via-purple-900\/60 to-slate-900\/80 p-6 l:p-8 rounded-3xl border border-indigo-500\/30 shadow-xl relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-64 h-64 bg-amber-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n <div class=\"relative z-10 flex items-center gap-4\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500\/30 to-amber-500\/30 text-amber-300 flex items-center justify-center border border-amber-400\/30 text-3xl shadow-[0_0_20px_rgba(245,158,11,0.3)] shrink-0\">\r\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-purple-500\/20 text-purple-300 text-lg font-semibold rounded-full border border-purple-500\/30 mb-2\">\u0639\u0644\u0648\u0645 \u0627\u0644\u0623\u0631\u0636 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/span>\r\n <h1 class=\"text-3xl font-bold text-white\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/h1>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-amber-500\/20 to-yellow-500\/20 text-amber-400 flex items-center justify-center border border-amber-500\/30 text-xl shadow-[0_0_15px_rgba(245,158,11,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n <\/span>\r\n 1. \u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629 \u0644\u0644\u062f\u0631\u0633\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg relative overflow-hidden leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg leading-relaxed\">\r\n \u062a\u064f\u0635\u0646\u064e\u0651\u0641 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 \u0625\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0627\u062a\u064d \u0631\u0626\u064a\u0633\u0629\u064d\u061b \u0627\u0639\u062a\u0645\u0627\u062f\u0627\u064b \u0639\u0644\u0649 \u062e\u0635\u0627\u0626\u0635\u0647\u0627 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0648\u0627\u0644\u0623\u064a\u0648\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646) \u0627\u0644\u0645\u0643\u0648\u0646 \u0644\u0647\u0627.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-emerald-500\/20 to-teal-500\/20 text-emerald-400 flex items-center justify-center border border-emerald-500\/30 text-xl shadow-[0_0_15px_rgba(16,185,129,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 2. \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u062a\u0639\u0644\u0651\u0645 (\u0627\u0644\u0623\u0647\u062f\u0627\u0641)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg relative overflow-hidden leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-4 font-semibold\">\u0628\u0646\u0647\u0627\u064a\u0629 \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633\u060c \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0642\u0627\u062f\u0631\u0627\u064b \u0639\u0644\u0649:<\/p>\r\n <ul class=\"space-y-3 text-slate-200 text-lg list-deco\">\r\n <li><span class=\"marker\" style=\"background:#34d399;\"><\/span> \u0623\u0630\u0643\u0631 \u0623\u0645\u062b\u0644\u0629\u064b \u0639\u0644\u0649 \u0643\u0644\u0650\u0651 \u0645\u062c\u0645\u0648\u0639\u0629\u064d \u0645\u0639\u062f\u0646\u064a\u0629.<\/li>\r\n <li><span class=\"marker\" style=\"background:#34d399;\"><\/span> \u0623\u0631\u0628\u0637 \u0628\u064a\u0646 \u0648\u062c\u0648\u062f \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0641\u064a \u0627\u0644\u0637\u0628\u064a\u0639\u0629 \u0648\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u062a\u064a \u062a\u0648\u062c\u062f \u0641\u064a\u0647\u0627.<\/li>\r\n <li><span class=\"marker\" style=\"background:#34d399;\"><\/span> \u0623\u0648\u0636\u0650\u0651\u062d \u0628\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u0648\u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0644\u0644\u0645\u0639\u0627\u062f\u0646.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500\/20 to-cyan-500\/20 text-blue-400 flex items-center justify-center border border-blue-500\/30 text-xl shadow-[0_0_15px_rgba(59,130,246,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\/><\/svg>\r\n <\/span>\r\n 3. \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 (Minerals Classification)\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-4\">\r\n \u0639\u064f\u0631\u0641\u062a \u0622\u0644\u0627\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0641\u064a \u0627\u0644\u0637\u0628\u064a\u0639\u0629\u060c \u0644\u0643\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0627\u0644\u062a\u064a \u062a\u062f\u062e\u0644 \u0641\u064a \u062a\u0631\u0643\u064a\u0628 \u0645\u0639\u0638\u0645 \u0635\u062e\u0648\u0631 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 \u0639\u062f\u062f\u0647\u0627 \u0642\u0644\u064a\u0644 \u0646\u0633\u0628\u064a\u0627\u064b.\r\n <\/p>\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n \u064a\u0635\u0646\u0641 \u0627\u0644\u0639\u0644\u0645\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0625\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0631\u0626\u064a\u0633\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 <strong class=\"text-indigo-300\">\u0627\u0644\u0623\u064a\u0648\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646)<\/strong> \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647 \u0627\u0644\u0645\u0639\u062f\u0646.\r\n <\/p>\r\n <h3 class=\"text-xl font-bold text-indigo-100 mb-4 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5 text-indigo-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z\"\/><\/svg>\r\n \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u062f\u0646\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629 \u0627\u0644\u0640 8:\r\n <\/h3>\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-purple-300 text-lg\">1. \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-cyan-300 text-lg\">2. \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-rose-300 text-lg\">3. \u0627\u0644\u0623\u0643\u0627\u0633\u064a\u062f<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-slate-300 text-lg\">4. \u0627\u0644\u0647\u0627\u0644\u064a\u062f\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-yellow-300 text-lg\">5. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-orange-300 text-lg\">6. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u062f\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-lime-300 text-lg\">7. \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-amber-300 text-lg\">8. \u0627\u0644\u0623\u062d\u0627\u062f\u064a\u0651\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-purple-500\/20 to-fuchsia-500\/20 text-purple-400 flex items-center justify-center border border-purple-500\/30 text-xl shadow-[0_0_15px_rgba(168,85,247,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\/><\/svg>\r\n <\/span>\r\n 4. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649: \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a (Silicates)\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 mb-6 text-slate-200 text-lg\">\r\n <li><strong class=\"text-purple-300\">\u0627\u0644\u0648\u0641\u0631\u0629:<\/strong> \u062a\u064f\u0634\u0643\u0651\u0644 \u0623\u0643\u062b\u0631 \u0645\u0646 <strong class=\"text-white\">90%<\/strong> \u0645\u0646 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629\u060c \u0648\u0647\u064a \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0643\u062b\u0631 \u0627\u0646\u062a\u0634\u0627\u0631\u0627\u064b.<\/li>\r\n <li><strong class=\"text-purple-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u062c\u0645\u064a\u0639 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a \u0639\u0644\u0649 \u0639\u0646\u0635\u0631\u064a \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646 (Si) \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O)\u060c \u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0623\u062e\u0631\u0649 \u0645\u062b\u0644 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0648\u0627\u0644\u062d\u062f\u064a\u062f.<\/li>\r\n <\/ul>\r\n <div class=\"bg-purple-950\/40 p-5 rounded-xl border border-purple-500\/30 mb-6\">\r\n <h3 class=\"text-xl font-bold text-purple-200 mb-2 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\/><\/svg>\r\n \u0648\u062d\u062f\u0629 \u0627\u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0633\u064a\u0644\u064a\u0643\u0627 \u0631\u0628\u0627\u0639\u064a\u0629 \u0627\u0644\u0623\u0648\u062c\u0647 (SiO\u2084)\u2074\u207b\r\n <\/h3>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 4 \u0630\u0631\u0627\u062a \u0623\u0643\u0633\u062c\u064a\u0646 \u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0640 \u0630\u0631\u0629 \u0633\u064a\u0644\u064a\u0643\u0648\u0646 \u0645\u0631\u0643\u0632\u064a\u0629 \u0628\u0631\u0648\u0627\u0628\u0637 \u062a\u0633\u0627\u0647\u0645\u064a\u0629 \u0642\u0648\u064a\u0629 \u0645\u0634\u0643\u0644\u0629 \u0647\u0631\u0645\u0627\u064b \u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0648\u062c\u0647.\r\n <\/p>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-indigo-100 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n \u0637\u0631\u0642 \u062a\u0631\u0627\u0628\u0637 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627 \u0631\u0628\u0627\u0639\u064a\u0629 \u0627\u0644\u0623\u0648\u062c\u0647:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-4\">\r\n <li><strong class=\"text-white\">\u0645\u0641\u0631\u062f\u0629 (\u0645\u0646\u0641\u0631\u062f\u0629):<\/strong> \u0645\u062b\u0644 \u0645\u0639\u062f\u0646 \u0627\u0644\u0623\u0648\u0644\u064a\u0641\u064a\u0646.<\/li>\r\n <li><strong class=\"text-white\">\u0633\u0644\u0627\u0633\u0644 \u0623\u0648 \u0635\u0641\u0627\u0626\u062d \u0623\u0648 \u0634\u0628\u0643\u0627\u062a \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f:<\/strong> \u0645\u062b\u0644 \u0645\u0639\u062f\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632 \u0648\u0627\u0644\u0645\u0627\u064a\u0643\u0627.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"sim-wrapper\">\r\n <div class=\"sim-grid\">\r\n \r\n <div class=\"sim-canvas-wrap\">\r\n <canvas id=\"tetraCanvas\" width=\"400\" height=\"400\"><\/canvas>\r\n <div class=\"sim-controls\">\r\n <button id=\"rotateToggle\" class=\"active\">\u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/button>\r\n <button id=\"resetView\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0636\u0628\u0637<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sim-info\">\r\n <div class=\"sim-info-card\">\r\n <div class=\"label\">\r\n <span class=\"dot\" style=\"background:#818cf8;\"><\/span>\r\n \u0630\u0631\u0629 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646 (Si)\r\n <\/div>\r\n <div class=\"desc\">\u062a\u0633\u062a\u0642\u0631 \u0630\u0631\u0629 \u0633\u064a\u0644\u064a\u0643\u0648\u0646 \u0648\u0627\u062d\u062f\u0629 \u0641\u064a \u0645\u0631\u0643\u0632 \u0627\u0644\u0647\u0631\u0645. \u062d\u062c\u0645\u0647\u0627 \u0623\u0635\u063a\u0631 \u0646\u0633\u0628\u064a\u0627\u064b \u0648\u062a\u062d\u0645\u0644 \u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629 (+4).<\/div>\r\n <\/div>\r\n <div class=\"sim-info-card\">\r\n <div class=\"label\">\r\n <span class=\"dot\" style=\"background:#f87171;\"><\/span>\r\n \u0630\u0631\u0627\u062a \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O)\r\n <\/div>\r\n <div class=\"desc\">\u062a\u062d\u064a\u0637 \u0628\u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646 4 \u0630\u0631\u0627\u062a \u0623\u0643\u0633\u062c\u064a\u0646 \u0623\u0643\u0628\u0631 \u062d\u062c\u0645\u0627\u064b. \u0643\u0644 \u0630\u0631\u0629 \u062a\u062d\u0645\u0644 \u0634\u062d\u0646\u0629 \u0633\u0627\u0644\u0628\u0629 (-2)\u060c \u0648\u062a\u062a\u0648\u0636\u0639 \u0641\u064a \u0632\u0648\u0627\u064a\u0627 \u0634\u0643\u0644 \u0647\u0631\u0645\u064a (\u0631\u0628\u0627\u0639\u064a \u0627\u0644\u0623\u0648\u062c\u0647).<\/div>\r\n <\/div>\r\n <div class=\"sim-info-card\">\r\n <div class=\"charge-box\">\r\n <strong>\u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629: -4<\/strong>\r\n <div style=\"font-size:0.9rem;color:#a5b4fc;margin-top:0.2rem;\">\r\n (Si\u207a\u2074) + 4 \u00d7 (O\u207b\u00b2) = -4<br\/>\r\n \u062a\u062d\u062a\u0627\u062c \u0647\u0630\u0647 \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0644\u0644\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0623\u064a\u0648\u0646\u0627\u062a \u0645\u0648\u062c\u0628\u0629 \u0623\u062e\u0631\u0649 (\u0645\u062b\u0644 \u0627\u0644\u062d\u062f\u064a\u062f\u060c \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645\u060c \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645) \u0623\u0648 \u0628\u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0633\u064a\u0644\u064a\u0643\u0627 \u0623\u062e\u0631\u0649 \u0644\u062a\u0643\u0648\u064a\u0646 \u0645\u0639\u0627\u062f\u0646 \u0645\u0633\u062a\u0642\u0631\u0629.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-cyan-500\/20 to-teal-500\/20 text-cyan-400 flex items-center justify-center border border-cyan-500\/30 text-xl shadow-[0_0_15px_rgba(6,182,212,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 5. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629: \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a (Carbonates)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-cyan-300\">\u0627\u0644\u062a\u0631\u062a\u064a\u0628:<\/strong> \u062b\u0627\u0646\u064a \u0623\u0643\u062b\u0631 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0634\u064a\u0648\u0639\u0627\u064b \u0628\u0639\u062f \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a.<\/li>\r\n <li><strong class=\"text-cyan-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a <strong class=\"text-white\">(CO\u2083)\u00b2\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628\u0629 \u0645\u062b\u0644 Ca\u00b2\u207a \u0623\u0648 Mg\u00b2\u207a \u0623\u0648 Cu\u00b2\u207a.<\/li>\r\n <\/ul>\r\n <div class=\"bg-cyan-950\/40 p-5 rounded-xl border border-cyan-500\/30\">\r\n <h3 class=\"text-xl font-bold text-cyan-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a (CaCO\u2083):<\/strong> \u0623\u0643\u062b\u0631 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a \u0634\u064a\u0648\u0639\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0644\u0627\u0642.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a:<\/strong> (CaMg(CO\u2083)\u2082).<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0645\u0627\u0644\u0643\u064a\u062a:<\/strong> (Cu\u2082CO\u2083(OH)\u2082).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-rose-500\/20 to-red-500\/20 text-rose-400 flex items-center justify-center border border-rose-500\/30 text-xl shadow-[0_0_15px_rgba(244,63,94,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\/><\/svg>\r\n <\/span>\r\n 6. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629: \u0627\u0644\u0623\u0643\u0627\u0633\u064a\u062f (Oxides)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-rose-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 <strong class=\"text-white\">O\u00b2\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0641\u0644\u0632\u064a \u0645\u0648\u062c\u0628 \u0627\u0644\u0634\u062d\u0646\u0629.<\/li>\r\n <li><strong class=\"text-rose-300\">\u0627\u0644\u0623\u0647\u0645\u064a\u0629:<\/strong> \u062a\u064f\u0639\u062f \u0645\u0635\u062f\u0631\u0627\u064b \u0631\u0626\u064a\u0633\u0627\u064b \u0644\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062e\u0627\u0645\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062f \u0648\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0623\u062e\u0631\u0649.<\/li>\r\n <\/ul>\r\n <div class=\"bg-rose-950\/40 p-5 rounded-xl border border-rose-500\/30\">\r\n <h3 class=\"text-xl font-bold text-rose-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a (Fe\u2082O\u2083):<\/strong> \u062e\u0627\u0645 \u0645\u0647\u0645 \u0644\u0644\u062d\u062f\u064a\u062f \u0630\u0648 \u0644\u0648\u0646 \u0623\u062d\u0645\u0631 \u0623\u0648 \u0631\u0645\u0627\u062f\u064a.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0645\u0627\u063a\u0646\u062a\u064a\u062a (Fe\u2083O\u2084):<\/strong> \u062e\u0627\u0645 \u062d\u062f\u064a\u062f \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0623\u0633\u0648\u062f \u0627\u0644\u0644\u0648\u0646.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-slate-500\/20 to-zinc-500\/20 text-slate-300 flex items-center justify-center border border-slate-500\/30 text-xl shadow-[0_0_15px_rgba(148,163,184,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 13a3 3 0 11-6 0 3 3 0 016 0z\"\/><\/svg>\r\n <\/span>\r\n 7. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629: \u0627\u0644\u0647\u0627\u0644\u064a\u062f\u0627\u062a (Halides)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-slate-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0627\u062a\u062d\u0627\u062f \u0623\u062d\u062f \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u0627\u0644\u0648\u062c\u064a\u0646\u0627\u062a \u0633\u0627\u0644\u0628\u0629 \u0627\u0644\u0634\u062d\u0646\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0643\u0644\u0648\u0631 Cl\u207b \u0648\u0627\u0644\u0641\u0644\u0648\u0631 F\u207b) \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628 \u0627\u0644\u0634\u062d\u0646\u0629 (\u0645\u062b\u0644 Na\u207a \u0623\u0648 Ca\u00b2\u207a).<\/li>\r\n <\/ul>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-xl border border-slate-500\/30\">\r\n <h3 class=\"text-xl font-bold text-slate-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0647\u0627\u0644\u064a\u062a (NaCl):<\/strong> \u0648\u0647\u0648 \u0645\u0644\u062d \u0627\u0644\u0637\u0639\u0627\u0645 \u0627\u0644\u0634\u0627\u0626\u0639.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0641\u0644\u0648\u0631\u064a\u062a (CaF\u2082):<\/strong> \u0645\u0639\u062f\u0646 \u0632\u062c\u0627\u062c\u064a \u0627\u0644\u0628\u0631\u064a\u0642 \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 \u0648\u0627\u0644\u0641\u0644\u0648\u0631.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-yellow-400\/20 to-amber-400\/20 text-yellow-300 flex items-center justify-center border border-yellow-400\/30 text-xl shadow-[0_0_15px_rgba(250,204,21,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 8. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a (Sulphates)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-yellow-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a <strong class=\"text-white\">(SO\u2084)\u00b2\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628 \u0627\u0644\u0634\u062d\u0646\u0629 \u0623\u0648 \u0623\u0643\u062b\u0631.<\/li>\r\n <\/ul>\r\n <div class=\"bg-yellow-950\/40 p-5 rounded-xl border border-yellow-500\/30\">\r\n <h3 class=\"text-xl font-bold text-yellow-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u062c\u0628\u0633:<\/strong> (CaSO\u2084\u00b72H\u2082O).<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0628\u0627\u0631\u064a\u062a:<\/strong> (BaSO\u2084).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-orange-500\/20 to-red-500\/20 text-orange-400 flex items-center justify-center border border-orange-500\/30 text-xl shadow-[0_0_15px_rgba(249,115,22,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 9. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u062f\u0627\u062a (Sulfides)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-orange-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0643\u0628\u0631\u064a\u062a <strong class=\"text-white\">(S\u00b2\u207b)<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628.<\/li>\r\n <li><strong class=\"text-orange-300\">\u0627\u0644\u0623\u0647\u0645\u064a\u0629:<\/strong> \u062a\u064f\u0639\u062f \u0645\u0646 \u0623\u0647\u0645 \u062e\u0627\u0645\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062f \u0648\u0627\u0644\u0631\u0635\u0627\u0635 \u0648\u0627\u0644\u0646\u062d\u0627\u0633.<\/li>\r\n <\/ul>\r\n <div class=\"bg-orange-950\/40 p-5 rounded-xl border border-orange-500\/30\">\r\n <h3 class=\"text-xl font-bold text-orange-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0628\u064a\u0631\u064a\u062a (FeS\u2082):<\/strong> \u064a\u064f\u0639\u0631\u0641 \u0628\u0630\u0647\u0628 \u0627\u0644\u0645\u063a\u0641\u0644\u064a\u0646\u060c \u062e\u0627\u0645 \u0645\u0647\u0645 \u0644\u0644\u062d\u062f\u064a\u062f.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u063a\u0627\u0644\u064a\u0646\u0627 (PbS):<\/strong> \u062e\u0627\u0645 \u0631\u0626\u064a\u0633 \u0644\u0644\u0631\u0635\u0627\u0635 \u0630\u0648 \u0628\u0631\u064a\u0642 \u0641\u0644\u0632\u064a.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-lime-500\/20 to-green-500\/20 text-lime-400 flex items-center justify-center border border-lime-500\/30 text-xl shadow-[0_0_15px_rgba(132,204,22,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 10. \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a (Phosphates)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-lime-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a <strong class=\"text-white\">(PO\u2084)\u00b3\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628.<\/li>\r\n <li><strong class=\"text-lime-300\">\u0623\u0634\u0647\u0631 \u0645\u062b\u0627\u0644 \u0639\u0644\u064a\u0647\u0627:<\/strong> \u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a (Ca\u2085(PO\u2084)\u2083(F,Cl,OH)).<\/li>\r\n <\/ul>\r\n <div class=\"bg-indigo-900\/40 p-5 rounded-xl border border-indigo-500\/30\">\r\n <h4 class=\"font-bold text-indigo-300 mb-2 flex items-center gap-2 text-lg\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n \u0627\u0644\u0631\u0628\u0637 \u0628\u0627\u0644\u0639\u0644\u0648\u0645 \u0627\u0644\u062d\u064a\u0627\u062a\u064a\u0629:\r\n <\/h4>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u064a\u062a\u0643\u0648\u0646 \u0627\u0644\u0646\u0633\u064a\u062c \u0627\u0644\u0639\u0638\u0645\u064a \u0641\u064a \u0639\u0638\u0627\u0645 \u0627\u0644\u0643\u0627\u0626\u0646\u0627\u062a \u0627\u0644\u062d\u064a\u0629 \u0645\u0646 \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u0639\u0638\u0645\u060c \u0648\u0628\u0631\u0648\u062a\u064a\u0646 \u0627\u0644\u0643\u0648\u0644\u0627\u062c\u064a\u0646\u060c \u0648\u0645\u0639\u062f\u0646 <strong class=\"text-white\">\u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a<\/strong> (\u0627\u0644\u0630\u064a \u064a\u064f\u0633\u0645\u0649 \u0645\u0639\u062f\u0646 \u0627\u0644\u0639\u0638\u0627\u0645) \u0627\u0644\u0630\u064a \u064a\u0645\u0646\u062d \u0627\u0644\u0639\u0638\u0627\u0645 \u0642\u0648\u062a\u0647\u0627 \u0648\u0643\u062b\u0627\u0641\u062a\u0647\u0627.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-amber-500\/20 to-yellow-600\/20 text-amber-400 flex items-center justify-center border border-amber-500\/30 text-xl shadow-[0_0_15px_rgba(245,158,11,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 11. \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0623\u062d\u0627\u062f\u064a\u0629 \u0627\u0644\u0639\u0646\u0635\u0631\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed space-y-6\">\r\n <p class=\"text-slate-200 text-lg\">\r\n \u062a\u062a\u0643\u0648\u0646 \u0647\u0630\u0647 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0645\u0646 <strong class=\"text-amber-300\">\u0639\u0646\u0635\u0631 \u0643\u064a\u0645\u064a\u0627\u0626\u064a \u0648\u0627\u062d\u062f \u0641\u0642\u0637<\/strong> \u062f\u0648\u0646 \u0623\u0646 \u064a\u062a\u062d\u062f \u0645\u0639 \u063a\u064a\u0631\u0647 \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5\">\r\n <strong class=\"text-amber-300 text-lg block mb-1\">\u0627\u0644\u0630\u0647\u0628 (Au)<\/strong>\r\n <span class=\"text-lg text-slate-300\">\u0645\u0639\u062f\u0646 \u062b\u0645\u064a\u0646 \u063a\u064a\u0631 \u0646\u0634\u0637 \u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0627\u064b.<\/span>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5\">\r\n <strong class=\"text-amber-300 text-lg block mb-1\">\u0627\u0644\u0641\u0636\u0629 (Ag)<\/strong>\r\n <span class=\"text-lg text-slate-300\">\u0645\u0639\u062f\u0646 \u0645\u0648\u0635\u0644 \u0645\u0645\u062a\u0627\u0632 \u0644\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-amber-950\/40 p-5 rounded-xl border border-amber-500\/30\">\r\n <h4 class=\"font-bold text-amber-300 mb-1 flex items-center gap-2 text-lg\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n \u0645\u0644\u0627\u062d\u0638\u0629 \u0645\u0647\u0645\u0629:\r\n <\/h4>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u062a\u0645\u064a\u0632 \u0645\u0639\u0638\u0645 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0623\u062d\u0627\u062f\u064a\u0629 \u0627\u0644\u0639\u0646\u0635\u0631 \u0628\u0633\u0647\u0648\u0644\u0629 \u062a\u0641\u0627\u0639\u0644\u0647\u0627 \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646\u060c \u0648\u0644\u0630\u0644\u0643 \u0641\u0647\u064a \u0646\u0627\u062f\u0631\u0629 \u0627\u0644\u0648\u062c\u0648\u062f \u0643\u0639\u0646\u0627\u0635\u0631 \u062d\u0631\u0629 \u0641\u064a \u0627\u0644\u0637\u0628\u064a\u0639\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-stone-500\/20 to-zinc-500\/20 text-stone-300 flex items-center justify-center border border-stone-500\/30 text-xl shadow-[0_0_15px_rgba(120,113,108,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\/><\/svg>\r\n <\/span>\r\n 12. \u0627\u0644\u0635\u062e\u0648\u0631 \u0648\u0627\u0644\u0645\u0639\u0627\u062f\u0646 (Rocks and Minerals)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n <strong class=\"text-stone-300\">\u0627\u0644\u0635\u062e\u0631:<\/strong> \u0647\u0648 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629\u060c \u0648\u064a\u062a\u0643\u0648\u0646 \u063a\u0627\u0644\u0628\u0627\u064b \u0645\u0646 \u062a\u062c\u0645\u0639 \u0645\u0639\u062f\u0646 \u0648\u0627\u062d\u062f \u0623\u0648 \u0639\u062f\u0629 \u0645\u0639\u0627\u062f\u0646 \u0645\u0639\u0627\u064b.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\r\n <div class=\"bg-black\/30 p-5 rounded-xl border border-white\/10\">\r\n <h4 class=\"font-bold text-indigo-300 mb-3 text-lg border-b border-white\/10 pb-2\">\u0635\u062e\u0648\u0631 \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0645\u0639\u062f\u0646 \u0648\u0627\u062d\u062f:<\/h4>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u062c\u064a\u0631\u064a:<\/strong> \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0645\u0639\u062f\u0646 \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a.<\/li>\r\n <li><strong class=\"text-white\">\u0635\u062e\u0631 \u0627\u0644\u062f\u0648\u0646\u064a\u062a:<\/strong> \u064a\u062a\u0643\u0648\u0646 \u0628\u0635\u0641\u0629 \u0631\u0626\u064a\u0633\u0629 \u0645\u0646 \u0645\u0639\u062f\u0646 \u0627\u0644\u0623\u0648\u0644\u064a\u0641\u064a\u0646.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-5 rounded-xl border border-white\/10\">\r\n <h4 class=\"font-bold text-indigo-300 mb-3 text-lg border-b border-white\/10 pb-2\">\u0635\u062e\u0648\u0631 \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0639\u062f\u0629 \u0645\u0639\u0627\u062f\u0646:<\/h4>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg\">\r\n <li><strong class=\"text-white\">\u0635\u062e\u0631 \u0627\u0644\u063a\u0631\u0627\u0646\u064a\u062a:<\/strong> \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0641\u0644\u0633\u0628\u0627\u0631\u060c \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632\u060c \u0648\u0627\u0644\u0645\u0627\u064a\u0643\u0627.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/20\">\r\n <strong class=\"block text-indigo-300 mb-2 text-lg\">\u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0644\u0645\u0643\u0648\u0646\u0629 \u0644\u0645\u0639\u0638\u0645 \u0635\u062e\u0648\u0631 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629:<\/strong>\r\n <p class=\"text-slate-300 text-lg\">\u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632\u060c \u0627\u0644\u0641\u0644\u0633\u0628\u0627\u0631\u060c \u0627\u0644\u0645\u0627\u064a\u0643\u0627\u060c \u0627\u0644\u0628\u064a\u0631\u0648\u0643\u0633\u064a\u0646\u060c \u0627\u0644\u0623\u0645\u0641\u064a\u0628\u0648\u0644\u060c \u0627\u0644\u0623\u0648\u0644\u064a\u0641\u064a\u0646\u060c \u0627\u0644\u063a\u0627\u0631\u0646\u062a\u060c \u0648\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-emerald-500\/20 to-teal-500\/20 text-emerald-400 flex items-center justify-center border border-emerald-500\/30 text-xl shadow-[0_0_15px_rgba(16,185,129,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 13. \u0627\u0644\u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0644\u0644\u0645\u0639\u0627\u062f\u0646\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n \u0644\u0644\u0645\u0639\u0627\u062f\u0646 \u0642\u064a\u0645\u0629 \u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0643\u0628\u064a\u0631\u0629 \u062c\u062f\u0627\u064b \u0648\u062a\u062f\u062e\u0644 \u0641\u064a \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0648\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0629:\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-8\">\r\n <div class=\"bg-gradient-to-br from-yellow-900\/40 to-slate-900\/80 p-5 rounded-xl border border-yellow-500\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">🏅<\/span>\r\n <h4 class=\"font-bold text-yellow-400 text-xl mb-2\">\u0627\u0644\u0630\u0647\u0628<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u062d\u0644\u064a \u0648\u0627\u0644\u0645\u062c\u0648\u0647\u0631\u0627\u062a \u0648\u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u062f\u0642\u064a\u0642\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-orange-900\/40 to-slate-900\/80 p-5 rounded-xl border border-orange-500\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">⚡<\/span>\r\n <h4 class=\"font-bold text-orange-400 text-xl mb-2\">\u0627\u0644\u0646\u062d\u0627\u0633<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0623\u0633\u0644\u0627\u0643 \u0648\u0627\u0644\u062a\u0648\u0635\u064a\u0644\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629\u060c \u0648\u064a\u064f\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0645\u0627\u0644\u0643\u064a\u062a.<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-slate-700\/40 to-slate-900\/80 p-5 rounded-xl border border-slate-500\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">⚒<\/span>\r\n <h4 class=\"font-bold text-slate-300 text-xl mb-2\">\u0627\u0644\u062d\u062f\u064a\u062f \u0648\u0627\u0644\u0635\u0644\u0628<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0628\u0646\u0627\u0621 \u0648\u0627\u0644\u0647\u064a\u0627\u0643\u0644 \u0648\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a (\u0645\u0646 \u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a \u0648\u0627\u0644\u0645\u0627\u063a\u0646\u062a\u064a\u062a).<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-zinc-600\/40 to-slate-900\/80 p-5 rounded-xl border border-zinc-400\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">✈<\/span>\r\n <h4 class=\"font-bold text-zinc-300 text-xl mb-2\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a \u0648\u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0644\u062e\u0641\u062a\u0647 \u0648\u0645\u062a\u0627\u0646\u062a\u0647.<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-cyan-900\/40 to-slate-900\/80 p-5 rounded-xl border border-cyan-500\/30 md:col-span-2 lg:col-span-2\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">💻<\/span>\r\n <h4 class=\"font-bold text-cyan-400 text-xl mb-2\">\u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632 \u0648\u064a\u062f\u062e\u0644 \u0641\u064a \u0631\u0642\u0627\u0626\u0642 \u0627\u0644\u062d\u0627\u0633\u0648\u0628\u060c \u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0647\u0648\u0627\u062a\u0641\u060c \u0648\u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-indigo-950\/50 p-6 rounded-2xl border border-indigo-500\/30 flex flex-col md:flex-row gap-6 items-center\">\r\n <div class=\"text-5xl md:text-6xl shrink-0\" style=\"font-size:3rem;\">🧠<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-indigo-300 text-xl mb-2\">\u0627\u0644\u0631\u0628\u0637 \u0628\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627:<\/h4>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u0639\u062a\u0645\u062f \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0630\u0643\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0646\u0627\u062f\u0631\u0629 \u062a\u064f\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0646\u060c \u0645\u062b\u0644 \u0645\u0639\u062f\u0646 <strong class=\"text-white\">\u0627\u0644\u0645\u0648\u0646\u0627\u0632\u064a\u062a<\/strong> (\u0627\u0644\u062a\u0627\u0628\u0639 \u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-red-600\/20 to-slate-900 text-white flex items-center justify-center border border-red-500\/30 text-xl shadow-[0_0_15px_rgba(220,38,38,0.2)]\" style=\"font-size:1.8rem;font-weight:700;\">🇯🇴<\/span>\r\n 14. \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0641\u064a \u0627\u0644\u0623\u0631\u062f\u0646\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n \u064a\u062d\u062a\u0648\u064a \u0627\u0644\u0623\u0631\u062f\u0646 \u0639\u0644\u0649 \u062b\u0631\u0648\u0627\u062a \u0645\u0639\u062f\u0646\u064a\u0629 \u0647\u0627\u0645\u0629 \u0630\u0627\u062a \u0642\u064a\u0645\u0629 \u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0645\u062b\u0644 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a\u060c \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u060c \u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u062c\u064a\u0631\u064a\u060c \u0627\u0644\u0646\u062d\u0627\u0633 \u0648\u0627\u0644\u0630\u0647\u0628.\r\n <\/p>\r\n <div class=\"bg-gradient-to-r from-purple-900\/40 to-indigo-900\/40 p-5 rounded-xl border border-purple-500\/30 mb-8\">\r\n <h4 class=\"font-bold text-purple-200 text-lg mb-1 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n \u0645\u0639\u0644\u0648\u0645\u0629 \u0639\u0646 \u0627\u0644\u0628\u0648\u062a\u0627\u0633 \u0648\u0627\u0644\u0623\u0631\u062f\u0646:\r\n <\/h4>\r\n <p class=\"text-slate-300 text-lg\">\r\n \u064a\u064f\u0639\u062f \u0627\u0644\u0623\u0631\u062f\u0646 <strong class=\"text-purple-300\">\u062b\u0627\u0645\u0646 \u0623\u0643\u0628\u0631 \u062f\u0648\u0644\u0629 \u0645\u064f\u0635\u062f\u0651\u0631\u0629 \u0644\u0644\u0628\u0648\u062a\u0627\u0633<\/strong> \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645 \u0628\u0645\u0639\u062f\u0644 \u062a\u0635\u062f\u064a\u0631 \u064a\u0628\u0644\u063a \u0646\u062d\u0648 2.35 \u0645\u0644\u064a\u0648\u0646 \u0637\u0646 \u0633\u0646\u0648\u064a\u0627\u064b (\u0627\u0644\u0645\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0645\u0639\u062f\u0646 \u0627\u0644\u0633\u064a\u0644\u0641\u064a\u062a).\r\n <\/p>\r\n <\/div>\r\n <h3 class=\"font-bold mb-4 text-white text-xl\">\u0627\u0644\u062c\u062f\u0648\u0644 (3): \u0628\u0639\u0636 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0641\u064a \u0627\u0644\u0623\u0631\u062f\u0646 \u0648\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a\u0647\u0627 \u0648\u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0644\u0647\u0627:<\/h3>\r\n <div class=\"table-wrap\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>\u0627\u0644\u0645\u0639\u062f\u0646<\/th>\r\n <th>\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u0630\u064a \u064a\u0648\u062c\u062f \u0641\u064a\u0647<\/th>\r\n <th>\u0623\u0647\u0645 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a (\u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a)<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a<\/td><td>\u0627\u0644\u0632\u0631\u0627\u0639\u0629 \u0648\u0627\u0644\u0623\u0633\u0645\u062f\u0629\u060c \u062d\u0645\u0636 \u0627\u0644\u0641\u0633\u0641\u0648\u0631\u064a\u0643.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a<\/span><\/td><td>\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u062c\u064a\u0631\u064a\u060c \u0627\u0644\u062a\u0631\u0627\u0641\u0631\u062a\u064a\u0646<\/td><td>\u0627\u0644\u0625\u0633\u0645\u0646\u062a\u060c \u0627\u0644\u062f\u0647\u0627\u0646\u0627\u062a\u060c \u0627\u0644\u0623\u062f\u0648\u064a\u0629\u060c \u0627\u0644\u0648\u0631\u0642.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a<\/td><td>\u0627\u0644\u0633\u0645\u0627\u062f\u060c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0627\u062a\u060c \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0632\u062c\u0627\u062c.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632<\/span><\/td><td>\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u0631\u0645\u0644\u064a<\/td><td>\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0632\u062c\u0627\u062c\u060c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0627\u062a\u060c \u0627\u0644\u062f\u064a\u0643\u0648\u0631\u0627\u062a.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u062c\u0628\u0633<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u062c\u0628\u0633<\/td><td>\u0627\u0644\u0628\u0646\u0627\u0621\u060c \u0627\u0644\u062a\u0648\u0631\u064a\u0642\u060c \u0648\u0627\u0644\u0637\u0628.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0630\u0647\u0628<\/span><\/td><td>\u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u0628\u0631\u0643\u0627\u0646\u064a\u0629 \u0627\u0644\u0645\u062c\u0648\u064a\u0629<\/td><td>\u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u0648\u0627\u0644\u062d\u0644\u064a.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a<\/span><\/td><td>\u064a\u0635\u0627\u062d\u0628 \u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u062c\u064a\u0631\u064a\u0629<\/td><td>\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0635\u0644\u0628 \u0648\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0633\u064a\u0644\u0641\u064a\u062a (\u0627\u0644\u0628\u0648\u062a\u0627\u0633)<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u0633\u064a\u0644\u0641\u064a\u0646\u064a\u062a<\/td><td>\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629 \u0648\u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629.<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-16 bg-gradient-to-br from-indigo-900\/80 via-purple-900\/70 to-slate-900\/90 p-6 rounded-3xl border border-indigo-500\/40 shadow-[0_0_50px_rgba(99,102,241,0.25)] relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-80 h-80 bg-indigo-500\/20 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/2 pointer-events-none\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-80 h-80 bg-purple-500\/20 rounded-full blur-3xl translate-y-1\/2 -translate-x-1\/2 pointer-events-none\"><\/div>\r\n <div class=\"relative z-10\">\r\n <div class=\"flex items-center gap-4 border-b border-white\/10 pb-6 mb-8\">\r\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500\/30 to-purple-500\/30 text-indigo-300 flex items-center justify-center border border-indigo-400\/40 text-3xl shadow-[0_0_20px_rgba(99,102,241,0.3)]\">\r\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <h2 class=\"text-2xl font-bold text-white\">\u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/h2>\r\n <p class=\"text-indigo-200 text-lg mt-1\">\u0645\u0631\u0627\u062c\u0639\u0629 \u0634\u0627\u0645\u0644\u0629 \u0648\u0633\u0631\u064a\u0639\u0629 \u0644\u0623\u0647\u0645 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0648\u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0648\u0627\u0631\u062f\u0629 \u0641\u064a \u0627\u0644\u062f\u0631\u0633<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-indigo-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-indigo-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-indigo-500\/20 text-indigo-400 flex items-center justify-center text-base\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z\"\/><\/svg>\r\n <\/span>\r\n \u0623\u0633\u0627\u0633 \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646\r\n <\/h3>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u064f\u0635\u0646\u064e\u0651\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0625\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0631\u0626\u064a\u0633\u064a\u0629 \u0627\u0639\u062a\u0645\u0627\u062f\u0627\u064b \u0639\u0644\u0649 <strong class=\"text-indigo-200\">\u0627\u0644\u0623\u064a\u0648\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646)<\/strong> \u0627\u0644\u0645\u0643\u0648\u0646 \u0644\u0647\u0627. \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0645\u0646\u0647\u0627 \u0641\u064a \u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636 \u0639\u062f\u062f\u0647\u0627 \u0642\u0644\u064a\u0644 \u0646\u0633\u0628\u064a\u0627\u064b.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-purple-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-purple-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-purple-500\/20 text-purple-400 flex items-center justify-center text-base\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\/><\/svg>\r\n <\/span>\r\n \u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a (Silicates)\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg marker:text-purple-400\">\r\n <li>\u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0643\u062b\u0631 \u0648\u0641\u0631\u0629 \u0641\u064a \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 (>90%).<\/li>\r\n <li>\u0648\u062d\u062f\u0629 \u0627\u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: <strong class=\"text-purple-200\">\u0633\u064a\u0644\u064a\u0643\u0627 \u0631\u0628\u0627\u0639\u064a\u0629 \u0627\u0644\u0623\u0648\u062c\u0647 (SiO\u2084)\u2074\u207b<\/strong>.<\/li>\r\n <li>\u062a\u0631\u062a\u0628\u0637 \u0627\u0644\u0647\u064a\u0627\u0643\u0644 \u0628\u0628\u0639\u0636\u0647\u0627 \u0641\u064a \u0633\u0644\u0627\u0633\u0644\u060c \u0635\u0641\u0627\u0626\u062d\u060c \u0623\u0648 \u0634\u0628\u0643\u0627\u062a \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f (\u0645\u062b\u0644 \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632 \u0648\u0627\u0644\u0645\u0627\u064a\u0643\u0627).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-cyan-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-cyan-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-cyan-500\/20 text-cyan-400 flex items-center justify-center text-base\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0644\u0627\u0633\u064a\u0644\u064a\u0643\u0627\u062a\u064a\u0629\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-1.5 text-slate-300 text-lg marker:text-cyan-400\">\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a (CO\u2083)\u00b2\u207b:<\/strong> \u0645\u062b\u0644 \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a \u0648\u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a.<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0623\u0643\u0627\u0633\u064a\u062f O\u00b2\u207b:<\/strong> \u0645\u062b\u0644 \u062e\u0627\u0645\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062f (\u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a \u0648\u0627\u0644\u0645\u0627\u063a\u0646\u062a\u064a\u062a).<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0647\u0627\u0644\u064a\u062f\u0627\u062a:<\/strong> \u0623\u064a\u0648\u0646\u0627\u062a \u0647\u0627\u0644\u0648\u062c\u064a\u0646\u064a\u0629 (Cl\u207b, F\u207b) \u0645\u062b\u0644 \u0627\u0644\u0647\u0627\u0644\u064a\u062a \u0648\u0627\u0644\u0641\u0644\u0648\u0631\u064a\u062a.<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a \u0648\u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u062f\u0627\u062a:<\/strong> \u0627\u0644\u062c\u0628\u0633\u060c \u0627\u0644\u0628\u0627\u0631\u064a\u062a\u060c \u0627\u0644\u0628\u064a\u0631\u064a\u062a\u060c \u0648\u0627\u0644\u063a\u0627\u0644\u064a\u0646\u0627.<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a \u0648\u0627\u0644\u0623\u062d\u0627\u062f\u064a\u0629:<\/strong> \u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a\u060c \u0648\u0627\u0644\u0630\u0647\u0628 \u0648\u0627\u0644\u0641\u0636\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-emerald-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-emerald-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-emerald-500\/20 text-emerald-400 flex items-center justify-center text-base\" style=\"font-size:1rem;\">🇯🇴<\/span>\r\n \u0627\u0644\u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0648\u0641\u064a \u0627\u0644\u0623\u0631\u062f\u0646\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg marker:text-emerald-400\">\r\n <li>\u062a\u062f\u062e\u0644 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u0627\u0644\u0628\u0646\u0627\u0621\u060c \u0648\u0627\u0644\u0623\u0633\u0645\u062f\u0629.<\/li>\r\n <li>\u064a\u0645\u062a\u0644\u0643 \u0627\u0644\u0623\u0631\u062f\u0646 \u062b\u0631\u0648\u0627\u062a \u0645\u0639\u062f\u0646\u064a\u0629 \u0645\u0647\u0645\u0629 \u0643\u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a (\u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a) \u0648\u0627\u0644\u0628\u0648\u062a\u0627\u0633 (\u0627\u0644\u0633\u064a\u0644\u0641\u064a\u062a).<\/li>\r\n <li>\u064a\u064f\u0639\u062f \u0627\u0644\u0623\u0631\u062f\u0646 \u062b\u0627\u0645\u0646 \u0623\u0643\u0628\u0631 \u0645\u064f\u0635\u062f\u0651\u0631 \u0644\u0644\u0628\u0648\u062a\u0627\u0633 \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0639\u0627\u0644\u0645.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <script>\r\n (function() {\r\n 'use strict';\r\n\r\n const canvas = document.getElementById('tetraCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const toggleBtn = document.getElementById('rotateToggle');\r\n const resetBtn = document.getElementById('resetView');\r\n\r\n \/\/ ---- 3D setup ----\r\n const W = canvas.width; \/\/ 400\r\n const H = canvas.height; \/\/ 400\r\n\r\n \/\/ Tetrahedron vertices (radius = 120)\r\n const r = 120;\r\n const sqrt2 = Math.sqrt(2);\r\n const sqrt3 = Math.sqrt(3);\r\n \/\/ normalized tetra vertices\r\n const v = [\r\n { x: 0, y: r, z: 0 }, \/\/ top\r\n { x: r * 2 * sqrt2 \/ 3, y: -r \/ 3, z: 0 }, \/\/ right-bottom\r\n { x: -r * sqrt2 \/ 3, y: -r \/ 3, z: r * sqrt2 \/ 3 }, \/\/ left-back\r\n { x: -r * sqrt2 \/ 3, y: -r \/ 3, z: -r * sqrt2 \/ 3 } \/\/ left-front\r\n ];\r\n \/\/ center: silicon\r\n const center = { x: 0, y: 0, z: 0 };\r\n\r\n \/\/ state\r\n let rotY = 0.4;\r\n let rotX = 0.2;\r\n let isRotating = true;\r\n let autoRotateSpeedY = 0.008;\r\n let autoRotateSpeedX = 0.003;\r\n\r\n \/\/ ---- 3D math ----\r\n function rotateX(p, angle) {\r\n const c = Math.cos(angle),\r\n s = Math.sin(angle);\r\n return { x: p.x, y: p.y * c - p.z * s, z: p.y * s + p.z * c };\r\n }\r\n\r\n function rotateY(p, angle) {\r\n const c = Math.cos(angle),\r\n s = Math.sin(angle);\r\n return { x: p.x * c + p.z * s, y: p.y, z: -p.x * s + p.z * c };\r\n }\r\n\r\n function project(p, fov) {\r\n const f = fov || 400;\r\n const d = 600;\r\n const z = p.z + d;\r\n const scale = f \/ z;\r\n return { x: p.x * scale + W \/ 2, y: -p.y * scale + H \/ 2, z: p.z };\r\n }\r\n\r\n \/\/ ---- render ----\r\n function render() {\r\n ctx.clearRect(0, 0, W, H);\r\n\r\n \/\/ apply rotations\r\n const pts = v.map(p => {\r\n let r = rotateX(p, rotX);\r\n r = rotateY(r, rotY);\r\n return r;\r\n });\r\n const si = rotateX(center, rotX);\r\n const siR = rotateY(si, rotY);\r\n\r\n \/\/ project\r\n const proj = pts.map(p => project(p, 420));\r\n const siProj = project(siR, 420);\r\n\r\n \/\/ sort for depth (back to front)\r\n const indices = [0, 1, 2, 3];\r\n indices.sort((a, b) => proj[a].z - proj[b].z);\r\n\r\n \/\/ ---- draw bonds (lines) ----\r\n ctx.lineWidth = 2.5;\r\n \/\/ silicon to each oxygen\r\n for (let i = 0; i < 4; i++) {\r\n const p = proj[i];\r\n const alpha = 0.25 + 0.35 * (1 - (p.z + 200) \/ 500);\r\n ctx.beginPath();\r\n ctx.moveTo(siProj.x, siProj.y);\r\n ctx.lineTo(p.x, p.y);\r\n ctx.strokeStyle = `rgba(255,255,255,${Math.min(alpha,0.5)})`;\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ oxygen-oxygen edges (tetrahedron edges)\r\n const edges = [\r\n [0, 1],\r\n [0, 2],\r\n [0, 3],\r\n [1, 2],\r\n [1, 3],\r\n [2, 3]\r\n ];\r\n for (const [i, j] of edges) {\r\n const p1 = proj[i];\r\n const p2 = proj[j];\r\n const avgZ = (p1.z + p2.z) \/ 2;\r\n const alpha = 0.08 + 0.12 * (1 - (avgZ + 200) \/ 500);\r\n ctx.beginPath();\r\n ctx.moveTo(p1.x, p1.y);\r\n ctx.lineTo(p2.x, p2.y);\r\n ctx.strokeStyle = `rgba(248,113,113,${Math.min(alpha,0.25)})`;\r\n ctx.setLineDash([4, 6]);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n }\r\n\r\n \/\/ ---- draw atoms ----\r\n \/\/ oxygen atoms (sorted by depth)\r\n const colors = ['#f87171', '#fca5a5', '#f87171', '#fca5a5'];\r\n for (let idx = 0; idx < indices.length; idx++) {\r\n const i = indices[idx];\r\n const p = proj[i];\r\n const depthFactor = 0.6 + 0.4 * (1 - (p.z + 200) \/ 500);\r\n const radius = 22 * (0.85 + 0.15 * depthFactor);\r\n\r\n \/\/ glow\r\n const grad = ctx.createRadialGradient(p.x - 4, p.y - 4, 2, p.x, p.y, radius * 1.6);\r\n grad.addColorStop(0, `rgba(248,113,113,${0.4 * depthFactor})`);\r\n grad.addColorStop(1, 'rgba(248,113,113,0)');\r\n ctx.fillStyle = grad;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius * 1.6, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n \/\/ body\r\n const grad2 = ctx.createRadialGradient(p.x - 6, p.y - 8, 4, p.x, p.y, radius);\r\n grad2.addColorStop(0, '#fca5a5');\r\n grad2.addColorStop(0.6, '#f87171');\r\n grad2.addColorStop(1, '#b91c1c');\r\n ctx.fillStyle = grad2;\r\n ctx.shadowColor = 'rgba(248,113,113,0.5)';\r\n ctx.shadowBlur = 18;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n\r\n \/\/ label\r\n ctx.fillStyle = `rgba(255,255,255,${0.7 + 0.3 * depthFactor})`;\r\n ctx.font = `bold ${16 * depthFactor}px Cairo, sans-serif`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('O', p.x, p.y - 1);\r\n }\r\n\r\n \/\/ silicon atom (center)\r\n {\r\n const p = siProj;\r\n const depthFactor = 0.7 + 0.3 * (1 - (p.z + 200) \/ 500);\r\n const radius = 30 * (0.85 + 0.15 * depthFactor);\r\n\r\n \/\/ glow\r\n const grad = ctx.createRadialGradient(p.x - 4, p.y - 4, 2, p.x, p.y, radius * 1.8);\r\n grad.addColorStop(0, `rgba(129,140,248,${0.5 * depthFactor})`);\r\n grad.addColorStop(1, 'rgba(129,140,248,0)');\r\n ctx.fillStyle = grad;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius * 1.8, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n \/\/ body\r\n const grad2 = ctx.createRadialGradient(p.x - 8, p.y - 10, 4, p.x, p.y, radius);\r\n grad2.addColorStop(0, '#a5b4fc');\r\n grad2.addColorStop(0.5, '#818cf8');\r\n grad2.addColorStop(1, '#4338ca');\r\n ctx.fillStyle = grad2;\r\n ctx.shadowColor = 'rgba(129,140,248,0.6)';\r\n ctx.shadowBlur = 28;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n\r\n \/\/ label\r\n ctx.fillStyle = `rgba(255,255,255,${0.8 + 0.2 * depthFactor})`;\r\n ctx.font = `bold ${20 * depthFactor}px Cairo, sans-serif`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('Si', p.x, p.y - 1);\r\n }\r\n\r\n \/\/ ---- info overlay ----\r\n ctx.fillStyle = 'rgba(255,255,255,0.15)';\r\n ctx.font = '11px Cairo, sans-serif';\r\n ctx.textAlign = 'left';\r\n ctx.textBaseline = 'bottom';\r\n ctx.fillText('(SiO\u2084)\u2074\u207b | \u62d6\u52a8\u89c6\u89d2', 14, H - 10);\r\n\r\n \/\/ lall charge indicator\r\n ctx.fillStyle = 'rgba(255,255,255,0.08)';\r\n ctx.font = '11px Cairo, sans-serif';\r\n ctx.textAlign = 'right';\r\n ctx.textBaseline = 'bottom';\r\n ctx.fillText('\u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 -4', W - 14, H - 10);\r\n }\r\n\r\n \/\/ ---- animation loop ----\r\n let animId = null;\r\n\r\n function tick() {\r\n if (isRotating) {\r\n rotY += autoRotateSpeedY;\r\n rotX += autoRotateSpeedX;\r\n \/\/ keep X within reasonable range\r\n if (rotX > 0.8) rotX = 0.8;\r\n if (rotX < -0.8) rotX = -0.8;\r\n }\r\n render();\r\n animId = requestAnimationFrame(tick);\r\n }\r\n\r\n \/\/ ---- controls ----\r\n toggleBtn.addEventListener('click', function() {\r\n isRotating = !isRotating;\r\n this.textContent = isRotating ? '\u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062f\u0648\u0631\u0627\u0646' : '\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062f\u0648\u0631\u0627\u0646';\r\n this.classList.toggle('active', isRotating);\r\n });\r\n\r\n resetBtn.addEventListener('click', function() {\r\n rotY = 0.4;\r\n rotX = 0.2;\r\n render();\r\n });\r\n\r\n \/\/ ---- mouse drag (orbit) ----\r\n let isDragging = false;\r\n let prevMouse = { x: 0, y: 0 };\r\n\r\n canvas.addEventListener('mousedown', function(e) {\r\n isDragging = true;\r\n const rect = canvas.getBoundingClientRect();\r\n prevMouse.x = e.clientX - rect.left;\r\n prevMouse.y = e.clientY - rect.top;\r\n canvas.style.cursor = 'grabbing';\r\n });\r\n\r\n window.addEventListener('mousemove', function(e) {\r\n if (!isDragging) return;\r\n const rect = canvas.getBoundingClientRect();\r\n const mx = e.clientX - rect.left;\r\n const my = e.clientY - rect.top;\r\n const dx = mx - prevMouse.x;\r\n const dy = my - prevMouse.y;\r\n rotY += dx * 0.008;\r\n rotX += dy * 0.008;\r\n if (rotX > 0.8) rotX = 0.8;\r\n if (rotX < -0.8) rotX = -0.8;\r\n prevMouse.x = mx;\r\n prevMouse.y = my;\r\n render();\r\n });\r\n\r\n window.addEventListener('mouseup', function() {\r\n if (isDragging) {\r\n isDragging = false;\r\n canvas.style.cursor = 'default';\r\n }\r\n });\r\n\r\n \/\/ touch support\r\n let touchId = null;\r\n canvas.addEventListener('touchstart', function(e) {\r\n e.preventDefault();\r\n const t = e.touches[0];\r\n if (!t) return;\r\n isDragging = true;\r\n touchId = t.identifier;\r\n const rect = canvas.getBoundingClientRect();\r\n prevMouse.x = t.clientX - rect.left;\r\n prevMouse.y = t.clientY - rect.top;\r\n }, { passive: false });\r\n\r\n canvas.addEventListener('touchmove', function(e) {\r\n e.preventDefault();\r\n if (!isDragging) return;\r\n let t = null;\r\n for (const touch of e.touches) {\r\n if (touch.identifier === touchId) { t = touch; break; }\r\n }\r\n if (!t) return;\r\n const rect = canvas.getBoundingClientRect();\r\n const mx = t.clientX - rect.left;\r\n const my = t.clientY - rect.top;\r\n const dx = mx - prevMouse.x;\r\n const dy = my - prevMouse.y;\r\n rotY += dx * 0.008;\r\n rotX += dy * 0.008;\r\n if (rotX > 0.8) rotX = 0.8;\r\n if (rotX < -0.8) rotX = -0.8;\r\n prevMouse.x = mx;\r\n prevMouse.y = my;\r\n render();\r\n }, { passive: false });\r\n\r\n canvas.addEventListener('touchend', function(e) {\r\n isDragging = false;\r\n touchId = null;\r\n });\r\n\r\n \/\/ ---- start ----\r\n render();\r\n tick();\r\n\r\n \/\/ ---- resize \/ DPI handling ----\r\n function handleResize() {\r\n \/\/ canvas already fixed 400x400, just re-render\r\n render();\r\n }\r\n window.addEventListener('resize', handleResize);\r\n\r\n \/\/ ---- cleanup (optional) ----\r\n \/\/ (no-op for this simple case)\r\n\r\n })();\r\n <\/script>\r\n\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-18945","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18945","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=18945"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18945\/revisions"}],"predecessor-version":[{"id":18946,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18945\/revisions\/18946"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\">\r\n <\/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 <style>\r\n \/* === Base === *\/\r\n * {\r\n box-sizing: border-box;\r\n }\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 margin: 0;\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 {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #1e1b4b;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #4f46e5;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* === 3D Simulator === *\/\r\n .sim-wrapper {\r\n background: rgba(15, 15, 40, 0.7);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n border-radius: 1.5rem;\r\n padding: 1.5rem;\r\n backdrop-filter: blur(4px);\r\n box-shadow: 0 0 40px rgba(99, 102, 241, 0.15);\r\n margin: 1.5rem 0 2rem;\r\n }\r\n .sim-grid {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n }\r\n @media (min-width: 768px) {\r\n .sim-grid {\r\n flex-direction: row;\r\n align-items: stretch;\r\n }\r\n .sim-grid>div {\r\n flex: 1;\r\n }\r\n }\r\n .sim-canvas-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 320px;\r\n }\r\n .sim-canvas-wrap canvas {\r\n width: 100%;\r\n max-width: 340px;\r\n aspect-ratio: 1\/1;\r\n border-radius: 1.25rem;\r\n background: radial-gradient(ellipse at center, #1a1a3e 0%, #0c0c1e 100%);\r\n box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.2);\r\n display: block;\r\n touch-action: none;\r\n }\r\n .sim-controls {\r\n display: flex;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n .sim-controls button {\r\n background: rgba(79, 70, 229, 0.25);\r\n border: 1px solid rgba(99, 102, 241, 0.4);\r\n color: #c7d2fe;\r\n padding: 0.4rem 1.2rem;\r\n border-radius: 9999px;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n font-family: 'Cairo', sans-serif;\r\n backdrop-filter: blur(4px);\r\n }\r\n .sim-controls button:hover {\r\n background: rgba(79, 70, 229, 0.45);\r\n border-color: #818cf8;\r\n color: #fff;\r\n }\r\n .sim-controls button.active {\r\n background: rgba(79, 70, 229, 0.5);\r\n border-color: #a5b4fc;\r\n box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .sim-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n justify-content: center;\r\n }\r\n .sim-info-card {\r\n background: rgba(0, 0, 0, 0.35);\r\n padding: 0.9rem 1.2rem;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n .sim-info-card .label {\r\n font-weight: 700;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n font-size: 0.95rem;\r\n }\r\n .sim-info-card .label .dot {\r\n display: inline-block;\r\n width: 0.6rem;\r\n height: 0.6rem;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n }\r\n .sim-info-card .desc {\r\n color: #cbd5e1;\r\n font-size: 0.85rem;\r\n line-height: 1.6;\r\n margin-top: 0.2rem;\r\n }\r\n .sim-info-card .charge-box {\r\n background: rgba(99, 102, 241, 0.15);\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n border-radius: 0.75rem;\r\n padding: 0.6rem 1rem;\r\n margin-top: 0.3rem;\r\n color: #a5b4fc;\r\n font-size: 0.9rem;\r\n }\r\n .sim-info-card .charge-box strong {\r\n color: #e0e7ff;\r\n }\r\n\r\n \/* === utility === *\/\r\n .icon-svg-inline {\r\n display: inline-block;\r\n width: 1.2em;\r\n height: 1.2em;\r\n vertical-align: middle;\r\n fill: currentColor;\r\n flex-shrink: 0;\r\n }\r\n .no-emoji {\r\n \/* placeholder for emoji-free icons *\/\r\n }\r\n .border-glow {\r\n box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);\r\n }\r\n .bg-card-glass {\r\n background: rgba(30, 27, 75, 0.5);\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n \/* table responsive *\/\r\n .table-wrap {\r\n overflow-x: auto;\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n .table-wrap table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n text-align: right;\r\n font-size: 1.125rem;\r\n background: rgba(15, 15, 40, 0.5);\r\n }\r\n .table-wrap thead {\r\n background: rgba(79, 70, 229, 0.2);\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n }\r\n .table-wrap th {\r\n padding: 0.75rem 1rem;\r\n color: #a5b4fc;\r\n font-weight: 700;\r\n font-size: 0.95rem;\r\n }\r\n .table-wrap td {\r\n padding: 0.7rem 1rem;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.04);\r\n color: #e2e8f0;\r\n }\r\n .table-wrap tr:last-child td {\r\n border-bottom: none;\r\n }\r\n .table-wrap tr:hover td {\r\n background: rgba(255, 255, 255, 0.03);\r\n }\r\n .table-wrap td .highlight {\r\n color: #818cf8;\r\n font-weight: 600;\r\n }\r\n\r\n \/* lall fixes *\/\r\n .list-deco {\r\n list-style: none;\r\n padding-right: 0;\r\n }\r\n .list-deco li {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.6rem;\r\n margin-bottom: 0.4rem;\r\n }\r\n .list-deco li .marker {\r\n display: inline-block;\r\n width: 0.4rem;\r\n height: 0.4rem;\r\n border-radius: 50%;\r\n margin-top: 0.5rem;\r\n flex-shrink: 0;\r\n background: #4f46e5;\r\n }\r\n .grid-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\r\n gap: 0.75rem;\r\n }\r\n .grid-cards .card {\r\n background: rgba(0, 0, 0, 0.3);\r\n padding: 0.7rem 0.5rem;\r\n border-radius: 0.75rem;\r\n text-align: center;\r\n border: 1px solid rgba(255, 255, 255, 0.06);\r\n font-weight: 600;\r\n font-size: 1.125rem;\r\n }\r\n \/* override for small elements *\/\r\n .text-small {\r\n font-size: 0.95rem;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n\r\n \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\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/h1>\r\n <p class=\"text-indigo-300 text-lg\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/p>\r\n <\/div>\r\n <div style=\"display:flex;align-items:center;gap:0.5rem;background: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: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\r\n <div class=\"space-y-6 text-right\">\r\n\r\n \r\n <div class=\"mb-10 bg-gradient-to-br from-indigo-900\/60 via-purple-900\/60 to-slate-900\/80 p-6 l:p-8 rounded-3xl border border-indigo-500\/30 shadow-xl relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-64 h-64 bg-amber-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n <div class=\"relative z-10 flex items-center gap-4\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500\/30 to-amber-500\/30 text-amber-300 flex items-center justify-center border border-amber-400\/30 text-3xl shadow-[0_0_20px_rgba(245,158,11,0.3)] shrink-0\">\r\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <span class=\"inline-block px-3 py-1 bg-purple-500\/20 text-purple-300 text-lg font-semibold rounded-full border border-purple-500\/30 mb-2\">\u0639\u0644\u0648\u0645 \u0627\u0644\u0623\u0631\u0636 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/span>\r\n <h1 class=\"text-3xl font-bold text-white\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/h1>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-amber-500\/20 to-yellow-500\/20 text-amber-400 flex items-center justify-center border border-amber-500\/30 text-xl shadow-[0_0_15px_rgba(245,158,11,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n <\/span>\r\n 1. \u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629 \u0644\u0644\u062f\u0631\u0633\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg relative overflow-hidden leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg leading-relaxed\">\r\n \u062a\u064f\u0635\u0646\u064e\u0651\u0641 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 \u0625\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0627\u062a\u064d \u0631\u0626\u064a\u0633\u0629\u064d\u061b \u0627\u0639\u062a\u0645\u0627\u062f\u0627\u064b \u0639\u0644\u0649 \u062e\u0635\u0627\u0626\u0635\u0647\u0627 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0648\u0627\u0644\u0623\u064a\u0648\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646) \u0627\u0644\u0645\u0643\u0648\u0646 \u0644\u0647\u0627.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-emerald-500\/20 to-teal-500\/20 text-emerald-400 flex items-center justify-center border border-emerald-500\/30 text-xl shadow-[0_0_15px_rgba(16,185,129,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 2. \u0646\u062a\u0627\u0626\u062c \u0627\u0644\u062a\u0639\u0644\u0651\u0645 (\u0627\u0644\u0623\u0647\u062f\u0627\u0641)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg relative overflow-hidden leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-4 font-semibold\">\u0628\u0646\u0647\u0627\u064a\u0629 \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633\u060c \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0642\u0627\u062f\u0631\u0627\u064b \u0639\u0644\u0649:<\/p>\r\n <ul class=\"space-y-3 text-slate-200 text-lg list-deco\">\r\n <li><span class=\"marker\" style=\"background:#34d399;\"><\/span> \u0623\u0630\u0643\u0631 \u0623\u0645\u062b\u0644\u0629\u064b \u0639\u0644\u0649 \u0643\u0644\u0650\u0651 \u0645\u062c\u0645\u0648\u0639\u0629\u064d \u0645\u0639\u062f\u0646\u064a\u0629.<\/li>\r\n <li><span class=\"marker\" style=\"background:#34d399;\"><\/span> \u0623\u0631\u0628\u0637 \u0628\u064a\u0646 \u0648\u062c\u0648\u062f \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0641\u064a \u0627\u0644\u0637\u0628\u064a\u0639\u0629 \u0648\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u062a\u064a \u062a\u0648\u062c\u062f \u0641\u064a\u0647\u0627.<\/li>\r\n <li><span class=\"marker\" style=\"background:#34d399;\"><\/span> \u0623\u0648\u0636\u0650\u0651\u062d \u0628\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u0648\u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0644\u0644\u0645\u0639\u0627\u062f\u0646.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500\/20 to-cyan-500\/20 text-blue-400 flex items-center justify-center border border-blue-500\/30 text-xl shadow-[0_0_15px_rgba(59,130,246,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\/><\/svg>\r\n <\/span>\r\n 3. \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 (Minerals Classification)\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-4\">\r\n \u0639\u064f\u0631\u0641\u062a \u0622\u0644\u0627\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0641\u064a \u0627\u0644\u0637\u0628\u064a\u0639\u0629\u060c \u0644\u0643\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0627\u0644\u062a\u064a \u062a\u062f\u062e\u0644 \u0641\u064a \u062a\u0631\u0643\u064a\u0628 \u0645\u0639\u0638\u0645 \u0635\u062e\u0648\u0631 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 \u0639\u062f\u062f\u0647\u0627 \u0642\u0644\u064a\u0644 \u0646\u0633\u0628\u064a\u0627\u064b.\r\n <\/p>\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n \u064a\u0635\u0646\u0641 \u0627\u0644\u0639\u0644\u0645\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0625\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0631\u0626\u064a\u0633\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 <strong class=\"text-indigo-300\">\u0627\u0644\u0623\u064a\u0648\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646)<\/strong> \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647 \u0627\u0644\u0645\u0639\u062f\u0646.\r\n <\/p>\r\n <h3 class=\"text-xl font-bold text-indigo-100 mb-4 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5 text-indigo-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z\"\/><\/svg>\r\n \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u062f\u0646\u064a\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629 \u0627\u0644\u0640 8:\r\n <\/h3>\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3\">\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-purple-300 text-lg\">1. \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-cyan-300 text-lg\">2. \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-rose-300 text-lg\">3. \u0627\u0644\u0623\u0643\u0627\u0633\u064a\u062f<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-slate-300 text-lg\">4. \u0627\u0644\u0647\u0627\u0644\u064a\u062f\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-yellow-300 text-lg\">5. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-orange-300 text-lg\">6. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u062f\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-lime-300 text-lg\">7. \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a<\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/10 text-center font-bold text-amber-300 text-lg\">8. \u0627\u0644\u0623\u062d\u0627\u062f\u064a\u0651\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-purple-500\/20 to-fuchsia-500\/20 text-purple-400 flex items-center justify-center border border-purple-500\/30 text-xl shadow-[0_0_15px_rgba(168,85,247,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\/><\/svg>\r\n <\/span>\r\n 4. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649: \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a (Silicates)\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 mb-6 text-slate-200 text-lg\">\r\n <li><strong class=\"text-purple-300\">\u0627\u0644\u0648\u0641\u0631\u0629:<\/strong> \u062a\u064f\u0634\u0643\u0651\u0644 \u0623\u0643\u062b\u0631 \u0645\u0646 <strong class=\"text-white\">90%<\/strong> \u0645\u0646 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629\u060c \u0648\u0647\u064a \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0643\u062b\u0631 \u0627\u0646\u062a\u0634\u0627\u0631\u0627\u064b.<\/li>\r\n <li><strong class=\"text-purple-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u062c\u0645\u064a\u0639 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a \u0639\u0644\u0649 \u0639\u0646\u0635\u0631\u064a \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646 (Si) \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O)\u060c \u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0623\u062e\u0631\u0649 \u0645\u062b\u0644 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0648\u0627\u0644\u062d\u062f\u064a\u062f.<\/li>\r\n <\/ul>\r\n <div class=\"bg-purple-950\/40 p-5 rounded-xl border border-purple-500\/30 mb-6\">\r\n <h3 class=\"text-xl font-bold text-purple-200 mb-2 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\/><\/svg>\r\n \u0648\u062d\u062f\u0629 \u0627\u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0633\u064a\u0644\u064a\u0643\u0627 \u0631\u0628\u0627\u0639\u064a\u0629 \u0627\u0644\u0623\u0648\u062c\u0647 (SiO\u2084)\u2074\u207b\r\n <\/h3>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 4 \u0630\u0631\u0627\u062a \u0623\u0643\u0633\u062c\u064a\u0646 \u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0640 \u0630\u0631\u0629 \u0633\u064a\u0644\u064a\u0643\u0648\u0646 \u0645\u0631\u0643\u0632\u064a\u0629 \u0628\u0631\u0648\u0627\u0628\u0637 \u062a\u0633\u0627\u0647\u0645\u064a\u0629 \u0642\u0648\u064a\u0629 \u0645\u0634\u0643\u0644\u0629 \u0647\u0631\u0645\u0627\u064b \u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0648\u062c\u0647.\r\n <\/p>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-indigo-100 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n \u0637\u0631\u0642 \u062a\u0631\u0627\u0628\u0637 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627 \u0631\u0628\u0627\u0639\u064a\u0629 \u0627\u0644\u0623\u0648\u062c\u0647:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-4\">\r\n <li><strong class=\"text-white\">\u0645\u0641\u0631\u062f\u0629 (\u0645\u0646\u0641\u0631\u062f\u0629):<\/strong> \u0645\u062b\u0644 \u0645\u0639\u062f\u0646 \u0627\u0644\u0623\u0648\u0644\u064a\u0641\u064a\u0646.<\/li>\r\n <li><strong class=\"text-white\">\u0633\u0644\u0627\u0633\u0644 \u0623\u0648 \u0635\u0641\u0627\u0626\u062d \u0623\u0648 \u0634\u0628\u0643\u0627\u062a \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f:<\/strong> \u0645\u062b\u0644 \u0645\u0639\u062f\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632 \u0648\u0627\u0644\u0645\u0627\u064a\u0643\u0627.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"sim-wrapper\">\r\n <div class=\"sim-grid\">\r\n \r\n <div class=\"sim-canvas-wrap\">\r\n <canvas id=\"tetraCanvas\" width=\"400\" height=\"400\"><\/canvas>\r\n <div class=\"sim-controls\">\r\n <button id=\"rotateToggle\" class=\"active\">\u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/button>\r\n <button id=\"resetView\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0636\u0628\u0637<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sim-info\">\r\n <div class=\"sim-info-card\">\r\n <div class=\"label\">\r\n <span class=\"dot\" style=\"background:#818cf8;\"><\/span>\r\n \u0630\u0631\u0629 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646 (Si)\r\n <\/div>\r\n <div class=\"desc\">\u062a\u0633\u062a\u0642\u0631 \u0630\u0631\u0629 \u0633\u064a\u0644\u064a\u0643\u0648\u0646 \u0648\u0627\u062d\u062f\u0629 \u0641\u064a \u0645\u0631\u0643\u0632 \u0627\u0644\u0647\u0631\u0645. \u062d\u062c\u0645\u0647\u0627 \u0623\u0635\u063a\u0631 \u0646\u0633\u0628\u064a\u0627\u064b \u0648\u062a\u062d\u0645\u0644 \u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629 (+4).<\/div>\r\n <\/div>\r\n <div class=\"sim-info-card\">\r\n <div class=\"label\">\r\n <span class=\"dot\" style=\"background:#f87171;\"><\/span>\r\n \u0630\u0631\u0627\u062a \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O)\r\n <\/div>\r\n <div class=\"desc\">\u062a\u062d\u064a\u0637 \u0628\u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646 4 \u0630\u0631\u0627\u062a \u0623\u0643\u0633\u062c\u064a\u0646 \u0623\u0643\u0628\u0631 \u062d\u062c\u0645\u0627\u064b. \u0643\u0644 \u0630\u0631\u0629 \u062a\u062d\u0645\u0644 \u0634\u062d\u0646\u0629 \u0633\u0627\u0644\u0628\u0629 (-2)\u060c \u0648\u062a\u062a\u0648\u0636\u0639 \u0641\u064a \u0632\u0648\u0627\u064a\u0627 \u0634\u0643\u0644 \u0647\u0631\u0645\u064a (\u0631\u0628\u0627\u0639\u064a \u0627\u0644\u0623\u0648\u062c\u0647).<\/div>\r\n <\/div>\r\n <div class=\"sim-info-card\">\r\n <div class=\"charge-box\">\r\n <strong>\u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629: -4<\/strong>\r\n <div style=\"font-size:0.9rem;color:#a5b4fc;margin-top:0.2rem;\">\r\n (Si\u207a\u2074) + 4 \u00d7 (O\u207b\u00b2) = -4<br\/>\r\n \u062a\u062d\u062a\u0627\u062c \u0647\u0630\u0647 \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0644\u0644\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0623\u064a\u0648\u0646\u0627\u062a \u0645\u0648\u062c\u0628\u0629 \u0623\u062e\u0631\u0649 (\u0645\u062b\u0644 \u0627\u0644\u062d\u062f\u064a\u062f\u060c \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645\u060c \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645) \u0623\u0648 \u0628\u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0633\u064a\u0644\u064a\u0643\u0627 \u0623\u062e\u0631\u0649 \u0644\u062a\u0643\u0648\u064a\u0646 \u0645\u0639\u0627\u062f\u0646 \u0645\u0633\u062a\u0642\u0631\u0629.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-cyan-500\/20 to-teal-500\/20 text-cyan-400 flex items-center justify-center border border-cyan-500\/30 text-xl shadow-[0_0_15px_rgba(6,182,212,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 5. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629: \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a (Carbonates)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-cyan-300\">\u0627\u0644\u062a\u0631\u062a\u064a\u0628:<\/strong> \u062b\u0627\u0646\u064a \u0623\u0643\u062b\u0631 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0634\u064a\u0648\u0639\u0627\u064b \u0628\u0639\u062f \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a.<\/li>\r\n <li><strong class=\"text-cyan-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a <strong class=\"text-white\">(CO\u2083)\u00b2\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628\u0629 \u0645\u062b\u0644 Ca\u00b2\u207a \u0623\u0648 Mg\u00b2\u207a \u0623\u0648 Cu\u00b2\u207a.<\/li>\r\n <\/ul>\r\n <div class=\"bg-cyan-950\/40 p-5 rounded-xl border border-cyan-500\/30\">\r\n <h3 class=\"text-xl font-bold text-cyan-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a (CaCO\u2083):<\/strong> \u0623\u0643\u062b\u0631 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a \u0634\u064a\u0648\u0639\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0644\u0627\u0642.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a:<\/strong> (CaMg(CO\u2083)\u2082).<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0645\u0627\u0644\u0643\u064a\u062a:<\/strong> (Cu\u2082CO\u2083(OH)\u2082).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-rose-500\/20 to-red-500\/20 text-rose-400 flex items-center justify-center border border-rose-500\/30 text-xl shadow-[0_0_15px_rgba(244,63,94,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\/><\/svg>\r\n <\/span>\r\n 6. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629: \u0627\u0644\u0623\u0643\u0627\u0633\u064a\u062f (Oxides)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-rose-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 <strong class=\"text-white\">O\u00b2\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0641\u0644\u0632\u064a \u0645\u0648\u062c\u0628 \u0627\u0644\u0634\u062d\u0646\u0629.<\/li>\r\n <li><strong class=\"text-rose-300\">\u0627\u0644\u0623\u0647\u0645\u064a\u0629:<\/strong> \u062a\u064f\u0639\u062f \u0645\u0635\u062f\u0631\u0627\u064b \u0631\u0626\u064a\u0633\u0627\u064b \u0644\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062e\u0627\u0645\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062f \u0648\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0623\u062e\u0631\u0649.<\/li>\r\n <\/ul>\r\n <div class=\"bg-rose-950\/40 p-5 rounded-xl border border-rose-500\/30\">\r\n <h3 class=\"text-xl font-bold text-rose-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a (Fe\u2082O\u2083):<\/strong> \u062e\u0627\u0645 \u0645\u0647\u0645 \u0644\u0644\u062d\u062f\u064a\u062f \u0630\u0648 \u0644\u0648\u0646 \u0623\u062d\u0645\u0631 \u0623\u0648 \u0631\u0645\u0627\u062f\u064a.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0645\u0627\u063a\u0646\u062a\u064a\u062a (Fe\u2083O\u2084):<\/strong> \u062e\u0627\u0645 \u062d\u062f\u064a\u062f \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0623\u0633\u0648\u062f \u0627\u0644\u0644\u0648\u0646.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-slate-500\/20 to-zinc-500\/20 text-slate-300 flex items-center justify-center border border-slate-500\/30 text-xl shadow-[0_0_15px_rgba(148,163,184,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 13a3 3 0 11-6 0 3 3 0 016 0z\"\/><\/svg>\r\n <\/span>\r\n 7. \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629: \u0627\u0644\u0647\u0627\u0644\u064a\u062f\u0627\u062a (Halides)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-slate-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0627\u062a\u062d\u0627\u062f \u0623\u062d\u062f \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u0627\u0644\u0648\u062c\u064a\u0646\u0627\u062a \u0633\u0627\u0644\u0628\u0629 \u0627\u0644\u0634\u062d\u0646\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0643\u0644\u0648\u0631 Cl\u207b \u0648\u0627\u0644\u0641\u0644\u0648\u0631 F\u207b) \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628 \u0627\u0644\u0634\u062d\u0646\u0629 (\u0645\u062b\u0644 Na\u207a \u0623\u0648 Ca\u00b2\u207a).<\/li>\r\n <\/ul>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-xl border border-slate-500\/30\">\r\n <h3 class=\"text-xl font-bold text-slate-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0647\u0627\u0644\u064a\u062a (NaCl):<\/strong> \u0648\u0647\u0648 \u0645\u0644\u062d \u0627\u0644\u0637\u0639\u0627\u0645 \u0627\u0644\u0634\u0627\u0626\u0639.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0641\u0644\u0648\u0631\u064a\u062a (CaF\u2082):<\/strong> \u0645\u0639\u062f\u0646 \u0632\u062c\u0627\u062c\u064a \u0627\u0644\u0628\u0631\u064a\u0642 \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 \u0648\u0627\u0644\u0641\u0644\u0648\u0631.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-yellow-400\/20 to-amber-400\/20 text-yellow-300 flex items-center justify-center border border-yellow-400\/30 text-xl shadow-[0_0_15px_rgba(250,204,21,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 8. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a (Sulphates)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-yellow-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a <strong class=\"text-white\">(SO\u2084)\u00b2\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628 \u0627\u0644\u0634\u062d\u0646\u0629 \u0623\u0648 \u0623\u0643\u062b\u0631.<\/li>\r\n <\/ul>\r\n <div class=\"bg-yellow-950\/40 p-5 rounded-xl border border-yellow-500\/30\">\r\n <h3 class=\"text-xl font-bold text-yellow-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u062c\u0628\u0633:<\/strong> (CaSO\u2084\u00b72H\u2082O).<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u0628\u0627\u0631\u064a\u062a:<\/strong> (BaSO\u2084).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-orange-500\/20 to-red-500\/20 text-orange-400 flex items-center justify-center border border-orange-500\/30 text-xl shadow-[0_0_15px_rgba(249,115,22,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 9. \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u062f\u0627\u062a (Sulfides)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-orange-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0643\u0628\u0631\u064a\u062a <strong class=\"text-white\">(S\u00b2\u207b)<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628.<\/li>\r\n <li><strong class=\"text-orange-300\">\u0627\u0644\u0623\u0647\u0645\u064a\u0629:<\/strong> \u062a\u064f\u0639\u062f \u0645\u0646 \u0623\u0647\u0645 \u062e\u0627\u0645\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062f \u0648\u0627\u0644\u0631\u0635\u0627\u0635 \u0648\u0627\u0644\u0646\u062d\u0627\u0633.<\/li>\r\n <\/ul>\r\n <div class=\"bg-orange-950\/40 p-5 rounded-xl border border-orange-500\/30\">\r\n <h3 class=\"text-xl font-bold text-orange-200 mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\/><\/svg>\r\n \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u064a\u0647\u0627:\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg pr-2\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0628\u064a\u0631\u064a\u062a (FeS\u2082):<\/strong> \u064a\u064f\u0639\u0631\u0641 \u0628\u0630\u0647\u0628 \u0627\u0644\u0645\u063a\u0641\u0644\u064a\u0646\u060c \u062e\u0627\u0645 \u0645\u0647\u0645 \u0644\u0644\u062d\u062f\u064a\u062f.<\/li>\r\n <li><strong class=\"text-white\">\u0627\u0644\u063a\u0627\u0644\u064a\u0646\u0627 (PbS):<\/strong> \u062e\u0627\u0645 \u0631\u0626\u064a\u0633 \u0644\u0644\u0631\u0635\u0627\u0635 \u0630\u0648 \u0628\u0631\u064a\u0642 \u0641\u0644\u0632\u064a.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-lime-500\/20 to-green-500\/20 text-lime-400 flex items-center justify-center border border-lime-500\/30 text-xl shadow-[0_0_15px_rgba(132,204,22,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 10. \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a (Phosphates)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <ul class=\"space-y-4 text-slate-200 text-lg mb-6\">\r\n <li><strong class=\"text-lime-300\">\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a <strong class=\"text-white\">(PO\u2084)\u00b3\u207b<\/strong> \u0633\u0627\u0644\u0628 \u0627\u0644\u0634\u062d\u0646\u0629\u060c \u0645\u062a\u062d\u062f\u0627\u064b \u0645\u0639 \u0623\u064a\u0648\u0646 \u0645\u0648\u062c\u0628.<\/li>\r\n <li><strong class=\"text-lime-300\">\u0623\u0634\u0647\u0631 \u0645\u062b\u0627\u0644 \u0639\u0644\u064a\u0647\u0627:<\/strong> \u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a (Ca\u2085(PO\u2084)\u2083(F,Cl,OH)).<\/li>\r\n <\/ul>\r\n <div class=\"bg-indigo-900\/40 p-5 rounded-xl border border-indigo-500\/30\">\r\n <h4 class=\"font-bold text-indigo-300 mb-2 flex items-center gap-2 text-lg\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n \u0627\u0644\u0631\u0628\u0637 \u0628\u0627\u0644\u0639\u0644\u0648\u0645 \u0627\u0644\u062d\u064a\u0627\u062a\u064a\u0629:\r\n <\/h4>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u064a\u062a\u0643\u0648\u0646 \u0627\u0644\u0646\u0633\u064a\u062c \u0627\u0644\u0639\u0638\u0645\u064a \u0641\u064a \u0639\u0638\u0627\u0645 \u0627\u0644\u0643\u0627\u0626\u0646\u0627\u062a \u0627\u0644\u062d\u064a\u0629 \u0645\u0646 \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u0639\u0638\u0645\u060c \u0648\u0628\u0631\u0648\u062a\u064a\u0646 \u0627\u0644\u0643\u0648\u0644\u0627\u062c\u064a\u0646\u060c \u0648\u0645\u0639\u062f\u0646 <strong class=\"text-white\">\u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a<\/strong> (\u0627\u0644\u0630\u064a \u064a\u064f\u0633\u0645\u0649 \u0645\u0639\u062f\u0646 \u0627\u0644\u0639\u0638\u0627\u0645) \u0627\u0644\u0630\u064a \u064a\u0645\u0646\u062d \u0627\u0644\u0639\u0638\u0627\u0645 \u0642\u0648\u062a\u0647\u0627 \u0648\u0643\u062b\u0627\u0641\u062a\u0647\u0627.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-amber-500\/20 to-yellow-600\/20 text-amber-400 flex items-center justify-center border border-amber-500\/30 text-xl shadow-[0_0_15px_rgba(245,158,11,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 11. \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0623\u062d\u0627\u062f\u064a\u0629 \u0627\u0644\u0639\u0646\u0635\u0631\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed space-y-6\">\r\n <p class=\"text-slate-200 text-lg\">\r\n \u062a\u062a\u0643\u0648\u0646 \u0647\u0630\u0647 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0645\u0646 <strong class=\"text-amber-300\">\u0639\u0646\u0635\u0631 \u0643\u064a\u0645\u064a\u0627\u0626\u064a \u0648\u0627\u062d\u062f \u0641\u0642\u0637<\/strong> \u062f\u0648\u0646 \u0623\u0646 \u064a\u062a\u062d\u062f \u0645\u0639 \u063a\u064a\u0631\u0647 \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5\">\r\n <strong class=\"text-amber-300 text-lg block mb-1\">\u0627\u0644\u0630\u0647\u0628 (Au)<\/strong>\r\n <span class=\"text-lg text-slate-300\">\u0645\u0639\u062f\u0646 \u062b\u0645\u064a\u0646 \u063a\u064a\u0631 \u0646\u0634\u0637 \u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0627\u064b.<\/span>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5\">\r\n <strong class=\"text-amber-300 text-lg block mb-1\">\u0627\u0644\u0641\u0636\u0629 (Ag)<\/strong>\r\n <span class=\"text-lg text-slate-300\">\u0645\u0639\u062f\u0646 \u0645\u0648\u0635\u0644 \u0645\u0645\u062a\u0627\u0632 \u0644\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-amber-950\/40 p-5 rounded-xl border border-amber-500\/30\">\r\n <h4 class=\"font-bold text-amber-300 mb-1 flex items-center gap-2 text-lg\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n \u0645\u0644\u0627\u062d\u0638\u0629 \u0645\u0647\u0645\u0629:\r\n <\/h4>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u062a\u0645\u064a\u0632 \u0645\u0639\u0638\u0645 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0623\u062d\u0627\u062f\u064a\u0629 \u0627\u0644\u0639\u0646\u0635\u0631 \u0628\u0633\u0647\u0648\u0644\u0629 \u062a\u0641\u0627\u0639\u0644\u0647\u0627 \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646\u060c \u0648\u0644\u0630\u0644\u0643 \u0641\u0647\u064a \u0646\u0627\u062f\u0631\u0629 \u0627\u0644\u0648\u062c\u0648\u062f \u0643\u0639\u0646\u0627\u0635\u0631 \u062d\u0631\u0629 \u0641\u064a \u0627\u0644\u0637\u0628\u064a\u0639\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-stone-500\/20 to-zinc-500\/20 text-stone-300 flex items-center justify-center border border-stone-500\/30 text-xl shadow-[0_0_15px_rgba(120,113,108,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\"\/><\/svg>\r\n <\/span>\r\n 12. \u0627\u0644\u0635\u062e\u0648\u0631 \u0648\u0627\u0644\u0645\u0639\u0627\u062f\u0646 (Rocks and Minerals)\r\n <\/h2>\r\n <div class=\"mb-10\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n <strong class=\"text-stone-300\">\u0627\u0644\u0635\u062e\u0631:<\/strong> \u0647\u0648 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629\u060c \u0648\u064a\u062a\u0643\u0648\u0646 \u063a\u0627\u0644\u0628\u0627\u064b \u0645\u0646 \u062a\u062c\u0645\u0639 \u0645\u0639\u062f\u0646 \u0648\u0627\u062d\u062f \u0623\u0648 \u0639\u062f\u0629 \u0645\u0639\u0627\u062f\u0646 \u0645\u0639\u0627\u064b.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\r\n <div class=\"bg-black\/30 p-5 rounded-xl border border-white\/10\">\r\n <h4 class=\"font-bold text-indigo-300 mb-3 text-lg border-b border-white\/10 pb-2\">\u0635\u062e\u0648\u0631 \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0645\u0639\u062f\u0646 \u0648\u0627\u062d\u062f:<\/h4>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg\">\r\n <li><strong class=\"text-white\">\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u062c\u064a\u0631\u064a:<\/strong> \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0645\u0639\u062f\u0646 \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a.<\/li>\r\n <li><strong class=\"text-white\">\u0635\u062e\u0631 \u0627\u0644\u062f\u0648\u0646\u064a\u062a:<\/strong> \u064a\u062a\u0643\u0648\u0646 \u0628\u0635\u0641\u0629 \u0631\u0626\u064a\u0633\u0629 \u0645\u0646 \u0645\u0639\u062f\u0646 \u0627\u0644\u0623\u0648\u0644\u064a\u0641\u064a\u0646.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-5 rounded-xl border border-white\/10\">\r\n <h4 class=\"font-bold text-indigo-300 mb-3 text-lg border-b border-white\/10 pb-2\">\u0635\u062e\u0648\u0631 \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0639\u062f\u0629 \u0645\u0639\u0627\u062f\u0646:<\/h4>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg\">\r\n <li><strong class=\"text-white\">\u0635\u062e\u0631 \u0627\u0644\u063a\u0631\u0627\u0646\u064a\u062a:<\/strong> \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0641\u0644\u0633\u0628\u0627\u0631\u060c \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632\u060c \u0648\u0627\u0644\u0645\u0627\u064a\u0643\u0627.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/20\">\r\n <strong class=\"block text-indigo-300 mb-2 text-lg\">\u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0644\u0645\u0643\u0648\u0646\u0629 \u0644\u0645\u0639\u0638\u0645 \u0635\u062e\u0648\u0631 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629:<\/strong>\r\n <p class=\"text-slate-300 text-lg\">\u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632\u060c \u0627\u0644\u0641\u0644\u0633\u0628\u0627\u0631\u060c \u0627\u0644\u0645\u0627\u064a\u0643\u0627\u060c \u0627\u0644\u0628\u064a\u0631\u0648\u0643\u0633\u064a\u0646\u060c \u0627\u0644\u0623\u0645\u0641\u064a\u0628\u0648\u0644\u060c \u0627\u0644\u0623\u0648\u0644\u064a\u0641\u064a\u0646\u060c \u0627\u0644\u063a\u0627\u0631\u0646\u062a\u060c \u0648\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-emerald-500\/20 to-teal-500\/20 text-emerald-400 flex items-center justify-center border border-emerald-500\/30 text-xl shadow-[0_0_15px_rgba(16,185,129,0.2)]\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n 13. \u0627\u0644\u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0644\u0644\u0645\u0639\u0627\u062f\u0646\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n \u0644\u0644\u0645\u0639\u0627\u062f\u0646 \u0642\u064a\u0645\u0629 \u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0643\u0628\u064a\u0631\u0629 \u062c\u062f\u0627\u064b \u0648\u062a\u062f\u062e\u0644 \u0641\u064a \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0648\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0629:\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-8\">\r\n <div class=\"bg-gradient-to-br from-yellow-900\/40 to-slate-900\/80 p-5 rounded-xl border border-yellow-500\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">🏅<\/span>\r\n <h4 class=\"font-bold text-yellow-400 text-xl mb-2\">\u0627\u0644\u0630\u0647\u0628<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u062d\u0644\u064a \u0648\u0627\u0644\u0645\u062c\u0648\u0647\u0631\u0627\u062a \u0648\u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u062f\u0642\u064a\u0642\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-orange-900\/40 to-slate-900\/80 p-5 rounded-xl border border-orange-500\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">⚡<\/span>\r\n <h4 class=\"font-bold text-orange-400 text-xl mb-2\">\u0627\u0644\u0646\u062d\u0627\u0633<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0623\u0633\u0644\u0627\u0643 \u0648\u0627\u0644\u062a\u0648\u0635\u064a\u0644\u0627\u062a \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629\u060c \u0648\u064a\u064f\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0645\u0627\u0644\u0643\u064a\u062a.<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-slate-700\/40 to-slate-900\/80 p-5 rounded-xl border border-slate-500\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">⚒<\/span>\r\n <h4 class=\"font-bold text-slate-300 text-xl mb-2\">\u0627\u0644\u062d\u062f\u064a\u062f \u0648\u0627\u0644\u0635\u0644\u0628<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0628\u0646\u0627\u0621 \u0648\u0627\u0644\u0647\u064a\u0627\u0643\u0644 \u0648\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a (\u0645\u0646 \u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a \u0648\u0627\u0644\u0645\u0627\u063a\u0646\u062a\u064a\u062a).<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-zinc-600\/40 to-slate-900\/80 p-5 rounded-xl border border-zinc-400\/30\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">✈<\/span>\r\n <h4 class=\"font-bold text-zinc-300 text-xl mb-2\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a \u0648\u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0644\u062e\u0641\u062a\u0647 \u0648\u0645\u062a\u0627\u0646\u062a\u0647.<\/p>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-cyan-900\/40 to-slate-900\/80 p-5 rounded-xl border border-cyan-500\/30 md:col-span-2 lg:col-span-2\">\r\n <span class=\"text-3xl mb-3 block\" style=\"font-size:2rem;\">💻<\/span>\r\n <h4 class=\"font-bold text-cyan-400 text-xl mb-2\">\u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0648\u0646<\/h4>\r\n <p class=\"text-lg text-slate-300\">\u064a\u064f\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632 \u0648\u064a\u062f\u062e\u0644 \u0641\u064a \u0631\u0642\u0627\u0626\u0642 \u0627\u0644\u062d\u0627\u0633\u0648\u0628\u060c \u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0647\u0648\u0627\u062a\u0641\u060c \u0648\u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-indigo-950\/50 p-6 rounded-2xl border border-indigo-500\/30 flex flex-col md:flex-row gap-6 items-center\">\r\n <div class=\"text-5xl md:text-6xl shrink-0\" style=\"font-size:3rem;\">🧠<\/div>\r\n <div>\r\n <h4 class=\"font-bold text-indigo-300 text-xl mb-2\">\u0627\u0644\u0631\u0628\u0637 \u0628\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627:<\/h4>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u0639\u062a\u0645\u062f \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0630\u0643\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0646\u0627\u062f\u0631\u0629 \u062a\u064f\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0646\u060c \u0645\u062b\u0644 \u0645\u0639\u062f\u0646 <strong class=\"text-white\">\u0627\u0644\u0645\u0648\u0646\u0627\u0632\u064a\u062a<\/strong> (\u0627\u0644\u062a\u0627\u0628\u0639 \u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-xl font-semibold text-white mb-6 mt-8 flex items-center gap-4 border-b border-indigo-500\/30 pb-3\">\r\n <span class=\"w-10 h-10 rounded-2xl bg-gradient-to-br from-red-600\/20 to-slate-900 text-white flex items-center justify-center border border-red-500\/30 text-xl shadow-[0_0_15px_rgba(220,38,38,0.2)]\" style=\"font-size:1.8rem;font-weight:700;\">🇯🇴<\/span>\r\n 14. \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0641\u064a \u0627\u0644\u0623\u0631\u062f\u0646\r\n <\/h2>\r\n <div class=\"mb-10 space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/10 shadow-lg leading-relaxed\">\r\n <p class=\"text-slate-200 text-lg mb-6\">\r\n \u064a\u062d\u062a\u0648\u064a \u0627\u0644\u0623\u0631\u062f\u0646 \u0639\u0644\u0649 \u062b\u0631\u0648\u0627\u062a \u0645\u0639\u062f\u0646\u064a\u0629 \u0647\u0627\u0645\u0629 \u0630\u0627\u062a \u0642\u064a\u0645\u0629 \u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0645\u062b\u0644 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a\u060c \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u060c \u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u062c\u064a\u0631\u064a\u060c \u0627\u0644\u0646\u062d\u0627\u0633 \u0648\u0627\u0644\u0630\u0647\u0628.\r\n <\/p>\r\n <div class=\"bg-gradient-to-r from-purple-900\/40 to-indigo-900\/40 p-5 rounded-xl border border-purple-500\/30 mb-8\">\r\n <h4 class=\"font-bold text-purple-200 text-lg mb-1 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n \u0645\u0639\u0644\u0648\u0645\u0629 \u0639\u0646 \u0627\u0644\u0628\u0648\u062a\u0627\u0633 \u0648\u0627\u0644\u0623\u0631\u062f\u0646:\r\n <\/h4>\r\n <p class=\"text-slate-300 text-lg\">\r\n \u064a\u064f\u0639\u062f \u0627\u0644\u0623\u0631\u062f\u0646 <strong class=\"text-purple-300\">\u062b\u0627\u0645\u0646 \u0623\u0643\u0628\u0631 \u062f\u0648\u0644\u0629 \u0645\u064f\u0635\u062f\u0651\u0631\u0629 \u0644\u0644\u0628\u0648\u062a\u0627\u0633<\/strong> \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645 \u0628\u0645\u0639\u062f\u0644 \u062a\u0635\u062f\u064a\u0631 \u064a\u0628\u0644\u063a \u0646\u062d\u0648 2.35 \u0645\u0644\u064a\u0648\u0646 \u0637\u0646 \u0633\u0646\u0648\u064a\u0627\u064b (\u0627\u0644\u0645\u0633\u062a\u062e\u0631\u062c \u0645\u0646 \u0645\u0639\u062f\u0646 \u0627\u0644\u0633\u064a\u0644\u0641\u064a\u062a).\r\n <\/p>\r\n <\/div>\r\n <h3 class=\"font-bold mb-4 text-white text-xl\">\u0627\u0644\u062c\u062f\u0648\u0644 (3): \u0628\u0639\u0636 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0641\u064a \u0627\u0644\u0623\u0631\u062f\u0646 \u0648\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a\u0647\u0627 \u0648\u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0644\u0647\u0627:<\/h3>\r\n <div class=\"table-wrap\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>\u0627\u0644\u0645\u0639\u062f\u0646<\/th>\r\n <th>\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u0630\u064a \u064a\u0648\u062c\u062f \u0641\u064a\u0647<\/th>\r\n <th>\u0623\u0647\u0645 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a (\u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a)<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a<\/td><td>\u0627\u0644\u0632\u0631\u0627\u0639\u0629 \u0648\u0627\u0644\u0623\u0633\u0645\u062f\u0629\u060c \u062d\u0645\u0636 \u0627\u0644\u0641\u0633\u0641\u0648\u0631\u064a\u0643.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a<\/span><\/td><td>\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u062c\u064a\u0631\u064a\u060c \u0627\u0644\u062a\u0631\u0627\u0641\u0631\u062a\u064a\u0646<\/td><td>\u0627\u0644\u0625\u0633\u0645\u0646\u062a\u060c \u0627\u0644\u062f\u0647\u0627\u0646\u0627\u062a\u060c \u0627\u0644\u0623\u062f\u0648\u064a\u0629\u060c \u0627\u0644\u0648\u0631\u0642.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a<\/td><td>\u0627\u0644\u0633\u0645\u0627\u062f\u060c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0627\u062a\u060c \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0632\u062c\u0627\u062c.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632<\/span><\/td><td>\u0627\u0644\u0635\u062e\u0631 \u0627\u0644\u0631\u0645\u0644\u064a<\/td><td>\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0632\u062c\u0627\u062c\u060c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0627\u062a\u060c \u0627\u0644\u062f\u064a\u0643\u0648\u0631\u0627\u062a.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u062c\u0628\u0633<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u062c\u0628\u0633<\/td><td>\u0627\u0644\u0628\u0646\u0627\u0621\u060c \u0627\u0644\u062a\u0648\u0631\u064a\u0642\u060c \u0648\u0627\u0644\u0637\u0628.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0630\u0647\u0628<\/span><\/td><td>\u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u0628\u0631\u0643\u0627\u0646\u064a\u0629 \u0627\u0644\u0645\u062c\u0648\u064a\u0629<\/td><td>\u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u0648\u0627\u0644\u062d\u0644\u064a.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a<\/span><\/td><td>\u064a\u0635\u0627\u062d\u0628 \u0627\u0644\u0635\u062e\u0648\u0631 \u0627\u0644\u062c\u064a\u0631\u064a\u0629<\/td><td>\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0635\u0644\u0628 \u0648\u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a.<\/td><\/tr>\r\n <tr><td><span class=\"highlight\">\u0627\u0644\u0633\u064a\u0644\u0641\u064a\u062a (\u0627\u0644\u0628\u0648\u062a\u0627\u0633)<\/span><\/td><td>\u0635\u062e\u0631 \u0627\u0644\u0633\u064a\u0644\u0641\u064a\u0646\u064a\u062a<\/td><td>\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629 \u0648\u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629.<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-16 bg-gradient-to-br from-indigo-900\/80 via-purple-900\/70 to-slate-900\/90 p-6 rounded-3xl border border-indigo-500\/40 shadow-[0_0_50px_rgba(99,102,241,0.25)] relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-80 h-80 bg-indigo-500\/20 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/2 pointer-events-none\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-80 h-80 bg-purple-500\/20 rounded-full blur-3xl translate-y-1\/2 -translate-x-1\/2 pointer-events-none\"><\/div>\r\n <div class=\"relative z-10\">\r\n <div class=\"flex items-center gap-4 border-b border-white\/10 pb-6 mb-8\">\r\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500\/30 to-purple-500\/30 text-indigo-300 flex items-center justify-center border border-indigo-400\/40 text-3xl shadow-[0_0_20px_rgba(99,102,241,0.3)]\">\r\n <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <h2 class=\"text-2xl font-bold text-white\">\u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0645\u0639\u0627\u062f\u0646<\/h2>\r\n <p class=\"text-indigo-200 text-lg mt-1\">\u0645\u0631\u0627\u062c\u0639\u0629 \u0634\u0627\u0645\u0644\u0629 \u0648\u0633\u0631\u064a\u0639\u0629 \u0644\u0623\u0647\u0645 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0648\u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0648\u0627\u0631\u062f\u0629 \u0641\u064a \u0627\u0644\u062f\u0631\u0633<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-indigo-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-indigo-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-indigo-500\/20 text-indigo-400 flex items-center justify-center text-base\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z\"\/><\/svg>\r\n <\/span>\r\n \u0623\u0633\u0627\u0633 \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646\r\n <\/h3>\r\n <p class=\"text-slate-300 text-lg leading-relaxed\">\r\n \u062a\u064f\u0635\u0646\u064e\u0651\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0625\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0631\u0626\u064a\u0633\u064a\u0629 \u0627\u0639\u062a\u0645\u0627\u062f\u0627\u064b \u0639\u0644\u0649 <strong class=\"text-indigo-200\">\u0627\u0644\u0623\u064a\u0648\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646)<\/strong> \u0627\u0644\u0645\u0643\u0648\u0646 \u0644\u0647\u0627. \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0645\u0646\u0647\u0627 \u0641\u064a \u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636 \u0639\u062f\u062f\u0647\u0627 \u0642\u0644\u064a\u0644 \u0646\u0633\u0628\u064a\u0627\u064b.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-purple-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-purple-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-purple-500\/20 text-purple-400 flex items-center justify-center text-base\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\/><\/svg>\r\n <\/span>\r\n \u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0633\u064a\u0644\u064a\u0643\u0627\u062a (Silicates)\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg marker:text-purple-400\">\r\n <li>\u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0623\u0643\u062b\u0631 \u0648\u0641\u0631\u0629 \u0641\u064a \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 (>90%).<\/li>\r\n <li>\u0648\u062d\u062f\u0629 \u0627\u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: <strong class=\"text-purple-200\">\u0633\u064a\u0644\u064a\u0643\u0627 \u0631\u0628\u0627\u0639\u064a\u0629 \u0627\u0644\u0623\u0648\u062c\u0647 (SiO\u2084)\u2074\u207b<\/strong>.<\/li>\r\n <li>\u062a\u0631\u062a\u0628\u0637 \u0627\u0644\u0647\u064a\u0627\u0643\u0644 \u0628\u0628\u0639\u0636\u0647\u0627 \u0641\u064a \u0633\u0644\u0627\u0633\u0644\u060c \u0635\u0641\u0627\u0626\u062d\u060c \u0623\u0648 \u0634\u0628\u0643\u0627\u062a \u062b\u0644\u0627\u062b\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f (\u0645\u062b\u0644 \u0627\u0644\u0643\u0648\u0627\u0631\u062a\u0632 \u0648\u0627\u0644\u0645\u0627\u064a\u0643\u0627).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-cyan-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-cyan-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-cyan-500\/20 text-cyan-400 flex items-center justify-center text-base\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\r\n <\/span>\r\n \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0627\u0644\u0644\u0627\u0633\u064a\u0644\u064a\u0643\u0627\u062a\u064a\u0629\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-1.5 text-slate-300 text-lg marker:text-cyan-400\">\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0643\u0631\u0628\u0648\u0646\u0627\u062a (CO\u2083)\u00b2\u207b:<\/strong> \u0645\u062b\u0644 \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u062a \u0648\u0627\u0644\u062f\u0648\u0644\u0648\u0645\u064a\u062a.<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0623\u0643\u0627\u0633\u064a\u062f O\u00b2\u207b:<\/strong> \u0645\u062b\u0644 \u062e\u0627\u0645\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062f (\u0627\u0644\u0647\u064a\u0645\u0627\u062a\u064a\u062a \u0648\u0627\u0644\u0645\u0627\u063a\u0646\u062a\u064a\u062a).<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0647\u0627\u0644\u064a\u062f\u0627\u062a:<\/strong> \u0623\u064a\u0648\u0646\u0627\u062a \u0647\u0627\u0644\u0648\u062c\u064a\u0646\u064a\u0629 (Cl\u207b, F\u207b) \u0645\u062b\u0644 \u0627\u0644\u0647\u0627\u0644\u064a\u062a \u0648\u0627\u0644\u0641\u0644\u0648\u0631\u064a\u062a.<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a \u0648\u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u062f\u0627\u062a:<\/strong> \u0627\u0644\u062c\u0628\u0633\u060c \u0627\u0644\u0628\u0627\u0631\u064a\u062a\u060c \u0627\u0644\u0628\u064a\u0631\u064a\u062a\u060c \u0648\u0627\u0644\u063a\u0627\u0644\u064a\u0646\u0627.<\/li>\r\n <li><strong class=\"text-cyan-200\">\u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a \u0648\u0627\u0644\u0623\u062d\u0627\u062f\u064a\u0629:<\/strong> \u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a\u060c \u0648\u0627\u0644\u0630\u0647\u0628 \u0648\u0627\u0644\u0641\u0636\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-white\/10 backdrop-blur-md hover:border-emerald-500\/30 transition-all\">\r\n <h3 class=\"text-xl font-bold text-emerald-300 mb-3 flex items-center gap-2\">\r\n <span class=\"w-8 h-8 rounded-lg bg-emerald-500\/20 text-emerald-400 flex items-center justify-center text-base\" style=\"font-size:1rem;\">🇯🇴<\/span>\r\n \u0627\u0644\u0623\u0647\u0645\u064a\u0629 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0648\u0641\u064a \u0627\u0644\u0623\u0631\u062f\u0646\r\n <\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-lg marker:text-emerald-400\">\r\n <li>\u062a\u062f\u062e\u0644 \u0627\u0644\u0645\u0639\u0627\u062f\u0646 \u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0627\u062a \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\u060c \u0627\u0644\u0628\u0646\u0627\u0621\u060c \u0648\u0627\u0644\u0623\u0633\u0645\u062f\u0629.<\/li>\r\n <li>\u064a\u0645\u062a\u0644\u0643 \u0627\u0644\u0623\u0631\u062f\u0646 \u062b\u0631\u0648\u0627\u062a \u0645\u0639\u062f\u0646\u064a\u0629 \u0645\u0647\u0645\u0629 \u0643\u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a (\u0627\u0644\u0623\u0628\u0627\u062a\u064a\u062a) \u0648\u0627\u0644\u0628\u0648\u062a\u0627\u0633 (\u0627\u0644\u0633\u064a\u0644\u0641\u064a\u062a).<\/li>\r\n <li>\u064a\u064f\u0639\u062f \u0627\u0644\u0623\u0631\u062f\u0646 \u062b\u0627\u0645\u0646 \u0623\u0643\u0628\u0631 \u0645\u064f\u0635\u062f\u0651\u0631 \u0644\u0644\u0628\u0648\u062a\u0627\u0633 \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0639\u0627\u0644\u0645.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n \r\n <script>\r\n (function() {\r\n 'use strict';\r\n\r\n const canvas = document.getElementById('tetraCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const toggleBtn = document.getElementById('rotateToggle');\r\n const resetBtn = document.getElementById('resetView');\r\n\r\n \/\/ ---- 3D setup ----\r\n const W = canvas.width; \/\/ 400\r\n const H = canvas.height; \/\/ 400\r\n\r\n \/\/ Tetrahedron vertices (radius = 120)\r\n const r = 120;\r\n const sqrt2 = Math.sqrt(2);\r\n const sqrt3 = Math.sqrt(3);\r\n \/\/ normalized tetra vertices\r\n const v = [\r\n { x: 0, y: r, z: 0 }, \/\/ top\r\n { x: r * 2 * sqrt2 \/ 3, y: -r \/ 3, z: 0 }, \/\/ right-bottom\r\n { x: -r * sqrt2 \/ 3, y: -r \/ 3, z: r * sqrt2 \/ 3 }, \/\/ left-back\r\n { x: -r * sqrt2 \/ 3, y: -r \/ 3, z: -r * sqrt2 \/ 3 } \/\/ left-front\r\n ];\r\n \/\/ center: silicon\r\n const center = { x: 0, y: 0, z: 0 };\r\n\r\n \/\/ state\r\n let rotY = 0.4;\r\n let rotX = 0.2;\r\n let isRotating = true;\r\n let autoRotateSpeedY = 0.008;\r\n let autoRotateSpeedX = 0.003;\r\n\r\n \/\/ ---- 3D math ----\r\n function rotateX(p, angle) {\r\n const c = Math.cos(angle),\r\n s = Math.sin(angle);\r\n return { x: p.x, y: p.y * c - p.z * s, z: p.y * s + p.z * c };\r\n }\r\n\r\n function rotateY(p, angle) {\r\n const c = Math.cos(angle),\r\n s = Math.sin(angle);\r\n return { x: p.x * c + p.z * s, y: p.y, z: -p.x * s + p.z * c };\r\n }\r\n\r\n function project(p, fov) {\r\n const f = fov || 400;\r\n const d = 600;\r\n const z = p.z + d;\r\n const scale = f \/ z;\r\n return { x: p.x * scale + W \/ 2, y: -p.y * scale + H \/ 2, z: p.z };\r\n }\r\n\r\n \/\/ ---- render ----\r\n function render() {\r\n ctx.clearRect(0, 0, W, H);\r\n\r\n \/\/ apply rotations\r\n const pts = v.map(p => {\r\n let r = rotateX(p, rotX);\r\n r = rotateY(r, rotY);\r\n return r;\r\n });\r\n const si = rotateX(center, rotX);\r\n const siR = rotateY(si, rotY);\r\n\r\n \/\/ project\r\n const proj = pts.map(p => project(p, 420));\r\n const siProj = project(siR, 420);\r\n\r\n \/\/ sort for depth (back to front)\r\n const indices = [0, 1, 2, 3];\r\n indices.sort((a, b) => proj[a].z - proj[b].z);\r\n\r\n \/\/ ---- draw bonds (lines) ----\r\n ctx.lineWidth = 2.5;\r\n \/\/ silicon to each oxygen\r\n for (let i = 0; i < 4; i++) {\r\n const p = proj[i];\r\n const alpha = 0.25 + 0.35 * (1 - (p.z + 200) \/ 500);\r\n ctx.beginPath();\r\n ctx.moveTo(siProj.x, siProj.y);\r\n ctx.lineTo(p.x, p.y);\r\n ctx.strokeStyle = `rgba(255,255,255,${Math.min(alpha,0.5)})`;\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ oxygen-oxygen edges (tetrahedron edges)\r\n const edges = [\r\n [0, 1],\r\n [0, 2],\r\n [0, 3],\r\n [1, 2],\r\n [1, 3],\r\n [2, 3]\r\n ];\r\n for (const [i, j] of edges) {\r\n const p1 = proj[i];\r\n const p2 = proj[j];\r\n const avgZ = (p1.z + p2.z) \/ 2;\r\n const alpha = 0.08 + 0.12 * (1 - (avgZ + 200) \/ 500);\r\n ctx.beginPath();\r\n ctx.moveTo(p1.x, p1.y);\r\n ctx.lineTo(p2.x, p2.y);\r\n ctx.strokeStyle = `rgba(248,113,113,${Math.min(alpha,0.25)})`;\r\n ctx.setLineDash([4, 6]);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n }\r\n\r\n \/\/ ---- draw atoms ----\r\n \/\/ oxygen atoms (sorted by depth)\r\n const colors = ['#f87171', '#fca5a5', '#f87171', '#fca5a5'];\r\n for (let idx = 0; idx < indices.length; idx++) {\r\n const i = indices[idx];\r\n const p = proj[i];\r\n const depthFactor = 0.6 + 0.4 * (1 - (p.z + 200) \/ 500);\r\n const radius = 22 * (0.85 + 0.15 * depthFactor);\r\n\r\n \/\/ glow\r\n const grad = ctx.createRadialGradient(p.x - 4, p.y - 4, 2, p.x, p.y, radius * 1.6);\r\n grad.addColorStop(0, `rgba(248,113,113,${0.4 * depthFactor})`);\r\n grad.addColorStop(1, 'rgba(248,113,113,0)');\r\n ctx.fillStyle = grad;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius * 1.6, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n \/\/ body\r\n const grad2 = ctx.createRadialGradient(p.x - 6, p.y - 8, 4, p.x, p.y, radius);\r\n grad2.addColorStop(0, '#fca5a5');\r\n grad2.addColorStop(0.6, '#f87171');\r\n grad2.addColorStop(1, '#b91c1c');\r\n ctx.fillStyle = grad2;\r\n ctx.shadowColor = 'rgba(248,113,113,0.5)';\r\n ctx.shadowBlur = 18;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n\r\n \/\/ label\r\n ctx.fillStyle = `rgba(255,255,255,${0.7 + 0.3 * depthFactor})`;\r\n ctx.font = `bold ${16 * depthFactor}px Cairo, sans-serif`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('O', p.x, p.y - 1);\r\n }\r\n\r\n \/\/ silicon atom (center)\r\n {\r\n const p = siProj;\r\n const depthFactor = 0.7 + 0.3 * (1 - (p.z + 200) \/ 500);\r\n const radius = 30 * (0.85 + 0.15 * depthFactor);\r\n\r\n \/\/ glow\r\n const grad = ctx.createRadialGradient(p.x - 4, p.y - 4, 2, p.x, p.y, radius * 1.8);\r\n grad.addColorStop(0, `rgba(129,140,248,${0.5 * depthFactor})`);\r\n grad.addColorStop(1, 'rgba(129,140,248,0)');\r\n ctx.fillStyle = grad;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius * 1.8, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n \/\/ body\r\n const grad2 = ctx.createRadialGradient(p.x - 8, p.y - 10, 4, p.x, p.y, radius);\r\n grad2.addColorStop(0, '#a5b4fc');\r\n grad2.addColorStop(0.5, '#818cf8');\r\n grad2.addColorStop(1, '#4338ca');\r\n ctx.fillStyle = grad2;\r\n ctx.shadowColor = 'rgba(129,140,248,0.6)';\r\n ctx.shadowBlur = 28;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n\r\n \/\/ label\r\n ctx.fillStyle = `rgba(255,255,255,${0.8 + 0.2 * depthFactor})`;\r\n ctx.font = `bold ${20 * depthFactor}px Cairo, sans-serif`;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText('Si', p.x, p.y - 1);\r\n }\r\n\r\n \/\/ ---- info overlay ----\r\n ctx.fillStyle = 'rgba(255,255,255,0.15)';\r\n ctx.font = '11px Cairo, sans-serif';\r\n ctx.textAlign = 'left';\r\n ctx.textBaseline = 'bottom';\r\n ctx.fillText('(SiO\u2084)\u2074\u207b | \u62d6\u52a8\u89c6\u89d2', 14, H - 10);\r\n\r\n \/\/ lall charge indicator\r\n ctx.fillStyle = 'rgba(255,255,255,0.08)';\r\n ctx.font = '11px Cairo, sans-serif';\r\n ctx.textAlign = 'right';\r\n ctx.textBaseline = 'bottom';\r\n ctx.fillText('\u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 -4', W - 14, H - 10);\r\n }\r\n\r\n \/\/ ---- animation loop ----\r\n let animId = null;\r\n\r\n function tick() {\r\n if (isRotating) {\r\n rotY += autoRotateSpeedY;\r\n rotX += autoRotateSpeedX;\r\n \/\/ keep X within reasonable range\r\n if (rotX > 0.8) rotX = 0.8;\r\n if (rotX < -0.8) rotX = -0.8;\r\n }\r\n render();\r\n animId = requestAnimationFrame(tick);\r\n }\r\n\r\n \/\/ ---- controls ----\r\n toggleBtn.addEventListener('click', function() {\r\n isRotating = !isRotating;\r\n this.textContent = isRotating ? '\u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062f\u0648\u0631\u0627\u0646' : '\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062f\u0648\u0631\u0627\u0646';\r\n this.classList.toggle('active', isRotating);\r\n });\r\n\r\n resetBtn.addEventListener('click', function() {\r\n rotY = 0.4;\r\n rotX = 0.2;\r\n render();\r\n });\r\n\r\n \/\/ ---- mouse drag (orbit) ----\r\n let isDragging = false;\r\n let prevMouse = { x: 0, y: 0 };\r\n\r\n canvas.addEventListener('mousedown', function(e) {\r\n isDragging = true;\r\n const rect = canvas.getBoundingClientRect();\r\n prevMouse.x = e.clientX - rect.left;\r\n prevMouse.y = e.clientY - rect.top;\r\n canvas.style.cursor = 'grabbing';\r\n });\r\n\r\n window.addEventListener('mousemove', function(e) {\r\n if (!isDragging) return;\r\n const rect = canvas.getBoundingClientRect();\r\n const mx = e.clientX - rect.left;\r\n const my = e.clientY - rect.top;\r\n const dx = mx - prevMouse.x;\r\n const dy = my - prevMouse.y;\r\n rotY += dx * 0.008;\r\n rotX += dy * 0.008;\r\n if (rotX > 0.8) rotX = 0.8;\r\n if (rotX < -0.8) rotX = -0.8;\r\n prevMouse.x = mx;\r\n prevMouse.y = my;\r\n render();\r\n });\r\n\r\n window.addEventListener('mouseup', function() {\r\n if (isDragging) {\r\n isDragging = false;\r\n canvas.style.cursor = 'default';\r\n }\r\n });\r\n\r\n \/\/ touch support\r\n let touchId = null;\r\n canvas.addEventListener('touchstart', function(e) {\r\n e.preventDefault();\r\n const t = e.touches[0];\r\n if (!t) return;\r\n isDragging = true;\r\n touchId = t.identifier;\r\n const rect = canvas.getBoundingClientRect();\r\n prevMouse.x = t.clientX - rect.left;\r\n prevMouse.y = t.clientY - rect.top;\r\n }, { passive: false });\r\n\r\n canvas.addEventListener('touchmove', function(e) {\r\n e.preventDefault();\r\n if (!isDragging) return;\r\n let t = null;\r\n for (const touch of e.touches) {\r\n if (touch.identifier === touchId) { t = touch; break; }\r\n }\r\n if (!t) return;\r\n const rect = canvas.getBoundingClientRect();\r\n const mx = t.clientX - rect.left;\r\n const my = t.clientY - rect.top;\r\n const dx = mx - prevMouse.x;\r\n const dy = my - prevMouse.y;\r\n rotY += dx * 0.008;\r\n rotX += dy * 0.008;\r\n if (rotX > 0.8) rotX = 0.8;\r\n if (rotX < -0.8) rotX = -0.8;\r\n prevMouse.x = mx;\r\n prevMouse.y = my;\r\n render();\r\n }, { passive: false });\r\n\r\n canvas.addEventListener('touchend', function(e) {\r\n isDragging = false;\r\n touchId = null;\r\n });\r\n\r\n \/\/ ---- start ----\r\n render();\r\n tick();\r\n\r\n \/\/ ---- resize \/ DPI handling ----\r\n function handleResize() {\r\n \/\/ canvas already fixed 400x400, just re-render\r\n render();\r\n }\r\n window.addEventListener('resize', handleResize);\r\n\r\n \/\/ ---- cleanup (optional) ----\r\n \/\/ (no-op for this simple case)\r\n\r\n })();\r\n <\/script>\r\n\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-18945","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18945","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=18945"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18945\/revisions"}],"predecessor-version":[{"id":18946,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18945\/revisions\/18946"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}