/* 🎞️ #trade-story หน้าแรก (2026-10-03) — พฤติกรรมทั้งหมดใน trade-story.js
   อยู่ในเวทีเดียวกับ #trading-costs (ฉาก 3 ต่อจากฉาก 1 ต้นทุน · ฉาก 2 Journal) — ตรึงด้วย .vs-on .vs-stage ของ style.html · JS ใส่ .s2 / .s3 ตามที่เลื่อนถึง
   .ts-done = เล่นจบแล้ว (เวทีถอดการตรึง เรียง 1 · 2 · 3) + ปุ่ม Replay
   เวที (.ts-in) ออกแบบที่ 1000×560 แล้วย่อทั้งก้อนด้วย transform (JS คิด scale) ⇒ ทุกพิกัดใน JS เป็นพิกัดออกแบบ
   🔴 ทุก selector ขึ้นต้นด้วย #trade-story + keyframes ชื่อ tst-* — pair-story ("ดูการใช้งาน") ใช้คลาส ts-cap / ts-glow เป็นสถานะของมัน ⛔ ชื่อชนกัน = แผงฉากนั้นขยายแล้วหายทั้ง 3 ปุ่ม (2026-10-03) */
#trade-story{position:relative;padding:40px 0}
#trade-story{text-align:left}                                   /* .vstate จัดกลาง ⇒ เรื่องเล่ากลับชิดซ้าย */
/* ตรึงอยู่ : ซ้อนที่เดียวกับฉาก 1–2 (grid-area 1/1) · ซ่อนจน .s3 แล้วโผล่แทนฉาก 2 ท่าเดียวกับฉาก 1 → 2 */
#trading-costs.vs-on #trade-story{grid-area:1/1;width:100%;padding:0;opacity:0;transform:translateY(40px);visibility:hidden;pointer-events:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
#trading-costs.vs-on.s3 #trade-story{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .7s ease .25s,transform .8s cubic-bezier(.2,.8,.2,1) .25s}
/* ❓ ฉากคำถาม (.sq) : โผล่แทนฉาก 2 · แล้วหลีกให้เรื่องเล่า (.s3) */
#trading-costs.vs-on .vs-sq{grid-area:1/1;margin:0 auto;width:100%;opacity:0;transform:translateY(40px);visibility:hidden;pointer-events:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
#trading-costs.vs-on.sq .vs-sq{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .7s ease .25s,transform .8s cubic-bezier(.2,.8,.2,1) .25s}
#trading-costs.vs-on.sq .vs-s2,#trading-costs.vs-on.s3 .vs-sq{opacity:0;transform:translateY(-40px);visibility:hidden;pointer-events:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
#trading-costs.vs-on .vs-qs li,#trading-costs.vs-on .vs-q-end{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
#trading-costs.vs-on.sq .vs-qs li,#trading-costs.vs-on.sq .vs-q-end{opacity:1;transform:none}
#trading-costs.vs-on.sq .vs-qs li:nth-child(1){transition-delay:.7s}
#trading-costs.vs-on.sq .vs-qs li:nth-child(2){transition-delay:1.2s}
#trading-costs.vs-on.sq .vs-qs li:nth-child(3){transition-delay:1.7s}
#trading-costs.vs-on.sq .vs-q-end{transition-delay:2.3s}
#trading-costs.vs-on.s3 .vs-s2{opacity:0;transform:translateY(-40px);visibility:hidden;pointer-events:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
#trading-costs.vs-on{height:auto}                               /* ความสูงช่วงตรึง = JS (ฉาก 1–2 + 6 บท) */
/* 64 = หัวเว็บ sticky · กว้าง = เนื้อหา section อื่น (--max − padding 28×2) · ความสูงกรอบ JS คิด (fit) ให้พอดีจอ */
#trade-story .ts-mount{width:min(calc(var(--max,1280px) - 56px),calc(100% - 56px));margin:0 auto;padding-top:64px}

