/* หน้าแรก "ที่ดินชัวร์" — ดีไซน์ใหม่ (ส่งมอบ 2026-09-22)
 *
 * ที่มา: ไฟล์ `index.html` ที่ฝ่ายออกแบบส่งมา (HTML+CSS ก้อนเดียว) — บล็อก <style> ทั้งก้อน
 * ถูกยกมาไว้ที่นี่ **โดยไม่แก้ค่าเลย์เอาต์ สี ระยะ หรือฟอนต์ที่ออกแบบไว้**
 *
 * ⚠️ ไฟล์นี้โหลดที่ `index.html` หน้าเดียว — มันตั้ง body/reset ของทั้งหน้า
 *    หน้าอื่นที่เคยยืมสไตล์จากไฟล์นี้ (services.html) ย้ายไปใช้ `services.css` แล้ว
 *
 * ⚠️ หัวเว็บ (.njh) กับฟุตเตอร์ยังเป็นชุดเดิมของทั้งเว็บ (header.css + inline ใน index.html)
 *    สไตล์ .nav / .footer ของดีไซน์ใหม่จึงไม่ได้ยกมา — ยกมาแล้วหน้าแรกจะมีหัวคนละแบบกับอีก 24 หน้า
 *
 * ⚠️ ท้ายไฟล์มีบล็อก "เชื่อมกับของเดิม" — สไตล์ของสิ่งที่ JS ของโปรเจกต์สร้างขึ้นเอง
 *    (แบนเนอร์คุกกี้ · ปุ่มบันทึก/เทียบบนการ์ด · ป้ายระดับตรวจสอบ · ตัวแบ่งหน้า · กล่องว่าง)
 *    ซึ่งดีไซน์ไม่ได้ออกแบบไว้ให้ จึงเขียนให้เข้าชุดกันโดยใช้ token ชุดเดียวกับด้านบน
 */

/* =========================================================
   DESIGN TOKENS — ปรับที่นี่ที่เดียว
   ========================================================= */
:root{
  --navy:#0b1f3a;
  --navy-2:#132b4d;
  --gold:#b8912e;
  --gold-light:#e5c76b;
  /* ⚠️ ทองสำหรับ **ข้อความ** บนพื้นสว่าง — #b8912e ได้ 2.95:1 ซึ่งต่ำกว่าเกณฑ์ 3:1
   *    ของข้อความขนาดใหญ่อยู่นิดเดียว (Lighthouse จับได้ที่คำเน้นในพาดหัว)
   *    #b08a26 ได้ 3.23:1 และเข้มขึ้นจากเดิมแค่ระดับที่ต้องเอามาวางเทียบกันถึงจะเห็น
   *    --gold ตัวเดิมยังใช้เป็น "สีพื้น" ของปุ่มเหมือนเดิมทุกจุด (กรมท่าบนทองได้ 5.61:1) */
  --gold-ink:#b08a26;
  --green:#1ca45c;
  --green-dark:#15803d;
  --green-bg:#e8f7ee;
  --orange:#b45309;
  --orange-bg:#fff4e5;
  --bronze:#8a6d1f;

  --ink:#0b1f3a;
  --ink-2:#4a5568;
  /* ⚠️ ค่าที่ดีไซน์ส่งมาคือ #7a8699 ซึ่งได้ความต่างสีบนพื้นขาว 3.69:1 — ต่ำกว่าเกณฑ์ AA (4.5:1)
   *    และโทเคนนี้ถูกใช้กับ "ข้อความจริงที่ต้องอ่าน" เช่น ราคาต่อตารางวา รหัสทรัพย์ และป้ายช่องกรอก
   *    ไม่ใช่แค่ของประดับ · ขยับเป็น #68758a (4.67:1) ซึ่งตาเปล่าแทบแยกไม่ออกจากค่าเดิม
   *    (กติกาเดียวกับ A11Y-04 ที่ห้ามใช้สีทองเป็นสีข้อความบนพื้นสว่าง — ดู tokens.css) */
  --ink-3:#646f84;
  --line:#e6eaf0;
  --line-2:#d5dce6;
  --bg:#ffffff;
  --bg-2:#f7f9fc;
  --bg-3:#f2f6fb;

  --font:'IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --shadow-sm:0 8px 24px rgba(11,31,58,.08);
  --shadow-md:0 12px 32px rgba(11,31,58,.14);
  --container:1280px;
  --gutter:64px;
}
@media (max-width:1023px){ :root{ --gutter:32px; } }
@media (max-width:767px){ :root{ --gutter:16px; } }

