/* theme-catalog — สไตล์ชีตกลางของหน้าตัวอย่างทั้ง 50 แบบ
   โทเคนสี (--bg --ink ...) ฝังเป็น :root ของแต่ละหน้า (คำนวณจาก derive() ฝั่ง Python)
   และถูกเขียนทับตอนผู้ใช้เลือกโทนสีอื่น (12 โทนคำนวณไว้ล่วงหน้าแล้ว ฝังเป็น JSON ในหน้า)

   CSS จัดเป็น "โมดูลต่อแกน" ไม่ใช่ต่อแบบ:
      body[data-nav]   x10   ทรงเมนู        (คลาส .nv-*)
      body[data-hero]  x14   หัวหน้าเว็บ     (คลาส .h-*)
      body[data-lay]   x10   ภาษาเลย์เอาต์   (คลาส .lay .*)
      shape x5               มุม/เส้น/เงา ผ่าน --radius --bw --shadow
   50 แบบ = การประกอบโมดูลเหล่านี้ + คู่ฟอนต์ + ลำดับ section

   กติกาไทย: heading line-height >= 1.45 · ไม่มีตัวหนังสือเล็กกว่า 12px · ไม่ใช้ mono กับไทย */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ffb);
  font-size:calc(16px * var(--scale));line-height:1.75;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ffd);line-height:1.45;margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:calc(2.45rem * var(--scale));line-height:1.42}
h2{font-size:calc(1.72rem * var(--scale))}
h3{font-size:calc(1.1rem * var(--scale))}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
.wrap{width:min(1160px,92vw);margin:0 auto}
.sec{padding:76px 0}
.sec:nth-of-type(even){background:var(--surf)}
.sechead{max-width:64ch;margin-bottom:34px}
.eyebrow{display:inline-block;font-size:.84rem;font-weight:700;letter-spacing:.14em;
  color:var(--brand);margin-bottom:10px}
.lead{color:var(--mut);margin-top:12px;font-size:1.02rem}
.fine{font-size:.86rem;color:var(--mut);margin-top:14px}
.meta{color:var(--muts);font-size:.93rem}
.sec:nth-of-type(even) .meta{color:var(--mut)}
.nb{white-space:nowrap}

/* ---------------------------------------------------------------- ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;
  border-radius:var(--radius);font-family:var(--ffd);font-weight:700;font-size:.98rem;
  text-decoration:none;border:var(--bw) solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease}
.btn.primary{background:var(--brandsolid);color:var(--onbrand);border-color:var(--brandsolid)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);
  border-width:max(1px,var(--bw))}
.btn-sm{padding:9px 16px;font-size:.9rem}
.btn:hover{transform:translateY(-2px)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .btn.ghost{color:var(--heroink);border-color:var(--heroline)}

/* ---------------------------------------------------------------- บล็อกภาพตัวอย่าง (CSS ล้วน) */
.art,.ph,.hart,.htile,.sart,.tart,.showart,.vart,.hstrip{position:relative;overflow:hidden;
  border-radius:var(--radius);background:linear-gradient(140deg,var(--tint),var(--tint2))}
.ph{aspect-ratio:4/3}
.a1{background:linear-gradient(140deg,var(--brandsolid),var(--accsolid))}
.a2{background:radial-gradient(92% 82% at 28% 18%,var(--accsolid),var(--brandsolid))}
.a3{background:linear-gradient(35deg,var(--surf2),var(--brandsolid))}
.a4{background:conic-gradient(from 210deg at 60% 40%,var(--brandsolid),var(--accsolid),var(--brandsolid))}
.a5{background:linear-gradient(200deg,var(--accsolid),var(--surf2))}
.a6{background:linear-gradient(120deg,var(--brandsolid) 42%,var(--surf2) 42%)}
.ph::after,.hart::after{content:"";position:absolute;inset:14%;border:2px solid rgba(255,255,255,.32);
  border-radius:inherit}
.avatar{aspect-ratio:1/1;border-radius:999px;width:96px}

