/* ══════════════════════════════════════════════════════════════════
   กระดานตามหา (งานที่ 26) — CSS ของหน้าตามหาเท่านั้น
   ══════════════════════════════════════════════════════════════════

   กติกาของไฟล์นี้ (ห้ามละเมิดแม้แต่บรรทัดเดียว):

   1) ทุก selector ต้องขึ้นต้นด้วย #page-tamha — ไม่มีข้อยกเว้น
      ห้ามมี body / html / * / h1-h6 / button / input / a / :root เปล่า ๆ
      เพราะไฟล์นี้ถูกโหลดพร้อม styles.css ทุกหน้า ไม่ใช่เฉพาะหน้าตามหา
      selector หลุดออกไประดับ global เมื่อไหร่ = หน้าสร้างดีล/สรุปดีลเพี้ยนทันที
      โดยที่เทสต์ของหน้าพวกนั้นไม่มีทางจับได้

   2) ตัวแปรสีของดีไซน์เดิมอยู่ที่ :root — ย้ายมาไว้ที่ .tm-root แทน
      (ถ้าปล่อยไว้ที่ :root มันจะทับตัวแปรของ styles.css ทั้งเว็บ)

   3) prefix .tm- ยืนยันด้วย grep แล้วว่าไม่ชนกับ styles.css / index.html /
      app.js / admin.html (0 ผลลัพธ์ทั้งสี่ไฟล์)

   ธีมมาจาก design-reference-tamha/ตัวกลาง ตามหา.dc.html — ครีม/ทอง ชุดเดียว
   กับที่หน้าแรกใช้อยู่แล้ว (lp2b-*) จึงไม่มีการสลับธีม
   ══════════════════════════════════════════════════════════════════ */

/* พื้นหลังไล่สีอยู่ที่ตัว .page เอง ไม่ใช่ที่ .tm-root ข้างใน
   เพราะ styles.css:17 ให้ .page มี min-height:100vh อยู่แล้ว และ padding-top ของมัน
   เปลี่ยนตามการมี/ไม่มีแถบโปรไฟล์ LINE (68px หรือ 116px — styles.css:44)
   ถ้าไปตั้ง min-height ที่ .tm-root เองจะต้องเดาเลขนั้น แล้วเดาผิดกรณีใดกรณีหนึ่งเสมอ */
#page-tamha {
  background: linear-gradient(165deg, #F7E9D1 0%, #EFDFC3 45%, #DEC9A6 100%);
}

#page-tamha .tm-root {
  --tm-gold:   #D0A34B;
  --tm-gold-d: #9A7632;
  --tm-green:  #47684B;
  --tm-navy:   #243C59;
  --tm-red:    #7A473A;
  --tm-ink:    #2E2E2E;
  --tm-ink-2:  #4A4034;
  --tm-ink-3:  #6B5D48;
  --tm-ink-4:  #8A7C64;
  --tm-faint:  #A2957E;

  position: relative;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  color: var(--tm-ink);
}

#page-tamha .tm-root *,
#page-tamha .tm-root *::before,
#page-tamha .tm-root *::after { box-sizing: border-box; }

/* ฉากหลังวัด — ใช้ไฟล์ webp ที่เว็บมีอยู่แล้ว (63 KB) ไม่ใช่ PNG 1.3 MB ของดีไซน์
   ทั้งสองไฟล์เป็นภาพเดียวกัน ยืนยันด้วย md5 ของ PNG ต้นทาง */
#page-tamha .tm-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 520px;
  background: url('assets/temple-bg-boost.webp') no-repeat top center;
  background-size: 100% auto;
  filter: contrast(1.5) saturate(1.4) brightness(.86);
  opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* ── สลับมุมมอง board ↔ form ────────────────────────────────────────
   ฟอร์มลงประกาศเป็นคนละหน้าในดีไซน์ แต่ที่นี่เป็นมุมมองใน #page-tamha
   เดียวกัน เพราะ router เดิม (app.js:485) รู้จักหน้าจาก id เท่านั้น
   และกติกาข้อ 6 ให้เพิ่ม route ได้แค่จุดเดียว */
#page-tamha .tm-view[hidden] { display: none !important; }