#trade-story .ts-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
#trade-story .ts-rail{display:flex;gap:6px;flex:1;min-width:0}
/* แถบบท = ปุ่ม (กดบทไหน = เล่นใหม่จากบทนั้นจนจบ) · พื้นที่กด 20px แต่เส้นที่เห็นสูง 5px */
#trade-story .ts-rail button{flex:1;height:20px;padding:0;border:0;background:none;cursor:pointer;position:relative}
#trade-story .ts-rail button::before,#trade-story .ts-rail button::after{content:"";position:absolute;left:0;right:0;top:7.5px;height:5px;border-radius:99px}
#trade-story .ts-rail button::before{background:#dcdce3;transition:background .2s}
#trade-story .ts-rail button::after{background:linear-gradient(90deg,#6c63ff,#14b8a6);transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
#trade-story .ts-rail button.on::after{transform:none}
#trade-story .ts-rail button:hover::before{background:#b9b8c2}
#trade-story .ts-rail button:hover::after{filter:brightness(1.15)}
#trade-story .ts-rail button:focus-visible{outline:2px solid #6c63ff;outline-offset:2px;border-radius:4px}
/* ⏸️ หลุดจอ = หยุด CSS animation ด้วย (ตัวจับเวลาใน JS หยุดเองแล้ว) */
#trade-story.ts-paused .ts-in *{animation-play-state:paused !important}
#trade-story .ts-btn{flex:none;border:1px solid var(--line,#e5e5e7);background:#fff;color:#1c1c22;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
#trade-story .ts-btn:hover{background:#f2f2f6}
#trade-story .ts-btn[hidden]{display:none}
#trade-story .ts-btn.go{background:#1c1c22;color:#fff;border-color:#1c1c22}#trade-story .ts-btn.go:hover{background:#33333d}

#trade-story .ts-cap{min-height:92px;margin-bottom:12px}
#trade-story .ts-cap small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8f8f98}
#trade-story .ts-cap h3{margin:4px 0 4px;font-size:clamp(20px,2.6vw,28px);letter-spacing:-.02em;line-height:1.2}
#trade-story .ts-cap p{margin:0;color:var(--muted,#6e6e73);font-size:clamp(14px,1.5vw,16px);line-height:1.55;max-width:760px}
#trade-story .ts-cap>*{transition:opacity .35s ease,transform .35s ease}
#trade-story .ts-cap.swap>*{opacity:0;transform:translateY(8px)}

#trade-story .ts-box{position:relative;width:100%;aspect-ratio:1000/560;border-radius:22px;overflow:hidden;background:#12151c;box-shadow:0 30px 70px -36px rgba(15,18,40,.55)}
#trade-story .ts-in{position:absolute;left:0;top:0;width:1000px;height:560px;transform-origin:0 0;font-family:"Segoe UI",Arial,sans-serif;color:#e5e7eb}
#trade-story .ts-in svg{position:absolute;left:0;top:0;overflow:visible}
#trade-story .ts-note{position:absolute;right:14px;bottom:10px;font-size:11px;color:#6b7280}

/* ── ป้ายบนเวที ── */
#trade-story .ts-tag{position:absolute;padding:8px 12px;border-radius:12px;background:rgba(17,20,28,.88);border:1px solid #2a2f3a;font-size:14px;line-height:1.35;backdrop-filter:blur(4px);transition:opacity .35s,transform .35s}
#trade-story .ts-tag b{display:block;font-size:12px;font-weight:600;color:#9aa3b2;letter-spacing:.03em}
#trade-story .ts-tag .big{font-size:24px;font-weight:800;letter-spacing:-.01em}
#trade-story .ts-dn{color:#f87171}#trade-story .ts-up{color:#34d399}#trade-story .ts-warn{color:#fbbf24}
#trade-story .ts-hide{opacity:0;transform:translateY(6px);pointer-events:none}
#trade-story .ts-stamp{position:absolute;padding:14px 22px;border:3px solid #ef4444;border-radius:14px;color:#ef4444;font-size:26px;font-weight:900;letter-spacing:.02em;background:rgba(239,68,68,.08);transform:rotate(-6deg) scale(1.6);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
#trade-story .ts-stamp.in{opacity:1;transform:rotate(-6deg) scale(1)}
#trade-story .ts-stamp small{display:block;font-size:14px;font-weight:700;letter-spacing:0}
#trade-story .ts-press{position:absolute;padding:8px 16px;border-radius:10px;background:#dc2626;color:#fff;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(220,38,38,.4);transition:transform .15s,opacity .3s}
#trade-story .ts-press.dn{transform:scale(.9)}
#trade-story .ts-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#9aa3b2;font-size:20px}
#trade-story .ts-ph b{display:block;font-size:44px;color:#e5e7eb;margin-bottom:8px}
#trade-story .ts-shake{animation:tst-shake .5s}
@keyframes tst-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ── ป้ายฟีเจอร์ (ชื่อฟีเจอร์จริงเด้งตอนมันทำงาน — เป้าหมายของเรื่องคือให้ลูกค้ารู้ว่ามีอะไร) ── */
#trade-story .ts-feat{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(#171b24,#171b24) padding-box,linear-gradient(90deg,#6c63ff,#14b8a6) border-box;border:1.5px solid transparent;
  box-shadow:0 10px 26px -10px rgba(108,99,255,.7);opacity:0;transform:translateY(10px) scale(.92);transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1)}