/* ---------------------------------------------------------------- เมนู 10 แบบ */
.nv{position:relative;z-index:40;background:var(--surf);border-bottom:1px solid var(--line)}
.nvin{display:flex;align-items:center;gap:22px;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ffd);font-weight:700;
  font-size:1.06rem;color:var(--inks);text-decoration:none}
.bmark{width:32px;height:32px;border-radius:calc(var(--radius) * .6);background:var(--brandsolid);
  color:var(--onbrand);display:grid;place-items:center;font-size:.92rem;font-weight:700;flex:none}
.nlinks{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nlinks a{text-decoration:none;color:var(--muts);font-size:.95rem;font-weight:500}
.nlinks a:hover{color:var(--brand)}
.nv .btn{padding:11px 20px}

.nv-bar{position:sticky;top:0}
.nv-center .nvin{justify-content:center;gap:26px}
.nv-center .nleft,.nv-center .nright{display:flex;gap:18px;flex:1}
.nv-center .nright{justify-content:flex-end}
.nv-center .nleft a,.nv-center .nright a{text-decoration:none;color:var(--muts);font-size:.95rem}
.nv-center .brand{font-size:1.24rem}

.nv-masthead{text-align:center;border-bottom:3px double var(--line);background:var(--bg)}
.nv-masthead .mtop{display:flex;justify-content:space-between;padding:10px 0;font-size:.84rem;
  color:var(--mut);border-bottom:1px solid var(--line)}
.nv-masthead .mname{padding:22px 0 16px;display:flex;justify-content:center}
.nv-masthead .brand{font-size:clamp(1.7rem,4.4vw,2.6rem);letter-spacing:.02em}
.nv-masthead .mname .bmark{width:44px;height:44px;font-size:1.2rem}
.nv-masthead .mlinks{display:flex;gap:18px;align-items:center;justify-content:center;
  padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.nv-masthead .nlinks{margin-left:0}

.nv-rail{position:fixed;inset:0 auto 0 0;width:212px;border-right:1px solid var(--line);
  border-bottom:0;background:var(--surf)}
.nv-rail .railin{display:flex;flex-direction:column;gap:26px;height:100%;padding:24px 20px}
.nv-rail .nlinks{flex-direction:column;margin-left:0;gap:12px}
.nv-rail .railfoot{margin-top:auto}
body[data-nav="rail"]{padding-left:212px}

.nv-pill{background:transparent;border:0;position:sticky;top:14px;padding:14px 0 0}
.nv-pill .pillin{width:min(1080px,94vw);margin:0 auto;display:flex;align-items:center;gap:20px;
  padding:10px 14px 10px 18px;background:var(--surf);border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--shadow)}
.nv-pill .nlinks{margin-left:auto}

.nv-mega{border-bottom:2px solid var(--line)}
.nv-mega .megapanel{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 0 22px}
.nv-mega .mcol b{display:block;font-family:var(--ffd);margin-bottom:8px;color:var(--inks)}
.nv-mega .mcol li{color:var(--muts);font-size:.9rem;padding:3px 0}

.nv-mini .nvin{justify-content:space-between}
.nv-mini .burger{display:grid;gap:5px;background:none;border:var(--bw) solid var(--line);
  border-radius:var(--radius);padding:11px 12px;cursor:pointer}
.nv-mini .burger span{display:block;width:20px;height:2px;background:var(--inks)}
.nv-mini .minilinks{display:none;padding-bottom:14px}
.nv-mini .nmini{margin-left:0;gap:16px}

.nv-duo .utility{background:var(--surf2);border-bottom:1px solid var(--line)}
.nv-duo .uin{display:flex;gap:18px;align-items:center;padding:8px 0;font-size:.86rem;
  color:var(--mut);flex-wrap:wrap}
.nv-duo .ugap{margin-left:auto}

.nv-dock{position:sticky;top:0}
.dockbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;padding:10px 14px;
  background:var(--surf);border-top:1px solid var(--line)}
.dockbar .dk{flex:1;text-align:center;padding:12px;border-radius:var(--radius);
  border:var(--bw) solid var(--line);text-decoration:none;font-family:var(--ffd);font-weight:700;
  color:var(--inks);font-size:.95rem}
.dockbar .dk.solid{background:var(--brandsolid);color:var(--onbrand);border-color:var(--brandsolid)}
body[data-nav="dock"]{padding-bottom:74px}

