/*
 * Kham Finder — สไตล์รวมของทั้งเว็บ
 *
 * ⚠️ ยึดตามแผ่น CI ที่เจ้าของให้มาเมื่อ 2026-09-09 เท่านั้น
 *    ทุกสีในไฟล์นี้ต้องมาจากตารางข้างล่าง ห้ามคิดเฉดใหม่เอง
 *    ถ้าจำเป็นต้องมีเฉดที่ CI ไม่ได้ให้ ต้องเขียนกำกับไว้ว่าเป็นเฉดที่ผสมขึ้นเอง
 *    และผสมมาจากสีตัวไหน จะได้ตามกลับได้ว่าอันไหนคือของจริงจาก CI
 *
 * ของเดิมเป็นโทนน้ำตาลอมทองที่ไล่มาจาก khammassage.com
 * รอบนี้เปลี่ยนเป็นชุดของ Kham Finder เอง — น้ำตาลเย็นลง เพิ่มสีอิฐเป็นสี CTA
 * และตัดสีทองออกทั้งหมด ในแผ่น CI ไม่มีสีทองอยู่เลยแม้แต่จุดเดียว
 *
 * ฟอนต์ Arimo (ตามแผ่น CI) + Noto Sans Thai
 * Arimo ไม่มีสระและพยัญชนะไทย ตัวอักษรไทยจึงตกไปที่ Noto Sans Thai เสมอ
 * เลือก Noto Sans Thai เพราะเป็นซานเซอริฟหัวตัดที่ความหนาและความสูง
 * เข้าชุดกับ Arimo ที่สุดในบรรดาฟอนต์ไทยที่ Google Fonts มี
 *
 * เขียนแบบ mobile-first: กฎพื้นฐานคือจอมือถือ แล้วค่อยขยายด้วย media query
 * เพราะผู้ใช้ส่วนใหญ่คือหมอนวดที่เปิดจากมือถือ
 *
 * หมายเหตุเรื่องความหนาแน่น: หน้าหางานต้องอ่านเร็วและเทียบกันได้
 * จึงใช้พื้นขาวและเส้นบาง ไม่ใช้พื้นเบจเต็มจอแบบเว็บร้านนวด
 */

:root {
  /*
   * ---------- สีจากแผ่น CI ตรง ๆ ----------
   *
   * กติกาสำคัญที่ยังใช้อยู่: ห้ามใช้สีเข้มเป็นพื้นของบล็อกใหญ่
   * ไม่ว่าจะแถบหัวเว็บ hero แถบค้นหา หรือท้ายเว็บ
   * สีน้ำตาลเข้มใช้ได้เฉพาะตัวอักษร ไอคอน และปุ่มหลักเท่านั้น
   */
  --brown:    #5A4035;  /* CI Primary — Kham Brown */
  --brown-dk: #382820;  /* CI Primary Dark — Espresso (ใช้เป็น hover ของปุ่มหลัก) */
  --sand:     #E8D2B8;  /* CI Accent — Warm Sand (ป้าย ไฮไลต์ พื้นส่วนเน้น) */
  --cream:    #FAF7F2;  /* CI Background — Warm Ivory */
  --card:     #FFFFFF;  /* CI Surface — White */
  --ink:      #302A27;  /* CI Text Primary — Charcoal Brown */
  --muted:    #82766F;  /* CI Text Secondary — Taupe */
  --line:     #E6DED7;  /* CI Border / Divider — Soft Beige */

  /* สีรอง / ปุ่มสำคัญ ในแผ่น CI คือ Secondary / CTA */
  --cta:    #C98262;    /* CI Secondary / CTA — Terracotta */

  /*
   * ---------- เฉดที่ผสมขึ้นเอง เพราะ CI ไม่ได้ให้มา ----------
   * ทุกตัวผสมจากสี CI ข้างบน ไม่ได้หยิบสีนอกชุดมาใส่
   */
  --cta-dk: #B06B4A;  /* Terracotta เข้มขึ้น ใช้เป็น hover ของปุ่ม CTA */
  --cta-lt: #F7EBE3;  /* Terracotta จาง ใช้เป็นพื้นป้ายและกล่องข้อความ */
  --band:   #F3EDE6;  /* กึ่งกลางระหว่าง Warm Ivory กับ Warm Sand */
                      /* Warm Sand เข้มเกินกว่าจะปูเต็มแถบกว้าง ๆ ได้ */
  --hair:   #F2ECE6;  /* เส้นคั่นในตาราง อ่อนกว่า --line หนึ่งขั้น */
  --off:    #D5D2CE;  /* พื้นปุ่มที่กดไม่ได้ ตามที่เห็นในแผ่น CI */

  /* พื้นหลังหน้าเว็บ = CI Background */
  --page:  #FAF7F2;

  /*
   * ---------- สถานะ ----------
   * สามสีแรกมาจาก CI ตรง ๆ แต่ CI ให้ไว้เป็นสีพื้นปุ่ม ไม่ใช่สีตัวอักษร
   * เอามาเป็นตัวอักษรบนพื้นอ่อนตรง ๆ จะจางเกินไปจนอ่านยาก
   * จึงมีคู่ -ink ที่เข้มขึ้นสำหรับตัวอักษร และ -lt ที่จางลงสำหรับพื้น
   *
   * CI ไม่มีสีสำหรับ "คำเตือน" ให้มา จึงยืม Terracotta ซึ่งเป็นสีเดียว
   * ในชุดที่อยู่ในโทนส้ม-เหลือง อันเป็นโทนที่คนอ่านว่า "ระวัง" อยู่แล้ว
   */
  --ok:    #738A72;  --ok-lt:    #EDF2EC;  --ok-ink:    #47603F;  /* CI Success — Sage Green */
  --alert: #D67C7C;  --alert-lt: #FAEEEE;  --alert-ink: #A04B4B;  /* CI Error — Soft Red */
  --info:  #6B8FBF;  --info-lt:  #EDF1F9;  --info-ink:  #3F5F91;  /* CI Info — Soft Blue */
  --warn:  #C98262;  --warn-lt:  #FAF0E9;  --warn-ink:  #8F5433;  /* ยืมจาก CI Terracotta */

  /* ความกว้างเนื้อหา — บรรทัดยาวเกินไปอ่านยาก จอคอมจึงต้องจำกัด */
  --w-auth: 560px;
  --w-form: 680px;
  --w-page: 960px;
  --w-wide: 1180px;

  /*
   * ขนาดตัวอักษรมีแค่สองค่าทั้งเว็บ ตามที่เจ้าของสั่งเมื่อ 2026-08-30
   *   --fs    ข้อความทุกชนิด — เนื้อความ ลิงก์ ปุ่ม ช่องกรอก ป้าย เมนู ท้ายเว็บ
   *   --fs-h  หัวข้อทุกระดับ h1 h2 h3 หัวการ์ด หัวคอลัมน์
   *
   * ยกเว้นอย่างเดียวคือ Motto บนหน้าแรก (.lp-hero h1) ที่ใหญ่เป็นพิเศษ
   *
   * ⚠️ ห้ามเขียน font-size เป็นตัวเลข px ที่อื่นอีก ให้ใช้สองตัวแปรนี้เท่านั้น
   *    ไม่งั้นจะกลับไปกระจัดกระจายเหมือนเดิม ตอนยุบครั้งนี้มีอยู่เกือบ 40 ค่า
   */
  --fs:   16px;
  --fs-h: 20px;

  --r-card: 14px;
  --r-input: 10px;
  --r-pill: 999px;

  /* เงาผสมจาก Espresso #382820 ให้เงาอมน้ำตาลเข้าชุดกับพื้นครีม ไม่ใช่เทากลาง */
  --shadow:    0 2px 10px rgba(56, 40, 32, .06);
  --shadow-lg: 0 10px 28px rgba(56, 40, 32, .12);

  /*
   * ฟอนต์ตามแผ่น CI คือ Arimo ทั้งเว็บ
   *
   * ⚠️ Arimo ไม่มีตัวอักษรไทย ข้อความไทยจะตกไปที่ตัวถัดไปในรายการเสมอ
   *    จึงต้องมี Noto Sans Thai ต่อท้ายทุกครั้ง ห้ามลบออก
   *    ไม่งั้นภาษาไทยจะไปโผล่เป็นฟอนต์ระบบซึ่งคนละบุคลิกกันคนละเรื่อง
   *
   * Noto Sans Thai แคบและเตี้ยกว่า Kanit ที่ใช้อยู่เดิมพอสมควร
   * หัวเรื่องจึงดูเบากว่าเดิม เป็นผลที่ตั้งใจ ไม่ใช่ฟอนต์โหลดไม่ขึ้น
   */
  --font-body: 'Arimo', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Arimo', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/*
 * ⚠️ body ต้องเป็น min-height ไม่ใช่ height — ห้ามเปลี่ยนกลับ
 *
 * ไฟล์นี้ตั้ง box-sizing: border-box ให้ทุกอิลิเมนต์
 * พอ body สูง 100% เป๊ะ ๆ ค่า padding-bottom จะถูกนับ "ข้างใน" ความสูงจอ
 * ไม่ได้ต่อพื้นที่เพิ่มท้ายเอกสาร เนื้อหาที่ยาวเกินจอจึงล้นทะลุ padding ออกไป
 * แล้วไปนอนอยู่ใต้แถบเมนูล่างจนอ่านไม่เห็น
 *
 * วัดจริงบนจอ 390x844: ปุ่มบรรทัดสุดท้ายถูกแถบเมนูทับไป 50px
 * ทั้งที่ตั้ง padding-bottom ไว้ 75px และแถบเมนูสูงแค่ 66px
 *
 * min-height ให้ผลเรื่องดันท้ายเว็บลงล่างเหมือนเดิมทุกอย่าง
 * แต่ยอมให้เอกสารสูงเกินจอได้ padding-bottom จึงทำงานจริง
 */
html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

h1, h2, h3, .head { font-family: var(--font-head); font-weight: 700; letter-spacing: -.1px; }
/* หัวข้อทุกระดับขนาดเท่ากัน ต่างกันที่น้ำหนักและสีเท่านั้น */
h1, h2, h3 { font-size: var(--fs-h); margin: 0 0 4px; }

/* ลิงก์ใช้ Kham Brown ไม่ใช่ Taupe — Taupe เป็นสีข้อความรอง อ่อนเกินกว่าจะสื่อว่ากดได้ */
a { color: var(--brown); }

/* ---------- โครงหน้า ---------- */

.wrap { width: 100%; margin: 0 auto; padding: 16px; flex: 1 0 auto; }
.wrap.auth { max-width: var(--w-auth); }
.wrap.form { max-width: var(--w-form); }
.wrap.page { max-width: var(--w-page); }
.wrap.wide { max-width: var(--w-wide); }
.wrap.full { max-width: none; padding: 0; }

/* ---------- แถบหัวเว็บ ---------- */

.topbar {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar-in {
  max-width: 1340px; margin: 0 auto;
  padding: 0 20px; min-height: 84px;
  display: flex; align-items: center; gap: 16px;
}

/*
 * ตราสินค้า — ตอนนี้เป็นตัวอักษรไปก่อน เจ้าของจะส่งไฟล์โลโก้มาทีหลัง
 * พอมีไฟล์แล้ว brand_mark() จะสลับไปใช้ <img class="brand-img"> เองอัตโนมัติ
 * โดยไม่ต้องแก้ CSS ตรงนี้
 */
.brand {
  text-decoration: none; white-space: nowrap;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1;
}
.brand .wm {
  font-family: var(--font-head); font-weight: 400;
  font-size: 38px; letter-spacing: 6px; color: var(--brown-dk);
  padding-left: 6px; line-height: 1.05;
}
.brand .sub {
  font-size: 12px; letter-spacing: 2.6px; color: var(--muted);
  margin-top: 4px; text-transform: none;
}
/*
 * โลโก้จริงเป็นภาพสัดส่วน 2:1 (1774x887) มีขอบโปร่งรอบ ๆ ราว 6% ซ้ายขวา
 * ตั้งความสูง 66px จะได้กว้างราว 132px ใกล้เคียงสัดส่วนในภาพแบบ
 * และยังเหลือช่องว่างบนล่างในแถบหัวเว็บที่สูง 84px
 *
 * บรรทัด MASSAGE FINDER ในโลโก้สูงราว 4.5% ของภาพ ที่ขนาดนี้จึงอ่านไม่ออก
 * ทำหน้าที่เป็นลายประกอบเท่านั้น เป็นเรื่องปกติของโลโก้ทรงนี้
 * ถ้าอยากให้อ่านออกต้องใช้โลโก้อีกแบบที่ตัวอักษรใหญ่กว่า ไม่ใช่ขยายอันนี้
 */
.brand-img { display: block; height: 66px; width: auto; }

.nav { display: none; flex: 1; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-input);
  color: var(--brown); text-decoration: none; font-size: var(--fs);
}
.nav a:hover { background: var(--band); }
.nav a.on { background: var(--sand); color: var(--brown-dk); font-weight: 600; }
/* ไอคอนในเมนูเป็น SVG จาก icon() ต้องกำหนดขนาดกล่อง ไม่งั้นกางเต็มพื้นที่ */
.nav a .ic { display: inline-flex; width: 19px; height: 19px; flex: 0 0 auto; }
.nav a .ic svg { width: 100%; height: 100%; }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.top-actions a { color: var(--brown); text-decoration: none; font-size: var(--fs); }
.top-actions a:hover { color: var(--brown-dk); }
.top-actions .meta { color: var(--muted); }

/* กระดิ่งแจ้งเตือน — เดิมเป็นอิโมจิ 🔔 เปลี่ยนเป็นไอคอนเส้นชุดเดียวกับทั้งเว็บ */
.top-actions .bell { display: inline-flex; align-items: center; gap: 5px; }
.top-actions .bell svg { width: 21px; height: 21px; }

/* เส้นคั่นแนวตั้งระหว่างลิงก์ในแถบหัวเว็บ ตามแบบ */
.top-sep { width: 1px; height: 18px; background: var(--line); display: none; }

/* ปุ่มในแถบหัวเว็บสำหรับคนที่ยังไม่ล็อกอิน */
.head-btn {
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--brown); color: var(--brown) !important;
  font-size: var(--fs); font-weight: 600; text-decoration: none; white-space: nowrap;
  background: transparent;
}
.head-btn:hover { background: var(--sand); }
/* ปุ่มสมัครสมาชิกบนหัวเว็บใช้ Terracotta ตามภาพแบบ เพราะเป็น conversion action */
.head-btn.solid {
  background: var(--cta); border-color: var(--cta); color: #fff !important;
}
.head-btn.solid:hover { background: var(--cta-dk); border-color: var(--cta-dk); }
.head-link { display: none; }