#trade-story .ts-feat.in{opacity:1;transform:none}
#trade-story .ts-feat i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#6c63ff,#14b8a6);font-style:normal;font-size:12px}
/* ── บท 2 : แผง + แถบ Journal ── */
#trade-story .ts-img{position:absolute;transition:opacity .45s,transform .7s cubic-bezier(.3,1.2,.4,1),left .7s cubic-bezier(.3,1.1,.4,1),top .7s cubic-bezier(.3,1.1,.4,1)}
#trade-story .ts-float{animation:tst-float 2.4s ease-in-out infinite}
@keyframes tst-float{50%{translate:0 -8px}}
#trade-story .ts-glow{position:absolute;width:60px;height:400px;border-radius:30px;background:radial-gradient(closest-side,rgba(20,184,166,.55),transparent);opacity:0;transition:opacity .3s}
#trade-story .ts-glow.in{opacity:1;animation:tst-glow .9s ease-out forwards}
@keyframes tst-glow{to{opacity:0;transform:scale(1.8,1.1)}}
#trade-story .ts-log{position:absolute;left:500px;top:70px;width:470px;border-radius:16px;background:#e9ecf1;color:#1f2937;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);opacity:0;transform:translateX(30px);transition:opacity .45s,transform .55s cubic-bezier(.2,1.2,.4,1)}
#trade-story .ts-log.in{opacity:1;transform:none}
#trade-story .ts-log .hd{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#252b36;color:#fff;font-weight:700;font-size:14px}
#trade-story .ts-log .hd img{width:22px;height:22px}
#trade-story .ts-log .hd span{margin-left:auto;font-size:12px;font-weight:600;color:#9aa3b2}
#trade-story .ts-log .th,#trade-story .ts-log .tr{display:grid;grid-template-columns:28px 1fr 64px 120px 92px 62px;gap:6px;align-items:center;padding:6px 14px;font-size:12.5px;white-space:nowrap}
#trade-story .ts-log .th{color:#6b7280;font-size:11px;font-weight:700;letter-spacing:.03em;background:#f4f5f8}
#trade-story .ts-log .tr{background:#fff;border-top:1px solid #eef0f3;opacity:0;transform:translateX(-12px);transition:opacity .3s,transform .3s}
#trade-story .ts-log .tr.in{opacity:1;transform:none}
#trade-story .ts-log .tr b{color:#2563eb}#trade-story .ts-log .neg{color:#dc2626;font-weight:700;text-align:right}
#trade-story .ts-log .mk{justify-self:start;padding:1px 7px;border-radius:99px;background:#fee2e2;color:#b91c1c;font-size:11px;font-weight:700}
#trade-story .ts-log .ft{display:flex;justify-content:space-between;padding:9px 14px;background:#f4f5f8;font-size:13px;font-weight:700;opacity:0;transition:opacity .4s}
#trade-story .ts-log .ft.in{opacity:1}