/* ========== RESET ========== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:8px;font-weight:600;font-size:15px;border:1.5px solid transparent;cursor:pointer;transition:.15s;min-height:44px}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold);color:var(--navy);font-weight:700}
.btn-gold:hover{filter:brightness(1.06)}
.btn-gold-light{background:var(--gold-light);color:var(--navy);font-weight:700}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--bg-3)}
.btn-ghost{color:var(--ink);background:transparent}
.btn-block{width:100%}

/* ========== CHIPS / TAGS ========== */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--bg-3);color:var(--ink);border:1.5px solid transparent}
.chip.is-on{background:var(--green-bg);color:var(--green-dark);border-color:var(--green)}
.chip.is-outline{background:#fff;border-color:var(--line-2);font-weight:500}
.tag{display:inline-block;padding:4px 8px;border-radius:var(--r-sm);font-size:13px;background:var(--bg-3);color:var(--ink-2)}
.tag-orange{background:var(--orange-bg);color:var(--orange)}
.tag-green{background:var(--green-bg);color:var(--green-dark)}
.badge{display:inline-block;padding:4px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:600;color:#fff;background:var(--navy)}
/* ⚠️ ป้ายนี้ใช้ --green-dark ไม่ใช่ --green — ขาวบน #1ca45c ได้ความต่างสีแค่ 3.22:1
 *    ซึ่งตกเกณฑ์ AA · และนี่คือป้ายที่บอกจุดขายเดียวของแบรนด์ ("รังวัดยืนยันแล้ว")
 *    ขาวบน #15803d ได้ 5.02:1 · สีเขียวสดยังใช้อยู่ที่จุดที่ไม่ใช่ข้อความ (จุดติ๊ก · เม็ดใน hero-pill) */
.badge-verified{background:var(--green-dark)}
.badge-basic{background:var(--bronze)}

/* ========== SECTION HEADERS ========== */
/* ⚠️ ป้ายเหนือหัวข้อใช้ --bronze ไม่ใช่ --gold — ทอง #b8912e บนพื้นขาวได้ 2.95:1
 *    ซึ่งตกเกณฑ์ AA สำหรับข้อความขนาดปกติ · --bronze #8a6d1f ได้ 4.90:1 และอยู่ในตระกูลสีเดียวกัน
 *    (บนพื้นเข้มยังใช้ทองได้ตามเดิม — ดู .eyebrow-light) */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:1.5px;color:var(--bronze)}
.eyebrow-light{color:var(--gold-light);letter-spacing:3px;font-size:12px}
.h2{font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.15}
.section{padding:56px 0}
@media (max-width:767px){ .section{padding:36px 0} }

/* ========== HERO ========== */
.hero{padding:56px 0 48px}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:20px}
.hero-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--bg-3);font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px}
.hero-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
/* หัวข้อ hero ใช้ Anuphan ไม่ใช่ IBM Plex Sans Thai (เจ้าของกิจการสั่ง 25 ก.ย. 2569)
   Plex ตัวหนาวางไม้เอกทับหางสระ ี พอดี คำว่า "ที่" จึงอ่านเป็น "ที" บนจอจริง
   Anuphan เป็นตระกูลเดียวกัน (พัฒนาต่อจาก Plex) หน้าตาเหมือนเดิมแต่ยกวรรณยุกต์ลอยเหนือสระชัด
   · ไฟล์ฟอนต์ได้จาก `node build/fonts-display.js` · สัญญาอนุญาต fonts/OFL-Anuphan.txt (ห้ามลบ)
   · ⚠️ @font-face อยู่ที่นี่ ไม่ใช่ fonts.css — fonts.css ต้องเป็นตระกูลเดียวและโหลดทุกหน้า
   · ⚠️ ห้ามกลับไปใช้ letter-spacing ติดลบกับ line-height ต่ำกว่า 1.25 — ตัวอักษรไทยมีสระบน+วรรณยุกต์ซ้อน
     สองชั้น บีบแล้วยอดวรรณยุกต์ชนบรรทัดบนและหางตัวอักษรชนบรรทัดล่าง (ซ้อนกับป้ายและคำโปรยจริง) */