/* ── nav แถวบน ──────────────────────────────────────────────────── */
#page-tamha .tm-nav {
  position: relative; z-index: 5;
  max-width: 1080px; margin: 0 auto; padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
#page-tamha .tm-back {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 14px;
  color: var(--tm-ink-2); background: rgba(255,252,245,.75);
  border: 1px solid rgba(154,118,50,.3); padding: 9px 15px; border-radius: 11px;
  box-shadow: 0 8px 20px -12px rgba(90,70,30,.45);
}
#page-tamha .tm-back:hover { border-color: rgba(208,163,75,.7); }
#page-tamha .tm-chipstate {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Kanit', sans-serif; font-size: 12.5px; font-weight: 500;
  color: var(--tm-gold-d); background: rgba(208,163,75,.12);
  border: 1px solid rgba(208,163,75,.35); padding: 8px 14px; border-radius: 999px;
}
#page-tamha .tm-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tm-gold);
  flex: 0 0 7px;
}

/* ── หัวข้อกลางหน้า ─────────────────────────────────────────────── */
#page-tamha .tm-head {
  position: relative; z-index: 4;
  max-width: 1080px; margin: 0 auto; padding: 18px 22px 0; text-align: center;
}
#page-tamha .tm-head h1 {
  font-family: 'Kanit', sans-serif; font-weight: 700;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.12;
  margin: 0; letter-spacing: -.5px; color: var(--tm-ink);
}
#page-tamha .tm-head p {
  font-family: 'Kanit', sans-serif; font-weight: 400;
  font-size: clamp(14px, 2vw, 17px); color: var(--tm-ink-3); margin: 9px 0 0;
}

/* ── แถวค้นหา + เรียงลำดับ ──────────────────────────────────────── */
#page-tamha .tm-tools {
  position: relative; z-index: 6;
  max-width: 1080px; margin: 20px auto 0; padding: 0 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
#page-tamha .tm-search {
  flex: 1 1 260px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,253,247,.92); border: 1px solid rgba(154,118,50,.32);
  border-radius: 13px; padding: 0 14px;
  box-shadow: 0 10px 24px -18px rgba(90,70,30,.5);
}
#page-tamha .tm-search svg { flex: 0 0 17px; color: #9A8A6E; }
#page-tamha .tm-in {
  font-family: 'Sarabun', sans-serif; font-size: 16px; color: var(--tm-ink);
  background: rgba(255,253,247,.9); border: 1px solid rgba(154,118,50,.32);
  border-radius: 10px; padding: 11px 13px; width: 100%; outline: none;
}
#page-tamha .tm-in:focus {
  border-color: var(--tm-gold); box-shadow: 0 0 0 3px rgba(208,163,75,.18);
}
#page-tamha .tm-in::placeholder { color: rgba(179,167,142,.85); }
#page-tamha .tm-search .tm-in {
  border: none; background: transparent; box-shadow: none; padding: 13px 0;
}
#page-tamha .tm-qclear {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(154,118,50,.14); color: var(--tm-ink-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#page-tamha .tm-sortwrap { position: relative; flex: 0 0 auto; margin-left: auto; }
#page-tamha .tm-sortbtn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 14px;
  padding: 12px 15px; border-radius: 13px;
  color: var(--tm-ink-2); background: rgba(255,253,247,.92);
  border: 1px solid rgba(154,118,50,.32);
  box-shadow: 0 10px 24px -18px rgba(90,70,30,.5);
}
#page-tamha .tm-sortwrap.tm-open .tm-sortbtn {
  color: #FFFDF7; background: linear-gradient(135deg, #3A5470, var(--tm-navy));
  border-color: rgba(36,60,89,.5);
}
#page-tamha .tm-sortwrap.tm-open .tm-caret { transform: rotate(180deg); }
#page-tamha .tm-caret { transition: transform .22s; }
#page-tamha .tm-sortmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 220px; padding: 7px; border-radius: 14px;
  background: linear-gradient(160deg, #FFFDF8, #F8F1E1);
  border: 1px solid rgba(154,118,50,.32);
  box-shadow: 0 26px 50px -24px rgba(90,70,30,.6);
  animation: tmDrop .2s cubic-bezier(.2,.9,.3,1) both;
}
#page-tamha .tm-sortopt {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  font-family: 'Kanit', sans-serif; font-size: 14px; font-weight: 400;
  padding: 11px 13px; border-radius: 10px; border: none;
  color: var(--tm-ink-2); background: transparent; text-align: left;
}
#page-tamha .tm-sortopt.tm-on {
  font-weight: 600; color: var(--tm-gold-d); background: rgba(208,163,75,.14);
}