/* ── บท 3 : หน้า AI Coach ของ Journal (เมนู/ป้าย = ของจริง journal/language_*.mqh) ── */
#trade-story .ts-jw{position:absolute;inset:16px 16px 30px;display:flex;border-radius:14px;overflow:hidden;background:#e9ecf1;color:#1f2937;opacity:0;transform:scale(.97);transition:opacity .45s,transform .55s cubic-bezier(.2,1.2,.4,1)}
#trade-story .ts-jw.in{opacity:1;transform:none}
#trade-story .ts-jw .sd{flex:none;width:176px;background:#252b36;color:#c3cad6;padding:14px 10px}
#trade-story .ts-jw .lg{display:flex;align-items:center;gap:7px;margin-bottom:12px;color:#fff;font-weight:700;font-size:15px}#trade-story .ts-jw .lg img{width:26px;height:26px}
#trade-story .ts-jw .sd i{display:flex;align-items:center;gap:6px;font-style:normal;font-size:12.5px;padding:5px 9px;border-radius:8px;white-space:nowrap}
#trade-story .ts-jw .sd i.on{background:linear-gradient(90deg,#2a9d8f,#3cb8a8);color:#fff;font-weight:700}
#trade-story .ts-jw .sd em{font-style:normal;font-size:9px;font-weight:800;background:#14b8a6;color:#fff;border-radius:99px;padding:1px 6px}
#trade-story .ts-jw .mn{flex:1;min-width:0;padding:14px 16px;display:grid;grid-template-columns:1fr 1.12fr;grid-template-rows:auto 1fr;gap:12px}
#trade-story .ts-jw h4{grid-column:1/-1;margin:0;font-size:22px;font-weight:800}
#trade-story .ts-jw h4 small{font-size:13px;font-weight:500;color:#6b7280;margin-left:8px}
#trade-story .ts-cd{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(0,0,0,.05);min-height:0;overflow:hidden}
#trade-story .ts-cd h5{margin:0 0 8px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
#trade-story .ts-cd h5 span{margin-left:auto;font-size:11px;font-weight:600;color:#6b7280}
#trade-story .ts-pack{font:12px/1.55 Consolas,"Courier New",monospace;color:#374151;background:#f6f7f9;border-radius:8px;padding:8px 10px;min-height:212px}
#trade-story .ts-pack div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trade-story .ts-lock{margin-top:8px;font-size:12px;font-weight:700;color:#0f766e;background:#ecfdf5;border-radius:8px;padding:6px 9px;opacity:0;transition:opacity .4s}
#trade-story .ts-lock.in{opacity:1}
#trade-story .ts-run{display:inline-block;margin-top:10px;padding:7px 16px;border-radius:9px;background:#6c63ff;color:#fff;font-size:13px;font-weight:700;transition:transform .15s}
#trade-story .ts-run.dn{transform:scale(.92)}
#trade-story .ts-wait{margin-left:10px;font-size:12px;color:#6b7280;opacity:0;transition:opacity .3s}#trade-story .ts-wait.in{opacity:1}
#trade-story .ts-leak{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #f0f1f4;font-size:13px;opacity:0;transform:translateX(10px);transition:opacity .3s,transform .3s}
#trade-story .ts-leak.in{opacity:1;transform:none}
#trade-story .ts-leak b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fee2e2;color:#b91c1c;font-size:11.5px}
#trade-story .ts-leak small{color:#6b7280;font-size:11.5px;white-space:nowrap}
#trade-story .ts-fix{margin-top:8px;padding:8px 10px;border-radius:9px;background:#eef2ff;font-size:12.5px;line-height:1.55;color:#3730a3;opacity:0;transition:opacity .4s}
#trade-story .ts-fix.in{opacity:1}
#trade-story .ts-fix b{display:block;font-size:12px;letter-spacing:.03em;margin-bottom:2px}
#trade-story .ts-dots::after{content:"";animation:tst-dots 1.2s steps(4) infinite}
@keyframes tst-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ── บท 4 : คนโครงเส้น + สมองปิ้ง ── */
#trade-story .ts-mind{opacity:0;transition:opacity .5s}#trade-story .ts-mind.in{opacity:1}
#trade-story .ts-body *{fill:none;stroke:#5b6475;stroke-width:3;stroke-linecap:round;transition:stroke .6s}
#trade-story .ts-mind.lit .ts-body *{stroke:#8b93a6}
#trade-story .ts-br0 path{fill:#2a2f3a;stroke:#5b6475;stroke-width:2.5;stroke-linecap:round;transition:fill .5s,stroke .5s}
#trade-story .ts-br0 path[fill=none]{fill:none}
#trade-story .ts-mind.fog .ts-br0 path:first-child{fill:#3a2228;stroke:#ef4444;animation:tst-flk .5s steps(2) infinite}
@keyframes tst-flk{50%{opacity:.6}}
#trade-story .ts-br1{opacity:0;transition:opacity .6s;filter:drop-shadow(0 0 14px rgba(45,212,191,.75))}
#trade-story .ts-br1 path{stroke:#e0e7ff;stroke-width:2.5;stroke-linecap:round}
#trade-story .ts-mind.lit .ts-br1{opacity:1}
#trade-story .ts-bulb{opacity:0;transform:translateY(14px) scale(.6);transform-origin:300px 70px;transform-box:view-box;transition:opacity .3s,transform .5s cubic-bezier(.2,1.8,.4,1)}
#trade-story .ts-mind.lit .ts-bulb{opacity:1;transform:none}
#trade-story .ts-bulb .gl{fill:#fde68a;stroke:#f59e0b;stroke-width:2;filter:drop-shadow(0 0 16px rgba(253,230,138,.9))}
#trade-story .ts-bulb .bs{fill:none;stroke:#9aa3b2;stroke-width:4;stroke-linecap:round}
#trade-story .ts-bulb .ry{stroke:#fde68a;stroke-width:3;stroke-linecap:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .4s .25s}
#trade-story .ts-mind.lit .ts-bulb .ry{stroke-dashoffset:0}
#trade-story .ts-th{position:absolute;max-width:250px;white-space:nowrap;padding:8px 13px;border-radius:16px 16px 16px 4px;background:#2a1a1f;border:1.5px solid #ef4444;color:#fecaca;font-size:14px;font-weight:600;line-height:1.35;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.2,1.6,.4,1)}
#trade-story .ts-th.in{opacity:1;transform:none;animation:tst-float 2.6s ease-in-out infinite}
#trade-story .ts-th.out{opacity:0;transform:scale(.85);text-decoration:line-through;transition:opacity .6s .2s,transform .6s .2s}
#trade-story .ts-rule{position:absolute;width:390px;display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-radius:14px;background:#171b24;border:1px solid #2a2f3a;font-size:16px;font-weight:700;color:#fff;opacity:0;transform:translateX(24px);transition:opacity .4s,transform .5s cubic-bezier(.2,1.2,.4,1)}
#trade-story .ts-rule.in{opacity:1;transform:none}
#trade-story .ts-rule b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6c63ff,#14b8a6);font-size:13px}
#trade-story .ts-rule small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:#9aa3b2}

