/* ═══════════════════════════════════════════
   หุ้นทันใจ · hoontanjai.com
   Stock News. Smart Moves.
   ═══════════════════════════════════════════ */

:root{
  --bg:#080C18;
  --bg2:#0B1223;
  --card:#111A30;
  --card2:#0D1425;
  --line:rgba(255,255,255,.09);
  --text:#E9EEF8;
  --muted:#8D9AB8;
  --up:#16D999;
  --down:#FF4D6D;
  --gold:#FFC53D;
  --blue:#0EA5E9;
  --r:18px;
  --shadow:0 20px 55px rgba(0,0,0,.5);
  --head:'Kanit',system-ui,sans-serif;
  --body:'Noto Sans Thai',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

/* ⚠️ บรรทัดนี้สำคัญมาก ห้ามลบ
   เบราว์เซอร์ซ่อน element ที่มี attribute hidden ด้วยกฎ [hidden]{display:none}
   ซึ่งเป็นกฎระดับเบราว์เซอร์ ความสำคัญต่ำกว่ากฎที่เราเขียนเอง
   ถ้าเราเขียน .amodal{display:grid} ไว้ กฎเราจะชนะ -> สั่ง el.hidden = true แล้ว "ไม่หาย"
   เคยพลาดมาแล้ว: ปิดหน้าต่างเข้าสู่ระบบไม่ได้เลย มันบังเต็มจอทั้งที่ค่า hidden เป็น true
   และช่องฟอร์มของโหมดสมัครโผล่มาในโหมดเข้าสู่ระบบ
   กฎนี้ทำให้ hidden ใช้ได้จริงทุกที่ในเว็บ */
[hidden]{display:none!important}

html{scroll-behavior:smooth;scroll-padding-top:86px}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.24}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.hl{color:var(--up)}
.up{color:var(--up)}
.down{color:var(--down)}

/* ── ปุ่ม ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);font-weight:600;font-size:15px;padding:13px 27px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap}
.btn--primary{background:linear-gradient(135deg,#16D999,#0EA5E9);color:#04121C;box-shadow:0 10px 28px rgba(22,217,153,.3)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 15px 38px rgba(22,217,153,.45)}
.btn--ghost{border-color:var(--line);background:rgba(255,255,255,.04);color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,.09)}
.btn--line{background:#06C755;color:#fff;width:100%;margin-top:12px}
.btn--full{width:100%}

/* ═══ TICKER TAPE ═══ */
.tape{background:#04070F;border-bottom:1px solid var(--line);overflow:hidden;height:40px;display:flex;align-items:center}
/* ป้าย "สด" ปักไว้ซ้ายมือ ไม่เลื่อนตามแถบราคา
   มีจุดกะพริบเพื่อบอกว่าตัวเลขอัปเดตเองไม่ต้องรีเฟรช */
.tape__flag{flex:none;z-index:2;font-size:10.5px;font-weight:600;letter-spacing:.3px;
  color:var(--up);background:#04070F;border:1px solid rgba(22,217,153,.45);
  padding:3px 9px 3px 20px;border-radius:99px;margin-left:12px;box-shadow:8px 0 14px #04070F;
  position:relative}
.tape__flag::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--up);animation:blip 1.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(22,217,153,.5)}
  50%{opacity:.35;box-shadow:0 0 0 5px rgba(22,217,153,0)}}
/* ถ้าสแกนเนอร์ล่มแล้วสลับไปใช้วิดเจ็ต TradingView แถบจะสูงขึ้นและไม่ต้องมีป้าย */
.tape.is-fallback{height:auto;display:block;padding:0}
.tape__tv{width:100%}
.tape__track{display:flex;gap:34px;white-space:nowrap;animation:tape 46s linear infinite;padding-left:34px}
.tape:hover .tape__track{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape i{font-style:normal;font-weight:600;color:var(--muted);font-size:13px;margin-right:8px}
.tape b{font-size:13.5px;font-weight:600}
.tape span{font-size:13px;margin-left:6px;font-weight:600}

/* ═══ HEADER ═══ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(8,12,24,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:46px;height:46px;border-radius:12px}
.brand__txt b{font-family:var(--head);font-size:23px;font-weight:700;display:block;line-height:1.05;letter-spacing:-.3px}
.brand__txt b i{font-style:normal;color:var(--up)}
.brand__txt small{font-size:11px;color:var(--muted);letter-spacing:.2px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:9px 14px;border-radius:10px;font-size:15px;color:#C4CDE1;transition:.2s}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__cta{background:linear-gradient(135deg,#16D999,#0EA5E9)!important;color:#04121C!important;font-weight:600;font-family:var(--head)}

/* ── ดรอปดาวน์ หมวดข่าว ── */
.nav__drop{position:relative}
.nav__dropbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:15px;color:#C4CDE1;padding:9px 14px;border-radius:10px;transition:.2s}
.nav__dropbtn:hover,.nav__drop.is-open .nav__dropbtn{background:rgba(255,255,255,.07);color:#fff}
.nav__dropbtn i{font-style:normal;font-size:10px;transition:transform .2s}
.nav__drop.is-open .nav__dropbtn i{transform:rotate(180deg)}

/* ใช้ display สลับ เปิด/ปิด — ตรงไปตรงมา ไม่มีสถานะกำกวมระหว่าง transition */
.nav__menu{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:288px;z-index:70;
  background:#0C1424;border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 22px 48px rgba(0,0,0,.6);animation:dropIn .16s ease-out}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* สถานะเปิด/ปิดคุมด้วยคลาสเดียวจาก nav.js เท่านั้น
   (ไม่ใช้ :hover / :focus-within ใน CSS เพราะจะค้างเปิดจน Esc ปิดไม่ได้) */
.nav__drop.is-open>.nav__menu{display:block}

.nav__menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px}
.nav__menu a::after{content:none!important}      /* ไม่ต้องมีลูกศร ↗ ในดรอปดาวน์ */
.nav__menu a:hover{background:rgba(255,255,255,.06)}
.nav__menu .ico{flex:none;width:26px;height:26px;object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.nav__menu .txt{min-width:0}
.nav__menu b{font-family:var(--head);font-weight:500;font-size:15px;display:block;line-height:1.3;
  color:#DCE4F2;transition:.2s}
.nav__menu small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.4}
.nav__menu a:hover b{color:var(--up)}
.nav__menu a[aria-current]{background:rgba(22,217,153,.1)}
.nav__menu a[aria-current] b{color:var(--up)}

/* ═══ HERO ═══ */
.hero{position:relative;padding:56px 0 76px;overflow:hidden}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent)}
.hero__glow{position:absolute;inset:-25% 30% 35% -15%;background:radial-gradient(circle at 35% 45%,rgba(22,217,153,.22),transparent 62%),radial-gradient(circle at 85% 15%,rgba(14,165,233,.18),transparent 58%);filter:blur(26px);pointer-events:none}
.hero__in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#BAC6DD;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:7px 15px;border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(22,217,153,.6);animation:ping 1.7s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(22,217,153,0)}100%{box-shadow:0 0 0 0 rgba(22,217,153,0)}}
.hero h1{font-size:clamp(35px,5.1vw,58px);font-weight:700;margin:18px 0 14px;letter-spacing:-.6px}
.lead{color:#AFBBD2;font-size:17px;max-width:530px}
.hero__btns{display:flex;gap:12px;margin:26px 0 30px;flex-wrap:wrap}
.hero__stats{list-style:none;display:flex;gap:36px;flex-wrap:wrap}
.hero__stats b{font-family:var(--head);font-size:27px;display:block;color:#fff}
.hero__stats span{font-size:13px;color:var(--muted)}

.hero__right{position:relative}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.chartcard{position:relative;z-index:2;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.chartcard__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:6px}
.chartcard__sym{font-family:var(--head);font-weight:600;font-size:16px;display:block}
.chartcard__note{font-size:11.5px;color:var(--muted)}
.chartcard__price{text-align:right}
.chartcard__price b{font-family:var(--head);font-size:27px;display:block;line-height:1.2}
.chartcard__price span{font-size:13.5px;font-weight:600}
/* แท็บสลับสินทรัพย์บนกราฟใหญ่ */
.chartcard__tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ctab{font-family:var(--body);font-size:12.5px;font-weight:600;cursor:pointer;
  color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);
  padding:6px 12px;border-radius:99px;transition:.18s}
.ctab:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.ctab.is-on{color:var(--bg);background:var(--up);border-color:var(--up)}
/* กล่องกราฟ — กันความสูงไว้ล่วงหน้าไม่ให้หน้ากระตุกตอน iframe โหลดเสร็จ */
.chartcard__chart{min-height:200px;position:relative}
.chartcard__chart .tvbox__slot[hidden]{display:none}
.chartcard__ft{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.chartcard__ft b{color:var(--text);font-weight:600}

/* ═══ แถบแนะนำมาสคอต ═══ */
.strip{border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(22,217,153,.10),transparent 60%)}
.strip__in{display:flex;align-items:center;gap:26px;padding:18px 0}
.strip__mascot{width:170px;height:auto;flex:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));animation:float 5s ease-in-out infinite}
.strip__txt{flex:1;min-width:230px}
.strip__txt b{font-family:var(--head);font-size:19px;display:block}
.strip__txt p{font-size:14px;color:var(--muted);margin-top:2px}
.strip__pts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;flex:1.15}
.strip__pts b{font-family:var(--head);font-size:16px;display:block}
.strip__pts span{font-size:13.5px;color:var(--muted)}