/* ── ชิปหมวด (เลื่อนแนวนอนบนจอแคบ) ─────────────────────────────── */
#page-tamha .tm-railwrap {
  position: relative; z-index: 4; max-width: 1080px; margin: 12px auto 0;
}
#page-tamha .tm-rail {
  display: flex; gap: 10px; padding: 4px 22px 8px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
#page-tamha .tm-rail::-webkit-scrollbar { display: none; }
#page-tamha .tm-rail > * { scroll-snap-align: start; }
#page-tamha .tm-cat {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 14px;
  padding: 10px 18px; border-radius: 999px;
  color: var(--tm-ink-3); background: rgba(255,252,245,.85);
  border: 1px solid rgba(208,163,75,.42);
  transition: background .2s, color .2s, box-shadow .2s;
}
#page-tamha .tm-cat.tm-on {
  font-weight: 600; color: #FFFDF7;
  background: linear-gradient(135deg, #D8AE5C, var(--tm-gold-d));
  border-color: rgba(154,118,50,.6);
  box-shadow: 0 12px 26px -14px rgba(154,118,50,.9);
}
#page-tamha .tm-count {
  font-family: 'Kanit', sans-serif; font-size: 11px; font-weight: 600;
  line-height: 1; padding: 3px 7px; border-radius: 999px; flex: 0 0 auto;
  color: #9A8A6E; background: rgba(154,118,50,.12);
}
#page-tamha .tm-cat.tm-on .tm-count,
#page-tamha .tm-sub.tm-on .tm-count { color: #FFFDF7; background: rgba(255,253,247,.22); }
#page-tamha .tm-railpad { flex: 0 0 34px; }
#page-tamha .tm-fade-l, #page-tamha .tm-fade-r {
  position: absolute; top: 0; bottom: 8px; pointer-events: none;
}
#page-tamha .tm-fade-l { left: 0; width: 22px;
  background: linear-gradient(90deg, #F4E5CB, rgba(244,229,203,0)); }
#page-tamha .tm-fade-r { right: 0; width: 56px;
  background: linear-gradient(270deg, #EFDFC3, rgba(239,223,195,0)); }

/* ── ลิ้นชักหมวดย่อยใต้ "อื่นๆ" ──────────────────────────────────── */
#page-tamha .tm-subwrap {
  position: relative; z-index: 4; max-width: 1080px; margin: 2px auto 0; padding: 0 22px;
}
#page-tamha .tm-subbox {
  border: 1px solid rgba(154,118,50,.3); border-radius: 16px;
  background: linear-gradient(160deg, #FFFDF8, #F8F1E1);
  box-shadow: 0 22px 44px -26px rgba(90,70,30,.55); padding: 16px 17px;
  animation: tmDrop .26s cubic-bezier(.2,.9,.3,1) both;
}
#page-tamha .tm-subhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--tm-ink-3);
}
#page-tamha .tm-x {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(154,118,50,.3); background: rgba(255,252,245,.8);
  color: var(--tm-ink-3); display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
#page-tamha .tm-subgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px; margin-top: 13px;
}
#page-tamha .tm-sub {
  display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
  font-family: 'Sarabun', sans-serif; font-size: 14px; font-weight: 400;
  padding: 10px 13px; border-radius: 10px;
  color: var(--tm-ink-2); background: rgba(208,163,75,.07);
  border: 1px solid rgba(154,118,50,.22);
}
#page-tamha .tm-sub.tm-empty0 { color: var(--tm-ink-4); }
#page-tamha .tm-sub.tm-on {
  font-weight: 600; color: #FFFDF7;
  background: linear-gradient(135deg, #D8AE5C, var(--tm-gold-d));
  border-color: rgba(154,118,50,.6);
}
#page-tamha .tm-sub > span:first-child { flex: 1; min-width: 0; }

