/* ============================================================
   Mint Medical Technology — Design System (MINT Logo Tone · Teal × Navy)
   สีอ้างอิงตาม MINT Corporate Logo Usage Guide (ทางการ, ใช้ร่วมกันทุกโปรเจค MINT):
   Mint Green Pantone 0921U #71E4D1 · Navy Pantone 662U #41538F · Black #231F20 · White #FFFFFF.
   --mint = มินต์/เขียว (โทนเข้มพอใช้ตัวอักษรขาวได้ ปรับเข้มจาก #71E4D1 ทางการเพื่อผ่าน AA contrast)
   เป็นสีหลักของปุ่ม/ลิงก์/ไอคอน/badge ทั่วเว็บ, --pine = กรมท่าเข้ม (แขนบน/ซ้าย/ขวา) ใช้กับพื้นหลัง section เข้ม
   + ตัวอักษรหัวข้อ (--ink), --brand-teal = มินต์สดตามค่าทางการ #71E4D1 ใช้ป็อปบนพื้นกรมท่าเข้ม, --brand-blue = ฟ้าสด ใช้แยกหมวดหมู่
   ============================================================ */
:root{
  /* พื้นหลัง — โทนกระดาษเย็น (คุมโทนตามกรมท่าของโลโก้ แทน Cloud Dancer เดิม) */
  --cd-bg:#F5F7FB; --cd-surface:#FFFFFF; --cd-surface-2:#EBEDF4; --cd-line:#D7DAE5; --white:#fff;
  /* ตัวอักษร — เทาอมกรมท่า */
  --ink:#1D2235; --ink-body:#49526E; --ink-muted:#717A98;
  /* มินต์/เขียว — สีหลักจากโลโก้ MINT (แขนล่าง) ใช้กับปุ่ม/ลิงก์/ไอคอน/badge/สถานะ active ทั่วเว็บ */
  --mint:#2A6F67; --mint-600:#215953; --mint-700:#194540; --mint-tint:#D9F2EF; --mint-ink:#12302D;
  /* กรมท่า/น้ำเงินเข้ม — สีรองจากโลโก้ (แขนบน/ซ้าย/ขวา) ใช้กับ section พื้นเข้ม + แยกหมวดหมู่ (เดิมชื่อ pine/สนเข้ม) */
  --pine:#121729; --pine-600:#253158;
  /* Amber — สำรองไว้เฉพาะจุดเตือน/ไฮไลต์แยกหมวดที่ 3 ไม่ใช่สีแบรนด์หลัก */
  --amber:#D99A2B; --amber-tint:#F7EED8;
  /* MINT brand mark: brand-blue = ฟ้าสดใช้แยกหมวดคู่กับกรมท่า, brand-teal = Mint Green ทางการตาม Logo Usage Guide */
  --brand-blue:#395BC6; --brand-blue-tint:#E3E8F7; --brand-blue-ink:#1C2A54;
  --brand-teal:#71E4D1; --brand-teal-600:#23BAA1; --brand-teal-700:#1B8F7C;
  /* feedback */
  --danger:#C1553F;
  --focus:0 0 0 3px rgba(42,111,103,.35);
  /* spacing */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:5rem;
  /* radius / shadow / layout */
  --radius-sm:8px; --radius:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(18,23,41,.08);
  --shadow-md:0 6px 18px rgba(18,23,41,.10);
  --shadow-lg:0 20px 50px rgba(18,23,41,.16);
  --maxw:1200px; --nav-h:66px; --ease:cubic-bezier(.22,1,.36,1);
  /* Typography ตาม MINT Corporate Logo Usage Guide: Helvetica Neue = ฟอนต์ระบบหลัก (ไม่มีบน Google Fonts ใช้ system stack),
     ตกทอดไปที่ Sarabun/Noto Sans Lao อัตโนมัติสำหรับตัวอักษรไทย/ลาวที่ Helvetica Neue ไม่มี */
  --font-head:'Helvetica Neue',Helvetica,Arial,'Noto Sans Lao','Sarabun',system-ui,sans-serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,'Sarabun','Noto Sans Lao',system-ui,sans-serif;
}
html[lang="lo"]{
  --font-head:'Noto Sans Lao','Helvetica Neue',Helvetica,Arial,'Sarabun',sans-serif;
  --font-body:'Noto Sans Lao','Helvetica Neue',Helvetica,Arial,'Sarabun',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--ink-body); background:var(--cd-bg);
  font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; margin:0;
  overflow-x:hidden;
}
html[lang="lo"] body{line-height:1.85}
/* ไทย/ลาว ไม่มีช่องว่างระหว่างคำ — ใช้ break-word (ตัดเฉพาะเมื่อจำเป็นจริง)
   ไม่ใช้ anywhere เพราะจะตัดกลางคำทำให้อ่านยาก */
h1,h2,h3,h4,p,.lead,.eyebrow,.card-title,.p-name,.p-tag,blockquote,figcaption,dd,li{
  overflow-wrap:break-word; word-break:normal; line-break:auto;
}
/* จัดความยาวบรรทัดให้สมดุล ไม่ให้บรรทัดสุดท้ายเหลือคำเดียว */
h1,h2,h3,h4,.eyebrow,.card-title{text-wrap:balance}
p,.lead,.svc-tag,.dep-use,.fk-lead{text-wrap:pretty}
/* จำกัดความกว้างข้อความยาว ให้อ่านสบายตา (~70–80 ตัวอักษรต่อบรรทัด) */
.section-head .lead{max-width:52rem}
.section-head.center .lead{margin-inline:auto}
h1,h2,h3,h4,.h-font{font-family:var(--font-head); color:var(--ink); line-height:1.2; font-weight:700; letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.25rem); line-height:1.14}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.14rem,2vw,1.4rem); font-weight:600}
p{margin:0 0 var(--sp-4)}
a{color:var(--mint-600); text-decoration:none}
a:hover{color:var(--mint-700)}
img{max-width:100%; height:auto}
strong,b{color:var(--ink)}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--radius-sm)}
.skip-link{position:absolute; left:-9999px; top:0; z-index:2000; background:var(--pine); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0; color:#fff}

/* ---- layout helpers ---- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
.section{padding-block:var(--sp-8)}
.section--band{background:var(--cd-surface-2)}
.section--pine{background:var(--pine); color:#E7ECFA}
.section--pine h2,.section--pine h3{color:#fff}
.section-head{max-width:46rem; margin-bottom:var(--sp-6)}
.section-head.center{margin-inline:auto; text-align:center}
.eyebrow{font-family:var(--font-head); font-size:.78rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mint-600); margin-bottom:var(--sp-3); display:block}
.section--pine .eyebrow{color:#97D8D0}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--ink-body); line-height:1.65}
.muted{color:var(--ink-muted)}
.mt-cta{margin-top:var(--sp-5)}

/* ---- buttons ---- */
.btn-mint,.btn-outline-mint,.btn-ghost{
  --bs-btn-focus-box-shadow:var(--focus);
  font-family:var(--font-head); font-weight:600; border-radius:var(--radius-pill);
  padding:.7rem 1.5rem; display:inline-flex; align-items:center; gap:.5rem; border:2px solid transparent;
  transition:transform .12s var(--ease), background .15s, box-shadow .15s, color .15s; line-height:1;
}
.btn-mint{background:var(--mint); color:#fff; box-shadow:var(--shadow-sm)}
.btn-mint:hover{background:var(--mint-600); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-outline-mint{background:transparent; color:var(--mint-700); border-color:var(--mint)}
.btn-outline-mint:hover{background:var(--mint-tint); color:var(--mint-700)}
.section--pine .btn-outline-mint{color:#E7ECFA; border-color:var(--brand-teal-600)}
.section--pine .btn-outline-mint:hover{background:rgba(255,255,255,.08); color:#fff}
.btn-ghost{background:transparent; color:var(--ink-body); padding-inline:.6rem}
.btn-ghost:hover{color:var(--mint-700)}
.btn-cta-lg{padding:.9rem 1.9rem; font-size:1.05rem}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center}

/* ---- cards ---- */
.card-elev{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm); height:100%;
  transition:transform .16s var(--ease), box-shadow .16s}
.card-elev:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.icon-badge{width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--mint-tint); color:var(--mint-700); font-size:1.4rem; flex:none}
.icon-badge.amber{background:var(--amber-tint); color:#9A6A15}

main section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
html.js img[loading="lazy"]{opacity:0; transition:opacity .4s var(--ease)}
html.js img[loading="lazy"].loaded{opacity:1}

/* ---- reveal on scroll ---- */
html.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.js .reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1 !important; transform:none !important; transition:none}
  .btn-mint:hover,.card-elev:hover{transform:none}
}

/* ---- announce bar ---- */
.di-announce{background:var(--pine); color:#E7ECFA; font-size:.86rem; text-align:center;
  padding:.5rem 1rem; position:relative}
.di-announce a{color:#fff; font-weight:600; text-decoration:underline}
.di-announce .close{position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  background:none; border:0; color:#8E99C2; font-size:1rem; line-height:1; cursor:pointer}

/* ---- navbar ---- */
.di-nav{position:sticky; top:0; z-index:1030; background:rgba(245,247,251,.82);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid transparent; transition:box-shadow .2s, border-color .2s, background .2s}
.di-nav.is-scrolled{background:rgba(245,247,251,.95); box-shadow:var(--shadow-sm); border-color:var(--cd-line)}
.di-nav > .wrap:first-of-type{display:flex; align-items:center; gap:var(--sp-3); min-height:var(--nav-h)}
/* wrap ตัวที่สองห่อเมนูมือถือเท่านั้น — ต้องไม่กินความสูง (เดิมทำให้ hero ถูกดันลง 66px) */
.di-nav > .wrap:last-of-type{min-height:0}
.di-brand{display:flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:700;
  color:var(--ink); font-size:1.06rem; min-width:0; flex:0 1 auto}
.di-brand span{white-space:nowrap}
.di-brand img{width:auto; flex:none}
.di-mark{width:30px; height:30px}
.di-logo-full{height:42px; margin-block:-4px; min-width:118px; object-fit:contain; object-position:left center}
.foot-brand .di-mark{width:28px; height:28px}
@media (max-width:600px){
  .di-brand span{overflow:hidden; text-overflow:ellipsis; font-size:.92rem}
  .di-logo-full{height:36px}
}
.di-nav-links{display:none; align-items:center; gap:.1rem; margin-inline-start:auto; list-style:none; margin:0; padding:0; flex:none}
.di-nav-links a{font-family:var(--font-head); font-weight:500; font-size:.92rem; color:var(--ink-body);
  padding:.5rem .6rem; border-radius:var(--radius-pill); position:relative; white-space:nowrap; overflow-wrap:normal}
.di-nav-links a:hover{color:var(--mint-700); background:var(--mint-tint)}
.di-nav-links a.active{color:var(--mint-700)}
.di-nav-links a.active::after{content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:2px;
  background:var(--mint); border-radius:2px}
.di-nav-actions{display:flex; align-items:center; gap:.5rem; margin-inline-start:auto}
.di-nav-links + .di-nav-actions{margin-inline-start:var(--sp-3)}
.di-lang{display:flex; gap:2px; background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:var(--radius-pill); padding:2px}
.di-lang a{font-family:var(--font-head); font-size:.78rem; font-weight:600; color:var(--ink-muted);
  padding:.28rem .55rem; border-radius:var(--radius-pill); line-height:1}
.di-lang a.on{background:var(--mint); color:#fff}
.di-nav .btn-mint{padding:.55rem 1.1rem; font-size:.92rem; white-space:nowrap}
.di-toggler{display:inline-flex; background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:12px; width:42px; height:38px; align-items:center; justify-content:center; font-size:1.3rem; color:var(--ink); cursor:pointer}
.di-mobile{display:none; padding:var(--sp-3) 0 var(--sp-4)}
.di-mobile.open{display:block}
.di-mobile a{display:block; font-family:var(--font-head); font-weight:500; color:var(--ink-body);
  padding:.7rem .3rem; border-bottom:1px solid var(--cd-line)}
.di-mobile .btn-mint{display:flex; justify-content:center; margin-top:var(--sp-3)}

/* ---- hero ---- */
.hero{padding-block:var(--sp-5) var(--sp-7); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:auto 0 auto 0; top:-30%; height:75%; pointer-events:none;
  background:radial-gradient(60% 60% at 72% 60%, rgba(42,111,103,.13), transparent 70%)}
.hero .wrap{position:relative}
.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-7); align-items:center}
.hero-grid > *{min-width:0}
.hero h1{margin:0 0 var(--sp-4); text-wrap:balance; word-break:keep-all}
.hero h1 .wsn{white-space:nowrap}
/* บรรทัดรองตัวเล็กใต้หัวข้อหลัก (heading คั่นด้วย "|") */
.hero h1 .hero-h1-sub{display:block; margin-top:.4rem; font-size:.42em; font-weight:600;
  line-height:1.35; letter-spacing:normal; color:var(--ink-body); text-wrap:balance}
.hero .lead{margin-bottom:var(--sp-5)}

/* ป้ายนำทางตามกลุ่มเป้าหมาย */
.hero-pills{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:var(--sp-5)}
.hpill{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-head); font-weight:600;
  font-size:.92rem; padding:.6rem 1rem; border-radius:var(--radius-pill); text-decoration:none;
  border:1.5px solid var(--c); color:var(--c); background:color-mix(in srgb,var(--c) 8%,white);
  transition:background .15s, transform .12s var(--ease)}
.hpill:hover{background:color-mix(in srgb,var(--c) 16%,white); color:var(--c); transform:translateY(-1px)}
.hpill-go{font-size:.8rem; opacity:.6; transition:transform .15s var(--ease)}
.hpill:hover .hpill-go{transform:translateX(3px)}
.hpill-hospital{--c:var(--mint-700)}
.hpill-sme{--c:var(--brand-blue)}

.hero-chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-4)}
.chip{display:inline-flex; align-items:center; gap:.4rem; background:var(--cd-surface);
  border:1px solid var(--cd-line); color:var(--ink-body); border-radius:var(--radius-pill);
  padding:.4rem .85rem; font-size:.86rem; font-weight:500}
.chip i{color:var(--mint-600)}
.hero-trust{margin-top:var(--sp-5); font-size:.88rem; color:var(--ink-muted); display:flex;
  align-items:flex-start; gap:.5rem; max-width:34rem; line-height:1.6}
.hero-trust i{flex:none; color:var(--mint-600); font-size:1rem; margin-top:.15rem}
.hero-visual{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid var(--cd-line); background:var(--cd-surface)}
.hero-visual img{display:block; width:100%}

/* ---- product page: slide หน้าจอจริง (แทนภาพนิ่งเดียว เมื่อผลิตภัณฑ์มีภาพหน้าจอสะสมไว้) ---- */
@media (min-width:768px){ .grid-2.p-hero-grid{grid-template-columns:.8fr 1.2fr} }
.p-slider-track{position:relative; width:100%; aspect-ratio:16/10; max-height:36rem; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--cd-line); box-shadow:var(--shadow-lg); background:var(--cd-surface-2)}
.p-slide{position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none}
.p-slide.is-active{opacity:1; pointer-events:auto}
.p-slide img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.p-slider-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px;
  border-radius:50%; border:0; background:rgba(18,23,41,.55); color:#fff; display:grid; place-items:center;
  cursor:pointer; font-size:1rem; transition:background .15s}
