/* ============================================================
   style.css — หน้า landing บ้านกลางใจ
   สีทั้งหมดดูดมาจากไฟล์โลโก้จริง ไม่ได้เลือกเอง
   (ส้ม #F2701C · ฟ้าเขียว #22AEAE · น้ำเงินเข้ม #145E78)
   ============================================================ */
/* ---------- ฟอนต์ LINE Seed Sans TH (เก็บไว้ที่เซิร์ฟเวอร์เราเอง) ----------
   ★ font-display:swap สำคัญมากกับหน้าแรกที่ลูกค้าเจอ
     ถ้าไม่ใส่ เบราว์เซอร์จะซ่อนตัวหนังสือทั้งหน้าไว้จนกว่าฟอนต์จะโหลดเสร็จ
     เน็ตช้า = ลูกค้าเห็นหน้าว่างเปล่าอยู่วินาทีกว่า แล้วเขาปิดหนีก่อน
     ใส่ swap แล้วจะเห็นตัวหนังสือทันทีด้วยฟอนต์ระบบ แล้วค่อยสลับ */
@font-face{ font-family:'LINE Seed Sans TH'; font-weight:400; font-style:normal;
  font-display:swap; src:url('../font/LINESeedSansTH-Regular.woff2') format('woff2') }
@font-face{ font-family:'LINE Seed Sans TH'; font-weight:700; font-style:normal;
  font-display:swap; src:url('../font/LINESeedSansTH-Bold.woff2') format('woff2') }
@font-face{ font-family:'LINE Seed Sans TH'; font-weight:800; font-style:normal;
  font-display:swap; src:url('../font/LINESeedSansTH-ExtraBold.woff2') format('woff2') }

:root{
  --orange:#F2701C;  --orange-d:#D45C0E;
  --teal:#22AEAE;    --teal-d:#178B8B;
  --navy:#145E78;
  --ink:#22333A;     --ink-2:#4B6069;   --line:#DCE5E8;
  --bg:#FFFFFF;      --bg-2:#F4F8F9;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  /* ★ ตัวสำรองต้องมีเสมอ ฟอนต์โหลดไม่ติดเมื่อไหร่ยังอ่านออก */
  font-family:"LINE Seed Sans TH","Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- แถบบน ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:18px; height:72px}
.bar img{height:42px; width:auto}
nav{margin-left:auto; display:flex; gap:22px; align-items:center}
nav a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:700}
nav a:hover{color:var(--navy)}
.btn{display:inline-block; border:0; cursor:pointer; text-decoration:none; text-align:center;
  padding:13px 24px; border-radius:9px; font-size:15.5px; font-weight:700;
  font-family:inherit; transition:.15s}
.btn-main{background:var(--orange); color:#fff}
.btn-main:hover{background:var(--orange-d)}
.btn-ghost{background:#fff; color:var(--navy); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-d)}
.btn-lg{padding:16px 32px; font-size:17px}
.btn[disabled]{opacity:.55; cursor:not-allowed}
/* ★ จอแคบ โลโก้แบบยาวจะเบียดปุ่ม "ขอใบเสนอราคา" จนตกบรรทัด
   ย่อลงอีกขั้น แล้วให้ปุ่มเล็กลงด้วย จะได้อยู่บรรทัดเดียวกันได้ */
@media(max-width:860px){
  nav .hide-sm{display:none}
  .bar{height:62px; gap:10px}
  .bar img{height:30px}
  nav .btn{padding:10px 15px; font-size:14px}
}
@media(max-width:400px){ .bar img{height:26px} }

/* ---------- ปกหน้า ---------- */
.hero{background:
    radial-gradient(900px 400px at 85% -10%, rgba(34,174,174,.16), transparent 60%),
    radial-gradient(700px 380px at 5% 110%, rgba(242,112,28,.12), transparent 60%),
    var(--bg-2);
  border-bottom:1px solid var(--line)}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:46px;
  align-items:center; padding-top:64px; padding-bottom:64px}
.hero h1{font-size:44px; line-height:1.22; margin:0 0 18px; letter-spacing:-.4px}
.hero h1 em{font-style:normal; color:var(--orange)}
.hero p.lead{font-size:18.5px; color:var(--ink-2); margin:0 0 28px; max-width:34em}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.badges{display:flex; gap:26px; margin-top:30px; flex-wrap:wrap}
.badges b{display:block; font-size:26px; color:var(--navy); line-height:1.2}
.badges span{font-size:13.5px; color:var(--ink-2)}
.heroart{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  box-shadow:0 18px 44px rgba(20,94,120,.10)}
.heroart h3{margin:0 0 4px; font-size:16px; color:var(--navy)}
.heroart .sub{font-size:13px; color:var(--ink-2); margin-bottom:16px}
.tick{display:flex; gap:11px; align-items:flex-start; padding:9px 0; font-size:14.5px;
  border-top:1px solid var(--line)}
.tick:first-of-type{border-top:0}
.tick i{flex:0 0 22px; height:22px; border-radius:50%; background:var(--teal); color:#fff;
  font-style:normal; font-size:13px; display:grid; place-items:center; margin-top:1px}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr; gap:34px; padding-top:44px; padding-bottom:44px}
  .hero h1{font-size:33px}
  .hero p.lead{font-size:17px}
}