/* ── รายการประกาศ ──────────────────────────────────────────────── */
#page-tamha .tm-main {
  position: relative; z-index: 3;
  max-width: 1080px; margin: 0 auto; padding: 16px 22px 130px;
}
#page-tamha .tm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
#page-tamha .tm-card {
  cursor: pointer; padding: 15px 16px; border-radius: 16px; text-align: left;
  background: linear-gradient(160deg, #FFFDF8, #F8F1E1);
  border: 1px solid rgba(154,118,50,.22);
  box-shadow: 0 16px 34px -22px rgba(90,70,30,.45);
  transition: transform .2s, box-shadow .2s;
  font-family: inherit; color: inherit; width: 100%;
}
#page-tamha .tm-card:hover { transform: translateY(-2px); }
#page-tamha .tm-card.tm-closed {
  background: rgba(246,238,222,.55); box-shadow: none; opacity: .62;
}
#page-tamha .tm-card-row { display: flex; gap: 13px; align-items: flex-start; }
#page-tamha .tm-thumb {
  flex: 0 0 74px; height: 74px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#page-tamha .tm-card-mid { flex: 1; min-width: 0; }
#page-tamha .tm-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 9px;
}
#page-tamha .tm-card-title {
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 16.5px;
  line-height: 1.35; margin: 0; color: var(--tm-ink);
}
#page-tamha .tm-mine, #page-tamha .tm-demo {
  display: inline-block; font-family: 'Kanit', sans-serif; font-size: 11px;
  font-weight: 600; letter-spacing: .6px; padding: 3px 9px; border-radius: 999px;
  margin-bottom: 5px;
}
#page-tamha .tm-mine {
  color: #3B5A3F; background: rgba(71,104,75,.14); border: 1px solid rgba(71,104,75,.35);
}
#page-tamha .tm-demo {
  color: var(--tm-ink-3); background: rgba(154,118,50,.12);
  border: 1px dashed rgba(154,118,50,.5);
}
#page-tamha .tm-badge {
  flex: 0 0 auto; font-family: 'Kanit', sans-serif; font-size: 11.5px;
  font-weight: 600; padding: 5px 11px; border-radius: 999px;
  color: var(--tm-ink-3); background: rgba(107,93,72,.1);
  border: 1px solid rgba(154,118,50,.28);
}
#page-tamha .tm-badge.tm-badge-closed {
  color: #5E594E; background: rgba(94,89,78,.14); border-color: rgba(94,89,78,.3);
}
#page-tamha .tm-budget {
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 17px;
  color: var(--tm-gold-d); margin-top: 5px;
}
#page-tamha .tm-meta {
  display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 7px;
  font-size: 13px; color: var(--tm-ink-3);
}
#page-tamha .tm-meta > span { display: inline-flex; align-items: center; gap: 5px; }
#page-tamha .tm-card-foot {
  margin-top: 11px; padding-top: 10px;
  border-top: 1px dashed rgba(154,118,50,.35);
  font-size: 13px; color: var(--tm-ink-3);
}

#page-tamha .tm-blank {
  text-align: center; padding: 60px 22px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,253,247,.9), rgba(246,238,222,.9));
  border: 1px dashed rgba(154,118,50,.4);
}
#page-tamha .tm-blank-ico {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
  background: rgba(208,163,75,.14);
  display: flex; align-items: center; justify-content: center;
}
#page-tamha .tm-blank h3 {
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 19px;
  margin: 16px 0 0; color: var(--tm-ink);
}
#page-tamha .tm-blank p {
  font-size: 14.5px; color: var(--tm-ink-3); margin: 8px 0 0; line-height: 1.7;
}

#page-tamha .tm-morewrap { text-align: center; margin-top: 18px; }
#page-tamha .tm-more {
  cursor: pointer; font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 15px;
  color: var(--tm-ink-2); background: rgba(255,253,247,.9);
  border: 1px solid rgba(154,118,50,.35); border-radius: 12px; padding: 13px 26px;
}
#page-tamha .tm-more[disabled] { opacity: .55; cursor: default; }

