:root{
  --navy:#06121B;--navy2:#081923;--navy3:#0C202C;
  --yellow:#FFC400;--yellow2:#8F6700;--white:#fff;
  --muted:#AAB6BD;--line:rgba(255,255,255,.12);
  --bg:#F5F6F4;--ink:#111820;--max:1380px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Noto Sans Thai","Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}
.topbar{height:54px;background:#041018;color:#dfe7eb;border-bottom:1px solid var(--line);display:flex;justify-content:center}
.topbar-inner{width:min(var(--max),calc(100% - 48px));display:grid;grid-template-columns:repeat(4,1fr)}
.top-item{display:flex;gap:10px;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:12px}
.top-item:last-child{border:0}.top-item b{display:block;color:#fff}.top-item span{display:block;color:#8fa0aa;font-size:10px;margin-top:2px}.ico{color:var(--yellow);font-size:18px}
.header{position:sticky;top:0;z-index:20;background:rgba(6,18,27,.98);border-bottom:1px solid rgba(255,255,255,.1)}
.nav{min-height:82px;width:min(var(--max),calc(100% - 48px));margin:auto;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:260px}.logo{width:44px;height:44px;border-radius:9px;background:var(--yellow);display:grid;place-items:center;font-size:25px;font-weight:900;color:#07131c}.brand strong{display:block;color:#fff;font-size:16px;letter-spacing:.08em}.brand small{color:#9eabb2;font-size:10px}
.menu{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.menu a{color:#dce5e9;font-weight:700;font-size:14px;padding:30px 13px;position:relative;white-space:nowrap}.menu a:hover,.menu a.active{color:var(--yellow)}.menu a.active:after{content:"";height:3px;background:var(--yellow);position:absolute;left:13px;right:13px;bottom:18px}
.nav-actions{display:flex;align-items:center;gap:12px}.phone{color:#e8eef0;font-size:12px}.quote{background:var(--yellow);color:#07131c;border:0;border-radius:7px;padding:14px 20px;font-weight:900;cursor:pointer}
.hero-home{min-height:620px;background:linear-gradient(100deg,#06121B 0%,#06121B 48%,#06121Bcc 64%,#06121B22 100%),linear-gradient(0deg,#06121B55,#06121B22),url("/assets/hero/equipment.webp") center/cover;display:flex;align-items:center}
.home-content{width:min(var(--max),calc(100% - 48px));margin:auto;color:#fff;padding:90px 0}.eyebrow{color:var(--yellow);font-weight:900;letter-spacing:.18em;font-size:12px}.hero-home h1{font-size:clamp(42px,5.3vw,78px);line-height:1.02;margin:14px 0 20px;max-width:760px}.hero-home p{max-width:690px;color:#d4dde1;font-size:18px;line-height:1.8}.actions{display:flex;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:7px;font-weight:900;border:1px solid transparent}.btn-primary{background:var(--yellow);color:#07131c}.btn-ghost{border-color:#8d9ba2;color:#fff}
.feature-strip{background:#07151e;color:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feature-grid{width:min(var(--max),calc(100% - 48px));margin:auto;display:grid;grid-template-columns:repeat(4,1fr)}.feature{padding:22px;border-right:1px solid var(--line)}.feature:last-child{border:0}.feature b{display:block;color:#fff}.feature span{display:block;color:#91a1a9;font-size:12px;margin-top:4px}
.section{padding:76px 0}.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.section-head h2{font-size:38px;margin:0}.section-head p{color:#66737b;margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid #e1e6e8;border-radius:12px;padding:28px;box-shadow:0 8px 30px rgba(10,25,35,.06)}.card h3{margin:0 0 10px}.card p{color:#69767d;line-height:1.7;margin:0}.card .mark{color:var(--yellow2);font-size:28px;margin-bottom:14px}
.page-hero{position:relative;min-height:390px;overflow:hidden;background:#06121B}.page-hero img{width:100%;height:100%;min-height:390px;object-fit:cover;object-position:center;display:block}.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,18,27,.96) 0%,rgba(6,18,27,.9) 30%,rgba(6,18,27,.42) 58%,rgba(6,18,27,.08) 100%)}.page-content{position:absolute;z-index:2;left:max(24px,calc((100% - var(--max))/2));top:50%;transform:translateY(-50%);color:#fff;width:min(680px,calc(100% - 48px))}.crumb{font-size:12px;color:#d6dee2;margin-bottom:18px}.crumb strong{color:var(--yellow)}.page-content h1{font-size:clamp(38px,4.3vw,64px);line-height:1.05;margin:8px 0 14px}.page-content p{font-size:16px;line-height:1.7;color:#e1e7e9;margin:0;max-width:650px}.badges{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}.badge{border:1px solid rgba(255,255,255,.25);background:rgba(4,16,24,.58);border-radius:8px;padding:12px 15px;min-width:150px}.badge b{display:block;color:#fff;font-size:13px}.badge span{display:block;color:#aeb9be;font-size:11px;margin-top:3px}.bottom-line{height:4px;background:linear-gradient(90deg,var(--yellow) 0 18%,transparent 18% 100%);position:absolute;z-index:3;bottom:0;left:0;right:0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery img{width:100%;height:250px;object-fit:cover;border-radius:10px}.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.spec{background:#fff;border:1px solid #e0e5e7;border-radius:10px;padding:24px}.spec strong{font-size:28px;color:#0b1b24}.spec span{display:block;color:#5E6B73;font-size:13px;margin-top:5px}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}.contact-panel{background:#fff;border-radius:12px;border:1px solid #e0e5e7;padding:30px}.contact-list{display:grid;gap:18px}.contact-item{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid #e7ebed}.contact-item:last-child{border:0}.contact-icon{color:var(--yellow2);font-size:24px}.form{display:grid;gap:12px}.form input,.form textarea{width:100%;border:1px solid #d8dfe2;border-radius:7px;padding:13px;background:#fff}.form textarea{min-height:130px;resize:vertical}
.footer{background:#06121B;color:#aab6bd;padding:48px 0}.footer-inner{width:min(var(--max),calc(100% - 48px));margin:auto;display:flex;justify-content:space-between;gap:30px}.footer strong{color:#fff}.footer p{font-size:13px}.mobile-menu{display:none}
@media(max-width:1100px){.brand{min-width:210px}.menu a{padding:30px 7px;font-size:12px}.phone{display:none}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.topbar{display:none}.nav{min-height:68px}.brand{min-width:auto}.brand div:last-child{display:none}.menu{display:none}.mobile-menu{display:block;margin-left:auto;color:#fff;background:none;border:0;font-size:24px}.nav-actions .quote{display:none}.hero-home{min-height:560px}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature{border-bottom:1px solid var(--line)}.page-hero,.page-hero img{min-height:520px}.page-content{top:54%;}.page-content h1{font-size:44px}.gallery,.spec-grid,.contact-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.section{padding:55px 0}.footer-inner{flex-direction:column}}
@media(max-width:520px){.wrap,.nav,.home-content,.feature-grid{width:min(100% - 28px,var(--max))}.hero-home h1{font-size:40px}.hero-home p{font-size:15px}.feature-grid{grid-template-columns:1fr}.feature{border-right:0}.page-content{left:14px;width:calc(100% - 28px)}.page-content h1{font-size:38px}.badges{display:grid;grid-template-columns:1fr}.badge{min-width:0}}

.equipment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.equipment-card{background:#fff;border:1px solid #e0e5e7;border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(10,25,35,.06)}
.equipment-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.equipment-card div{padding:18px}
.equipment-card h3{margin:0 0 7px;font-size:17px}
.equipment-card p{margin:0;color:#69767d;font-size:13px;line-height:1.65}
.gallery img{transition:transform .25s ease,box-shadow .25s ease}
.gallery img:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.16)}
@media(max-width:1100px){.equipment-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.equipment-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.equipment-grid{grid-template-columns:1fr}}


/* V12 — Compact page hero content on all internal pages */
.page-hero .page-content{
  transform: scale(.82);
  transform-origin: left center;
  width: 122%;
}
.page-hero .page-content h1{
  margin-top: .28rem;
  margin-bottom: .45rem;
}
.page-hero .page-content p{
  margin-bottom: .75rem;
}
@media (max-width: 900px){
  .page-hero .page-content{
    transform: scale(.90);
    transform-origin: left center;
    width: 111%;
  }
}
@media (max-width: 600px){
  .page-hero .page-content{
    transform: none;
    width: 100%;
  }
}


/* V13 — Remove all hero tab/badge panels and decorative bottom tab lines */
.page-hero .badges,
.page-hero .bottom-line {
  display: none !important;
}


/* V17 FIXED — Expanded galleries */
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));}
.gallery img{display:block;cursor:zoom-in;}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.gallery{grid-template-columns:1fr;}.gallery img{height:230px;}}


/* ==== V22 FIXED — performance, mobile nav, a11y ==== */

/* 1) Mobile navigation drawer (V21 bug: .menu.open had no rule) */
.nav{position:relative}
@media(max-width:800px){
  .menu.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:#06121B;border-top:1px solid var(--line);
    padding:6px 0;box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:40;
  }
  .menu.open a{padding:14px 24px;font-size:15px}
  .menu.open a.active:after{left:24px;right:auto;width:26px;bottom:9px}
  .mobile-menu{cursor:pointer}
}

/* 2) Layout stability + lazy paint */
img{max-width:100%}
.page-hero img{width:100%;height:100%}
.section{content-visibility:auto;contain-intrinsic-size:auto 620px}
.hero-home,.page-hero{content-visibility:visible}

/* 3) Focus visibility for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--yellow);outline-offset:2px;border-radius:4px
}

/* 4) Respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gallery img{transition:none}
  .gallery img:hover{transform:none}
  .form-status{animation:none}
}

/* 5) Contact form: honeypot, สถานะการส่ง, ปุ่มระหว่างส่ง (Formspree AJAX) */
.form{position:relative}
.form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form-status{
  margin:2px 0 0;padding:13px 15px;border-radius:7px;
  font-size:14px;line-height:1.7;border:1px solid transparent;
  animation:form-status-in .18s ease-out
}
.form-status:focus{outline:none}
.form-status:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.form-status.ok  {background:#eaf7ee;border-color:#b5dfc3;color:#1b6b34}
.form-status.err {background:#fdecec;border-color:#f2c1c1;color:#9b2226}
.form-status.info{background:#fff8e1;border-color:#ffdf85;color:#7a5a00}
@keyframes form-status-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.form button[type=submit][disabled]{opacity:.62;cursor:progress}


/* ==== V22.1 — Gallery cards with captions (services / projects) ==== */
.gallery{align-items:stretch}
.gcard{
  margin:0;display:flex;flex-direction:column;background:#fff;
  border:1px solid #e0e5e7;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 26px rgba(10,25,35,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.gcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,25,35,.14);border-color:#cfd7da}
.gcard img{
  width:100%;height:230px;object-fit:cover;display:block;
  border-radius:0;cursor:default;transition:none;
}
.gcard:hover img{transform:none;box-shadow:none}
.gcard figcaption{
  padding:16px 18px 18px;border-top:3px solid var(--yellow);
  display:flex;flex-direction:column;gap:6px;flex:1;
}
.gcard figcaption b{font-size:16px;color:#0b1b24;line-height:1.35}
.gcard figcaption span{font-size:13.5px;color:#69767d;line-height:1.7}
@media(max-width:520px){.gcard img{height:210px}}

/* ================= V23 — NAP footer, wider nav, new page components ================= */

/* --- nav now has 9 items: tighten before it wraps --- */
@media(max-width:1320px){.menu a{padding:30px 10px;font-size:13.5px}}
@media(max-width:1180px){.phone{display:none}.brand{min-width:230px}.menu a{padding:30px 8px;font-size:12.5px}}

/* --- footer with full NAP --- */
.footer{padding:56px 0 0}
.footer-inner{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;align-items:start}
.fcol strong{display:block;color:#fff;font-size:15px;letter-spacing:.03em;margin-bottom:14px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcol ul a{font-size:13.5px;color:#aab6bd}
.fcol ul a:hover{color:var(--yellow)}
.fnap .ftag{font-size:13px;line-height:1.75;margin:0 0 16px;color:#9aa7ae}
.fnap address{font-style:normal;display:grid;gap:11px}
.fline{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.7;color:#b9c4ca}
.fline i{font-style:normal;color:var(--yellow);width:16px;flex:none;text-align:center}
.fline a{color:#b9c4ca}.fline a:hover{color:var(--yellow)}
.ftax{font-size:12px;color:#7d8b93;margin:16px 0 0}
.fsocial{display:flex;gap:10px;margin-top:16px}
.fsocial a{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:7px 12px;color:#c3ced4}
.fsocial a:hover{border-color:var(--yellow);color:var(--yellow)}
.footer-bar{width:min(var(--max),calc(100% - 48px));margin:34px auto 0;padding:20px 0 26px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;
  font-size:12.5px;color:#7d8b93;flex-wrap:wrap}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-inner{grid-template-columns:1fr}.footer-bar{flex-direction:column;gap:8px}}

/* --- CTA band --- */
.cta-band{background:linear-gradient(100deg,#06121B,#0C202C);color:#fff;padding:46px 0}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.cta-band h2{margin:0 0 6px;font-size:27px}
.cta-band p{margin:0;color:#b8c4ca;font-size:14.5px}
.cta-actions{display:flex;gap:11px;flex-wrap:wrap}

/* --- long-form prose (articles, area pages) --- */
.prose{max-width:820px}
.prose h2{font-size:27px;margin:38px 0 12px;line-height:1.35}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p,.prose li{color:#4a565e;line-height:1.9;font-size:15.5px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:7px;margin:12px 0}
.prose strong{color:#0b1b24}
.prose>p:first-child{font-size:17px;color:#3a464e}
.note{background:#FFF9E6;border-left:4px solid var(--yellow);border-radius:0 9px 9px 0;
  padding:17px 20px;margin:22px 0}
.note p{margin:0;font-size:14.5px;line-height:1.8}
.note b{color:#0b1b24}

/* --- data table (pricing) --- */
.table-wrap{overflow-x:auto;border:1px solid #e0e5e7;border-radius:12px;background:#fff}
table.data{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px}
table.data th,table.data td{padding:14px 18px;text-align:left;border-bottom:1px solid #eef1f3}
table.data thead th{background:#0b1b24;color:#fff;font-size:13px;letter-spacing:.03em;
  white-space:nowrap;border-bottom:0}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:nth-child(even){background:#fafbfb}
table.data td:last-child,table.data th:last-child{text-align:right;white-space:nowrap;font-weight:700;color:#0b1b24}
table.data td small{display:block;color:#5E6B73;font-weight:400;font-size:12.5px;margin-top:3px}

/* --- FAQ accordion --- */
.faq-list{display:grid;gap:12px;max-width:900px}
.faq-item{background:#fff;border:1px solid #e0e5e7;border-radius:11px;overflow:hidden}
.faq-item[open]{border-color:var(--yellow2);box-shadow:0 8px 26px rgba(10,25,35,.07)}
.faq-item summary{cursor:pointer;padding:19px 54px 19px 22px;font-weight:700;font-size:16px;
  color:#0b1b24;position:relative;list-style:none;line-height:1.55}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:400;color:var(--yellow2);line-height:1}
.faq-item[open] summary:after{content:"−"}
.faq-item .faq-a{padding:0 22px 20px;color:#5a666e;line-height:1.9;font-size:15px}
.faq-item .faq-a p{margin:0 0 10px}.faq-item .faq-a p:last-child{margin:0}
.faq-item .faq-a ul{margin:8px 0;padding-left:20px;display:grid;gap:6px}

/* --- link cards (areas, blog) --- */
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.link-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e0e5e7;
  border-radius:12px;padding:24px;box-shadow:0 8px 26px rgba(10,25,35,.05);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.link-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,25,35,.13);border-color:#cfd7da}
.link-card .tag{color:var(--yellow2);font-size:12px;font-weight:900;letter-spacing:.1em;margin-bottom:9px}
.link-card h3{margin:0 0 9px;font-size:18px;line-height:1.4}
.link-card p{margin:0 0 14px;color:#69767d;font-size:14px;line-height:1.75;flex:1}
.link-card .more{color:#0b1b24;font-weight:700;font-size:13.5px}
.link-card:hover .more{color:var(--yellow2)}
@media(max-width:900px){.link-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.link-grid{grid-template-columns:1fr}}

/* --- article meta + related --- */
.art-meta{display:flex;gap:16px;flex-wrap:wrap;color:#5E6B73;font-size:13px;
  border-bottom:1px solid #e4e9eb;padding-bottom:16px;margin-bottom:26px}
.toc{background:#fff;border:1px solid #e0e5e7;border-radius:11px;padding:20px 24px;margin:0 0 30px}
.toc b{display:block;margin-bottom:10px;font-size:14px;color:#0b1b24}
.toc ol{margin:0;padding-left:20px;display:grid;gap:7px}
.toc a{color:#4a565e;font-size:14.5px}.toc a:hover{color:var(--yellow2)}

/* --- two-column split --- */
.split{display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:start}
.side-box{background:#fff;border:1px solid #e0e5e7;border-radius:12px;padding:24px;
  position:sticky;top:110px;box-shadow:0 8px 26px rgba(10,25,35,.05)}
.side-box h3{margin:0 0 12px;font-size:17px}
.side-box p{color:#69767d;font-size:14px;line-height:1.75;margin:0 0 16px}
.side-box .btn{width:100%;margin-bottom:9px}
@media(max-width:900px){.split{grid-template-columns:1fr}.side-box{position:static}}
.prose ul.cols{columns:2;column-gap:30px}
@media(max-width:560px){.prose ul.cols{columns:1}}
.area-chips{display:flex;flex-wrap:wrap;gap:12px}
.area-chip{background:#fff;border:1px solid #e0e5e7;border-radius:999px;padding:14px 26px;
  font-weight:700;font-size:15px;color:#0b1b24;box-shadow:0 6px 18px rgba(10,25,35,.05);
  transition:all .2s ease}
.area-chip:hover{border-color:var(--yellow);background:var(--yellow);transform:translateY(-2px)}


/* ══════════════════════════════════════════════════════════════════
   V24 — RESPONSIVE PROFESSIONAL LAYER
   มือถือ / แท็บเล็ต / คอมพิวเตอร์
   Breakpoints:  ≤480 มือถือเล็ก · ≤640 มือถือ · ≤1024 แท็บเล็ต · >1024 คอม
   ══════════════════════════════════════════════════════════════════ */

/* ---------- 1. พื้นฐานกันพัง ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
.page-hero img{height:100%}
*{min-width:0}
:root{--pad:clamp(16px,4.2vw,24px);--hdr:82px}

/* ระยะขอบลื่นไหลตามจอ + รองรับมือถือมีติ่ง */
.wrap,.nav,.home-content,.feature-grid,.topbar-inner,.footer-inner,.footer-bar,.cta-inner{
  width:min(var(--max),100% - var(--pad)*2);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* ลิงก์ที่มี #anchor ไม่ให้โดน header บัง */
[id]{scroll-margin-top:calc(var(--hdr) + 12px)}

/* ---------- 2. ตัวอักษรลื่นไหล ---------- */
.hero-home h1{font-size:clamp(30px,7vw,72px);line-height:1.08}
.hero-home p{font-size:clamp(15px,2.2vw,18px)}
.page-content h1{font-size:clamp(26px,5.6vw,58px);line-height:1.12}
.page-content p{font-size:clamp(14px,2vw,16.5px)}
.section-head h2{font-size:clamp(22px,3.4vw,38px);line-height:1.25}
.section-head p{font-size:clamp(13.5px,1.8vw,15px)}
.prose h2{font-size:clamp(20px,3vw,27px)}
.prose h3{font-size:clamp(16.5px,2.2vw,19px)}
.prose p,.prose li{font-size:clamp(15px,1.8vw,15.5px)}
.cta-band h2{font-size:clamp(20px,3vw,27px)}

/* ---------- 3. เป้าการกดต้องใหญ่พอสำหรับนิ้ว (≥44px) ---------- */
.btn,.quote,.faq-item summary,.menu a,.fcol ul a,.area-chip{
  min-height:44px;display:flex;align-items:center
}
.mobile-menu{min-height:44px}   /* ไม่กำหนด display ที่นี่ — ให้ media query คุม */
.fcol ul a{min-height:0;padding:4px 0;display:inline-flex}
.btn{justify-content:center}
.faq-item summary{display:block;min-height:0;padding-top:18px;padding-bottom:18px}

/* ---------- 4. หัวเรื่องหน้าใน — เลิกใช้ scale hack ---------- */
.page-hero .page-content,
.page-hero .page-content h1,
.page-hero .page-content p{transform:none!important;width:auto!important}
.page-hero .page-content{
  width:min(680px,100% - var(--pad)*2)!important;
  left:max(var(--pad),calc((100% - var(--max))/2));
}
.page-hero,.page-hero img{min-height:clamp(280px,42vh,420px)}

/* ---------- 5. แท็บเล็ต ≤1024 : เปลี่ยนเป็นเมนู hamburger ---------- */
@media(max-width:1024px){
  :root{--hdr:70px}
  .nav{min-height:70px;gap:14px}
  .menu{display:none}
  .mobile-menu{display:flex;align-items:center;justify-content:center;margin-left:auto;
    color:#fff;background:none;border:0;font-size:26px;width:46px;height:46px;cursor:pointer}
  .menu.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:#06121B;
    border-top:1px solid var(--line);padding:6px 0;
    box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:40;
    max-height:calc(100dvh - var(--hdr));overflow-y:auto
  }
  .menu.open a{padding:15px var(--pad);font-size:16px;min-height:52px}
  .menu.open a.active:after{left:var(--pad);right:auto;width:26px;bottom:10px}
  .brand{min-width:0;flex:1}
  .brand small{display:block;font-size:9.5px}
  .phone{display:none}
  .nav-actions .quote{padding:11px 16px;font-size:13.5px;white-space:nowrap}
  .hero-home{min-height:clamp(420px,62vh,560px)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .equipment-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:26px}
  .side-box{position:static}
  .topbar-inner{grid-template-columns:repeat(2,1fr)}
  .top-item{padding:8px 4px}
  .top-item:nth-child(2){border-right:0}
}

/* ---------- 6. มือถือ ≤640 ---------- */
@media(max-width:640px){
  .topbar{display:none}
  .section{padding:clamp(36px,8vw,52px) 0}
  .brand small{display:none}
  .brand strong{font-size:15px;letter-spacing:.04em}
  .logo{width:38px;height:38px;font-size:20px}
  .nav-actions .quote{display:none}          /* มีปุ่มโทรติดขอบล่างแทน */
  .hero-home{min-height:clamp(400px,72svh,520px)}
  .home-content{padding:64px 0}
  .actions{gap:10px}
  .actions .btn{flex:1 1 auto;padding:14px 16px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .feature{padding:16px 14px;border-bottom:1px solid var(--line)}
  .feature:nth-child(2n){border-right:0}
  .cards,.gallery,.link-grid,.equipment-grid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .spec{padding:18px 14px}
  .spec strong{font-size:24px}
  .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  .contact-grid{grid-template-columns:1fr}
  .contact-panel{padding:22px 18px}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1}
  .footer-inner{grid-template-columns:1fr;gap:26px}
  .footer-bar{flex-direction:column;gap:8px;text-align:left}
  .prose{max-width:100%}
  .prose ul,.prose ol{padding-left:20px}
  .note{padding:15px 16px}
  .toc{padding:16px 18px}
  .art-meta{gap:8px 14px;font-size:12.5px}
  .gcard img{height:200px}
  .area-chips{gap:9px}
  .area-chip{padding:12px 18px;font-size:14px}
}

/* ---------- 7. มือถือเล็ก ≤400 ---------- */
@media(max-width:400px){
  .spec-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .feature{border-right:0}
  .actions{flex-direction:column}
  .actions .btn{width:100%}
  .brand strong{font-size:14px}
}

/* ---------- 8. มือถือแนวนอน ---------- */
@media(max-height:520px) and (orientation:landscape){
  .hero-home{min-height:auto}
  .home-content{padding:48px 0}
  .page-hero,.page-hero img{min-height:220px}
  .menu.open{max-height:70dvh}
}

/* ---------- 9. ฟอร์ม — กัน iOS ซูมอัตโนมัติ ---------- */
.form input,.form textarea{font-size:16px;padding:14px;min-height:50px;border-radius:9px}
.form textarea{min-height:130px}
.form button,.form .quote{width:100%;min-height:52px;justify-content:center;font-size:16px}

/* ---------- 10. ตารางราคา — มือถือแสดงเป็นการ์ด ---------- */
@media(max-width:640px){
  .table-wrap{border:0;background:transparent;overflow:visible}
  table.data{min-width:0;border-collapse:separate;border-spacing:0 10px;display:block}
  table.data thead{display:none}
  table.data tbody{display:block}
  table.data tr{display:block;background:#fff;border:1px solid #e0e5e7;
    border-radius:12px;padding:14px 16px;box-shadow:0 6px 18px rgba(10,25,35,.05)}
  table.data tr:nth-child(even){background:#fff}
  table.data td{display:flex;justify-content:space-between;gap:14px;
    padding:7px 0;border-bottom:1px dashed #eef1f3;text-align:left!important}
  table.data td:last-child{border-bottom:0;font-size:16px}
  table.data td::before{content:attr(data-label);color:#5E6B73;font-size:12.5px;
    font-weight:700;flex:none;padding-top:2px}
  table.data td:first-child{flex-direction:column;gap:2px;font-weight:700;color:#0b1b24}
  table.data td:first-child::before{display:none}
  table.data td small{margin-top:2px}
}

/* ---------- 11. แถบโทรติดขอบล่าง (มือถือ) ---------- */
.mcall{display:none}
@media(max-width:640px){
  .mcall{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 24px rgba(0,0,0,.28)
  }
  .mcall a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:56px;font-weight:900;font-size:15.5px;letter-spacing:.01em
  }
  .mcall .c1{background:var(--yellow);color:#07131c}
  .mcall .c2{background:#0b1b24;color:#fff}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .footer{padding-bottom:12px}
}

/* ---------- 12. คอมจอใหญ่ ---------- */
@media(min-width:1600px){
  :root{--max:1440px}
  .hero-home{min-height:660px}
}

/* ---------- 13. พิมพ์เอกสาร ---------- */
@media print{
  .topbar,.header,.mcall,.cta-band,.footer{display:none}
  .page-hero{min-height:auto}
  body{padding:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}


/* V24.1 fix: ปุ่มเมนูมือถือต้องซ่อนบนคอม */
@media(min-width:1025px){.mobile-menu{display:none!important}}

/* V25 — hero รุ่นมือถือ (ไฟล์เล็กกว่า 60%) */
@media(max-width:900px){
  .hero-home{background:linear-gradient(100deg,#06121B 0%,#06121B 48%,#06121Bcc 64%,#06121B22 100%),linear-gradient(0deg,#06121B55,#06121B22),url("/assets/hero/equipment-m.webp") center/cover}
}

/* V26 — แก้คอนทราสต์ตามผล Lighthouse (WCAG AA) */
.card .mark{color:#8F6700}
.link-card .tag,.tag{color:#8F6700}
.spec span{color:#5E6B73}
.contact-panel p{color:#5E6B73}

/* V27.1 — แก้จากผลตรวจละเอียด
   1) หัวตารางคอลัมน์สุดท้ายเป็นสีเข้มบนพื้นเข้ม = มองไม่เห็น */
table.data thead th:last-child{color:#fff}
/* 2) ตัวอักษรเทาอ่อนบนพื้นสว่าง คอนทราสต์ไม่ถึง WCAG AA */
table.data td small,.art-meta,table.data td::before{color:#5E6B73}
.contact-panel p{color:#5E6B73}