/* =====================================================================
   Finance Story · financestory.me — site.css (ส่วนที่ 1: หน้าแรก + ฐานกลางของทั้งเว็บ)
   - Design tokens อยู่ที่ :root ด้านล่าง (สี / ฟอนต์ / เงา)
   - ส่วนที่ใช้ร่วมทุกหน้า: .nav (header), .btn, .eyebrow, .foot (footer)
   - ไฟล์นี้สะสมมาจากการปรับดีไซน์หลายรอบ จึงมีกฎชั้นหลังที่ override ชั้นก่อน (!important)
     ผลลัพธ์บนจอ = แบบที่เจ้าของเว็บอนุมัติแล้ว (v3.15) · refactor ได้ แต่หน้าตาต้องเหมือนเดิม 100%
   ===================================================================== */
a.vid{display:block;color:inherit;text-decoration:none}
a.brandmark{display:inline-flex}
.statement h2.quote{color:inherit;max-width:none}
.z2door h2.zh{font-size:clamp(28px,3.4vw,38px);font-weight:400;line-height:1.25;margin-top:10px;color:inherit;max-width:none;letter-spacing:normal}
.z2door h2.zh b{font-weight:500;color:var(--orange)}
/* ============================================================
   ค่าจาก brand_tokens_FinanceStory.css (คัดมาไว้ในไฟล์เพื่อเปิดดูได้เดี่ยว ๆ)
   ของจริงให้ <link> ไฟล์ token แทน แล้วใส่ class="theme-fs" ที่ body
   ============================================================ */
:root{
  --jo:url(/assets/img/jo-portrait-frame.webp);
  --navy:#0B3C63; --deep:#0E2F49; --night:#092235;
  --orange:#E8891A; --orange-hi:#D67C12; --gold:#C9992F; --sand:#E8B978;
  --ink:#16202B; --body:#4A5561; --muted:#6A7381; --line:#E6E1D8; --hair:#EFEBE3;
  --sans:'Kanit',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r-s:10px; --r-m:14px; --r-l:20px;
  --sh-s:0 1px 2px rgba(16,32,48,.05);
  --sh-m:0 4px 18px rgba(16,32,48,.07),0 1px 3px rgba(16,32,48,.05);
  --sh-l:0 18px 50px rgba(11,33,74,.13),0 2px 6px rgba(11,33,74,.07);
  --spine-a:#0B3C63; --spine-b:#1F5F7A; --spine-c:#3F7A6E; --spine-d:#9A6216; --spine-e:#8A4A1E;
  /* theme-fs */
  --paper:#FBF8F2; --surface:#FFFFFF; --sunk:#F3EFE6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:#E7E4DE;
  line-height:1.74;font-size:15.5px;-webkit-font-smoothing:antialiased}