.nv-inset{background:transparent;border:0;margin-bottom:34px}
.nv-inset .nvin{padding:12px 16px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- hero 14 แบบ */
.hero{background:var(--herobg);color:var(--heroink);padding:92px 0 86px;position:relative;
  overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:var(--heroink);max-width:19ch}
.heyebrow{display:inline-block;font-size:.86rem;font-weight:700;letter-spacing:.16em;
  color:var(--heromut);margin-bottom:16px}
.hero .hlead{color:var(--heromut);font-size:1.08rem;max-width:54ch;margin-top:18px}
.hmeta{display:flex;gap:30px;flex-wrap:wrap;margin-top:40px;padding-top:24px;
  border-top:1px solid var(--heroline)}
.hmeta div b{display:block;font-family:var(--ffd);font-size:1.5rem;color:var(--heroink);
  line-height:1.45}
.hmeta div span{font-size:.92rem;color:var(--heromut)}
.hmeta.hmini{margin-top:26px;gap:20px}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.hart{min-height:300px;border:1px solid var(--heroline)}

.h-center .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.h-center h1{max-width:22ch}
.h-center .hlead{margin-left:auto;margin-right:auto}
.h-center .hmeta{justify-content:center}

.h-cover{padding:0}
.h-cover .hbg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,var(--brandsolid),var(--accsolid))}
.h-cover .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.64) 78%)}
.h-cover .wrap{min-height:min(78vh,620px);display:flex;align-items:flex-end;padding:70px 0 60px}
.h-cover h1,.h-cover .heyebrow{color:#fff}
.h-cover .hlead{color:rgba(255,255,255,.92)}
.h-cover .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}

.h-bento .hbento{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:150px;gap:16px}
.h-bento .htile-copy{grid-column:span 2;grid-row:span 2;padding:26px;background:var(--surf);
  border-radius:var(--radius);color:var(--inks);border:var(--bw) solid var(--line)}
.h-bento .htile-copy h1{color:var(--inks);font-size:calc(1.9rem * var(--scale))}
.h-bento .htile-copy .hlead{color:var(--muts)}
.h-bento .htile-copy .heyebrow{color:var(--brand)}
.h-bento .htile-copy .btn.ghost{color:var(--inks);border-color:var(--line)}
.h-bento .htile:nth-of-type(3){grid-row:span 2}
.h-bento .hbento-meta{grid-column:1 / -1;margin-top:6px;border-top:1px solid var(--heroline)}

.h-magcover .rule{display:block;height:4px;background:var(--heroink);margin-bottom:20px}
.h-magcover h1{font-size:clamp(2.4rem,6.2vw,4.4rem);max-width:16ch;letter-spacing:-.02em}
.h-magcover .magrow{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;margin-top:26px;
  border-top:1px solid var(--heroline);padding-top:22px}
.h-magcover .kicks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.h-magcover .kick b{display:block;font-family:var(--ffd);font-size:1.3rem;color:var(--heroink)}
.h-magcover .kick span{font-size:.9rem;color:var(--heromut)}

.h-slides .track{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;margin-top:34px;
  align-items:end}
.h-slides .slide{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--heroline)}
.h-slides .sart{height:230px;border-radius:0}
.h-slides .slide.on .sart{height:280px}
.h-slides .sc{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));color:#fff}
.h-slides .sc b{display:block;font-family:var(--ffd)}
.h-slides .sc span{font-size:.9rem;color:rgba(255,255,255,.9)}
.h-slides .dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.h-slides .dots i{width:9px;height:9px;border-radius:999px;background:var(--heroline);display:block}
.h-slides .dots i.on{background:var(--heroacc);width:26px}

.h-stack .stackwrap{position:relative;height:330px}
.h-stack .scard{position:absolute;width:66%;border-radius:var(--radius);overflow:hidden;
  border:var(--bw) solid var(--heroline);background:var(--surf);box-shadow:var(--shadow)}
.h-stack .scard .sart{height:180px;border-radius:0}
.h-stack .scard b{display:block;padding:12px 14px;font-family:var(--ffd);color:var(--inks);
  font-size:.98rem}