/* ---------- แถบเมนูล่าง — เฉพาะมือถือ ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--card); border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: 8px 2px 6px;
  color: var(--muted); text-decoration: none;
  font-family: var(--font-head); font-size: var(--fs); font-weight: 600;
}
.tabbar a.on { color: var(--brown); }
/* ไอคอนแถบล่างเป็น SVG จาก icon() แล้ว ต้องกำหนดขนาดเอง */
.tabbar .ico { display: flex; justify-content: center; margin-bottom: 3px; }
.tabbar .ico svg { width: 22px; height: 22px; }

/*
 * ⚠️ ที่ว่างท้ายหน้าสำหรับหลบแถบเมนูล่าง
 *
 * ของเดิมตั้งไว้ตายตัวที่ 68px ซึ่งเดาจากแถบสี่ช่องบนเครื่องเดียว
 * พอเพิ่มเป็นห้าช่องและเปลี่ยนไอคอนเป็น SVG แถบสูงขึ้น
 * เนื้อหาบรรทัดสุดท้ายเลยถูกบังบนมือถือบางรุ่น
 *
 * แก้เป็นคิดจากส่วนประกอบจริงบวก safe-area ของเครื่อง
 *   8px บน + ไอคอน 22 + ระยะห่าง 3 + บรรทัดข้อความ ~22 + 6px ล่าง ≈ 61px
 *   เผื่ออีก 14px กันฟอนต์ที่ผู้ใช้ตั้งใหญ่กว่าปกติ
 *   env(safe-area-inset-bottom) คือแถบขีดล่างของ iPhone รุ่นไม่มีปุ่มโฮม
 *   เครื่องที่ไม่มีจะได้ 0px จากค่าสำรอง ไม่ต้องแยกกฎตามรุ่น
 */
:root { --tabbar-h: 75px; }
body.has-tabbar {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .nav { display: flex; }
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
  .wrap { padding: 24px 16px 48px; }
  .wrap.full { padding: 0; }
  .head-link { display: inline; }
  .top-sep { display: block; }
}

/* ---------- การ์ด ---------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px;
  margin-bottom: 12px; box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; }
.card.pad0 { padding: 0; overflow: hidden; }

.eyebrow {
  font-family: var(--font-head);
  font-size: var(--fs); font-weight: 700; color: var(--brown);
  letter-spacing: 1.2px; text-transform: uppercase; margin: 22px 0 8px;
}
.meta { font-size: var(--fs); color: var(--muted); line-height: 1.55; }

/*
 * แถวหัวข้อ–ค่า
 *
 * ⚠️ เดิมเป็น flex ที่ตั้ง dt ไว้ 40% ของกล่อง
 *    ในกล่องแคบ ๆ 40% เหลือแค่ห้าสิบกว่าพิกเซล หัวข้อภาษาไทยยาว ๆ
 *    เลยถูกหักเป็นบรรทัดละสองสามตัวอักษร อ่านไม่ออกเลย
 *    เจ้าของถ่ายมาให้ดูเมื่อ 2026-09-09 ("จำ / รหัส / ผ่าน / ให้ดี")
 *
 *    เปลี่ยนเป็น grid แล้วใช้ minmax(9ch, 34%) การันตีว่าคอลัมน์หัวข้อ
 *    กว้างพออ่านได้เสมอ ไม่ว่ากล่องที่ครอบอยู่จะแคบแค่ไหน
 *    จอแคบมากยุบเป็นแถวเดียว หัวข้ออยู่บน ค่าอยู่ล่าง อ่านง่ายกว่าบีบสองคอลัมน์
 */
.kv {
  display: grid; grid-template-columns: minmax(9ch, 34%) 1fr;
  gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--hair);
}
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); font-size: var(--fs); margin: 0; }
.kv dd { margin: 0; font-size: var(--fs); word-break: break-word; }

@media (max-width: 560px) {
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dt { font-size: 14px; }
}

.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }

/* ---------- ป้ายสถานะ ---------- */

.pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs); font-weight: 600; white-space: nowrap;
}
.pill.muted { background: var(--hair);     color: var(--muted); }
.pill.ok    { background: var(--ok-lt);    color: var(--ok-ink); }
.pill.warn  { background: var(--warn-lt);  color: var(--warn-ink); }
.pill.alert { background: var(--alert-lt); color: var(--alert-ink); }
.pill.info  { background: var(--info-lt);  color: var(--info-ink); }
.pill.brown { background: var(--sand);     color: var(--brown-dk); }
.pill.cta   { background: var(--cta-lt);   color: var(--warn-ink); }

.tag {
  display: inline-block; padding: 4px 10px; margin: 0 4px 4px 0;
  background: var(--sand); border-radius: var(--r-pill);
  font-size: var(--fs); color: var(--brown-dk);
}

/* ป้าย "+N อย่าง" ท้ายแถวทักษะ ให้จางกว่าป้ายจริงเพราะไม่ใช่ชื่อทักษะ */
.tag.muted { background: transparent; border: 1px dashed var(--line); color: var(--muted); }

/* ---------- กล่องข้อความ ---------- */