@font-face{font-family:'Anuphan';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/anuphan-thai-700.woff2) format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Anuphan';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/anuphan-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.hero h1{font-family:'Anuphan',var(--font);font-size:clamp(30px,4vw,52px);line-height:1.3;font-weight:700;letter-spacing:0}
.hero h1 span{color:var(--gold-ink)}
.hero-lead{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:520px}
.hero-media{position:relative;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(160deg,#cfe3d4,#8fb59a 45%,#5c8f6d)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-check{position:absolute;right:24px;bottom:24px;width:230px;background:#fff;border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:10px;font-size:14px}
.hero-check b{font-size:12px;color:var(--ink-3);letter-spacing:1px}
.hero-check div{display:flex;gap:8px;align-items:center}
.check-dot{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:inline-grid;place-items:center;font-size:11px;flex-shrink:0}
/* จอคอม (กรอบ 4:3): ขยายภาพ 1.4 เท่าให้ครอบครัวเต็มครึ่งซ้าย แล้วย่อการ์ดไปมุมขวาบน
   เดิมการ์ดทับคุณแม่กับลูก (เจ้าของกิจการเลือกแบบ A 23 ก.ย. 69)
   · การ์ดวางทับกล่องติ๊กถูกที่ติดมากับภาพพอดี ขยับการ์ดเมื่อไหร่ กล่องในภาพจะโผล่ซ้อน
   · ตัวเลขทั้งหมดคิดจากภาพ 16:9 (hero-1280) ในกรอบ 4:3 เปลี่ยนภาพต้องวัดใหม่
   · ใช้ขนาด/ตำแหน่งตรงๆ ไม่ใช้ transform:scale — scale ที่จุดหมุนนอกกรอบทำให้ขอบขวาว่าง */
@media (min-width:1024px){
  .hero-media img{position:absolute;height:140%;width:auto;max-width:none;left:-71.4%;top:-39.6%;object-fit:fill}
  .hero-check{right:12px;bottom:auto;top:15%;width:auto;padding:12px;gap:8px;font-size:12px;white-space:nowrap}
  .hero-check b{font-size:11px}
  .hero-check .check-dot{width:16px;height:16px;font-size:10px}
}
/* กรอบแคบลงแต่การ์ดกว้างเท่าเดิม — ที่ 1024 การ์ดเกยไหล่คุณแม่ ~15px (วัดจริง) */
@media (min-width:1024px) and (max-width:1279px){
  .hero-check{right:8px;padding:10px;gap:6px;font-size:11px}
  .hero-check b{font-size:10px}
}
@media (max-width:1023px){
  .hero{padding:32px 0 24px}
  .hero .container{grid-template-columns:1fr;gap:24px}
  .hero-media{aspect-ratio:16/9;order:2}
  .hero-check{left:12px;right:12px;bottom:12px;width:auto;flex-direction:row;flex-wrap:wrap;gap:8px 16px;padding:10px 12px;font-size:12px}
  .hero-check b{display:none}
  .hero-lead{font-size:15px}
}

/* ⚠️ บนมือถือรูป hero เหลือแค่ 343×193 css px — การ์ดเช็กลิสต์ที่ลอยทับกินพื้นที่
   เกือบทั้งใบจนเห็นแต่หลังคากับท้องฟ้า ภาพครอบครัวซึ่งเป็นหัวใจของ hero ถูกบังหมด
   (เจ้าของกิจการสั่งตัดออกได้ 22 ก.ย. 69 · วัดจากของจริงที่ 375px)
   ข้อความ 4 ข้อนี้ไม่ได้หายจากหน้า — หัวข้อ "มาตรฐาน" ด้านล่างเขียนไว้ละเอียดกว่าเดิมอยู่แล้ว
   ⚠️ ซ่อนด้วย display:none ไม่ใช่ย้ายลงมาไว้ใต้ภาพ เพราะการ์ดเป็นลูกของ .hero-media
      ซึ่ง overflow:hidden + aspect-ratio ตายตัว — ทำให้เป็น static แล้วจะถูกตัดหายไปเฉยๆ */
@media (max-width:767px){
  .hero-check{display:none}
}

/* ========== SEARCH BOX ========== */
.search{margin-top:8px;display:flex;flex-direction:column;gap:10px;background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-sm)}
.seg{display:flex;gap:6px}
.seg button{border:0;background:var(--bg-3);padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff;font-weight:600}
/* ⚠️ ช่องทำเลอยู่แถวบนเต็มความกว้างโดยตั้งใจ (แก้ 2026-09-25 ตามที่เจ้าของแจ้งว่าตัวอักษรแสดงไม่หมด)
   เดิมวาง 4 ช่องในแถวเดียว `2fr 1fr 1fr 132px` ในคอลัมน์ซ้ายของ hero ที่กว้างแค่ ~550px —
   ช่องราคา/ขนาดเหลือ ~90px "ทุกช่วงราคา" จึงถูกตัดเหลือ "ทุกช่วงร" และคำใบ้ "จังหวัด อำเภอ หรือตำบล"
   ถูกตัดท้าย · ฟอนต์ 15px กับ line-height ตั้งต้นยังตัดสระบน/วรรณยุกต์ของไทยด้วย
   ห้ามยุบกลับเป็นแถวเดียว เว้นแต่ hero จะกว้างเต็มจอ */
.search-grid{display:grid;grid-template-columns:1fr 1fr 150px;gap:8px}
.search-grid .field:first-child{grid-column:1/-1}
.search-grid .btn{min-height:auto;height:100%}
.field{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;min-width:0}
.field label{font-size:12.5px;line-height:1.4;color:var(--ink-3);font-weight:600}
.field input,.field select{border:0;outline:0;background:transparent;font-size:16px;line-height:1.6;min-height:28px;min-width:0;width:100%;padding:0;color:var(--ink);text-overflow:ellipsis}
.field:focus-within{border-color:var(--navy)}
.search-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;line-height:1.6;color:var(--ink-3)}
.search-foot a{background:var(--bg-3);color:var(--ink);padding:3px 10px;border-radius:999px}
.search-foot .more{margin-left:auto;background:none;font-weight:600;padding:0}
@media (max-width:767px){
  .search-grid{grid-template-columns:1fr 1fr}
  .search-grid .field:first-child,.search-grid .btn{grid-column:1/-1}
  .search-grid .btn{min-height:48px}
  .search-foot .more{display:none}
}

