ihki / static /guide.html
3v324v23's picture
feat(monitoring): add error summaries
d410f54
Raw History Blame Contribute Delete
49.9 kB
<!doctype html>
<html lang="he" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#4B6A2C">
<title>ืื™ืš ืžืชืจื’ืœื™ื ยท ืื”ืœื ื•ืกื”ืœื</title>
<link rel="icon" href="/static/icons/icon-192.png?v=2">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&family=Secular+One&family=Noto+Sans+Hebrew:wght@500;700&display=swap">
<style>
/* Layout: one narrow RTL column; each section pairs a drawn mock of the app with a numbered key beside it (stacked on phones). */
:root{
--bg:#EEF0E8; --surface:#FAFBF6; --ink:#1C241D; --muted:#5E685C; --line:#D5DACB;
--olive:#4B6A2C; --olive-deep:#36501D; --on-olive:#FFFFFF; --olive-soft:#E3EAD6;
--sumac:#A3303F; --sumac-bg:#F6E3E3; --ok:#2F7A4A; --ok-bg:#E1F0E4; --amber:#8A5E0E; --amber-bg:#F5ECD8; --orange:#C45F00; --gold:#B8860B; --gold-bg:#F7EBC6;
--f-display:"Secular One","Assistant",system-ui,sans-serif;
--f-body:"Assistant",system-ui,"Segoe UI",Arial,sans-serif;
--f-tr:"Noto Sans Hebrew","Arial Hebrew",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--bg:#141915; --surface:#1D241F; --ink:#E7EBE2; --muted:#9AA595; --line:#2F3830;
--olive:#93B85F; --olive-deep:#6E8F42; --on-olive:#10150F; --olive-soft:#26301F;
--sumac:#E77B87; --sumac-bg:#3A1E23; --ok:#6CC08A; --ok-bg:#1C3324; --amber:#E0B45A; --amber-bg:#3A2F17; --orange:#F2A04A; --gold:#E8C35A; --gold-bg:#3A3217;
color-scheme:dark}}
:root[data-theme="dark"]{
--bg:#141915; --surface:#1D241F; --ink:#E7EBE2; --muted:#9AA595; --line:#2F3830;
--olive:#93B85F; --olive-deep:#6E8F42; --on-olive:#10150F; --olive-soft:#26301F;
--sumac:#E77B87; --sumac-bg:#3A1E23; --ok:#6CC08A; --ok-bg:#1C3324; --amber:#E0B45A; --amber-bg:#3A2F17; --orange:#F2A04A; --gold:#E8C35A; --gold-bg:#3A3217;
color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);margin:0;padding-inline:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));padding-block:max(18px,env(safe-area-inset-top)) max(48px,env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}
main{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,6vw,44px);line-height:1.1}
h2{font-size:26px;line-height:1.2}
h3{font-size:19px}
p{margin:0}
.lead{color:var(--muted);max-width:60ch;font-size:18px}
.eyebrow{font:700 13px/1 var(--f-body);letter-spacing:.06em;color:var(--olive)}
header.top{display:flex;flex-direction:column;gap:12px}
section{display:flex;flex-direction:column;gap:16px}
.sechead{display:flex;flex-direction:column;gap:6px}
.sechead p{color:var(--muted);max-width:62ch}
.tr{font-family:var(--f-tr)}
/* a drawn screen and its numbered key */
.pair{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:720px){.pair{grid-template-columns:minmax(0,1fr)}}
.phone{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding-block:14px;padding-inline:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 3px 0 var(--line);position:relative}
.n{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--sumac);color:#fff;font:700 13px/1 var(--f-body);flex:none;font-variant-numeric:tabular-nums}
.phone .n{position:absolute;z-index:2;box-shadow:0 0 0 2px var(--surface)}
.at{position:relative}
.at>.n{top:50%;right:-25px;transform:translateY(-50%)}
.at.l>.n{right:auto;left:-25px}
.m-foot.at>.n{top:-14px;transform:none}
.key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.key li{display:flex;gap:10px;align-items:flex-start}
.key li div{min-width:0}
.key b{display:block;font-weight:700}
.key span.d{color:var(--muted);font-size:16px}
/* mock pieces, in the app's own shapes */
.m-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-brand{font:400 18px/1 var(--f-display)}
.m-pill{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:700 12px/1.2 var(--f-body);background:var(--bg)}
.m-drive{margin-inline-start:auto;padding:4px 10px;border-radius:999px;border:1px solid var(--olive);color:var(--olive);font:700 12px/1.2 var(--f-body)}
.m-today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.m-today div{border:1px solid var(--line);border-radius:12px;padding:6px 4px;text-align:center;font:700 13px/1.25 var(--f-body);background:var(--bg)}
.m-today div small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.m-today .hot{border-color:var(--olive);background:var(--olive-soft)}
.m-rewards{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--olive);border-radius:12px;background:var(--surface)}
.m-week{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--amber-bg);border:2px solid var(--orange);color:var(--orange);font:700 13px var(--f-body)}
.m-rewards b{display:block;font-size:13px}.m-rewards small{display:block;color:var(--orange);font-size:10.5px;font-weight:700}.m-fire{color:var(--olive);font-weight:700;font-size:11px;text-align:left}
.m-nav{display:flex;gap:4px;flex-wrap:wrap}
.m-nav span:not(.n){font:600 12px/1 var(--f-body);padding:6px 8px;border-radius:8px;color:var(--muted)}
.m-nav span.on:not(.n){background:var(--olive);color:var(--on-olive)}
.m-level{font:400 15px/1.2 var(--f-display);text-align:center;color:var(--olive-deep)}
.m-level small{display:block;font:400 11px var(--f-body);color:var(--muted)}
.m-chapter{border-radius:14px;background:var(--olive);color:var(--on-olive);padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font:700 14px/1.2 var(--f-body)}
.m-chapter small{font-weight:400;opacity:.85}
.m-chapter i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.3);margin-top:4px;position:relative;overflow:hidden}
.m-chapter i::after{content:"";position:absolute;inset:0 auto 0 0;width:55%;background:var(--on-olive)}
.road{position:relative;height:520px}
.road svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.road .thread{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round}
.road .went{fill:none;stroke:var(--ok);stroke-width:4;stroke-dasharray:1 10;stroke-linecap:round}
.stop{position:absolute;display:flex;align-items:center;gap:8px;transform:translateY(-50%)}
.stop.L{flex-direction:row-reverse}
.stop.L .lbl{text-align:left}
.ball{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;font:700 18px/1 var(--f-body);background:var(--surface);border:3px solid var(--line);color:var(--muted)}
.ball.started{background:conic-gradient(var(--olive) 0 40%,var(--line) 40% 100%);border:0}
.ball.started::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ball.started span{position:relative}
.ball.now{border-color:var(--olive);color:var(--olive);box-shadow:0 0 0 6px var(--olive-soft)}
.ball.done{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.ball.gold{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
.ball.video{border-style:dashed;color:var(--olive)}
.ball .badge{position:absolute;top:-4px;inset-inline-end:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--ok);color:#fff}
.ball.gold .badge{background:var(--gold)}
.lbl{font:700 13px/1.25 var(--f-body);max-width:120px}
.lbl small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.chip{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:6px;font:700 10.5px/1.4 var(--f-body);background:var(--olive-soft);color:var(--olive-deep)}
.chip.read{background:var(--amber-bg);color:var(--amber)}
.tag{position:absolute;bottom:calc(100% + 6px);right:50%;transform:translateX(50%);white-space:nowrap;background:var(--olive);color:var(--on-olive);font:700 11px/1.2 var(--f-body);padding:4px 8px;border-radius:8px}
.tag::after{content:"";position:absolute;top:100%;right:50%;transform:translateX(50%);border:5px solid transparent;border-top-color:var(--olive)}
.tag.hw{background:var(--amber);color:var(--surface)}
.tag.hw::after{border-top-color:var(--amber)}
.tag small{display:block;font-weight:400;font-size:10px;opacity:.9}
.cup{position:absolute;transform:translate(50%,-50%);font-size:28px}
/* the practice card */
.m-bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.m-btn{border:1px solid var(--line);border-radius:10px;padding:5px 8px;font:600 12px/1.2 var(--f-body);background:var(--surface);color:var(--ink);white-space:nowrap}
.m-btn.p{background:var(--olive);color:var(--on-olive);border-color:var(--olive)}
.m-card{border:1px solid var(--line);border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;background:var(--bg);position:relative}
.m-meta{align-self:stretch;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.m-prompt{font:400 26px/1.2 var(--f-display)}
.m-task{font-size:13px;color:var(--muted);margin-top:-6px}
.m-mics{display:flex;align-items:center;gap:14px}
.m-mic{width:64px;height:64px;border-radius:50%;background:var(--olive);color:var(--on-olive);display:grid;place-items:center;box-shadow:0 0 0 7px var(--olive-soft)}
.m-mic.he{width:46px;height:46px;background:var(--surface);color:var(--olive);border:2px solid var(--olive);box-shadow:none}
.m-mic svg{width:26px;height:26px}
.m-status{font-size:12px;color:var(--muted)}
.m-result{align-self:stretch;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px;align-items:center}
.m-score{display:flex;gap:8px;align-items:center}
.m-score b{font:400 28px/1 var(--f-display);font-variant-numeric:tabular-nums}
.pill{padding:3px 10px;border-radius:999px;font:700 12px/1.3 var(--f-body)}
.pill.good{background:var(--ok-bg);color:var(--ok)}
.pill.mid{background:var(--amber-bg);color:var(--amber)}
.pill.bad{background:var(--sumac-bg);color:var(--sumac)}
.m-words{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font:700 17px/1.3 var(--f-tr)}
.m-words span{padding:2px 6px;border-radius:6px}
.w-ok{background:var(--ok-bg);color:var(--ok)}
.w-near{background:var(--amber-bg);color:var(--amber)}
.m-sp{flex:1}
.m-flag{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 8px;background:var(--surface)}
.m-foot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-self:stretch}
.m-foot span:not(.n){border:1px solid var(--line);border-radius:10px;padding:6px 2px;font:600 11px/1.2 var(--f-body);text-align:center;background:var(--surface)}
/* the settings dialog */
.m-btn.gear.hl{background:var(--olive-soft);border-color:var(--olive);box-shadow:0 0 0 4px var(--olive-soft)}
.dlg{border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.dlg .row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 14px/1.3 var(--f-body);padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.sel{border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-weight:700;background:var(--bg)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;direction:ltr}
.seg i{font-style:normal;padding:3px 8px;font-size:12.5px}
.seg i.on{background:var(--olive);color:var(--on-olive)}
.tg{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;flex:none}
.tg::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--surface)}
.tg.on{background:var(--olive)}
.tg.on::after{right:auto;left:3px}
/* topic cards */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.topic{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.topic .th{display:flex;align-items:center;gap:12px}
.topic .ball{width:44px;height:44px;font-size:16px}
.topic .th div{min-width:0}
.topic .th small{display:block;color:var(--muted);font-size:13.5px}
.topic p{font-size:15.5px}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 13px/1.3 var(--f-body)}
.flow span{padding:3px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.flow i{font-style:normal;color:var(--muted)}
.ex{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.ex b{color:var(--ink);font-weight:600}
/* legend of states */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.state b{font-size:15px}
.state span{font-size:13.5px;color:var(--muted)}
.score-scale{display:flex;flex-direction:column;gap:6px}
.scale{display:flex;height:34px;border-radius:10px;overflow:hidden;font:700 13px/34px var(--f-body);text-align:center;direction:ltr}
.scale div{min-width:0;white-space:nowrap;overflow:hidden}
.scale .bad{flex:60;background:var(--sumac-bg);color:var(--sumac)}
.scale .mid{flex:25;background:var(--amber-bg);color:var(--amber)}
.scale .good{flex:15;background:var(--ok-bg);color:var(--ok)}
.ticks{display:flex;direction:ltr;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ticks span:nth-child(1){flex:60}.ticks span:nth-child(2){flex:25}.ticks span:nth-child(3){flex:15}
.tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tip{border-inline-start:3px solid var(--olive);padding:4px 12px;display:flex;flex-direction:column;gap:4px}
.tip p{font-size:15.5px;color:var(--muted)}
.reward-demo{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}.reward-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.reward-stats div{padding:9px 4px;border-radius:10px;background:var(--olive-soft);text-align:center}.reward-stats div:first-child{background:var(--amber-bg);box-shadow:inset 0 0 0 1px var(--orange)}.reward-stats div:first-child b{color:var(--orange)}.reward-stats b{display:block;color:var(--olive);font:400 23px/1.1 var(--f-display)}.reward-stats small{font-size:11px;color:var(--muted)}
.reward-lesson{font:400 19px/1.2 var(--f-display);color:var(--olive);border-bottom:1px solid var(--line);padding-bottom:5px}.reward-subject{font-weight:700;font-size:14px}.beads{display:flex;gap:7px;flex-wrap:wrap}.bead{width:28px;height:28px;border-radius:50%;border:3px solid #52624b;background:radial-gradient(circle at 32% 27%,#dce7d4 0 9%,#769064 23%,#405136 72%);box-shadow:inset -2px -3px 3px rgb(0 0 0/.25)}.bead.gold{border-color:#9b690b;background:radial-gradient(circle at 32% 27%,#fff3a7 0 9%,#e4b83e 27%,#9d6509 75%)}
.jump{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font:700 14px/1.2 var(--f-body)}
.jump a:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
section{scroll-margin-top:60px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:720px){
.pair .phone{max-width:380px;width:100%;margin-inline:auto}
}
@media (max-width:520px){
body{font-size:16px;padding-block:18px 40px}
main{gap:34px}
h2{font-size:23px}
.lead{font-size:16.5px}
.phone{padding-block:12px;border-radius:18px}
.key{gap:10px}
.key span.d{font-size:15px}
.topics{grid-template-columns:minmax(0,1fr)}
.states{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.state{padding:12px 8px}
.tips{grid-template-columns:minmax(0,1fr)}
.lbl{font-size:12.5px;max-width:104px}
.m-btn{padding:5px 7px}
}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--olive);background:var(--olive);color:var(--on-olive);font:700 15px/1.2 var(--f-body);text-decoration:none;min-height:40px}
.back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a,button{-webkit-tap-highlight-color:transparent}
.jump a{min-height:36px;display:inline-flex;align-items:center}
</style>
</head>
<body>
<main>
<a class="back" id="back" href="/">โ†’ ื—ื–ืจื” ืœืืคืœื™ืงืฆื™ื”</a>
<header class="top">
<span class="eyebrow">ืื”ืœื ื•ืกื”ืœื ยท ืžื“ืจื™ืš ืงืฆืจ</span>
<h1>ืื™ืš ืžืชืจื’ืœื™ื ื‘ืžืกืœื•ืœ</h1>
<p class="lead">ื”ืžืกืœื•ืœ ื”ื•ื ื”ื“ืจืš ืฉืœื›ื ื‘ื™ืŸ ื”ืฉื™ืขื•ืจื™ื. ืœื•ืžื“ื™ื ืžื™ืœื™ื, ืžืชืจื’ืœื™ื ืžืฉืคื˜ื™ื ื‘ืงื•ืœ, ืžืงื‘ืœื™ื ืžืฉื•ื‘ ืขืœ ื”ื”ื’ื™ื™ื” ื•ืื•ืกืคื™ื ืืช ื”ืžืฉืคื˜ื™ื ืฉื›ื‘ืจ ื”ืคื›ื• ืœืฉืœื›ื. ื›ืืŸ ืชืžืฆืื• ืืช ื”ืžืกืœื•ืœ, ื”ืคืจืกื™ื ื•ื”ืžืฉื•ื‘, ื›ืœ ืกื•ื’ื™ ื”ืชืจื’ื•ืœ ื•ื”ื›ืœื™ื ื”ื ื•ืกืคื™ื ื‘ืืคืœื™ืงืฆื™ื”.</p>
</header>
<nav class="jump" aria-label="ืชื•ื›ืŸ ื”ืžื“ืจื™ืš"><a href="#path">ื”ืžืกืœื•ืœ</a><a href="#states">ื”ืขื™ื’ื•ืœื™ื</a><a href="#rewards">ื”ื”ืชืงื“ืžื•ืช ืฉืœื™</a><a href="#kinds">ืกื•ื’ื™ ื ื•ืฉืื™ื</a><a href="#practice">ื”ืชืจื’ื•ืœ</a><a href="#more">ืขื•ื“ ื“ืจื›ื™ ืชืจื’ื•ืœ</a><a href="#settings">ื”ื’ื“ืจื•ืช</a><a href="#tips">ื˜ื™ืคื™ื</a></nav>
<!-- 1. the path screen -->
<section id="path">
<div class="sechead">
<h2>ืžืกืš ื”ืžืกืœื•ืœ</h2>
<p>ื–ื” ื”ืžืกืš ืฉื ืคืชื— ืื—ืจื™ ื”ื›ื ื™ืกื”. ื”ื•ื ื ืคืชื— ืชืžื™ื“ ืขืœ ื”ื ื•ืฉื ืฉื›ื“ืื™ ืœืชืจื’ืœ ืขื›ืฉื™ื•.</p>
</div>
<div class="pair">
<div class="phone" aria-label="ื“ื•ื’ืžื” ืฉืœ ืžืกืš ื”ืžืกืœื•ืœ">
<div class="m-head at"><span class="n">1</span><span class="m-brand">ืื”ืœื ื•ืกื”ืœื</span><span class="m-pill">ื›ื™ืชื” ื‘ืณ โ–พ</span><span class="m-drive">? ืžื“ืจื™ืš</span></div>
<div class="m-today at l"><span class="n">2</span>
<div class="hot">ืกืจื˜ื•ืŸ ื™ื•ืžื™<small>ื™ื•ื 3 ยท ื‘ืจื›ื•ืช</small></div>
<div>ืชืจื’ื•ืœ ื™ื•ืžื™<small>10 ืžืฉืคื˜ื™ื</small></div>
<div>ืฉื™ืขื•ืจื™ ื‘ื™ืช<small>ืขื•ื“ ื™ื•ืžื™ื™ื</small></div>
</div>
<div class="m-rewards at"><span class="n">3</span><span class="m-week">๐Ÿ”ฅ 6</span><span><b>ื”ืขืจื‘ื™ืช ืฉื›ื‘ืจ ืฉืœื›ื</b><small>ืจืฆืฃ ืฉืœ 6 ื™ืžื™ื ยท ืฉื™ื 11</small></span><span class="m-fire">3/4 ื”ืฉื‘ื•ืข<br>18 โ˜…</span></div>
<div class="m-nav"><span class="on">ืžืกืœื•ืœ</span><span>ืคืขืœื™ื</span><span>ืžืฉื—ืงื™ื</span><span>ื—ื‘ืจ ืžื‘ื™ื ื—ื‘ืจ</span></div>
<div class="m-level">ืฉืœื‘ ืืณ<small>8 ืžืชื•ืš 10 ืฉื™ืขื•ืจื™ื ืžื•ื›ื ื™ื</small></div>
<div class="m-chapter at l"><span class="n">4</span><div>ืฉื™ืขื•ืจ 3<i></i></div><small>ืชื•ืจื’ืœื• 22 ืžืชื•ืš 40</small></div>
<div class="road">
<svg viewBox="0 0 310 520" preserveAspectRatio="none" aria-hidden="true">
<path class="thread" d="M155 40 C155 84 230 84 230 128 C230 172 155 172 155 216 C155 260 80 260 80 304 C80 348 155 348 155 392 C155 436 230 436 230 480 L230 515"/>
<path class="went" d="M155 40 C155 84 230 84 230 128 C230 172 155 172 155 216 C155 260 80 260 80 304"/>
</svg>
<div class="stop" style="right:calc(50% - 26px);top:40px"><div class="ball gold"><span class="badge">โ˜…</span>1</div><div class="lbl">ืคืขืœื™ื<small>ืชื•ืจื’ืœื• 8 ืžืชื•ืš 8</small></div></div>
<div class="stop" style="right:calc(26% - 26px);top:128px"><div class="ball done"><span class="badge">โœ“</span>2</div><div class="lbl">ืžืฉืคื˜ื™ื ืืณ<span class="chip">ืขื‘ืณ โ† ืขืจืณ</span><small>ืชื•ืจื’ืœื• 10 ืžืชื•ืš 10</small></div></div>
<div class="stop" style="right:calc(50% - 26px);top:216px"><div class="ball video"><span class="badge">โœ“</span>โ–ถ&#xFE0E;</div><div class="lbl">ื‘ืฉื•ืง<small>โœ“ ื ืฆืคื”</small></div></div>
<span class="n" style="top:292px;right:-25px">5</span>
<div class="stop L" style="left:calc(26% - 26px);top:304px"><div class="ball started now"><div class="tag">ื”ืชื—ื™ืœื•</div><span>3</span></div><div class="lbl">ืžืฉืคื˜ื™ื ืืณ<span class="chip read">ืขืจืณ โ† ืขื‘ืณ</span><small>ืชื•ืจื’ืœื• 4 ืžืชื•ืš 10</small></div></div>
<div class="stop" style="right:calc(50% - 26px);top:392px"><div class="ball"><div class="tag hw">ืฉื™ืขื•ืจื™ ื‘ื™ืช<small>ืขื•ื“ ื™ื•ืžื™ื™ื</small></div>๐Ÿ’ฌ</div><div class="lbl">ืกื™ืคื•ืจ ื”ืฉื•ืง<small>ืชื•ืจื’ืœื• 0 ืžืชื•ืš 12</small></div></div>
<span class="n" style="top:468px;right:-25px">6</span>
<div class="stop" style="right:calc(26% - 26px);top:480px"><div class="ball">โœŽ&#xFE0E;</div><div class="lbl">ื›ืชื™ื‘ืช ืžืฉืคื˜ื™ื<small>ื ื›ืชื‘ื• 0 ืžืชื•ืš 8</small></div></div>
</div>
</div>
<ol class="key">
<li><span class="n">1</span><div><b>ื”ื›ื™ืชื” ื•ื”ืžื“ืจื™ืš</b><span class="d">ืœื—ื™ืฆื” ืขืœ ืฉื ื”ื›ื™ืชื” ืžืจืื” ืืช ื—ื‘ืจื™ ื”ื›ื™ืชื”, ืื• ืžื—ืœื™ืคื” ื›ื™ืชื” ืื ืืชื ื‘ื™ื•ืชืจ ืžืื—ืช. ื”ื›ืคืชื•ืจ <b style="display:inline">?</b> ืžื—ื–ื™ืจ ืœืžื“ืจื™ืš ื”ื–ื” ื‘ื›ืœ ืจื’ืข ืžื”ืžืกืœื•ืœ.</span></div></li>
<li><span class="n">2</span><div><b>ืฉืœื•ืฉื” ืงื™ืฆื•ืจื™ื ืœื”ื™ื•ื</b><span class="d"><b style="display:inline">ืกืจื˜ื•ืŸ ื™ื•ืžื™</b> ืฉื”ืžื•ืจื” ืงื‘ืข ืœื”ื™ื•ื (ืžื•ื“ื’ืฉ ืขื“ ืฉืฆื•ืคื™ื). <b style="display:inline">ืชืจื’ื•ืœ ื™ื•ืžื™</b>: ืกื‘ื‘ ืฉืœ 10 ืžืฉืคื˜ื™ื, ื—ืฆื™ ืœืฉื™ืคื•ืจ ื•ื—ืฆื™ ื—ื“ืฉื™ื ืžื”ืฉื™ืขื•ืจ ื”ื ื•ื›ื—ื™. <b style="display:inline">ืฉื™ืขื•ืจื™ ื‘ื™ืช</b>: ืคื•ืชื— ื™ืฉืจ ืืช ื”ื ื•ืฉื ื”ืงืจื•ื‘ ืœื”ื’ืฉื”.</span></div></li>
<li><span class="n">3</span><div><b>ื”ื”ืชืงื“ืžื•ืช ื•ื”ืจืฆืฃ ืฉืœื›ื</b><span class="d">๐Ÿ”ฅ ื”ื•ื ืžืกืคืจ ื™ืžื™ ื”ืชืจื’ื•ืœ ื”ืจืฆื•ืคื™ื ื•ืžื•ืคื™ืข ื‘ืžืจื›ื– ื”ื›ืจื˜ื™ืก. ืœื™ื“ื• ืžื•ืคื™ืขื™ื ื™ืขื“ ืืจื‘ืขืช ื”ื™ืžื™ื ื”ืฉื‘ื•ืขื™ ื•ืžืกืคืจ ืžืฉืคื˜ื™ ื”ื–ื”ื‘ โ˜…. ืœื—ื™ืฆื” ืคื•ืชื—ืช ืืช ื›ืœ ืื•ืกืฃ ื”ื—ืจื•ื–ื™ื, ืœืคื™ ืฉื™ืขื•ืจ ื•ื ื•ืฉื.</span></div></li>
<li><span class="n">4</span><div><b>ื›ื•ืชืจืช ื”ืฉื™ืขื•ืจ</b><span class="d">ื”ืคืก ืžืจืื” ื›ืžื” ืžื”ืฉื™ืขื•ืจ ืชื•ืจื’ืœ. ืœื—ื™ืฆื” ืขืœื™ื” ืคื•ืชื—ืช ืืช ื”ื ื•ืฉื ื”ื‘ื ืฉืขื•ื“ ืœื ื ื’ืžืจ. ื‘ืกื•ืฃ ื›ืœ ืฉื™ืขื•ืจ ื™ืฉ ื’ื‘ื™ืข ๐Ÿ† ืฉืžื–ื”ื™ื‘ ื›ืฉื”ืฉื™ืขื•ืจ ื”ื•ืฉืœื.</span></div></li>
<li><span class="n">5</span><div><b>ื”ื ื•ืฉื ืฉืœ ืขื›ืฉื™ื•</b><span class="d">ืžืกื•ืžืŸ ื‘ื”ื™ืœื” ื•ื‘ื‘ื•ืขื” โ€žื”ืชื—ื™ืœื•โ€ ืื• โ€žื”ืžืฉืšโ€. ืื ื’ืœืœืชื ืจื—ื•ืง, ื”ื›ืคืชื•ืจ โ€žื—ื–ืจื” ืœื ื•ืฉื ื”ื ื•ื›ื—ื™โ€ ืžื—ื–ื™ืจ ืืœื™ื•.</span></div></li>
<li><span class="n">6</span><div><b>ื›ืœ ื”ื ื•ืฉืื™ื ืคืชื•ื—ื™ื</b><span class="d">ืืคืฉืจ ืœืคืชื•ื— ื›ืœ ื ื•ืฉื ื‘ื›ืœ ืฉื™ืขื•ืจ, ื’ื ื‘ืœื™ ืœืกื™ื™ื ืืช ืžื” ืฉืœืคื ื™ื•.</span></div></li>
</ol>
</div>
</section>
<!-- 2. topic states -->
<section id="states">
<div class="sechead">
<h2>ืžื” ืื•ืžืจ ื›ืœ ืขื™ื’ื•ืœ</h2>
<p>ื”ื˜ื‘ืขืช ืกื‘ื™ื‘ ื”ืขื™ื’ื•ืœ ืžืชืžืœืืช ืœืคื™ ื›ืžื” ืžืฉืคื˜ื™ื ื›ื‘ืจ ืืžืจืชื ื‘ื ื•ืฉื. ื”ื—ื•ื˜ ื‘ื™ืŸ ื”ืขื™ื’ื•ืœื™ื ื ืฆื‘ืข ื™ืจื•ืง ืื—ืจื™ ื ื•ืฉื ืฉื ื’ืžืจ.</p>
</div>
<div class="states">
<div class="state"><div class="ball">4</div><b>ืขื•ื“ ืœื ื”ืชื—ืœืชื</b><span>ื”ืžืกืคืจ ื”ื•ื ืžืงื•ื ื”ื ื•ืฉื ื‘ืฉื™ืขื•ืจ</span></div>
<div class="state"><div class="ball started"><span>3</span></div><b>ื‘ืชื”ืœื™ืš</b><span>ื”ื˜ื‘ืขืช ืžืจืื” ื›ืžื” ื›ื‘ืจ ืชื•ืจื’ืœ</span></div>
<div class="state"><div class="ball done"><span class="badge">โœ“</span>2</div><b>ื”ื•ืฉืœื</b><span>ื›ืœ ื”ืžืฉืคื˜ื™ื ื ืืžืจื• ืœืคื—ื•ืช ืคืขื ืื—ืช</span></div>
<div class="state"><div class="ball gold"><span class="badge">โ˜…</span>1</div><b>ื–ื”ื‘</b><span>ื›ืœ ื”ืžืฉืคื˜ื™ื ืงื™ื‘ืœื• 75 ื•ืžืขืœื”</span></div>
<div class="state"><div class="ball" style="border-color:var(--amber);margin-top:22px"><div class="tag hw" style="font-size:10px">ืขื•ื“ 3 ื™ืžื™ื</div>5</div><b>ืฉื™ืขื•ืจื™ ื‘ื™ืช</b><span>ื”ื‘ื•ืขื” ืกื•ืคืจืช ืืช ื”ื™ืžื™ื ืขื“ ื”ื”ื’ืฉื”</span></div>
<div class="state"><div class="ball video">โ–ถ&#xFE0E;</div><b>ืกืจื˜ื•ืŸ</b><span>โœ“ ืžื•ืคื™ืข ืื—ืจื™ ืฉืคืชื—ืชื ื•ืฆืคื™ืชื</span></div>
</div>
</section>
<!-- 3. progress rewards -->
<section id="rewards">
<div class="sechead">
<h2>ื”ืขืจื‘ื™ืช ืฉื›ื‘ืจ ืฉืœื›ื</h2>
<p>ื–ื” ื”ืžืงื•ื ืœืจืื•ืช ืœื ืจืง ืžื” ืกื™ื™ืžืชื, ืืœื ื›ืžื” ืขืจื‘ื™ืช ื›ื‘ืจ ืฆื‘ืจืชื ืœืื•ืจืš ื”ื“ืจืš. ืคื•ืชื—ื™ื ืื•ืชื• ื‘ืœื—ื™ืฆื” ืขืœ ื”ื›ืจื˜ื™ืก ืฉืžืขืœ ื”ืžืกืœื•ืœ.</p>
</div>
<div class="pair">
<div class="reward-demo" aria-label="ื“ื•ื’ืžื” ืฉืœ ืื•ืกืฃ ื”ื”ืชืงื“ืžื•ืช">
<div class="reward-stats"><div><b>๐Ÿ”ฅ 6</b><small>ืจืฆืฃ ยท ืฉื™ื 11</small></div><div><b>42</b><small>ืžืฉืคื˜ื™ื ืฉืœื›ื</small></div><div><b>18</b><small>ื—ืจื•ื–ื™ ื–ื”ื‘</small></div><div><b>3</b><small>ื™ืžื™ื ื”ืฉื‘ื•ืข</small></div></div>
<div class="reward-lesson">ืฉืœื‘ ืืณ ยท ืฉื™ืขื•ืจ 3</div>
<div class="reward-subject">ืžืฉืคื˜ื™ื: ืขื‘ืจื™ืช โ† ืขืจื‘ื™ืช ืืณ</div>
<div class="beads" aria-hidden="true"><i class="bead gold"></i><i class="bead gold"></i><i class="bead"></i><i class="bead gold"></i><i class="bead"></i><i class="bead"></i></div>
<div class="reward-subject">ืคืขืœื™ื ื‘ืขื‘ืจ</div>
<div class="beads" aria-hidden="true"><i class="bead gold"></i><i class="bead"></i><i class="bead gold"></i><i class="bead"></i></div>
</div>
<div class="tips">
<div class="tip"><h3>ื—ืจื•ื– ืœื›ืœ ืžืฉืคื˜</h3><p>ื”ืงืœื˜ื” ืจืืฉื•ื ื” ืขื ื“ื™ื‘ื•ืจ ืื•ืกืคืช ืืช ื”ืžืฉืคื˜. ืœื—ื™ืฆื” ืขืœ ื—ืจื•ื– ื‘ืื•ืกืฃ ืžื—ื–ื™ืจื” ื™ืฉืจ ืœืžืฉืคื˜ ืฉืœื•.</p></div>
<div class="tip"><h3>ื–ื”ื‘ ื‘ึพ75</h3><p>ื›ืฉื”ืฆื™ื•ืŸ ื”ื˜ื•ื‘ ื‘ื™ื•ืชืจ ื‘ืžืฉืคื˜ ืžื’ื™ืข ืœึพ75, ื”ื—ืจื•ื– ื”ื•ืคืš ืœื–ื”ื‘. ื”ืืคืœื™ืงืฆื™ื” ืฉื•ืžืจืช ืืช ื”ืฆื™ื•ืŸ ื”ื’ื‘ื•ื” ื‘ื™ื•ืชืจ, ืœื ืืช ื”ืื—ืจื•ืŸ.</p></div>
<div class="tip"><h3>ื™ืขื“ ืฉื‘ื•ืขื™ 4/4</h3><p>ื”ื˜ื‘ืขืช ืกื•ืคืจืช ื™ืžื™ื ืฉื•ื ื™ื ืฉื‘ื”ื ืชืจื’ืœืชื ื”ืฉื‘ื•ืข, ืžื™ื•ื ืฉื ื™ ืขื“ ื™ื•ื ืจืืฉื•ืŸ. ื“ื™ ื‘ื”ืงืœื˜ื” ืื—ืช ืขื ื“ื™ื‘ื•ืจ ื›ื“ื™ ืฉื”ื™ื•ื ื™ื™ืกืคืจ.</p></div>
<div class="tip"><h3>ืจืฆืฃ ๐Ÿ”ฅ</h3><p>ื”ืจืฆืฃ ืกื•ืคืจ ื™ืžื™ ืชืจื’ื•ืœ ืจืฆื•ืคื™ื. ื”ืจืฆืฃ ืฉืœ ืืชืžื•ืœ ื ืฉืืจ ืžื•ืฆื’ ื‘ืžืฉืš ื”ื™ื•ื ื›ื“ื™ ืฉืชืกืคื™ืงื• ืœื”ืžืฉื™ืš ืื•ืชื•; ืื ื”ื™ื•ื ืขื•ื‘ืจ ื‘ืœื™ ืชืจื’ื•ืœ, ื”ื•ื ืžืชืืคืก. ื”ืฉื™ื ื”ืื™ืฉื™ ื ืฉืžืจ.</p></div>
<div class="tip"><h3>ืจื’ืขื™ื ืฉื—ื•ื’ื’ื™ื</h3><p>ื—ืจื•ื– ื—ื“ืฉ, ืžืขื‘ืจ ืœื–ื”ื‘, ืฉื™ื ื—ื“ืฉ, ื”ืžืฉืš ืจืฆืฃ ื•ื”ืฉืœืžืช ื ื•ืฉื ืžืงื‘ืœื™ื ื”ื•ื“ืขืช ื—ื’ื™ื’ื” ืงืฆืจื” ืื—ืจื™ ื”ืฆื™ื•ืŸ.</p></div>
</div>
</div>
</section>
<!-- 4. topic kinds -->
<section id="kinds">
<div class="sechead">
<h2>ืกื•ื’ื™ ื”ื ื•ืฉืื™ื</h2>
<p>ื”ืกืžืœ ื‘ืขื™ื’ื•ืœ ื•ื”ืชื•ื•ื™ืช ืžืชื—ืช ืœืฉื ืื•ืžืจื™ื ืื™ื–ื” ืกื•ื’ ืชืจื’ื•ืœ ืžื—ื›ื” ื‘ืคื ื™ื.</p>
</div>
<div class="topics">
<article class="topic">
<div class="th"><div class="ball now">๐Ÿ“–</div><div><h3>ืžื™ืœื™ื ื—ื“ืฉื•ืช</h3><small>ืกืžืœ ืกืคืจ, ื‘ืชื—ื™ืœืช ื›ืœ ืฉื™ืขื•ืจ</small></div></div>
<div class="flow"><span>ืจื•ืื™ื ืžื™ืœื” ื‘ืขื‘ืจื™ืช</span><i>โ†</i><span>ื ื–ื›ืจื™ื ื•ื—ื•ืฉืคื™ื</span><i>โ†</i><span>ื™ื“ืขืชื™ / ืขื•ื“ ืœื</span></div>
<p>ื›ืจื˜ื™ืก ืœื›ืœ ืžื™ืœื” ื—ื“ืฉื” ื‘ืฉื™ืขื•ืจ. ื ืกื• ืœื”ื™ื–ื›ืจ ืื™ืš ืื•ืžืจื™ื ืื•ืชื”, ื•ืื– ื”ืงื™ืฉื• ืœื’ื™ืœื•ื™: ืžื•ืคื™ืขื™ื ื”ืชืขืชื™ืง ื•ื”ื›ืชื‘ ื”ืขืจื‘ื™, ื•ื”ืžื™ืœื” ืžื•ืฉืžืขืช (ื›ืคืชื•ืจ <b>ืœืื˜</b> ืžืฉืžื™ืข ืื•ืชื” ืฉื•ื‘ ืœืื˜). ืžืกืžื ื™ื <b>ื™ื“ืขืชื™</b> ืื• <b>ืขื•ื“ ืœื</b>, ื•ืžื™ืœื” ืฉืกื™ืžื ืชื โ€žืขื•ื“ ืœืโ€ ื—ื•ื–ืจืช ื‘ืกื•ืฃ ื”ืกื‘ื‘. ืื™ืŸ ื›ืืŸ ืฆื™ื•ืŸ ื•ืื™ืŸ ืžื™ืงืจื•ืคื•ืŸ.</p>
<p class="ex"><b>ื ืกืคืจ ื›:</b> โ€žื ืœืžื“ื• 12 ืžืชื•ืš 19โ€. ื”ื ื•ืฉื ื”ื•ืฉืœื ื›ืฉื›ืœ ืžื™ืœื” ืกื•ืžื ื” โ€žื™ื“ืขืชื™โ€ ืคืขื ืื—ืช. ื”ื”ืชืงื“ืžื•ืช ื ืฉืžืจืช ื‘ืžื›ืฉื™ืจ ื”ื–ื”.</p>
</article>
<article class="topic">
<div class="th"><div class="ball now">๐Ÿงฉ</div><div><h3>ื”ืชืื™ืžื• ื–ื•ื’ื•ืช</h3><small>ืกืžืœ ืคืื–ืœ, ืื—ืจื™ ื”ืžื™ืœื™ื ื”ื—ื“ืฉื•ืช</small></div></div>
<div class="flow"><span>ืขื‘ืจื™ืช ื‘ื˜ื•ืจ ืื—ื“</span><i>โ†</i><span>ืชืขืชื™ืง ื‘ื˜ื•ืจ ื”ืฉื ื™</span><i>โ†</i><span>ืžื—ื‘ืจื™ื ื–ื•ื’ื•ืช</span></div>
<p>ืžืฉื—ืง ืขืœ ื”ืžื™ืœื™ื ื”ื—ื“ืฉื•ืช ืฉืœ ื”ืฉื™ืขื•ืจ, ื‘ืกื‘ื‘ื™ื ืฉืœ ืขื“ ื—ืžืฉ ืžื™ืœื™ื. ืžืงื™ืฉื™ื ืขืœ ืžื™ืœื” ื‘ืขื‘ืจื™ืช ื•ืขืœ ื”ืชืขืชื™ืง ืฉืœื”: ื–ื•ื’ ื ื›ื•ืŸ ื ืฆื‘ืข ื‘ื™ืจื•ืง ื•ืžื•ืฉืžืข, ื•ื–ื•ื’ ืฉื’ื•ื™ ืจื•ืขื“ ื‘ืื“ื•ื ื•ื ืกืคืจ ื›ื˜ืขื•ืช. ื‘ืกื•ืฃ ืจื•ืื™ื ื›ืžื” ื˜ืขื•ื™ื•ืช ื”ื™ื• ื•ื›ืžื” ื–ืžืŸ ืœืงื—, ื•ืืคืฉืจ ืœืฉื—ืง ืฉื•ื‘.</p>
<p class="ex"><b>ื ืกืคืจ ื›:</b> โ€žื”ื•ืชืืžื• 15 ืžืชื•ืš 19โ€. ืžืฉื—ืง ืฉืœื ื‘ืœื™ ืืฃ ื˜ืขื•ืช ืžื–ื”ื™ื‘ ืืช ื”ื ื•ืฉื โ˜…. ื”ื”ืชืงื“ืžื•ืช ื ืฉืžืจืช ื‘ืžื›ืฉื™ืจ ื”ื–ื”.</p>
</article>
<article class="topic">
<div class="th"><div class="ball now">1</div><div><h3>ืขื‘ืจื™ืช โ† ืขืจื‘ื™ืช</h3><small>ืชื•ื•ื™ืช ื™ืจื•ืงื” <span class="chip">ืขื‘ืณ โ† ืขืจืณ</span></small></div></div>
<div class="flow"><span>ืจื•ืื™ื ืขื‘ืจื™ืช</span><i>โ†</i><span>ืื•ืžืจื™ื ื‘ืขืจื‘ื™ืช</span><i>โ†</i><span>ืฆื™ื•ืŸ ื”ื’ื™ื™ื”</span></div>
<p>ื”ืกื•ื’ ื”ื ืคื•ืฅ. ืžื•ืคื™ืข ืžืฉืคื˜ ื‘ืขื‘ืจื™ืช, ื•ืืชื ืื•ืžืจื™ื ืื•ืชื• ื‘ืขืจื‘ื™ืช ืžื“ื•ื‘ืจืช. ืžื™ ืฉืœื ื‘ื˜ื•ื— ืœื•ื—ืฅ โ€žื”ืฆื’ ืชืฉื•ื‘ื”โ€. ื‘ื ื•ืฉืื™ื ื”ืืœื” ื™ืฉ ื’ื <b>ืชืจื’ื•ืœ ืฉืงื˜ ืœืœื ืฆื™ื•ืŸ</b>: ืžืจื›ื™ื‘ื™ื ืืช ื”ืžืฉืคื˜ ืžืื•ืกืฃ ืžื™ืœื™ื, ื‘ืœื™ ืžื™ืงืจื•ืคื•ืŸ.</p>
<p class="ex"><b>ืœืžืฉืœ:</b> ืžืฉืคื˜ื™ื ืืณ ื•ื‘ืณ, ืคืขืœื™ื, ื”ื˜ื™ื•ืช ื‘ืขื‘ืจ, ื”ืžืกืคืจื™ื, ื”ื–ื•ื’ื™, ืขื‘ืจ ื•ืขืชื™ื“</p>
</article>
<article class="topic">
<div class="th"><div class="ball now">2</div><div><h3>ืขืจื‘ื™ืช โ† ืขื‘ืจื™ืช</h3><small>ืชื•ื•ื™ืช ืฆื”ื•ื‘ื” <span class="chip read">ืขืจืณ โ† ืขื‘ืณ</span></small></div></div>
<div class="flow"><span>ืจื•ืื™ื ืชืขืชื™ืง</span><i>โ†</i><span>ืงื•ืจืื™ื ื‘ืงื•ืœ</span><i>โ†</i><span>ืžืชืจื’ืžื™ื</span></div>
<p>ืžื•ืคื™ืข ืžืฉืคื˜ ื‘ืขืจื‘ื™ืช ื‘ืชืขืชื™ืง ืขื‘ืจื™. ื™ืฉ ืฉื ื™ ืžื™ืงืจื•ืคื•ื ื™ื: <b>ืข</b> ืœืงืจื™ืื” ื‘ืขืจื‘ื™ืช, ืขื ืฆื™ื•ืŸ ืขืœ ื”ื”ื’ื™ื™ื”, ื•<b>ื</b> ืœืชืจื’ื•ื ื‘ืขื‘ืจื™ืช, ืขื ืฆื™ื•ืŸ ืขืœ ื”ืชืจื’ื•ื ืฉืœื ื ืฉืžืจ. โ€žื”ืฆื’ ืชืจื’ื•ืโ€ ืžืจืื” ืืช ื”ืชืจื’ื•ื ื”ื ื›ื•ืŸ.</p>
<p class="ex"><b>ืœืžืฉืœ:</b> ืžืฉืคื˜ื™ื: ืขืจื‘ื™ืช โ† ืขื‘ืจื™ืช, ืฉืืœื•ืช ืขืœ ืกื™ืคื•ืจ ื”ืžื•ืกืš, ืงืคื˜ืŸ ืื™ื•ื‘</p>
</article>
<article class="topic">
<div class="th"><div class="ball now">๐Ÿ’ฌ</div><div><h3>ืฉื™ื—ื”, ืกื™ืคื•ืจ ื•ืฉื™ืจ</h3><small>ืกืžืœ ื‘ื•ืขืช ื“ื™ื‘ื•ืจ</small></div></div>
<div class="flow"><span>ื›ืœ ื”ืฉื•ืจื•ืช ืขืœ ื”ืžืกืš</span><i>โ†</i><span>ืื•ืžืจื™ื ื‘ืชื•ืจืŸ</span></div>
<p>ืื•ืžืจื™ื ืืช ื”ืฉื•ืจื•ืช ืื—ืช ืื—ืจื™ ื”ืฉื ื™ื™ื”. <b>ื”ืฉืžืขืช ื”ืฉื™ื—ื”</b> ืžืงืจื™ืื” ื”ื›ื•ืœ ืžื”ื”ืชื—ืœื” (ืขื ืืคืฉืจื•ืช โ€žืขืจื‘ื™ืช ื‘ืœื‘ื“โ€), ื•<b>ื‘ื•ื—ืŸ</b> ืžื‘ืงืฉ ืœื•ืžืจ ืืช ื›ืœ ื”ืฉื™ื—ื” ื‘ืจืฆืฃ ื•ื ื•ืชืŸ ืฆื™ื•ืŸ ืœื›ืœ ืฉื•ืจื” ื•ื‘ืกื•ืฃ ืฆื™ื•ืŸ ื›ื•ืœืœ. ื‘ืฉื™ื—ื” ื™ืฉ ืฉื ื™ ื“ื•ื‘ืจื™ื, ื‘ืกื™ืคื•ืจ ืงื•ืœ ืื—ื“.</p>
<p class="ex"><b>ืœืžืฉืœ:</b> ืฉื™ื—ืช ื”ื™ื›ืจื•ืช, ืกื™ืคื•ืจ ื”ืฉื•ืง, ืกื™ืคื•ืจ ื”ืคืœืืคืœ, ืฉื™ืจ ื”ืฆื‘ืขื™ื</p>
</article>
<article class="topic">
<div class="th"><div class="ball now">โœŽ&#xFE0E;</div><div><h3>ื›ืชื™ื‘ืช ืžืฉืคื˜ื™ื</h3><small>ืกืžืœ ืขื™ืคืจื•ืŸ, ื‘ืกื•ืฃ ื›ืœ ืฉื™ืขื•ืจ</small></div></div>
<div class="flow"><span>ืžื˜ืœื” ืžื”ื—ื•ื‘ืจืช</span><i>โ†</i><span>ื›ื•ืชื‘ื™ื ืžืฉืคื˜ื™ื</span><i>โ†</i><span>ื”ืžื•ืจื” ืงื•ืจื</span></div>
<p>ืฉื™ืขื•ืจื™ ื”ื‘ื™ืช ืฉืœ ื”ื—ื•ื‘ืจืช: ื›ื•ืชื‘ื™ื ืžืฉืคื˜ื™ื ืžืฉืœื›ื ืœืคื™ ื”ื”ื ื—ื™ื”, ืฉื•ืจื” ืœื›ืœ ืžืฉืคื˜. ื”ื˜ืงืกื˜ ื ืฉืžืจ ืื•ื˜ื•ืžื˜ื™ืช, ื”ืžื•ืจื” ืงื•ืจื ืื•ืชื• ื‘ืคืื ืœ, ื•ืื™ืŸ ืฆื™ื•ืŸ.</p>
<p class="ex"><b>ื ืกืคืจ ื›:</b> โ€žื ื›ืชื‘ื• 3 ืžืชื•ืš 5โ€</p>
</article>
<article class="topic">
<div class="th"><div class="ball video">โ–ถ&#xFE0E;</div><div><h3>ืกืจื˜ื•ืŸ</h3><small>ืขื™ื’ื•ืœ ืžืงื•ื•ืงื•</small></div></div>
<div class="flow"><span>ืฆื•ืคื™ื</span><i>โ†</i><span>โœ“ ื ืฆืคื”</span></div>
<p>ืกืจื˜ื•ืŸ ืฉื”ืžื•ืจื” ื”ื•ืกื™ืฃ ืœืฉื™ืขื•ืจ, ื‘ืžืงื•ื ืฉืœื• ื‘ื“ืจืš. ืื—ืจื™ ืฆืคื™ื™ื” ืžื•ืคื™ืข ืขืœื™ื• โœ“. ืกืจื˜ื•ืŸ ืœื ื ื•ืขืœ ืืช ื”ื ื•ืฉืื™ื ืฉืื—ืจื™ื•.</p>
</article>
</div>
</section>
<!-- 5. the practice screen -->
<section id="practice">
<div class="sechead">
<h2>ืžืกืš ื”ืชืจื’ื•ืœ</h2>
<p>ื ืคืชื— ื›ืฉื‘ื•ื—ืจื™ื ื ื•ืฉื. ื›ืืŸ ืื•ืžืจื™ื ืืช ื”ืžืฉืคื˜ื™ื ื•ืจื•ืื™ื ืžื” ื”ืžืขืจื›ืช ืฉืžืขื”.</p>
</div>
<div class="pair">
<div class="phone" aria-label="ื“ื•ื’ืžื” ืฉืœ ืžืกืš ื”ืชืจื’ื•ืœ">
<div class="m-bar at"><span class="n">1</span><span class="m-btn p">โ†’ ื—ื–ืจื” ืœืžืกืœื•ืœ</span><span class="m-btn">๐Ÿš— ืžืฆื‘ ื ืกื™ืขื”</span><span class="m-sp"></span><span class="m-btn">โ˜ฐ ืจืฉื™ืžื”</span><span class="m-btn gear">โš™</span></div>
<div class="m-card">
<div class="m-meta"><span>3 / 10</span><span>ืžืฉืคื˜ื™ื ืืณ</span></div>
<div class="at l" style="display:flex;flex-direction:column;gap:6px;padding-inline:14px"><span class="n">2</span>
<div class="m-prompt">ืžื” ืฉืœื•ืžืš?</div>
<div class="m-task">ืื™ืš ืื•ืžืจื™ื ืืช ื–ื” ื‘ืขืจื‘ื™ืช ืžื“ื•ื‘ืจืช?</div>
</div>
<div class="m-mics at"><span class="n">3</span>
<div class="m-mic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3" fill="currentColor"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8"/></svg></div>
</div>
<div class="m-status">ืœื—ืฆื• ื•ื“ื‘ืจื•. ื”ื”ืงืœื˜ื” ื ืขืฆืจืช ืœื‘ื“ ื›ืฉืžืกื™ื™ืžื™ื</div>
<span class="m-btn">ืชืจื’ื•ืœ ืฉืงื˜ ืœืœื ืฆื™ื•ืŸ</span>
<div class="m-result at l"><span class="n">4</span>
<div class="m-score"><b>78</b><span class="pill mid">ื›ืžืขื˜</span></div>
<div class="m-words tr"><span class="w-ok">ื›ึดึผื™ืฃ</span><span class="w-near">ื—ึธืืœึทื›ึผ</span></div>
</div>
<div class="m-foot at"><span class="n">5</span><span>๐Ÿ”Š ื”ืฉืžืข</span><span>โ–ถ ื”ืงืœื˜ื”</span><span>ื”ืฆื’ ืชืฉื•ื‘ื”</span><span>ื”ืงื•ื“ื</span><span>ื”ื‘ื</span></div>
</div>
</div>
<ol class="key">
<li><span class="n">1</span><div><b>ืฉื•ืจืช ื”ื›ืœื™ื</b><span class="d"><b style="display:inline">ื—ื–ืจื” ืœืžืกืœื•ืœ</b>, <b style="display:inline">ืžืฆื‘ ื ืกื™ืขื”</b> ืฉืžืงืจื™ื ื•ืžืงืฉื™ื‘ ื‘ืœื™ ืœื’ืขืช ื‘ืžืกืš, <b style="display:inline">ืจืฉื™ืžืช ื”ืžืฉืคื˜ื™ื</b> ืขื ื”ืฆื™ื•ืŸ ื”ื›ื™ ื˜ื•ื‘ ื‘ื›ืœ ืžืฉืคื˜, ื•ึพโš™ ืœื”ื’ื“ืจื•ืช ื”ื”ืฉืžืขื”. ื‘ืฉื™ื—ื” ืžื•ืคื™ืขื™ื ื›ืืŸ ื’ื ื”ืฉืžืขืช ื”ืฉื™ื—ื” ื•ื‘ื•ื—ืŸ.</span></div></li>
<li><span class="n">2</span><div><b>ื”ืžืฉืคื˜</b><span class="d">ืžื” ืฉืฆืจื™ืš ืœื•ืžืจ, ื•ืžืขืœื™ื• ื”ืžื™ืงื•ื ื‘ื ื•ืฉื.</span></div></li>
<li><span class="n">3</span><div><b>ื”ืžื™ืงืจื•ืคื•ืŸ</b><span class="d">ืœื•ื—ืฆื™ื ืคืขื ืื—ืช ื•ืžื“ื‘ืจื™ื, ื•ื”ื”ืงืœื˜ื” ื ืขืฆืจืช ืœื‘ื“. ื‘ืœื™ ืžื™ืงืจื•ืคื•ืŸ ืืคืฉืจ ืœื‘ื—ื•ืจ <b style="display:inline">ืชืจื’ื•ืœ ืฉืงื˜</b> ื•ืœื”ืจื›ื™ื‘ ืืช ื”ืžืฉืคื˜ ืžืžื™ืœื™ื.</span></div></li>
<li><span class="n">4</span><div><b>ื”ืฆื™ื•ืŸ</b><span class="d">ื›ืœ ืžื™ืœื” ื ืฆื‘ืขืช ืœืคื™ ืžื” ืฉื ืฉืžืข: ื™ืจื•ืง ื ืืžืจ ื ื›ื•ืŸ, ืฆื”ื•ื‘ ื›ืžืขื˜. ืžืชื—ืช ืžื•ืคื™ืขื™ื ื˜ื™ืคื™ื ืœืฉื™ืคื•ืจ.</span></div></li>
<li><span class="n">5</span><div><b>ื”ื›ืคืชื•ืจื™ื ืœืžื˜ื”</b><span class="d"><b style="display:inline">ื”ืฉืžืข</b> ืืช ื”ืชืฉื•ื‘ื” ื”ื ื›ื•ื ื”, <b style="display:inline">ื”ืงืœื˜ื”</b> ื›ื“ื™ ืœืฉืžื•ืข ืืช ืขืฆืžื›ื, <b style="display:inline">ื”ืฆื’ ืชืฉื•ื‘ื”</b>, ื•ืžืขื‘ืจ ื‘ื™ืŸ ืžืฉืคื˜ื™ื. ื‘ื—ืœืง ืžื”ื ื•ืฉืื™ื ื™ืฉ ื’ื <b style="display:inline">ืฉืœื™ืœื”</b> ื•<b style="display:inline">ื”ื˜ื™ื™ืช ืคืขืœื™ื</b>: ืื•ืชื• ืžืฉืคื˜ ื‘ืฉืœื™ืœื” ืื• ื‘ื’ื•ืฃ ืื—ืจ.</span></div></li>
</ol>
</div>
<div class="score-scale" aria-label="ืกื•ืœื ื”ืฆื™ื•ื ื™ื">
<h3>ืกื•ืœื ื”ืฆื™ื•ืŸ</h3>
<div class="scale"><div class="bad">ื ืกื• ืฉื•ื‘</div><div class="mid">ื›ืžืขื˜</div><div class="good">ืžืฆื•ื™ืŸ</div></div>
<div class="ticks"><span>0</span><span>60</span><span>75โ€“100</span></div>
</div>
</section>
<!-- 6. other practice routes -->
<section id="more">
<div class="sechead">
<h2>ืขื•ื“ ื“ืจื›ื™ื ืœืชืจื’ืœ</h2>
<p>ืœื ื—ื™ื™ื‘ื™ื ืœื‘ื—ื•ืจ ื ื•ืฉื ื•ืœืชืจื’ืœ ืื•ืชื• ืžื”ื”ืชื—ืœื” ืขื“ ื”ืกื•ืฃ. ืืœื” ื”ืžืกืœื•ืœื™ื ื”ืงืฆืจื™ื ื•ื”ืžืฉื—ืงื™ื™ื ืฉืžื•ืคื™ืขื™ื ืœืคื™ ื”ื”ืจืฉืื•ืช ื•ื”ืฉื™ืขื•ืจื™ื ืฉืœ ื”ื›ื™ืชื”.</p>
</div>
<div class="topics">
<article class="topic"><div class="th"><div class="ball now">10</div><div><h3>ืชืจื’ื•ืœ ื™ื•ืžื™</h3><small>ื”ื›ืคืชื•ืจ ืžืขืœ ื”ืžืกืœื•ืœ</small></div></div><p>ืกื‘ื‘ ืงืฆืจ ืฉืœ ืขื“ ืขืฉืจื” ืžืฉืคื˜ื™ื. ื”ื•ื ืžืฉืœื‘ ืžืฉืคื˜ื™ื ื—ืœืฉื™ื ืฉื›ื“ืื™ ืœืฉืคืจ ืขื ืžืฉืคื˜ื™ื ื—ื“ืฉื™ื ืžืฉื™ืขื•ืจื™ ื”ื‘ื™ืช ืื• ืžื”ืฉื™ืขื•ืจ ื”ืจืืฉื•ืŸ ืฉืขื•ื“ ืœื ื”ื•ืฉืœื. ื‘ืกื•ืฃ ืจื•ืื™ื ื›ืžื” ื ืืžืจื• ื•ื›ืžื” ืฆื™ื•ื ื™ื ื”ืฉืชืคืจื•.</p><p class="ex"><b>ื”ืกื‘ื‘ ืžืกื•ืžืŸ ื›ื”ื•ืฉืœื ืœื”ื™ื•ื:</b> ืื—ืจื™ ืฉืืžืจืชื ืœืคื—ื•ืช ื—ืฆื™ ืžืžื ื•.</p></article>
<article class="topic"><div class="th"><div class="ball now">๐Ÿš—</div><div><h3>ืžืฆื‘ ื ืกื™ืขื”</h3><small>ื‘ืžืกืš ื”ืชืจื’ื•ืœ</small></div></div><p>ื”ืืคืœื™ืงืฆื™ื” ืžืงืจื™ืื” ืืช ื”ื”ื ื—ื™ื”, ืžืงืฉื™ื‘ื” ืœืชืฉื•ื‘ื”, ืื•ืžืจืช ืืช ื”ื”ืขืจื›ื” ื‘ืงื•ืœ ื•ืžืžืฉื™ื›ื”. ืžืชืื™ื ืœื”ืœื™ื›ื” ืื• ื ืกื™ืขื” ืฉื‘ื”ืŸ ืœื ืจื•ืฆื™ื ืœื’ืขืช ื‘ืžืกืš. ืžืกื™ื™ืžื™ื ื‘ื›ืคืชื•ืจ โ€žืกื™ื•ื ื ืกื™ืขื”โ€.</p></article>
<article class="topic"><div class="th"><div class="ball now">ืคืขืœ</div><div><h3>ืœืฉื•ื ื™ืช ืคืขืœื™ื</h3><small>ื˜ื‘ืœืช ื”ืคืขืœื™ื ืฉืœ ื”ืงื•ืจืก</small></div></div><p>ืžื—ืคืฉื™ื ืคื•ืขืœ, ืขื•ื‘ืจื™ื ื‘ื™ืŸ ื”ืฉื™ืขื•ืจื™ื ื•ืจื•ืื™ื ืืช ื”ืฆื•ืจื•ืช ืฉื›ื‘ืจ ื ืœืžื“ื• ืœืคื™ ื‘ื ื™ื™ืŸ ื•ื’ื–ืจื”. ืœื—ื™ืฆื” ืขืœ ืฆื•ืจื” ื‘ืขืจื‘ื™ืช ืžืฉืžื™ืขื” ืื•ืชื”. ื”ืกื‘ืจื™ื ืงืฆืจื™ื ืขื•ื–ืจื™ื ืœื–ื”ื•ืช ืืช ื”ืชื‘ื ื™ืช.</p></article>
<article class="topic"><div class="th"><div class="ball now">๐Ÿ“ฟ</div><div><h3>ืžืฉื—ืงื™ ื—ื–ืจื”</h3><small>ื‘ืœืฉื•ื ื™ืช ืžืฉื—ืงื™ื, ื›ืฉื–ืžื™ื ื™ื</small></div></div><p>ืžืฉื—ืง ื”ื–ื™ื›ืจื•ืŸ ื”ื•ืคืš ื—ืจื•ื–ื™ื ื•ืžื—ื‘ืจ ื‘ื™ืŸ ืคืขืœื™ื ื‘ืขื‘ืจื™ืช ื•ื‘ืขืจื‘ื™ืช. ืžืฉื—ืงื™ื ื ื•ืกืคื™ื ื™ื›ื•ืœื™ื ืœื”ื™ืคืชื— ืœืคื™ ื”ื—ื•ืžืจ ื•ื”ื”ืจืฉืื” ืฉืœ ื”ื›ื™ืชื”.</p></article>
<article class="topic"><div class="th"><div class="ball now">๐Ÿ’ฌ</div><div><h3>ื™ืืœืœื” ื ื“ื‘ืจ</h3><small>ืฉื™ื—ื” ืขื ื“ืžื•ื™ื•ืช ืžื”ืฉื™ืขื•ืจื™ื, ื›ืฉื–ืžื™ื ื”</small></div></div><p>ื‘ื•ื—ืจื™ื ืชืจื—ื™ืฉ ื•ืžื ื”ืœื™ื ืฉื™ื—ื” ืงืฆืจื” ื‘ืขืจื‘ื™ืช ืขื ื“ืžื•ืช ืžื”ืงื•ืจืก. ื”ืฉื™ื—ื” ืžืฉืชืžืฉืช ื‘ืžื™ืœื™ื ื•ื‘ื“ืงื“ื•ืง ืฉื›ื‘ืจ ื ืœืžื“ื•, ื•ืžืชืงื ืช ื ื™ืกื•ื— ืื• ื“ืงื“ื•ืง ื‘ืขื‘ืจื™ืช ื›ืฉืฆืจื™ืš.</p></article>
<article class="topic"><div class="th"><div class="ball video">โ–ถ&#xFE0E;</div><div><h3>ืกืจื˜ื•ื ื™ื ื•ืกืคืจื™ื™ื”</h3><small>ืœืคื™ ื”ืชื•ื›ืŸ ืฉื”ืžื•ืจื” ืคืจืกื</small></div></div><p>ืกืจื˜ื•ืŸ ื™ื•ืžื™ ืžื•ืคื™ืข ืžืขืœ ื”ืžืกืœื•ืœ ื‘ื™ื•ื ืฉื ืงื‘ืข. ืกืจื˜ื•ื ื™ ืฉื™ืขื•ืจ ื ืžืฆืื™ื ื‘ืชื•ืš ื”ื“ืจืš, ื•ื”ืกืคืจื™ื™ื” ื”ื“ื™ื’ื™ื˜ืœื™ืช ื ืคืชื—ืช ืžืžืกืš ื”ื›ื ื™ืกื” ืœืžื™ ืฉืงื™ื‘ืœ ื’ื™ืฉื”.</p></article>
</div>
</section>
<section id="grok-management">
<div class="sechead">
<h2>ืœืžื•ืจื™ื: ื ื™ื”ื•ืœ ืกืคืจื™ื™ื” ื•ื›ื™ืชื•ืช ื“ืจืš Grok</h2>
<p>ืžื—ื‘ืจื™ื ืคืขื ืื—ืช ืืช ื”ืžื—ื‘ืจ โ€žื”ืกืคืจื™ื™ื” ื”ื“ื™ื’ื™ื˜ืœื™ืชโ€ ืœื—ืฉื‘ื•ืŸ ืขื ื”ืจืฉืืช ื ื™ื”ื•ืœ. ื›ืœ ืฉื™ื ื•ื™ ืžื•ืฆื’ ืœื‘ื“ื™ืงื” ื•ืจืง ืื™ืฉื•ืจ ืžืคื•ืจืฉ ืžื‘ืฆืข ืื•ืชื•.</p>
</div>
<div class="tips">
<div class="tip"><h3>ืฆืคื™ื™ื”</h3><p>ื›ืชื‘ื•: โ€žื”ืฆื’ ืืช ื”ื›ื™ืชื•ืช ื•ื”ืชืœืžื™ื“ื™ื ืฉืื ื™ ืจืฉืื™/ืช ืœื ื”ืœโ€ ืื• โ€žื”ืฆื’ ืืช ื”ืกืจื˜ื•ื ื™ื ื‘ืกืคืจื™ื™ื” ื”ื“ื™ื’ื™ื˜ืœื™ืชโ€. ื‘ืจืฉื™ืžืช ื›ื™ืชื” ืžื•ื—ื–ืจื™ื ืจืง ืฉื ื”ื›ื™ืชื”, ื”ืžืงืฆื•ืข, ื›ืชื•ื‘ื•ืช ื”ืชืœืžื™ื“ื™ื ื•ื”ื›ื™ื ื•ื™ื™ื ื”ืžืงื•ืžื™ื™ื.</p></div>
<div class="tip"><h3>ื”ื›ื ื” ืœืคื ื™ ืฉื™ื ื•ื™</h3><p>ื›ืชื‘ื• ืœืžืฉืœ: โ€žื”ื›ืŸ ื”ื•ืกืคืช ื”ืชืœืžื™ื“ noam@example.com ืœื›ื™ืชื” 12. ืืœ ืชื‘ืฆืข ืขื“ื™ื™ืŸโ€. ื‘ื“ืงื• ืืช ืžืกืคืจ ื”ื›ื™ืชื”, ื›ืชื•ื‘ืช ื”ืžื™ื™ืœ ื•ื”ื›ื™ื ื•ื™ ืฉึพGrok ืžืฆื™ื’.</p></div>
<div class="tip"><h3>ืื™ืฉื•ืจ</h3><p>ืจืง ืื—ืจื™ ืฉื”ืคืจื˜ื™ื ื ื›ื•ื ื™ื ื›ืชื‘ื•: โ€žืื ื™ ืžืืฉืจ/ืช ืœื‘ืฆืข ืืช ื”ืฉื™ื ื•ื™ ืฉื”ื•ื›ืŸโ€. ื”ืื™ืฉื•ืจ ืชืงืฃ ืœืขืฉืจ ื“ืงื•ืช ื•ืœืฉื™ืžื•ืฉ ืื—ื“ ื‘ืœื‘ื“.</p></div>
<div class="tip"><h3>ื’ืจืฃ ืคืขื™ืœื•ืช</h3><p>ื›ืชื‘ื•: โ€žื”ืฆื’ ื’ืจืฃ ืคืขื™ืœื•ืช ื™ื•ืžื™ ืฉืœ ื›ื™ืชื” 12 ื‘ื™ืŸ 2026-10-01 ืœึพ2026-10-26โ€. ืืคืฉืจ ืœื‘ื—ื•ืจ ื™ื•ื ืื• ืฉื‘ื•ืข ื•ื˜ื•ื•ื— ืฉืœ ืขื“ 90 ื™ื•ื ืฉืื™ื ื• ื‘ืขืชื™ื“. ื‘ืœื™ ืžืกืคืจ ื›ื™ืชื” ื™ื•ืฆื’ื• ื™ื—ื“ ืจืง ื”ื›ื™ืชื•ืช ืฉืžื•ืชืจ ืœื›ื ืœืจืื•ืช.</p></div>
<div class="tip"><h3>ืคืขื™ืœื•ืช ืขื“ื›ื ื™ืช</h3><p>ื›ืชื‘ื•: โ€žื”ืฆื’ ืคืขื™ืœื•ืช ืขื“ื›ื ื™ืช ื‘ื›ื™ืชื” 12 ื‘ื—ืžืฉ ื”ื“ืงื•ืช ื”ืื—ืจื•ื ื•ืช, ื•ื”ืคืจื“ ื‘ื™ืŸ ื ื•ื›ื—ื•ืช ื—ื™ื” ืœื‘ื™ืŸ ืชืจื’ื•ืœ ืฉื ืฉืžืจโ€. ื ื•ื›ื—ื•ืช ื—ื™ื” ื–ืžื™ื ื” ืจืง ื‘ืžืคื’ืฉ ื›ื™ืชื” ืคืขื™ืœ ื•ืžื‘ื•ืกืกืช ืขืœ heartbeat ืžึพ20 ื”ืฉื ื™ื•ืช ื”ืื—ืจื•ื ื•ืช. ืชืจื’ื•ืœ ื‘ื—ืœื•ืŸ ืื™ื ื• ืื•ืžืจ ืฉื”ืชืœืžื™ื“ ืขื“ื™ื™ืŸ ืžื—ื•ื‘ืจ. ืกืคื™ืจื•ืช ืงื˜ื ื•ืช ื•ื—ื•ืชืžื•ืช ื–ืžืŸ ืžื•ืกืชืจื•ืช ืœืคื™ ืกืคื™ ื”ืคืจื˜ื™ื•ืช.</p></div>
<div class="tip"><h3>ืžื•ืขื“ ื”ืคืขื™ืœื•ืช ื”ืื—ืจื•ืŸ</h3><p>ืืคืฉืจ ืœื‘ืงืฉ ืืช ื–ืžืŸ ื ื™ืกื™ื•ืŸ ื”ืชืจื’ื•ืœ ื”ืื—ืจื•ืŸ ื‘ึพUTC ื•ื‘ืฉืขื•ืŸ ื™ืฉืจืืœ. ื”ืืคืœื™ืงืฆื™ื” ืื™ื ื” ืฉื•ืžืจืช ืื™ืจื•ืข ื›ืœืœื™ ืฉืœ โ€žืคืขื™ืœื•ืช ืื—ืจื•ื ื” ื‘ืืคืœื™ืงืฆื™ื”โ€, ื•ืœื›ืŸ ื”ื™ืขื“ืจ ื ื™ืกื™ื•ืŸ ืื™ื ื• ื”ื•ื›ื—ื” ืฉืœื ื”ืฉืชืžืฉื• ื‘ื”.</p></div>
<div class="tip"><h3>ืžืฆื‘ ื”ืžืขืจื›ืช</h3><p>ื›ืชื‘ื•: โ€žื‘ื“ื•ืง ืืช ืžืฆื‘ ื”ืžืขืจื›ืช ื•ื”ืกื‘ืจ ื‘ืขื‘ืจื™ืช ืคืฉื•ื˜ื”โ€. ื”ืžืฆื‘ื™ื ื”ื ืชืงื™ืŸ, ื—ืœืงื™, ืœื ื–ืžื™ืŸ ืื• ืœื ืžื•ื’ื“ืจ. ืจื›ื™ื‘ ืื•ืคืฆื™ื•ื ืœื™ ืฉืœื ื”ื•ื’ื“ืจ, ืœืžืฉืœ ื”ืงืจืื”, ืื™ื ื• ื”ื•ืคืš ืœื‘ื“ื• ืืช ื›ืœ ื”ืžืขืจื›ืช ืœืชืงื•ืœื”.</p></div>
<div class="tip"><h3>ืกื™ื›ื•ื ืชืงืœื•ืช ืชืคืขื•ืœื™ื•ืช</h3><p>ื›ืชื‘ื•: โ€žื›ืžื” ืชืงืœื•ืช ืชืคืขื•ืœื™ื•ืช ื ืจืฉืžื• ื‘ืฉื‘ืขืช ื”ื™ืžื™ื ื”ืื—ืจื•ื ื™ื, ื•ืžืื™ื–ื” ืกื•ื’?โ€. ืืคืฉืจ ืœื‘ืงืฉ ืขื“ 90 ื™ืžื™ื ื•ืœืกื ืŸ ืœืคื™ ื›ืฉืœ ื—ื™ื‘ื•ืจ ื—ื™, timeout, ืื™ืžื•ืช, ืžืกื“ ื ืชื•ื ื™ื, ืฉื™ืจื•ืช ื—ื™ืฆื•ื ื™ ืื• ืฉื’ื™ืื” ืคื ื™ืžื™ืช. ื”ื ืชื•ื ื™ื ื ืฉืžืจื™ื ืขื“ 90 ื™ื•ื ื•ืžื•ืฆื’ื™ื ื›ืกืคื™ืจื•ืช ื™ื•ืžื™ื•ืช ื‘ืœื‘ื“. ื›ืฉืœ ื—ื™ื‘ื•ืจ ื—ื™ ื ืกืคืจ ืจืง ื›ืฉื‘ืงืฉืช polling ืื• heartbeat ื”ื’ื™ืขื” ืœืฉืจืช ื•ื ื›ืฉืœื”; ืžื›ืฉื™ืจ ืฉื”ืคืกื™ืง ืœืฉืœื•ื— ื‘ืงืฉื•ืช ื‘ืฉืงื˜ ืื™ื ื• ื ืจืื”, ื•ืœื›ืŸ ื–ื• ืกืคื™ืจืช ืžื™ื ื™ืžื•ื. ื“ื™ื•ื•ื— ืชืœืžื™ื“ ืฉื”ื ื™ืงื•ื“ ืฉื’ื•ื™ ื”ื•ื ืื•ืช ื ืคืจื“ ื•ืื™ื ื• ืชืงืœื” ืชืคืขื•ืœื™ืช ืžืื•ืžืชืช.</p></div>
<div class="tip"><h3>ืชืจื’ื™ืœื™ื ืงืฉื™ื</h3><p>ื›ืชื‘ื•: โ€žื”ืฆื’ ืืช 10 ื”ืชืจื’ื™ืœื™ื ื”ืงืฉื™ื ื‘ื™ื•ืชืจ ื‘ื›ืœ ื”ื›ื™ืชื•ืช ืฉืื ื™ ืžื•ืจืฉื”/ื™ืช ืœืจืื•ืช ื‘ื™ืŸ 2026-10-01 ืœึพ2026-10-26โ€. ื”ืฆืœื—ื” ื”ื™ื ืฆื™ื•ืŸ 75 ื•ืžืขืœื”. ื”ื“ื•ื— ืžืฆื™ื’ ืฉื™ืขื•ืจ ื”ืฆืœื—ื”, ืžืกืคืจ ืชืœืžื™ื“ื™ื, ื ื™ืกื™ื•ื ื•ืช ืžืžื•ืฆืขื™ื ืขื“ ื”ืฆืœื—ื” ื•ืฉื™ื ื•ื™ ื‘ื™ืŸ ื ื™ืกื™ื•ืŸ ืจืืฉื•ืŸ ืœืื—ืจื•ืŸ.</p></div>
<div class="tip"><h3>ืกืฃ ืคืจื˜ื™ื•ืช</h3><p>ืชืจื’ื™ืœ ื ื›ืœืœ ื‘ื“ื™ืจื•ื’ ืจืง ืื ืœืคื—ื•ืช ืฉืœื•ืฉื” ืชืœืžื™ื“ื™ื ื‘ื™ืฆืขื• ื™ื—ื“ ืœืคื—ื•ืช ื—ืžื™ืฉื” ื ื™ืกื™ื•ื ื•ืช. ืฉืžื•ืช ืฉืœ ืชืจื’ื™ืœื™ื ืฉืœื ืขื‘ืจื• ืืช ื”ืกืฃ ืื™ื ื ื ื—ืฉืคื™ื. โ€žืœื ื”ื’ื™ืขื• ืœื”ืฆืœื—ื” ื‘ื˜ื•ื•ื—โ€ ืื™ื ื• ืื•ืžืจ ืฉื”ืชืœืžื™ื“ื™ื ื ื˜ืฉื•, ื•ื”ืฉื™ืคื•ืจ ื”ืžืชื•ืืจ ืื™ื ื• ืžื•ื›ื™ื— ืฉื”ืชืจื’ื•ืœ ืœื‘ื“ื• ื’ืจื ืœืœืžื™ื“ื”.</p></div>
<div class="tip"><h3>ืคืจื˜ื™ื•ืช ื‘ื ื™ื˜ื•ืจ</h3><p>ื›ืœื™ ื”ื ื™ื˜ื•ืจ ื”ื ืœืงืจื™ืื” ื‘ืœื‘ื“ ื•ืื™ื ื ื“ื•ืจืฉื™ื ืื™ืฉื•ืจ. ื”ื ืžื—ื–ื™ืจื™ื ืกืคื™ืจื•ืช ืžืฆื˜ื‘ืจื•ืช ื‘ืœื‘ื“ โ€” ื‘ืœื™ ืฉืžื•ืช ืื• ื›ืชื•ื‘ื•ืช ืชืœืžื™ื“ื™ื, ืฆื™ื•ื ื™ื, ืชืฉื•ื‘ื•ืช, ื”ืงืœื˜ื•ืช, ื–ืžื ื™ ื›ื ื™ืกื” ืžื“ื•ื™ืงื™ื, ืœื•ื’ื™ื, ื›ืชื•ื‘ื•ืช ืคื ื™ืžื™ื•ืช ืื• ืกื•ื“ื•ืช.</p></div>
<div class="tip"><h3>ืžื” ื ืฉืืจ ื‘ืžืกืš ื”ื ื™ื”ื•ืœ</h3><p>ืžื—ื™ืงื”, ื”ืจืฉืื•ืช ื•ืชืคืงื™ื“ื™ื, ืฉื™ื•ืš ืžื•ืจื™ื, ืฉื™ืขื•ืจื™ื, ืฉื™ืขื•ืจื™ ื‘ื™ืช, ืกืจื˜ื•ื ื™ื ื™ื•ืžื™ื™ื, ืฆื™ื•ื ื™ื ื•ื”ืงืœื˜ื•ืช ืื™ื ื ื–ืžื™ื ื™ื ืœึพGrok ื•ืžื ื•ื”ืœื™ื ื‘ืžืกืš ื”ื ื™ื”ื•ืœ ื‘ืœื‘ื“.</p></div>
</div>
</section>
<!-- 7. playback settings -->
<section id="settings">
<div class="sechead">
<h2>ื”ื’ื“ืจื•ืช ื”ืฉืžืขื” โš™</h2>
<p>ื‘ืžืกืš ื”ืชืจื’ื•ืœ ื™ืฉ ื›ืคืชื•ืจ โš™. ื”ื•ื ืคื•ืชื— ืฉืชื™ ื”ื’ื“ืจื•ืช ืฉื ืฉืžืจื•ืช ื‘ืžื›ืฉื™ืจ ืœืคืขื ื”ื‘ืื”.</p>
</div>
<div class="pair">
<div class="phone" aria-label="ื“ื•ื’ืžื” ืฉืœ ื—ืœื•ืŸ ื”ื’ื“ืจื•ืช ื”ื”ืฉืžืขื”">
<div class="m-bar"><span class="m-btn p">โ†’ ื—ื–ืจื” ืœืžืกืœื•ืœ</span><span class="m-sp"></span><span class="m-btn">โ˜ฐ ืจืฉื™ืžื”</span><span class="m-btn gear hl">โš™</span></div>
<div class="dlg">
<div class="dlg-h"><b>ื”ื’ื“ืจื•ืช ื”ืฉืžืขื”</b><span class="m-btn">ืกื’ื™ืจื”</span></div>
<div class="row at l"><span class="n">1</span><span>ืžื”ื™ืจื•ืช</span><span class="sel">x1</span></div>
<div class="row at l"><span class="n">2</span><span>ื”ืงืจืืช ื”ืžืฉืคื˜ ื‘ืขื‘ืจื™ืช</span><span class="tg on" aria-hidden="true"></span></div>
</div>
</div>
<ol class="key">
<li><span class="n">1</span><div><b>ืžื”ื™ืจื•ืช</b><span class="d"><b style="display:inline">x0.8</b> ืœืื˜ ื™ื•ืชืจ, ื›ื“ื™ ืœืฉืžื•ืข ื›ืœ ื”ื‘ืจื”. <b style="display:inline">x1</b> ืจื’ื™ืœ. <b style="display:inline">x1.5</b> ืžื”ื™ืจ, ืœืื™ืžื•ืŸ ื”ื‘ื ืช ืฉืžื™ืขื”.</span></div></li>
<li><span class="n">2</span><div><b>ื”ืงืจืืช ื”ืžืฉืคื˜ ื‘ืขื‘ืจื™ืช</b><span class="d">ื›ืฉืžืกื•ืžืŸ, ื›ืœ ืžืฉืคื˜ ื—ื“ืฉ ืžื•ืงืจื ื‘ืงื•ืœ ื‘ืขื‘ืจื™ืช ืœืคื ื™ ืฉืขื•ื ื™ื, ื›ืš ืฉืืคืฉืจ ืœืชืจื’ืœ ื‘ืœื™ ืœืงืจื•ื ืžื”ืžืกืš. ื‘ื ื•ืฉืื™ ืขืจื‘ื™ืช โ† ืขื‘ืจื™ืช ืื™ืŸ ื”ืงืจืื”, ื›ื™ ื”ืขื‘ืจื™ืช ื”ื™ื ื”ืชืฉื•ื‘ื”.</span></div></li>
</ol>
</div>
</section>
<!-- 8. tips -->
<section id="tips">
<div class="sechead"><h2>ื›ืžื” ื˜ื™ืคื™ื</h2></div>
<div class="tips">
<div class="tip"><h3>ืžืชื—ื™ืœื™ื ืฉื™ืขื•ืจ ื—ื“ืฉ?</h3><p>ืขื‘ืจื• ืงื•ื“ื ืขืœ ื”ืžื™ืœื™ื ื”ื—ื“ืฉื•ืช ื•ืฉื—ืงื• ื‘ื”ืชืืžืช ื”ื–ื•ื’ื•ืช. ื›ืš ื”ืžืฉืคื˜ื™ื ืฉืœ ื”ืฉื™ืขื•ืจ ื™ื”ื™ื• ืžื•ื›ืจื™ื ื›ืฉืชื’ื™ืขื• ืืœื™ื”ื.</p></div>
<div class="tip"><h3>ืœื ื™ื•ื“ืขื™ื ืžื” ืœืชืจื’ืœ?</h3><p>ืœื—ืฆื• โ€žืชืจื’ื•ืœ ื™ื•ืžื™โ€. ื”ืกื‘ื‘ ื‘ื•ื—ืจ ืœื‘ื“ ืžืฉืคื˜ื™ื ืœืฉื™ืคื•ืจ ื•ืžืฉืคื˜ื™ื ื—ื“ืฉื™ื.</p></div>
<div class="tip"><h3>ืจื•ืฆื™ื ื–ื”ื‘?</h3><p>ื—ื–ืจื• ืœื ื•ืฉื ืฉื”ื•ืฉืœื ื•ืฉืคืจื• ื›ืœ ืžืฉืคื˜ ืœึพ75 ื•ืžืขืœื”. ื ืฉืžืจ ืชืžื™ื“ ื”ืฆื™ื•ืŸ ื”ื›ื™ ื˜ื•ื‘.</p></div>
<div class="tip"><h3>ื‘ื“ืจืš ืœืขื‘ื•ื“ื”?</h3><p>ืžืฆื‘ ื ืกื™ืขื” ืžืงืจื™ื, ืžืงืฉื™ื‘ ื•ื ื•ืชืŸ ืžืฉื•ื‘ ื‘ืงื•ืœ, ืžืฉืคื˜ ืื—ืจื™ ืžืฉืคื˜.</p></div>
<div class="tip"><h3>ืฆื™ื•ืŸ ื ืžื•ืš ืžืกื™ื‘ื” ืœื ื‘ืจื•ืจื”?</h3><p>ื“ื‘ืจื• ืงืจื•ื‘ ืœืžื™ืงืจื•ืคื•ืŸ, ื‘ืฉืงื˜ ืกื‘ื™ื‘, ื•ืœื—ืฆื• โ€žื”ืฉืžืขโ€ ื›ื“ื™ ืœืฉืžื•ืข ืฉื•ื‘ ืืช ื”ื ื•ืกื— ื”ื ื›ื•ืŸ.</p></div>
</div>
</section>
</main>
<script>
// opened from the app: go back to where the student was; opened from a shared link: to the app's start
document.getElementById("back").onclick=e=>{
try{ if(document.referrer&&new URL(document.referrer).origin===location.origin&&history.length>1){ e.preventDefault(); history.back(); } }catch{}
};
</script>
</body>
</html>