/*
 * กล่องข้อความแจ้ง
 *
 * ⚠️ เดิมตั้งเป็น display:flex ซึ่งเป็นต้นเหตุที่เจ้าของทักเมื่อ 2026-09-09
 *    ว่าข้อความอ่านไม่ออก ("จำ / รหัส / ผ่าน / ให้ดี" หักบรรทัดละคำ)
 *
 *    เพราะในกล่อง flex ทุกก้อนที่อยู่ข้างในกลายเป็น flex item แยกกัน
 *    <b>จำรหัสผ่านให้ดี</b> จึงเป็นคอลัมน์ของตัวเอง แล้วถูกบีบจนแคบ
 *    ส่วนข้อความที่เหลือเป็นอีกคอลัมน์ ไม่ได้ไหลต่อกันเป็นย่อหน้าเดียว
 *
 *    เปลี่ยนเป็น block ข้อความจึงไหลต่อกันปกติ ตัวหนาอยู่ต้นประโยคเหมือนที่ตั้งใจ
 *    ไอคอนที่นำหน้าข้อความใช้ icon_i() ซึ่งเป็น SVG แบบ inline อยู่แล้ว
 *    จัดตำแหน่งด้วย vertical-align ของคลาส .i-inline ไม่ต้องพึ่ง flex
 *
 * ⚠️ ห้ามเปลี่ยนกลับเป็น flex ถ้าอยากได้ไอคอนคนละคอลัมน์กับข้อความ
 *    ให้ทำคลาสใหม่แยกต่างหาก อย่าแก้ที่ .note เพราะใช้กันทั้งเว็บ
 */
.note {
  display: block; padding: 12px 14px;
  border-radius: var(--r-input); font-size: var(--fs); line-height: 1.55;
  margin-bottom: 12px;
  background: var(--info-lt); color: var(--info-ink);
}
.note.warn  { background: var(--warn-lt);  color: var(--warn-ink); }
.note.alert { background: var(--alert-lt); color: var(--alert-ink); }
.note.ok    { background: var(--ok-lt);    color: var(--ok-ink); }
.note b { font-weight: 600; }

/* ---------- ฟอร์ม ---------- */

.field { margin-bottom: 14px; }
.field > label {
  display: block; font-weight: 600; font-size: var(--fs); margin-bottom: 6px;
}
.field .hint { font-size: var(--fs); color: var(--muted); margin-top: 5px; }

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 12px 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
  font-family: inherit; font-size: var(--fs);
}
textarea { min-height: 88px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(201, 130, 98, .22);
}
input[disabled], select[disabled] { background: var(--hair); color: var(--muted); }

.suffix { position: relative; }
.suffix .unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: var(--fs); pointer-events: none;
}

.opt {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 13px; margin-bottom: 8px;
  cursor: pointer;
}
.opt:has(input:checked) { border-color: var(--cta); background: var(--cta-lt); }
.opt input { margin: 3px 0 0; accent-color: var(--brown); flex: 0 0 auto; }
.opt .t { font-size: var(--fs); }
.opt:has(input:checked) .t { font-weight: 600; }

.check {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 13px; margin-bottom: 12px;
  cursor: pointer; font-size: var(--fs); line-height: 1.6;
}
.check:has(input:checked) { border-color: var(--cta); background: var(--cta-lt); }
.check input { margin: 3px 0 0; accent-color: var(--brown); flex: 0 0 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips label {
  padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); font-size: var(--fs); cursor: pointer;
}
.chips label:has(input:checked) {
  background: var(--brown); border-color: var(--brown); color: #fff; font-weight: 600;
}
.chips input { display: none; }

.doc {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 13px; margin-bottom: 12px;
}
.doc .req  { font-size: var(--fs); font-weight: 600; color: var(--alert-ink);
             background: var(--alert-lt); padding: 2px 7px; border-radius: 5px; }
.doc .optn { font-size: var(--fs); font-weight: 600; color: var(--muted);
             background: var(--hair); padding: 2px 7px; border-radius: 5px; }
.doc input[type=file] { width: 100%; margin-top: 10px; font-size: var(--fs); }
/*
 * ⚠️ กฎ .doc .thumb เดิมถูกลบออกเมื่อ 2026-09-09
 *    มันเจาะจงกว่ากฎ .thumb ตัวใหม่ที่ท้ายไฟล์ จึงชนะเสมอเมื่ออยู่ในกล่อง .doc
 *    ผลคือรูปในหน้าอัปเอกสารยังโดนครอบตัดแบบเดิม ทั้งที่แก้กฎกลางไปแล้ว
 *    ตอนนี้ใช้กฎ .thumb ตัวเดียวทั้งเว็บ อย่าเพิ่มกฎที่เจาะจงกว่านั้นกลับมาอีก
 */

/* ---------- ปุ่ม ---------- */

/*
 * ชุดปุ่มตามแผ่น CI 2026-09-09 — ทรงแคปซูลเต็มใบ และมีลูกศรชี้ขวาทุกใบ
 *
 * ลูกศรวางแบบ absolute ชิดขวา ไม่ได้ต่อท้ายข้อความ
 * เพราะในแผ่น CI ข้อความอยู่กลางปุ่ม ส่วนลูกศรลอยอยู่ริมขวา
 * ถ้าใช้ gap ต่อท้ายข้อความ ทั้งคู่จะเกาะกลุ่มกันกลางปุ่มซึ่งผิดแบบ
 *
 * padding ซ้ายขวาเท่ากัน เพื่อให้ข้อความอยู่กลางจริง ๆ
 * ไม่ใช่เยื้องซ้ายเพราะต้องเว้นที่ให้ลูกศร
 *
 * ปุ่มที่ไม่ควรมีลูกศร ใส่ .no-arrow เพิ่ม
 */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 13px 44px; border: 1.5px solid transparent;
  border-radius: var(--r-pill); background: var(--brown); color: #fff;
  font-family: inherit; font-size: var(--fs); font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.35;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn::after {
  content: '→';
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-weight: 400; line-height: 1;
  transition: transform .16s ease;
}
.btn:hover::after { transform: translateY(-50%) translateX(3px); }
.btn.no-arrow { padding-left: 22px; padding-right: 22px; }
.btn.no-arrow::after { content: none; }

/* Primary — Kham Brown ตัวอักษรขาว hover เป็น Espresso */
.btn:hover  { background: var(--brown-dk); }
.btn:active { transform: translateY(1px); }

/*
 * Secondary / CTA — Terracotta
 * .cta คือชื่อใหม่ ส่วน .gold คือชื่อเดิมที่ยังถูกเรียกอยู่ในไฟล์ PHP หลายที่
 * เก็บไว้เป็นชื่อพ้องจะได้ไม่ต้องไล่แก้ทุกหน้าพร้อมกัน
 * ⚠️ ของใหม่ให้ใช้ .cta เท่านั้น อย่าเขียน .gold เพิ่มอีก
 */
.btn.cta, .btn.gold { background: var(--cta); color: #fff; }
.btn.cta:hover, .btn.gold:hover { background: var(--cta-dk); }

/* Outline — พื้นโปร่ง ขอบและตัวอักษรเป็น Kham Brown hover ถมด้วย Warm Sand */
.btn.outline { background: transparent; border-color: var(--brown); color: var(--brown); }
.btn.outline:hover { background: var(--sand); color: var(--brown-dk); }

/* Ghost — ไม่มีพื้นไม่มีขอบ ใช้กับ ยกเลิก / กลับ hover ขึ้นพื้นเบจจาง */
.btn.ghost { background: transparent; border-color: transparent; color: var(--brown); }
.btn.ghost:hover { background: var(--band); color: var(--brown-dk); }

/* สถานะ — พื้นสีตรงจาก CI คู่กับตัวอักษรขาว */
.btn.ok     { background: var(--ok);    color: #fff; }
.btn.ok:hover     { background: var(--ok-ink); }
.btn.danger { background: var(--alert); color: #fff; }
.btn.danger:hover { background: var(--alert-ink); }
.btn.info   { background: var(--info);  color: #fff; }
.btn.info:hover   { background: var(--info-ink); }

/* กดไม่ได้ — เทาอมเบจ ต้องดูออกทันทีว่าไม่ใช่ปุ่มที่ใช้งานได้ */
.btn[disabled], .btn.off {
  background: var(--off); color: #fff; border-color: transparent;
  cursor: not-allowed; pointer-events: none;
}

.btn.sm { width: auto; padding: 9px 36px 9px 16px; }
.btn.sm::after { right: 14px; }
.btn.sm.no-arrow { padding: 9px 16px; }
.btn + .btn { margin-top: 8px; }

/* ---------- อื่น ๆ ---------- */

.empty { text-align: center; padding: 34px 18px; color: var(--muted); }
.empty h3 { color: var(--ink); }

.steps { display: flex; gap: 8px; margin-bottom: 20px; }
.steps > div { flex: 1; }
.steps .bar { height: 3px; border-radius: 2px; background: var(--line); margin-bottom: 6px; }
.steps .on .bar { background: var(--cta); }
.steps .lbl { font-size: var(--fs); color: var(--muted); }
.steps .on .lbl { color: var(--brown); font-weight: 600; }

.list-row {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--hair);
  text-decoration: none; color: inherit;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--hair); }

.sp   { height: 12px; }
.sp-l { height: 20px; }

.center { text-align: center; }
.muted  { color: var(--muted); }

.flash {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 84px; z-index: 60; max-width: calc(100% - 32px);
  background: var(--brown-dk); color: #fff;
  padding: 11px 18px; border-radius: 14px; font-size: var(--fs);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) { .flash { bottom: 24px; } }

/* ---------- หน้าล็อกอิน ---------- */

.hero {
  background: var(--band); border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--brown-dk); padding: 34px 24px 30px; text-align: center;
}
.hero .brand { display: inline-flex; }
.hero .tagline { color: var(--muted); font-size: var(--fs); margin-top: 8px; }

.auth-card {
  background: transparent; padding: 22px 0 0; position: relative;
}

/* ---------- หน้าเข้าสู่ระบบ สมัครสมาชิก ลืมรหัสผ่าน ---------- */

/*
 * เดิมหน้าพวกนี้เป็นคอลัมน์แคบ 560px กลางจอ พอเปิดบนคอมเลยเป็นแถบผอม
 * ลอยอยู่กลางพื้นที่ว่าง ดูเหมือนหน้าจอมือถือที่ถูกยืดมาวางบนเดสก์ท็อป
 *
 * ตอนนี้เป็นสองคอลัมน์แบบเดียวกับ hero หน้าแรก
 * ซ้ายเป็นแผงเบจมีเส้นโค้ง ขวาเป็นการ์ดขาวใส่ฟอร์ม
 * จอแคบกว่า 900px ยุบเหลือคอลัมน์เดียว แผงซ้ายซ่อนไป
 */
.auth-split { display: block; }

.auth-side { display: none; }

.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px 48px;
}
.auth-box { width: 100%; max-width: 440px; }