/* ========== คลิปแนะนำ 30 วินาที (#ดูคลิป) ==========
   คลิปเป็นแนวตั้ง 9:16 (1080×1920) — ยัดกรอบ 16:9 ไม่ได้ จึงวางเป็นสองคอลัมน์ คลิปซ้าย + เนื้อความขวา
   แล้วซ้อนกันบนจอแคบ · ความกว้างคลิปถูกคุมไว้ ไม่งั้นบนมือถือสูงเกินจอ (375px → 667px)
   ⚠️ พื้นสว่างเท่านั้น — ถัดลงไปคือแถบ trust (สว่าง) และ .standard (กรมท่า) อยู่ไกลลงไป ไม่ติดกัน
   ⚠️ `video` ต้องมี height:auto — แอตทริบิวต์ height="1920" ใน HTML กลายเป็น height:1920px ชนะ aspect-ratio
   ⚠️ ปุ่มเล่นของเราซ่อนไว้จนกว่า introclip.js ใส่ .js-ready (JS ตาย = ยังกดเล่นจากแถบควบคุมของเบราว์เซอร์ได้) */
.introclip{padding:0 0 40px}
.ic-card{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:56px;align-items:center;
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px 56px 32px 32px}
.ic-player{order:-1}
.ic-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);box-shadow:var(--shadow-md);border:1px solid var(--line-2)}
.ic-frame video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--navy)}
.ic-play{display:none}
.introclip.js-ready .ic-play{display:flex;position:absolute;inset:0;z-index:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;
  padding:0 12px 24px;border:0;cursor:pointer;color:#fff;font-family:inherit;
  background:linear-gradient(180deg,rgba(11,31,58,.08) 0%,rgba(11,31,58,.04) 45%,rgba(11,31,58,.78) 100%)}