/* ── ปุ่มลอย "ลงประกาศ" ─────────────────────────────────────────── */
#page-tamha .tm-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 40; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  height: 62px; padding: 0 24px 0 20px; border-radius: 999px;
  background: linear-gradient(150deg, #D8AE5C, var(--tm-gold-d)); color: #fff;
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 16px;
  box-shadow: 0 18px 38px -14px rgba(154,118,50,.85);
  border: 1px solid rgba(255,246,224,.5);
}
#page-tamha .tm-fab svg { flex: 0 0 24px; }

/* ── ปุ่มหลัก/รอง ที่ใช้ซ้ำ ─────────────────────────────────────── */
#page-tamha .tm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; cursor: pointer; font-family: 'Kanit', sans-serif;
  font-weight: 600; font-size: 16px; padding: 15px 18px;
  border-radius: 13px; border: none;
}
#page-tamha .tm-btn-line {
  color: #fff; background: #06C755; box-shadow: 0 14px 32px -14px rgba(6,199,85,.9);
}
#page-tamha .tm-btn-line .tm-lbadge {
  width: 21px; height: 21px; border-radius: 6px; background: #fff; color: #06C755;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
#page-tamha .tm-btn-gold {
  color: #fff; background: linear-gradient(135deg, #D8AE5C, var(--tm-gold-d));
  box-shadow: 0 18px 38px -16px rgba(154,118,50,.9);
}
#page-tamha .tm-btn-ghost {
  color: var(--tm-ink-3); background: transparent; font-size: 15px;
  border: 1px solid rgba(154,118,50,.4);
}
#page-tamha .tm-btn-soon {
  color: #9A8A6E; background: rgba(154,118,50,.08);
  border: 1px solid rgba(154,118,50,.25); cursor: not-allowed; font-weight: 500;
}
#page-tamha .tm-btn[disabled] { cursor: not-allowed; }
#page-tamha .tm-hint {
  margin-top: 9px; text-align: center; font-size: 12.5px; color: var(--tm-ink-4);
}

/* ── แผ่นรายละเอียด (bottom sheet) ──────────────────────────────── */
/* ⚠️ แผ่นรายละเอียดขึ้นทับแถบโปรไฟล์ LINE ไม่ได้ และแก้ด้วย z-index ไม่ได้
   .page ของเว็บเดิม (styles.css:17) เป็น position:relative + z-index:1 ซึ่ง
   "สร้าง stacking context" ทุกอย่างที่อยู่ข้างใน #page-tamha จึงถูกขังอยู่ที่ชั้น 1
   ต่อให้ตั้ง z-index ในนี้เป็นล้านก็ยังอยู่ใต้ #line-profile-bar (fixed, z-index:150)
   ที่พาดขวางอยู่ y 68-122 (โมดัลของเว็บเดิมขึ้นทับได้เพราะมันอยู่นอก .page)

   ผลจริงที่เจอตอนถ่ายภาพ 375px: ปุ่มปิดแผ่นไปนอนใต้แถบนั้นพอดี กดไม่ได้เลย
   ทางแก้จึงไม่ใช่ z-index แต่คือ "ไม่ให้แผ่นสูงเกินพื้นที่ว่าง" ด้วย max-height
   132px = navbar 68 + แถบโปรไฟล์ 54 + เผื่อ 10 */