.auth-box .card-form {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 28px 24px;
}
.auth-box h1 { margin-bottom: 18px; }

/* ปุ่มรองสองใบเรียงคู่กัน ไม่ใช่ซ้อนกันเต็มความกว้างทั้งสามใบ */
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { width: auto; flex: 1; margin-top: 0; }

@media (min-width: 900px) {
  .auth-split {
    display: grid; grid-template-columns: 1.05fr .95fr;
    min-height: calc(100vh - 84px); align-items: stretch;
  }

  .auth-side {
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
    background: var(--sand); padding: 56px 56px 56px 8%;
  }
  /* เส้นโค้งชุดเดียวกับ hero หน้าแรก ให้รู้สึกว่าเป็นเว็บเดียวกัน */
  .auth-side::before {
    content: ''; position: absolute;
    top: -60%; bottom: -60%; left: -70%;
    width: 150%; background: var(--cream);
    border-radius: 0 50% 50% 0 / 0 50% 50% 0;
  }
  .auth-side > * { position: relative; z-index: 1; }
  .auth-side h2 {
    font-size: clamp(28px, 2.9vw, 44px); line-height: 1.25;
    color: var(--brown-dk); margin-bottom: 14px;
  }
  .auth-side p { color: var(--brown); max-width: 30ch; margin: 0; }

  .auth-panel { padding: 56px 8% 56px 40px; justify-content: flex-start; }
  .auth-box .card-form { padding: 36px 34px; }
}

/* ---------- แถบค้นหาแบบเว็บหางาน ---------- */

.searchband {
  background: var(--band);
  border-bottom: 1px solid var(--line);
  padding: 22px 16px;
}
.searchband-in { max-width: var(--w-wide); margin: 0 auto; }

.searchbar { display: flex; flex-direction: column; gap: 8px; }
.searchbar .f { position: relative; flex: 1; }
/* ไอคอนตัวเดียวในเว็บที่กล่องไม่มีขนาดของตัวเอง จึงต้องกำหนด svg ตรงนี้ */
.searchbar .f .ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
  display: inline-flex; align-items: center;
}
.searchbar .f .ic svg { width: 18px; height: 18px; }
.searchbar input, .searchbar select {
  padding: 13px 14px 13px 38px; border: 1px solid var(--line);
  border-radius: var(--r-input); background: var(--card);
  font-size: var(--fs); width: 100%;
}
.searchbar .btn { width: 100%; }

@media (min-width: 768px) {
  .searchbar { flex-direction: row; align-items: stretch; }
  .searchbar .f { min-width: 0; }
  .searchbar .f.kw { flex: 2; }
  .searchbar .btn { width: auto; flex: 0 0 auto; padding-left: 34px; padding-right: 34px; }
}

/* แถวชิปกรอง — เลื่อนแนวนอนได้บนมือถือ */
.filterbar {
  display: flex; gap: 8px; margin-top: 12px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.filterbar::-webkit-scrollbar { display: none; }
.filterbar a, .filterbar button {
  flex: 0 0 auto; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--card);
  color: var(--brown); font-family: inherit; font-size: var(--fs);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.filterbar a:hover { border-color: var(--brown); color: var(--brown-dk); }
.filterbar a.on {
  background: var(--brown); border-color: var(--brown);
  color: #fff; font-weight: 600;
}

/* หัวผลลัพธ์ — จำนวนงานและตัวเรียง */
.results-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.results-head .count {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs);
}
.results-head .sorter { margin-left: auto; }
.results-head select {
  width: auto; padding: 7px 12px; font-size: var(--fs); border-radius: var(--r-pill);
}

/* ---------- สองคอลัมน์ รายการซ้าย รายละเอียดขวา ---------- */

.split { display: block; }
.split .list { min-width: 0; }
.split .detail { display: none; }

@media (min-width: 1024px) {
  .split {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    gap: 18px; align-items: start;
  }
  .split .detail {
    display: block; position: sticky; top: 76px;
    max-height: calc(100vh - 96px); overflow-y: auto;
  }
  .split .list { max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 4px; }
}

/* ---------- การ์ดประกาศงาน ---------- */

.jobcard {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--r-card); padding: 15px 16px; margin-bottom: 10px;
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
}
.jobcard:hover { border-color: var(--cta); box-shadow: var(--shadow-lg); }
.jobcard.on { border-left-color: var(--cta); background: var(--cta-lt); }

.jobcard .jt {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs);
  color: var(--brown-dk); margin-bottom: 2px;
}
.jobcard .jshop { font-size: var(--fs); color: var(--ink); }
.jobcard .jarea { font-size: var(--fs); color: var(--muted); }
.jobcard .jpay {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs);
  color: var(--brown-dk); margin-top: 6px;
}
.jobcard .jfoot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair);
  font-size: var(--fs); color: var(--muted);
}

/* ชื่อร้านที่ยังไม่เปิดเผยให้คนนอกเห็น */
.locked {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--hair); color: var(--muted);
  padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs);
}

/* ---------- หน้าแรกสำหรับคนที่ยังไม่สมัคร ---------- */

/*
 * เขียนใหม่ทั้งบล็อกเมื่อ 2026-09-09 ตามภาพแบบที่เจ้าของส่งมา
 * เจ้าของสั่งว่า "สี โลโก้ รูปภาพ การจัดวางแต่ละเมนู ให้ตามนี้แป๊ะ ๆ"
 *
 * ลำดับบล็อกในแบบ ห้ามสลับ
 *   1 hero            หัวเรื่อง + คำโปรย + ปุ่มสองใบ + ตัวเลขสามช่อง + รูปฝั่งขวา
 *   2 lp-duo          การ์ดสองใบ สำหรับหมอนวด / สำหรับผู้ประกอบการ
 *   3 lp-grid         งานใหม่ล่าสุด (ซ้าย) + วิธีการใช้งาน (ขวา)
 *   4 site-foot       ท้ายเว็บพื้นเข้ม
 *
 * ⚠️ กติกาเดิมที่ว่า "ห้ามใช้สีเข้มเป็นพื้นของบล็อกใหญ่ รวมท้ายเว็บ" ถูกยกเลิกแล้ว
 *    ทั้งภาพแบบและแผ่น CI ระบุตรงกันว่าท้ายเว็บใช้ Espresso เป็นพื้น
 *    ส่วนที่ยังใช้อยู่คือ hero กับแถบหัวเว็บ ยังต้องเป็นพื้นครีมเหมือนเดิม
 */

.lp-hero {
  position: relative; overflow: hidden;
  background: var(--cream); color: var(--ink);
}

/*
 * แผงกราฟิกฝั่งขวา — แทนที่รูปถ่ายคนเดิม
 *
 * เจ้าของตัดสินใจเมื่อ 2026-09-09 ว่าจะไม่ใช้รูปคนบนเว็บแล้ว
 * ถ้าปล่อยฝั่งขวาว่างเปล่า hero จะเอียงไปข้างเดียวและดูเหมือนรูปโหลดไม่ขึ้น
 * จึงวางองค์ประกอบสามชั้นซ้อนกันแทน วาดด้วย CSS กับ SVG ล้วน ไม่มีไฟล์ภาพ
 *
 *   ring       วงแหวนบางสีเบจ เป็นกรอบนอกสุด
 *   dot        วงกลมทึบจาง ๆ ถ่วงน้ำหนักไม่ให้วงแหวนลอย
 *   leaf       ใบไม้ประจำแบรนด์ จางมากเพื่อไม่แย่งสายตาจากหัวเรื่อง
 *   lp-script  ข้อความลายมือ อยู่ชั้นบนสุด
 *
 * ซ่อนทั้งก้อนบนจอแคบ เพราะพื้นที่ไม่พอและเนื้อหาจริงอยู่ฝั่งซ้ายทั้งหมดอยู่แล้ว
 */
.lp-art { display: none; }

.lp-hero-in {
  position: relative; z-index: 2;
  max-width: 1340px; margin: 0 auto; padding: 34px 20px 32px;
}

.lp-hero h1 {
  font-size: 38px; line-height: 1.24; color: var(--brown-dk);
  margin-bottom: 14px; font-weight: 700; letter-spacing: -.5px;
}
.lp-hero p.sub {
  color: var(--ink); font-size: var(--fs); line-height: 1.7;
  margin: 0 0 26px; max-width: 40ch;
}

/*
 * ปุ่มสองใบวางเรียงข้างกันตามแบบ
 * ซ้ายเป็นฝั่งหางาน ใช้ Kham Brown ขวาเป็นฝั่งหาคน ใช้ Terracotta
 * แผ่น CI กำหนดว่า Terracotta มีหน้าที่ดึงสายตาไปที่ conversion
 * ฝั่งร้านคือฝั่งที่จ่ายเงิน จึงเป็นใบที่ควรได้สีนั้น
 */
.lp-roles { display: flex; flex-wrap: wrap; gap: 14px; }
.lp-roles a {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 58px 15px 26px; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  text-decoration: none; line-height: 1.3;
  transition: background .16s ease;
}
.lp-roles a::after {
  content: '→'; position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%); font-weight: 400;
  transition: transform .16s ease;
}
.lp-roles a:hover::after { transform: translateY(-50%) translateX(3px); }
.lp-roles a .ic { flex: 0 0 auto; display: inline-flex; }
.lp-roles a .ic svg { width: 24px; height: 24px; }