.ic-play-ring{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold-light);color:var(--navy);box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .2s ease}
.ic-play:hover .ic-play-ring{transform:scale(1.07)}
.ic-play:focus-visible{outline:3px solid var(--gold-light);outline-offset:-3px}
.ic-play-txt{font-size:15px;font-weight:600;line-height:1.4;text-align:center}
.ic-play-txt small{display:block;font-size:12px;font-weight:400;color:rgba(255,255,255,.82);margin-top:2px}
.ic-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ic-copy h2{max-width:560px}
.ic-lede{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:560px;margin:0}
.ic-steps{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:12px;max-width:560px}
.ic-steps li{display:flex;gap:14px;align-items:flex-start}
.ic-steps .n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.ic-steps b{display:block;font-size:16px;line-height:1.4}
.ic-steps span{font-size:14px;line-height:1.55;color:var(--ink-2)}
.ic-copy .btn{margin-top:6px}
@media (max-width:1023px){
  .ic-card{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:32px;padding:24px}
}
@media (max-width:767px){
  .introclip{padding-bottom:28px}
  /* มือถือ: หัวข้อ → คลิป → รายละเอียด → ปุ่ม (คลิปคือพระเอก ต้องไม่ไปอยู่ท้ายสุดใต้ปุ่ม)
     display:contents ทำให้ลูกของ .ic-copy กลายเป็นลูกของ .ic-card ตรงๆ แล้วสลับลำดับได้ */
  .ic-card{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px 16px;border-radius:var(--r-lg)}
  .ic-copy{display:contents}
  .ic-copy .eyebrow{order:1}
  .ic-copy h2{order:2}
  .ic-player{order:3;width:min(240px,68vw);margin:6px auto}
  .ic-lede{order:4}
  .ic-steps{order:5}
  .ic-copy .btn{order:6;min-height:48px;text-align:center}
}
/* ลิงก์ "ดูคลิป" ใต้คำโปรยของ hero — ลิงก์เปล่า + วงกลมทอง ไม่ใช่ปุ่มกรอบเต็ม
   hero ต้องมีปุ่มหลักปุ่มเดียวคือ "ค้นหาที่ดิน" (homepage.test.js ข้อ 2) */
.hero-clip{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:15px;font-weight:600;color:var(--navy);text-decoration:none;min-height:44px}
.hero-clip-ico{width:36px;height:36px;border-radius:50%;background:var(--gold-light);color:var(--navy);display:grid;place-items:center;flex-shrink:0;transition:transform .2s ease}
.hero-clip:hover .hero-clip-ico{transform:scale(1.08)}
.hero-clip:hover span:last-child{text-decoration:underline}