.h-stack .s0{left:0;top:0;transform:rotate(-4deg)}
.h-stack .s1{left:18%;top:56px;transform:rotate(2deg)}
.h-stack .s2{left:34%;top:112px;transform:rotate(6deg)}

.h-checklist .hform{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);color:var(--inks)}
.h-checklist .hform b{display:block;font-family:var(--ffd);margin-bottom:14px}
.h-checklist .fld{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--muts);margin-bottom:10px;font-size:.95rem;background:var(--bg)}
.h-checklist .checks{display:grid;gap:10px;margin-top:22px}
.h-checklist .checks li{display:flex;gap:10px;align-items:flex-start;color:var(--heroink)}
.h-checklist .ck{width:20px;height:20px;flex:none;margin-top:4px;color:var(--heroacc)}
.h-checklist .hform .btn{width:100%}

.h-statband .bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding-bottom:34px;border-bottom:1px solid var(--heroline);margin-bottom:34px}
.h-statband .bigstats b{display:block;font-family:var(--ffd);line-height:1.3;
  font-size:clamp(2.2rem,6vw,4rem);color:var(--heroink)}
.h-statband .bigstats span{color:var(--heromut);font-size:.95rem}
.h-statband .hcopy h1{font-size:calc(2rem * var(--scale))}

.h-showcase .showbox{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;
  margin-top:34px;background:var(--surf);border:var(--bw) solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.h-showcase .showart{height:280px}
.h-showcase .showmeta b{display:block;font-family:var(--ffd);font-size:1.3rem;color:var(--inks)}
.h-showcase .showmeta span{color:var(--muts);display:block;margin-top:6px}
.h-showcase .pricechip{display:inline-block;margin-top:14px;padding:8px 16px;
  background:var(--brandsolid);color:var(--onbrand);border-radius:999px;font-weight:700}
.h-showcase .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.h-showcase .th{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px;text-align:center}
.h-showcase .tart{height:78px}
.h-showcase .th span{display:block;margin-top:6px;font-size:.86rem;color:var(--muts);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.h-search .searchbar{display:flex;gap:10px;margin-top:30px;background:var(--surf);
  border:var(--bw) solid var(--line);border-radius:var(--radius);padding:10px;
  box-shadow:var(--shadow);align-items:center;flex-wrap:wrap}
.h-search .sfield{flex:1;min-width:200px;padding:12px 14px;color:var(--muts)}
.h-search .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.h-search .chip{padding:8px 16px;border-radius:999px;border:1px solid var(--heroline);
  color:var(--heroink);font-size:.92rem}

.h-video .vframe{margin:34px 0 0;position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--heroline)}
.h-video .vart{aspect-ratio:16/9}
.h-video .play{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;
  border-radius:999px;background:var(--heroacc);display:block}
.h-video .play::after{content:"";position:absolute;left:30px;top:24px;border-style:solid;
  border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.h-video figcaption{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;
  background:var(--surf);color:var(--inks);font-family:var(--ffd);font-size:.95rem}
.h-video .vtime{color:var(--muts)}

.h-type .bigword{font-family:var(--ffd);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(3rem,13vw,9rem);color:var(--heroink);opacity:.16;margin-bottom:-2vw;
  white-space:nowrap;overflow:hidden}
.h-type h1{font-size:clamp(2rem,4.4vw,3rem);max-width:24ch}

.h-marquee .mq{margin-top:36px;overflow:hidden;border-top:1px solid var(--heroline);
  border-bottom:1px solid var(--heroline);padding:12px 0}
.h-marquee .hstrips{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.h-marquee .hstrip{height:120px}
.mq{overflow:hidden}
.mqrow{display:flex;gap:34px;white-space:nowrap;animation:mq 26s linear infinite;
  font-family:var(--ffd);font-weight:700;font-size:1.1rem}
.sec-marquee{padding:26px 0;background:var(--brandsolid);color:var(--onbrand)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mqrow{animation:none}}

/* ---------------------------------------------------------------- ภาษาเลย์เอาต์ 10 แบบ */
.card{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.sec:nth-of-type(even) .card{background:var(--bg)}
.cbody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.price{margin-top:auto;padding-top:10px;font-family:var(--ffd);font-weight:700;color:var(--brand)}

.cardgrid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:22px}
.masonry{columns:var(--cols,3);column-gap:22px}
.masonry .card{break-inside:avoid;margin-bottom:22px}
.masonry .card:nth-child(3n) .ph{aspect-ratio:3/4}
.masonry .card:nth-child(3n+2) .ph{aspect-ratio:1/1}
.stripwrap{overflow-x:auto;padding-bottom:12px}
.stripwrap .strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,74vw);gap:18px}
.bentogrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:16px}
.bentogrid .card:nth-child(1){grid-column:span 2;grid-row:span 2}
.bentogrid .card:nth-child(4){grid-column:span 2}
.bentogrid .card .ph{aspect-ratio:auto;flex:1;min-height:96px}
.overlapwrap{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.overlapwrap .card:nth-child(1){grid-column:1/4}
.overlapwrap .card:nth-child(2){grid-column:4/7;margin-top:44px}
.overlapwrap .card:nth-child(3){grid-column:2/5;margin-top:-28px;z-index:2}
.overlapwrap .card:nth-child(4){grid-column:5/7}
.overlapwrap .card:nth-child(5){grid-column:1/3}
.overlapwrap .card:nth-child(6){grid-column:3/7;margin-top:-18px}

.rowlist .row{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.rowlist .row:first-child{border-top:1px solid var(--line)}
.rowlist .rn{font-family:var(--ffd);color:var(--brand);font-weight:700}
.rowlist .rmain p{color:var(--muts);font-size:.95rem}
.sec:nth-of-type(even) .rowlist .rmain p{color:var(--mut)}
.rp{font-family:var(--ffd);font-weight:700;color:var(--brand);white-space:nowrap}

.tablewrap{overflow-x:auto}
.ptable{min-width:560px}
.ptable th,.ptable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:.98rem}
.ptable thead th{font-family:var(--ffd);color:var(--inks);border-bottom:2px solid var(--line)}
.ptable td{color:var(--muts)}
.ptable tbody tr:nth-child(odd){background:var(--surf2)}
.ptable th[scope="row"]{color:var(--inks);font-family:var(--ffd)}

.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:var(--line)}
.timeline .tl{position:relative;padding:0 0 26px}
.timeline .dot{position:absolute;left:-30px;top:8px;width:20px;height:20px;border-radius:999px;
  background:var(--brandsolid);border:4px solid var(--bg)}