/* ---------- ส่วนทั่วไป ---------- */
section{padding:70px 0}
section.alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.head{max-width:660px; margin-bottom:38px}
.kicker{color:var(--teal-d); font-weight:700; font-size:13.5px; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:9px}
h2{font-size:31px; line-height:1.3; margin:0 0 12px; letter-spacing:-.3px}
.head p{color:var(--ink-2); margin:0; font-size:17px}
@media(max-width:920px){ section{padding:52px 0} h2{font-size:25px} }

/* ---------- หมวดสินค้า ---------- */
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px}
.cat{background:#fff; border:1px solid var(--line); border-radius:13px; padding:18px 18px 16px;
  display:flex; gap:13px; align-items:flex-start; transition:.16s}
.cat:hover{border-color:var(--teal); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,94,120,.09)}
.cat .ic{flex:0 0 40px; height:40px; border-radius:10px; display:grid; place-items:center;
  font-size:20px; background:rgba(34,174,174,.12)}
.cat b{display:block; font-size:15.5px; margin-bottom:2px}
.cat span{font-size:13px; color:var(--ink-2)}
.cats-more{margin-top:20px; color:var(--ink-2); font-size:15px}

/* ---------- ขั้นตอน ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px;
  counter-reset:s}
.step{background:#fff; border:1px solid var(--line); border-radius:13px; padding:22px; position:relative}
.step::before{counter-increment:s; content:counter(s);
  position:absolute; top:-14px; left:20px; width:31px; height:31px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:15px}
.step h3{margin:10px 0 6px; font-size:16.5px}
.step p{margin:0; font-size:14.5px; color:var(--ink-2)}

/* ---------- เหตุผล ---------- */
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:20px}
.why div{background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:11px; padding:22px}
.why h3{margin:0 0 7px; font-size:17px}
.why p{margin:0; font-size:15px; color:var(--ink-2)}

/* ---------- ฟอร์ม ---------- */
.formwrap{display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start}
form{background:#fff; border:1px solid var(--line); border-radius:15px; padding:28px;
  box-shadow:0 14px 36px rgba(20,94,120,.08)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
label{display:block; font-size:14px; font-weight:700; margin:0 0 5px; color:var(--ink)}
label .req{color:var(--orange)}
input,select,textarea{width:100%; font-family:inherit; font-size:15.5px; color:var(--ink);
  padding:11px 13px; border:1.5px solid var(--line); border-radius:9px; background:#fff;
  margin-bottom:15px; transition:.14s}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(34,174,174,.15)}
textarea{resize:vertical; min-height:112px}
.hint{font-size:13px; color:var(--ink-2); margin:-10px 0 15px}
/* ★ กับดักบอท — คนมองไม่เห็น แต่บอทที่กรอกทุกช่องจะกรอกอันนี้ด้วย */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.msg{border-radius:10px; padding:14px 16px; margin-bottom:16px; font-size:15px; display:none}
.msg.ok{display:block; background:rgba(34,174,174,.12); border:1px solid var(--teal); color:#0E5F5F}
.msg.err{display:block; background:#FDECEA; border:1px solid #E5A79F; color:#8E2A1B}
.aside{background:var(--navy); color:#fff; border-radius:15px; padding:28px}
.aside h3{margin:0 0 14px; font-size:19px; color:#fff}
.aside dl{margin:0; font-size:15px}
.aside dt{color:#9FD4E2; font-size:13px; margin-top:15px}
.aside dt:first-child{margin-top:0}
.aside dd{margin:2px 0 0; line-height:1.55}
.aside a{color:#fff}
.aside .big{font-size:23px; font-weight:700; letter-spacing:.3px}
@media(max-width:920px){ .formwrap{grid-template-columns:1fr} .f2{grid-template-columns:1fr} }

/* ---------- ท้ายเว็บ ---------- */
footer{background:var(--ink); color:#C6D4D9; padding:44px 0 30px; font-size:14.5px}
/* ★ ท้ายเว็บพื้นเข้ม — ตัวหนังสือในโลโก้เป็นน้ำเงินเข้มกับเขียวเข้ม
   วางทับพื้นเข้มตรงๆ จะจมหายไปเลย เลยแปลงทั้งอันเป็นสีขาว
   เสียสีแบรนด์ไปก็จริง แต่อ่านออกดีกว่าสวยแล้วมองไม่เห็น */
footer img{height:46px; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.9}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
footer h4{color:#fff; font-size:15px; margin:0 0 10px}
footer a{color:#C6D4D9; text-decoration:none}
footer a:hover{color:#fff}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:7px}
.fbot{border-top:1px solid rgba(255,255,255,.14); margin-top:32px; padding-top:18px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13.5px;
  color:#93A6AD}
@media(max-width:860px){ .fgrid{grid-template-columns:1fr; gap:26px} }