.lp-roles a.fill { background: var(--brown); color: #fff; }
.lp-roles a.fill:hover { background: var(--brown-dk); }
.lp-roles a.cta { background: var(--cta); color: #fff; }
.lp-roles a.cta:hover { background: var(--cta-dk); }

/*
 * ตัวเลขสามช่องใต้ปุ่ม มีเส้นคั่นตั้งระหว่างช่องตามแบบ
 *
 * ⚠️ ตัวเลขดึงจากฐานข้อมูลจริงทั้งสามช่อง ไม่ใช่เลขที่พิมพ์ค้างไว้
 *    ในภาพแบบเขียนไว้ว่า 3,850+ / 520+ / 1,200+ ซึ่งเป็นเลขสมมติสำหรับจัดหน้า
 *    เว็บนี้อ้างกับผู้ใช้ว่า "ตรวจสอบข้อมูลได้จริง" ถ้าโชว์เลขปลอมก็ขัดกันเอง
 */
/*
 * ⚠️ จอแคบต้องเรียงลงมาเป็นแถวตั้ง และห้ามมีเส้นคั่นซ้าย
 *    ของเดิมเขียนกฎเดสก์ท็อปไว้เป็นค่าพื้นฐาน พอตกบรรทัดบนมือถือ
 *    border-left ของช่องที่ 2 และ 3 กลายเป็นขีดตั้งลอยอยู่ข้างซ้ายของแต่ละแถว
 *    ซึ่งเป็นอาการที่เจ้าของถ่ายมาให้ดูเมื่อ 2026-09-09
 *    เส้นคั่นเป็นของเดสก์ท็อปเท่านั้น ย้ายไปอยู่ใน media query ข้างล่าง
 */
.lp-stats {
  margin-top: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.lp-stats .st {
  display: flex; align-items: center; gap: 12px;
  padding: 0; min-width: 0;
}
.lp-stats .st .ic {
  flex: 0 0 auto; color: var(--brown);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
}
.lp-stats .st .ic svg { width: 28px; height: 28px; }

@media (min-width: 700px) {
  .lp-stats { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 0; margin-top: 32px; }
  .lp-stats .st { padding: 0 26px; }
  .lp-stats .st:first-child { padding-left: 0; }
  .lp-stats .st + .st { border-left: 1px solid var(--line); }
}
.lp-stats .st b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 24px; line-height: 1.15; color: var(--brown-dk);
}
.lp-stats .st span { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; }
/*
 * ข้อความบนวงกลมกราฟิกหน้าแรก
 *
 * ⚠️ เคยใช้ฟอนต์ลายมือ Dancing Script ตอนข้อความยังเป็นภาษาอังกฤษ
 *    เจ้าของสั่งเปลี่ยนเป็นไทยเมื่อ 2026-09-09 ฟอนต์นั้นไม่มีตัวอักษรไทย
 *    จึงกลับมาใช้ฟอนต์หลักของเว็บ และถอดฟอนต์นั้นออกจาก lib/layout.php แล้ว
 *
 *    เอาการเอียง -4deg ออกด้วย ตัวอักษรไทยมีสระบนล่าง พอเอียงแล้วอ่านยาก
 *    ต่างจากลายมือภาษาอังกฤษที่เอียงแล้วดูเป็นธรรมชาติ
 *    ข้อความอยู่ที่ HERO_SCRIPT ใน brand.php
 */
.lp-script { display: none; }

@media (min-width: 900px) {
  .lp-hero-in {
    display: grid; grid-template-columns: 1fr .95fr;
    align-items: center; gap: 20px; padding: 70px 20px 64px; min-height: 560px;
  }
  .lp-hero-in > div:first-child { position: relative; z-index: 2; }

  .lp-hero h1 { font-size: clamp(40px, 4.4vw, 66px); line-height: 1.15; }
  .lp-hero p.sub { font-size: 17px; max-width: 42ch; margin-bottom: 30px; }

  /*
   * แผงกราฟิกฝั่งขวา
   * ใช้ aspect-ratio 1 เพื่อให้เป็นสี่เหลี่ยมจัตุรัสเสมอ วงกลมข้างในจะได้กลมจริง
   * ไม่ล็อกความสูงเป็น px เพราะจอกว้างต่างกันแล้วสัดส่วนจะเพี้ยน
   */
  .lp-art {
    display: flex; align-items: center; justify-content: center;
    position: relative; justify-self: center;
    width: 100%; max-width: 420px; aspect-ratio: 1;
  }

  /* วงแหวนบาง ๆ เป็นกรอบนอก */
  .lp-art .ring {
    position: absolute; inset: 4%;
    border: 1.5px solid var(--sand); border-radius: 50%;
  }
  /* วงกลมทึบจาง ถ่วงน้ำหนักไม่ให้วงแหวนดูลอย */
  .lp-art .dot {
    position: absolute; inset: 13%;
    background: radial-gradient(circle at 42% 34%,
      rgba(232, 210, 184, .58) 0%,
      rgba(232, 210, 184, .30) 55%,
      rgba(232, 210, 184, 0) 78%);
    border-radius: 50%;
  }
  /* ใบไม้ประจำแบรนด์ — จางมาก ทำหน้าที่เป็นพื้นหลังไม่ใช่ตัวเอก */
  .lp-art .leaf {
    position: absolute; right: 6%; bottom: 2%;
    width: 52%; height: 52%;
    color: var(--brown); opacity: .12;
  }

  .lp-script {
    display: block; position: relative; z-index: 2;
    max-width: 260px;
    font-family: var(--font-head); font-weight: 500;
    font-size: 26px; line-height: 1.55; color: var(--brown-dk);
    text-align: center;
  }
  .lp-script hr {
    border: 0; border-top: 1px solid var(--brown-md, var(--brown));
    width: 70px; margin: 12px auto 0; opacity: .5;
  }
}

/* ---------- การ์ดสองใบ สำหรับหมอนวด / สำหรับผู้ประกอบการ ---------- */

.lp-duo { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .lp-duo { grid-template-columns: 1fr 1fr; gap: 24px; } }

.lp-duo .d {
  position: relative; overflow: hidden;
  background: var(--band); border-radius: 22px;
  padding: 24px; display: grid; gap: 18px;
  grid-template-columns: 1fr; align-items: center;
}
/* คอลัมน์ซ้ายแคบลงจาก 150px เหลือ 116px เพราะเปลี่ยนจากช่องรูปเป็นเหรียญไอคอน 96px */
@media (min-width: 600px) {
  .lp-duo .d { grid-template-columns: 116px 1fr; padding: 26px 28px; gap: 22px; }
}

/*
 * เหรียญไอคอน — แทนที่ช่องรูปถ่ายเดิม
 *
 * เจ้าของตัดสินใจเมื่อ 2026-09-09 ว่าไม่ใช้รูปคนแล้ว
 * ช่องรูปเดิมกว้าง 150px ถ้าปล่อยว่างจะเป็นสี่เหลี่ยมเบจเปล่า ๆ ดูเหมือนรูปเสีย
 * เปลี่ยนเป็นวงกลมเบจใส่ไอคอนเส้น ซึ่งเป็นภาษาเดียวกับไอคอนที่เหลือทั้งเว็บ
 */
.lp-duo .d .medal {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--cta-lt); color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  justify-self: center; flex: 0 0 auto;
  box-shadow: 0 0 0 8px rgba(232, 210, 184, .34);
}
.lp-duo .d .medal svg { width: 42px; height: 42px; }
.lp-duo .d h3 { font-size: 26px; color: var(--brown-dk); margin-bottom: 6px; }
.lp-duo .d > div:last-child > p { color: var(--muted); margin: 0 0 14px; }

.lp-duo .d ul { list-style: none; margin: 0 0 18px; padding: 0; }
.lp-duo .d li {
  position: relative; padding-left: 26px; margin-bottom: 7px; line-height: 1.5;
}
/*
 * เดิมใช้ตัวอักษร ✓ ซึ่งแต่ละฟอนต์วาดคนละทรงและคนละความหนา
 * เปลี่ยนเป็นเส้นชุดเดียวกับ icon() เพื่อให้เข้าชุดกับไอคอนที่เหลือทั้งเว็บ
 */
.lp-duo .d li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 15px; height: 15px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A4035' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.6 12.4 4.8 4.8L19.4 6.8'/%3E%3C/svg%3E");
}
.lp-duo .d .btn { width: auto; }

/* ลายใบไม้จาง ๆ มุมขวาล่างของการ์ด วาดด้วย SVG ไม่ต้องโหลดไฟล์ */
.lp-duo .d .leaf {
  position: absolute; right: -18px; bottom: -26px; z-index: 0;
  width: 190px; height: 190px; color: var(--sand); opacity: .55;
  pointer-events: none;
}
.lp-duo .d > * { position: relative; z-index: 1; }

/* ---------- งานใหม่ล่าสุด + วิธีการใช้งาน ---------- */

.lp-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 1024px) { .lp-grid { grid-template-columns: 1.75fr 1fr; gap: 24px; } }

.lp-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
}
.lp-head h2 { font-size: 24px; color: var(--brown-dk); margin: 0; }
.lp-head a {
  margin-left: auto; font-size: 14px; color: var(--muted); text-decoration: none;
}
.lp-head a:hover { color: var(--brown); }

.jgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px)  { .jgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .jgrid { grid-template-columns: repeat(3, 1fr); } }

.jnew {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
}
.jnew:hover { border-color: var(--cta); box-shadow: var(--shadow-lg); }
.jnew .ph {
  position: relative; height: 104px; background: var(--sand);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--brown); opacity: .95;
}
.jnew .ph svg { width: 34px; height: 34px; opacity: .5; }
.jnew .badge {
  position: absolute; left: 10px; top: 10px;
  background: var(--ok); color: #fff;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
}
/* ข้างในการ์ดเป็น span ทั้งหมด เพราะตัวการ์ดเป็น <a> จะใส่ <div> ซ้อนไม่ได้ */
.jnew .body { display: block; padding: 13px 14px 14px; }
.jnew .jt {
  display: block;
  font-family: var(--font-head); font-weight: 700;
  color: var(--brown-dk); margin-bottom: 8px; line-height: 1.4;
}
.jnew .ln {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--muted); margin-bottom: 4px;
}
.jnew .ln svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
.jnew .foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair);
}
.jnew .go {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--brown);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.jnew .go svg { width: 17px; height: 17px; }   /* ต้องตั้งขนาดเอง ไม่งั้นล้นวงกลม 30px */
.jnew:hover .go { background: var(--cta); border-color: var(--cta); color: #fff; }

/* แผงวิธีการใช้งาน — สี่ขั้นเรียงสองคูณสองตามแบบ */
.howto { background: var(--band); border-radius: 22px; padding: 22px; }
.howto .steps4 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px) { .howto .steps4 { grid-template-columns: 1fr 1fr; gap: 20px 22px; } }