/* ---------- กรอบ mockup ---------- */
.legend{max-width:1260px;margin:20px auto 12px;padding:0 14px;font-size:12.5px;color:#5B6470;line-height:1.7}
.legend b{color:var(--deep);font-weight:500}
.stage{max-width:1260px;margin:0 auto 46px;padding:0 14px}
.mframe{background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:var(--sh-l)}
.chrome{background:#EDEEF0;border-bottom:1px solid #E0E2E6;padding:9px 14px;display:flex;align-items:center;gap:9px}
.dot{width:10px;height:10px;border-radius:50%}
.url{flex:1;background:#fff;border:1px solid #E2E4E8;border-radius:20px;padding:4px 14px;font-size:12px;color:var(--muted);text-align:center}
.url b{color:var(--ink);font-weight:400}

/* ---------- โครงร่วม ---------- */
.sec{padding:66px 60px;position:relative}
.sec.tight{padding:44px 60px}
.inner{max-width:1040px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.6}
h2{font-size:clamp(24px,3vw,31px);font-weight:400;color:var(--deep);line-height:1.28;margin:12px 0 0;max-width:27ch;letter-spacing:-.01em}
h2 b{font-weight:500}
.lede{font-size:15.6px;color:var(--body);max-width:62ch;margin-top:11px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;font:inherit;
  font-size:14.5px;font-weight:400;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.16s}
.btn-o{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(232,137,26,.28)}
.btn-o:hover{background:var(--orange-hi);transform:translateY(-1px)}
.btn-n{border-color:#C6D5E2;color:var(--navy);background:#fff}
.btn-n:hover{background:#F2F7FB}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- MOTIF: ป้ายบท (สันหนังสือ + เลขบท) ---------- */
.chapmark{display:inline-flex;align-items:stretch;border-radius:8px;overflow:hidden;
  box-shadow:0 2px 7px rgba(16,32,48,.1);background:#fff;border:1px solid var(--line)}
.chapmark i{width:5px;background:var(--spine-a);flex:none}
.chapmark span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--deep);
  padding:4px 11px 4px 10px;text-transform:uppercase}

/* ---------- NAV ---------- */
.nav{display:flex;align-items:center;gap:26px;padding:14px 60px;border-bottom:1px solid var(--hair);
  background:rgba(251,248,242,.93);position:sticky;top:0;z-index:40;backdrop-filter:blur(10px)}
.brandmark{display:flex;align-items:center;gap:10px;flex:none}
.brandmark .blogo{width:26px;height:32px;border-radius:3px 6px 6px 3px;position:relative;flex:none;
  background:linear-gradient(115deg,var(--navy),#17547F);box-shadow:0 3px 8px rgba(11,33,74,.22)}
.brandmark .blogo::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.28)}
.brandmark .nm{font-size:17px;font-weight:400;color:var(--deep);line-height:1.15;letter-spacing:-.01em}
.brandmark .nm small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--gold);text-transform:uppercase;font-weight:500}
.nav .links{display:flex;gap:22px;margin-left:10px}
.nav .links a{color:var(--body);text-decoration:none;font-size:14px}
.nav .links a:hover{color:var(--navy)}
.nav .cta{margin-left:auto;display:flex;align-items:center;gap:14px}

/* ---------- แถบเครดิต ---------- */
.trust{background:var(--sunk);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:16px 60px;margin-top:24px}
.trustin{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;font-size:13px;color:var(--body)}
.trustin b{font-family:var(--mono);font-size:12.5px;color:var(--deep);font-weight:500}
.trustin .sep{width:1px;height:14px;background:var(--line)}
.trustin a{color:var(--navy);text-decoration:none;border-bottom:1px dotted #9FB7C9;font-size:12.8px}

/* ---------- ADVISORY ---------- */
.adv{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--sand);
  border-radius:0 var(--r-l) var(--r-l) 0;padding:24px 28px;box-shadow:var(--sh-m);max-width:760px}
.adv h3{font-size:19px;font-weight:500;color:var(--deep)}
.adv .def{font-size:13.6px;color:var(--body);margin-top:7px;max-width:56ch}
.adv .def b{color:var(--navy);font-weight:500}
.adv .lic{display:inline-block;margin-top:13px;font-size:11.8px;color:#6B5C3E;background:#FDF6E8;
  border:1px solid #EAD9B6;border-radius:999px;padding:4px 12px}
.adv .dis{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.66;max-width:62ch}
.adv .go{margin-top:14px;display:inline-flex}

/* ---------- FOOTER ---------- */
.foot{background:var(--night);color:#8FA8BD;padding:44px 60px 32px;font-size:13px;font-weight:200}
.foot .top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;max-width:1040px;margin:0 auto 24px}
.foot h2{color:#fff;font-size:12.5px;font-weight:400;margin:0 0 9px;max-width:none;line-height:inherit;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot a{color:#8FA8BD;text-decoration:none;display:block;padding:3px 0}
.foot a:hover{color:#fff}
.foot .bm{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot .bm .blogo{width:24px;height:30px;border-radius:3px 6px 6px 3px;background:linear-gradient(115deg,#17547F,#2E7BB0)}
.foot .bm .nm{color:#fff;font-size:16px;font-weight:400}
.disc{max-width:1040px;margin:0 auto;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;
  font-size:11.6px;line-height:1.78;color:#7E94A8}

/* ---------- ที่คั่นหนังสือ (คู่ขนานกับมาตรวัดหลักไมล์ของ z2s) ---------- */
.mark{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;align-items:stretch;
  border-radius:11px;overflow:hidden;box-shadow:0 10px 26px rgba(11,33,74,.22);background:#fff;border:1px solid var(--line)}
.mark i{width:6px;background:var(--orange);flex:none;transition:background .3s}
.mark div{padding:8px 14px 8px 12px}
.mark .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.mark .t{font-size:13px;color:var(--deep);line-height:1.3}
@media(max-width:760px){.mark{left:10px;bottom:10px}.mark .t{font-size:12px}}

/* ---------- หมายเหตุ mockup ---------- */
.mk{position:absolute;left:14px;top:22px;background:#7A2EA8;color:#fff;font-family:var(--mono);font-size:10px;
  border-radius:5px;padding:2px 8px;letter-spacing:.05em;z-index:5}
.an{background:#F6F0FB;border:1px dashed #B48ED4;border-radius:var(--r-s);padding:11px 15px;
  font-size:12.4px;color:#5B3D80;margin-top:16px;line-height:1.7}
.an b{color:#4A2D6D;font-weight:500}
.nav .mk{left:10px;top:50%;transform:translateY(-50%)}
.toggle{position:fixed;right:18px;bottom:18px;z-index:99;background:var(--deep);color:#fff;border:none;
  font-family:var(--sans);font-size:12.5px;font-weight:300;border-radius:999px;padding:10px 20px;
  cursor:pointer;box-shadow:0 8px 24px rgba(11,33,74,.3)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.9,.24,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.bookg{transition:none}}

@media(max-width:940px){
  .sec,.nav,.hero,.foot,.trust{padding-left:26px;padding-right:26px}
  .shelfwrap{margin-left:-26px;margin-right:-26px}
  .shelfnote{padding-left:26px;padding-right:26px}
  .doors,.ytbar,.foot .top{grid-template-columns:1fr}
  .nav .links{display:none}
}
@media(max-width:640px){
  .stage{padding:0 8px}
  .sec{padding-top:48px;padding-bottom:48px}
  .thumbs{grid-template-columns:1fr 1fr}
  .trow{grid-template-columns:auto 1fr;row-gap:2px}
  .trow .tc{grid-column:2}
  .hero h1{max-width:none}
}



/* ============================================================
   ตู้เครื่องมือ — บล็อกเด่นสุดของหน้าแรก
   ============================================================ */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-m);
  overflow:hidden;display:grid;align-content:start;transition:.2s}
.cat:hover{box-shadow:0 10px 30px rgba(16,32,48,.11);transform:translateY(-3px)}
.cathead{padding:18px 20px 14px;color:#fff;position:relative;overflow:hidden}
.cat.c1 .cathead{background:linear-gradient(140deg,#1F5F7A,#0B3C63)}
.cat.c2 .cathead{background:linear-gradient(140deg,#B07A1E,#8A4A1E)}
.cat.c3 .cathead{background:linear-gradient(140deg,#3F7A6E,#1F5044)}
.cathead .ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:18px;margin-bottom:10px}
.cathead h3{font-size:19px;font-weight:500;line-height:1.3}
.cathead p{font-size:12.8px;color:rgba(255,255,255,.82);font-weight:200;margin-top:4px}
.cathead .n{position:absolute;right:16px;top:16px;font-family:var(--mono);font-size:11px;
  background:rgba(255,255,255,.18);border-radius:999px;padding:3px 10px;letter-spacing:.04em}
.catbody{padding:14px 16px 16px;display:grid;gap:9px}
.tl{border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px;background:#FCFBF8;position:relative}
.tl .nm{font-size:15px;font-weight:500;color:var(--deep);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl .nm .rdy{font-family:var(--mono);font-size:10px;letter-spacing:.06em;border-radius:999px;padding:2px 8px;
  background:#EEF7F1;border:1px solid #BFE0CB;color:#2C6B45;font-weight:400}
.tl .nm .soonb{background:#F2F4F6;border-color:#D8DEE4;color:#657381}
.tl .q{font-size:13px;color:var(--body);margin-top:5px;line-height:1.6}
.tl .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.tl .meta span{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.catgo{margin-top:2px;display:inline-flex;align-items:center;gap:7px;font-size:13.4px;color:var(--orange);
  text-decoration:none;font-weight:400;padding:2px 2px 0}

.circuit{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:18px 22px;box-shadow:var(--sh-s)}
.circuit .ch{font-size:14.4px;color:var(--deep);font-weight:400;margin-bottom:12px}
.circuit .ch b{font-weight:500;color:var(--orange)}
.flowrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#FCFBF8;
  border-radius:999px;padding:7px 14px;font-size:13.2px;color:var(--ink)}
.step em{font-style:normal;font-family:var(--mono);font-size:11px;color:#fff;background:var(--navy);
  border-radius:50%;width:19px;height:19px;display:grid;place-items:center;flex:none}
.step.last em{background:var(--orange)}
.arrow{color:var(--sand);font-size:15px}
.circuit .note{font-size:12.4px;color:var(--muted);margin-top:11px;line-height:1.66}
.circuit .note b{color:var(--navy);font-weight:500}
@media(max-width:940px){.kit{grid-template-columns:1fr}}

/* ============================================================
   ชั้นหนังสือ — component หลักของ financestory.me
   ข้อมูลมาจาก array ใน JS → เพิ่มเล่มใหม่ = เพิ่ม 1 บรรทัด ชั้นขยายเอง
   ============================================================ */
.libwrap{margin-top:22px}
.libbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:14px}
.chip{font:inherit;font-size:12.8px;border:1px solid var(--line);background:#fff;color:var(--body);
  border-radius:999px;padding:6px 14px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:#C6D5E2}
.chip.on{background:var(--deep);border-color:var(--deep);color:#fff}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.75}
.libcount{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}
.libcount .meter{width:76px;height:6px;border-radius:4px;background:var(--sunk);overflow:hidden}
.libcount .meter i{display:block;height:100%;background:var(--orange);border-radius:4px;transition:width .5s}

/* ---- ตู้หนังสือ ---- */
.case{background:linear-gradient(176deg,#F3ECDF,#EADFCB);border:1px solid #DFD2BA;border-radius:var(--r-l);
  padding:18px 20px 14px;position:relative;overflow:hidden;box-shadow:inset 0 2px 14px rgba(120,92,50,.1)}
.case::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 52% at 88% -6%,rgba(255,226,170,.55),transparent 66%)}
.shelf{position:relative;z-index:1;margin-bottom:16px}
.shelf:last-of-type{margin-bottom:4px}
.books{display:flex;align-items:flex-end;gap:5px;min-height:166px;padding:0 6px;flex-wrap:wrap;row-gap:18px}
.board{height:11px;border-radius:2px;background:linear-gradient(180deg,#C9A878,#A9855A 55%,#8E6B44);
  box-shadow:0 5px 12px rgba(94,67,34,.28);position:relative}
.board::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.35)}

/* ---- หนังสือ 1 เล่ม ---- */
.bk{position:relative;border-radius:2px 3px 0 0;cursor:pointer;flex:none;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), filter .3s, opacity .3s;
  box-shadow:1px 0 0 rgba(0,0,0,.14), inset -3px 0 6px rgba(0,0,0,.2), inset 3px 0 5px rgba(255,255,255,.14);
  transform-origin:bottom center}
.bk::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.32),transparent)}
.bk::after{content:"";position:absolute;right:2px;top:7px;bottom:7px;width:2px;border-radius:1px;
  background:rgba(255,255,255,.2)}
.bk.done::before{background:linear-gradient(180deg,#F6EEDC,#E6D8BC 62%,rgba(230,216,188,0));height:7px}
.bk.soon::before{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent)}
.bk .lab{position:absolute;left:0;right:0;top:6px;bottom:19px;display:grid;place-items:center;
  overflow:hidden;pointer-events:none}
.bk .lab i{font-style:normal;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform:rotate(-90deg);font-size:11px;font-weight:400;line-height:1;
  color:rgba(255,255,255,.97);letter-spacing:.005em;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.bk .code{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-family:var(--mono);
  font-size:10px;color:rgba(255,255,255,.8);pointer-events:none;letter-spacing:.04em}
.bk:hover{transform:translateY(-14px) rotate(-1.4deg)}
.bk.sel{transform:translateY(-18px) rotate(-2.2deg);box-shadow:0 12px 24px rgba(80,58,28,.34),inset -3px 0 6px rgba(0,0,0,.2)}
.bk.sel::before{background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)}
.bk.dim{opacity:.22;filter:grayscale(.7)}
.bk .pin{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;
  background:var(--orange);border:2px solid #FBF8F2;box-shadow:0 1px 3px rgba(0,0,0,.25);display:none}

.bk.wip .pin{display:block;background:var(--orange)}
.bk.soon{opacity:.86}
.bk.soon .lab{color:rgba(255,255,255,.8)}

/* ที่คั่น + ของประดับบนชั้น */
.slot{flex:none;align-self:flex-end;width:44px;height:104px;border:2px dashed rgba(138,110,66,.45);
  border-bottom:none;border-radius:3px 3px 0 0;position:relative;background:rgba(255,255,255,.22)}
.slot span{position:absolute;inset:6px 0 14px;display:grid;place-items:center;overflow:hidden}
.slot span::before{content:"เล่มต่อไป";white-space:nowrap;transform:rotate(-90deg);
  font-size:10.5px;color:#9A8A6A;letter-spacing:.04em}
.bookend{width:14px;align-self:flex-end;height:86px;border-radius:2px 2px 0 0;flex:none;
  background:linear-gradient(90deg,#8E9BA6,#6E7C88);box-shadow:inset -2px 0 4px rgba(0,0,0,.25)}
.trinket{flex:none;align-self:flex-end;width:40px;height:48px;position:relative}
.trinket svg{width:100%;height:100%;display:block}

/* ---- การ์ดรายละเอียดเล่มที่เลือก ---- */
.bkcard{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-m);padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  position:relative;z-index:1}
.bkcard .cov{width:60px;height:80px;border-radius:3px 6px 6px 3px;flex:none;position:relative;overflow:hidden;
  box-shadow:0 6px 16px rgba(16,32,48,.2)}
.bkcard .cov i{position:absolute;left:5px;top:0;bottom:0;width:3px;background:rgba(255,255,255,.3)}
.bkcard .cov span{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--mono);
  font-size:10px;color:rgba(255,255,255,.85)}
.bkcard .tk{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.bkcard h3{font-size:18px;font-weight:500;color:var(--deep);margin:3px 0 4px;line-height:1.35}
.bkcard p{font-size:13.2px;color:var(--body);line-height:1.6}
.bkcard .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.bkcard .tags span{font-size:11.5px;border-radius:999px;padding:3px 10px;border:1px solid var(--line);color:var(--body)}
.bkcard .tags .free{background:#EEF7F1;border-color:#BFE0CB;color:#2C6B45}
.bkcard .tags .paid{background:#FFF7EA;border-color:#EBD2A6;color:#8A5A17}
.bkcard .tags .soon{background:#F2F4F6;border-color:#D8DEE4;color:#657381}
.bkcard .act{white-space:nowrap}
@media(max-width:640px){
  .bkcard{grid-template-columns:auto 1fr;row-gap:10px}
  .bkcard .act{grid-column:1/-1}
  /* มือถือ: ชั้นเลื่อนแนวนอน (ปัดดู) แทนการตัดบรรทัดจนหน้ายาวเกิน */
  .books{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;padding-bottom:3px;-webkit-overflow-scrolling:touch}
  .books::-webkit-scrollbar{height:4px}
  .books::-webkit-scrollbar-thumb{background:rgba(138,110,66,.4);border-radius:3px}
  .bk{scroll-snap-align:center}
  .case{padding:16px 12px 12px}
  .swipehint{display:flex}
  .libcount{width:100%;margin-left:0;justify-content:flex-start}
}
.swipehint{display:none;align-items:center;gap:7px;font-size:11.5px;color:#9A8A6A;margin:0 0 8px 2px}
.swipehint::after{content:"→"}


/* ============================================================
   v2 · HERO แบบ "กรอบขอบหนา + การ์ดลอย" (หลักการจากเทมเพลต Sculpty)
   รูปจารย์โจอยู่ในกรอบมุมโค้งขอบหมึกหนา · การ์ด UI ลอยทับ = ข้อมูลจากเครื่องมือจริง (ติดป้าย "ตัวอย่าง")
   motion: เข้าฉากครั้งเดียวตอนโหลด + ขยับตามเมาส์ (ผู้ใช้เป็นคนขยับ) — ไม่ลอยเองวนไม่รู้จบ
   ============================================================ */
:root{--inkline:#16202B; --sun:#F6D27F; --sun-deep:#EBBB55; --pop-green:#2F9E6A; --pop-sky:#2E7BB0}

.hero2{position:relative;overflow:hidden;
  background:
    radial-gradient(circle,rgba(11,60,99,.13) 1px,transparent 1.2px) 0 0/18px 18px,
    linear-gradient(172deg,#FEFCF8,var(--paper) 70%)}
.hero2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(251,248,242,.94) 38%,rgba(251,248,242,.4) 62%,transparent 80%)}
.h2grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center;
  max-width:1140px;margin:0 auto;padding:58px 60px 64px}

.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--deep);background:#fff;border:1.5px solid var(--inkline);border-radius:999px;
  padding:5px 13px 5px 10px;box-shadow:2px 2px 0 var(--inkline)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.hero2 h1{font-size:clamp(33px,4.7vw,55px);font-weight:500;line-height:1.16;margin:20px 0 0;
  color:var(--deep);letter-spacing:-.022em;max-width:15ch}
.hero2 h1 .hl{position:relative;white-space:nowrap;z-index:0}
.hero2 h1 .hl::after{content:"";position:absolute;left:-4px;right:-4px;bottom:.07em;height:.36em;z-index:-1;
  background:var(--sun);border-radius:4px;transform:skewX(-8deg) scaleX(0);transform-origin:left;
  animation:hlIn .8s .45s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes hlIn{to{transform:skewX(-8deg) scaleX(1)}}
.hero2 h1 .dim{font-weight:300;color:#5E6D7B}
.hero2 .sub{margin-top:16px;font-size:16.5px;color:var(--body);max-width:47ch}
.hero2 .sub b{color:var(--navy);font-weight:500}
.hero2 .acts{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.btn-ink{border:1.5px solid var(--inkline)!important;box-shadow:3px 3px 0 var(--inkline)!important}
.btn-ink:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--inkline)!important}
.btn-ink:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--inkline)!important}

.stats{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;padding-top:18px;border-top:1px dashed #D9D2C4;max-width:520px}
.stat b{display:block;font-family:var(--mono);font-size:26px;font-weight:500;color:var(--deep);line-height:1}
.stat span{font-size:12.4px;color:var(--muted)}

/* ---- ฝั่งรูป ---- */
.stagepic{position:relative;height:560px;max-width:500px;width:100%;margin-left:auto}
.blob{position:absolute;right:4%;top:6%;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFE3AE,var(--sun) 58%,var(--sun-deep));opacity:.9}
.ring{position:absolute;right:-2%;top:1%;width:88%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(22,32,43,.22)}
.device{position:absolute;left:50%;top:50%;width:66%;aspect-ratio:.74;transform:translate(-50%,-50%);
  border:9px solid var(--inkline);border-radius:40px;overflow:hidden;background:#141C24;
  box-shadow:10px 12px 0 rgba(22,32,43,.9),0 30px 60px rgba(11,33,74,.22)}
.device .pic{position:absolute;inset:0;background-image:var(--jo);background-size:cover;background-position:52% 4%}
.device::before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:34%;height:15px;
  border-radius:999px;background:var(--inkline);z-index:2}
.device::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,20,30,.78),transparent 36%),radial-gradient(60% 40% at 80% 4%,rgba(255,206,138,.22),transparent 64%)}
.device .sig{position:absolute;left:18px;right:18px;bottom:15px;z-index:3;color:#fff;text-align:right}
.device .sig b{display:block;font-size:17px;font-weight:500}
.device .sig span{font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.76);letter-spacing:.06em}

/* ---- การ์ด UI ลอย ---- */
.ui{position:absolute;z-index:4;background:#fff;border:1.5px solid var(--inkline);border-radius:16px;
  box-shadow:4px 4px 0 var(--inkline),0 16px 30px rgba(16,32,48,.12);padding:11px 14px;
  font-size:12.4px;color:var(--ink);line-height:1.35;
  opacity:0;translate:0 18px;animation:uiIn .7s cubic-bezier(.2,.8,.3,1) forwards;
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
@keyframes uiIn{to{opacity:1;translate:0 0}}
.ui .tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#8A5A17;
  background:#FFF4DE;border:1px solid #EFD2A0;border-radius:999px;padding:0 7px;margin-top:5px}
.ui small{display:block;font-size:11px;color:var(--muted)}
.ui .big{font-family:var(--mono);font-size:21px;font-weight:500;color:var(--deep);line-height:1.1}
.ui.u1{left:-4%;top:10%;display:flex;gap:11px;align-items:center;animation-delay:.25s}
.ui.u2{right:-5%;top:44%;animation-delay:.45s;min-width:168px}
.ui.u3{left:-8%;bottom:7%;display:flex;gap:10px;align-items:center;animation-delay:.65s;max-width:236px}
.ui.u4{right:2%;top:3%;display:flex;gap:9px;align-items:center;animation-delay:.85s;padding:8px 12px;border-radius:999px}
.donut{width:54px;height:54px;flex:none}
.donut .tr{fill:none;stroke:#EFE9DE;stroke-width:8}
.donut .vl{fill:none;stroke:var(--orange);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:150.8;stroke-dashoffset:150.8;transform:rotate(-90deg);transform-origin:50% 50%;
  animation:dn 1.3s .7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes dn{to{stroke-dashoffset:48.3}}
.bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:7px}
.bars i{flex:1;border-radius:4px 4px 1px 1px;background:#D8E4EE;transform-origin:bottom;transform:scaleY(0);
  animation:barUp .7s cubic-bezier(.2,.8,.3,1) forwards}
.bars i:nth-child(1){height:40%;animation-delay:.8s}
.bars i:nth-child(2){height:62%;animation-delay:.9s}
.bars i:nth-child(3){height:100%;background:var(--pop-green);animation-delay:1s}
@keyframes barUp{to{transform:scaleY(1)}}
.mascot{width:50px;height:50px;border-radius:14px;background:#EAF1F7;border:1.5px solid var(--inkline);
  flex:none;display:grid;place-items:end center;overflow:hidden}
.mascot img{height:56px;display:block;margin-bottom:-4px}
.ui.u3 b{font-weight:500;color:var(--deep);font-size:13px}
.ui.u3 em{display:block;font-style:normal;font-size:11.2px;color:var(--muted)}
.bell{width:24px;height:24px;border-radius:50%;background:var(--orange);display:grid;place-items:center;flex:none}
.bell svg{width:13px;height:13px}
.ui.u4 span{font-size:12px}
.ui.u4 span b{font-weight:500;color:var(--deep)}

@media (prefers-reduced-motion:reduce){
  .ui,.bars i,.donut .vl,.hero2 h1 .hl::after{animation:none!important;opacity:1;translate:none;transform:none}
  .donut .vl{stroke-dashoffset:48.3;transform:rotate(-90deg)}
  .hero2 h1 .hl::after{transform:skewX(-8deg)}
}

/* ---- แถบวิ่ง: เลื่อนตามการเลื่อนหน้า (ผู้ใช้เป็นคนขยับ) ---- */
.tick{background:var(--deep);color:#fff;overflow:hidden;padding:12px 0;position:relative;z-index:3;
  border-top:1.5px solid var(--inkline);border-bottom:1.5px solid var(--inkline)}
.tick .row{display:flex;gap:40px;white-space:nowrap;width:max-content;will-change:transform}
.tick i{font-style:normal;font-family:var(--mono);font-size:12.4px;letter-spacing:.06em;
  color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:9px}
.tick i::before{content:"✦";color:var(--sun);font-size:11px}

/* ============================================================
   v2 · ตู้เครื่องมือ = โซน "ของเล่น" สีสด (หลักการจากเทมเพลต WeDu)
   พื้นเหลืองเต็มจอ + ขอบเฉียง · การ์ดสไตล์สติกเกอร์ขอบหมึก + เงาแข็ง · ไอคอน SVG ขอบหนา · มาสคอต 5 สาย
   ============================================================ */
.sun{background:var(--sun);position:relative;padding:96px 60px 88px;
  clip-path:polygon(0 34px,100% 0,100% calc(100% - 34px),0 100%);margin:-10px 0}
.sun::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(22,32,43,.1) 1.1px,transparent 1.3px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.sun .inner{position:relative;z-index:1}
.sun .eyebrow{color:var(--inkline)}
.sun h2{color:var(--inkline)}
.sun .lede{color:#3B3322}
.sun .an{background:#FFF8EC}

.kit{gap:20px;margin-top:30px}
.cat{border:2px solid var(--inkline);box-shadow:6px 6px 0 var(--inkline);border-radius:22px;background:#fff}
.cat:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--inkline)}
.cathead{border-bottom:2px solid var(--inkline);padding:18px 20px 16px}
.cat.c1 .cathead{background:#2E7BB0}
.cat.c2 .cathead{background:var(--orange)}
.cat.c3 .cathead{background:var(--pop-green)}
.cathead .ic{width:54px;height:54px;border-radius:15px;background:#fff;border:2px solid var(--inkline);
  box-shadow:3px 3px 0 var(--inkline);margin-bottom:12px}
.cathead .ic svg{width:34px;height:34px;display:block}
.cathead p{color:rgba(255,255,255,.92);font-weight:300}
.cathead .n{background:#fff;color:var(--inkline);border:1.5px solid var(--inkline);font-weight:500}
.tl{border:1.5px solid #E2DCCF;background:#FFFDF8}
.tl .nm .rdy{border:1.5px solid var(--inkline);background:#DFF3E7;color:#1D5A3A}
.tl .nm .soonb{background:#EEF0F2;color:#4F5B66}
.catgo{font-weight:500;color:var(--inkline);border-bottom:2px solid var(--orange);padding:0 0 1px;justify-self:start}
.crew{display:flex;align-items:flex-end;gap:2px;margin-top:9px;height:52px}
.crew img{height:100%;display:block;transition:transform .25s cubic-bezier(.2,.8,.3,1);transform-origin:bottom center}
.crew img:hover{transform:translateY(-6px) scale(1.08)}

.circuit{border:2px solid var(--inkline);box-shadow:6px 6px 0 var(--inkline);border-radius:22px;
  margin-top:26px;position:relative;padding:20px 24px 18px 150px;min-height:150px}
.circuit .guide{position:absolute;left:18px;bottom:0;height:150px}
.step{border:1.5px solid var(--inkline);background:#fff;box-shadow:2px 2px 0 var(--inkline);font-weight:400}
.step em{background:var(--inkline)}
.step.last em{background:var(--orange)}
.arrow{color:var(--inkline);font-weight:500}

/* ============================================================
   v2 · แถบคำประกาศสีเต็มจอ + การ์ดคลิป (หลักการจากเทมเพลต Sculpty ช่วงสีน้ำเงิน)
   ============================================================ */
.statement{background:var(--navy);color:#fff;padding:84px 60px;position:relative;overflow:hidden}
.statement::before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.14)}
.statement::after{content:"";position:absolute;right:-40px;top:-80px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,210,127,.2),transparent 68%)}
.stgrid{position:relative;z-index:1;max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.statement .eyebrow{color:var(--sun)}
.statement .quote{font-size:clamp(28px,3.6vw,42px);font-weight:300;line-height:1.24;margin-top:14px;letter-spacing:-.015em}
.statement .quote b{font-weight:500;color:var(--sun)}
.statement .sub2{color:#B5CDE0;font-size:15px;font-weight:200;margin-top:14px;max-width:44ch}
.statement .sub2 b{color:#fff;font-weight:400}
.statement .acts{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn-w{background:#fff;color:var(--deep)}
.btn-w.btn-ink{border-color:#fff!important;box-shadow:3px 3px 0 var(--sun)!important}

.vid{background:#0A2436;border:2px solid #fff;border-radius:22px;box-shadow:8px 8px 0 var(--sun);overflow:hidden;cursor:pointer}
.vid .scr{aspect-ratio:16/9;position:relative;background-image:linear-gradient(0deg,rgba(9,34,53,.72),rgba(9,34,53,.1) 60%),var(--jo);
  background-size:cover;background-position:50% 18%}
.vid .play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:var(--orange);border:2px solid #fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .25s}
.vid:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.vid .play svg{width:22px;height:22px;margin-left:3px}
.vid .live{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  background:rgba(255,255,255,.92);color:var(--deep);border-radius:999px;padding:2px 10px}
.vid .ttl{position:absolute;left:16px;right:16px;bottom:34px;font-size:15px;font-weight:400;line-height:1.35}
.vid .bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:10px}
.vid .trk{flex:1;height:5px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden}
.vid .trk i{display:block;height:100%;width:0;background:var(--sun);border-radius:4px}
.vid .tm{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.88);white-space:nowrap}
.vid .list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14)}
.vid .list span{background:#0A2436;padding:10px 12px;font-size:11.8px;color:#B5CDE0;line-height:1.4}
.vid .list span b{display:block;font-family:var(--mono);font-size:10px;color:var(--sun);font-weight:400;letter-spacing:.06em}

@media(max-width:940px){
  .h2grid{grid-template-columns:1fr;padding:46px 26px 50px;gap:22px}
  .hero2::before{background:linear-gradient(180deg,var(--paper) 0%,rgba(251,248,242,.6) 60%,transparent)}
  .stagepic{margin:0 auto;height:500px}
  .sun{padding:84px 26px 92px}
  .statement{padding:64px 26px}
  .stgrid{grid-template-columns:1fr;gap:30px}
  .circuit{padding-left:24px}
  .circuit .guide{display:none}
}
@media(max-width:640px){
  .nav .cta .btn{white-space:nowrap;padding:7px 13px!important;font-size:12.5px!important}
  .brandmark .nm small{display:none}
  .hero2 h1{max-width:none}
  .h2grid{padding-top:26px}
  .stagepic{height:420px;order:-1}
  .device .sig{display:none}
  .device{width:70%;border-width:7px;border-radius:32px}
  .ui{font-size:11.4px;padding:8px 10px;border-radius:13px}
  .ui.u1{left:0;top:6%}
  .ui.u2{right:0;top:46%;min-width:0}
  .ui.u3{left:0;bottom:3%;max-width:210px}
  .ui.u4{display:none}
  .ui .big{font-size:17px}
  .donut{width:42px;height:42px}
  .mascot{width:42px;height:42px}
  .vid .list{grid-template-columns:1fr}
  .sun{clip-path:polygon(0 18px,100% 0,100% calc(100% - 18px),0 100%)}
}

/* ============================================================
   v2.1 · CRISP PASS — กฎ "flat" ชุดเดียวทั้งหน้า
   ไม่มีเงาเบลอ · ไม่มีไล่เฉด · ขอบหมึก 2px · เงาแข็งสีทึบ · สีสด
   ============================================================ */
:root{--sun:#F7C948; --sun-deep:#E5B22E; --pop-green:#1F9D5C; --pop-sky:#1E6FB0; --hard:4px 4px 0 var(--inkline)}

/* hero: พื้นเรียบ ไม่มีลายจุด */
.hero2{background:var(--paper)}
.hero2::before{display:none}
.pill{border-width:2px;box-shadow:var(--hard)}
.hero2 h1 .hl::after{border-radius:3px;height:.34em}
.btn-o.btn-ink,.btn-n.btn-ink{border-width:2px!important}
.btn-o{background:var(--orange)}
.stats{border-top:2px solid var(--inkline)}

/* ฉากหลังรูป: วงกลมสีทึบ + ขอบหมึก แทนวงฟุ้ง */
.blob{background:var(--sun);opacity:1;border:2px solid var(--inkline);right:2%;top:7%;width:76%}
.ring{display:none}
.spark{position:absolute;z-index:3;width:44px;height:44px}
.spark.s1{left:4%;top:44%}
.spark.s2{right:2%;bottom:14%;width:30px;height:30px}

/* กรอบรูป: ขอบหมึก + เงาแข็งสี navy ไม่เบลอ */
.device{border:8px solid var(--inkline);box-shadow:12px 12px 0 var(--navy)}
.device::after{background:linear-gradient(0deg,rgba(10,20,30,.7),transparent 30%)}
.device .sig{text-align:right}
.device .sig span{font-size:10px}

/* การ์ดลอย: เงาแข็งอย่างเดียว */
.ui{border:2px solid var(--inkline);box-shadow:var(--hard);border-radius:14px}
.ui small{color:#4A5561;font-weight:400}
.ui .tag{background:var(--sun);border:1.5px solid var(--inkline);color:var(--inkline);font-weight:500}
.ui.u3{left:-10%;bottom:-2%}
.donut .tr{stroke:#F1E6D0;stroke-width:9}
.donut .vl{stroke-width:9}
.bars i{border:1.5px solid var(--inkline);border-bottom-width:2px;border-radius:3px 3px 0 0}
.bars i:nth-child(1){background:#CFE3F3}
.bars i:nth-child(2){background:var(--pop-sky)}
.bars i:nth-child(3){background:var(--pop-green)}
.mascot{background:#CFE3F3;border-width:2px}
.bell{border:1.5px solid var(--inkline)}

/* แถบพิสูจน์ 4 ช่อง (แทนแถบวิ่ง) */
.proof{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
  border-top:2px solid var(--inkline);border-bottom:2px solid var(--inkline)}
.pc{display:flex;align-items:center;gap:13px;padding:18px 22px;border-right:2px solid var(--inkline);
  text-decoration:none;color:inherit;transition:background .15s}
.pc:last-child{border-right:none}
a.pc:hover{background:#FFF7DD}
.pi{width:46px;height:46px;flex:none;border-radius:12px;background:var(--paper);border:2px solid var(--inkline);
  display:grid;place-items:center;box-shadow:3px 3px 0 var(--inkline)}
.pi svg{width:30px;height:30px}
.pc b{display:block;font-size:15.5px;font-weight:500;color:var(--inkline);line-height:1.3}
.pc span{font-size:12.4px;color:#4A5561;font-weight:400}
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 60px;background:var(--sunk);
  border-bottom:2px solid var(--inkline);font-size:13px}
.partners .lb{color:#4A5561;margin-right:4px}
.partners .pt{font-family:var(--mono);font-weight:500;font-size:12.8px;color:var(--inkline);background:#fff;
  border:1.5px solid var(--inkline);border-radius:8px;padding:3px 11px}
.partners .pt em{font-style:normal;font-family:var(--sans);font-weight:300;color:#4A5561;margin-left:4px;font-size:12px}
.partners a{margin-left:auto;color:var(--navy);font-weight:500;text-decoration:none;border-bottom:2px solid var(--orange)}

/* โซนเครื่องมือ: เหลืองสด ไม่มีลายจุด · การ์ดคมขึ้น */
.sun::before{display:none}
.cat{border-radius:18px}
.cat.c1 .cathead{background:var(--pop-sky)}
.cat.c3 .cathead{background:var(--pop-green)}
.cathead p{color:#fff;opacity:.95;font-weight:400}
.tl{border:1.5px solid #CFC4AE;background:#fff;border-radius:12px}
.tl .q{color:#3C4652}
.tl .meta span{border:1.5px solid #CFC4AE;color:#3C4652}
.circuit{border-radius:18px}

/* แถบน้ำเงิน: ตัดวงเรืองแสง เหลือเส้นทึบ */
.statement::after{display:none}
.statement::before{border:2px solid rgba(255,255,255,.12)}
.vid .scr{background-image:linear-gradient(0deg,rgba(9,34,53,.78),transparent 55%),var(--jo)}

@media(max-width:940px){
  .proof{grid-template-columns:1fr 1fr}
  .pc:nth-child(2){border-right:none}
  .pc:nth-child(-n+2){border-bottom:2px solid var(--inkline)}
  .partners{padding:14px 26px}
}
@media(max-width:640px){
  .pc{padding:13px 14px;gap:10px}
  .pi{width:38px;height:38px}
  .pi svg{width:24px;height:24px}
  .pc b{font-size:13.6px}
  .pc span{font-size:11.2px}
  .partners a{margin-left:0}
  .ui.u3{left:0;bottom:1%}
  .spark{display:none}
}

/* ============================================================
   v2.2 · การ์ดเครื่องมือแบบภาพประกอบ (1 ใบ = 1 เครื่องมือ)
   ============================================================ */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.tcard{background:#fff;border:2px solid var(--inkline);border-radius:18px;box-shadow:6px 6px 0 var(--inkline);
  padding:12px;display:grid;align-content:start;text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
a.tcard:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--inkline)}
a.tcard:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--inkline)}
.ill{border:2px solid var(--inkline);border-radius:12px;overflow:hidden;aspect-ratio:16/10.5;background:#eee}
.ill svg{display:block;width:100%;height:100%}
.ill .fl{transition:transform .35s cubic-bezier(.2,.8,.3,1)}
a.tcard:hover .ill .fl{transform:translateY(-6px)}
a.tcard:hover .ill .f2{transform:translateY(-10px) rotate(-2deg);transform-box:fill-box;transform-origin:center}
a.tcard:hover .ill .f3{transform:translateY(-4px) scale(1.06);transform-box:fill-box;transform-origin:center}
.tb{padding:14px 6px 4px;display:grid;gap:6px}
.trow2{display:flex;align-items:center;gap:8px}
.tnum{width:26px;height:26px;border-radius:50%;background:var(--inkline);color:#fff;font-family:var(--mono);
  font-size:13px;font-weight:500;display:grid;place-items:center;flex:none}
.tcat{font-size:12px;font-weight:500;color:var(--inkline);border:1.5px solid var(--inkline);border-radius:999px;padding:1px 10px;background:var(--paper)}
.tb .rdy{margin-left:auto;font-family:var(--mono);font-size:10px;border:1.5px solid var(--inkline);border-radius:999px;
  padding:1px 8px;background:#DFF3E7;color:#1D5A3A}
.tb .rdy.soonb{background:#EEF0F2;color:#4F5B66}
.tb h3{font-size:19px;font-weight:500;color:var(--inkline);line-height:1.3;margin-top:2px}
.tb p{font-size:13.4px;color:#3C4652;line-height:1.6}
.tb .meta{display:flex;gap:6px;flex-wrap:wrap}
.tb .meta span{font-family:var(--mono);font-size:10.5px;color:#3C4652;border:1.5px solid #CFC4AE;border-radius:999px;padding:1px 9px}
.tb .go{justify-self:start;font-weight:500;color:var(--inkline);border-bottom:2.5px solid var(--orange);font-size:14px;margin-top:4px}
.tcard.guide{background:var(--navy);color:#fff;padding:24px 24px 22px;gap:12px;align-content:center}
.guide .gq{font-size:24px;font-weight:500;line-height:1.25}
.guide .gs{font-size:13.8px;color:#CFE0EE;font-weight:300}
.guide .gs b{color:var(--sun);font-weight:500}
.guide .gl{list-style:none;display:grid;gap:8px}
.guide .gl li{display:flex;align-items:center;gap:10px;font-size:14px;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.28);border-radius:10px;padding:6px 10px}
.guide .gl em{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--inkline);
  font-family:var(--mono);font-size:12px;font-weight:500;display:grid;place-items:center;flex:none}
.guide .gn{font-size:12px;color:#9FBDD6;line-height:1.6}
@media(max-width:940px){.tgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tgrid{grid-template-columns:1fr;gap:18px}}
@media (prefers-reduced-motion:reduce){.ill .fl,.tcard{transition:none}}

.ill img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.8,.3,1)}
a.tcard:hover .ill img{transform:scale(1.04)}

/* ไอคอนจาก Gemini (สติกเกอร์มีขอบ+เงาในตัว) */
.pi{background:none!important;border:none!important;box-shadow:none!important;width:52px!important;height:52px!important;border-radius:0!important}
.pi img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:640px){.pi{width:40px!important;height:40px!important}}

/* ใบไม้จาก Gemini โผล่หลังกรอบรูป — ผูก hero เข้ากับภาพการ์ดเครื่องมือ */
.leafs{position:absolute;display:block;pointer-events:none;height:auto}
.lf1{left:-3%;bottom:20%;width:36%;rotate:-18deg}
.lf2{right:-6%;top:-3%;width:38%;rotate:12deg}
@media(max-width:640px){.lf1{width:40%;left:-2%}.lf2{width:34%;right:-4%}}

/* จารย์โจการ์ตูน: การ์ดนำทาง + footer */
.tcard.guide{position:relative;overflow:hidden}
.guide .gn{padding-right:120px}
.guide .btn{position:relative;z-index:2}
.jopt{position:absolute;right:-12px;bottom:-6px;width:150px;height:180px;pointer-events:none;z-index:1}
.jopt::before{content:"";position:absolute;right:14px;bottom:26px;width:118px;height:118px;border-radius:50%;
  background:var(--sun);border:2px solid var(--inkline)}
.jopt img{position:relative;width:100%;height:100%;object-fit:contain;object-position:bottom right}
.foot{position:relative}
.jowave{position:absolute;right:60px;top:20px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.jowave img{height:150px;display:block;margin-right:14px}
.jowave .bub{background:#fff;color:var(--inkline);border:2px solid var(--inkline);border-radius:16px 16px 4px 16px;
  box-shadow:3px 3px 0 var(--sun);padding:7px 13px;font-size:13px;font-weight:400;white-space:nowrap}
.foot .top{padding-right:200px}
@media(max-width:940px){.jowave{position:static;margin:0 auto 18px;max-width:1040px}
  .jowave img{height:140px}.foot .top{padding-right:0}}
@media(max-width:640px){.jowave .bub{font-size:12px}}

/* v2.3 · hero โปร่งขึ้น — เหลือการ์ด 2 ใบ + ใบไม้ 1 กอ */
.ui.u1{left:-9%;top:16%}
.ui.u2{right:-8%;top:auto;bottom:14%}
.lf2{right:-4%;top:-1%;width:36%}
.device .sig{text-align:left!important}
@media(max-width:640px){.ui.u1{top:0;left:-2%}.ui.u2{bottom:4%;right:-2%}}

/* ============================================================
   v2.4 · ชั้นหนังสือ แบบ flat ขอบหมึก — เข้าชุดกับทั้งหน้า
   ============================================================ */
.chip{border:1.5px solid var(--inkline);color:var(--inkline);font-weight:400}
.chip:hover{background:#FFF7DD;border-color:var(--inkline)}
.chip.on{background:var(--inkline);border-color:var(--inkline);color:#fff}
.chip .dot{border:1.5px solid var(--inkline);width:10px;height:10px;opacity:1}
.libcount .meter{border:1.5px solid var(--inkline);background:#fff;height:9px}
.libcount .meter i{background:var(--pop-green)}
.libcount{color:var(--inkline);font-weight:500}
.case{background:#FFF4DC;border:2px solid var(--inkline);box-shadow:6px 6px 0 var(--inkline);border-radius:18px}
.case::before{display:none}
.board{height:12px;background:var(--navy);border:2px solid var(--inkline);box-shadow:none;border-radius:3px}
.board::after{display:none}
.bookend{background:var(--inkline);box-shadow:none;border-radius:3px 3px 0 0}
.bk{border:2px solid var(--inkline);border-bottom:none;box-shadow:none;border-radius:3px 3px 0 0}
.bk::before{height:auto;top:10px;bottom:auto;left:4px;right:4px;height:5px;border-radius:2px;background:rgba(255,255,255,.35)}
.bk::after{display:none}
.bk.done::before{background:rgba(255,255,255,.35);height:5px}
.bk .lab i{text-shadow:none;font-weight:500}
.bk .code{color:rgba(255,255,255,.9);font-weight:500}
.bk.lt .lab i,.bk.lt .code{color:var(--inkline)}
.bk.lt::before{background:rgba(22,32,43,.18)}
.bk:hover{transform:translateY(-12px)}
.bk.sel{transform:translateY(-16px);box-shadow:4px 0 0 var(--inkline)}
.bk.dim{opacity:.25;filter:none}
.slot{border:2px dashed var(--inkline);opacity:.45;background:transparent}
.slot span::before{color:var(--inkline)}
.bkcard{border:2px solid var(--inkline);box-shadow:5px 5px 0 var(--inkline);border-radius:16px}
.bkcard .cov{border:2px solid var(--inkline);box-shadow:3px 3px 0 var(--inkline)}
.bkcard .tags span{border:1.5px solid var(--inkline);color:var(--inkline)}
.bkcard .tags .free{background:#DFF3E7;color:#1D5A3A}
.bkcard .tags .paid{background:#FFE9C7;color:#7A4A0E}
.bkcard .tags .soon{background:#EEF0F2;color:#4F5B66}
.swipehint{color:var(--inkline)}

/* ============================================================
   v3 · NAVY-FIRST — กลับมาที่สีแบรนด์ (navy + ส้ม) · ความสดอยู่เฉพาะในภาพประกอบ
   กฎสี 60/30/10: navy/ครีม 60 · ขาว 30 · ส้ม 10 · เหลือง/เขียว = อยู่ในภาพประกอบเท่านั้น
   ============================================================ */
:root{--hard:0 10px 28px rgba(9,34,53,.12)}
/* HERO: พื้น navy เหมือน footer */
.hero2{background:radial-gradient(60% 70% at 85% 30%,rgba(232,137,26,.10),transparent 60%),var(--navy)!important;color:#fff}
.hero2 h1{color:#fff}
.hero2 h1 .dim{color:#9FBDD6}
.hero2 h1 .hl::after{background:var(--orange);height:.14em;bottom:.02em;border-radius:2px}
.hero2 .sub{color:#C7D8E6}
.hero2 .sub b{color:#fff}
.pill{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff;box-shadow:none}
.pill i{background:var(--orange)}
.hero2 .btn-o.btn-ink{border:none!important;box-shadow:0 10px 24px rgba(232,137,26,.35)!important}
.hero2 .btn-n.btn-ink{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)!important;box-shadow:none!important}
.hero2 .btn-n.btn-ink:hover{background:rgba(255,255,255,.08)}
.stats{border-top:1px solid rgba(255,255,255,.18)}
.stat b{color:#fff}
.stat span{color:#9FBDD6}
.device{border:none;border-radius:26px;box-shadow:0 30px 60px rgba(0,0,0,.35);width:72%}
.device::before{display:none}
.stagepic::before{content:"";position:absolute;left:50%;top:50%;width:72%;aspect-ratio:.74;transform:translate(-44%,-47%);
  border:2px solid var(--orange);border-radius:26px;opacity:.9}
.ui{border:none;box-shadow:0 18px 40px rgba(0,0,0,.28);border-radius:14px}
.ui .tag{background:#FFF1DF;border:none;color:#8A4A0E}
.ui.u2{right:-4%;bottom:12%}
.bars i{border:none}
.bars i:nth-child(2){background:#7FB0D8}
.bars i:nth-child(3){background:var(--orange)}
/* แถบ 4 ช่อง: ต่อจาก hero เป็น navy เข้ม ไอคอนเส้นบาง */
.proof{background:var(--deep);border:none;border-top:1px solid rgba(255,255,255,.1)}
.pc{border-right:1px solid rgba(255,255,255,.12)!important;border-bottom-color:rgba(255,255,255,.12)!important}
.pi{width:42px!important;height:42px!important;border-radius:50%!important;border:1.5px solid var(--orange)!important;
  color:var(--orange);background:transparent!important;box-shadow:none!important}
.pi svg{width:22px;height:22px}
.pc b{color:#fff}
.pc span{color:#9FBDD6}
a.pc:hover{background:rgba(255,255,255,.05)}
.partners{border-bottom:1px solid var(--line)}
.partners .pt{border:1px solid var(--line);font-weight:500}
.btn-ink{box-shadow:none!important}
/* โซนเครื่องมือ: พื้นครีม หัวข้อ navy · สีสันมาจากภาพประกอบ */
.sun{background:var(--paper);clip-path:none;margin:0;padding:84px 60px}
.sun .eyebrow{color:var(--orange)}
.sun h2{color:var(--deep)}
.sun .lede{color:var(--body)}
.tcard{border:1px solid var(--line);box-shadow:var(--hard);border-radius:18px}
a.tcard:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(9,34,53,.16)}
.ill{border:none;border-radius:12px}
.tcat,.tb .rdy{border-width:1px}
.tnum{background:var(--navy)}
.tb .go{border-bottom-color:var(--orange);color:var(--navy)}
.tcard.guide{border:none}
.jopt::before{background:var(--orange);border:none}
/* ชั้นหนังสือ/การ์ด: ลดเงาแข็ง */
.case{box-shadow:var(--hard);border:1px solid #E6DCC6}
.bkcard{box-shadow:var(--hard);border:1px solid var(--line)}
.bkcard .cov{box-shadow:none}
.chip{border-width:1px}
@media(max-width:940px){.sun{padding:64px 26px}}
@media(max-width:640px){.stagepic::before{width:76%}.device{width:76%}}

/* v3.1 · feedback 24 ก.ย. */
.device .sig b{font-size:15px}
.device .sig sup{font-size:.6em}
.device .sig span{font-size:11px!important;display:block!important;color:rgba(255,255,255,.8)}
.ui.u1{left:auto!important;right:-8%!important;top:4%!important;display:flex;gap:11px;align-items:center}
.ui.u1 b{display:block;font-weight:500;color:var(--deep)}
.ui.u1 .tag{margin-top:4px}
.ui.u2{bottom:24%!important}
.donut .tr{stroke:#EEF2F6}
/* ตัวเลขแบบหมุน (odometer) */
.stat b.odo{display:flex;overflow:hidden;height:1.05em;line-height:1.05;margin-bottom:3px}
.odo .col{display:flex;flex-direction:column;transition:transform 1.6s cubic-bezier(.16,.9,.24,1)}
.odo i{font-style:normal}
.odo .col i{height:1.05em;display:block}
.odo .plus{color:var(--orange);margin-left:2px;align-self:flex-start}
.stat .num{display:flex;align-items:baseline}
/* ประสบการณ์ในแถวพาร์ทเนอร์ */
.partners .xp{background:var(--navy);color:#fff;border-radius:999px;padding:4px 14px;font-size:12.8px;margin-right:6px}
.partners .xp b{color:var(--orange);font-family:var(--mono);font-weight:500;margin-right:4px}
/* การ์ดคลิปรูปนั่ง */
.vid .scr{background-size:cover!important;background-position:right center!important}
.vid .play{left:26%}
.vid .ttl small{display:block;font-size:12.5px;color:#C7D8E6;font-weight:300;margin-top:2px}
/* ประตูไป Zero to Sixty */
.z2door{background:#092235;color:#fff;padding:78px 60px 56px;position:relative;overflow:hidden}
.z2door::before{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,137,26,.18),transparent 65%)}
.zin{position:relative;z-index:1;max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.zeb{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.z2door h3{font-size:clamp(28px,3.4vw,38px);font-weight:400;line-height:1.25;margin-top:10px}
.z2door h3 b{font-weight:500;color:var(--orange)}
.ztag{font-size:17px;color:#C7D8E6;margin-top:10px}
.zpts{list-style:none;margin-top:18px;display:grid;gap:9px}
.zpts li{display:flex;align-items:center;gap:10px;font-size:15px;color:#E6EEF5}
.zpts i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--orange);flex:none;position:relative}
.zpts i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--orange);border-width:0 2px 2px 0;transform:rotate(40deg)}
.zacts{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.zbtn{font-size:16px;padding:14px 28px;box-shadow:0 12px 28px rgba(232,137,26,.35)}
.zfree{font-size:12.6px;color:#8FA8BD;max-width:28ch}
.zr{text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:28px 22px;background:rgba(255,255,255,.03)}
.znum{font-family:var(--mono);font-weight:500;font-size:clamp(56px,7vw,84px);line-height:1;display:flex;justify-content:center;align-items:center;gap:14px}
.znum span:first-child{color:#fff}
.znum span:last-child{color:var(--orange)}
.znum em{font-style:normal;font-size:.5em;color:#8FA8BD}
.zlbl{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#8FA8BD;margin-top:10px}
.zlic{display:inline-block;margin-top:18px;font-size:11.5px;color:#E8D3B0;border:1px solid rgba(232,185,120,.45);border-radius:12px;padding:6px 12px;line-height:1.5}
.zdis{position:relative;z-index:1;max-width:1040px;margin:28px auto 0;font-size:11.4px;color:#7E94A8;line-height:1.7;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
@media(max-width:940px){.z2door{padding:60px 26px 44px}.zin{grid-template-columns:1fr}}
@media(max-width:640px){.ui.u1{right:-2%!important;top:0!important}.vid .play{left:50%}}
.statement .quote b{color:var(--orange)}
.statement .eyebrow{color:var(--sand)}
.vid{border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.vid .trk i{background:var(--orange)}
.vid .list span b{color:var(--sand)}
.btn-w.btn-ink{box-shadow:none!important;border-color:#fff!important}

/* v3.2 · ประตู Z2S เป็นการ์ดเข้มบนพื้นครีม — แยกจาก footer ชัด */
.z2door{background:var(--paper)!important;padding:76px 60px 84px!important;overflow:visible}
.z2door::before{display:none}
.zbox{position:relative;max-width:1120px;margin:0 auto;background:#092235;color:#fff;border-radius:28px;
  padding:56px 56px 30px;overflow:hidden;box-shadow:0 30px 60px rgba(9,34,53,.22)}
.zbox::before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,137,26,.2),transparent 65%);pointer-events:none}
.zbox::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--orange)}
.zbox .zin{max-width:none}
.zbox .zdis{max-width:none}
.z2door .an{margin-top:18px!important}
@media(max-width:940px){.z2door{padding:56px 18px 64px!important}.zbox{padding:40px 26px 24px;border-radius:22px}}


/* ================= v3.6 · แบบ v3.2 ทุกอย่าง + พื้นหลังไล่เฉด + ภาพห้องบรรยาย (เน้นผู้ฟังและจารย์บนเวที) ================= */
.hero2{background:url(/assets/img/bg-hero.webp) center bottom/cover no-repeat,var(--navy)!important}
.device .pic{background-position:50% 6%!important;image-rendering:auto}
.foot{background:url(/assets/img/bg-footer.webp) center bottom/cover no-repeat,var(--night)!important;padding-bottom:0!important}
.foot .top{grid-template-columns:1.3fr 1fr 1fr 250px!important;align-items:end;margin-bottom:0!important;padding-right:0!important}
.foot .top>div:not(.jowave){align-self:start;padding-top:8px}
.jowave{position:relative!important;right:auto!important;top:auto!important;margin:0!important;align-items:flex-end}
.jowave img{height:300px!important;margin:0!important;filter:drop-shadow(0 20px 30px rgba(3,14,26,.55))}
.jowave .bub{position:absolute;right:70px;top:-38px;border:none!important;box-shadow:0 10px 24px rgba(3,14,26,.35)!important;color:var(--deep)!important}
.foot .disc{max-width:none!important;margin:0 -60px!important;padding:18px 60px 22px!important;background:rgba(4,16,28,.78);border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:940px){
  .foot .top{grid-template-columns:1fr!important}
  .jowave{height:260px}.jowave img{height:260px!important;position:absolute;right:50%;transform:translateX(50%);bottom:0}
  .jowave .bub{right:auto;left:0;top:10px}
  .foot .disc{margin:0 -26px!important;padding:18px 26px 22px!important}
  .hero2{background:linear-gradient(180deg,rgba(9,34,53,.1),rgba(9,34,53,.35) 45%,rgba(9,34,53,.5)),url(/assets/img/bg-hero.webp) 55% bottom/cover no-repeat,var(--navy)!important}
}


/* ================= v3.7 ================= */
.flogo{height:50px;width:auto;display:block}
.foot .bm .flogo-w{height:54px;width:auto;display:block}
/* แถวพาร์ทเนอร์: บรรทัดเดียว เลื่อนซ้าย-ขวาได้ */
.partners{flex-wrap:nowrap!important;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:70px!important}
.partners>*{flex:none}
.partners a{margin-left:18px!important}
/* ลดที่ว่างก่อนตู้เครื่องมือ */
.sun{padding-top:46px!important}
/* วงกลมไอคอนในแถบ 4 ช่อง ใหญ่ขึ้น */
.pi{width:58px!important;height:58px!important;border-width:2px!important}
.pi svg{width:28px!important;height:28px!important}
.pc{gap:16px!important;padding:20px 22px!important}
.pc b{font-size:16.5px!important}
.pc span{font-size:12.8px!important}
@media(max-width:640px){.flogo{height:34px}.pi{width:46px!important;height:46px!important}.pi svg{width:22px!important;height:22px!important}.pc{padding:14px 14px!important;gap:11px!important}.pc b{font-size:14px!important}}


/* ================= v3.8 · ป้ายบทย้ายเข้าแถบเมนู + เส้นความคืบหน้าการอ่าน ================= */
.mark{display:none!important}
html,body{overflow-x:clip}
.nav{position:sticky!important;top:0;z-index:50}
.navmark{margin-left:auto;display:flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:13px;color:var(--deep);white-space:nowrap;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
.navmark.on{opacity:1;transform:none}
.navmark i{width:6px;height:22px;border-radius:3px;background:var(--orange);transition:background .3s}
.navmark b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--gold)}
.nav .cta{margin-left:16px!important}
.navprog{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--orange);border-radius:0 3px 3px 0;transition:width .1s linear}
@media(max-width:940px){.navmark{display:none}}


/* ================= v3.9 · หัวข้อหมวดใหญ่ขึ้น + แยก section ชัด ================= */
.eyebrow{font-family:var(--sans)!important;font-size:16px!important;font-weight:500!important;letter-spacing:.06em!important;gap:12px!important}
.eyebrow::before{width:34px!important;height:3px!important;opacity:1!important}
.sun{background:#EEF3F8!important;clip-path:none!important;padding-top:64px!important;padding-bottom:64px!important;
  border-top:1px solid #DCE6EF;border-bottom:1px solid #DCE6EF}
.sun .eyebrow{color:var(--orange)!important}
#library{padding-top:64px!important;background:var(--paper)!important}
@media(max-width:760px){#case{overflow-x:auto;-webkit-overflow-scrolling:touch}#case .shelf{min-width:760px}}
@media(max-width:640px){.eyebrow{font-size:14px!important}.sun{padding-top:44px!important;padding-bottom:44px!important}#library{padding-top:44px!important}}


/* v3.10 */
.vid .ttl.vq b.qo{color:var(--orange);font-weight:500}
.vid .ttl.vq small sup{font-size:.7em}
.vid .live{max-width:calc(100% - 52px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ================= v3.10 · YT section: quote บนรูป · ไม่มีแถบคลิปล่าสุด ================= */
.vid .scr{background-image:linear-gradient(90deg,rgba(9,34,53,.72) 0%,rgba(9,34,53,.35) 38%,transparent 58%),linear-gradient(0deg,rgba(9,34,53,.55),transparent 40%),url(/assets/img/jo-intro-clip.webp)!important;background-size:cover!important;background-position:right center!important}
.vid .ttl.vq{left:28px;right:auto;bottom:auto;top:56%;transform:translateY(-50%);max-width:44%;
  font-size:clamp(16px,1.55vw,20px);font-weight:400;line-height:1.38;color:#fff;letter-spacing:-.005em;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.vid .ttl.vq .qm{display:block;font-style:normal;font-family:Georgia,serif;font-size:42px;line-height:.5;color:var(--orange);margin-bottom:6px}
.vid .ttl.vq em{display:block;font-style:normal;font-weight:300;font-size:.74em;color:#D6E3EE;margin-top:10px;line-height:1.5;white-space:nowrap}
.vid .ttl.vq small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--sand,#E9C98F);margin-top:12px}
.vid .play{left:auto!important;right:18px;top:auto;bottom:18px;transform:none;width:52px;height:52px}
.vid .bar{display:none}
.vid .live{left:26px;top:18px}
@media(max-width:640px){
  .vid .scr{aspect-ratio:4/3!important;background-position:72% center!important}
  .vid .ttl.vq{left:16px;max-width:52%;font-size:15px}
  .vid .ttl.vq .qm{font-size:38px;margin-bottom:4px}
  .vid .ttl.vq em{font-size:12px;margin-top:6px}
  .vid .ttl.vq small{font-size:10px;margin-top:6px}
  .vid .live{left:16px;top:12px}
  .vid .play{width:44px;height:44px;right:12px;bottom:12px}
}


/* ================= v3.13 · ชั้นหนังสือ: ชื่อบนสันใหญ่ขึ้น · คำบอกวิธีใช้ · ไม่มีสถานะ ================= */
.bk .lab i{font-size:14.5px!important;font-weight:500!important;letter-spacing:.01em!important}
.bk .code{font-size:11.5px!important}
.bk .pin{display:none!important}
.libcount .meter{display:none!important}
.shelfhint{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-size:14px;color:var(--ink,#16202B)}
.shelfhint svg{width:20px;height:20px;color:var(--orange);flex:none}
.shelfhint b{font-weight:500;color:var(--orange)}
.shelfhint .mb{display:none}
.swipehint{display:none!important}
@media(max-width:760px){.shelfhint{font-size:13px;align-items:flex-start;line-height:1.5}.shelfhint .dk{display:none}.shelfhint .mb{display:inline}.bk .lab i{font-size:13px!important}}
.bkcard .act .btn:not(.btn-o){border:1.5px solid var(--inkline,#16202B);background:#fff;color:var(--ink,#16202B)}


/* ================= v3.14 ================= */
.z2door .eyebrow.zeb{display:inline-flex;align-items:center;text-transform:none;color:var(--orange)!important;margin-bottom:6px}
/* quote: หนักเบาสลับ + เล็กลงนิด */
.vid .ttl.vq{font-size:clamp(15px,1.38vw,18px)!important;font-weight:300!important;line-height:1.45!important;color:#DCE7F1!important}
.vid .ttl.vq b.qo{font-weight:500!important;font-size:1.12em}
.vid .ttl.vq .qk{font-weight:400;color:#fff}
.vid .ttl.vq .qm{font-size:36px!important;margin-bottom:4px!important}
@media(max-width:640px){.vid .ttl.vq{font-size:14px!important}}

.libcount{display:none!important}

/* รูปจารย์โจใน footer มี width/height ใน HTML (กันหน้าเด้ง) — CSS กำหนดแค่ความสูง จึงให้กว้างตามสัดส่วน */
.jowave img{width:auto}

/* footer: แถบข้อความกฎหมายอยู่กลาง กว้างเท่าคอลัมน์ footer (v1.3) */
.foot .disc{text-align:center;padding-left:max(60px,calc((100% - 1040px)/2))!important;padding-right:max(60px,calc((100% - 1040px)/2))!important;line-height:1.75}
@media(max-width:640px){.foot .disc{padding-left:22px!important;padding-right:22px!important}}

/* ---------- แถบขอความยินยอมคุกกี้ (PDPA) — สร้างโดย /assets/js/consent.js ---------- */
.ckbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;width:min(760px,calc(100% - 32px));
  display:flex;align-items:center;gap:18px;padding:16px 18px 16px 22px;border-radius:var(--r-m);
  background:var(--deep);color:#C9DBEA;box-shadow:0 18px 50px rgba(3,14,26,.4);border:1px solid rgba(255,255,255,.1);
  font-size:13.5px;line-height:1.65;animation:ckin .35s cubic-bezier(.2,.8,.3,1)}
.ckbar[hidden]{display:none}
.ckbar .ckt{flex:1;margin:0}
.ckbar .ckt b{color:#fff;font-weight:500}
.ckbar .cka{display:flex;gap:10px;flex:none}
.ckbar .btn{padding:9px 20px;font-size:14px}
.ckbar .ckno{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ckbar .ckno:hover{background:rgba(255,255,255,.08)}
@keyframes ckin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:640px){
  .ckbar{flex-direction:column;align-items:stretch;gap:12px;bottom:12px;padding:16px}
  .ckbar .cka .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ckbar{animation:none}}
.foot .cklink{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.foot .cklink:hover{color:#fff}
.ckbar .ckt a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
/* footer: ลิงก์ในแถบข้อความกฎหมาย (นโยบายความเป็นส่วนตัว) อยู่บรรทัดเดียวกับ © — กฎ .foot a{display:block} ทำให้ตกบรรทัดและเหลือ "·" ค้าง */
.foot .disc a{display:inline;padding:0}
.foot .disc a,.foot .cklink{white-space:nowrap}