.timeline .tl p{color:var(--muts);margin-top:4px}
.sec:nth-of-type(even) .timeline .dot{border-color:var(--surf)}

.altlist{display:grid;gap:34px}
.altrow{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.altrow.rev .ph{order:2}
.altrow .altcopy p{color:var(--muts);margin-top:8px}
.altrow .rp{display:inline-block;margin-top:12px}

.acclist{display:grid;gap:12px}
.acc{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:16px 20px}
.sec:nth-of-type(even) .acc{background:var(--bg)}
.acc summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer;
  font-family:var(--ffd);font-weight:700;line-height:1.5}
.acc p{margin-top:10px;color:var(--muts)}

/* ---------------------------------------------------------------- section ตาม role */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow)}
.sec:nth-of-type(even) .feat{background:var(--bg)}
.feat h3{margin:16px 0 8px}
.feat p{color:var(--muts);font-size:.96rem}
.ficon{display:inline-grid;place-items:center;width:48px;height:48px;
  border-radius:calc(var(--radius) * .8);background:var(--tint);color:var(--brand)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stat b{display:block;font-family:var(--ffd);font-size:clamp(1.9rem,4vw,2.7rem);color:var(--brand);
  line-height:1.45}
.stat span{color:var(--mut);font-size:.95rem}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.plan{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.sec:nth-of-type(even) .plan{background:var(--bg)}
.plan.featured{border-color:var(--brandsolid);border-width:max(2px,var(--bw))}
.pnum{font-family:var(--ffd);font-size:1.7rem;font-weight:700;color:var(--brand);margin:8px 0 14px}
.plan .btn{margin-top:auto}

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gcell{margin:0;position:relative;border-radius:var(--radius);overflow:hidden}
.gcell .ph{aspect-ratio:1/1}
.gcell.g0,.gcell.g3{grid-column:span 2}
.gcell.g0 .ph,.gcell.g3 .ph{aspect-ratio:2/1}
.gcell figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;color:#fff;
  font-size:.92rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.posts.masonry{columns:3;display:block}
.posts.masonry .post{break-inside:avoid;margin-bottom:22px}
.posts.strip{grid-auto-flow:column;grid-auto-columns:min(320px,78vw);overflow-x:auto}
.post{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.sec:nth-of-type(even) .post{background:var(--bg)}
.postrows li{display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.postrows .more{color:var(--brand);font-weight:700;white-space:nowrap}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.member{display:flex;flex-direction:column;align-items:center;gap:8px}
.member .avatar{margin-bottom:8px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:24px 22px}
.sec:nth-of-type(even) .step{background:var(--bg)}
.step .sn{display:inline-block;font-family:var(--ffd);font-weight:700;color:var(--brand);
  margin-bottom:10px}
.step p{color:var(--muts);font-size:.95rem;margin-top:6px}

.quote{margin:0;max-width:72ch}
.quote blockquote{margin:0;font-family:var(--ffd);font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.6}
.quote figcaption{margin-top:18px;color:var(--mut);font-size:.95rem}

.qas{display:grid;gap:12px;max-width:82ch}
.qa{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.sec:nth-of-type(even) .qa{background:var(--bg)}
.qa summary{font-family:var(--ffd);font-weight:700;cursor:pointer;line-height:1.5}
.qa p{margin-top:10px;color:var(--muts)}

.logolead{color:var(--mut);font-size:.94rem;margin-bottom:18px}
.logos{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center}
.logo{font-family:var(--ffd);font-weight:700;font-size:1.05rem;color:var(--mut);letter-spacing:.04em}

.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.clist li{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
.cmap{min-height:260px;border-radius:var(--radius);border:1px solid var(--line);
  background:repeating-linear-gradient(0deg,var(--surf2) 0 26px,transparent 26px 27px),
    repeating-linear-gradient(90deg,var(--surf2) 0 26px,transparent 26px 27px),var(--surf)}

.nlbox{background:var(--surf);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:36px;box-shadow:var(--shadow);max-width:70ch}
.sec:nth-of-type(even) .nlbox{background:var(--bg)}
.nlform{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.nlform .fld{flex:1;min-width:220px;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--radius);color:var(--muts);background:var(--bg)}

.sec-cta{background:var(--herobg);color:var(--heroink)}
.ctabox h2{color:var(--heroink);max-width:24ch}
.ctabox p{color:var(--heromut);margin-top:12px;max-width:60ch}
.ctabox .fine{color:var(--heromut)}
.ctabox .btn.ghost{color:var(--heroink);border-color:var(--heroline)}

.foot{background:var(--surf2);border-top:1px solid var(--line);padding:56px 0 30px}
.footin{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}
.footin p{color:var(--mut);margin-top:12px;font-size:.95rem;max-width:46ch}
.footin h4{margin-bottom:10px;font-size:1rem}
.footin li{color:var(--mut);padding:4px 0;font-size:.95rem}
.copy{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--mut);
  font-size:.9rem}

/* ---------------------------------------------------------------- แถบเลือกโทนสี / หมวดธุรกิจ */
.ppbar{position:fixed;left:14px;bottom:14px;z-index:90;font-family:var(--ffb)}
.ppbtn{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;
  background:var(--brandsolid);color:var(--onbrand);border:0;cursor:pointer;font-weight:700;
  font-family:var(--ffd);font-size:.94rem;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.pppanel{position:absolute;left:0;bottom:56px;width:min(340px,86vw);background:var(--surf);
  color:var(--inks);border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.pppanel h4{font-size:1rem;margin-bottom:8px}
.pppanel .sub{font-size:.88rem;color:var(--muts);margin:0 0 12px}
.ppswatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
.ppsw{aspect-ratio:1/1;border-radius:10px;border:2px solid transparent;cursor:pointer;padding:0}
.ppsw[aria-pressed="true"]{border-color:var(--inks);outline:2px solid var(--surf)}
.ppsel{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--inks);font-family:var(--ffb);font-size:.95rem}
.ppfoot{margin-top:12px;font-size:.86rem;color:var(--muts)}
.backbar{position:fixed;right:14px;bottom:14px;z-index:90;background:var(--brandsolid);
  color:var(--onbrand);text-decoration:none;padding:11px 16px;border-radius:999px;
  font-size:.92rem;font-weight:700;font-family:var(--ffd);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
body[data-nav="dock"] .ppbar,body[data-nav="dock"] .backbar{bottom:78px}

/* ---------------------------------------------------------------- มือถือ / แท็บเล็ต */
@media(max-width:980px){
  .hgrid,.h-magcover .magrow,.contactgrid,.altrow{grid-template-columns:1fr}
  .altrow.rev .ph{order:0}
  .h-bento .hbento{grid-template-columns:1fr 1fr;grid-auto-rows:130px}
  .h-bento .htile-copy{grid-column:1 / -1;grid-row:auto}
  .bentogrid{grid-template-columns:repeat(2,1fr)}
  .overlapwrap{grid-template-columns:1fr}
  .overlapwrap .card{grid-column:1 / -1 !important;margin-top:0 !important}
  .steps,.feats,.team,.plans,.posts{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .masonry,.posts.masonry{columns:2}
  .footin{grid-template-columns:1fr 1fr}
  .h-showcase .showbox{grid-template-columns:1fr}
  .h-slides .track{grid-template-columns:1fr}
  .h-stack .stackwrap{height:290px}
  .h-stack .scard{width:74%}
  .cardgrid{grid-template-columns:repeat(min(var(--cols,3),2),1fr)}
}
@media(max-width:760px){
  .nv-rail{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nv-rail .railin{flex-direction:row;align-items:center;gap:14px;padding:14px 4vw;flex-wrap:wrap}
  .nv-rail .nlinks{flex-direction:row;margin-left:auto}
  .nv-rail .railfoot{margin-top:0}
  body[data-nav="rail"]{padding-left:0}
  .nv-mega .megapanel{grid-template-columns:1fr 1fr;gap:12px}
  .nv-mini .minilinks{display:block}
  .nv-center .nvin{flex-wrap:wrap;justify-content:center}
  .nv-center .nleft,.nv-center .nright{flex:1 1 auto;justify-content:center}
  .hero{padding:64px 0 60px}
  .sec{padding:56px 0}
  .cardgrid,.steps,.feats,.team,.plans,.posts,.stats,.h-statband .bigstats,.h-magcover .kicks,
  .h-showcase .thumbs,.footin,.bentogrid{grid-template-columns:1fr}
  .bentogrid .card:nth-child(1),.bentogrid .card:nth-child(4){grid-column:span 1;grid-row:auto}
  .gal{grid-template-columns:1fr}
  .gcell.g0,.gcell.g3{grid-column:span 1}
  .gcell.g0 .ph,.gcell.g3 .ph{aspect-ratio:4/3}
  .masonry,.posts.masonry{columns:1}
  .h-bento .hbento{grid-template-columns:1fr;grid-auto-rows:auto}
  .h-bento .htile{min-height:120px}
  .rowlist .row{grid-template-columns:34px 1fr;row-gap:6px}
  .rowlist .rp{grid-column:2}
  .nv-masthead .mtop{flex-direction:column;gap:2px;text-align:center}
  /* ตาราง -> การ์ดต่อแถว (หัวคอลัมน์มาเป็น data-th) จะได้ไม่ต้องเลื่อนแนวนอนบนมือถือ */
  .ptable{min-width:0}
  .ptable thead{position:absolute;left:-9999px}
  .ptable tr{display:block;border:var(--bw) solid var(--line);border-radius:var(--radius);
    padding:10px 14px;margin-bottom:12px;background:var(--surf)}
  .ptable tbody tr:nth-child(odd){background:var(--surf)}
  .ptable td,.ptable th{display:block;border:0;padding:6px 0}
  .ptable td::before{content:attr(data-th);display:block;font-size:.86rem;font-weight:700;
    color:var(--brand)}
}