/*
 * ⚠️ ตัวเลขในวงกลม ไอคอน และหัวข้อ ต้องอยู่ในระดับเดียวกัน
 *
 *    ของเดิมวงกลมเกาะขอบบนของแถว ส่วนไอคอนจัดกึ่งกลางในกล่องสูง 1.5em
 *    สองอย่างนี้จึงเริ่มคนละที่ พอเป็นภาษาไทยที่ตัวสูงกว่า ระยะเหลื่อมยิ่งเห็นชัด
 *    เป็นอาการที่เจ้าของถ่ายมาให้ดูเมื่อ 2026-09-09
 *
 *    แก้โดยให้ทั้งวงกลมและไอคอนอยู่ในกล่องสูงเท่ากับบรรทัดแรกของหัวข้อพอดี
 *    (1.4 คือ line-height ของ .howto .s b) แล้วจัดกึ่งกลางในกล่องนั้นทั้งคู่
 */
.howto .s { display: grid; grid-template-columns: 24px 28px 1fr; gap: 10px; align-items: start; }

/*
 * .n คือกล่องจัดตำแหน่ง สูงเท่าบรรทัดแรกของหัวข้อพอดี (1.4 = line-height ของ b)
 * ส่วน i ข้างในคือวงกลมจริง
 *
 * ⚠️ ห้ามใส่ font-size ที่ .n เด็ดขาด เพราะ 1.4em ต้องคิดจากขนาดตัวอักษรของแถว (16px)
 *    ถ้าใส่ 12px ที่ .n ค่า em จะไปคิดจาก 12px แล้วกล่องจะเตี้ยกว่าบรรทัดจริง
 *    ขนาดตัวเลขไปกำหนดที่ i แทน
 */
.howto .n {
  height: 1.4em; display: flex; align-items: center; justify-content: center;
}
.howto .n i {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--brown); color: var(--brown);
  font-style: normal; font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
/* จัดให้ตรงกับบรรทัดแรกของหัวข้อ ไม่ใช้ padding เพราะจะเพี้ยนเมื่อตัวอักษรเปลี่ยนขนาด */
/* สูง 1.4em เท่ากับ .n และเท่ากับบรรทัดแรกของหัวข้อ ทั้งสามอย่างจะได้อยู่ระดับเดียวกัน */
.howto .s .ic {
  color: var(--brown); display: flex;
  align-items: center; justify-content: center; height: 1.4em;
}
.howto .s .ic svg { width: 24px; height: 24px; }
.howto .s b { display: block; color: var(--brown-dk); line-height: 1.4; }
.howto .s span { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ส่วนเนื้อหาบนหน้าแรก — จัดกึ่งกลางเท่ากับ hero */
.lp-sec { max-width: 1340px; margin: 0 auto; padding: 30px 20px; }
.lp-sec > h2 { font-size: var(--fs-h); margin-bottom: 4px; }
@media (min-width: 768px) { .lp-sec { padding: 46px 20px; } }

/* ---------- เอกสารทางกฎหมาย (PDPA เงื่อนไขบริการ คุกกี้) ---------- */

/*
 * เอกสารยินยอมที่อ่านไม่รู้เรื่อง เท่ากับไม่ได้แจ้งตามกฎหมาย
 * จึงตั้งใจให้บรรทัดสั้นลง เว้นวรรคระหว่างย่อหน้าชัด และหัวข้อแยกออกจากเนื้อความ
 */
.doc-body {
  font-size: var(--fs); line-height: 1.85; color: var(--ink);
  max-width: 62ch;
}
.doc-body h4 {
  font-family: var(--font-head); font-size: var(--fs); font-weight: 700;
  color: var(--brown); margin: 20px 0 6px; line-height: 1.5;
}
.doc-body > h4:first-child { margin-top: 4px; }
.doc-body p  { margin: 0 0 10px; }
.doc-body ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.doc-body li {
  position: relative; padding-left: 18px; margin-bottom: 5px;
}
.doc-body li::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cta);
}

/* กล่อง "ยอมรับทั้งหมด" บนหน้าความยินยอม */
.consent-quick {
  background: var(--cream); border: 1px solid var(--cta);
  border-radius: var(--r-card); padding: 16px; margin-bottom: 16px;
}
.consent-quick .btn + .btn { margin-top: 8px; }
@media (min-width: 560px) {
  .consent-quick .btns { display: flex; gap: 10px; }
  .consent-quick .btns .btn { flex: 1; }
  .consent-quick .btn + .btn { margin-top: 0; }
}

/* ---------- ท้ายเว็บ ---------- */

/*
 * เขียนใหม่ 2026-09-09 ตามภาพแบบ — พื้น Espresso แถวเดียว
 *
 * ⚠️ ของเดิมเป็นพื้นเบจสามคอลัมน์ พร้อมกฎห้ามใช้สีเข้มเป็นพื้นบล็อกใหญ่
 *    กฎนั้นถูกยกเลิกเฉพาะท้ายเว็บ เพราะทั้งภาพแบบและแผ่น CI
 *    ระบุตรงกันว่าท้ายเว็บใช้ Espresso ส่วน hero กับแถบหัวเว็บยังต้องเป็นครีมเหมือนเดิม
 */