/* ========== TRUST BAR ========== */
.trust .container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:24px;padding-bottom:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .container{margin-left:auto;margin-right:auto}
.trust-item{display:flex;gap:14px;align-items:flex-start}
.trust-icon{width:44px;height:44px;border-radius:12px;background:var(--bg-3);display:grid;place-items:center;flex-shrink:0}
.trust-item b{display:block;font-size:18px}
.trust-item span{font-size:13px;color:var(--ink-2)}
@media (max-width:1023px){ .trust .container{grid-template-columns:repeat(2,1fr);gap:12px;border:0;padding-top:0}
  .trust-item{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
  .trust-icon{display:none} .trust-item b{font-size:16px} .trust-item span{font-size:12px} }

/* ========== QUICK ENTRY ========== */
.quick .container{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:40px}
.quick a{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:6px;transition:.15s}
.quick a:hover{border-color:var(--navy);transform:translateY(-2px)}
.quick a small{font-size:12px;font-weight:700;color:var(--bronze)}
.quick a b{font-size:18px}
.quick a span{font-size:13px;color:var(--ink-2)}
.quick a.is-dark{background:var(--navy);border-color:var(--navy);color:#fff}
.quick a.is-dark small{color:var(--gold-light)}
.quick a.is-dark span{color:rgba(255,255,255,.7)}
@media (max-width:767px){ .quick .container{grid-template-columns:repeat(2,1fr);gap:8px;padding-top:16px}
  .quick a{padding:14px} .quick a b{font-size:15px} .quick a span{font-size:12px} }

/* ========== LISTINGS ========== */
.listings-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.listings-head p{font-size:15px;color:var(--ink-2);margin-top:4px}
.listings-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.listings-tools select{border:1.5px solid var(--line-2);border-radius:999px;padding:8px 12px;background:#fff;font-size:13px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1023px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .grid-3{grid-template-columns:1fr;gap:12px} }


/* ========== STANDARD ========== */
.standard{background:var(--navy);color:#fff}
.standard .container{display:grid;grid-template-columns:440px 1fr;gap:40px;align-items:center;padding-top:44px;padding-bottom:44px}
.standard-copy{display:flex;flex-direction:column;gap:16px}
.standard-copy p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.75)}
.standard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.std{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.std-icon{width:40px;height:40px;border-radius:12px;background:rgba(229,199,107,.15);display:grid;place-items:center}
.std small{font-size:13px;color:var(--gold-light);font-weight:700}
.std b{font-size:17px;line-height:1.3}
.std p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)}
@media (max-width:1023px){ .standard .container{grid-template-columns:1fr;gap:24px;padding-top:40px;padding-bottom:40px} .standard-grid{grid-template-columns:1fr;gap:10px} .std{flex-direction:row;padding:16px} .std-icon{display:none} }

/* ========== GUIDE ========== */
.guide-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.guide-head p{font-size:15px;color:var(--ink-2);max-width:380px}
.guide-grid{display:grid;grid-template-columns:1fr 420px;gap:20px}
/* ปกกว้าง 40% ของการ์ด (เดิมครึ่งใบ + พื้นว่างสูง 300px) — เจ้าของสั่งย่อ 27 ก.ย. 2569 */
.feature{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:2fr 3fr}
.feature-media{background:#0B1F3A;min-height:220px;overflow:hidden}
.feature-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.feature:hover .feature-media img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .feature-media img{transition:none} .feature:hover .feature-media img{transform:none} }
.feature-body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.feature-body small{font-size:12px;color:var(--bronze);font-weight:600;letter-spacing:1px}
.feature-body b{font-size:22px;line-height:1.3}
.feature-body p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.guide-list{display:flex;flex-direction:column;gap:10px}
.guide-list a{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;gap:14px;align-items:center;transition:.15s}
.guide-list a:hover{border-color:var(--navy)}
.guide-list a small{font-size:13px;font-weight:700;color:var(--bronze);width:24px;flex-shrink:0}
.guide-list a span{display:block;font-size:12px;color:var(--ink-3)}
.guide-list a b{font-size:15px}
@media (max-width:1023px){ .guide-grid{grid-template-columns:1fr} .feature{grid-template-columns:1fr} .feature-media{min-height:0;aspect-ratio:16/7} .feature-body{padding:16px} .feature-body b{font-size:20px} .guide-list a{padding:14px 16px} .guide-list a b{font-size:14px} }

/* ========== TEAM ========== */
.team{background:var(--bg-2)}
.team .container{display:grid;grid-template-columns:1fr 480px;gap:40px;align-items:center;padding-top:44px;padding-bottom:44px}
.team-copy{display:flex;flex-direction:column;gap:16px}
.team-copy p{font-size:16px;line-height:1.65;color:var(--ink-2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat b{display:block;font-size:22px}
.stat span{font-size:12px;color:var(--ink-2)}
/* กรอบใช้สัดส่วนเดียวกับไฟล์ภาพ (บน 1440×600 · ล่าง 900×500) ไม่ใช่ความสูงตายตัว —
   ความสูงตายตัวทำให้จอที่กรอบกว้างกว่า 480px (แท็บเล็ต/มือถือ) ตัดภาพทิ้งจนเห็นไม่ครบ (29 ก.ย. 2569)
   เปลี่ยนภาพเมื่อไหร่ ให้ครอปไฟล์ตามสัดส่วนนี้ หรือแก้ aspect-ratio ให้ตรงกับไฟล์ใหม่ */
.team-media{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.team-media > *{aspect-ratio:9/5;border-radius:var(--r-lg);overflow:hidden;background:#c9d8c8}
.team-media > *:first-child{grid-column:1/-1;aspect-ratio:12/5}
.team-media img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){ .team .container{grid-template-columns:1fr;gap:20px;padding-top:40px;padding-bottom:40px} .stats{gap:8px} .stat{padding:12px} .stat b{font-size:22px} .stat span{font-size:11px} }

/* ========== SELL ========== */
.sell .container{display:grid;grid-template-columns:1fr 480px;gap:40px;align-items:start;padding-top:44px;padding-bottom:44px}
.sell-copy{display:flex;flex-direction:column;gap:16px}
.sell-copy h2{font-size:clamp(24px,2.8vw,34px)}
.sell-copy p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:540px}
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step-n{width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--gold-light);display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}
.step b{display:block;font-size:16px}
.step span{font-size:14px;color:var(--ink-2)}
.contact-line{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:16px}
.form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:14px}
.form h3{font-size:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:13px;font-weight:600}
.f input,.f select,.f textarea{border:1px solid var(--line-2);border-radius:8px;padding:11px 12px;font-size:15px;background:#fff;width:100%}
.f textarea{resize:vertical;min-height:80px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.form-note{font-size:12px;color:var(--ink-3);text-align:center}
/* ผลการส่งฟอร์ม — ⚠️ ห้ามบอกสถานะด้วยสีอย่างเดียว ข้อความเปลี่ยนตามสถานะอยู่แล้ว
   และช่องข้อความประกาศ aria-live ไว้ เครื่องอ่านหน้าจอจึงได้ยินผลทันทีโดยไม่ต้องไล่หา */
.form-note.is-error{color:var(--orange);font-weight:600;font-size:13px}
.form-note.is-ok{color:var(--green-dark);font-weight:600;font-size:13px}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:var(--orange);outline:2px solid var(--orange);outline-offset:0}
@media (max-width:1023px){ .sell .container{grid-template-columns:1fr;gap:24px;padding-top:40px;padding-bottom:40px} .form{padding:18px} }

/* ========== MOBILE TAB BAR ========== */
/* ⚠️ element เดียวกันนี้ต้องมีคลาส `mobile-nav` ติดอยู่ด้วยเสมอ — `menu.js` ใช้คลาสนั้น
 *    "ข้าม" แถบล่างตอนมองหา <nav> ตัวหลักไปทำลิ้นชัก ถอดออกเมื่อไหร่ ลิ้นชักมือถือจะกลาย
 *    เป็นสำเนาของแถบล่างแทนเมนูจริง (ดู menu.js findNav) */
.tabbar{display:none}
@media (max-width:767px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;height:64px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;font-size:11px;padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3)}
  .tabbar a.is-active{color:var(--ink);font-weight:600}
  .tabbar a svg{width:22px;height:22px}
  .tabbar .fab{width:44px;height:44px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-size:22px;font-weight:700;color:var(--navy);margin-top:-22px;box-shadow:0 6px 16px rgba(184,145,46,.4)}
}