.p-slider-nav:hover{background:rgba(18,23,41,.78)}
.p-slider-nav.prev{left:.6rem} .p-slider-nav.next{right:.6rem}
.p-slider-dots{display:flex; justify-content:center; gap:.4rem; margin-top:.7rem}
.p-slider-dot{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--cd-line); cursor:pointer}
.p-slider-dot.is-active{background:var(--mint)}
.p-slider-cap{margin:.6rem 0 0; font-size:.86rem; color:var(--ink-muted); text-align:center; min-height:1.3em}

/* ---- hero stage: หน้าจอจริงในกรอบเบราว์เซอร์ + การ์ดลอย ---- */
.hero-stage{position:relative; padding-bottom:3.6rem}
.hv-frame{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--cd-line);
  background:var(--white); box-shadow:var(--shadow-lg)}
.hv-bar{display:flex; align-items:center; gap:.35rem; padding:.55rem .75rem;
  background:var(--cd-surface-2); border-bottom:1px solid var(--cd-line)}
.hv-bar i{width:9px; height:9px; border-radius:50%; background:var(--cd-line)}
.hv-bar i:first-child{background:#D9A2A2} .hv-bar i:nth-child(2){background:#E4C88E}
.hv-bar i:nth-child(3){background:#9FCFBE}
.hv-shot{position:relative; max-height:26rem; overflow:hidden}
.hv-shot img{display:block; width:100%; height:auto}
/* ไล่สีจางที่ขอบล่าง ให้ภาพที่ถูกครอบดูจบอย่างตั้งใจ ไม่ใช่ตัดกลางคัน */
.hv-shot::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5.5rem; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white))}

/* ภาพที่สอง — ซ้อนหน้ามุมล่างขวา ให้เห็นทั้งความครบ (ภาพหลัก) และรายละเอียดจริง (ภาพซ้อน) */
/* จอแคบซ่อนไว้ก่อน (พื้นที่ไม่พอ) แล้วค่อยแสดงตั้งแต่ 768px ขึ้นไป */
.hv-frame2{display:none; position:absolute; right:-.6rem; bottom:1.6rem; width:58%; z-index:3;
  box-shadow:0 18px 44px rgba(18,23,41,.26); border-color:var(--cd-line)}
.hv-frame2 .hv-bar{padding:.4rem .6rem}
.hv-frame2 .hv-bar i{width:7px; height:7px}
.hv-shot2{position:relative; max-height:12rem; overflow:hidden}
.hv-shot2 img{display:block; width:100%; height:auto}
.hv-shot2::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3rem; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white))}

.hv-float{position:absolute; left:.9rem; right:auto; bottom:0; z-index:4;
  background:var(--white); border:1px solid var(--cd-line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:.7rem .9rem; display:flex; flex-direction:column; gap:.45rem;
  max-width:calc(100% - 1.8rem)}
.hv-float-t{font-size:.76rem; font-weight:600; color:var(--ink-muted); line-height:1.3}
.hv-icons{display:flex; flex-wrap:wrap; gap:.35rem}
.hv-ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb,var(--c) 14%,white); color:var(--c); font-size:.92rem;
  transition:transform .14s var(--ease)}
.hv-ic:hover{transform:translateY(-2px); color:var(--c)}
.hv-float-n{font-size:.8rem; color:var(--ink-body)}
.hv-float-n b{font-family:var(--font-head); color:var(--ink)}

.hv-badge{position:absolute; top:.8rem; right:.8rem; z-index:2; display:inline-flex; align-items:center; gap:.35rem;
  background:var(--pine); color:#E7ECFA; font-size:.74rem; font-weight:600;
  padding:.32rem .7rem; border-radius:var(--radius-pill); box-shadow:var(--shadow-md)}
.hv-badge i{color:var(--brand-teal)}

/* ---- deployments (ใช้งานจริงอยู่ที่ไหน) ---- */
.dep{background:var(--cd-surface); border:1px solid var(--cd-line); border-left:4px solid var(--c,var(--mint));
  border-radius:var(--radius); padding:var(--sp-5); box-shadow:var(--shadow-sm); height:100%}
.dep-mint{--c:var(--mint)} .dep-blue{--c:var(--brand-blue)} .dep-pine{--c:var(--pine)}
.dep-head{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.7rem}
.dep-ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem;
  background:color-mix(in srgb,var(--c) 13%,white); color:var(--c); margin-bottom:.7rem; flex:none}
.dep-head .dep-ic{margin-bottom:0}
.dep-logo{flex:none; display:flex; align-items:center; justify-content:center;
  height:44px; max-width:124px; padding:.35rem .6rem;
  background:var(--white); border:1px solid var(--cd-line); border-radius:10px; box-shadow:var(--shadow-sm)}
.dep-logo img{display:block; width:auto; height:auto; max-height:30px; max-width:108px; object-fit:contain}
.dep-org{font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1rem; line-height:1.3}
.dep-meta{font-size:.78rem; color:var(--c); font-weight:600; margin-top:.15rem}
.dep-use{font-size:.88rem; color:var(--ink-body); margin:.55rem 0 0}

/* ---- hero infographic (ระบบนิเวศ MINT · ดึงข้อมูลจาก DB) ---- */
.ig{margin:0; background:linear-gradient(180deg,var(--cd-surface),var(--cd-bg));
  border:1px solid var(--cd-line); border-radius:var(--radius-lg); padding:var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.ig::before{content:""; position:absolute; left:15%; right:15%; top:-45%; height:70%;
  background:radial-gradient(ellipse at 50% 100%,var(--mint-tint),transparent 72%); opacity:.8; pointer-events:none}
.ig-hub{position:relative; text-align:center; background:var(--white); border:1px solid var(--cd-line);
  border-radius:var(--radius); padding:.9rem 1rem; box-shadow:var(--shadow-sm); max-width:19rem; margin:0 auto}
.ig-hub-mark{display:block; margin:0 auto .35rem}
.ig-hub-title{font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1rem; line-height:1.2}
.ig-hub-sub{font-size:.78rem; color:var(--ink-muted); margin-top:.15rem}
.ig-stem{display:flex; justify-content:center}
.ig-stem span{width:2px; height:24px; background:linear-gradient(var(--mint),rgba(65,84,144,0))}
.ig-grid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; position:relative}
.ig-node{display:flex; flex-direction:column; gap:.18rem; text-decoration:none;
  background:var(--white); border:1px solid var(--cd-line); border-top:3px solid var(--c,var(--mint));
  border-radius:var(--radius-sm); padding:.6rem .7rem;
  transition:transform .15s var(--ease), box-shadow .15s; animation:igpop .5s var(--ease) both}
.ig-node:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.ig-node-ic{width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:var(--mint-tint); background:color-mix(in srgb,var(--c) 15%,white);
  color:var(--c); font-size:.95rem}
.ig-node-name{font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:.82rem; line-height:1.15}
.ig-node-tag{font-size:.72rem; color:var(--ink-body); line-height:1.3; margin-top:.05rem}
.ig-node-meta{font-size:.7rem; color:var(--ink-muted); margin-top:auto; padding-top:.3rem}
.ig-node:nth-child(1){animation-delay:.05s}.ig-node:nth-child(2){animation-delay:.1s}
.ig-node:nth-child(3){animation-delay:.15s}.ig-node:nth-child(4){animation-delay:.2s}
.ig-node:nth-child(5){animation-delay:.25s}.ig-node:nth-child(6){animation-delay:.3s}
.ig-node:nth-child(7){animation-delay:.35s}.ig-node:nth-child(8){animation-delay:.4s}
.ig-node:nth-child(9){animation-delay:.45s}.ig-node:nth-child(10){animation-delay:.5s}
@keyframes igpop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none}}
.ig-legend{display:flex; flex-wrap:wrap; gap:.3rem .8rem; justify-content:center; margin-top:.8rem}
.ig-leg{display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--ink-body)}
.ig-leg i{width:9px; height:9px; border-radius:3px; display:inline-block; flex:none}
.ig-foot{text-align:center; font-size:.78rem; color:var(--ink-muted); margin-top:.7rem;
  border-top:1px dashed var(--cd-line); padding-top:.6rem}
.ig-foot b{color:var(--ink); font-family:var(--font-head)}
@media (prefers-reduced-motion:reduce){ html.js .ig-node{animation:none} }
@media (min-width:480px){ .ig-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .ig-grid{grid-template-columns:repeat(5,1fr)} }