.site-foot {
  flex: 0 0 auto;
  background: var(--brown-dk); color: #E7DCD2;
  font-size: var(--fs); margin-top: 46px;
}
.site-foot-in {
  max-width: 1340px; margin: 0 auto; padding: 22px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.site-foot .brand { align-items: flex-start; }
.site-foot .brand .wm  { font-size: 26px; color: #fff; letter-spacing: 5px; }
.site-foot .brand .sub { color: #C9B7A6; }
.site-foot .brand-img  { height: 52px; }

/*
 * โลโก้บนพื้นเข้ม
 *
 * โลโก้จริงเป็นลายเส้นสีน้ำตาล วางบน Espresso แล้วแทบมองไม่เห็น
 * filter ชุดนี้ฟอกภาพให้เป็นสีขาวล้วนโดยไม่ต้องมีไฟล์เพิ่ม
 *
 * ⚠️ ใช้ได้เฉพาะไฟล์พื้นหลังโปร่ง (SVG หรือ PNG)
 *    ถ้าไฟล์มีพื้นขาวติดมา จะกลายเป็นกล่องขาวทึบกลางท้ายเว็บทันที
 *    ทางที่ดีกว่าคือทำไฟล์ logo-light.svg สีขาวมาวางไว้ แล้ว brand_mark()
 *    จะหยิบไปใช้เองโดยไม่ผ่าน filter นี้เลย
 */
.brand-img.on-dark { filter: brightness(0) invert(1); opacity: .94; }

/* คำโปรยข้างโลโก้ มีเส้นคั่นตั้งกั้นตามแบบ */
.site-foot .motto {
  padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .18);
  color: #E7DCD2;
}

.site-foot .flinks { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-foot a { color: #E7DCD2; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .fsep { width: 1px; height: 14px; background: rgba(255, 255, 255, .22); }

.site-foot .legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 12px 20px; font-size: 14px; color: #BCA997;
  max-width: 1340px; margin: 0 auto;
}
body.has-tabbar .site-foot { margin-bottom: 0; }

/*
 * ⚠️ จอแคบ ลิงก์ท้ายเว็บเคยตกบรรทัดชนกันจนอ่านทับกัน
 *    เป็นอาการที่เจ้าของถ่ายมาให้ดูเมื่อ 2026-09-09
 *    แก้โดยเรียงลิงก์ลงมาเป็นแถวตั้ง และซ่อนขีดคั่น
 */
@media (max-width: 700px) {
  .site-foot-in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-foot .motto { padding-left: 0; border-left: 0; }
  .site-foot .flinks {
    margin-left: 0; width: 100%;
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
  .site-foot .fsep { display: none; }
}

/* ---------- เมนูหัวเว็บสำหรับคนที่ยังไม่ล็อกอิน ---------- */

/*
 * ตามภาพแบบ: โลโก้ซ้ายสุด → เมนูสามอันถัดมา → ขวาสุดคือ เข้าสู่ระบบ กับปุ่มสมัครสมาชิก
 * ปุ่มสมัครสมาชิกเป็น Terracotta เพราะเป็น conversion action ตามแผ่น CI
 */
.guest-nav { display: none; gap: 26px; margin-left: 30px; }
.guest-nav a { color: var(--brown); text-decoration: none; white-space: nowrap; }
.guest-nav a:hover { color: var(--brown-dk); }

/*
 * ⚠️ ต้องอยู่บรรทัดเดียวเสมอ ตามที่เจ้าของสั่งเมื่อ 2026-09-09
 *    บนมือถือคำว่า "เข้าสู่ระบบ" เคยตัดเป็นสองบรรทัดจนแถบหัวเว็บสูงผิดรูป
 */
.top-actions .signin {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; flex: 0 0 auto;
}
.top-actions .signin svg { width: 18px; height: 18px; flex: 0 0 auto; }
.top-actions .head-btn { white-space: nowrap; }

@media (min-width: 900px) { .guest-nav { display: flex; } }

/*
 * จอแคบ — บีบขนาดลงเพื่อให้ โลโก้ + เข้าสู่ระบบ + สมัครสมาชิก อยู่บรรทัดเดียวได้
 * ตั้งใจไม่ซ่อนคำว่า "เข้าสู่ระบบ" เพราะถ้าเหลือแต่ไอคอนคน
 * คนใช้จะไม่รู้ว่ากดแล้วไปไหน ซึ่งแย่กว่าปัญหาเดิมที่แค่ตกบรรทัด
 */
@media (max-width: 480px) {
  .topbar-in { padding: 0 14px; gap: 10px; min-height: 72px; }
  .top-actions { gap: 10px; }
  .brand-img { height: 48px; }
  .head-btn { padding: 8px 15px; }
}

/* แคบกว่านี้ไม่มีทางเลือกอื่นแล้ว ต้องย่อตัวอักษรลงอีกขั้น */
@media (max-width: 360px) {
  .topbar-in { gap: 8px; }
  .top-actions .signin { font-size: 14px; gap: 5px; }
  .top-actions .head-btn { font-size: 14px; padding: 7px 12px; }
  .brand-img { height: 42px; }
}

/* ---------- ไอคอน ---------- */

/*
 * ไอคอนแทรกกลางบรรทัดข้อความ เช่น 📍 ย่านสุขุมวิท — สูงเท่าตัวอักษรพอดี
 *
 * ⚠️ ห้ามลบกฎนี้ ถ้าไม่มี SVG จะกางเป็นขนาดปริยาย 300×150 px
 *    แล้วหน้าที่เรียก icon_i() จะพังทันที ตอนนี้มี 8 จุดใน 5 ไฟล์
 *
 * -.16em คือค่าที่ทำให้กึ่งกลางไอคอนตรงกับกึ่งกลางตัวอักษรไทยของ Noto Sans Thai
 * ซึ่งเส้นฐานต่างจาก Kanit ที่เคยใช้ ถ้าเปลี่ยนฟอนต์อีกต้องกลับมาปรับค่านี้
 */
.i-inline {
  width: 1.05em; height: 1.05em; vertical-align: -.16em;
  margin-right: 4px; flex: 0 0 auto;
}


/*
 * ช่องไอคอนหน้าแถวรายการ และไอคอนหัวเรื่องกลางหน้า
 *
 * เพิ่มเมื่อ 2026-09-09 ตอนไล่เปลี่ยนอิโมจิทั้งเว็บมาเป็นไอคอนเส้นชุดเดียวกัน
 * ของเดิมใช้อิโมจิแล้วคุมขนาดด้วย font-size ซึ่งใช้กับ SVG ไม่ได้
 * ต้องกำหนดกล่องให้ชัดแทน
 */
.row-ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--brown);
}
.row-ic svg { width: 100%; height: 100%; }

.head-ic {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  background: var(--cta-lt); color: var(--brown);
}
.head-ic svg { width: 26px; height: 26px; }

/* ---------- ปุ่มบันทึกงาน ---------- */

/*
 * ข้อ 30 ของเอกสาร 2026-09-09
 *
 * ⚠️ ปุ่มนี้เป็น <form> และต้องอยู่นอก <a class="jobcard"> เสมอ
 *    HTML ซ้อน form ไว้ใน a ไม่ได้ เบราว์เซอร์จะดึง form ออกมาเองแล้วเลย์เอาต์พัง
 *    การ์ดในหน้ารายการจึงมี .jobcard-wrap ครอบ แล้ววางปุ่มทับมุมขวาบน
 */
.jobcard-wrap { position: relative; }
.jobcard-wrap .jobcard { margin-bottom: 10px; }

.savebtn { margin: 0; }
.jobcard-wrap .savebtn { position: absolute; right: 10px; bottom: 12px; z-index: 2; }

.savebtn button {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--muted);
  cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.savebtn button svg { width: 18px; height: 18px; }
.savebtn button:hover { color: var(--cta); border-color: var(--cta); }

/* บันทึกแล้ว — หัวใจถูกถมสีด้วย fill ไม่ใช่แค่เปลี่ยนสีเส้น จะได้ดูออกทันที */
.savebtn button.on { color: var(--cta); border-color: var(--cta); background: var(--cta-lt); }
.savebtn button.on svg { fill: currentColor; }

/* ในแถวรายการงานที่ปิดรับแล้ว ปุ่มอยู่ท้ายแถวตามปกติ ไม่ต้องลอย */
.list-row .savebtn { flex: 0 0 auto; }

/* ---------- ให้เนื้อหาแสดงครบบนมือถือทุกรุ่น ---------- */

/*
 * ปัญหาที่แก้: เลื่อนลงล่างสุดแล้วข้อความบรรทัดท้าย ๆ ถูกบัง
 *
 * มีสองสาเหตุที่ต่างกัน และต้องแก้คนละแบบ
 *
 * 1) แถบเมนูล่างที่ลอยทับอยู่ — แก้ด้วย padding-bottom ของ body ข้างบน
 *
 * 2) แถบที่อยู่เว็บของเบราว์เซอร์มือถือที่ยุบเข้าออกตอนเลื่อน
 *    100vh คิดจากจอ "ตอนแถบยุบแล้ว" เสมอ ทำให้กล่องสูงเกินจริงตอนแถบยังกางอยู่
 *    100dvh คิดตามความสูงที่มองเห็นจริงในขณะนั้น จึงไม่ล้นออกนอกจอ
 *    เขียน 100vh ไว้ก่อนเป็นค่าสำรองให้เบราว์เซอร์เก่าที่ไม่รู้จัก dvh
 */
@supports (height: 100dvh) {
  @media (min-width: 900px) {
    .auth-split { min-height: calc(100dvh - 84px); }
  }
  @media (min-width: 1024px) {
    .split .detail,
    .split .list { max-height: calc(100dvh - 96px); }
  }
}

/*
 * ท้ายเว็บบนมือถือ ต้องมีที่ว่างใต้บรรทัดลิขสิทธิ์
 * ไม่งั้นบรรทัดสุดท้ายจะไปติดขอบล่างของจอพอดีจนอ่านอึดอัด
 * และบนเครื่องที่มีขีดล่าง บรรทัดนั้นจะโดนขีดทับ
 */
@media (max-width: 767px) {
  .site-foot .legal { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/*
 * ปุ่มคู่ในหน้าเข้าสู่ระบบ ต้องอยู่บรรทัดเดียว
 *
 * .btn ปกติเว้นซ้ายขวาข้างละ 44px เพื่อให้ข้อความอยู่กลางโดยมีลูกศรลอยขวา
 * พอเอาสองใบมาวางคู่กันในการ์ดกว้าง 440px ที่ว่างสำหรับตัวอักษรเหลือน้อย
 * คำว่า "ลืมรหัสผ่าน" กับ "สมัครสมาชิก" เลยตกบรรทัดที่สอง
 *
 * ในบริบทนี้จึงลดระยะซ้าย ขยับลูกศรเข้ามา และห้ามตัดคำ
 */
.btn-row .btn {
  padding-left: 14px; padding-right: 32px;
  white-space: nowrap;
}
.btn-row .btn::after { right: 12px; }

/* ---------- รูปที่ผู้ใช้อัปโหลดเข้ามา ---------- */

/*
 * เจ้าของสั่งเมื่อ 2026-09-09 ให้รูปที่ร้านอัปเข้ามาแสดงพอดีจอทุกขนาด
 *
 * ปัญหาเดิม: .thumb ล็อก max-height ไว้ 190px แล้วใช้ object-fit: cover
 * ซึ่ง "ครอบตัด" รูป ทำให้เห็นไม่ครบ เช่นรูปใบอนุญาตแนวตั้งจะโดนตัดหัวท้ายทิ้ง
 * แอดมินอ่านเลขที่บนใบไม่ได้ ต้องกดเปิดไฟล์เต็มทุกครั้ง
 *
 * แก้เป็น contain + ความสูงยืดตามความกว้างจอด้วย vh
 *   จอมือถือ  ~46% ของความสูงจอ
 *   แท็บเล็ต  ~52%
 *   จอคอม    ~58% แต่ไม่เกิน 620px กันรูปยาวเกินจนต้องเลื่อนหาปุ่ม
 *
 * ⚠️ ต้องเป็น contain ไม่ใช่ cover — cover จะตัดรูป ซึ่งผิดวัตถุประสงค์
 *    ของรูปเอกสารที่ต้องอ่านข้อมูลบนนั้นให้ครบ
 */
.thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  object-position: center;
  border-radius: var(--r-input);
  margin-top: 10px;
  background: var(--band);
}

@media (min-width: 768px)  { .thumb { max-height: 52vh; } }
@media (min-width: 1024px) { .thumb { max-height: min(58vh, 620px); } }

/* รูปทุกชนิดในเนื้อหาต้องไม่ล้นกรอบ ไม่ว่าจะมาจากที่ไหน */
.card img, .list-row img, .adm-main img { max-width: 100%; height: auto; }

/* ---------- โครงหน้าหลังบ้าน ---------- */

/*
 * จอแคบ: เมนูเป็นแถบเลื่อนแนวนอนอยู่บนสุด
 * จอกว้าง: เมนูเป็นคอลัมน์ซ้ายที่ค้างอยู่กับที่เวลาเลื่อนหน้า
 */
.adm { display: block; }

.adm-side {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 10px 14px; margin-bottom: 4px;
  background: var(--band); border-bottom: 1px solid var(--line);
}
.adm-side::-webkit-scrollbar { display: none; }
.adm-brand { display: none; }
.adm-sep { display: none; }

.adm-side a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-pill);
  color: var(--brown); text-decoration: none; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line);
}
.adm-side a .ic { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.adm-side a .ic svg { width: 100%; height: 100%; }
.adm-side a:hover { border-color: var(--brown); }
.adm-side a.on {
  background: var(--brown); border-color: var(--brown); color: #fff; font-weight: 600;
}

/*
 * เนื้อหาหลังบ้าน
 *
 * ⚠️ ต้องมี margin auto ด้วย ไม่ใช่แค่ max-width
 *    เจ้าของทักเมื่อ 2026-09-09 ว่าเนื้อหาไปกองชิดซ้าย เหลือที่ว่างครึ่งจอทางขวา
 *    เพราะ .adm-main เป็นช่องของ grid ที่กว้างเท่าจอ พอจำกัดความกว้างเฉย ๆ
 *    กล่องจะไปเกาะขอบซ้ายของช่อง ไม่ได้อยู่กลาง
 *
 * width 100% เพื่อให้ยังเต็มช่องตอนจอแคบกว่า 900px
 */
.adm-main {
  padding: 16px; max-width: 900px;
  width: 100%; margin-inline: auto;
}
.adm-main > h1 { margin-bottom: 14px; }

@media (min-width: 900px) {
  .adm { display: grid; grid-template-columns: 268px minmax(0, 1fr); align-items: start; }

  .adm-side {
    display: block; overflow: visible;
    position: sticky; top: 0;
    min-height: 100vh; padding: 22px 14px;
    border-bottom: 0; border-right: 1px solid var(--line);
    margin-bottom: 0;
  }
  .adm-brand {
    display: block; font-family: var(--font-head); font-weight: 700;
    color: var(--brown-dk); padding: 0 10px 14px;
  }
  .adm-sep {
    display: block; height: 1px; background: var(--line); margin: 14px 6px;
  }
  .adm-side a {
    display: flex; width: 100%; margin-bottom: 4px;
    background: transparent; border-color: transparent;
    border-radius: var(--r-input); white-space: normal;
  }
  .adm-side a:hover { background: var(--card); border-color: var(--line); }

  .adm-main { padding: 26px 28px 60px; }
}

/* ==========================================================================
   ชื่อผู้ใช้ที่มุมบนซ้าย ปุ่มติดต่อแอดมิน และห้องแชท
   เพิ่มเมื่อ 2026-09-09 ตามคำสั่งเจ้าของสามข้อ
     1. ทุกหน้าต้องมีโลโก้
     2. ทุกหน้าต้องบอกที่มุมบนซ้ายว่าล็อกอินด้วยชื่ออะไร
     3. หน้าที่ล็อกอินแล้วต้องมีปุ่มติดต่อแอดมิน กดแล้วแชทกับแอดมินได้
   ========================================================================== */

/*
 * ป้ายชื่อผู้ใช้ วางต่อจากโลโก้ทันที
 * มีเส้นคั่นทางซ้ายเพื่อให้อ่านออกว่าเป็นคนละก้อนกับโลโก้ ไม่ใช่ส่วนหนึ่งของแบรนด์
 */
.whoami {
  display: inline-flex; align-items: center; gap: 8px;
  padding-left: 14px; margin-left: 2px;
  border-left: 1px solid var(--line);
  line-height: 1.25; min-width: 0;
}
.whoami .ic { display: inline-flex; color: var(--muted); }
.whoami .ic svg { width: 20px; height: 20px; }
.whoami .who-t { display: flex; flex-direction: column; min-width: 0; }
.whoami b {
  font-size: var(--fs); color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}
.whoami .who-r { font-size: 13px; color: var(--muted); }

/* ปุ่มติดต่อแอดมินบนหัวเว็บ */
.head-chat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--brown) !important; text-decoration: none; white-space: nowrap;
}
.head-chat:hover { background: var(--cta-lt); border-color: var(--cta); }
.head-chat svg { width: 19px; height: 19px; }

