/* =====================================================
   Design System — "Trust & Authority"
   โทน: slate-navy พรีเมียม + ทองอำพัน (CTA) + เขียว LINE
   ฟอนต์: Prompt (หัวข้อ/ปุ่ม) + Sarabun (เนื้อหา)
   ===================================================== */
:root{
  --navy:#0f1e33; --navy2:#1b3358; --navy3:#28497c;
  --amber:#f5a623; --amber-hi:#ffb837; --amber-dark:#b97a06; --amber-soft:#fff4de;
  --bg:#f5f7fa; --card:#ffffff; --text:#1e2a38; --muted:#556575; --line:#e3e9f1;
  --green:#06c755;
  --radius:16px; --radius-sm:12px;
  --shadow-sm:0 1px 3px rgba(15,30,51,.08);
  --shadow-md:0 10px 28px rgba(15,30,51,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Sarabun','Noto Sans Thai',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);line-height:1.8;font-size:17px}
h1,h2,h3,h4{font-family:'Prompt','Noto Sans Thai',system-ui,sans-serif}
img{max-width:100%}
a{color:var(--navy2)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
::selection{background:var(--amber-soft);color:var(--navy)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
svg.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}

/* header */
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(10,22,40,.35)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:13px}
.logo{font-family:'Prompt',sans-serif;font-weight:700;font-size:1.18rem;color:#fff;text-decoration:none;line-height:1.3}
.logo small{display:block;font-family:'Sarabun',sans-serif;font-weight:400;font-size:.74rem;color:#aabdd8;letter-spacing:.3px}
.top-cta{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;min-height:44px;border-radius:var(--radius-sm);font-family:'Prompt',sans-serif;font-weight:600;font-size:.95rem;text-decoration:none;text-align:center;cursor:pointer;transition:transform .18s,box-shadow .18s,filter .18s,background .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-phone{background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:var(--navy);box-shadow:0 4px 14px rgba(245,166,35,.35)}
.btn-phone:hover{box-shadow:0 6px 20px rgba(245,166,35,.5)}
.btn-line{background:var(--green);color:#fff;box-shadow:0 4px 14px rgba(6,199,85,.28)}
.btn-line:hover{filter:brightness(1.06)}
.btn-ghost{border:1.5px solid #ffffff59;color:#fff}
.btn-ghost:hover{background:#ffffff14}

/* nav */
.nav{background:var(--navy2)}
.nav ul{display:flex;flex-wrap:wrap;list-style:none;gap:2px;padding:6px 0}
.nav a{display:block;color:#c5d5ec;text-decoration:none;font-size:.88rem;font-weight:500;padding:8px 14px;border-radius:10px;transition:background .15s,color .15s}
.nav a:hover{background:#ffffff17;color:#fff}
.nav a.active{background:var(--amber);color:var(--navy);font-weight:600}

/* hero */
.hero{background:radial-gradient(1000px 460px at 88% -12%,rgba(245,166,35,.22),transparent 55%),radial-gradient(700px 340px at -8% 110%,rgba(40,73,124,.6),transparent 60%),linear-gradient(158deg,var(--navy) 12%,var(--navy2) 100%);color:#fff;padding:64px 0 56px}
.hero h1{font-size:clamp(1.65rem,4.2vw,2.6rem);line-height:1.35;font-weight:700;margin-bottom:16px;max-width:880px}
.hero p.sub{color:#ccdaee;max-width:740px;font-size:1.06rem;margin-bottom:24px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.badge{display:inline-flex;align-items:center;gap:7px;background:#ffffff12;border:1px solid #ffffff2b;color:#ffe9c2;font-size:.86rem;font-weight:500;padding:7px 15px;border-radius:999px}
.badge .i{color:var(--amber)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-cta .btn{font-size:1.05rem;padding:14px 28px}

/* sections */
.section{padding:52px 0}
.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:1.55rem;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.4}
.section .lead{color:var(--muted);margin-bottom:26px;max-width:820px}
.section h3{font-size:1.12rem;color:var(--navy);margin:24px 0 8px}
.section p{margin-bottom:14px}
.breadcrumb{font-size:.82rem;color:var(--muted);padding:14px 0 0}
.breadcrumb a{color:var(--muted)}

/* grids + cards */
.grid{display:grid;gap:18px}
.grid.cols3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cols4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 6px;font-size:1.04rem;color:var(--navy)}
.card p{color:var(--muted);font-size:.92rem;margin:0}
.icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:13px;background:linear-gradient(145deg,#eef3fa,#e2ebf7);color:var(--navy2);margin-bottom:14px;transition:background .18s,color .18s}
.icon .i{width:24px;height:24px}
a.card{display:block;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
a.card:hover{border-color:#f0c26a;box-shadow:var(--shadow-md);transform:translateY(-3px)}
a.card:hover .icon{background:var(--amber-soft);color:var(--amber-dark)}
a.card .more{color:var(--amber-dark);font-size:.86rem;font-weight:600;margin-top:10px;display:inline-block}
.card a.more{color:var(--amber-dark);font-size:.86rem;font-weight:600;margin-top:10px;display:inline-block}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip{background:#eef3fa;border:1px solid var(--line);color:var(--navy2);font-size:.86rem;font-weight:500;padding:6px 14px;border-radius:999px}

/* steps */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px 20px;position:relative;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:18px;background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:var(--navy);font-family:'Prompt',sans-serif;font-weight:700;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 3px 10px rgba(245,166,35,.4)}
.step h3{margin:8px 0 6px;font-size:1.02rem;color:var(--navy)}
.step p{color:var(--muted);font-size:.9rem;margin:0}

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
th{background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;text-align:left;padding:13px 16px;font-family:'Prompt',sans-serif;font-weight:600;white-space:nowrap}
td{padding:12px 16px;border-top:1px solid var(--line)}
td:first-child{font-weight:600;color:var(--navy)}
tr:nth-child(even) td{background:#f8fafd}
.table-note{font-size:.8rem;color:var(--muted);margin-top:10px}

/* faq */
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;transition:border-color .18s}
.faq details[open]{border-color:#f0c26a}
.faq summary{cursor:pointer;font-family:'Prompt',sans-serif;font-weight:600;padding:16px 48px 16px 18px;color:var(--navy);list-style:none;position:relative;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#f8fafd}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b97a06' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq .a{padding:0 18px 16px;color:var(--muted);font-size:.94rem}

/* cta band */
.cta-band{background:radial-gradient(800px 320px at 82% -40%,rgba(245,166,35,.28),transparent 60%),linear-gradient(150deg,var(--navy),var(--navy2));border-top:3px solid var(--amber);padding:46px 0}
.cta-band .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cta-band h2{color:#fff;font-size:1.45rem;margin:0;line-height:1.45}
.cta-band p{color:#c5d5ec;margin:6px 0 0;font-size:.95rem}

/* checklist */
ul.checks{list-style:none;margin:0 0 16px}
ul.checks li{padding:7px 0 7px 34px;position:relative}
ul.checks li::before{content:"";position:absolute;left:2px;top:.85em;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306c755' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain}

/* estimator (ประเมินราคาด่วน 3 คลิก) */
.estimator{background:var(--card);border:2px solid var(--amber);border-radius:var(--radius);padding:26px 24px;box-shadow:0 10px 32px rgba(245,166,35,.16)}
.estimator h2{margin-bottom:4px}
.estimator .hint{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.est-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end}
.est-grid label{font-weight:600;font-size:.85rem;color:var(--navy)}
.estimator select{display:block;width:100%;margin-top:6px;padding:12px;min-height:46px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.93rem;background:#fbfcfe;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.estimator select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.18)}
.estimator button{border:none;font-size:.98rem;padding:12px 18px}
.estimator .privacy-note{font-size:.78rem;color:var(--muted);margin-top:10px}

/* แถบต้องการรับซื้อด่วน */
.wanted{background:linear-gradient(145deg,#fff8ec,#fff3da);border:1px dashed var(--amber-dark);border-radius:var(--radius);padding:20px 22px}
.wanted strong{color:var(--navy);font-family:'Prompt',sans-serif}
.wanted .chips{margin:10px 0 6px}
.wanted .chip{background:#fff;border-color:#f0c26a}
.wanted .note{font-size:.88rem;color:var(--muted);margin:0}

/* จุดสถานะออนไลน์ */
.online{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;margin-top:18px;color:#cfe0f5}
.online .dot{width:9px;height:9px;border-radius:50%;background:#4ade80;animation:pulse 1.6s infinite}
.online.off .dot{background:#9fb2c8;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* ตราอัปเดตข้อมูล */
.stamp{font-size:.78rem;color:var(--muted);margin-top:6px}

/* lead form */
.lead-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;max-width:720px;box-shadow:var(--shadow-sm)}
.lead-form label{display:block;font-weight:600;color:var(--navy);font-size:.92rem;margin-bottom:14px}
.lead-form input,.lead-form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;min-height:46px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;background:#fbfcfe;transition:border-color .15s,box-shadow .15s}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.18)}
.lead-form .form-grid{display:grid;gap:0 16px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.lead-form .form-grid{grid-template-columns:1fr}}
.lead-form button{border:none;font-size:1rem;width:100%;margin-top:4px}
.lead-form .privacy{font-size:.78rem;color:var(--muted);font-weight:400;margin:10px 0 0}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

/* footer */
footer{background:var(--navy);color:#b8c8dd;padding:48px 0 40px;font-size:.9rem}
footer h4{color:#fff;font-size:1rem;margin-bottom:12px}
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer a{color:#b8c8dd;text-decoration:none;display:block;padding:3px 0;transition:color .15s}
footer a:hover{color:#fff}
.copyright{border-top:1px solid #ffffff22;margin-top:30px;padding-top:18px;font-size:.8rem;color:#7f93ac}

/* sticky mobile CTA */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;display:none;z-index:60;background:#fff;box-shadow:0 -6px 20px rgba(10,22,40,.25);padding-bottom:env(safe-area-inset-bottom)}
.sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;font-family:'Prompt',sans-serif;font-weight:700;text-decoration:none;font-size:1rem}
.sticky-cta .call{background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:var(--navy)}
.sticky-cta .line{background:var(--green);color:#fff}
@media(max-width:760px){
  .sticky-cta{display:flex}
  .top-cta{display:none}
  .nav ul{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .nav a{white-space:nowrap}
  .hero{padding:48px 0 44px}
  .section{padding:40px 0}
  footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* ลดการเคลื่อนไหวตามการตั้งค่าผู้ใช้ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}