/* =========================================================
   เชื่อมกับของเดิม — สไตล์ของสิ่งที่ JS ของโปรเจกต์สร้างขึ้นเอง
   (ดีไซน์ไม่ได้ออกแบบไว้ให้ จึงเขียนด้วย token ชุดเดียวกับด้านบน)
   ========================================================= */

/* ---------- hover ของลิงก์ในฟุตเตอร์ชุดเดิม (ฟุตเตอร์ใช้ inline style จึงต้อง !important) ---------- */
.hv-gold:hover{color:var(--gold-light) !important}
.hv-white:hover{background:#FFFFFF !important;color:var(--navy) !important}
.hv-bronze:hover{background:var(--navy-2) !important;color:#FFFFFF !important}
.hv-outline:hover{border-color:var(--gold) !important;color:var(--navy) !important}
.hv-card:hover{border-color:var(--gold) !important}
.hv-goldbg:hover{background:var(--gold) !important;color:var(--navy) !important}

/* ---------- แถบบอกผลการค้นหา / กล่องว่าง / ตัวแบ่งหน้า (marketplace.js สร้างให้) ---------- */
.result-note{margin-bottom:16px;padding:12px 18px;border-radius:var(--r-md);background:var(--bg-3);font-size:14px;color:var(--ink-2)}
.loading{grid-column:1/-1;padding:56px 0;text-align:center;font-size:15px;color:var(--ink-3)}
.empty-result{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 32px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.empty-result b{display:block;font-size:22px;line-height:1.35;color:var(--ink);margin-bottom:12px}
.empty-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.outline-btn,.post-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:8px;font-size:14px;font-weight:600}
.outline-btn{border:1.5px solid var(--line-2);color:var(--navy)}
.outline-btn:hover{border-color:var(--navy)}
.post-btn{background:var(--navy);color:#fff}
.post-btn:hover{background:var(--navy-2)}
@media (max-width:767px){ .empty-result{padding:24px 18px} }

.listing-pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:24px}
.listing-pager button{min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:14px;color:var(--ink);cursor:pointer}
.listing-pager button:hover:not(:disabled){border-color:var(--navy)}
.listing-pager button[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.listing-pager button:disabled{opacity:.4;cursor:default}
.listing-pager .pager-info{flex-basis:100%;text-align:center;font-size:13px;color:var(--ink-3);margin-top:4px}

/* ---------- แบนเนอร์ขอความยินยอมคุกกี้ (analytics.js สร้างเอง) ----------
 * ⚠️ ต้องเป็น "แถบล่างเตี้ย" เท่านั้น ห้ามทำเป็นกล่องกลางจอหรือแผงเต็มความสูง
 *    หน้าแรกขายด้วย hero + ช่องค้นหา ถ้าแบนเนอร์บังตั้งแต่วินาทีแรก คนปิดหน้าไปก่อนจะได้อ่าน
 * ⚠️ บนมือถือต้องอยู่เหนือ .tabbar (สูง 64px) ไม่งั้นแถบล่างกดไม่ได้จนกว่าจะตอบแบนเนอร์
 */
#nj-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--navy);color:rgba(255,255,255,.82);
  border-top:1px solid rgba(229,199,107,.32);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  font-size:13px;line-height:1.6;
}
.nj-consent-text{flex:1;min-width:220px}
.nj-consent-btns{display:flex;gap:8px;flex:none}
#nj-consent button{border:0;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.nj-consent-no{background:transparent;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.28) !important}
.nj-consent-yes{background:var(--gold-light);color:var(--navy)}
@media (max-width:767px){
  #nj-consent{bottom:calc(64px + env(safe-area-inset-bottom));padding:12px var(--gutter);font-size:12.5px}
  .nj-consent-btns{width:100%}
  #nj-consent button{flex:1;padding:11px 6px}
}

/* ปุ่มแชท "น้องเอ็นเจชัวร์" ต้องลอยเหนือแถบล่าง (.tabbar สูง 64px) ไม่ใช่ทับ
 * ⚠️ `njchat.css` ยกให้เองที่ ≤640px เท่านั้น แต่แถบล่างของหน้านี้โผล่ตั้งแต่ ≤767px
 *    ช่วง 641–767px จึงต้องยกให้เองที่นี่ ไม่งั้นปุ่มแชททับปุ่ม "ฝากขาย" กลางแถบพอดี
 * ⚠️ ตอนแบนเนอร์คุกกี้ยังไม่ถูกตอบ `njchat.js` จะยกปุ่มให้อีกชั้นเอง (dodgeConsent) ไม่ต้องคิดเผื่อที่นี่
 */
@media (min-width:641px) and (max-width:767px){
  .njchat-launcher{ bottom:calc(84px + env(safe-area-inset-bottom)); right:12px; }
}

/* แถบล่างมือถือกินพื้นที่ท้ายหน้า — ต้องกันที่ไว้ ไม่งั้นบรรทัดสุดท้ายของฟุตเตอร์ถูกทับ */
@media (max-width:767px){ body{padding-bottom:calc(72px + env(safe-area-inset-bottom))} }

/* ---------- ฟุตเตอร์ชุดเดิม (inline style ใน index.html) บนจอเล็ก ---------- */
@media (max-width:767px){
  .footer-legacy [data-r="split3"]{grid-template-columns:1fr !important;gap:28px !important}
}

/* ---------- ลดการเคลื่อนไหวตามค่าที่ผู้ใช้ตั้งไว้ในเครื่อง ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .card:hover,.quick a:hover{transform:none}
}