#page-tamha .tm-sheet-wrap { position: fixed; inset: 0; z-index: 50; }
#page-tamha .tm-scrim {
  position: absolute; inset: 0; background: rgba(46,40,30,.5);
  animation: tmFade .25s ease both; border: none; width: 100%; cursor: pointer;
}
#page-tamha .tm-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 90vh; max-height: calc(100vh - 132px); max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, #FFFDF8, #F6EEDE);
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(154,118,50,.3); border-bottom: none;
  box-shadow: 0 -24px 60px -20px rgba(70,55,25,.55);
  animation: tmSheetUp .32s cubic-bezier(.2,.9,.3,1) both;
}
#page-tamha .tm-sheet-grip { padding: 11px 0 6px; flex: 0 0 auto; }
#page-tamha .tm-sheet-grip > div {
  width: 46px; height: 5px; border-radius: 99px;
  background: rgba(154,118,50,.45); margin: 0 auto;
}
#page-tamha .tm-sheet-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 2px 20px 12px; border-bottom: 1px solid rgba(154,118,50,.22);
}
#page-tamha .tm-sheet-tag {
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--tm-gold-d); background: rgba(208,163,75,.14);
  border: 1px solid rgba(208,163,75,.35); padding: 6px 12px; border-radius: 999px;
}
#page-tamha .tm-sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 34px;
}
#page-tamha .tm-sheet-body h2 {
  font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 24px;
  line-height: 1.25; margin: 0; color: var(--tm-ink);
}
#page-tamha .tm-sheet-budget {
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 22px;
  color: var(--tm-gold-d); margin-top: 6px;
}
#page-tamha .tm-sheet-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: 13.5px; color: var(--tm-ink-3);
}
#page-tamha .tm-sheet-desc {
  font-size: 15px; line-height: 1.85; color: var(--tm-ink-2);
  margin: 16px 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
}
#page-tamha .tm-steps {
  margin-top: 18px; border: 1px solid rgba(154,118,50,.28); border-radius: 14px;
  background: rgba(247,240,225,.6); padding: 16px 17px;
}
#page-tamha .tm-steps-h {
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 15.5px;
}
#page-tamha .tm-steps-list {
  display: flex; flex-direction: column; gap: 11px; margin-top: 12px;
}
#page-tamha .tm-step { display: flex; gap: 11px; align-items: flex-start; }
#page-tamha .tm-step-n {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: rgba(208,163,75,.2); border: 1px solid rgba(208,163,75,.5);
  color: var(--tm-gold-d); font-family: 'Kanit', sans-serif; font-weight: 600;
  font-size: 12.5px; display: flex; align-items: center; justify-content: center;
}
#page-tamha .tm-step-t {
  font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 14.5px;
}
#page-tamha .tm-step-d { font-size: 13px; color: var(--tm-ink-3); line-height: 1.65; }
#page-tamha .tm-warn {
  margin-top: 14px; display: flex; gap: 11px; align-items: flex-start;
  border-left: 4px solid var(--tm-red); background: rgba(122,71,58,.08);
  border-radius: 0 12px 12px 0; padding: 13px 15px;
}
#page-tamha .tm-warn svg { flex: 0 0 18px; margin-top: 2px; }
#page-tamha .tm-warn div { font-size: 13.5px; line-height: 1.7; color: #5E3A30; }
#page-tamha .tm-sheet-cta { margin-top: 18px; display: grid; gap: 10px; }

/* ── ฟอร์มลงประกาศ — "กระดาษ" ──────────────────────────────────── */
#page-tamha .tm-form-main {
  position: relative; z-index: 4;
  max-width: 920px; margin: 0 auto; padding: 10px 22px 80px;
}
#page-tamha .tm-paper {
  position: relative; background: #FFFDF7;
  border: 1px solid rgba(154,118,50,.3); border-radius: 6px;
  box-shadow: 0 30px 70px -26px rgba(70,55,25,.55);
  padding: 44px clamp(22px, 5vw, 58px) 40px; overflow: hidden;
}
#page-tamha .tm-watermark {
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-family: 'Kanit', sans-serif; font-weight: 700;
  font-size: clamp(90px, 17vw, 170px); color: rgba(46,40,30,.035);
  white-space: nowrap; letter-spacing: 6px; pointer-events: none;
}
#page-tamha .tm-paper-head { position: relative; text-align: center; padding-bottom: 18px; }
#page-tamha .tm-paper-logo { height: 56px; width: auto; display: block; margin: 0 auto 10px; }
#page-tamha .tm-paper-head h1 {
  font-family: 'Kanit', sans-serif; font-weight: 700;
  font-size: clamp(24px, 4vw, 32px); margin: 0; letter-spacing: -.3px; color: var(--tm-ink);
}
#page-tamha .tm-paper-sub {
  font-family: 'Kanit', sans-serif; font-size: 10.5px; letter-spacing: 2.4px;
  color: var(--tm-ink-3); margin-top: 4px;
}
#page-tamha .tm-paper-rule {
  height: 2px; margin: 18px auto 0;
  background: linear-gradient(90deg, rgba(208,163,75,0), rgba(208,163,75,.85), rgba(208,163,75,0));
}
#page-tamha .tm-sec { position: relative; margin-top: 26px; }
#page-tamha .tm-clause {
  font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 18px;
  border-left: 4px solid var(--tm-gold); padding-left: 12px; color: var(--tm-ink);
}
#page-tamha .tm-clause .tm-opt {
  font-family: 'Sarabun', sans-serif; font-weight: 400; font-size: 14px; color: var(--tm-faint);
}
#page-tamha .tm-blank-in {
  font-family: 'Sarabun', sans-serif; font-size: 17px; color: var(--tm-ink);
  background: rgba(208,163,75,.07); border: none;
  border-bottom: 1.6px dotted rgba(154,118,50,.65); border-radius: 3px;
  padding: 8px 10px; width: 100%; outline: none;
}
#page-tamha .tm-blank-in::placeholder { color: rgba(179,167,142,.75); font-style: italic; }
#page-tamha .tm-blank-in:focus {
  background: rgba(208,163,75,.13); border-bottom-color: var(--tm-gold);
}
#page-tamha textarea.tm-blank-in { resize: vertical; line-height: 1.8; }
#page-tamha .tm-blank-in.tm-bad {
  background: rgba(122,71,58,.08); border-bottom: 1.8px solid var(--tm-red);
}
#page-tamha .tm-err {
  display: none; align-items: center; gap: 6px; margin-top: 7px;
  font-family: 'Kanit', sans-serif; font-size: 13px; font-weight: 500; color: var(--tm-red);
}
#page-tamha .tm-err.tm-show { display: flex; }
#page-tamha .tm-lbl {
  font-size: 12px; letter-spacing: 1.4px; color: var(--tm-faint); font-weight: 600;
}
/* ดีไซน์เดิมเป็น 1fr 1fr ตายตัว — ที่ 375px ช่องเหลือ ~145px แล้ว placeholder ถูกตัด
   และเมื่อแยกงบเป็นสองช่องจะกลายเป็นสามช่องในแถวเดียว จึงเปลี่ยนเป็น auto-fit */