/* ── บท 5–6 : กราฟ/กล่องโซน/การ์ด Trade Setup = สไตล์ของ pair-story.css (ห่อด้วย .pst) ⛔ อย่าก๊อปมาไว้ที่นี่ · ที่นี่มีแค่ส่วนเสริมของเรื่องนี้ ── */
#trade-story .ts-pw{position:absolute;inset:0}
#trade-story .pst .jc{font-size:10.5px}
/* การ์ดบนเวทีมืด (#12151c) : สีเดิมของ pair-story (#161a21) กลืนกับพื้น ⇒ ยกขึ้น 1 ขั้นเฉพาะที่นี่ (user 2026-10-03) ⛔ ไม่แก้ pair-story.css (ฉาก "ดูการใช้งาน" อยู่บนพื้นสว่าง) */
#trade-story .pst .jc{background:#222834;border-color:#3b4354;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 26px 50px -20px rgba(0,0,0,.7)}
#trade-story .pst .jc-box{background:#2a303d;border-color:#3a4252}
#trade-story .pst .jc-btns i,#trade-story .pst .jc-dly i{background:#323947}
#trade-story .ts-zf{animation:tst-zf .8s ease-out}
@keyframes tst-zf{0%{box-shadow:0 0 0 0 rgba(20,184,166,.9);filter:brightness(1.25)}100%{box-shadow:0 0 0 14px rgba(20,184,166,0);filter:none}}
#trade-story .pst .ts-chart.ts-dimc{opacity:.3}
#trade-story .ts-end{position:absolute;left:0;right:0;top:120px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .45s,transform .55s cubic-bezier(.2,1.3,.4,1)}
#trade-story .ts-end.in{opacity:1;transform:none}
#trade-story .ts-end .rs{padding:18px 30px;border-radius:18px;background:rgba(17,20,28,.92);border:1.5px solid #22c55e;box-shadow:0 0 40px -10px rgba(34,197,94,.6)}
#trade-story .ts-end small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#86efac}
#trade-story .ts-end .rs b{display:block;font-size:40px;font-weight:900;letter-spacing:-.01em;margin:2px 0 4px}
#trade-story .ts-end .rs span{font-size:14px;color:#c3cad6}#trade-story .ts-end em{font-style:normal;font-weight:800}
#trade-story .ts-end .ac{display:flex;gap:12px}
#trade-story .ts-end a{padding:12px 22px;border-radius:999px;font-size:16px;font-weight:800;color:#fff;text-decoration:none;border:1.5px solid #3a4150;background:#171b24}
#trade-story .ts-end a.go{border:0;background:linear-gradient(90deg,#6c63ff,#14b8a6);box-shadow:0 12px 30px -10px rgba(108,99,255,.8)}
#trade-story .ts-end a:hover{filter:brightness(1.12)}

@media(max-width:700px){#trade-story .ts-mount{padding-top:58px;width:calc(100% - 32px)}#trade-story .ts-cap{min-height:118px}#trade-story .ts-box{border-radius:14px}}