/* ═══════════════════════════════════════════════════════════════
   Dewell Intelligent — สไตล์ส่วนกลางของทั้งเว็บ
   แก้ไฟล์นี้ไฟล์เดียว มีผลกับทุกหน้า ทั้งภาษาไทยและอังกฤษ

   FONT LICENSE — ปลอดลิขสิทธิ์ 100%
   ทุกฟอนต์อยู่ภายใต้ SIL Open Font License 1.1 (ใช้เชิงพาณิชย์ฟรี)
     · Anuphan        (Cadson Demak)      — ฟอนต์ไทยหลัก
     · Inter          (Rasmus Andersson)  — หัวเรื่องภาษาอังกฤษ
     · JetBrains Mono (JetBrains)         — ตัวเลข/ป้ายกำกับ
   ไม่มี Helvetica / SF Pro / DB / PSL / Cordia อยู่ในเว็บนี้
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy-900:#0B1220; --navy-800:#111C2E; --navy-700:#1B2A44;
  --blue-600:#1D4ED8; --blue-500:#2563EB; --blue-400:#3B82F6;
  --blue-100:#DBEAFE; --blue-50:#EFF6FF;
  --paper-0:#FFFFFF; --paper-50:#FBFCFD; --paper-100:#F4F6F9;
  --paper-200:#E8ECF2; --paper-300:#D5DCE6;
  --slate-600:#4A5768; --slate-500:#647085;
  --accent-500:#0F9D8F;
}

html{ scroll-behavior:smooth; scroll-padding-top:84px }
body{
  background:var(--paper-50); color:var(--navy-700);
  font-family:'Anuphan','Inter',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--blue-100) }

/* ── ป้ายกำกับตัวเล็กแบบ monospace ที่ใช้ทั่วเว็บ ── */
.kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.num{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums }

/* ── โครงหน้า ── */
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:20px }
@media (min-width:640px){ .wrap{ padding-inline:32px } }
.hair{ border-top:1px solid var(--paper-200) }
.dotgrid{ background-image:radial-gradient(var(--paper-300) 1px,transparent 1px); background-size:22px 22px }

/* ── การ์ด ── */
.card{
  background:var(--paper-0); border:1px solid var(--paper-200);
  border-radius:16px; transition:.28s cubic-bezier(.2,.7,.2,1);
}
.lift:hover{ transform:translateY(-4px); box-shadow:0 24px 60px -30px rgba(27,42,68,.35) }

/* ── ปุ่ม ── */
.btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:10px;
  font-weight:500; font-size:14.5px; padding:14px 24px; transition:.2s; cursor:pointer;
}
.btn-primary{ background:var(--blue-600); color:#fff }
.btn-primary:hover{ background:var(--blue-500) }
.btn-dark{ background:var(--navy-900); color:#fff }
.btn-dark:hover{ background:var(--navy-800) }
.btn-ghost{ background:var(--paper-0); color:var(--navy-900); border:1px solid var(--paper-300) }
.btn-ghost:hover{ border-color:var(--navy-900) }
.btn-sm{ padding:10px 20px; font-size:13.5px }

/* ── ลิงก์เมนู: ขีดเส้นใต้ค่อย ๆ ยืดตอน hover ── */
.navlink{
  background-image:linear-gradient(var(--blue-600),var(--blue-600));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s, color .2s;
}
.navlink:hover{ background-size:100% 2px }
.navlink.active{ background-size:100% 2px; color:var(--navy-900) }

/* ── ฟอร์ม ── */
.field{
  width:100%; border:1px solid var(--paper-300); border-radius:10px;
  padding:12px 16px; font-size:14.5px; background:var(--paper-0);
  color:var(--navy-900); outline:none; transition:border-color .2s;
  font-family:inherit;
}
.field:focus{ border-color:var(--blue-600) }
.field::placeholder{ color:var(--slate-500); opacity:.7 }
textarea.field{ resize:vertical }

/* ── แอนิเมชันตอนเลื่อนหน้าจอ (ปิดอัตโนมัติถ้าผู้ใช้ตั้งค่าลดการเคลื่อนไหว) ── */
.reveal{ opacity:0; transform:translateY(20px); transition:.75s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
}

/* ── แท็บ (ใช้ในหน้า DewellNet) ── */
.tabbtn{ border:1px solid var(--paper-300); color:var(--slate-600); border-radius:10px; padding:8px 16px; transition:.2s; cursor:pointer }
.tabbtn:hover{ border-color:var(--navy-700) }
.tabbtn.on{ background:var(--navy-900); color:#fff; border-color:var(--navy-900) }

/* ── แถบพับเก็บได้ (FAQ) ── */
.acc-body{ max-height:0; overflow:hidden; transition:max-height .4s ease }
.acc.open .acc-body{ max-height:420px }
.acc.open .acc-ico{ transform:rotate(45deg) }
.acc-ico{ transition:transform .3s; display:inline-block }

/* ── ตารางเปรียบเทียบ ── */
.cmp{ width:100%; border-collapse:collapse; font-size:14px }
.cmp th,.cmp td{ padding:14px 16px; border-bottom:1px solid var(--paper-200); text-align:left; vertical-align:top }
.cmp thead th{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-500); font-weight:400 }
.cmp .yes{ color:var(--accent-500); font-weight:600 }
.cmp .no{ color:var(--paper-300) }
.cmp tbody tr:hover{ background:var(--paper-50) }

/* ── ข้ามไปเนื้อหาหลัก (เพื่อผู้ใช้คีย์บอร์ด/screen reader) ── */
.skip{ position:absolute; left:-9999px; top:0; z-index:100 }
.skip:focus{ left:16px; top:16px; background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:8px }

/* ── ตัวสลับภาษา ── */
.lang a{ padding:4px 8px; border-radius:6px; font-size:12px; letter-spacing:.06em }
.lang a.on{ background:var(--navy-900); color:#fff }