/* =========================================================
   IRT GOLD — หน้าแรก v2.2 · หน้าจอจำลองเคลื่อนไหว (คู่กับ v22mock.js) · #property copyright "IRT GOLD"
   ใช้ตัวแปรสีของ site.css → สลับโหมดสว่าง/มืดตามหน้าเว็บ · การ์ดสภาวะตลาด/เป้าหมาย/หัวคอร์ส = กรมท่าเสมอ (เหมือนในระบบ)
   ========================================================= */
.sc-shot.mk { overflow: hidden; }
.sc-shot.mk::after { display: none !important; }
.mk-tag { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold-t); background: var(--gold-ll); box-shadow: inset 0 0 0 1px var(--gold-l); padding: 2px 10px; border-radius: 99px; }
.mk-body { position: relative; padding: 18px; background: var(--bg2); font-size: 13px; line-height: 1.5; color: var(--ink); }
.mk-body b { font-weight: 700; }
.mk .tk { animation: mkTk .7s; }
@keyframes mkTk { 0% { color: #e9c46c; } }
@keyframes mkIn { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: none; } }
@keyframes mkPulse { 0% { box-shadow: 0 0 0 0 rgba(233,196,108,.6); } 70% { box-shadow: 0 0 0 10px rgba(233,196,108,0); } 100% { box-shadow: 0 0 0 0 rgba(233,196,108,0); } }

/* ── กราฟ SVG ── */
.mk-svg { display: block; width: 100%; height: auto; }
.mk-grid line { stroke: var(--line); stroke-width: 1; }
.mk-ax { font: 600 13px "IBM Plex Sans Thai", sans-serif; fill: var(--ink3); }
.mk-c line { stroke-width: 1.5; }
.mk-c.u line { stroke: var(--up); } .mk-c.u rect { fill: var(--up); }
.mk-c.d line { stroke: var(--dn); } .mk-c.d rect { fill: var(--dn); }
.mk-c { opacity: 0; transform-box: fill-box; transform-origin: center bottom; }
.mk.play .mk-c:not(.late) { animation: mkIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 22ms); }
.mk.s4 .mk-c.late { animation: mkIn .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 95ms); }
.mk-now rect { fill: var(--ink); } .mk-now-t { font: 700 13px Prompt, sans-serif; fill: var(--bg); }
.mk-now-l { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 2 4; }
.mk-o { opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.mk.s1 .o1, .mk.s2 .o2, .mk.s3 .o3 { opacity: 1; transform: none; }
.mk-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s ease; }
.mk.s1 .mk-draw { stroke-dashoffset: 0; }
.mk-hl line { stroke-width: 1.6; stroke-dasharray: 7 5; }
.mk-hl text { font: 700 13.5px Prompt, sans-serif; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.mk-hl.en line { stroke: var(--ink2); } .mk-hl.en text { fill: var(--ink); }
.mk-hl.sl line { stroke: var(--dn); } .mk-hl.sl text { fill: var(--dn); }
.mk-hl.tp line { stroke: var(--up); } .mk-hl.tp text { fill: var(--up); }
.mk-hl.hit line { stroke-dasharray: none; stroke-width: 2.6; }
.mk-hl.hit text { font-size: 15px; }
.mk-sl { fill: var(--dn); opacity: .11; } .mk-tp { fill: var(--up); opacity: .11; }
.mk-arw text { font: 800 15px Prompt, sans-serif; }
.mk-arw.u path, .mk-arw.u text { fill: var(--up); } .mk-arw.d path, .mk-arw.d text { fill: var(--dn); }
.hm-f { fill: #8b5cf6; opacity: .14; } .hm-l { fill: none; stroke: #8b5cf6; stroke-width: 2.6; stroke-linejoin: round; }
.hm-d { stroke: #8b5cf6; stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .7; }
.hm-r { font: 700 13px Prompt, sans-serif; fill: #8b5cf6; } .hm-p circle { fill: #8b5cf6; } .hm-p text { fill: #fff; font: 800 13px Prompt, sans-serif; }
.smc-ob { fill: #e11d48; opacity: .12; } .smc-fvg { fill: #0ea5e9; opacity: .15; }
.smc-l { stroke-width: 1.5; stroke-dasharray: 5 4; } .smc-l.bos { stroke: var(--up); } .smc-l.ch { stroke: var(--dn); }
.smc-t { font: 700 12.5px Prompt, sans-serif; } .smc-t.bos { fill: var(--up); } .smc-t.ch, .smc-t.ob { fill: var(--dn); } .smc-t.fvg { fill: #0ea5e9; }
.fb-l line { stroke: var(--ink3); stroke-width: 1; opacity: .55; } .fb-l text { font: 600 12px "IBM Plex Sans Thai", sans-serif; fill: var(--ink3); }
.fb-l.gz line { stroke: #c9a24a; opacity: 1; stroke-width: 1.4; } .fb-l.gz text { fill: #b8862c; font-weight: 700; }
.fb-z { fill: #d6aa44; opacity: .17; } .fb-sw { stroke: #b8862c; stroke-width: 2.2; }

/* ── แถบหัวกราฟ ── */
.mc-bar, .ml-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mc-bar > b, .ml-bar > b { font: 700 16px Prompt, sans-serif; } .ml-bar small { color: var(--ink3); }
.mc-px { font: 700 18px Prompt, sans-serif; font-variant-numeric: tabular-nums; }
.mc-sg { margin-left: auto; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; background: var(--gold-ll); color: var(--gold-t); box-shadow: inset 0 0 0 1px var(--gold-l); }
.ml-bar .mc-tf { margin-left: auto; }
.mc-tf { display: inline-flex; gap: 2px; background: var(--bg3); border-radius: 10px; padding: 3px; }
.mc-tf i { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 7px; color: var(--ink3); }
.mc-tf i.on { background: var(--grad); color: #2a1d05; }
.mc-area { position: relative; background: var(--card); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 6px; }

/* ── แผงลอยบนกราฟ ── */
.mc-demo, .mc-ai, .mc-chk, .ml-card, .ml-plan { position: absolute; z-index: 2; }
.mc-ai, .mc-chk, .ml-card, .ml-plan { background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 14px; box-shadow: var(--sh), inset 0 0 0 1px var(--line); padding: 12px; font-size: 12.5px; }
.mc-demo { left: 14px; top: 12px; display: flex; gap: 6px; font-size: 11px; }
.mc-demo .sd, .mc-demo .bd, .md-bt .sd, .md-bt .bd { display: flex; flex-direction: column; padding: 5px 11px; border-radius: 9px; color: #fff; font-weight: 700; line-height: 1.3; }
.sd { background: #e11d48; } .bd { background: #2563eb; }
.mc-demo b, .md-bt b { font: 700 14px Prompt, sans-serif; font-variant-numeric: tabular-nums; }
.mc-demo .lt { display: grid; place-items: center; padding: 0 10px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 700 13px Prompt, sans-serif; }
.mc-demo .lt small { font: 500 10px "IBM Plex Sans Thai", sans-serif; color: var(--ink3); }
.mc-ai, .ml-card { left: 14px; bottom: 14px; width: 250px; }
.ml-card { border-top: 3px solid var(--lc); }
.mc-chk, .ml-plan { right: calc(8.6% + 10px); top: 12px; width: 270px; }
.mc-ai-h, .ml-h { font: 700 13px Prompt, sans-serif; color: var(--gold-t); } .ml-h { color: var(--lc); }
.mc-ai-h small, .ml-h small { color: var(--ink3); font-weight: 500; }
.mc-ai-st, .ml-st { margin: 8px 0; padding: 8px 11px; border-radius: 10px; background: var(--dn-bg); color: var(--dn); font: 800 15px Prompt, sans-serif; }
.ml-st { background: var(--bg3); color: var(--ink); }
.mc-ai-st small, .ml-st small { display: block; font: 500 11.5px "IBM Plex Sans Thai", sans-serif; color: var(--ink2); }
.mc-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line2); }
.mc-row span { color: var(--ink2); } .mc-row.sm { border: 0; padding-top: 2px; font-size: 11.5px; font-weight: 700; }
.mc-pr { height: 8px; border-radius: 99px; background: var(--dn); overflow: hidden; margin-top: 8px; }
.mc-pr i { display: block; height: 100%; width: 50%; background: var(--up); border-radius: 99px; transition: width 1.6s cubic-bezier(.2,.8,.2,1) .4s; }
.mk.s1 .mc-pr i { width: var(--b); }
.mc-chk-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mc-chk-h > i { width: 22px; height: 22px; border-radius: 7px; background: var(--grad); display: grid; place-items: center; font-style: normal; font-weight: 800; color: #2a1d05; font-size: 12px; }
.mc-chk-h b { font: 700 13.5px Prompt, sans-serif; flex: 1; }
.mc-n { font-size: 11.5px; font-weight: 700; color: var(--gold-t); background: var(--gold-ll); padding: 1px 9px; border-radius: 99px; }
.mk-body ul { list-style: none; margin: 0; padding: 0; }
.ck { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: 9px; margin-bottom: 3px; color: var(--ink2); transition: background .35s, color .35s; }
.ck > i { flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--ink3); display: grid; place-items: center; color: #fff; transition: .35s; }
.ck > i svg { width: 11px; height: 11px; opacity: 0; transition: opacity .3s; }
.ck.on { background: var(--up-bg); color: var(--ink); }
.ck.on > i { background: var(--up); box-shadow: none; transform: scale(1.08); } .ck.on > i svg { opacity: 1; }
.mc-go { margin-top: 8px; text-align: center; padding: 8px; border-radius: 10px; font: 700 13px Prompt, sans-serif; background: var(--bg3); color: var(--ink3); transition: .45s; }
.mk.s3 .mc-chk .mc-go { background: var(--dn); color: #fff; box-shadow: 0 10px 22px -12px var(--dn); }
.ml-plan .mc-go { background: #15803d; color: #fff; }

/* ── 1) สภาวะตลาด (กรมท่าเสมอ) ── */
.mm { position: relative; overflow: hidden; border-radius: 16px; padding: 20px 22px; color: #eef2fb; background: radial-gradient(600px 300px at 85% 0%, rgba(214,170,68,.16), transparent 70%), linear-gradient(160deg, #0b1630, #15274d); }
.mm-top { display: flex; align-items: center; gap: 10px; }
.mm-dot { width: 10px; height: 10px; border-radius: 50%; background: #e9c46c; animation: mkPulse 1.8s infinite; }
.mm-top > b { color: #e9c46c; font: 700 14.5px Prompt, sans-serif; }
.mm-px { margin-left: auto; font-size: 12px; color: #9aa6c0; } .mm-px b { color: #fff; font: 700 16px Prompt, sans-serif; margin-left: 6px; font-variant-numeric: tabular-nums; }
.mm-main { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 20px; align-items: center; margin: 14px 0 16px; }
.mm-tag, .mg-tag { display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); padding: 3px 11px; border-radius: 99px; }
.mm-big { font: 800 46px/1.1 Prompt, sans-serif; color: #fb7185; margin: 8px 0 6px; letter-spacing: -.01em; }
.mm-say p { margin: 0; font-size: 13.5px; color: #aeb7ca; line-height: 1.65; }
.mm-spark { width: 100%; height: 120px; }
.mm-sl { fill: none; stroke: #fb7185; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease; }
.mm-sa { fill: rgba(251,113,133,.12); opacity: 0; transition: opacity 1s .8s; }
.mk.s1 .mm-sl { stroke-dashoffset: 0; } .mk.s1 .mm-sa { opacity: 1; }
.mm-lv { display: grid; gap: 8px; }
.mm-lv div { padding: 8px 16px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.mm-lv small { display: block; font-size: 11px; color: #9aa6c0; } .mm-lv b { font: 700 19px ui-monospace, Consolas, monospace; }
.mm-lv .r { color: #fb7185; } .mm-lv .g { color: #4ade80; }
.mm-tr, .mm-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mm-pill, .mm-plan div { opacity: 0; transform: translateY(10px); transition: .55s; transition-delay: calc(var(--k) * .15s); }
.mm-pill { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(251,113,133,.06); box-shadow: inset 3px 0 0 #fb7185, inset 0 0 0 1px rgba(251,113,133,.35); font-size: 12.5px; color: #aeb7ca; }
.mm-pill b { color: #fb7185; font: 800 14.5px Prompt, sans-serif; }
.mm-plan { margin-top: 10px; }
.mm-plan div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.mm-plan i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--grad); color: #2a1d05; font-style: normal; font-weight: 800; margin-right: 8px; }
.mm-plan b { color: #e9c46c; font: 700 13.5px Prompt, sans-serif; }
.mm-plan p { margin: 6px 0 0; font-size: 12.5px; color: #cfd6e6; line-height: 1.55; }
.mk.s2 .mm-pill, .mk.s3 .mm-plan div { opacity: 1; transform: none; }
.mm-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: #9aa6c0; }
.mm-foot > b { color: #fb7185; }
.mm-rd { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.mm-rd i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); transition: .35s; }
.mm-rd i.on { background: #e9c46c; box-shadow: 0 0 8px #e9c46c; }

/* ── 4) หน้าที่และเป้าหมายวันนี้ (กรมท่าเสมอ) ── */
.mg { border-radius: 16px; padding: 22px; color: #eef2fb; background: radial-gradient(500px 260px at 90% 0%, rgba(214,170,68,.18), transparent 70%), linear-gradient(160deg, #0b1630, #1b2c55); }
.mg h4 { font: 800 26px/1.3 Prompt, sans-serif; margin: 10px 0 14px; color: #fff; }
.mg-t { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mg-t div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.mg-t small { display: block; font-size: 11.5px; color: #9aa6c0; }
.mg-t b { display: block; font: 800 22px Prompt, sans-serif; margin-top: 4px; color: #fff; font-variant-numeric: tabular-nums; }
.mg-t b.up { color: #4ade80; } .mg-t em { font-style: normal; font-size: 11.5px; color: #9aa6c0; }
.mg-bar { position: relative; height: 24px; border-radius: 99px; background: rgba(255,255,255,.08); margin: 14px 0; overflow: hidden; }
.mg-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #d6aa44, #f2d482); border-radius: 99px; transition: width 1.5s cubic-bezier(.2,.8,.2,1); }
.mk.s1 .mg-bar i { width: 64%; }
.mg-bar span { position: relative; display: block; text-align: center; font: 700 12px/24px Prompt, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.mg-ck { display: grid; gap: 2px; }
.mg .ck { color: #cfd6e6; font-size: 13.5px; } .mg .ck > i { box-shadow: inset 0 0 0 1.6px #76819b; }
.mg .ck.on { background: rgba(74,222,128,.12); color: #fff; } .mg .ck.on > i { background: #22c55e; }
.mg-f { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #9aa6c0; }
.mg-f b { color: #fff; }

/* ── ปฏิทินเป้าหมาย ── */
.mcal-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mcal-h > b { font: 700 16px Prompt, sans-serif; }
.mcal-s { display: flex; gap: 20px; flex-wrap: wrap; }
.mcal-s small { display: block; font-size: 11px; color: var(--ink3); } .mcal-s b { font: 800 17px Prompt, sans-serif; }
.mcal-p { height: 7px; border-radius: 99px; background: var(--bg3); margin: 10px 0 12px; overflow: hidden; }
.mcal-p i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 1.5s cubic-bezier(.2,.8,.2,1); }
.mk.s1 .mcal-p i { width: 83%; }
.mcal-g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mcal-d { text-align: center; font-size: 12px; color: var(--ink3); }
.mcal-c { min-height: 76px; padding: 8px 10px; border-radius: 11px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; color: var(--ink3); display: flex; flex-direction: column; gap: 1px; opacity: 0; transform: scale(.92); transition: .4s; transition-delay: calc(var(--k) * 70ms); }
.mcal-c em { font-style: normal; font-weight: 700; color: var(--ink2); } .mcal-c b { font: 800 16px Prompt, sans-serif; }
.mcal-c.hit { background: var(--up-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 35%, transparent); }
.mcal-c.hit b, .mcal-c.pos b { color: var(--up); }
.mcal-c.neg { background: var(--dn-bg); } .mcal-c.neg b { color: var(--dn); }
.mcal-c.fu { background: transparent; box-shadow: inset 0 0 0 1px var(--line); border: 0; outline: 1px dashed var(--line); outline-offset: -1px; }
.mcal-c .nw { font-style: normal; font-size: 10.5px; background: var(--gold-ll); color: var(--gold-t); padding: 1px 6px; border-radius: 6px; margin-top: auto; }
.mk.s1 .mcal-c { opacity: 1; transform: none; }

/* ── 5) ข่าว ── */
.mn-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mn-h > b { font: 700 16px Prompt, sans-serif; }
.mn-cd { font-size: 12.5px; color: var(--ink2); background: var(--dn-bg); padding: 5px 12px; border-radius: 99px; }
.mn-cd b { color: var(--dn); font: 700 14px ui-monospace, Consolas, monospace; margin-left: 6px; }
.mn-i { padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 10px; opacity: 0; transform: translateY(12px); transition: .55s; transition-delay: calc(var(--k) * .3s); }
.mk.s1 .mn-i { opacity: 1; transform: none; }
.mn-t { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.mn-t em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 10px; border-radius: 99px; background: var(--gold-ll); color: var(--gold-t); }
.mn-t em.hi { background: var(--dn-bg); color: var(--dn); }
.mn-n { display: block; font: 700 16px Prompt, sans-serif; margin: 6px 0 1px; }
.mn-i > small { color: var(--ink3); font-size: 12px; }
.mn-ud { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.mn-ud div { padding: 9px 12px; border-radius: 10px; font-size: 12.5px; }
.mn-ud .u { background: var(--up-bg); box-shadow: inset 3px 0 0 var(--up); } .mn-ud .d { background: var(--dn-bg); box-shadow: inset 3px 0 0 var(--dn); }
.mn-ud b { font: 700 12.5px Prompt, sans-serif; } .mn-ud .u b { color: var(--up); } .mn-ud .d b { color: var(--dn); }
.mn-ud p { margin: 3px 0 0; color: var(--ink2); line-height: 1.5; }
.mn-do { margin: 0; font-size: 12.5px; color: var(--ink2); } .mn-do b { color: var(--gold-t); }

/* ── 6) พอร์ต Demo ── */
.md-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.md-h > b { font: 700 16px Prompt, sans-serif; } .md-bt { display: flex; gap: 6px; font-size: 11px; }
.md-t { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.md-t div { padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.md-t small { display: block; font-size: 11px; color: var(--ink3); } .md-t b { font: 800 17px Prompt, sans-serif; font-variant-numeric: tabular-nums; }
.md-k { margin: 14px 0 6px; font: 700 13px Prompt, sans-serif; color: var(--ink2); }
.md-pos, .md-r { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--ink2); }
.md-pos { box-shadow: inset 3px 0 0 var(--dn), inset 0 0 0 1px var(--line); }
.md-pos > b:last-child, .md-r > b { margin-left: auto; font: 700 14px Prompt, sans-serif; font-variant-numeric: tabular-nums; }
.md-pos > b:nth-child(2) { color: var(--ink); }
.md .tg { font: 800 11px Prompt, sans-serif; padding: 2px 8px; border-radius: 6px; color: #fff; }
.md .tg.dn { background: var(--dn); } .md .tg.up { background: var(--up); }
.md-hs { display: grid; gap: 6px; }
.md-r { opacity: 0; transform: translateX(-14px); transition: .5s; transition-delay: calc(var(--k) * .22s); }
.mk.s1 .md-r { opacity: 1; transform: none; }
.md-rs { color: var(--ink3); } .md-f { margin: 10px 0 0; font-size: 11.5px; color: var(--ink3); }

/* ── 7) มือใหม่เริ่มต้น ── */
.mlr-hd { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; color: #fff; background: radial-gradient(500px 240px at 90% 0%, rgba(214,170,68,.18), transparent 70%), linear-gradient(160deg, #0b1630, #1b2c55); }
.mlr-hd h4 { font: 800 22px/1.3 Prompt, sans-serif; margin: 8px 0 0; }
.mlr-ring { position: relative; width: 86px; text-align: center; flex: none; }
.mlr-ring svg { width: 86px; height: 86px; transform: rotate(-90deg); }
.mlr-ring circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 7; }
.mlr-ring .v { stroke: #e9c46c; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.2,.8,.2,1); }
.mk.s1 .mlr-ring .v { stroke-dashoffset: .77; }
.mlr-ring b { position: absolute; left: 0; right: 0; top: 27px; font: 800 20px Prompt, sans-serif; color: #e9c46c; }
.mlr-ring small { display: block; font-size: 10.5px; color: #9aa6c0; }
.mlr-b { display: grid; grid-template-columns: 250px 1fr; gap: 12px; margin-top: 12px; }
.mlr-l { list-style: none; margin: 0; padding: 8px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; }
.mlr-l li { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; color: var(--ink2); }
.mlr-l i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--bg3); color: var(--ink3); }
.mlr-l li.ok i { background: var(--up); color: #fff; }
.mlr-l li.on { background: var(--gold-ll); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--gold-l); } .mlr-l li.on i { background: var(--grad); color: #2a1d05; }
.mlr-les { padding: 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.mlr-no { color: var(--gold-t); font-weight: 700; font-size: 12px; }
.mlr-t { display: block; font: 800 19px Prompt, sans-serif; margin: 2px 0 14px; }
.mlr-calc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mlr-calc > div { padding: 8px 12px; border-radius: 10px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.mlr-calc > * { opacity: 0; transform: translateY(8px); transition: .45s; }
.mlr-calc > span { color: var(--ink3); font-weight: 800; }
.mlr-calc small { display: block; font-size: 10.5px; color: var(--ink3); } .mlr-calc b { font: 800 16px Prompt, sans-serif; }
.mlr-calc .g { color: var(--up); } .mlr-calc .lot { color: var(--gold-t); }
.mk.s2 .mlr-calc > * { opacity: 1; transform: none; }
.mlr-calc > :nth-child(2) { transition-delay: .15s; } .mlr-calc > :nth-child(3) { transition-delay: .3s; } .mlr-calc > :nth-child(4) { transition-delay: .45s; }
.mlr-calc > :nth-child(5) { transition-delay: .6s; } .mlr-calc > :nth-child(6) { transition-delay: .75s; } .mlr-calc > :nth-child(7) { transition-delay: .9s; }
.mlr-les p { font-size: 13px; color: var(--ink2); margin: 14px 0; }
.mlr-q { padding: 11px 13px; border-radius: 12px; background: var(--gold-ll); box-shadow: inset 0 0 0 1px var(--gold-l); font-size: 12.5px; }
.mlr-q > b { color: var(--gold-t); margin-right: 6px; }
.mlr-q div { display: flex; gap: 8px; margin-top: 8px; }
.mlr-q i { font-style: normal; padding: 4px 16px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; transition: .35s; }
.mk.s3 .mlr-q i.ok { background: var(--up); color: #fff; box-shadow: 0 8px 18px -10px var(--up); }

/* ── แสดงภาพสุดท้ายนิ่ง ๆ (prefers-reduced-motion) ── */
.mk.still *, .mk.still *::before { transition: none !important; animation: none !important; }
.mk.still .mk-c, .mk.still .mk-o, .mk.still .mm-pill, .mk.still .mm-plan div, .mk.still .mcal-c, .mk.still .mn-i, .mk.still .md-r, .mk.still .mlr-calc > * { opacity: 1; transform: none; }
.mk.still .mk-draw, .mk.still .mm-sl { stroke-dashoffset: 0; }

/* ── จอแคบ: แผงลอยลงมาใต้กราฟ · การ์ดเรียงใหม่ ── */
@media (max-width: 900px) {
  .mc-area { display: flex; flex-direction: column; gap: 8px; }
  .mc-demo, .mc-ai, .mc-chk, .ml-card, .ml-plan { position: static; width: auto; }
  .mc-demo { order: -1; padding: 4px 4px 0; }
  .mm-main { grid-template-columns: 1fr 1fr; } .mm-say { grid-column: 1 / -1; }
  .mg-t, .md-t { grid-template-columns: repeat(3, 1fr); }
  .mlr-b { grid-template-columns: 1fr; } .mlr-l { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mk-body { padding: 10px; }
  .mm { padding: 16px; } .mm-big { font-size: 34px; } .mm-main { grid-template-columns: 1fr; } .mm-spark { height: 80px; }
  .mm-lv { grid-template-columns: 1fr 1fr; } .mm-tr, .mm-plan { grid-template-columns: 1fr; }
  .mg { padding: 16px; } .mg h4 { font-size: 19px; } .mg-t, .md-t { grid-template-columns: 1fr 1fr; } .mg-t b { font-size: 18px; }
  .mcal-g { gap: 4px; } .mcal-c { min-height: 52px; padding: 5px 6px; font-size: 10px; } .mcal-c b { font-size: 12px; } .mcal-c small, .mcal-c .nw { display: none; }
  .mcal-s { gap: 12px; } .mcal-s b { font-size: 14px; }
  .mn-ud { grid-template-columns: 1fr; }
  .md-pos { flex-wrap: wrap; gap: 6px 12px; } .md-r { flex-wrap: wrap; gap: 6px 10px; }
  .mlr-hd { padding: 14px; } .mlr-hd h4 { font-size: 17px; } .mlr-ring, .mlr-ring svg { width: 70px; } .mlr-ring svg { height: 70px; } .mlr-ring b { top: 20px; font-size: 16px; }
  .mlr-l { grid-template-columns: 1fr; max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .mc-tf i { padding: 2px 7px; }
}
/* กราฟระบบ: ติ๊กครบ → สัญญาณ SELL → เช็กลิสต์หลบไป ให้เห็นราคาวิ่งชน TP */
.mc-chk { transition: opacity .6s, transform .6s; }
.mk.s4 .mc-chk { opacity: 0; transform: translateX(24px); pointer-events: none; }
.mk.still .mc-chk { opacity: 1; transform: none; }
@media (max-width: 900px) { .mk.s4 .mc-chk { opacity: 1; transform: none; } }
/* ห้องแล็บ: แผงไม่ทับกราฟ → คอลัมน์ข้างกราฟแบบแพลตฟอร์มเทรด */
.ml .mc-area { display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto 1fr; gap: 10px; align-items: start; padding: 8px; }
.ml .mk-svg { grid-column: 1; grid-row: 1 / 3; }
.ml .ml-card, .ml .ml-plan { position: static; width: auto; }
.ml .ml-plan { grid-column: 2; grid-row: 1; } .ml .ml-card { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) { .ml .mc-area { display: flex; flex-direction: column; } }
@media (max-width: 600px) {
  .mk-ax { font-size: 15px; } .mk-hl text { font-size: 16px; } .mk-hl.hit text { font-size: 17px; }
  .mk-arw text, .smc-t, .hm-r, .fb-l text { font-size: 15px; } .mk-now-t { font-size: 14px; }
}
/* จอใหญ่: หน้าจอจำลองไม่กว้างเกินไป */
.sc-shot.mk { max-width: 1000px; margin-left: auto; margin-right: auto; }
#news .sc-shot.mk { max-width: 860px; } #demo .sc-shot.mk { max-width: 920px; }

/* ── 20 ต.ค. 69 ผู้ใช้: "ปรับสีให้ smooth พื้นหลังกลมกลืนสีเดียวกัน แล้วก็กรอบด้วย" ── */
/* พื้นส่วนสลับสี: ไล่จางทั้งขอบบนและล่าง ไม่มีเส้นตัด */
.sc.tone { background: linear-gradient(180deg, transparent 0%, var(--gold-ll) 18%, var(--gold-ll) 82%, transparent 100%); }
[data-theme="dark"] .sc.tone { background: linear-gradient(180deg, transparent 0%, rgba(21,39,77,.38) 18%, rgba(21,39,77,.38) 82%, transparent 100%); }
/* กรอบหน้าจอจำลอง: บาง เนียน กลืนกับพื้น */
.sc-shot.mk { background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 34px 70px -38px rgba(11,22,48,.45); }
[data-theme="dark"] .sc-shot.mk { background: #0b1427; box-shadow: 0 0 0 1px rgba(233,196,108,.13), 0 40px 90px -40px rgba(0,0,0,.85), 0 0 80px -30px rgba(214,170,68,.12); }
.sc-shot.mk .frame-bar { background: transparent; border-bottom: 1px solid var(--line2); }
.mk-body { background: transparent; }
[data-theme="dark"] .mc-area { background: rgba(255,255,255,.02); }
/* ผู้ใช้: "ทุกกรอบต้องเท่ากัน" → ทุกหน้าจอจำลองกว้างเต็มแนวเนื้อหา (ขอบซ้ายหัวข้อ → ขอบขวารายการ) */
.sc-shot.mk, #news .sc-shot.mk, #demo .sc-shot.mk { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
/* แท็บ + คำอธิบาย อยู่กลางเหนือกรอบ */
.sc-tabs { justify-content: center; } .sc-tabtxt { text-align: center; }
/* ทุกแท็บสูงเท่ากัน: เนื้อในยืดเต็มกรอบ */
#ti-goal .mk-body, #ti-lab .mk-body { display: flex; flex-direction: column; }
#ti-goal .mk-body > *, #ti-lab .mk-body > * { flex: 1; }
.mg, .mcal { display: flex; flex-direction: column; }
.mg-f { margin-top: auto; } .mcal-g { flex: 1; align-content: start; }
.ml { display: flex; flex-direction: column; } .ml .mc-area { flex: 1; }
.mg > .mg-tag { align-self: flex-start; }
.mg-ck { margin-bottom: 6px; }
/* บทวิเคราะห์ล่าสุดในหน้าปก (ใต้ปุ่ม เหนือการ์ดสถิติ) */
.hero-an { position: relative; margin-top: 56px; text-align: left; }
.hero-an .an-head { margin-bottom: 24px; }
@media (max-width: 860px) { .hero-an { margin-top: 40px; } }
.hero-an h2 { font-family: "Prompt", sans-serif; font-weight: 800; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.18; letter-spacing: -.02em; margin: 16px 0 10px; }
.hero-an h2 em { font-style: normal; }