/* hero variant — แผนภาพระบบนิเวศในคอลัมน์ขวาของ hero, บีบให้เห็นครบใน 1 หน้าจอ */
.ig--hero{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.ig--hero::before{height:38%}
.ig--hero .ig-hub{max-width:none; padding:.5rem .85rem}
.ig--hero .ig-hub-mark{width:24px; height:24px; margin-bottom:.15rem}
.ig--hero .ig-hub-title{font-size:.92rem}
.ig--hero .ig-hub-sub{font-size:.72rem}
.ig--hero .ig-stem span{height:14px}
.ig--hero .ig-grid{grid-template-columns:repeat(2,1fr); gap:.4rem; margin-top:.2rem; position:relative}
/* เส้นแกนกลางบาง ๆ ให้อ่านเป็นแผนภาพ ไม่ใช่แค่กริด */
.ig--hero .ig-grid::before{content:""; position:absolute; left:50%; top:-.5rem; bottom:1.1rem; width:2px;
  transform:translateX(-50%); pointer-events:none;
  background:linear-gradient(var(--mint-tint), color-mix(in srgb,var(--mint-tint) 25%,transparent))}
.ig--hero .ig-node{gap:.05rem; padding:.4rem .55rem; border-top-width:2px; position:relative; z-index:1; background:var(--white)}
.ig--hero .ig-node-ic{width:21px; height:21px; border-radius:6px; font-size:.78rem; margin-bottom:.1rem; transition:transform .25s var(--ease)}
.ig--hero .ig-node-name{font-size:.78rem}
.ig--hero .ig-node-tag{font-size:.67rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.ig--hero .ig-node-meta{display:none}
.ig--hero .ig-legend{display:none}
.ig--hero .ig-foot{margin-top:.5rem; padding-top:.45rem; font-size:.72rem}
/* ลูกเล่น: สปอตไลต์วิ่งไล่ทีละระบบ (CSS ล้วน) + วงแหวนตอบรับตอน hover */
.ig--hero .ig-node::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  opacity:0; box-shadow:0 0 0 0 transparent; animation:ig-spot 24s ease-in-out infinite}
.ig--hero .ig-node:nth-child(1)::after{animation-delay:0s}
.ig--hero .ig-node:nth-child(2)::after{animation-delay:2.4s}
.ig--hero .ig-node:nth-child(3)::after{animation-delay:4.8s}
.ig--hero .ig-node:nth-child(4)::after{animation-delay:7.2s}
.ig--hero .ig-node:nth-child(5)::after{animation-delay:9.6s}
.ig--hero .ig-node:nth-child(6)::after{animation-delay:12s}
.ig--hero .ig-node:nth-child(7)::after{animation-delay:14.4s}
.ig--hero .ig-node:nth-child(8)::after{animation-delay:16.8s}
.ig--hero .ig-node:nth-child(9)::after{animation-delay:19.2s}
.ig--hero .ig-node:nth-child(10)::after{animation-delay:21.6s}
@keyframes ig-spot{
  0%   {opacity:0; box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 40%,transparent)}
  2%   {opacity:1; box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
  8%   {opacity:1; box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
  12%  {opacity:0; box-shadow:0 0 0 9px transparent}
  100% {opacity:0}
}
.ig--hero .ig-node:hover::after, .ig--hero .ig-node:focus-visible::after{
  animation:none; opacity:1; box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.ig--hero .ig-node:hover .ig-node-ic{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){ .ig--hero .ig-node::after{animation:none} }

/* ---- trust logos (โลโก้ลูกค้า) ---- */
.logo-row{display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:stretch; justify-content:center}
.logo-chip{display:flex; align-items:center; justify-content:center; flex:0 1 auto;
  min-width:190px; min-height:104px; padding:1.1rem 1.9rem;
  background:var(--white); border:1px solid var(--cd-line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.logo-img{display:block; width:auto; height:auto; max-width:220px; max-height:60px; object-fit:contain}
.logo-chip .logo{font-family:var(--font-head); font-weight:600; color:var(--ink-body);
  font-size:1rem; display:inline-flex; align-items:center; gap:.45rem; text-align:center}
.logo-chip .logo i{font-size:1.3rem; color:var(--mint)}
@media (max-width:520px){
  .logo-chip{min-width:0; width:100%; min-height:88px; padding:.9rem 1.2rem}
  .logo-img{max-height:52px}
}

/* ---- generic grid ---- */
.grid{display:grid; gap:var(--sp-4)}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.grid > *{min-width:0}
.card-title{font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:1.08rem; margin:.9rem 0 .4rem}
.card-elev p{font-size:.95rem; margin:0}

/* ---- pain → MINT fix (infographic เทียบคู่ ปัญหา vs ผลลัพธ์) ---- */
.pain-flow{display:flex; flex-direction:column; gap:var(--sp-4)}
.pain-row{display:grid; grid-template-columns:1fr; gap:var(--sp-4); align-items:center;
  background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm)}
.pain-before,.pain-after{display:flex; gap:.8rem; align-items:flex-start}
.pain-row .pf-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.2rem; flex:none}
.pain-before .pf-ic{background:#FBEAE6; color:#8A2F1D}
.pain-after .pf-ic{background:var(--mint-tint); color:var(--mint-700)}
.pf-tag{display:inline-block; font-family:var(--font-head); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:.25rem}
.pf-tag-bad{color:#B4614C}
.pf-tag-good{color:var(--mint-600)}
.pain-before .card-title{margin:.1rem 0 .3rem}
.pain-before p,.pain-after p{font-size:.92rem; color:var(--ink-body); margin:0}
.pain-after p{font-weight:500; color:var(--ink)}
.pain-arrow{display:flex; align-items:center; justify-content:center; color:var(--mint-600); font-size:1.3rem; transform:rotate(90deg)}
@media (min-width:768px){
  .pain-row{grid-template-columns:1fr auto 1fr}
  .pain-arrow{transform:none}
}

/* ---- how steps (stepper ต่อเนื่อง มีลูกศรคั่นระหว่างขั้นบน desktop) ---- */
.how-stepper{display:grid; grid-template-columns:1fr; gap:var(--sp-6)}
.step{position:relative; padding-left:3.2rem}
.step .num{position:absolute; left:0; top:0; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--mint); color:#fff; font-family:var(--font-head); font-weight:700; display:grid; place-items:center}
@media (min-width:768px){
  .how-stepper{grid-template-columns:repeat(3,1fr); gap:var(--sp-5)}
  .how-stepper .step:not(:last-child)::after{content:"→"; position:absolute; top:.1rem; right:-1.55rem;
    font-size:1.5rem; font-weight:700; color:var(--mint-600); opacity:.7}
}
.deploy-strip{margin-top:var(--sp-6); background:var(--mint-tint); color:var(--mint-ink);
  border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); font-weight:500; font-size:.95rem}
.deploy-strip i{color:var(--mint-600); margin-right:.3rem}

/* ---- product cards ---- */
.filter-bar{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-5)}
.filter-chip{font-family:var(--font-head); font-weight:500; font-size:.88rem; border:1px solid var(--cd-line);
  background:var(--cd-surface); color:var(--ink-body); border-radius:var(--radius-pill); padding:.45rem 1rem; cursor:pointer}
.filter-chip[aria-pressed="true"]{background:var(--mint); color:#fff; border-color:var(--mint)}
.product-card{display:flex; flex-direction:column}
.product-card .p-top{display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem}
.product-card .p-name{font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.12rem}
.product-card .p-tag{font-size:.9rem; color:var(--ink-muted); margin-bottom:.7rem}
.product-card ul{list-style:none; padding:0; margin:0 0 var(--sp-4); font-size:.9rem}
.product-card ul li{padding:.2rem 0 .2rem 1.4rem; position:relative}
.product-card ul li::before{content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; color:var(--mint-600); font-size:.9rem}
.product-card .p-actions{margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem}
.product-card .btn-mint,.product-card .btn-outline-mint{padding:.5rem 1rem; font-size:.86rem}

/* ---- product card: cover + badges ---- */
.product-card{padding:0; overflow:hidden}
.p-cover{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--cd-surface-2); border-bottom:1px solid var(--cd-line)}
.p-cover img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .4s var(--ease)}
.product-card:hover .p-cover img{transform:scale(1.03)}
.p-body{padding:var(--sp-4) var(--sp-5) var(--sp-5); display:flex; flex-direction:column; flex:1}
.p-badges{display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.6rem}
.tagx{display:inline-flex; align-items:center; gap:.28rem; font-size:.68rem; font-weight:600;
  padding:.2rem .5rem; border-radius:var(--radius-pill); line-height:1.4; white-space:nowrap}
.tagx-h{background:var(--mint-tint); color:var(--mint-ink)}
.tagx-s{background:var(--brand-blue-tint); color:var(--brand-blue-ink)}
.tagx-m{background:var(--amber-tint); color:#8A5F13}

/* ---- audience fork ---- */
.fork{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
.fork-card{display:flex; flex-direction:column; gap:.8rem; background:var(--cd-surface);
  border:1px solid var(--cd-line); border-top:4px solid var(--c,var(--mint)); border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-5); box-shadow:var(--shadow-sm); text-decoration:none;
  transition:transform .16s var(--ease), box-shadow .16s}
.fork-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.fork-card .fk-ic{width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-size:1.6rem; background:color-mix(in srgb,var(--c) 14%,white); color:var(--c)}
.fork-card h3{margin:0; font-size:1.22rem; color:var(--ink)}
.fork-card .fk-lead{font-size:.96rem; color:var(--ink-body); margin:0}
.fork-card ul{list-style:none; padding:0; margin:.2rem 0 0; font-size:.9rem}
.fork-card li{padding:.28rem 0 .28rem 1.5rem; position:relative; color:var(--ink-body)}
.fork-card li::before{content:""; position:absolute; left:.35rem; top:.85rem;
  width:6px; height:6px; border-radius:50%; background:var(--c); opacity:.75}
.fork-card .fk-go{margin-top:auto; font-family:var(--font-head); font-weight:600; color:var(--c);
  display:inline-flex; align-items:center; gap:.4rem; padding-top:.6rem}

/* ---- infographic ชุดที่ 2 (กรอบร่วม) ---- */
.ig2{margin:0; background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:var(--radius-lg); padding:var(--sp-5); box-shadow:var(--shadow-sm)}
.section--pine .ig2{background:rgba(255,255,255,.05); border-color:#2A3355}
.ig2-note{font-size:.78rem; color:var(--ink-muted); margin-top:var(--sp-4);
  border-top:1px dashed var(--cd-line); padding-top:.6rem}
.section--pine .ig2-note{color:#8E99C2; border-color:#2A3355}
.section--pine .ig2 h3{color:#fff}

/* ① workload before/after */
.wl-row{margin-bottom:var(--sp-5)}
.wl-label{font-family:var(--font-head); font-weight:600; font-size:.9rem; margin-bottom:.4rem; color:var(--ink)}
.section--pine .wl-label{color:#E7ECFA}
.wl-bar{display:flex; height:40px; border-radius:10px; overflow:hidden; background:var(--cd-bg)}
.wl-seg{display:grid; place-items:center; font-size:.76rem; font-weight:700; color:#fff; min-width:0;
  transition:width .8s var(--ease)}
.wl-seg b{opacity:.95}
.wl-bad{background:#B4614C} .wl-warn{background:var(--amber)} .wl-good{background:var(--mint)}
.wl-after .wl-good{background:var(--mint-600)}
.wl-legend{list-style:none; display:flex; flex-wrap:wrap; gap:.3rem .9rem; padding:0; margin:.45rem 0 0}
.wl-legend li{display:inline-flex; align-items:center; gap:.32rem; font-size:.75rem; color:var(--ink-muted)}
.section--pine .wl-legend li{color:#8E99C2}
.wl-legend i{width:9px; height:9px; border-radius:3px; flex:none}
.wl-gain{display:inline-flex; align-items:center; gap:.45rem; background:var(--mint-tint); color:var(--mint-ink);
  font-weight:600; font-size:.9rem; padding:.5rem .9rem; border-radius:var(--radius-pill)}
.section--pine .wl-gain{background:rgba(129,205,196,.22); color:#BEEAE3}

/* ② accreditation coverage */
.acc-list{list-style:none; padding:0; margin:0; display:grid; gap:.45rem}
.acc-list li{display:grid; grid-template-columns:auto 1fr; gap:.2rem .7rem; align-items:start;
  background:var(--cd-bg); border-radius:var(--radius-sm); padding:.6rem .8rem}
.section--pine .acc-list li{background:rgba(255,255,255,.06)}
.acc-tick{grid-row:span 2; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--mint); color:#fff; font-size:.85rem}
.section--pine .acc-tick{background:var(--brand-teal); color:var(--pine)}
.acc-std{font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:.93rem}
.section--pine .acc-std{color:#fff}
.acc-by{font-size:.8rem; color:var(--ink-muted)}
.section--pine .acc-by{color:#8E99C2}

/* ③ SME ladder — 3 ขั้นเรียงแนวนอนบน desktop มีลูกศรคั่น (คู่กับ .how-stepper) */
.ladder{display:grid; grid-template-columns:1fr; gap:var(--sp-4); background:transparent; border:0; box-shadow:none; padding:0}
.ld-step{position:relative; display:flex; gap:.9rem; background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); align-items:flex-start; height:100%}
.ld-num{width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--mint); color:#fff; font-family:var(--font-head); font-weight:700}
.ld-2 .ld-num{background:var(--brand-blue)} .ld-3 .ld-num{background:var(--pine)}
.ld-when{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--mint-600)}
.ld-2 .ld-when{color:var(--brand-blue)} .ld-3 .ld-when{color:var(--pine-600)}
.ld-body{min-width:0}
.ld-body h3{font-size:1.04rem; margin:.15rem 0 .3rem}
.ld-body p{font-size:.9rem; margin:0 0 .4rem}
.ld-meta{display:inline-block; font-size:.74rem; background:var(--cd-bg); color:var(--ink-muted);
  padding:.16rem .55rem; border-radius:var(--radius-pill)}
@media (min-width:768px){
  .ladder{grid-template-columns:repeat(3,1fr); gap:var(--sp-5); align-items:stretch}
  .ld-step{flex-direction:column}
  .ld-step:not(:last-child)::after{content:"→"; position:absolute; top:50%; right:-1.55rem; transform:translateY(-50%);
    font-size:1.4rem; font-weight:700; color:var(--mint-600); opacity:.6}
}

/* ⑥ comparison table */
.cmp-wrap{overflow-x:auto; border:1px solid var(--cd-line); border-radius:var(--radius-lg); background:var(--cd-surface)}
.cmp{width:100%; border-collapse:collapse; font-size:.9rem; min-width:34rem}
.cmp th,.cmp td{padding:.7rem .9rem; text-align:start; vertical-align:top; border-bottom:1px solid var(--cd-line)}
.cmp thead th{font-family:var(--font-head); font-size:.84rem; background:var(--cd-bg); color:var(--ink); font-weight:700}
.cmp tbody th{font-weight:600; color:var(--ink); width:26%}
.cmp .cmp-old{color:var(--ink-muted)}
.cmp .cmp-new{color:var(--mint-ink); background:var(--mint-tint)}
.cmp thead .cmp-new{background:var(--mint); color:#fff; display:table-cell}
.cmp thead .cmp-new i{margin-inline-end:.35rem}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* ④ data flow */
.flow-core{background:var(--pine); color:#E7ECFA; border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-4)}
.flow-core-title{display:flex; align-items:center; gap:.45rem; font-family:var(--font-head); font-weight:700; color:#fff; font-size:.98rem}
.flow-core-title i{color:var(--brand-teal)}
.flow-core ul{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:.35rem}
.flow-core li{font-size:.78rem; background:rgba(255,255,255,.1); padding:.22rem .6rem; border-radius:var(--radius-pill)}
.flow-list{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
.flow-list li{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem;
  background:var(--cd-bg); border-radius:var(--radius-sm); padding:.55rem .8rem}
.flow-hop{display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; white-space:nowrap}
.flow-hop b{font-family:var(--font-head); color:var(--ink)}
.flow-hop i{color:var(--mint-600)}
.flow-what{font-size:.82rem; color:var(--ink-muted)}

/* ⑤ timeline */
.tl-track{display:flex; flex-direction:column; gap:var(--sp-4)}
.tl-phase{position:relative; padding-top:.9rem}
.tl-bar{position:absolute; top:0; left:0; right:0; height:6px; border-radius:3px; background:var(--mint); display:block}
.tl-2 .tl-bar{background:var(--pine-600)} .tl-3 .tl-bar{background:var(--brand-blue)} .tl-4 .tl-bar{background:var(--pine)}
.tl-when{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mint-600)}
.tl-2 .tl-when{color:var(--pine-600)} .tl-3 .tl-when{color:var(--brand-blue)} .tl-4 .tl-when{color:var(--pine-600)}
.tl-phase h3{font-size:1rem; margin:.15rem 0 .25rem}
.tl-phase p{font-size:.86rem; margin:0}

/* ---- ⑧ 3 รูปแบบการทำงานร่วมกัน (ใต้ hero) ---- */
.eng{display:grid; grid-template-columns:1fr; gap:var(--sp-4)}
.eng-card{position:relative; display:flex; flex-direction:column; gap:.45rem; text-decoration:none;
  background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .16s var(--ease), box-shadow .16s}
.eng-card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--c)}
.eng-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.eng-product{--c:var(--mint)} .eng-impl{--c:var(--brand-blue)} .eng-consult{--c:var(--amber)}
.eng-top{display:flex; align-items:center; gap:.6rem}
.eng-ic{width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
  font-size:1.25rem; background:color-mix(in srgb,var(--c) 14%,white); color:var(--c)}
.eng-label{font-family:var(--font-head); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c)}
.eng-card h3{font-size:1.14rem; margin:.25rem 0 0; color:var(--ink)}
.eng-card p{font-size:.9rem; color:var(--ink-body); margin:0}
.eng-tags{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.2rem}
.eng-tags i{font-style:normal; font-size:.72rem; font-weight:600; padding:.2rem .55rem;
  border-radius:var(--radius-pill); background:color-mix(in srgb,var(--c) 11%,white); color:var(--c)}
.eng-go{margin-top:auto; padding-top:.7rem; font-family:var(--font-head); font-weight:600;
  font-size:.9rem; color:var(--c); display:inline-flex; align-items:center; gap:.4rem}
.eng-go i{transition:transform .15s var(--ease)}
.eng-card:hover .eng-go i{transform:translateX(3px)}

/* ---- บริการวางระบบ / ที่ปรึกษา ---- */
.svc{background:var(--cd-surface); border:1px solid var(--cd-line); border-top:4px solid var(--mint);
  border-radius:var(--radius-lg); padding:var(--sp-5); box-shadow:var(--shadow-sm); height:100%;
  display:flex; flex-direction:column; transition:transform .16s var(--ease), box-shadow .16s}
.svc:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.svc-consult{border-top-color:var(--amber); background:linear-gradient(180deg,var(--amber-tint),var(--cd-surface) 42%)}
.svc-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.35rem;
  background:var(--mint-tint); color:var(--mint-700); margin-bottom:.6rem}
.svc-consult .svc-ic{background:#F6E7C6; color:#8A5F13}
.svc-kind{font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--mint-600)}
.svc-consult .svc-kind{color:#9A6A15}
.svc h3{font-size:1.08rem; margin:.2rem 0 .3rem}
.svc-tag{font-size:.9rem; color:var(--ink-body); margin:0 0 .6rem}
.svc-desc{font-size:.88rem; color:var(--ink-body); margin:0 0 .7rem}
.svc-items{list-style:none; padding:0; margin:auto 0 0; font-size:.86rem}
.svc-items li{padding:.26rem 0 .26rem 1.35rem; position:relative; color:var(--ink-body)}
.svc-items li::before{content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0;
  color:var(--mint-600); font-size:.8rem}
.svc-consult .svc-items li::before{color:var(--amber)}
/* บนพื้นสนเข้ม ต้องกลับเป็นตัวอักษรสว่าง ไม่งั้นอ่านไม่ออก */
.section--pine .svc-items li{color:#E7ECFA}
.section--pine .svc-items li::before{color:var(--brand-teal)}
/* สรุประยะเวลาแบบสั้น (เดิมเป็นไทม์ไลน์เต็มแยกส่วน — ย่อมาไว้ในการ์ด HIS แทน) */
.svc-note{display:flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--mint-700);
  margin:.7rem 0 0; padding-top:.6rem; border-top:1px dashed var(--cd-line)}
.svc-note i{color:var(--mint-600)}

/* ⑦ ไทม์ไลน์ HIS */
.hisT-head{display:flex; align-items:center; gap:.45rem; font-family:var(--font-head); font-weight:700;
  color:var(--ink); font-size:1rem; margin-bottom:var(--sp-4)}
.hisT-head i{color:var(--mint-600)}
.hisT-list{list-style:none; padding:0; margin:0; counter-reset:none}
.hisT-list li{display:grid; grid-template-columns:auto 1fr; gap:.15rem .6rem; align-items:center;
  padding:.4rem 0; border-bottom:1px dashed var(--cd-line)}
.hisT-list li:last-child{border-bottom:0}
.hisT-n{grid-row:span 2; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--mint-tint); color:var(--mint-700); font-family:var(--font-head); font-weight:700; font-size:.72rem}
.hisT-name{font-size:.88rem; color:var(--ink); font-weight:500}
.hisT-track{display:block; height:7px; border-radius:4px; background:var(--cd-bg); overflow:hidden}
.hisT-track i{display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--pine-600),var(--mint))}
.hisT-days{grid-column:2; font-size:.74rem; color:var(--ink-muted)}
.hisT-total{display:inline-flex; align-items:center; gap:.45rem; margin-top:var(--sp-4);
  background:var(--pine); color:#E7ECFA; font-weight:600; font-size:.88rem;
  padding:.5rem .9rem; border-radius:var(--radius-pill)}
.hisT-total i{color:var(--brand-teal)}

/* ---- screenshots + lightbox ---- */
.shot{margin:0; display:flex; flex-direction:column; gap:.5rem}
.shot-btn{position:relative; display:block; width:100%; padding:0; border:1px solid var(--cd-line);
  border-radius:var(--radius); overflow:hidden; background:var(--cd-surface); cursor:zoom-in;
  box-shadow:var(--shadow-sm); transition:transform .16s var(--ease), box-shadow .16s}
.shot-btn:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.shot-btn img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center}
.shot-zoom{position:absolute; right:.5rem; bottom:.5rem; width:32px; height:32px; border-radius:9px;
  background:rgba(18,23,41,.82); color:#fff; display:grid; place-items:center; font-size:.85rem; opacity:0; transition:opacity .15s}
.shot-btn:hover .shot-zoom,.shot-btn:focus-visible .shot-zoom{opacity:1}
.shot figcaption{font-size:.82rem; color:var(--ink-muted); line-height:1.5}
.section--pine .shot figcaption{color:#8E99C2}
.shot-tabs{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-5)}
.shot-pane[hidden]{display:none}

.lbx{position:fixed; inset:0; z-index:2000; background:rgba(10,13,24,.92); display:none;
  align-items:center; justify-content:center; padding:clamp(.7rem,3vw,2.5rem); flex-direction:column; gap:.8rem}
.lbx.open{display:flex}
.lbx img{max-width:100%; max-height:78vh; border-radius:var(--radius); box-shadow:var(--shadow-lg); background:#fff}
.lbx-cap{color:#E7ECFA; font-size:.9rem; text-align:center; max-width:52rem}
.lbx-close{position:absolute; top:.8rem; right:.9rem; width:42px; height:42px; border-radius:50%;
  border:0; background:rgba(255,255,255,.14); color:#fff; font-size:1.2rem; cursor:pointer}
.lbx-close:hover{background:rgba(255,255,255,.26)}
.lbx-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.14); color:#fff; font-size:1.2rem; cursor:pointer}
.lbx-prev{left:.8rem} .lbx-next{right:.8rem}
.lbx-nav:hover{background:rgba(255,255,255,.26)}

/* ---- modules list (product page) ---- */
.mods{list-style:none; padding:0; margin:0; display:grid; gap:.35rem; grid-template-columns:1fr}
.mods li{display:flex; gap:.5rem; align-items:baseline; font-size:.9rem; background:var(--cd-surface);
  border:1px solid var(--cd-line); border-radius:var(--radius-sm); padding:.45rem .7rem}
.mods li::before{content:"\F26E"; font-family:"bootstrap-icons"; color:var(--mint-600); font-size:.8rem; flex:none}

.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---- feature grid ---- */
.feature{display:flex; gap:.9rem}
.feature h3{font-size:1.03rem; margin:.1rem 0 .3rem}
.feature p{font-size:.92rem; margin:0}

/* ---- demo cards ---- */
.demo-card{display:flex; flex-direction:column; gap:.6rem}
.demo-card .creds{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  background:var(--cd-bg); border:1px dashed var(--cd-line); border-radius:var(--radius-sm); padding:.5rem .7rem; color:var(--ink-body)}
.demo-note{font-size:.82rem; color:var(--ink-muted); margin-top:.3rem}

/* ---- results band ---- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5)}
.stat{text-align:center}
.stat .v{font-family:var(--font-head); font-weight:700; font-size:clamp(1.7rem,5vw,2.6rem); color:#fff; line-height:1}
.stat .l{font-size:.9rem; color:#8E99C2; margin-top:.4rem; display:block}
.results-note{font-size:.8rem; color:#8E99C2; text-align:center; margin-top:var(--sp-5)}

/* ---- testimonials ---- */
.quote{position:relative; overflow:hidden; background:var(--cd-surface); border:1px solid var(--cd-line);
  border-top:4px solid var(--mint); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm); height:100%}
.quote:nth-child(2){border-top-color:var(--brand-blue)}
.quote:nth-child(3){border-top-color:var(--pine-600)}
.quote .mark{position:absolute; top:-.4rem; right:.7rem; z-index:0; pointer-events:none;
  color:var(--mint-tint); font-size:4.6rem; line-height:1; font-family:var(--font-head); font-weight:700}
.quote p{position:relative; z-index:1; padding-right:2.4rem; font-size:1rem; color:var(--ink); margin:.4rem 0 var(--sp-4)}
.quote .who{position:relative; z-index:1; font-size:.86rem; color:var(--ink-muted); font-weight:500}

/* ---- pricing ---- */
.price-grid{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
.price-card{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; height:100%}
.price-card.hot{border-color:var(--mint); box-shadow:0 0 0 3px var(--mint-tint), var(--shadow-md); position:relative}
.price-card .badge-hot{position:absolute; top:-.8rem; left:50%; transform:translateX(-50%);
  background:var(--amber); color:#3a2905; font-family:var(--font-head); font-weight:700; font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase; padding:.3rem .8rem; border-radius:var(--radius-pill)}
.price-card .p-name{font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.2rem}
.price-card .p-price{font-family:var(--font-head); font-weight:700; color:var(--mint-700); font-size:1.5rem; margin-top:.4rem}
.price-card .p-period{font-size:.84rem; color:var(--ink-muted); margin-bottom:var(--sp-4)}
.price-card ul{list-style:none; padding:0; margin:0 0 var(--sp-5); font-size:.92rem}
.price-card ul li{padding:.32rem 0 .32rem 1.5rem; position:relative}
.price-card ul li::before{content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; color:var(--mint-600)}
.price-card .btn-mint,.price-card .btn-outline-mint{margin-top:auto; justify-content:center}
.price-foot{font-size:.82rem; color:var(--ink-muted); margin-top:var(--sp-5); text-align:center}

/* ---- resources ---- */
.res-card{overflow:hidden; padding:0}
.res-card .cover{aspect-ratio:16/9; background:var(--mint-tint); display:block; object-fit:cover; width:100%}
.res-card .body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.res-card .cat{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--mint-600)}
.res-card h3{font-size:1.05rem; margin:.4rem 0 .5rem}
.res-card p{font-size:.9rem; color:var(--ink-body); margin:0 0 .8rem}
.res-card .date{font-size:.8rem; color:var(--ink-muted)}

/* ---- about stats (ก่อตั้งปี / จำนวนลูกค้า แบบดูปราดเดียวเข้าใจ) ---- */
.about-stats{display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-5)}
.about-stat{display:flex; flex-direction:column}
.about-stat .v{font-family:var(--font-head); font-weight:700; font-size:1.7rem; color:var(--mint-700); line-height:1.1}
.about-stat .l{font-size:.8rem; color:var(--ink-muted); margin-top:.2rem}

/* ---- about values ---- */
.value{display:flex; gap:.8rem}
.value i{color:var(--mint-600); font-size:1.3rem; margin-top:.1rem}
.value h3{font-size:1rem; margin:0 0 .25rem}
.value p{font-size:.9rem; margin:0}

/* ---- FAQ ---- */
.accordion{--bs-accordion-bg:transparent; --bs-accordion-border-color:var(--cd-line);
  --bs-accordion-active-bg:var(--mint-tint); --bs-accordion-active-color:var(--mint-ink);
  --bs-accordion-btn-focus-box-shadow:var(--focus); --bs-accordion-border-radius:var(--radius);
  --bs-accordion-btn-color:var(--ink); border-radius:var(--radius); overflow:hidden; border:1px solid var(--cd-line)}
.accordion-button{font-family:var(--font-head); font-weight:600; font-size:1rem}
.accordion-body{color:var(--ink-body); font-size:.95rem}

/* ---- CTA band ---- */
.cta-band{text-align:center}
.cta-band .lead{color:#C7D0EC; margin-inline:auto; max-width:40rem}
.cta-band .btn-row{justify-content:center; margin-top:var(--sp-5)}

/* ---- contact ---- */
.contact-grid{display:grid; gap:var(--sp-6); grid-template-columns:1fr}
.form-card{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm)}
.form-label{font-weight:600; font-size:.86rem; color:var(--ink); margin-bottom:.3rem}
.form-control,.form-select{border-color:var(--cd-line); background:#fff; font-size:.95rem; border-radius:10px; padding:.6rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--mint); box-shadow:var(--focus)}
.form-check-input:checked{background-color:var(--mint); border-color:var(--mint)}
.form-check-input:focus{box-shadow:var(--focus)}
.interest-grid{display:grid; grid-template-columns:1fr; gap:.3rem .8rem}
@media (min-width:576px){ .interest-grid{grid-template-columns:1fr 1fr} }
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{font-size:.82rem}
.form-alert{display:none; border-radius:10px; padding:.7rem .9rem; font-size:.9rem; margin-bottom:var(--sp-4)}
.form-alert.ok{display:block; background:var(--mint-tint); color:var(--mint-ink)}
.form-alert.err{display:block; background:#FBEAE6; color:#8A2F1D}
.contact-info dl{margin:0}
.contact-info dt{font-family:var(--font-head); font-size:.8rem; color:var(--ink-muted); font-weight:600; margin-top:var(--sp-4)}
.contact-info dd{margin:.15rem 0 0; color:var(--ink-body)}
.contact-info .map{margin-top:var(--sp-4); border-radius:var(--radius); overflow:hidden; border:1px solid var(--cd-line); aspect-ratio:16/10}
.contact-info .map iframe{width:100%; height:100%; border:0; display:block}

/* ---- footer ---- */
.di-footer{background:var(--pine); color:#A9B4DA; font-size:.9rem; padding-block:var(--sp-8) var(--sp-6)}
.di-footer a{color:#D3DBF3}
.di-footer a:hover{color:#fff}
.foot-grid{display:grid; gap:var(--sp-6); grid-template-columns:1fr}
.foot-brand .di-brand{color:#fff}
.foot-col h2{font-family:var(--font-head); font-size:.82rem; text-transform:uppercase; letter-spacing:.07em;
  color:#8E99C2; margin:0 0 var(--sp-3)}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:.5rem}
.foot-bottom{border-top:1px solid #2A3355; margin-top:var(--sp-7); padding-top:var(--sp-4);
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; justify-content:space-between; font-size:.82rem; color:#8E99C2}
.foot-bottom .di-lang{background:transparent; border-color:#2A3355}
.foot-bottom .di-lang a{color:#8E99C2}
.foot-bottom .di-lang a.on{background:var(--mint-600); color:#fff}

/* ---- floating actions + mobile CTA bar ---- */
.floaters{position:fixed; right:14px; bottom:14px; z-index:1035; display:flex; flex-direction:column; gap:.5rem}
.floaters a,.floaters button{width:46px; height:46px; border-radius:50%; border:0; display:grid; place-items:center;
  font-size:1.25rem; box-shadow:var(--shadow-md); cursor:pointer; color:#fff}
.floaters .f-line{background:#06C755}
.floaters .f-call{background:var(--mint-600)}
.floaters .f-top{background:var(--pine); opacity:0; pointer-events:none; transition:opacity .2s}
.floaters .f-top.show{opacity:1; pointer-events:auto}
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:1034; display:flex; gap:.5rem; padding:.55rem .8rem;
  background:rgba(245,247,251,.96); border-top:1px solid var(--cd-line); backdrop-filter:blur(8px)}
.mcta a{flex:1; justify-content:center; padding:.7rem .5rem; font-size:.92rem}
.mcta.hide{transform:translateY(120%)}
.mcta{transition:transform .25s var(--ease)}

/* ---- breadcrumb ---- */
.crumb{font-size:.85rem; color:var(--ink-muted); padding-block:var(--sp-4) 0}
.crumb a{color:var(--ink-muted)} .crumb a:hover{color:var(--mint-700)}

/* ============================================================
   Responsive — mobile-first · 768 · 1200
   ============================================================ */
@media (min-width:768px){
  .section{padding-block:var(--sp-9)}
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .price-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1.15fr .85fr}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr}
  .mcta{display:none}
  .fork{grid-template-columns:1fr 1fr}
  .eng{grid-template-columns:repeat(3,1fr)}
  .mods{grid-template-columns:1fr 1fr}
  .tl-track{flex-direction:row; gap:var(--sp-3)}
  .flow-list{grid-template-columns:1fr 1fr}
}
@media (min-width:992px){
  .di-toggler{display:none}
  .di-mobile{display:none !important}
  .di-nav-links{display:flex}
}
@media (min-width:1200px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .section-head{margin-bottom:var(--sp-7)}
  .di-nav-links a{font-size:.95rem; padding:.5rem .8rem}
  /* hero แบ่งสองคอลัมน์เมื่อกว้างพอจริง — แคบกว่านี้หัวข้อจะถูกบีบจนเหลือคำโดดท้ายบรรทัด */
  .hero-grid{grid-template-columns:1fr 1.05fr}
  .hv-float{left:-1.6rem; right:auto; bottom:-.6rem; max-width:16rem}
  .hero-stage{padding-bottom:3.6rem}
  .hv-frame2{display:block}
  .tl-track{gap:var(--sp-4)}
  .tl-phase h3{font-size:1.04rem}
  .mods{grid-template-columns:repeat(3,1fr)}
}

/* ════════════════════════════════════════════════════════════════════
 * MOTION — hero 3 มิติตามเมาส์ · ทัวร์ทีละระบบ (ปักหมุด) · แถวภาพเลื่อนตามสกอร์ล · การ์ดเอียงตามเมาส์
 * ตัวแปร --mx/--my (−1..1 ตำแหน่งเมาส์), --sy (สกอร์ลผ่าน hero 0..1), --gx/--gy (จุดแสงสะท้อน %)
 * ถูกตั้งจาก inc/scripts.php · ปิดทั้งหมดเมื่อ prefers-reduced-motion
 * ════════════════════════════════════════════════════════════════════ */

/* ───────── HERO ───────── */
.hero{--mx:0; --my:0; --sy:0; --gx:50%; --gy:30%}
.hero .wrap{z-index:1}
.hero-copy{translate:0 calc(var(--sy) * -60px)}
/* เอียงทั้งเวที (ไม่ใช่ตัว .ig เพราะ .reveal ใช้ transform ของ .ig อยู่แล้ว) */
.hero-stage3d{position:relative; translate:0 calc(var(--sy) * 70px); transform-style:preserve-3d;
  transform:perspective(1200px) rotateY(calc(var(--mx) * 9deg - var(--sy) * 6deg)) rotateX(calc(var(--my) * -7deg + var(--sy) * 10deg))}
.hero-stage3d > .ig{position:relative; z-index:1}
/* แสงสะท้อนวิ่งตามเมาส์บนแผนภาพ */
.hero-stage3d > .ig::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:3;
  background:radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.55), transparent 55%);
  mix-blend-mode:soft-light; opacity:calc(.35 + (var(--mx) * var(--mx) + var(--my) * var(--my)) * .5)}

/* ภาพหน้าจอจริงซ้อนหลังแผนภาพ: บินเข้า → ลอยช้าๆ → เอียง/กางออกตามเมาส์และสกอร์ล */
.hero-layer{display:none}
@media (min-width:1100px){
  .hero-layer{display:block; position:absolute; width:52%; height:auto; border-radius:12px; pointer-events:none;
    border:1px solid var(--cd-line); box-shadow:0 30px 60px -20px rgba(18,23,41,.45); z-index:0;
    animation:hl-in 1.3s var(--ease) both, hl-float 8s ease-in-out 1.3s infinite}
  .hl-1{top:-6%; right:-17%;
    rotate:calc(7deg + var(--mx) * 6deg + var(--sy) * 16deg);
    translate:calc(var(--mx) * 34px + var(--sy) * 80px) calc(var(--my) * 22px + var(--sy) * -90px);
    animation-delay:.25s, 1.55s}
  .hl-2{bottom:-8%; left:-3%;
    rotate:calc(-8deg + var(--mx) * -5deg - var(--sy) * 18deg);
    translate:calc(var(--mx) * -40px - var(--sy) * 90px) calc(var(--my) * -26px + var(--sy) * 50px);
    animation-delay:.4s, 2.4s}
  .hl-3{top:36%; right:-24%; width:38%; opacity:.9;
    rotate:calc(-4deg + var(--mx) * 8deg + var(--sy) * 12deg);
    translate:calc(var(--mx) * 56px + var(--sy) * 140px) calc(var(--my) * 36px + var(--sy) * -140px);
    animation-delay:.55s, 3.1s}
}
@keyframes hl-in{from{opacity:0; transform:translate3d(0,60px,-200px) scale(.7) rotate(-14deg)} to{opacity:1; transform:none}}
@keyframes hl-float{0%,100%{transform:none} 50%{transform:translate3d(0,-14px,0) rotate(1.6deg)}}

.hero-orb{position:absolute; border-radius:50%; pointer-events:none; filter:blur(50px); z-index:0;
  animation:orb-drift 14s ease-in-out infinite alternate}
.ho-1{width:460px; height:460px; right:6%; top:6%; background:rgba(113,228,209,.26);
  translate:calc(var(--mx) * 70px) calc(var(--my) * 50px)}
.ho-2{width:340px; height:340px; left:-4%; bottom:-10%; background:rgba(65,84,144,.16);
  translate:calc(var(--mx) * -60px) calc(var(--my) * -40px); animation-duration:18s}
@keyframes orb-drift{to{transform:translate3d(-60px,40px,0) scale(1.15)}}

/* แผนภาพ: hub มีวงแหวนไล่สีหมุน + คลื่นแผ่ออก · เส้นแกนมีแสงวิ่งลง · กล่องระบบพุ่งออกจาก hub แล้วลอยตัว */
.ig--hero .ig-hub{position:relative; z-index:2; isolation:isolate; border-color:transparent}
.ig--hero .ig-hub::before{content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1; padding:2px;
  background:conic-gradient(from var(--hub-a,0deg), #71E4D1, #415490, #2A6F67, #81CDC4, #71E4D1);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:hub-spin 5s linear infinite}
.ig--hero .ig-hub::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-2;
  box-shadow:0 0 0 0 rgba(113,228,209,.55); animation:hub-ping 2.8s var(--ease) infinite}
@property --hub-a{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes hub-spin{to{--hub-a:360deg}}
@keyframes hub-ping{0%{box-shadow:0 0 0 0 rgba(113,228,209,.5)} 100%{box-shadow:0 0 0 18px rgba(113,228,209,0)}}
.ig--hero .ig-hub-mark{animation:mark-turn 9s var(--ease) infinite}
@keyframes mark-turn{0%,80%{transform:none} 90%{transform:rotate(180deg) scale(1.15)} 100%{transform:rotate(360deg)}}
.ig--hero .ig-grid::after{content:""; position:absolute; left:50%; top:-.5rem; width:6px; height:46px; margin-left:-3px;
  border-radius:6px; pointer-events:none; z-index:0; filter:blur(1px);
  background:linear-gradient(transparent, #71E4D1, transparent); animation:spine-run 2.6s linear infinite}
@keyframes spine-run{from{transform:translateY(0); opacity:0} 15%{opacity:1} 85%{opacity:1} to{transform:translateY(22rem); opacity:0}}
html.js .ig--hero .ig-node{animation:ig-burst .9s var(--ease) both, ig-bob 6s ease-in-out infinite;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.ig--hero .ig-node:nth-child(odd){--bx:60%; --br:10deg}
.ig--hero .ig-node:nth-child(even){--bx:-60%; --br:-10deg}
.ig--hero .ig-node:nth-child(1){animation-delay:.30s,0s}   .ig--hero .ig-node:nth-child(2){animation-delay:.36s,-.6s}
.ig--hero .ig-node:nth-child(3){animation-delay:.42s,-1.2s} .ig--hero .ig-node:nth-child(4){animation-delay:.48s,-1.8s}
.ig--hero .ig-node:nth-child(5){animation-delay:.54s,-2.4s} .ig--hero .ig-node:nth-child(6){animation-delay:.60s,-3s}
.ig--hero .ig-node:nth-child(7){animation-delay:.66s,-3.6s} .ig--hero .ig-node:nth-child(8){animation-delay:.72s,-4.2s}
.ig--hero .ig-node:nth-child(9){animation-delay:.78s,-4.8s} .ig--hero .ig-node:nth-child(10){animation-delay:.84s,-5.4s}
@keyframes ig-burst{from{opacity:0; transform:translate(var(--bx,0), -120%) scale(.4) rotate(var(--br,0deg))} to{opacity:1; transform:none}}
@keyframes ig-bob{0%,100%{translate:0 0} 50%{translate:0 -4px}}
.ig--hero .ig-node:hover{transform:translateY(-4px) scale(1.06); z-index:4;
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--c) 60%,transparent)}
.ig--hero .ig-node:hover .ig-node-ic{transform:scale(1.15) rotate(-8deg)}

/* ───────── ป้าย/ชิปฝั่งซ้ายของ hero: ลอยเข้าเป็นลำดับ + แสงวาบ ───────── */
html.js .hero-pills > *, html.js .hero-chips > .chip{animation:chip-in .8s var(--ease) both}
.hero-pills > :nth-child(1){animation-delay:.35s} .hero-pills > :nth-child(2){animation-delay:.45s}
.hero-chips > :nth-child(1){animation-delay:.55s} .hero-chips > :nth-child(2){animation-delay:.65s}
.hero-chips > :nth-child(3){animation-delay:.75s} .hero-chips > :nth-child(4){animation-delay:.85s}
@keyframes chip-in{from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:none}}
.hero-chips .chip{position:relative; overflow:hidden}
.hero-chips .chip::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(113,228,209,.35) 50%, transparent 65%);
  transform:translateX(-100%); animation:shine 6s ease-in-out infinite}
.hero-chips .chip:nth-child(2)::after{animation-delay:1.2s} .hero-chips .chip:nth-child(3)::after{animation-delay:2.4s}
@keyframes shine{0%,60%{transform:translateX(-100%)} 80%,100%{transform:translateX(100%)}}

/* ───────── ทัวร์ทีละระบบ ───────── */
.tour{position:relative; background:var(--pine); color:#DDE3F4; --c:#71E4D1}
.tour-pin{position:relative; overflow:hidden; padding-block:var(--sp-8)}
.tour-glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 70% 55%, color-mix(in srgb,var(--c) 35%,transparent), transparent 70%)}
.tour-word{display:none}
.tour-wrap{position:relative; z-index:1}
.tour-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:var(--sp-5)}
.tour-head .eyebrow{color:var(--brand-teal,#81CDC4)}
.tour-count{font-family:var(--font-head); color:#8D98BD; font-size:.95rem}
.tour-count b{color:#fff; font-size:1.4rem}
.tour-all{margin-left:1rem; padding-left:1rem; border-left:1px solid rgba(255,255,255,.18); color:var(--brand-teal,#81CDC4);
  font-size:.88rem; text-decoration:none; white-space:nowrap}
.tour-all:hover{color:#fff}
.tour .tour-try{color:var(--brand-teal,#81CDC4)} .tour .tour-try:hover{color:#fff}
.tour-stage{display:flex; flex-direction:column; gap:var(--sp-5)}
.tour-texts,.tour-cards{display:contents}
.tour-text h3{color:#fff; font-size:clamp(1.6rem,3.2vw,2.6rem); display:flex; align-items:center; gap:.7rem; margin:.2rem 0 .6rem}
.tour-ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; flex:none; font-size:1.5rem;
  background:color-mix(in srgb,var(--c) 22%,transparent); color:var(--c);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent)}
.tour-idx{font-family:var(--font-head); font-weight:800; font-size:clamp(3rem,6vw,5rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 70%,white)}
.tour-tag{font-size:1.08rem; color:#C3CBE3; max-width:32rem}
.tour-text ul{list-style:none; padding:0; margin:0 0 var(--sp-5); display:grid; gap:.45rem}
.tour-text li{display:flex; gap:.5rem; color:#DDE3F4; font-size:.95rem}
.tour-text li i{color:var(--c)}
.tour .btn-outline-mint{color:#E7ECFA; border-color:rgba(255,255,255,.35)}
.tour .btn-outline-mint:hover{background:rgba(255,255,255,.08); color:#fff}
.tour-card{position:relative; margin:0 0 var(--sp-7)}
.tour-shot{border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.tour-shot img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top}
.tour-side{position:absolute; width:42%; left:-7%; bottom:-9%; border-radius:12px; border:3px solid #fff;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.6); rotate:-7deg; aspect-ratio:16/10; object-fit:cover; object-position:top}
.tour-badge{position:absolute; top:-18px; right:-10px; display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; color:var(--ink); border-radius:999px; padding:.5rem .9rem; font-size:.85rem;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5); border:2px solid var(--c); rotate:4deg}
.tour-badge i{color:var(--c)} .tour-badge b{font-family:var(--font-head); font-size:1.05rem}
.tour-dots{display:none}

@media (min-width:900px){
  .tour{height:calc(var(--n) * 45vh + 100vh)}
  .tour-pin{position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); padding-block:var(--sp-6);
    display:flex; align-items:center}
  .tour-wrap{width:100%}
  .tour-head{margin-bottom:var(--sp-4)}
  .tour-stage{display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-7); align-items:center;
    min-height:min(56vh,520px); padding-inline-end:var(--sp-5)}
  .tour-texts,.tour-cards{display:grid; position:relative}
  .tour-texts > *,.tour-cards > *{grid-area:1/1}
  .tour-text{opacity:0; will-change:transform,opacity}
  .tour-cards{perspective:1400px}
  .tour-card{margin:0; will-change:transform,opacity; transform-origin:50% 120%; backface-visibility:hidden}
  .tour-card:not(.is-front) .tour-side,.tour-card:not(.is-front) .tour-badge{animation-play-state:paused}
  .tour-pin{contain:layout paint}
  /* --e = 1 เมื่อเป็นใบหน้า, 0 เมื่อยังไม่ถึง/ผ่านไปแล้ว (JS ตั้ง) */
  .tour-side{opacity:var(--e,0); translate:calc((1 - var(--e,0)) * -80px) calc((1 - var(--e,0)) * 40px);
    animation:hl-float 7s ease-in-out infinite}
  .tour-badge{opacity:var(--e,0); scale:calc(.6 + var(--e,0) * .4); translate:calc((1 - var(--e,0)) * 60px) 0;
    animation:hl-float 6s ease-in-out -2s infinite}
  .tour-word{display:block; position:absolute; left:0; top:50%; z-index:0; white-space:nowrap; pointer-events:none;
    font-family:var(--font-head); font-weight:800; font-size:clamp(6rem,16vw,15rem); line-height:1; letter-spacing:-.04em;
    color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07); opacity:0; will-change:transform,opacity}
  .tour-dots{display:flex; gap:.35rem; margin-top:var(--sp-7); justify-content:center; flex-wrap:wrap; position:relative; z-index:200}
  .tour-dots button{border:0; background:none; padding:.4rem .1rem; cursor:pointer; color:#7D88AE;
    font-size:.72rem; font-family:var(--font-head); display:flex; flex-direction:column; align-items:center; gap:.3rem; min-width:3.2rem}
  .tour-dots button::before{content:""; width:100%; height:3px; border-radius:3px; background:rgba(255,255,255,.14);
    transition:background .3s}
  .tour-dots button.is-on{color:#fff}
  .tour-dots button.is-on::before{background:var(--c)}
  .tour-dots button span{max-width:6.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
/* มือถือ: การ์ดบินเข้าเมื่อเลื่อนมาเจอ */
@media (max-width:899.98px){
  .tour-side{left:-2%; width:40%}
  html.js .tour-card{opacity:0; transform:translateY(60px) rotate(6deg) scale(.92);
    transition:opacity .8s var(--ease), transform .9s var(--ease)}
  html.js .tour-card:nth-of-type(even){transform:translateY(60px) rotate(-6deg) scale(.92)}
  html.js .tour-card.is-in{opacity:1; transform:none}
}

/* ───────── แถบหัวหน้าต่างเบราว์เซอร์บนภาพหน้าจอ (ใช้ในทัวร์) ───────── */
.sr-bar{display:flex; align-items:center; gap:5px; padding:.45rem .7rem; background:#F3F5FA;
  border-bottom:3px solid var(--c)}
.sr-bar i{width:8px; height:8px; border-radius:50%; background:#D5DAE6}
.sr-bar b{margin-left:.4rem; font-family:var(--font-head); font-size:.8rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ───────── การ์ดทั้งเว็บ: เอียงตามเมาส์ + แสงสะท้อน (desktop, JS ใส่ .tilting) ───────── */
.card-elev{position:relative}
html.js .card-elev.tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  box-shadow:0 26px 50px -24px rgba(18,23,41,.35); transition:transform .12s linear, box-shadow .3s}
.card-elev::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,0%), rgba(113,228,209,.18), transparent 60%);
  transition:opacity .3s}
.card-elev.tilting::after{opacity:1}

/* ───────── หัวข้อเผยจากเบลอ + การ์ดในกริดโผล่ทีละใบ ───────── */
html.js h2.reveal{filter:blur(8px); transform:translateY(26px) scale(.98);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease)}
html.js h2.reveal.is-visible{filter:none; transform:none}
html.js .grid > .reveal:nth-child(3n+2), html.js .grid > * > .reveal:nth-child(3n+2){transition-delay:.1s}
html.js .grid > .reveal:nth-child(3n+3), html.js .grid > * > .reveal:nth-child(3n+3){transition-delay:.2s}
html.js .grid > .card-elev.reveal:not(.is-visible){transform:translateY(40px) rotateX(12deg); transform-origin:50% 100%}

/* ───────── HERO ฝั่งข้อความ: ให้มีชีวิต ───────── */
.hero h1{font-size:clamp(2.6rem,5.4vw,3.9rem)}
.hero-eyebrow{display:inline-flex; align-items:center; gap:.55rem; padding:.4rem .9rem .4rem .7rem; border-radius:16px;
  letter-spacing:.04em; line-height:1.45;
  background:color-mix(in srgb,var(--mint) 9%,white); border:1px solid color-mix(in srgb,var(--mint) 22%,transparent)}
.live-dot{width:8px; height:8px; border-radius:50%; background:#1FB39A; flex:none; position:relative}
.live-dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:#1FB39A; animation:live 1.8s ease-out infinite}
@keyframes live{from{transform:scale(1); opacity:.7} to{transform:scale(3); opacity:0}}

.h1-mask{display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.18em}
.h1-main{display:inline-block; position:relative;
  background:linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, var(--mint-600,#2A6F67) 48%, #3FBFAA 52%, var(--ink) 62%, var(--ink) 100%);
  background-size:260% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:h1-up 1s var(--ease) .1s both, h1-sheen 7s ease-in-out 1.4s infinite}
@keyframes h1-up{from{transform:translateY(105%)} to{transform:none}}
@keyframes h1-sheen{0%,55%{background-position:100% 0} 85%,100%{background-position:0 0}}
.h1-swoosh{position:absolute; left:0; right:0; bottom:-.12em; width:100%; height:.22em; overflow:visible; pointer-events:none}
.h1-swoosh path{fill:none; stroke:#71E4D1; stroke-width:5; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:320;
  animation:swoosh 1.1s var(--ease) 1s forwards}
@keyframes swoosh{to{stroke-dashoffset:0}}
.h1-mark{background:linear-gradient(transparent 58%, color-mix(in srgb,#71E4D1 45%,transparent) 58%, color-mix(in srgb,#71E4D1 45%,transparent) 92%, transparent 92%)
  no-repeat 0 0 / 0% 100%; animation:mark 1s var(--ease) 1.5s forwards; -webkit-box-decoration-break:clone; box-decoration-break:clone}
@keyframes mark{to{background-size:100% 100%}}
.hero h1 .hero-h1-sub{margin-top:.7rem; animation:fade-up .8s var(--ease) .55s both}
@keyframes fade-up{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
html.js .hero-lead{animation:fade-up .8s var(--ease) .75s both}
html.js .hero .btn-row{animation:fade-up .8s var(--ease) .9s both}

.lead-chip{display:inline-flex; align-items:center; gap:.3rem; padding:.02rem .55rem .02rem .4rem; margin-inline:.1rem;
  border-radius:999px; font-weight:600; font-size:.92em; line-height:1.5; text-decoration:none; white-space:nowrap; vertical-align:baseline;
  color:var(--c); background:color-mix(in srgb,var(--c) 11%,white); border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  transition:transform .2s var(--ease), background .2s, box-shadow .2s}
.lead-chip i{font-size:.85em}
.lead-chip:hover{color:var(--c); background:color-mix(in srgb,var(--c) 18%,white); transform:translateY(-2px);
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--c) 70%,transparent)}
html.js .hero-lead .lead-chip{animation:chip-pop .6s var(--ease) both}
.hero-lead .lead-chip:nth-of-type(1){animation-delay:1.2s} .hero-lead .lead-chip:nth-of-type(2){animation-delay:1.32s}
.hero-lead .lead-chip:nth-of-type(3){animation-delay:1.44s}
@keyframes chip-pop{0%{transform:scale(.6); opacity:0} 70%{transform:scale(1.08); opacity:1} 100%{transform:none}}

.btn-glow{position:relative; isolation:isolate}
.btn-glow{overflow:hidden; animation:btn-ping 2.4s var(--ease) infinite}
@keyframes btn-ping{0%{box-shadow:0 0 0 0 rgba(113,228,209,.55)} 100%{box-shadow:0 0 0 16px rgba(113,228,209,0)}}
.btn-glow::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); animation:shine 4.5s ease-in-out 2s infinite}
.btn-glow i{transition:transform .3s var(--ease)}
.btn-glow:hover i{transform:rotate(-12deg) scale(1.15)}
[data-magnet]{transition:translate .25s var(--ease)}
[data-magnet]{translate:var(--tx,0) var(--ty,0)}

.hero-trust{align-items:center}
.trust-logos{display:flex; flex:none}
.trust-logos img{width:40px; height:40px; border-radius:50%; object-fit:contain; background:#fff; padding:3px;
  border:2px solid #fff; box-shadow:0 4px 12px -4px rgba(18,23,41,.3); margin-left:-10px; transition:transform .25s var(--ease)}
.trust-logos img:first-child{margin-left:0}
.trust-logos img:hover{transform:translateY(-3px) scale(1.12); z-index:1}

@media (prefers-reduced-motion:reduce){
  .live-dot::after,.h1-main,.h1-swoosh path,.h1-mark,.hero h1 .hero-h1-sub,html.js .hero-lead,html.js .hero .btn-row,
  html.js .hero-lead .lead-chip,.btn-glow,.btn-glow::after{animation:none !important}
  .h1-main{color:var(--ink); background:none}
  .h1-swoosh path{stroke-dashoffset:0}
  .h1-mark{background-size:100% 100%}
  [data-magnet]{translate:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-copy,.hero-stage3d,.hero-layer,.hero-orb{translate:none !important}
  .hero-stage3d{transform:none}
  .hero-layer,.hero-orb,.ig--hero .ig-hub::before,.ig--hero .ig-hub::after,.ig--hero .ig-hub-mark,
  .ig--hero .ig-grid::after,html.js .ig--hero .ig-node,html.js .hero-pills > *,html.js .hero-chips > .chip,
  .hero-chips .chip::after,.tour-side,.tour-badge{animation:none !important}
  html.js .tour-card{opacity:1; transform:none}
  html.js h2.reveal{filter:none}
  html.js .card-elev.tilting{transform:none}
}

/* ───────── ตัวเลขผลลัพธ์บนพื้นสว่าง (อยู่ในส่วน "องค์กรที่ใช้งาน") ───────── */
.stat-grid--light{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--radius-lg);
  padding:var(--sp-5); margin-bottom:var(--sp-6); box-shadow:var(--shadow-sm)}
.stat-grid--light .v{color:var(--mint-700)}
.stat-grid--light .l{color:var(--ink-muted)}

/* ───────── ปัญหาที่พบบ่อย: 2×2 บนจอกว้าง (ปัญหาอยู่บน ผลลัพธ์อยู่ล่าง) ───────── */
@media (min-width:992px){
  .pain-flow{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
  .pain-flow .pain-row{grid-template-columns:1fr; gap:.7rem; align-content:start}
  .pain-flow .pain-arrow{display:none}
  .pain-flow .pain-after{background:color-mix(in srgb,var(--mint) 7%,white); border-radius:var(--radius); padding:.8rem .9rem}
}

/* ════════════════════════════════════════════════════════════════════
 * หน้ารอง — product.php (กองการ์ดภาพหน้าจอ + ผังโมดูล + แกลเลอรีพับ) · services (แถบเวลายืด) · products (ตัวกรองลื่น)
 * ════════════════════════════════════════════════════════════════════ */

/* ---- กองการ์ดภาพหน้าจอ (หัวหน้า product.php) — ใบหน้าปลิวออก ใบถัดไปขึ้นมา · JS ตั้ง data-pos ---- */
.p-slider--stack{--mx:0; --my:0}
.p-slider--stack .p-slider-track{overflow:visible; border:0; box-shadow:none; background:none;
  transform:perspective(1300px) rotateY(calc(var(--mx) * 7deg)) rotateX(calc(var(--my) * -5deg));
  transition:transform .2s linear}
.p-slider--stack .p-slide{flex-direction:column; align-items:stretch; justify-content:flex-start;
  background:#fff; border:1px solid var(--cd-line); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(18,23,41,.45); transform-origin:50% 110%;
  transition:transform .8s var(--ease), opacity .6s var(--ease)}
.p-slider--stack .p-slide .sr-bar{flex:none; border-bottom-color:var(--c)}
.p-slider--stack .p-slide img{flex:1; min-height:0; width:100%; max-width:none; object-fit:contain; background:#F7F8FB}
.p-slider--stack .p-slide[data-pos="0"]{opacity:1; z-index:5; transform:none; pointer-events:auto}
.p-slider--stack .p-slide[data-pos="1"]{opacity:1; z-index:4; transform:translate(7%,-8%) rotate(4deg) scale(.92)}
.p-slider--stack .p-slide[data-pos="2"]{opacity:.85; z-index:3; transform:translate(12%,-14%) rotate(-3deg) scale(.84)}
.p-slider--stack .p-slide[data-pos="back"]{opacity:0; z-index:1; transform:translate(12%,-15%) scale(.8)}
.p-slider--stack .p-slide[data-pos="out"]{opacity:0; z-index:6; transform:translate(-45%,18%) rotate(-16deg) scale(.9)}
.p-slider--stack .p-slider-nav{z-index:7}
.p-slider--stack .p-slider-dots{margin-top:1.2rem}
.p-slider--stack .p-slider-dot.is-active{background:var(--c); width:22px; border-radius:4px; transition:width .3s var(--ease)}

/* ---- ผังโมดูล ---- */
.mmap{position:relative; margin:0; padding:var(--sp-5) 0 0}
.mmap-hub{position:relative; z-index:2; display:flex; align-items:center; gap:.8rem; width:max-content; max-width:100%;
  margin:0 auto var(--sp-6); padding:.8rem 1.3rem .8rem .9rem; border-radius:18px; background:var(--pine,#121729); color:#fff;
  box-shadow:0 18px 40px -18px rgba(18,23,41,.6), 0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.mmap-hub b{display:block; font-family:var(--font-head); font-size:1.15rem; color:#fff}
.mmap-hub small{display:block; color:#AEB8DA; font-size:.8rem}
.mmap-hub-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.35rem; flex:none;
  background:color-mix(in srgb,var(--c) 30%,transparent); color:#fff}
.mmap-hub::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  animation:hub-ping 2.8s var(--ease) infinite}
.mmap-lines{position:absolute; left:0; top:0; z-index:0; overflow:visible; pointer-events:none; display:none}
.mmap-lines .ln{fill:none; stroke:color-mix(in srgb,var(--c) 55%,#D5DAE6); stroke-width:2;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--ease)}
.mmap-lines .fl{fill:none; stroke:var(--c); stroke-width:3; stroke-linecap:round; stroke-dasharray:.03 .97; opacity:0}
.mmap.is-visible .mmap-lines .ln{stroke-dashoffset:0}
.mmap.is-visible .mmap-lines .fl{opacity:.9; animation:mmap-flow 3.2s linear infinite}
@keyframes mmap-flow{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
.mmap-grid{list-style:none; padding:0; margin:0; display:grid; gap:.8rem; grid-template-columns:1fr; position:relative; z-index:1}
.mmap-node{position:relative; background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:14px;
  padding:.8rem 1rem .85rem 3.1rem; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s}
.mmap-node:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 14px 30px -16px color-mix(in srgb,var(--c) 70%,transparent)}
.mmap-n{position:absolute; left:.8rem; top:.8rem; width:1.7rem; height:1.7rem; border-radius:8px; display:grid; place-items:center;
  font-family:var(--font-head); font-size:.72rem; font-weight:700; color:var(--c); background:color-mix(in srgb,var(--c) 12%,white)}
.mmap-t{display:block; font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:.95rem; line-height:1.35}
.mmap-d{display:block; font-size:.84rem; color:var(--ink-muted); line-height:1.45; margin-top:.2rem}
html.js .mmap .mmap-node{opacity:0; transform:translateY(18px) scale(.96)}
html.js .mmap.is-visible .mmap-node{opacity:1; transform:none;
  transition:opacity .6s var(--ease) calc(.25s + var(--i) * .06s), transform .6s var(--ease) calc(.25s + var(--i) * .06s), box-shadow .25s, border-color .25s}
html.js .mmap.is-visible .mmap-node:hover{transform:translateY(-3px); transition-delay:0s}
@media (min-width:640px){ .mmap-grid{grid-template-columns:1fr 1fr} }
@media (min-width:992px){
  .mmap-grid{grid-template-columns:repeat(3,1fr); gap:1rem}
  .mmap-lines{display:block}
}
/* มือถือ: เส้นแกนตั้งด้านซ้ายแทนเส้นแตกแขนง */
@media (max-width:639.98px){
  .mmap-grid{padding-left:1rem; border-left:2px solid color-mix(in srgb,var(--c) 35%,transparent)}
  .mmap-hub{margin-left:0}
}

/* ---- แกลเลอรีภาพหน้าจอ: พับไว้ 6 ภาพ ---- */
.shots-more:not([hidden]){display:contents}

/* ---- services: แถบระยะเวลาแต่ละขั้นยืดออกทีละขั้นเมื่อเลื่อนมาถึง ---- */
html.js .hisT .hisT-track i{transition:width 1.1s var(--ease)}
html.js .hisT.reveal:not(.is-visible) .hisT-track i{width:0 !important}
html.js .hisT .hisT-n{transition:transform .5s var(--ease), background .3s}
html.js .hisT.reveal:not(.is-visible) .hisT-n{transform:scale(.4)}
/* ยืดทีละขั้นตามลำดับ */
html.js .hisT-list li:nth-child(1) .hisT-track i{transition-delay:0.00s}
html.js .hisT-list li:nth-child(2) .hisT-track i{transition-delay:0.08s}
html.js .hisT-list li:nth-child(3) .hisT-track i{transition-delay:0.16s}
html.js .hisT-list li:nth-child(4) .hisT-track i{transition-delay:0.24s}
html.js .hisT-list li:nth-child(5) .hisT-track i{transition-delay:0.32s}
html.js .hisT-list li:nth-child(6) .hisT-track i{transition-delay:0.40s}
html.js .hisT-list li:nth-child(7) .hisT-track i{transition-delay:0.48s}
html.js .hisT-list li:nth-child(8) .hisT-track i{transition-delay:0.56s}
html.js .hisT-list li:nth-child(9) .hisT-track i{transition-delay:0.64s}
html.js .hisT-list li:nth-child(10) .hisT-track i{transition-delay:0.72s}
html.js .hisT-list li:nth-child(11) .hisT-track i{transition-delay:0.80s}
html.js .hisT-list li:nth-child(12) .hisT-track i{transition-delay:0.88s}

@media (prefers-reduced-motion:reduce){
  .p-slider--stack .p-slider-track{transform:none}
  .p-slider--stack .p-slide{transition:opacity .3s}
  .p-slider--stack .p-slide:not([data-pos="0"]){transform:none; opacity:0}
  .mmap-hub::after,.mmap.is-visible .mmap-lines .fl{animation:none}
  html.js .mmap .mmap-node{opacity:1; transform:none}
  .mmap-lines .ln{stroke-dashoffset:0}
  html.js .hisT .hisT-track i{transition:none}
}

/* ════════════════════════════════════════════════════════════════════
 * BENTO บริการ · สลับดูปัญหา ก่อน/หลัง · ตาราง "ใครทำอะไร"
 * ════════════════════════════════════════════════════════════════════ */

/* ---- Bento ---- */
.bento{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
.bt{--c:var(--mint); position:relative; display:flex; flex-direction:column; gap:.35rem; text-decoration:none; overflow:hidden;
  background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:var(--radius-lg); padding:var(--sp-5);
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.bt::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--c); transform-origin:left;
  transform:scaleX(.18); transition:transform .5s var(--ease)}
.bt:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--c) 35%,transparent)}
.bt:hover::before{transform:scaleX(1)}
.bt-erp{--c:var(--brand-blue)} .bt-consult{--c:var(--amber); background:linear-gradient(160deg,var(--amber-tint),var(--cd-surface) 55%)}
.bt-head{display:flex; align-items:center; gap:.6rem}
.bt-ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem; flex:none;
  background:color-mix(in srgb,var(--c) 13%,white); color:var(--c)}
.bt-consult .bt-ic{color:#8A5F13}
.bt-kind{font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted)}
.bt-name{display:block; margin-top:.35rem}
.bt-name b{display:block; font-family:var(--font-head); font-size:1.6rem; line-height:1.1; color:var(--ink); letter-spacing:-.01em}
.bt-name small{display:block; font-size:.95rem; font-weight:600; color:var(--ink-body); margin-top:.2rem}
.bt-tag{font-size:.9rem; color:var(--ink-muted); line-height:1.5}
.bt-vis{display:block; margin-top:auto; padding-top:var(--sp-4)}
.bt-go{font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--c); margin-top:var(--sp-3)}
.bt-consult .bt-go{color:#8A5F13}
.bt-go i{display:inline-block; transition:transform .2s var(--ease)}
.bt:hover .bt-go i{transform:translateX(4px)}

/* HIS: ตัวเลขใหญ่ + แถบเวลาแยกขั้น */
.bt-big{display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-head); font-weight:800;
  font-size:clamp(2.4rem,4.5vw,3.4rem); line-height:1; color:var(--mint-700); letter-spacing:-.03em}
.bt-big small{font-size:.9rem; font-weight:600; color:var(--ink-muted); letter-spacing:0}
.gantt{display:flex; gap:3px; height:14px; margin-top:.9rem}
.gantt i{width:var(--w); border-radius:4px; background:color-mix(in srgb,var(--mint) calc(35% + var(--i) * 6%),white)}
html.js .bt-his .gantt i{transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease) calc(.3s + var(--i) * .09s)}
html.js .bt-his.is-visible .gantt i{transform:none}
.gantt-lbl{display:flex; justify-content:space-between; gap:1rem; font-size:.74rem; color:var(--ink-muted); margin-top:.4rem}

/* ERP: ลูกโซ่ PR→PO→…  แสงวิ่งผ่านทีละข้อ */
.chain{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem}
.chain span{position:relative; font-family:var(--font-head); font-weight:700; font-size:.85rem; padding:.35rem .6rem; border-radius:8px;
  background:var(--brand-blue-tint); color:var(--brand-blue-ink); animation:chain-lit calc(var(--n) * .8s) linear infinite;
  animation-delay:calc(var(--i) * .8s)}
.chain span:not(:last-child)::after{content:"→"; position:absolute; right:-.85rem; top:50%; transform:translateY(-50%);
  color:var(--brand-blue); font-weight:400}
.chain span + span{margin-left:.55rem}
@keyframes chain-lit{0%,18%{background:var(--brand-blue); color:#fff} 26%,100%{background:var(--brand-blue-tint); color:var(--brand-blue-ink)}}

/* HRIS: ตารางเวรจำลอง */
.roster{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.roster b{font-size:.62rem; font-weight:600; color:var(--ink-muted); text-align:center}
.roster i{height:16px; border-radius:4px}
.sh-m{background:#9FDCCF} .sh-a{background:#F2C46B} .sh-n{background:#5B6FB0} .sh-o{background:var(--cd-bg)}
html.js .bt-hris-impl .roster i{opacity:0; transform:scale(.4); transition:opacity .3s, transform .4s var(--ease); transition-delay:calc(.2s + var(--i) * .025s)}
html.js .bt-hris-impl.is-visible .roster i{opacity:1; transform:none}
.roster-key{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; font-size:.72rem; color:var(--ink-muted); margin-top:.55rem}
.roster-key i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:-.4rem}

/* PMS: ผังห้องพัก */
.rooms{display:grid; grid-template-columns:repeat(6,1fr); gap:4px}
.rooms i{font-style:normal; font-size:.64rem; font-weight:700; text-align:center; padding:.35rem 0; border-radius:5px; color:#fff}
.rm-in{background:var(--mint-600,#2A6F67)} .rm-free{background:var(--cd-bg); color:var(--ink-muted) !important} .rm-clean{background:var(--amber)}
.rooms .rm-clean{animation:room-blink 2.4s ease-in-out infinite}
@keyframes room-blink{50%{opacity:.55}}

/* ที่ปรึกษา: เส้นทางทีละขั้น */
.path{position:relative; display:flex; justify-content:space-between; align-items:center}
.path::before{content:""; position:absolute; left:6%; right:6%; top:50%; height:2px; background:color-mix(in srgb,var(--amber) 35%,transparent)}
.path-step{position:relative; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:1rem;
  background:#fff; border:2px solid color-mix(in srgb,var(--amber) 40%,transparent); color:#9A6A15;
  transition:background .4s, color .4s, transform .4s var(--ease), box-shadow .4s}
.path-step.is-on{background:var(--amber); color:#fff; transform:scale(1.15); box-shadow:0 0 0 6px color-mix(in srgb,var(--amber) 20%,transparent)}
.path-cap{display:block; min-height:2.8em; margin-top:.8rem; font-size:.85rem; font-weight:600; color:#6E4C10; transition:opacity .3s}
.chips{display:flex; flex-wrap:wrap; gap:.35rem}
.chips i{font-style:normal; font-size:.78rem; padding:.25rem .6rem; border-radius:999px; background:var(--mint-tint); color:var(--mint-700)}

@media (min-width:768px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bt-his{grid-column:span 2}
}
@media (min-width:1100px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bt-his{grid-column:span 2}
  .bt-his .bt-name b{font-size:2rem}
}

/* ---- สลับดูปัญหา ก่อน/หลัง ---- */
.psw{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
.psw-tabs{display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem}
.psw-tabs::-webkit-scrollbar{display:none}
.psw-tabs button{position:relative; display:flex; align-items:center; gap:.6rem; flex:none; text-align:left; cursor:pointer;
  background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:14px; padding:.7rem .9rem .8rem; overflow:hidden;
  font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--ink-body); transition:background .25s, border-color .25s, color .25s, box-shadow .25s}
.psw-tabs button:hover{border-color:color-mix(in srgb,var(--mint) 35%,transparent)}
.psw-tabs button[aria-selected="true"]{background:var(--pine,#121729); border-color:transparent; color:#fff; box-shadow:0 14px 30px -16px rgba(18,23,41,.6)}
.psw-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:#FBEAE6; color:#8A2F1D}
.psw-tabs button[aria-selected="true"] .psw-ic{background:rgba(255,255,255,.12); color:#FFB4A2}
.psw-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent}
.psw-bar i{display:block; height:100%; width:0; background:#71E4D1}
.psw-tabs button[aria-selected="true"] .psw-bar i{animation:psw-prog var(--psw-dur,6s) linear forwards}
.psw.is-paused .psw-tabs button .psw-bar i{animation-play-state:paused}
@keyframes psw-prog{to{width:100%}}
.psw-stage{position:relative}
.psw-panel{display:grid; grid-template-columns:1fr; gap:var(--sp-3); align-items:stretch}
.psw-panel:not([hidden]){animation:psw-in .55s var(--ease) both}
@keyframes psw-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.psw-before,.psw-after{position:relative; border-radius:var(--radius-lg); padding:var(--sp-5); overflow:hidden}
.psw-before{background:#FBF1EE; border:1px solid #F1D9D2}
.psw-after{background:color-mix(in srgb,var(--mint) 8%,white); border:1px solid color-mix(in srgb,var(--mint) 25%,transparent)}
.psw-before p,.psw-after p{margin:.35rem 0 0; font-size:1.02rem; line-height:1.6}
.psw-before p{color:#6B4A42}
.psw-after p{color:var(--ink); font-weight:500}
.psw-art{display:flex; align-items:center; height:64px; margin-bottom:.6rem; position:relative}
.psw-mess i{font-size:2.1rem; color:#C98A7B; position:absolute; animation:psw-shuffle 3.4s ease-in-out infinite}
.psw-mess i:nth-child(1){left:0; rotate:-14deg}
.psw-mess i:nth-child(2){left:28px; top:6px; rotate:9deg; animation-delay:-.8s; opacity:.8}
.psw-mess i:nth-child(3){left:56px; top:-2px; rotate:-4deg; animation-delay:-1.6s; opacity:.6}
@keyframes psw-shuffle{50%{translate:0 -5px}}
.psw-clean{width:64px; justify-content:center; border-radius:18px; background:#fff; box-shadow:0 10px 24px -12px rgba(42,111,103,.5)}
.psw-clean > i{font-size:2rem; color:var(--mint-700)}
.psw-clean b{position:absolute; right:-8px; top:-8px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--mint-600,#2A6F67); color:#fff; font-size:.9rem; animation:psw-pop .5s var(--ease) .35s both}
@keyframes psw-pop{from{transform:scale(0)} 70%{transform:scale(1.25)} to{transform:none}}
.psw-arrow{display:grid; place-items:center; color:var(--mint-600); font-size:1.4rem; transform:rotate(90deg)}
.psw-panel:not([hidden]) .psw-arrow i{animation:psw-nudge 1.6s ease-in-out infinite}
@keyframes psw-nudge{50%{translate:6px 0}}
@media (min-width:992px){
  .psw{grid-template-columns:minmax(15rem,.38fr) 1fr; align-items:stretch}
  .psw-tabs{flex-direction:column; overflow:visible}
  .psw-tabs button{padding:.9rem 1rem 1rem}
  .psw-panel{grid-template-columns:1fr auto 1fr; height:100%}
  .psw-arrow{transform:none}
}

/* ---- ตาราง "ใครทำอะไร" ---- */
.emx{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
.emx-labels{display:none}
.emx-col{--c:var(--mint); position:relative; display:flex; flex-direction:column; background:var(--cd-surface); border:1px solid var(--cd-line);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s}
.emx-col.eng-impl{--c:var(--brand-blue)} .emx-col.eng-consult{--c:var(--amber)}
.emx-col::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--c)}
.emx-col:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.emx-top{padding:var(--sp-5) var(--sp-5) var(--sp-3); display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.2rem .7rem}
.emx-top .eng-ic{grid-row:span 2; background:color-mix(in srgb,var(--c) 13%,white); color:var(--c)}
.emx-top .eng-label{color:var(--c)}
.emx-col.eng-consult .emx-top .eng-ic,.emx-col.eng-consult .emx-top .eng-label{color:#9A6A15}
.emx-top h3{margin:0; font-size:1.12rem}
.emx-cells{list-style:none; margin:0; padding:0 var(--sp-5)}
.emx-cell{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; border-top:1px dashed var(--cd-line);
  font-size:.88rem; color:var(--ink-body); min-height:3rem}
.emx-txt b{font-family:var(--font-head); color:var(--ink); text-align:right}
.emx-dot{width:18px; height:18px; border-radius:50%; flex:none; display:inline-block; border:2px solid var(--c,var(--mint)); position:relative}
.emx-dot.lv2{background:var(--c,var(--mint))}
.emx-dot.lv1{background:linear-gradient(90deg,var(--c,var(--mint)) 50%,transparent 50%)}
.emx-dot.lv0{border-color:var(--cd-line); background:none}
.emx-dot.lv0::after{content:""; position:absolute; left:3px; right:3px; top:50%; height:2px; background:var(--cd-line); transform:translateY(-50%)}
html.js .emx .emx-dot{transform:scale(0); transition:transform .45s var(--ease) calc(.3s + var(--ci) * .12s + var(--ri) * .07s)}
html.js .emx.is-visible .emx-dot{transform:none}
.emx-go{margin-top:auto; padding:var(--sp-4) var(--sp-5) var(--sp-5); font-family:var(--font-head); font-weight:600; color:var(--c); text-decoration:none}
.emx-col.eng-consult .emx-go{color:#8A5F13}
.emx-go i{display:inline-block; transition:transform .2s var(--ease)}
.emx-col:hover .emx-go i{transform:translateX(4px)}
.emx-key{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem 1.2rem; margin-top:var(--sp-4);
  font-size:.82rem; color:var(--ink-muted)}
.emx-key .emx-dot{--c:var(--ink-muted); width:14px; height:14px; margin-right:-.8rem; transform:none !important}
@media (min-width:992px){
  /* จอกว้าง: คอลัมน์ป้ายด้านซ้าย + 3 คอลัมน์ · ซ่อนป้ายในเซลล์ แล้วจัดจุดไว้กลาง */
  .emx{grid-template-columns:minmax(12rem,.9fr) repeat(3,1fr); gap:var(--sp-3); align-items:stretch}
  .emx-labels{display:flex; flex-direction:column}
  .emx-corner{height:var(--emx-top,8.2rem)}
  .emx-rl,.emx-cell{height:3.6rem; min-height:0}
  .emx-rl{display:flex; align-items:center; padding:.4rem 0; border-top:1px dashed var(--cd-line); line-height:1.3;
    font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink)}
  .emx-top{height:var(--emx-top,8.2rem); align-content:center}
  .emx-ml{display:none}
  .emx-cell{justify-content:center}
  .emx-txt b{text-align:center; font-size:.9rem}
}

@media (prefers-reduced-motion:reduce){
  .chain span,.rooms .rm-clean,.psw-mess i,.psw-clean b,.psw-panel:not([hidden]),.psw-panel .psw-arrow i{animation:none !important}
  html.js .bt-his .gantt i,html.js .bt-hris-impl .roster i,html.js .emx .emx-dot{transform:none; opacity:1}
  .psw-tabs button .psw-bar i{animation:none !important}
}

/* ข้อความเน้น "เลือกโมดูลได้ ไม่บังคับ" ใต้ตาราง "ใครทำอะไร" */
.emx-note{display:flex; align-items:center; justify-content:center; gap:.6rem; max-width:52rem; margin:var(--sp-5) auto 0;
  padding:.8rem 1.2rem; border-radius:14px; background:color-mix(in srgb,var(--mint) 9%,white);
  border:1px dashed color-mix(in srgb,var(--mint) 40%,transparent); font-family:var(--font-head); font-weight:600; color:var(--mint-700); text-align:left}
.emx-note i{font-size:1.25rem; flex:none}
.emx-txt b{font-size:.86rem; line-height:1.35}
@media (min-width:992px){ .emx-txt b{font-size:.84rem} }
@media (max-width:991.98px){
  .emx-txt{flex-direction:column; align-items:flex-start; gap:.15rem; justify-content:center}
  .emx-txt b{text-align:left}
}

/* ════════ โรงพยาบาล | SME — สองแผงคู่ (แทน 2 เซกชันยาว + "การเชื่อมทุกระบบ") ════════ */
.aud{background:var(--cd-surface-2); padding-block:var(--sp-8)}
.aud-grid{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
.aud-panel{position:relative; display:flex; flex-direction:column; gap:var(--sp-4); border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-5); overflow:hidden}
.aud-panel h2{font-size:clamp(1.45rem,2.6vw,1.95rem); margin:-.4rem 0 0; line-height:1.25}
.aud-panel .btn-row{margin-top:auto; padding-top:var(--sp-2)}
.aud-link{font-family:var(--font-head); font-weight:600; text-decoration:none}
.aud-link i{display:inline-block; transition:transform .2s var(--ease)}
.aud-link:hover i{transform:translateX(4px)}

.aud-hos{background:var(--pine,#121729); color:#DDE3F4}
.aud-hos::after{content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(113,228,209,.22),transparent 70%)}
.aud-hos h2{color:#fff} .aud-hos .eyebrow{color:#97D8D0} .aud-hos .aud-link{color:#97D8D0} .aud-hos .aud-link:hover{color:#fff}
.aud-care{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:var(--sp-4)}
.aud-care-lbl{display:block; font-family:var(--font-head); font-weight:600; color:#fff; margin-bottom:.6rem}
.aud-bars{display:grid; gap:.55rem}
.aud-bars > div{display:grid; grid-template-columns:6.5rem 1fr 2.8rem; align-items:center; gap:.7rem}
.aud-bars small{font-size:.8rem; color:#AEB8DA}
.aud-bars b{font-family:var(--font-head); font-size:1.05rem; color:#fff; text-align:right}
.aud-bars .is-after b{color:#71E4D1; font-size:1.3rem}
.aud-bar{height:12px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden}
.aud-bar i{display:block; height:100%; width:var(--p); border-radius:6px; background:#7C88B3}
.aud-bars .is-after .aud-bar i{background:linear-gradient(90deg,#2A6F67,#71E4D1)}
html.js .aud-hos:not(.is-visible) .aud-bar i{width:0}
html.js .aud-bar i{transition:width 1.2s var(--ease) .3s}
html.js .aud-bars .is-after .aud-bar i{transition-delay:.7s}
.aud-note{font-size:.74rem; color:#8E99C2; margin:.6rem 0 0}
.aud-std{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem}
.aud-std li{display:inline-flex; align-items:center; gap:.35rem; font-size:.84rem; font-weight:600; padding:.35rem .7rem; border-radius:999px;
  background:rgba(113,228,209,.1); border:1px solid rgba(113,228,209,.25); color:#E7ECFA; cursor:default}
.aud-std li i{color:#71E4D1}

.aud-sme{background:var(--cd-surface); border:1px solid var(--cd-line); box-shadow:var(--shadow-sm)}
.aud-sme .aud-link{color:var(--mint-700)}
.aud-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; position:relative}
.aud-steps::before{content:""; position:absolute; left:16%; right:16%; top:22px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--mint),var(--brand-blue),var(--pine,#121729))}
html.js .aud-sme:not(.is-visible) .aud-steps::before{transform:scaleX(0)}
html.js .aud-steps::before{transform-origin:left; transition:transform 1.1s var(--ease) .3s}
.aud-steps li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.2rem}
.aud-n{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1.1rem;
  color:#fff; background:var(--mint); box-shadow:0 0 0 5px var(--cd-surface); margin-bottom:.35rem}
.aud-steps li:nth-child(2) .aud-n{background:var(--brand-blue)} .aud-steps li:nth-child(3) .aud-n{background:var(--pine,#121729)}
html.js .aud-sme:not(.is-visible) .aud-n{transform:scale(.3)}
html.js .aud-n{transition:transform .5s var(--ease) calc(.4s + var(--i) * .25s)}
.aud-steps b{font-family:var(--font-head); color:var(--ink); font-size:1rem}
.aud-steps small{font-size:.76rem; color:var(--ink-muted); background:var(--cd-bg); border-radius:999px; padding:.1rem .55rem}
.aud-lead{margin:0; font-size:.92rem; color:var(--ink-body); padding:.8rem 1rem; border-radius:12px; background:color-mix(in srgb,var(--mint) 7%,white)}

@media (min-width:900px){
  .aud-grid{grid-template-columns:1.1fr 1fr}
  .aud-panel{padding:var(--sp-7) var(--sp-6)}
}
@media (prefers-reduced-motion:reduce){
  html.js .aud-bar i,html.js .aud-n,html.js .aud-steps::before{transition:none}
}

/* ════════ FAQ + ติดต่อ — ให้เข้าชุดกับส่วนบนของหน้า (แผงกรมท่า · การ์ดมุมโค้ง · มินต์) ════════ */
/* ---- FAQ: หัวข้อซ้าย (ติดจอ) + รายการคำถามเป็นการ์ดแยกใบ ---- */
.faq-grid{display:grid; gap:var(--sp-6); grid-template-columns:1fr}
.faq-side h2{margin:.3rem 0 .6rem}
.faq-sub{color:var(--ink-body); margin:0 0 var(--sp-5)}
.faq-help{display:grid; gap:.6rem; justify-items:start; padding:var(--sp-5); border-radius:var(--radius-lg);
  background:var(--pine,#121729); color:#fff; position:relative; overflow:hidden}
.faq-help::after{content:""; position:absolute; right:-60px; bottom:-60px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,rgba(113,228,209,.25),transparent 70%); pointer-events:none}
.faq-help b{font-family:var(--font-head); font-size:1.15rem; color:#fff}
.faq-help-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem; background:rgba(113,228,209,.15); color:#71E4D1}
.faq-help .btn-outline-mint{color:#E7ECFA; border-color:rgba(255,255,255,.35)}
.faq-help .btn-outline-mint:hover{background:rgba(255,255,255,.08); color:#fff}
.faq-list.accordion{border:0; border-radius:0; overflow:visible; display:grid; gap:.6rem; --bs-accordion-bg:var(--cd-surface)}
.faq-list .accordion-item{border:1px solid var(--cd-line) !important; border-radius:16px !important; overflow:hidden; background:var(--cd-surface);
  box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease), border-color .3s}
.faq-list .accordion-item:has(.accordion-button:not(.collapsed)){border-color:color-mix(in srgb,var(--mint) 45%,transparent) !important;
  box-shadow:0 18px 40px -24px rgba(42,111,103,.55)}
.faq-list .accordion-button{gap:.9rem; padding:1rem 1.1rem; background:transparent; box-shadow:none; color:var(--ink); font-size:1rem; line-height:1.4}
.faq-list .accordion-button::after{display:none}
.faq-list .accordion-button:not(.collapsed){color:var(--mint-700)}
.faq-n{flex:none; width:2rem; height:2rem; border-radius:10px; display:grid; place-items:center; font-size:.75rem; font-weight:700;
  background:var(--cd-bg); color:var(--ink-muted); transition:background .3s, color .3s}
.accordion-button:not(.collapsed) .faq-n{background:var(--mint-600,#2A6F67); color:#fff}
.faq-q{flex:1}
.faq-pm{flex:none; position:relative; width:28px; height:28px; border-radius:50%; background:var(--cd-bg); transition:background .3s, transform .4s var(--ease)}
.faq-pm::before,.faq-pm::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; border-radius:2px; background:var(--ink-muted);
  transform:translate(-50%,-50%); transition:transform .35s var(--ease), background .3s}
.faq-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.accordion-button:not(.collapsed) .faq-pm{background:color-mix(in srgb,var(--mint) 15%,white); transform:rotate(180deg)}
.accordion-button:not(.collapsed) .faq-pm::before,.accordion-button:not(.collapsed) .faq-pm::after{background:var(--mint-700)}
.accordion-button:not(.collapsed) .faq-pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-list .accordion-body{padding:0 1.1rem 1.1rem 4rem; color:var(--ink-body); font-size:.95rem; line-height:1.7}
@media (min-width:992px){
  .faq-grid{grid-template-columns:minmax(16rem,.75fr) 1.25fr; gap:var(--sp-8); align-items:start}
  .faq-side{position:sticky; top:calc(var(--nav-h) + 24px)}
}

/* ---- ติดต่อ: แผงกรมท่า (หัวข้อ + ขั้นตอน + ช่องทางกดได้) คู่กับการ์ดฟอร์ม ---- */
.contact-grid{align-items:stretch}
.contact-info{order:-1; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--sp-5);
  background:var(--pine,#121729); color:#C7D0EC; border-radius:var(--radius-lg); padding:var(--sp-6) var(--sp-5)}
.contact-info::before{content:""; position:absolute; left:-90px; top:-90px; width:300px; height:300px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(113,228,209,.2),transparent 70%)}
.contact-info > *{position:relative}
.ci-title{color:#fff; font-size:clamp(1.5rem,2.6vw,2rem); margin:0; line-height:1.25}
.ci-sub{margin:-.6rem 0 0; color:#AEB8DA}
.ci-steps{list-style:none; margin:0; padding:0; display:grid; gap:.1rem; counter-reset:none}
.ci-steps li{position:relative; display:flex; align-items:center; gap:.8rem; padding:.45rem 0; color:#E7ECFA; font-weight:500}
.ci-steps li:not(:last-child)::after{content:""; position:absolute; left:19px; top:calc(50% + 20px); height:calc(100% - 30px); width:2px;
  background:linear-gradient(rgba(113,228,209,.5),rgba(113,228,209,.1))}
.ci-steps span{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:rgba(113,228,209,.12); border:1px solid rgba(113,228,209,.35); color:#71E4D1}
html.js .contact-info:not(.is-visible) .ci-steps li{opacity:0; transform:translateX(-14px)}
html.js .ci-steps li{transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(.2s + var(--i) * .15s)}
.ci-actions{display:grid; gap:.5rem}
.ci-act{display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; transition:background .25s, transform .25s var(--ease), border-color .25s}
.ci-act:hover{background:rgba(255,255,255,.12); border-color:rgba(113,228,209,.5); color:#fff; transform:translateX(4px)}
.ci-act small{display:block; font-size:.72rem; color:#8E99C2}
.ci-act b{display:block; font-family:var(--font-head); font-weight:600; font-size:.98rem; word-break:break-all; color:#fff}
.ci-ic{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background:#71E4D1; color:var(--pine,#121729); font-size:1rem}
.ci-line .ci-ic{background:#06C755; color:#fff}
.ci-meta{margin:0; display:grid; gap:.5rem; font-size:.86rem; margin-top:auto}
.ci-meta div{display:flex; gap:.6rem}
.ci-meta dt{color:#71E4D1; font-weight:400; margin:0}
.ci-meta dd{margin:0; color:#AEB8DA}
.contact-info .map{border-color:rgba(255,255,255,.12)}

/* การ์ดฟอร์ม: เปิดโล่งขึ้น · ระบบที่สนใจเป็นชิปกดเลือก */
.form-card{padding:var(--sp-6) var(--sp-5); border-radius:var(--radius-lg); box-shadow:0 30px 60px -40px rgba(18,23,41,.35)}
.form-card .form-control,.form-card .form-select{background:var(--cd-bg); border-color:transparent; transition:background .2s, border-color .2s, box-shadow .2s}
.form-card .form-control:hover,.form-card .form-select:hover{border-color:var(--cd-line)}
.form-card .form-control:focus,.form-card .form-select:focus{background:#fff; border-color:var(--mint)}
.form-card .interest-grid{display:flex; flex-wrap:wrap; gap:.4rem}
.form-card .interest-grid .form-check{margin:0; padding:0; min-height:0}
.form-card .interest-grid .form-check-input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.form-card .interest-grid .form-check-label{display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; user-select:none;
  padding:.4rem .8rem; border-radius:999px; border:1px solid var(--cd-line); background:#fff; font-size:.88rem; color:var(--ink-body);
  transition:background .2s, border-color .2s, color .2s}
.form-card .interest-grid .form-check-label::before{content:"+"; font-weight:700; color:var(--ink-muted); width:.8rem; text-align:center}
.form-card .interest-grid .form-check-label:hover{border-color:var(--mint)}
.form-card .interest-grid .form-check-input:checked + .form-check-label{background:var(--mint-600,#2A6F67); border-color:transparent; color:#fff}
.form-card .interest-grid .form-check-input:checked + .form-check-label::before{content:"✓"; color:#71E4D1}
.form-card .interest-grid .form-check-input:focus-visible + .form-check-label{box-shadow:var(--focus)}
.form-card button[type=submit]{width:100%; justify-content:center}
@media (min-width:992px){
  .contact-grid{grid-template-columns:.85fr 1.15fr}
  .contact-info{padding:var(--sp-7) var(--sp-6)}
  .form-card{padding:var(--sp-7) var(--sp-6)}
}
@media (prefers-reduced-motion:reduce){
  html.js .ci-steps li{transition:none; opacity:1; transform:none}
}

/* ---- bento: ช่องซอฟต์แวร์ที่ใช้งานจริงแล้ว (ภาพหน้าจอจริง) ---- */
.bt-live{margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:700; letter-spacing:.02em;
  padding:.22rem .6rem; border-radius:999px; background:#E3F6EF; color:#16704F; white-space:nowrap}
.bt-live i{width:7px; height:7px; border-radius:50%; background:#1FB39A; position:relative}
.bt-live i::after{content:""; position:absolute; inset:0; border-radius:50%; background:#1FB39A; animation:live 1.8s ease-out infinite}
.bt-product .bt-name small{display:inline-block; width:max-content; margin-top:.35rem; font-size:.78rem; padding:.12rem .55rem; border-radius:999px;
  background:color-mix(in srgb,var(--c) 12%,white); color:var(--c)}
.bt-shot{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--cd-line); background:#fff;
  box-shadow:0 18px 36px -24px rgba(18,23,41,.45); transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.bt-shot .sr-bar{border-bottom-color:var(--c)}
.bt-shot img{display:block; width:100%; height:auto; aspect-ratio:16/6.6; object-fit:cover; object-position:50% 0;
  transition:object-position 2.6s ease-in-out}
.bt-product:hover .bt-shot{transform:translateY(-3px) rotate(-.6deg); box-shadow:0 26px 44px -24px rgba(18,23,41,.55)}
.bt-product:hover .bt-shot img{object-position:50% 100%}   /* ชี้แล้ว "เลื่อนดู" หน้าจอลงไปเอง */
.bt-product .bt-vis{padding-top:0; margin-top:var(--sp-4)}
@media (prefers-reduced-motion:reduce){ .bt-live i::after{animation:none} .bt-shot img{transition:none} }

/* ---- bento สินค้า: เส้นทางฟีเจอร์หลัก (ใช้สีประจำหมวดของระบบแทนสีทองของที่ปรึกษา) ---- */
.path--feat{margin-top:var(--sp-3)}
.path--feat::before{background:color-mix(in srgb,var(--c) 30%,transparent)}
.path--feat .path-step{width:34px; height:34px; font-size:.92rem; border-color:color-mix(in srgb,var(--c) 35%,transparent); color:var(--c)}
.path--feat .path-step.is-on{background:var(--c); color:#fff; box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent)}
.bt-product .path-cap{color:var(--ink); font-weight:500; font-size:.86rem; line-height:1.45; min-height:2.9em; margin-top:.7rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.path-cap.is-swap{opacity:0}

/* ════ Bento แบบกระชับ (ให้เห็นครบในจอเดียว) — ซอฟต์แวร์ 3 ระบบเป็นกล่องแนวนอน ภาพหน้าจอเต็มภาพ 16:10 ไม่ครอป ════ */
.bt-product .bt-shot img{aspect-ratio:16/10; object-fit:cover; object-position:50% 0}
.bt-product:hover .bt-shot img{object-position:50% 0}          /* ภาพเต็มแล้ว ไม่ต้องเลื่อนดู */
.bt-product:hover .bt-shot{transform:translateY(-3px) scale(1.02)}
@media (min-width:1100px){
  .bento{grid-template-columns:repeat(4,1fr); gap:var(--sp-3)}
  .bt{padding:var(--sp-4) var(--sp-5)}
  .bt-name b{font-size:1.45rem}
  .bt-his{grid-column:span 1; order:4}
  .bt-his .bt-name b{font-size:1.45rem}
  .bt-his .bt-tag{display:none}
  .bt-his .bt-big{font-size:2.6rem}
  .bt-consult{order:5}
  .bt-consult .bt-tag{display:none}
  .bt-p-mintpulse{order:1} .bt-p-mint-hris{order:2} .bt-p-mint-seo{order:3}
  .bt-product{grid-column:span 2; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); column-gap:var(--sp-5); align-items:start;
    grid-template-areas:"head shot" "name shot" "path shot" "cap shot" "go shot"; grid-template-rows:auto auto auto auto 1fr}
  .bt-product > .bt-head{grid-area:head}
  .bt-product > .bt-name{grid-area:name}
  .bt-product > .path{grid-area:path}
  .bt-product > .path-cap{grid-area:cap}
  .bt-product > .bt-tag{grid-area:path}
  .bt-product > .bt-go{grid-area:go; align-self:end}
  .bt-product > .bt-vis{grid-area:shot; margin:0; align-self:center}
  .bt-product .bt-head{flex-wrap:wrap; row-gap:.4rem}
  .bt-product .bt-live{margin-left:0}
  .bt-product .path-step{width:30px; height:30px; font-size:.82rem}
  .bt-product .path-cap{font-size:.82rem}
}
@media (min-width:1100px){
  /* หัวข้อส่วนบริการแบบแถวเดียว: หัวข้อซ้าย คำอธิบายขวา — ให้ bento ทั้งชุดอยู่ในจอเดียว */
  #services{padding-block:var(--sp-6)}
  #services .section-head{display:grid; grid-template-columns:auto 1fr; column-gap:var(--sp-7); align-items:end; text-align:left;
    max-width:none; margin-bottom:var(--sp-4)}
  #services .section-head .eyebrow{grid-column:1; margin:0}
  #services .section-head h2{grid-column:1; margin:0}
  #services .section-head .lead{grid-column:2; grid-row:1 / span 2; margin:0; font-size:.95rem; max-width:none}
  #services > .wrap > p.text-center{margin-top:var(--sp-4) !important}
}