/* หัวเว็บแบบย่อ ใช้กับหน้าที่ไม่มีเมนูของตัวเองและทุกหน้าฝั่งแอดมิน */
.topbar.slim .topbar-in { min-height: 64px; }
.topbar.slim .brand-img { height: 48px; }

/*
 * หัวเว็บของหลังบ้าน — ชิดมุมซ้ายจริง ไม่ใช่กลางกรอบ 1340px
 *
 * เจ้าของทักเมื่อ 2026-09-09 ว่าโลโก้กับชื่อผู้ใช้ควรอยู่มุมซ้ายทั้งหมด
 * เพราะข้างล่างเป็นเมนูซ้ายที่ชิดขอบจอ พอหัวเว็บถูกจำกัดไว้กลางกรอบ
 * โลโก้จะลอยเข้ามาข้างในไม่ตรงกับเมนู ดูเหมือนสองส่วนคนละหน้า
 *
 * ใช้เฉพาะหัวเว็บหลังบ้าน หน้าฝั่งผู้ใช้ยังจัดกลางที่ 1340px เหมือนเดิม
 * เพราะเนื้อหาข้างล่างของหน้าพวกนั้นก็จัดกลางเหมือนกัน
 */
.topbar.slim.admin .topbar-in { max-width: none; padding-left: 20px; }

/*
 * จอแคบ ตัดชื่อบทบาทกับข้อความบนปุ่มออก เหลือแต่ไอคอน
 * ชื่อผู้ใช้ยังอยู่เสมอ เพราะเป็นข้อที่เจ้าของสั่งไว้ ห้ามซ่อน
 */
@media (max-width: 700px) {
  .whoami { padding-left: 10px; }
  .whoami b { max-width: 12ch; }
  .whoami .who-r { display: none; }
  .head-chat span { display: none; }
  .head-chat { padding: 7px 9px; }
}

/* ---------- ห้องแชท ใช้ร่วมกันทั้งฝั่งผู้ใช้และฝั่งแอดมิน ---------- */

.chat { display: flex; flex-direction: column; gap: 10px; }

.bubble {
  max-width: 76%; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
}
/* ข้อความของคนที่กำลังดูอยู่ ชิดขวาและใช้พื้น Warm Sand จาง */
.bubble.mine { align-self: flex-end; background: var(--cta-lt); border-color: #EBD8CC; }
.bubble.theirs { align-self: flex-start; }
.bubble .who { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.bubble .body { color: var(--ink); word-break: break-word; }
.bubble .when { font-size: 12px; color: var(--muted); margin-top: 5px; }

/*
 * ฝั่งแอดมิน — รายชื่อห้องซ้าย บทสนทนาขวา
 * จอแคบยุบเป็นคอลัมน์เดียว รายชื่อห้องอยู่บนแล้วจำกัดความสูงไว้
 * ไม่งั้นต้องเลื่อนผ่านรายชื่อทั้งหมดกว่าจะถึงข้อความ
 */
.chat-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; }
.chat-list { max-height: 42vh; overflow-y: auto; }
.chat-list .list-row.on { background: var(--band); }

@media (min-width: 900px) {
  .chat-wrap { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
  .chat-list { max-height: calc(100vh - 200px); position: sticky; top: 16px; }
}

/* ==========================================================================
   ตารางแก้ไขในหน้าเดียว
   ใช้ครั้งแรกที่หน้าแพ็กเกจเติมเครดิต หลังเจ้าของบอกว่าแบบการ์ดใช้งานยาก
   ที่นี่คือ CSS ตารางชุดเดียวของทั้งเว็บ หน้าอื่นที่จะทำตารางให้ใช้ชุดนี้ต่อ
   ========================================================================== */

/*
 * กล่องเลื่อนแนวนอน ครอบตารางไว้เสมอ
 * ⚠️ ห้ามให้ตารางดันหน้าเว็บกว้างจนเลื่อนซ้ายขวาได้ทั้งหน้า
 *    ต้องเลื่อนอยู่ในกล่องของมันเองเท่านั้น
 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/*
 * ⚠️ ทุกช่องเป็นบรรทัดเดียว ตามที่เจ้าของสั่งเมื่อ 2026-09-10
 *
 *    ตารางในหลังบ้านมีได้ถึงแปดคอลัมน์ อยู่ในกรอบกว้าง 900px
 *    ถ้าปล่อยให้ตัดคำ ทุกช่องจะหักเป็นสามสี่บรรทัดจนอ่านไม่ออก
 *    เจ้าของถ่ายหน้าฐานข้อมูลหมอนวดมาให้ดูตอนที่ยังตัดคำอยู่
 *
 *    พอบังคับบรรทัดเดียว ตารางจะกว้างเกินกรอบแล้วเลื่อนในกล่อง .scroll-x เอง
 *    ซึ่งเป็นสิ่งที่ต้องการ อ่านง่ายกว่าบีบให้พอดีแล้วหักคำ
 *
 *    ช่องไหนที่อยากให้ตัดคำจริง ๆ ใส่คลาส wrap-cell เพิ่มเป็นราย ๆ ไป
 */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs); }
.tbl th, .tbl td {
  padding: 11px 14px; border-bottom: 1px solid var(--hair); text-align: left;
  white-space: nowrap;
}
.tbl .wrap-cell { white-space: normal; }
.tbl thead th {
  background: var(--band); color: var(--muted);
  font-weight: 500; font-size: 14px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl .mid { text-align: center; }

/* ช่องกรอกในตาราง เตี้ยกว่าฟอร์มปกติ เพราะเรียงกันหลายแถว */
.tbl input[type="number"], .tbl input[type="text"] {
  width: 100%; min-width: 92px; max-width: 160px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit;
}
.tbl input:focus { outline: 2px solid var(--cta); outline-offset: -1px; }
.tbl input.w-sm { min-width: 68px; max-width: 84px; }
.tbl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brown); }

/* แถวสำหรับเพิ่มของใหม่ ให้ต่างจากแถวที่มีอยู่แล้วอย่างชัดเจน */
.tbl .new-row td { background: var(--cream); }
.tbl .new-row input { border-style: dashed; }

/*
 * รูปหน้าร้านบนการ์ดประกาศงาน เพิ่มเมื่อ 2026-09-09
 *
 * ดึงขอบออกไปชนขอบการ์ด (margin ติดลบเท่ากับ padding ของ .card)
 * เพื่อให้รูปเต็มความกว้างเหมือนการ์ดงานบนหน้าแรก
 *
 * ⚠️ ใช้ความสูงคงที่กับ object-fit: cover ตั้งใจให้ทุกใบสูงเท่ากัน
 *    ร้านอัปรูปมาคนละสัดส่วน ถ้าปล่อยตามจริงแถวการ์ดจะสูงต่ำไม่เท่ากันทั้งหน้า
 */
.jshot {
  margin: -16px -16px 12px;   /* เท่ากับ padding ของ .card ให้รูปชนขอบพอดี */
  height: 150px; overflow: hidden; background: var(--sand);
  border-radius: 16px 16px 0 0;
}
.jshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 700px) {
  .jshot { height: 130px; }
}

/*
 * ไอคอนกลางบรรทัดที่อยู่ในปุ่ม ไม่ต้องมี margin ของตัวเอง
 * เพราะ .btn เป็น flex ที่ตั้ง gap ไว้แล้ว ถ้าปล่อยไว้จะห่างเป็นสองเท่า
 */
.btn .i-inline, .list-row .i-inline { margin-right: 0; }

/* ==========================================================================
   กล่องเด้งกลางจอ
   ใช้ครั้งแรกกับการถามเพศหมอนวดที่สมัครก่อนมีช่องนี้ (2026-09-09)
   ========================================================================== */

/*
 * ⚠️ ตั้งใจให้ปิดไม่ได้ ไม่มีปุ่มกากบาท กดพื้นหลังก็ไม่ปิด
 *    ถ้าปิดได้ ทุกคนจะกดปิดแล้วข้อมูลจะไม่มีวันครบ
 *    ทางออกที่ให้ไว้คือกรอกให้เสร็จ หรือกดออกจากระบบ
 *
 * z-index สูงกว่าแถบเมนูล่างบนมือถือ (.tabbar) ไม่งั้นปุ่มบันทึกจะถูกบัง
 */
.modal-wrap {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(48, 42, 39, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal {
  background: var(--card); border-radius: var(--r-card);
  padding: 22px; width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg);
  /* จอเตี้ยให้เลื่อนในกล่องเอง ไม่ให้ปุ่มบันทึกหลุดออกนอกจอ */
  max-height: calc(100dvh - 40px); overflow-y: auto;
}
.modal h3 { color: var(--brown-dk); margin-bottom: 6px; }
.modal .btn { width: 100%; }