/* ═══ SECTION ═══ */
.sec{padding:64px 0}
.sec__hd{margin-bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sec__hd h2{font-size:clamp(25px,3.3vw,35px);overflow-wrap:anywhere}
.sec__hd p{color:var(--muted);font-size:15px;margin-top:8px;line-height:1.65}
.badge{font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);white-space:nowrap}
.badge.is-open{color:var(--up);border-color:rgba(22,217,153,.4);background:rgba(22,217,153,.1)}

/* ป้ายกำกับ "ข้อมูลตัวอย่าง" — ติดทุกจุดที่ยังไม่ใช่ตัวเลขจริง */
.demo{display:inline-block;vertical-align:middle;font-family:var(--body);font-size:11.5px;
  font-weight:600;color:var(--gold);background:rgba(255,197,61,.12);
  border:1px solid rgba(255,197,61,.35);padding:3px 10px;border-radius:99px;
  margin-left:8px;white-space:nowrap;transform:translateY(-2px)}
.demo--sm{font-size:10px;padding:2px 7px;margin-left:5px}

/* แถบเตือนใหญ่ ใช้บนหัวหน้าหมวด */
.notice{display:flex;gap:11px;align-items:flex-start;background:rgba(255,197,61,.08);
  border:1px solid rgba(255,197,61,.32);border-radius:14px;padding:13px 17px;
  font-size:13.5px;color:#D8C99B;line-height:1.65;margin-bottom:20px}
.notice b{color:var(--gold)}
.notice::before{content:"⚠️";flex:none;font-size:16px;line-height:1.4}

/* ลิงก์ "เลือกอ่านตามหมวด" ท้ายหัวข้อ */
.seemore{font-family:var(--head);font-size:14px;font-weight:600;color:var(--up);
  border:1px solid rgba(22,217,153,.35);background:rgba(22,217,153,.08);
  padding:9px 17px;border-radius:999px;transition:.2s;white-space:nowrap}
.seemore:hover{background:rgba(22,217,153,.16);transform:translateY(2px)}

/* ลิงก์ในเมนูที่พาไปหน้าอื่น (ไม่ใช่เลื่อนในหน้า) ใส่ลูกศรกำกับ */
.nav a[href^="/"]::after{content:" ↗";font-size:11px;opacity:.65}

/* ═══ ภาวะตลาด ═══ */
.mkt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mkt__c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px;transition:.22s}
.mkt__c:hover{transform:translateY(-4px);border-color:rgba(22,217,153,.38)}
.mkt__c h4{font-size:14px;color:#C7D1E5;font-weight:500}
.mkt__c .val{font-family:var(--head);font-size:25px;margin:6px 0 2px}
.mkt__c .chg{font-size:13.5px;font-weight:600}
.mkt__c svg{margin-top:10px;width:100%;height:44px;display:block}

.closed{display:flex;align-items:center;gap:22px;margin-top:20px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 22px}
.closed img{width:120px;height:auto;flex:none}
.closed b{font-family:var(--head);font-size:17px;display:block}
.closed p{font-size:14px;color:var(--muted)}

/* ═══ การ์ดหมวดข่าว ═══ */
/* ซ่อนจากตา แต่ Google กับโปรแกรมอ่านหน้าจอยังอ่านได้
   ใช้กับชื่อหมวดที่อยู่ในรูปปกแล้ว */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cc{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
    display:flex;flex-direction:column;min-width:0;transition:.22s}
.cc:hover{transform:translateY(-5px);border-color:rgba(22,217,153,.42)}
.cc__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--card2)}
.cc__img img{width:100%;height:100%;object-fit:cover;transition:.35s}
.cc:hover .cc__img img{transform:scale(1.05)}
.cc__bd{padding:15px 17px 16px;display:flex;flex-direction:column;flex:1;min-width:0}
.cc__sub{font-size:13.5px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.cc__arts{display:flex;flex-direction:column;gap:7px;margin:12px 0 13px;
  border-top:1px solid var(--line);padding-top:12px}
.cc__art{position:relative;padding-left:16px;font-size:14px;color:#C4CEE2;line-height:1.5;
  transition:.2s;overflow-wrap:anywhere}
.cc__art::before{content:"›";position:absolute;left:2px;top:-1px;color:var(--up);font-weight:700}
.cc__art:hover{color:var(--up)}
.cc__all{margin-top:auto;font-family:var(--head);font-size:13px;font-weight:600;color:var(--up)}
.cc__all:hover{text-decoration:underline}

/* ปกบนหน้าหมวด */
.cat__cover{margin:0 0 4px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.cat__cover img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* ═══ หน้าหมวด ═══ */
.cat{padding:34px 0 0}
.cat__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.cat__hd h1{font-family:var(--head);font-size:clamp(27px,4vw,42px);font-weight:700}
.cat__hd .lead{max-width:640px;margin-top:8px;font-size:16.5px}
.cat__meta{font-size:13px;color:var(--muted);margin-top:10px}
.cat__meta b{color:#C4CEE2;font-weight:500}
.cat__mascot{width:150px;height:auto;flex:none;filter:drop-shadow(0 16px 28px rgba(0,0,0,.5))}
.cat__stats{margin-bottom:6px}
.cat__news{padding-top:38px}

/* ═══ ข่าว ═══ */
.tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.tab{background:rgba(255,255,255,.04);border:1px solid var(--line);color:#BCC7DC;font-family:var(--body);font-size:14px;padding:8px 17px;border-radius:999px;cursor:pointer;transition:.2s}
.tab:hover{background:rgba(255,255,255,.09)}
.tab.is-on{background:var(--up);border-color:var(--up);color:#04231A;font-weight:600}
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.na{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.na:hover{transform:translateY(-5px);border-color:rgba(22,217,153,.38)}
/* คลิกได้ทั้งใบ ลิงก์เดียว — พาดหัวคลิกได้ตามที่คนคาดหวัง */
.na__link{display:flex;flex-direction:column;height:100%}
.na:hover .na__bd h3{color:var(--up)}
.na__bd h3{transition:.2s}
.na__img{height:172px;position:relative;display:grid;place-items:center;overflow:hidden}
/* ไอคอนสำรอง โชว์เมื่อยังไม่มีไฟล์รูปบทความจริง */
.na__ico{font-size:52px;opacity:.85;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.na__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.35s}
.na:hover .na__img img{transform:scale(1.05)}
.na__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,24,.45),transparent 45%,rgba(8,12,24,.35));pointer-events:none;z-index:1}
.na__tag{position:absolute;left:12px;top:12px;background:rgba(4,7,15,.72);border:1px solid var(--line);font-size:11.5px;padding:4px 11px;border-radius:999px;font-weight:600;z-index:2;backdrop-filter:blur(4px)}
.na__bd{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.na__bd h3{font-size:17px;margin-bottom:7px}
.na__bd p{font-size:14px;color:var(--muted);flex:1}
.na__mt{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:12px;color:var(--muted)}

/* ═══ MOVERS ═══ */
.movers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.movers--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;overflow:hidden}
.panel__ico{position:absolute;right:-14px;top:-10px;width:118px;height:auto;opacity:.5;pointer-events:none}
.panel__hd{font-size:16px;margin-bottom:8px;position:relative;z-index:1}
.rows{display:flex;flex-direction:column;position:relative;z-index:1}
.row{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:10px;padding:11px 4px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row__sym{min-width:0}
.row__sym b{font-family:var(--head);font-size:15px;display:block;line-height:1.2}
/* ชื่อบริษัทจาก TradingView เป็นภาษาอังกฤษและยาว ต้องตัดด้วย ... ไม่ให้ดันตาราง */
.row__sym small{font-size:11.5px;color:var(--muted);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* แถบช่วงราคาวางเต็มความกว้างใต้สองคอลัมน์ */
.row__gfx{grid-column:1/-1;order:3;min-width:0}
.row__px{text-align:right}
.row__px b{display:block;font-size:15px;font-weight:600}
.row__px span{font-size:12.5px;font-weight:600}
.disclaim{font-size:12.5px;color:var(--muted);margin-top:14px}

/* ═══ เครื่องคำนวณปันผล ═══ */
.calc{background:linear-gradient(180deg,transparent,rgba(255,197,61,.05),transparent)}
.badge--btn{cursor:pointer;font-family:var(--body);transition:.2s}
.badge--btn:hover{color:var(--gold);border-color:rgba(255,197,61,.45);background:rgba(255,197,61,.1)}
.calc__in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:22px;align-items:start}
/* ข้อความไทยไม่มีช่องว่าง กริด/เฟล็กซ์จะคิดความกว้างขั้นต่ำจากทั้งประโยคแล้วล้นจอ
   ต้องปล่อยให้ย่อได้ (min-width:0) และตัดคำได้ทุกตำแหน่ง */
.calc__in,.calc__form,.calc__out,.krow,.kf,.kc,.kshare,.ktoggles{min-width:0}
.kf input,.kf select{min-width:0}
.ktog span,.kc span,.kf>span{min-width:0;overflow-wrap:anywhere}

.calc__form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 22px}
.krow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kf{display:block;margin-bottom:14px}
.kf>span{display:block;font-size:13px;color:#C4CEE2;margin-bottom:6px;font-weight:500}
.kf>span em{font-style:normal;color:var(--muted);font-size:11.5px}
.kf input[type=text]{width:100%;background:#0A1020;border:1px solid var(--line);color:var(--text);font-family:var(--head);font-size:17px;font-weight:500;padding:11px 14px;border-radius:11px;transition:.2s}
.kf input[type=text]:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,197,61,.15)}
.kf input.bad{border-color:var(--down)}
.kf__tie{font-size:11.5px;color:#6F7C99;margin:-6px 0 16px}

.kf--range>span{display:flex;justify-content:space-between;align-items:baseline}
.kf--range b{font-family:var(--head);color:var(--gold);font-size:16px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--gold) var(--pct,30%),rgba(255,255,255,.1) var(--pct,30%));outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold);border:3px solid #0A1020;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid #0A1020;cursor:pointer}
.kf__scale{display:flex;justify-content:space-between;font-style:normal;font-size:11px;color:#6F7C99;margin-top:6px}

.ktoggles{display:flex;flex-direction:column;gap:10px;margin:16px 0 14px}
.ktog{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:#C4CEE2}
.ktog input{position:absolute;opacity:0;pointer-events:none}
.ktog i{flex:none;width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid var(--line);position:relative;transition:.22s}
.ktog i::after{content:"";position:absolute;left:3px;top:2.5px;width:17px;height:17px;border-radius:50%;background:#8D9AB8;transition:.22s}
.ktog input:checked+i{background:rgba(22,217,153,.25);border-color:rgba(22,217,153,.5)}
.ktog input:checked+i::after{left:21px;background:var(--up)}
.ktog input:focus-visible+i{box-shadow:0 0 0 3px rgba(22,217,153,.3)}

.kadv{border-top:1px solid var(--line);padding-top:14px}
.kadv summary{font-family:var(--body);font-size:13.5px;color:var(--muted);cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center}
.kadv summary::-webkit-details-marker{display:none}
.kadv summary::before{content:"+";color:var(--gold);font-size:17px;line-height:1}
.kadv[open] summary::before{content:"–"}
.kadv .krow{margin-top:14px}

/* ผลลัพธ์ */
.calc__out{display:flex;flex-direction:column;gap:16px}
.kmain{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,197,61,.14),rgba(22,217,153,.08));border:1px solid rgba(255,197,61,.3);border-radius:18px;padding:20px 22px;text-align:center}
.calc__mascot{position:absolute;right:-12px;bottom:-20px;width:104px;height:auto;pointer-events:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.kmain>span{font-size:13px;color:#C4CEE2;letter-spacing:.4px}
.kmain b{font-family:var(--head);font-size:clamp(38px,5.5vw,54px);font-weight:700;color:var(--gold);display:block;line-height:1.1}
.kmain small{font-size:12.5px;color:var(--muted)}
.kcards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.kc span{font-size:12.5px;color:var(--muted);display:block}
.kc span i{font-style:normal}
.kc b{font-family:var(--head);font-size:21px;display:block;margin-top:2px}
.ksum{background:var(--card2);border:1px dashed rgba(22,217,153,.35);border-radius:14px;
  padding:14px 16px;font-size:14px;color:#C4CEE2;line-height:1.75;
  min-width:0;overflow-wrap:anywhere}   /* ตัวเลขยาวต้องห่อบรรทัด ไม่ดันกล่องล้นจอ */
.ksum b{color:var(--up);font-weight:600}
.ksum .neg{color:var(--down)}

.kchart{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.kchart__hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.kchart__hd b{font-family:var(--head);font-size:14.5px}
.kleg{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kleg__bar{width:11px;height:11px;border-radius:3px;background:var(--gold);display:inline-block}
.kchart__svg svg{width:100%;height:170px;display:block;overflow:visible}

.ktable summary{font-family:var(--body);font-size:13.5px;color:var(--muted);cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center}
.ktable summary::-webkit-details-marker{display:none}
.ktable summary::before{content:"+";color:var(--up);font-size:17px;line-height:1}
.ktable[open] summary::before{content:"–"}
.ktable__wrap{overflow-x:auto;max-height:290px;overflow-y:auto;margin-top:12px;border:1px solid var(--line);border-radius:12px}
.ktable table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
.ktable th{position:sticky;top:0;background:#0C1324;text-align:right;padding:10px 12px;font-family:var(--head);font-weight:600;font-size:12.5px;color:#C4CEE2;border-bottom:1px solid var(--line)}
.ktable th:first-child,.ktable td:first-child{text-align:left}
.ktable td{padding:9px 12px;text-align:right;border-bottom:1px solid rgba(255,255,255,.05);color:#BAC5DA}
.ktable tbody tr:hover td{background:rgba(255,255,255,.03)}
.ktable td.g{color:var(--up);font-weight:600}

/* ── หน้าเดี่ยว /dividend-calculator/ ── */
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--up)}
.crumb span{margin:0 6px;opacity:.6}
.crumb b{color:#C4CEE2;font-weight:500}
.calc--page h1{font-family:var(--head);font-size:clamp(28px,4vw,42px);font-weight:700}
.calc--page .sec__hd p{max-width:640px}
.calc--page .sec__hd p b{color:var(--up)}
.calc--page{padding-top:34px}

.kshare{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.kshare>b{font-family:var(--head);font-size:15px;display:block}
.kshare>p{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.kshare__btns{display:flex;flex-wrap:wrap;gap:8px}
.ksb{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:13.5px;font-weight:500;
     padding:9px 15px;border-radius:10px;cursor:pointer;transition:.2s;
     background:rgba(255,255,255,.05);border:1px solid var(--line);color:#C4CEE2}
.ksb:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-1px)}
.ksb svg{width:18px;height:18px;flex:none}
.ksb__ic{font-family:var(--head);font-weight:700;font-size:15px;line-height:1;color:var(--gold)}
.ksb--line{background:#06C755;border-color:#06C755;color:#fff;font-weight:600}
.ksb--line:hover{background:#05b34c;color:#fff}
.ktoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
        background:#0E1428;border:1px solid rgba(22,217,153,.45);color:var(--text);
        font-size:14px;padding:12px 22px;border-radius:999px;box-shadow:0 14px 34px rgba(0,0,0,.55);
        opacity:0;pointer-events:none;transition:.25s}
.ktoast.is-on{opacity:1;transform:translate(-50%,0)}

/* ── เนื้อหาความรู้ใต้เครื่องคำนวณ ── */
.article{padding-top:0}
.article__in{max-width:820px;margin-inline:auto}
/* ช่องว่างเหนือหัวข้อมากกว่าใต้หัวข้อ เพื่อให้หัวข้อจับกลุ่มกับเนื้อหาที่มันคุม */
.article__body h2{font-size:clamp(23px,3vw,30px);margin:38px 0 14px;line-height:1.35}
.article__body h3{font-size:19px;margin:28px 0 10px;color:#fff;line-height:1.4}
.article__body h2:first-child,.article__body h3:first-child{margin-top:0}
/* line-height 1.85 เพราะข้อความไทยมีสระ–วรรณยุกต์ซ้อนบนล่าง ถ้าแน่นกว่านี้ตัวอักษรจะเกยกัน */
.article__body p{color:#B7C2D8;font-size:16px;margin-bottom:14px;line-height:1.85}
.article__body p:last-child{margin-bottom:0}
.article__body p b,.article__body li b{color:var(--up);font-weight:600}
.formula{background:var(--card);border:1px solid rgba(255,197,61,.28);border-radius:12px;
         padding:14px 18px;margin:12px 0 16px;font-family:var(--head);font-size:15.5px;color:#fff;
         overflow-x:auto;white-space:nowrap}
.formula span{color:var(--gold)}
.alist{list-style:none;display:flex;flex-direction:column;gap:12px;margin:16px 0 16px}
.alist li{position:relative;padding-left:28px;color:#B7C2D8;font-size:15.5px;line-height:1.8}
.alist li::before{content:"›";position:absolute;left:8px;top:-1px;color:var(--gold);font-size:19px;font-weight:700}

/* ═══ ระยะห่างของเนื้อหาบทความ/หน้าหมวด ═══
   จำเป็นเพราะ reset บนสุด (*{margin:0}) ล้างระยะห่างของ h2/h3/p ทิ้งหมด
   ถ้าไม่มีบล็อกนี้ หัวข้อจะแนบติดย่อหน้าจนอ่านไม่ออกว่าอันไหนคู่กับอันไหน
   หลักการ: ช่องว่าง "เหนือ" หัวข้อต้องมากกว่า "ใต้" หัวข้อ
            หัวข้อจึงจะดูเป็นพวกเดียวกับเนื้อหาที่มันคุม ไม่ใช่ลอยอยู่กลาง ๆ
   ข้อความไทยมีสระ–วรรณยุกต์ซ้อนบนล่าง ต้องใช้ line-height 1.8 ขึ้นไปไม่ให้ตัวอักษรเกยกัน */
.cat__body>*+*{margin-top:14px}
.cat__body h2{font-size:clamp(20px,2.4vw,25px);margin-top:38px;line-height:1.35}
.cat__body h3{font-size:clamp(17px,2vw,19.5px);margin-top:28px;line-height:1.4}
.cat__body h2+*,.cat__body h3+*{margin-top:12px}
.cat__body>h2:first-child,.cat__body>h3:first-child{margin-top:0}
.cat__body p{color:#B7C2D8;font-size:15.5px;line-height:1.85;max-width:76ch}
.cat__body p b,.cat__body li b{color:#E4EAF6;font-weight:600}
.cat__body ul+h2,.cat__body ol+h2{margin-top:34px}
.cta{display:flex;align-items:center;gap:22px;margin-top:36px;background:linear-gradient(135deg,rgba(22,217,153,.13),rgba(14,165,233,.07));
     border:1px solid rgba(22,217,153,.3);border-radius:20px;padding:20px 24px}
.cta img{width:130px;height:auto;flex:none}
.cta b{font-family:var(--head);font-size:19px;display:block}
.cta p{font-size:14.5px;color:#B7C2D8;margin:4px 0 14px}

/* ลิงก์ไปหน้าเต็มจากหน้าแรก */
.kfull{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:14px;font-weight:600;
       color:var(--gold);border:1px solid rgba(255,197,61,.35);background:rgba(255,197,61,.08);
       padding:10px 18px;border-radius:999px;transition:.2s;align-self:flex-start}
.kfull:hover{background:rgba(255,197,61,.16);transform:translateX(3px)}

/* ═══ หน้าบทความ ═══ */
.readbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;
  background:linear-gradient(90deg,var(--up),var(--blue));transform:scaleX(0);
  transform-origin:0 50%;transition:transform .1s linear;pointer-events:none}
.art{padding:30px 0 0}
.art__in{max-width:820px;margin-inline:auto}
.art__cat{display:inline-block;font-family:var(--head);font-size:13px;font-weight:600;
  color:var(--up);background:rgba(22,217,153,.1);border:1px solid rgba(22,217,153,.35);
  padding:5px 14px;border-radius:999px;margin-bottom:14px;transition:.2s}
.art__cat:hover{background:rgba(22,217,153,.2)}
.art h1{font-family:var(--head);font-size:clamp(26px,3.9vw,40px);font-weight:700;
  line-height:1.28;letter-spacing:-.3px}
.art__meta{font-size:13.5px;color:var(--muted);margin-top:12px}
.art__hero{margin:22px 0 0}
.art__heroimg{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--line)}
.art__heroimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art__heroico{font-size:58px;opacity:.85}

.tldr{background:linear-gradient(135deg,rgba(22,217,153,.12),rgba(14,165,233,.06));
  border:1px solid rgba(22,217,153,.32);border-radius:16px;padding:18px 22px;margin:22px 0 6px}
.tldr>b{font-family:var(--head);font-size:15px;color:var(--up);display:block;margin-bottom:8px}
.tldr ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.tldr li{position:relative;padding-left:26px;font-size:15.5px;color:#DCE4F2;line-height:1.65}
.tldr li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--up);font-weight:700}

/* ช่องว่างเหนือหัวข้อมากกว่าใต้ + line-height 1.85 สำหรับสระ–วรรณยุกต์ไทย */
.art__body h2{font-size:clamp(21px,2.7vw,27px);margin:38px 0 14px;line-height:1.35}
.art__body h2:first-child{margin-top:0}
.art__body p{color:#B7C2D8;font-size:16.5px;margin-bottom:14px;line-height:1.85}
.art__body p b,.art__body li b{color:var(--up);font-weight:600}
.art__body .note{font-size:14px;color:var(--muted);border-left:3px solid var(--line);
  padding-left:14px;margin-top:16px}
.art__body a:not(.btn):not(.rel):not(.seemore){color:var(--up);text-decoration:underline;
  text-decoration-color:rgba(22,217,153,.4)}
.art__more{margin-top:16px}

.rels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:6px}
.rel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  transition:.22s;display:flex;flex-direction:column;min-width:0}
.rel:hover{transform:translateY(-4px);border-color:rgba(22,217,153,.4)}
.rel__cat{font-size:11.5px;color:var(--muted)}
.rel b{font-family:var(--head);font-size:15.5px;line-height:1.4;margin:5px 0 7px;
  overflow-wrap:anywhere;transition:.2s}
.rel:hover b{color:var(--up)}
.rel small{font-size:12px;color:var(--muted);margin-top:auto}

/* ═══ JOIN ═══ */
.join{background:linear-gradient(180deg,transparent,rgba(22,217,153,.06),transparent)}
.join__in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* รูปท่าถือมือถือเป็นภาพครึ่งตัว (ต้นฉบับตัดที่เอว) จึงไล่ขอบล่างให้จางหาย
   ไม่ให้ดูเหมือนตัวขาด — ใช้คลาสนี้กับมาสคอตครึ่งตัวทุกรูป */
.mascot--fade{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 97%);
              mask-image:linear-gradient(180deg,#000 72%,transparent 97%)}
.join__mascot{width:210px;height:auto;margin-bottom:12px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.join h2{font-size:clamp(26px,3.7vw,39px)}
.ticks{list-style:none;margin:20px 0 14px;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:32px;color:#C4CEE2;font-size:15.5px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:rgba(22,217,153,.15);color:var(--up);display:grid;place-items:center;font-size:12px;font-weight:700}
.note{font-size:13px;color:var(--muted)}

.form{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.form h3{font-size:19px;margin-bottom:18px}
.fld{display:block;margin-bottom:16px;border:0}
.fld>span{display:block;font-size:13.5px;color:#C4CEE2;margin-bottom:7px;font-weight:500}
.fld i{color:var(--down);font-style:normal}
/* ครอบทุก input ที่ไม่ใช่ checkbox/radio เพื่อไม่ให้ตกหล่นเวลาเพิ่มช่องใหม่ */
.fld input:not([type=checkbox]):not([type=radio]),.fld select{width:100%;background:#0A1020;border:1px solid var(--line);color:var(--text);font-family:var(--body);font-size:15.5px;padding:13px 15px;border-radius:12px;transition:.2s}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--up);box-shadow:0 0 0 3px rgba(22,217,153,.15)}
.fld input::placeholder{color:#5F6C87}
.fld input.bad{border-color:var(--down)}
.err{display:block;color:var(--down);font-size:12.5px;font-style:normal;margin-top:5px}
.hint{display:block;color:#7C89A6;font-size:11.8px;font-style:normal;margin-top:5px;line-height:1.5}
.opt{font-size:11.5px;color:#7C89A6;font-weight:400}
.fld i.is-off{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips i{display:inline-block;font-style:normal;font-size:13.5px;padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#BAC5DA;transition:.2s}
.chips input:checked+i{background:rgba(22,217,153,.16);border-color:var(--up);color:var(--up);font-weight:600}
.chips input:focus-visible+i{box-shadow:0 0 0 3px rgba(22,217,153,.3)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.8px;color:var(--muted);line-height:1.6;margin:4px 0 6px}
.consent input{margin-top:4px;width:17px;height:17px;accent-color:#16D999;flex:none}
.consent a{color:var(--up);text-decoration:underline}
.formnote{font-size:12px;color:var(--muted);text-align:center;margin-top:11px}
.ok{margin-top:18px;background:rgba(22,217,153,.10);border:1px solid rgba(22,217,153,.35);border-radius:14px;padding:8px 18px 18px;text-align:center}
.ok__mascot{width:130px;height:auto;margin:0 auto -4px}
.ok b{font-family:var(--head);font-size:18px;display:block;margin-bottom:4px}
.ok p{font-size:13.5px;color:#C4CEE2}

/* ═══ LEARN ═══ */
.learn__in{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center}
.learn__mascot{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.learn__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.lc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;transition:.22s}
.lc:hover{transform:translateY(-4px);border-color:rgba(255,197,61,.38)}
.lc__n{width:36px;height:36px;border-radius:11px;background:rgba(255,197,61,.14);color:var(--gold);display:grid;place-items:center;font-family:var(--head);font-weight:700;margin-bottom:12px}
.lc h3{font-size:16.5px;margin-bottom:6px}
.lc p{font-size:14px;color:var(--muted)}

/* ═══ FAQ ═══ */
.faq{padding-top:0}
.faq__in{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:center}
.faq__mascot{width:auto;max-width:100%;max-height:330px;margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.faq__list{display:flex;flex-direction:column;gap:10px}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;transition:.2s}
details[open]{border-color:rgba(22,217,153,.35)}
summary{font-family:var(--head);font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--up);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{font-size:14.5px;color:var(--muted);margin-top:10px}

/* ═══ FOOTER ═══ */
.ft{border-top:1px solid var(--line);background:#05080F;padding-top:44px;margin-top:20px}
.ft__in{display:grid;grid-template-columns:1.2fr 2fr;gap:36px;padding-bottom:30px}
.ft__brand{display:flex;gap:14px;align-items:flex-start}
.ft__logo{width:54px;height:54px;border-radius:14px}
.ft__brand b{font-family:var(--head);font-size:21px}
.ft__brand b i{font-style:normal;color:var(--up)}
.ft__brand p{font-size:13.5px;color:var(--muted);margin-top:4px;max-width:300px}
.ft__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ft__cols h4{font-size:14.5px;margin-bottom:10px}
.ft__cols a{display:block;font-size:13.5px;color:var(--muted);padding:4px 0}
.ft__cols a:hover{color:var(--up)}
.ft__warn{font-size:12.5px;color:#7C89A6;border-top:1px solid var(--line);padding:18px 0;line-height:1.75}
.ft__warn b{color:var(--gold)}
.ft__copy{font-size:12.5px;color:#5F6C87;border-top:1px solid var(--line);padding:16px 0 26px}

/* ═══ FAB มือถือ ═══ */
/* ปุ่มลอยล่างจอ (มือถือ) — ตัวหนังสือต้องอยู่บรรทัดเดียว ไม่ตกบรรทัด
   ข้อความไทยไม่มีช่องว่าง ถ้าปล่อยให้ตัดคำเองจะแบ่งผิดที่และปุ่มสูงสองชั้น */
/* ⚠️ ปุ่มนี้ลอยทับเนื้อหาตลอดเวลา ยิ่งกว้างยิ่งบังของที่กดได้
   เคยใช้ข้อความ "สมัครฟรี เข้ากลุ่มหุ้น" แล้วบังชิปเลือกกราฟจนกดไม่ได้
   จึงเหลือคำสั้นที่สุดที่ยังสื่อความ และย้ายไปชิดขวาแทนกลางจอ
   ตรงกลางคือที่ที่นิ้วโป้งเลื่อนผ่านบ่อยที่สุด */
.fab{display:none;position:fixed;right:14px;bottom:16px;z-index:70;
  align-items:center;gap:8px;background:linear-gradient(135deg,#16D999,#0EA5E9);
  color:#04121C;font-family:var(--head);font-weight:600;font-size:14.5px;
  padding:6px 18px 6px 6px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.5);
  white-space:nowrap;max-width:calc(100vw - 28px)}
.fab span{white-space:nowrap}
.fab img{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.35);object-fit:cover;object-position:top}

/* ซ่อนไว้จนกว่าจะเลื่อนพ้นหัวเว็บ
   ช่วงบนสุดมีปุ่ม "สมัครฟรี เข้ากลุ่มข่าวหุ้น" ตัวใหญ่อยู่แล้ว ไม่ต้องมีปุ่มลอยซ้ำ
   และตรงนั้นคือที่ตั้งของชิปเลือกกราฟ ซึ่งเคยโดนปุ่มลอยทับจนกดไม่ได้ */
.fab{opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .2s,transform .2s,visibility .2s}
.fab.is-on{opacity:1;visibility:visible;transform:none}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1040px){
  .hero__in,.join__in{grid-template-columns:1fr;gap:40px}
  .hero__right{padding-top:0}
  .hero__mascot{position:static;width:220px;margin:0 auto 14px;animation:none}
  .calc__in{grid-template-columns:minmax(0,1fr)}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat__hd{flex-direction:column;align-items:flex-start;gap:14px}
  .cat__mascot{width:130px;align-self:center}
  .calc__mascot{width:88px}
  .learn__in,.faq__in{grid-template-columns:1fr}
  .learn__mascot,.faq__mascot{width:auto;max-width:240px;max-height:250px;margin-inline:auto}
  .mkt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .movers--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news{grid-template-columns:repeat(2,1fr)}
  .ft__in{grid-template-columns:1fr}
  .mchart__syms{overflow-x:auto}
}
/* ═══ ปุ่มเมนูสามขีด (มือถือ) ═══
   เคยมีแค่ display:flex ทำให้ span ทั้งสามอันไม่มีขนาด (0x0)
   ปุ่มเลยเป็นกล่องเปล่ามองไม่เห็น ผู้ใช้กดเข้าเมนูไม่ได้เลยบนมือถือ */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;cursor:pointer;flex:0 0 auto;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px}
.burger span{display:block;width:100%;height:2.5px;border-radius:2px;
  background:var(--text);transition:.25s}
.burger:hover{border-color:rgba(22,217,153,.5)}
/* กดแล้วขีดบน-ล่างไขว้เป็นกากบาท บอกว่าเมนูเปิดอยู่ */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:760px){
  .burger{display:flex}
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#0A101F;border-bottom:1px solid var(--line);padding:10px 5vw 18px;transform:translateY(-135%);transition:.3s;z-index:50}
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:13px 12px;border-radius:12px}
  .nav__cta{text-align:center;margin-top:8px}
  /* มือถือ: ดรอปดาวน์กางลงในเมนู ไม่ลอยทับ */
  .nav__drop{position:static}
  .nav__dropbtn{width:100%;justify-content:space-between;padding:13px 12px}
  .nav__menu{position:static;min-width:0;box-shadow:none;animation:none;
    background:rgba(255,255,255,.03);border-radius:12px;padding:6px;margin:2px 0 6px}
  .nav__menu a{padding:11px 12px}
  .news,.movers,.movers--3,.mkt,.learn__grid{grid-template-columns:minmax(0,1fr)}
  .cats{grid-template-columns:minmax(0,1fr)}
  .cat{padding-top:24px}
  .cat__news{padding-top:28px}
  .krow{grid-template-columns:minmax(0,1fr)}
  .kcards{grid-template-columns:minmax(0,1fr)}
  .calc__mascot{width:74px;right:-8px;bottom:-14px}
  .cta{flex-direction:column;text-align:center;gap:8px;padding:20px 18px}
  .cta img{width:110px}
  .ksb{flex:1 1 auto;justify-content:center}
  .calc__form{padding:20px 16px}
  .kmain{padding:16px}
  .strip__in{flex-direction:column;text-align:center;gap:10px;padding:20px 0}
  .strip__pts{grid-template-columns:1fr;gap:10px;text-align:left;width:100%}
  .strip__pts li{display:flex;align-items:baseline;gap:10px}
  .strip__pts b{flex:none;min-width:74px}
  .strip__mascot{width:150px}
  .strip__txt{min-width:0}
  .closed{flex-direction:column;text-align:center;gap:10px}
  .closed img{width:100px}
  .hero{padding:34px 0 52px}
  .hero__stats{gap:22px}
  .sec{padding:48px 0}
  .form{padding:22px 18px}
  .row{grid-template-columns:minmax(0,1fr) 84px}
  .fab{display:flex}
  .ft__copy{padding-bottom:84px}
  .panel__ico{width:92px;opacity:.35}
  .chartcard{padding:16px}
  .chartcard__price b{font-size:23px}
  .mchart__syms{gap:5px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══════════════════════════════════════════════════
   ราคาและกราฟจริง (assets/js/market.js + tv.js)
   ═══════════════════════════════════════════════════ */

/* กล่องวิดเจ็ต TradingView */
.tvbox{position:relative;min-height:120px}
.tvbox--ov{min-height:460px}
.tvbox--big{min-height:480px}
.tvbox--mini{min-height:180px}
.tvbox iframe{display:block;border:0!important;max-width:100%}
/* เครดิต TradingView — ห้ามลบ เป็นเงื่อนไขการใช้วิดเจ็ตฟรี */
.tvbox__cr{font-size:11px;color:var(--muted);margin-top:6px;text-align:right}
.tvbox__cr a{color:#8FA3BF;text-decoration:underline}
.tvbox__cr a:hover{color:var(--up)}

/* บรรทัดบอกว่าข้อมูลสด อัปเดตเมื่อไร */
.livenote{font-size:13.5px;color:var(--muted)}
.livenote .livestamp{color:var(--up);font-weight:600}
.livenote.is-bad{color:var(--gold)}

/* แถบช่วงราคาต่ำสุด–สูงสุดของวัน จุดคือราคาล่าสุด
   ใช้แทนเส้นกราฟสำหรับหุ้นไทย เพราะไม่มีแหล่งราคาย้อนหลังฟรีให้ยิง
   ตัวเลขทุกตัวเป็นของจริงจากตลาด */
.rgb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:8px;margin-top:10px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rgb__bar{position:relative;height:5px;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,77,109,.35),rgba(255,255,255,.14),rgba(22,217,153,.35))}
.rgb__bar i{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;border:2px solid var(--bg);transition:left .5s ease}
.rgb__bar i.up{background:var(--up);box-shadow:0 0 8px rgba(22,217,153,.7)}
.rgb__bar i.down{background:var(--down);box-shadow:0 0 8px rgba(255,77,109,.7)}
.rgb__lo,.rgb__hi{white-space:nowrap}

/* คำโปรยใต้หัวข้อฝั่งซ้ายของกล่องสมัครสมาชิก */
.join__lead{color:#AFBBD2;font-size:15.5px;line-height:1.8;margin-top:12px}

/* ═══ แถบชวนสมัครในหน้าแรก (ฟอร์มจริงอยู่ที่ /register/) ═══ */
.joincta{padding-top:0}
.joincta__in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
  background:linear-gradient(135deg,rgba(22,217,153,.09),rgba(14,165,233,.06));
  border:1px solid rgba(22,217,153,.24);border-radius:var(--r);padding:28px 32px}
.joincta__mascot{width:190px;height:auto;flex:0 0 auto}
.joincta__txt{min-width:0}
.joincta__txt h2{font-size:clamp(22px,3vw,31px);line-height:1.35}
.joincta__txt>p{color:#B7C2D8;font-size:15.5px;line-height:1.85;margin-top:12px;max-width:60ch}
.ticks--inline{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.ticks--inline li{font-size:14.5px}
.joincta__btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
@media(max-width:860px){
  .joincta__in{grid-template-columns:minmax(0,1fr);text-align:center;padding:24px 20px}
  .joincta__mascot{width:150px;margin:0 auto}
  .ticks--inline{justify-content:center;text-align:left}
  .joincta__btns{justify-content:center}
  .joincta__txt>p{margin-inline:auto}
}

/* ═══ ระบบสมาชิก ═══ */
.no-scroll{overflow:hidden}
.nav__auth{display:inline-flex;align-items:center;gap:8px}
.nav__login,.nav__out{font-family:var(--body);cursor:pointer;background:none;
  border:1px solid var(--line);color:#C4CEE2;border-radius:99px;padding:7px 14px;
  font-size:13.5px;transition:.18s;white-space:nowrap}
.nav__login:hover,.nav__out:hover{border-color:rgba(22,217,153,.5);color:var(--up)}
.nav__me{font-size:13.5px;white-space:nowrap}

/* โมดัลเข้าสู่ระบบ */
.amodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.amodal__bg{position:absolute;inset:0;background:rgba(4,7,15,.78);backdrop-filter:blur(3px)}
.amodal__box{position:relative;width:100%;max-width:410px;max-height:calc(100dvh - 40px);
  overflow-y:auto;background:linear-gradient(180deg,#0E1626,#0A101C);
  border:1px solid var(--line);border-radius:22px;padding:0 24px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);animation:dropIn .2s ease-out}
/* แถบหัวติดหนึบ — ปุ่มปิดต้องเห็นตลอดแม้เลื่อนฟอร์มลงไปแล้ว
   เคยใช้ position:absolute ทำให้ปุ่ม ✕ เลื่อนหลุดจอไปพร้อมเนื้อหา
   พอฟอร์มยาวเกินหน้าจอ ผู้ใช้เลยปิดหน้าต่างไม่ได้เลย */
.amodal__top{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;
  padding:10px 0 2px;margin:0 -24px;padding-right:14px;
  background:linear-gradient(180deg,#0E1626 62%,rgba(14,22,38,0))}
.amodal__x{background:rgba(255,255,255,.06);border:1px solid var(--line);cursor:pointer;
  color:#C4CEE2;font-size:15px;line-height:1;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;transition:.18s}
.amodal__x:hover{background:rgba(255,77,109,.16);border-color:rgba(255,77,109,.5);color:#fff}
/* โลโก้ในหน้าต่างเข้าสู่ระบบ (มุมมนอยู่ในไฟล์รูปแล้ว ไม่ต้องตัดซ้ำ) */
.amodal__mascot{width:62px;height:62px;object-fit:contain;display:block;margin:2px auto 10px}
.amodal__otp{letter-spacing:.42em;font-size:20px;text-align:center;font-family:var(--head)}
.amodal__msg{background:rgba(22,217,153,.09);border:1px solid rgba(22,217,153,.32);
  border-radius:11px;padding:10px 13px;font-size:13px;color:#A6E9CE;line-height:1.75}
.amodal__links{display:flex;justify-content:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.amodal__link{background:none;border:0;cursor:pointer;color:var(--muted);
  font-family:var(--body);font-size:13px;text-decoration:underline;padding:4px}
.amodal__link:hover{color:var(--up)}
.amodal__cancel{display:block;width:100%;margin-top:16px;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:99px;color:var(--muted);
  font-family:var(--body);font-size:13px;padding:10px;transition:.18s}
.amodal__cancel:hover{border-color:rgba(255,77,109,.45);color:#FFB3C1}
.amodal__box h2{font-size:23px;text-align:center}
.amodal__sub{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.7}
.amodal__tabs{display:flex;gap:7px;justify-content:center;margin:18px 0 16px}
.amodal__form{display:flex;flex-direction:column;gap:14px}
.amodal__err{background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.35);
  border-radius:11px;padding:10px 13px;font-size:13px;color:#FFB3C1;line-height:1.7}
.amodal__go{width:100%;justify-content:center}
.amodal__note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.75}

/* กล่องเชิญสมัคร (ใช้ตอนล็อกบทความ และหน้าสมาชิก) */
.gate{background:linear-gradient(180deg,rgba(22,217,153,.07),rgba(22,217,153,.02));
  border:1px solid rgba(22,217,153,.25);border-radius:20px;padding:28px 24px;text-align:center;
  margin-top:22px}
.gate__mascot{width:96px;height:auto;display:block;margin:0 auto 12px}
.gate b{font-family:var(--head);font-size:19.5px;display:block;line-height:1.4}
.gate p{font-size:14.5px;color:#B7C2D8;margin-top:10px;line-height:1.85;
  max-width:44ch;margin-left:auto;margin-right:auto}
.gate__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.article__body--gated{position:relative}

/* หน้าบัญชีของฉัน */
.mcalcs{display:flex;flex-direction:column;gap:9px}
.mcalc{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;min-width:0}
.mcalc b{display:block;font-size:14.5px}
.mcalc span{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.7}
.mcalc i{display:block;font-style:normal;font-size:13px;color:var(--up);margin-top:5px}
.mcalc__x,.row__x{background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:13px;padding:4px 7px;flex:0 0 auto}
.mcalc__x:hover,.row__x:hover{color:var(--down)}
.row__nm{min-width:0;display:block}
.row__nm small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__px{white-space:nowrap;font-size:13.5px;text-align:right}
.row__px i{font-style:normal;display:block;font-size:11.5px;font-weight:600;margin-top:2px}
.row__na{font-size:12px;color:var(--muted)}

/* ปุ่มดาวบันทึกหุ้น */
.stkd__star{background:none;border:1px solid var(--line);border-radius:99px;cursor:pointer;
  color:#C4CEE2;font-family:var(--body);font-size:12.5px;padding:6px 14px;
  margin-top:10px;transition:.18s;white-space:nowrap}
.stkd__star:hover{border-color:rgba(255,197,61,.5);color:var(--gold)}
.stkd__star.is-on{border-color:rgba(255,197,61,.6);color:var(--gold);
  background:rgba(255,197,61,.08)}

@media(max-width:600px){
  .amodal{padding:12px}
  .amodal__box{padding:0 18px 18px}
  .amodal__top{margin:0 -18px;padding-right:10px}
  .gate{padding:22px 16px}
  .nav__auth{width:100%;justify-content:flex-start;margin-top:6px}
}

/* ═══ แผงกราฟหลายตัวแบบมีแท็บ (วาดเองทั้งหมด แทนวิดเจ็ต market-overview) ═══ */
.opanel__tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.opanel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));gap:12px}
.ocard{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;min-width:0}
.ocard__hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-bottom:6px;min-width:0}
.ocard__nm{font-family:var(--head);font-size:13.5px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocard__px{text-align:right;white-space:nowrap;font-size:12px;color:var(--muted)}
.ocard__px b{display:block;font-family:var(--head);font-size:15px;color:var(--text)}
.ocard__px i{font-style:normal;font-size:11.5px;font-weight:600}
.ocard__ch{min-height:92px}

/* กราฟที่วาดเอง (หุ้นไทย — วิดเจ็ต TradingView โดนล็อกไลเซนส์ตลาดไทย) */
.ownchart{width:100%;display:block}
.ownchart__na{font-size:12px;color:var(--muted);padding:8px 2px;line-height:1.6}
[data-own]{min-height:60px}

/* เส้นกราฟย่อจากราคาจริง (คริปโตกับทอง ดึงจาก Binance) */
.spk{width:100%;height:46px;display:block;margin-top:10px}
.mkt__gfx{min-height:46px}
.mkt__c.is-wait .chg{color:var(--muted);font-weight:400}
.mkt__sub{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.65}
/* คำที่มีคำอธิบายเพิ่มเวลาชี้เมาส์ (ทองไทยเป็นค่าประมาณ ต้องบอกให้ชัด) */
.hint{border-bottom:1px dotted rgba(255,197,61,.6);color:var(--gold);cursor:help}
.rows__empty{font-size:13px;color:var(--muted);padding:14px 4px}

/* แถบราคาในหน้าหมวด (แทนตัวเลขตัวอย่างชุดเดิม) */
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0 4px}
.cstat{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 14px;min-width:0}
.cstat__k{display:block;font-size:12px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cstat__v{font-family:var(--head);font-size:19px;display:block;margin:2px 0}
.cstat__c{font-size:12.5px;font-weight:600}

/* ═══ หน้ากราฟสด /market/ ═══ */
.mchart{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.mchart__syms{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.mchart__gap{width:100%;height:0}
.ctab--rng{font-size:11.5px;padding:4px 10px;opacity:.9}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.mgrid__c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.mgrid__c h3{font-family:var(--head);font-size:15px;margin-bottom:8px}
.msplit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:860px){.msplit{grid-template-columns:minmax(0,1fr)}}

/* ═══ หน้าค้นหาหุ้น /stocks/ ═══ */
.stks{position:relative;margin:6px 0 18px}
.stks__input{width:100%;min-width:0;font-family:var(--body);font-size:17px;color:var(--text);
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:16px 20px;outline:none;transition:.2s}
.stks__input:focus{border-color:rgba(22,217,153,.55);box-shadow:0 0 0 4px rgba(22,217,153,.12)}
.stks__results{position:absolute;inset:auto 0 auto 0;top:calc(100% + 6px);z-index:30;
  max-height:420px;overflow-y:auto;background:#0C1322;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.stkr{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;text-align:left;cursor:pointer;background:none;border:0;border-top:1px solid var(--line);
  padding:11px 16px;font-family:var(--body);color:var(--text);transition:.15s}
.stkr:first-child{border-top:0}
.stkr:hover{background:rgba(22,217,153,.08)}
.stkr b{font-family:var(--head);font-size:14.5px}
.stkr__n{font-size:13px;color:#C7D1E5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stkr__m{font-size:11px;color:var(--muted);white-space:nowrap}
.stkr__none{padding:16px;font-size:13.5px;color:var(--muted);line-height:1.7}
.stks__pop{margin:20px 0 40px}          /* ต้องมีที่ว่างท้าย ไม่ให้ชิปส์ชนหัวข้อถัดไป */
.stks__pop p{font-size:13px;color:var(--muted);margin-bottom:10px}
.stks__chips{display:flex;gap:8px;flex-wrap:wrap}

/* ═══ กล่อง "บริษัทนี้ทำธุรกิจอะไร" ═══ */
.stkbiz{margin-top:20px;padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line)}
.stkbiz--load{opacity:.6}
.stkbiz h3{font-size:17.5px;margin-bottom:10px}
.stkbiz h4{font-size:14.5px;color:var(--gold);margin:18px 0 7px}
.stkbiz p{font-size:15px;color:#B7C2D8;line-height:1.85;overflow-wrap:anywhere}
.stkbiz__lead{color:#D2DAEA!important}
.stkbiz__en{font-size:13.5px!important;color:#9FB0C9!important;line-height:1.8!important}
.stkbiz__list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0}
.stkbiz__list li{position:relative;padding-left:20px;font-size:14.5px;color:#B7C2D8;
  line-height:1.8;overflow-wrap:anywhere}
.stkbiz__list li::before{content:"•";position:absolute;left:4px;color:var(--up)}
.stkbiz__more{margin-top:10px;background:none;border:1px solid var(--line);color:#C4CEE2;
  border-radius:99px;padding:6px 15px;font-family:var(--body);font-size:12.5px;cursor:pointer}
.stkbiz__more:hover{border-color:rgba(22,217,153,.5);color:var(--up)}
.stkbiz__meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px!important;color:var(--muted)!important;line-height:1.9!important}
.stkbiz__meta b{color:#C4CEE2;font-weight:500}
.stkbiz__meta a{color:var(--up)}
.stkbiz__src{margin-top:12px;font-size:11.5px!important;color:var(--muted)!important;
  line-height:1.75!important}
.stkbiz__wait,.stkbiz__none{font-size:14px!important;color:var(--muted)!important}
@media(max-width:600px){.stkbiz{padding:15px 16px}}

/* กล่องรายละเอียดหุ้นรายตัว */
.stkd{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--r);padding:22px;margin-top:18px;box-shadow:var(--shadow)}
.stkd__hd{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.stkd__sym{font-family:var(--head);font-size:26px;line-height:1.2}
.stkd__sym small{font-size:12.5px;color:var(--muted);font-weight:400;margin-left:6px}
.stkd__name{font-size:13.5px;color:#C7D1E5;margin-top:6px;line-height:1.6;overflow-wrap:anywhere}
.stkd__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.stkd__tags span{font-size:11px;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:3px 10px;white-space:nowrap}
.stkd__px{text-align:right}
.stkd__px b{font-family:var(--head);font-size:30px;display:block;line-height:1.15}
.stkd__px b small{font-size:13px;color:var(--muted)}
.stkd__px span{font-size:14px;font-weight:600}
.stkd__rngs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.stkd__chart{min-height:120px}
.stkd__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-top:16px}
.stkd__grid>div{background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;min-width:0}
.stkd__grid i{font-style:normal;display:block;font-size:11.5px;color:var(--muted);
  overflow-wrap:anywhere}
.stkd__grid b{font-size:15px;font-weight:600}
.stkd__link{margin-top:14px;font-size:14px;background:rgba(255,197,61,.07);
  border:1px solid rgba(255,197,61,.25);border-radius:12px;padding:11px 15px;line-height:1.65}
@media(max-width:600px){
  .stkd{padding:16px}
  .stkd__px{text-align:left}
  .stkr{grid-template-columns:72px minmax(0,1fr)}
  .stkr__m{display:none}
}

/* ═══ หน้าหุ้นรายตัว /หุ้น/<ชื่อย่อ>/ ═══ */
.stkp__hd{margin-bottom:18px}
.stkp__hd h1{font-size:clamp(26px,5vw,38px);line-height:1.25}
.stkp__name{font-size:15px;color:#C7D1E5;margin-top:8px;line-height:1.65;overflow-wrap:anywhere}
.stkp__tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.stkp__tags a,.stkp__tags span{font-size:12px;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:4px 12px;white-space:nowrap}
.stkp__tags a{color:#C4CEE2}
.stkp__tags a:hover{border-color:rgba(22,217,153,.45);color:var(--up)}
.stkp__tag{font-size:14.5px;color:#B7C2D8;line-height:1.8;margin-top:12px;max-width:62ch}

/* กล่องราคา — โครงเดียวกับหน้าค้นหาหุ้น แต่ชิดซ้ายเพราะเป็นเนื้อหาหลักของหน้า */
.stkp__live{background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.stkp__live .stkp__px{text-align:left}
.stkp__live .stkd__grid{margin-top:18px}
.stkp__chartwrap{background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:16px}
.stkp__body{margin-top:34px}
.stkp__body .stkbiz__list{margin:0 0 10px}
.stkp__body .art__more{display:flex;gap:18px;flex-wrap:wrap}

/* หน้ารวมหุ้นรายตัว /หุ้น/ */
.stkg{margin-top:38px}
.stkg h2{font-size:21px}
.stkg__sub{font-size:14px;color:var(--muted);margin:6px 0 16px;line-height:1.7}
.stkg__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.stkg__c{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:5px;min-width:0;transition:.18s}
.stkg__c:hover{transform:translateY(-3px);border-color:rgba(22,217,153,.4)}
.stkg__c b{font-family:var(--head);font-size:18px}
.stkg__c:hover b{color:var(--up)}
.stkg__c i{font-style:normal;font-size:12px;color:#C7D1E5;line-height:1.55;overflow-wrap:anywhere}
.stkg__c small{font-size:12px;color:var(--muted);line-height:1.65;margin-top:2px}

@media(max-width:600px){
  .stkp__live,.stkp__chartwrap{padding:15px 16px}
}