#page-tamha .tm-fgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px; margin-top: 11px;
}
#page-tamha .tm-catrail {
  display: flex; gap: 9px; margin-top: 12px; padding: 2px 2px 8px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
#page-tamha .tm-catrail::-webkit-scrollbar { display: none; }
#page-tamha .tm-fcat {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer; scroll-snap-align: start;
  font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 14px;
  padding: 9px 17px; border-radius: 999px;
  color: var(--tm-ink-3); background: rgba(255,252,245,.9);
  border: 1px solid rgba(208,163,75,.42);
}
#page-tamha .tm-fcat.tm-on {
  font-weight: 600; color: #FFFDF7;
  background: linear-gradient(135deg, #D8AE5C, var(--tm-gold-d));
  border-color: rgba(154,118,50,.6);
  box-shadow: 0 12px 26px -14px rgba(154,118,50,.9);
}
#page-tamha .tm-note {
  position: relative; margin-top: 28px; display: flex; gap: 12px; align-items: flex-start;
  border-left: 5px solid var(--tm-gold); background: rgba(208,163,75,.11);
  border-radius: 0 12px 12px 0; padding: 15px 17px;
}
#page-tamha .tm-note svg { flex: 0 0 19px; margin-top: 2px; }
#page-tamha .tm-note div { font-size: 14px; line-height: 1.75; color: #5E4A25; }
#page-tamha .tm-fine {
  position: relative; margin-top: 24px; border-top: 1px solid rgba(154,118,50,.25);
  padding-top: 14px; font-size: 13px; line-height: 1.8; color: var(--tm-ink-4);
}
#page-tamha .tm-submit { position: relative; margin-top: 24px; font-size: 17px; padding: 17px 20px; }

@keyframes tmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes tmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmDrop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* จอแคบ: ปุ่มลอยขยับเข้ามาใกล้ขอบ และการ์ดยังเป็นคอลัมน์เดียวอยู่แล้ว
   (auto-fill minmax 300px ใน 331px ที่เหลือหลังหัก padding 22px สองข้าง) */
@media (max-width: 480px) {
  #page-tamha .tm-fab { right: 16px; bottom: 16px; height: 56px; font-size: 15px; }
  #page-tamha .tm-paper { padding: 32px 20px 30px; }
  #page-tamha .tm-sheet { height: 92vh; }   /* max-height ข้างบนยังคุมอยู่ */
}