/* ============================================================================
   r5.css — ชุดดีไซน์ใหม่ "R5" (16 ส.ค. 2026)
   ที่มา: ม็อคอัพที่บุ๋ยส่งมา 8 ใบ (หน้าแรก / พาน้องไป / รายละเอียดร้าน /
          โนอาร์ / บันทึกน้อง / ของฉัน / for Business คลินิก / for Business ร้านค้า)

   ⚠️ ไฟล์นี้โหลด "หลัง" app.css เสมอ — เป็นชั้นทับ ไม่ได้แทนที่
      เหตุผล: app.css ใช้ตัวแปรสี (token) อยู่แล้วทั้งไฟล์ การเปลี่ยน token
      ชั้นเดียวจึงเปลี่ยนหน้าตาได้ทั้งแอป (ผู้ใช้ + ธุรกิจ + แอดมิน) พร้อมกัน
      โดยไม่ต้องรื้อ 2,479 บรรทัดเดิม และถ้าจะถอยกลับ = ลบ <link> บรรทัดเดียว

   โครงไฟล์:
     1. token       — สี ระยะ มุมมน เงา
     2. เปลือกแอป   — หัวหน้าจอ · แถบเมนูล่าง (5 ช่อง มีปุ่มกลาง)
     3. ของใช้ร่วม  — การ์ด ปุ่ม หัวข้อ ชิป ป้าย ไทล์พาสเทล
     4. หน้าแรก
     5. ฝั่งธุรกิจ + แอดมิน (สืบทอด token เป็นหลัก)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKEN
   สิ่งที่เปลี่ยนจากเดิม 3 อย่าง — เป็นเหตุผลหลักที่ม็อคอัพดู "อุ่น" กว่าของจริง
     ก. หมึกอุ่น  ของเดิม #111827 เป็นเทาอมน้ำเงิน วางบนพื้นครีมแล้วดูเย็นและแข็ง
     ข. มุมมนขึ้น 16px → 22px  ม็อคอัพทุกใบมุมมนกว่าของจริงชัดเจน
     ค. เงาอมสี  เงาเทา/ดำบนพื้นครีมทำให้ดูขุ่น ปัจจุบันใช้เงาอมเขียวให้เข้าแบรนด์ใหม่
   --------------------------------------------------------------------------- */
:root {
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  /* ระยะขอบมาตรฐานของเนื้อหา — ม็อคอัพเว้นขอบกว้างกว่าของเดิม */
  --gutter: 18px;
  /* ความสูงแถบเมนูล่างแบบใหม่ (มีปุ่มกลางนูนขึ้นมา) */
  --nav-h: 74px;
}

/* ---- แบรนด์ใหม่ (23 ส.ค. 2026) — เขียวมิ้นต์ + ครีม + ปะการัง ----
   ที่มา: ไอคอนแอปใบใหม่ (หมา+แมวบนวงเขียว พื้นครีม หัวใจปะการัง) และแบนเนอร์โฆษณา
   ค่าที่ดูดจากภาพจริง: เขียว #0D9A8E / #36A994 · เขียวเข้ม #165C58 · มิ้นต์ #50D1B3
                        ครีม #FEF8EF · ปะการัง #F96B5C · หมึกเขียวเข้ม #142E35
   ⚠️ ทุกสีที่เป็น "ตัวอักษร" ผ่าน WCAG AA แล้ว (วัดด้วย scripts/calculate_contrast.py)
      --color-primary #0D8477 + ตัวขาว = 4.58:1 · --color-primary-text บนครีม = 6.94:1
      --color-text-muted บนขาว = 5.24:1 (ห้ามทำให้จางกว่านี้) */
:root[data-theme="light"] {
  --color-primary: #0D8477;
  --color-primary-dark: #0A6A60;
  --color-primary-text: #0A6157;
  --color-primary-light: #DCF0EA;
  --color-primary-gradient: linear-gradient(135deg, #12A08F 0%, #0A6E62 100%);
  --color-primary-shadow: rgba(13, 132, 119, 0.28);

  /* ปะการังจากไอคอน — ใช้เป็น "สีเน้น" เท่านั้น (หัวใจ ป้ายเตือน จุดแดง)
     ห้ามใช้เป็นสีปุ่มหลัก ปุ่มหลักของแบรนด์คือเขียว */
  --color-accent: #F96B5C;
  --color-accent-text: #B23C2F;      /* ตัวอักษรปะการังบนพื้นขาว = 5.87:1 */
  --color-accent-light: #FFEAE5;

  --color-bg: #FDF8F0;
  --color-bg-gradient:
    radial-gradient(120% 46% at 50% 0%, #DDF0E7 0%, rgba(221, 240, 231, 0) 64%);
  --color-surface: #FFFFFF;
  --color-surface-hover: #F1F7F4;

  --color-text-main: #2C3B37;
  /* ⚠️ ห้ามทำให้จางกว่านี้ — เกณฑ์ 4.5:1 บนพื้นขาว
     ตัวนี้คือสีของ "ข้อความรอง" ทั้งแอป ทั้งคำอธิบายใต้หัวข้อและป้ายเทาๆ
     วัดใหม่ทุกครั้งที่แตะด้วย scripts/check_buttons.py (17 ส.ค. 2026) */
  --color-text-muted: #5E706B;
  --color-ink: #123A34;          /* หัวข้อ/พาดหัว — เขียวเข้มแบบพาดหัวในแบนเนอร์ */

  --color-border: #E6EDE9;
  --color-border-hover: #D3E1DB;

  --shadow-sm: 0 1px 3px rgba(20, 80, 72, .07);
  --shadow-md: 0 2px 14px rgba(20, 80, 72, .09);
  --shadow-lg: 0 8px 28px rgba(20, 80, 72, .14);
  --shadow-sheet: 0 -6px 26px rgba(15, 70, 62, .14);

  --color-btn-alt-bg: #EDF5F2;
  --color-btn-alt-active: #DEECE7;
}

:root[data-theme="dark"] {
  --color-primary: #2FBFA9;
  --color-primary-dark: #62DCC6;
  --color-primary-text: #62DCC6;
  --color-primary-light: rgba(47, 191, 169, .16);
  --color-primary-gradient: linear-gradient(135deg, #2FBFA9 0%, #0E8577 100%);
  --color-primary-shadow: rgba(47, 191, 169, .26);

  --color-accent: #FF8D7E;
  --color-accent-text: #FFA294;
  --color-accent-light: rgba(249, 107, 92, .18);

  --color-bg: #0F1917;
  --color-bg-gradient:
    radial-gradient(120% 46% at 50% 0%, #16332D 0%, rgba(22, 51, 45, 0) 64%);
  --color-surface: #182421;
  --color-surface-hover: #1F2F2B;

  --color-text-main: #E9F1EE;
  --color-text-muted: #9BAAA6;
  --color-ink: #F2F8F6;

  --color-border: #2A3835;
  --color-border-hover: #3A4A46;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 14px rgba(0, 0, 0, .40);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, .50);
  --shadow-sheet: 0 -6px 26px rgba(0, 0, 0, .50);
}

/* ⚠️ กันหน้าเลื่อนซ้าย-ขวา (บุ๋ยเจอบนมือถือจริง 16 ส.ค. 2026)
   อาการ: ทั้งหน้าถูกดันไปทางซ้าย เหลือแถบว่างทางขวา ปุ่มมุมขวาบนดูไม่สมมาตร
   ต้นเหตุตอนนั้น = วงกลมพื้นหลังหลังรูปน้องหมายื่นออกนอกจอ 44px
   แก้ที่ต้นเหตุแล้ว (ดู .hub-hero-blob) แต่คงบรรทัดนี้ไว้เป็นตาข่ายกันของใหม่ในอนาคต
   ⚠️ ห้ามลบ — ของตกแต่งที่ยื่นออกนอกขอบมีหลายจุด พลาดจุดเดียวหน้าเบี้ยวทั้งแอป */
html { overflow-x: hidden; }
body {
  background-color: var(--color-bg);
  background-image: var(--color-bg-gradient);
  background-repeat: no-repeat;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
  line-height: var(--leading-body);
  overflow-x: hidden;
  max-width: 100%;
}
.page { padding: 0 var(--gutter) 8px; max-width: 520px; }

/* ---------------------------------------------------------------------------
   2. เปลือกแอป
   --------------------------------------------------------------------------- */

/* ---- หัวหน้าจอ ----
   ม็อคอัพ: กล่องโลโก้สี่เหลี่ยมมน + ชื่อแบรนด์ + คำบรรยายบรรทัดเล็กใต้ชื่อ
   ⚠️ กฎ UX ข้อ 2 (25 ก.ค. 2026): หัวหน้าจอมี "ปุ่มที่เปิดแผงได้" ชิ้นเดียว
      ม็อคอัพวาดไว้ 2 วง (กระดิ่ง + คน) — กระดิ่งเป็นลิงก์ตรง ไม่ใช่แผง
      และจะโผล่ก็ต่อเมื่อมีเรื่องต้องเตือนจริง จึงไม่ขัดกฎ */
.app-header {
  gap: 12px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.app-header .brand {
  flex: 1;
  min-width: 0;
  gap: 9px;
  font-size: unset;
  color: unset;
  /* ⚠️ แบรนด์เป็นลิงก์กลับหน้าแรกแล้ว — ต้องปิดขีดเส้นใต้ ไม่งั้นชื่อแอปมีเส้นใต้ทั้งบรรทัด */
  text-decoration: none;
}
.app-header .brand img {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex: none;
  background: linear-gradient(140deg, #DCF0EA, #B9E3D6);
}
.brand-text { min-width: 0; }
.app-header .brand-name {
  display: block;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-ink);
  letter-spacing: -.2px;
  /* ⚠️ ชื่อแบรนด์ห้ามตัดบรรทัด — "น้องบอกว่า" ขึ้นบรรทัดใหม่กลางคำเคยอ่านเพี้ยน */
  white-space: nowrap;
}
.brand-sub {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.head-tools { display: flex; align-items: center; gap: 8px; flex: none; }

/* ---- ปุ่มกลมในหัวหน้าจอ ----
   ม็อคอัพ: กระดิ่ง(ขาว) + โปรไฟล์(สีแบรนด์) ขนาดเท่ากันเป๊ะ
   ⚠️ ทั้งสามปุ่มต้องเป็นวงกลมสมบูรณ์และเรียงกึ่งกลางแนวเดียวกัน
      ของเดิมปุ่มสีแบรนด์มีเงาฟุ้งกว้างจนดูไม่คมและไม่สมมาตรกับปุ่มข้างๆ (บุ๋ยแจ้ง 16 ส.ค.) */
.head-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.bell-btn,
.avatar-btn {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  text-decoration: none;
  box-sizing: border-box;
}
.bell-btn .icon,
.avatar-btn .icon { width: 20px; height: 20px; }

/* ตั้งค่า (ฝั่งธุรกิจ) — ใช้ทรงมาตรฐาน .icon-btn แล้ว เหลือแค่ปรับน้ำหนักสี
   ⚠️ ห้ามกลับไปใช้ ::after + mask — วัดตำแหน่งด้วยสคริปต์ตรวจไม่ได้ */
.app-header .gear-btn { color: var(--color-text-muted); }

/* กระดิ่งเตือน */
.bell-btn {
  position: relative;
  background: var(--color-surface);
  color: var(--color-text-main);
  box-shadow: var(--shadow-sm);
}
.bell-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px;
  background: #E5484D; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
  border: 2px solid var(--color-bg);
  box-sizing: border-box;
}

/* โปรไฟล์ — ปุ่มเด่นสุดของหัวหน้าจอ */
.avatar-btn {
  background: var(--color-primary-gradient);
  color: #fff;
  /* เงาแคบและอยู่ใต้ปุ่มพอดี ไม่ฟุ้งออกด้านข้างจนดูเบี้ยว */
  box-shadow: 0 3px 8px rgba(13, 132, 119, .28);
}
.avatar-btn:active { transform: scale(.94); }

:root {
  --icon-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
}

/* แผงตั้งค่าใต้ปุ่ม */
.head-panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

/* ---- แถบเมนูล่าง 5 ช่อง + ปุ่มกลาง ----
   ม็อคอัพ: ช่องกลาง "บันทึกน้อง" เป็นวงกลมสีแบรนด์นูนขึ้นมาเหนือแถบ
   ⚠️ ปุ่มกลางเป็น "ปลายทาง" (หน้าบันทึกน้อง) ไม่ใช่เมนูลอย — จึงมีสถานะ active
      ได้เหมือนแท็บอื่น และไม่ซ้ำกับปุ่มใดบนหน้าแรก (กฎ UX ข้อ 1) */
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  /* ⚠️ ของเดิมเป็น "เม็ดยาลอย" (left/right 12px, มุมมน 28 รอบด้าน)
     ม็อคอัพเป็นแถบเต็มความกว้างมนเฉพาะมุมบน — ต้องรีเซ็ต left/right/bottom ด้วย
     ไม่งั้นได้ลูกผสมที่ปุ่มกลางลอยหลุดกรอบ */
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  padding: 8px 2px var(--safe-bottom);
  box-shadow: var(--shadow-sheet);
}
.bottom-nav a {
  gap: 3px;
  min-height: 0;
  border-radius: 0;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 4px 0 6px;
}
/* ⚠️ ของเดิมใส่พื้นชมพูก้อนโตให้แท็บที่เลือกอยู่ — ทับกับปุ่มกลางแล้วดูรก
   ม็อคอัพใช้แค่ "สีแบรนด์ + ตัวหนา" บอกว่าอยู่แท็บไหน */
/* ⚠️ ชื่อแท็บเป็นตัวอักษร 11px = ต้องผ่านเกณฑ์ 4.5:1 จึงใช้ --color-primary-text (เขียวเข้ม)
   ไม่ใช่ --color-primary หรือ --color-primary-dark ซึ่งสว่างกว่า ไว้ใช้กับพาดหัว/พื้นปุ่ม */
.bottom-nav a.active { background: transparent; color: var(--color-primary-text); font-weight: 700; }
.bottom-nav a.active svg { transform: none; stroke-width: 2.2; }
.platform-android .bottom-nav a.active svg { background: transparent; width: 24px; padding: 0; }

/* ช่องกลาง */
.bottom-nav a.nav-mid { gap: 3px; }
.bottom-nav a.nav-mid svg {
  width: 26px; height: 26px;
  margin-top: -28px;
  padding: 13px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  color: #fff;
  stroke: #fff;
  box-shadow: 0 8px 20px var(--color-primary-shadow);
  border: 4px solid var(--color-surface);
}
.bottom-nav a.nav-mid.active svg { stroke-width: 2.4; }

/* ---------------------------------------------------------------------------
   3. ของใช้ร่วม
   --------------------------------------------------------------------------- */

/* ---- การ์ด ---- */
.card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

/* ---- ปุ่ม ---- */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: 0 6px 18px var(--color-primary-shadow);
  padding: 15px 20px;
}
.btn.alt {
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  font-weight: 700;
  /* ⚠️ ต้องมี !important — .btn ตั้ง color: var(--color-btn-text) !important ไว้
     และ --color-primary-dark สว่างเกินสำหรับตัวอักษรขนาดปกติ
     ตัวที่ออกแบบไว้ให้ "อ่านบนพื้นอ่อน" คือ --color-primary-text (เขียวเข้ม #0A6157 = 6.94:1 บนครีม)
     (บุ๋ยแจ้ง 17 ส.ค. 2026 · วัดด้วย scripts/check_buttons.py) */
  color: var(--color-primary-text) !important;
}
a.btn-nav, button.btn-nav {
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: 0 6px 18px var(--color-primary-shadow);
}
.btn-mini {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

/* ---- หัวข้อหมวด ----
   ม็อคอัพ: ไอคอนสีแบรนด์ + ข้อความเข้ม + ลิงก์ "ดูทั้งหมด" เป็นเม็ดยาขาวชิดขวา */
.feed-head, .me-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
  margin: var(--space-8) 0 var(--space-2);
}
/* ⚠️ ต้องระบุ .me-section-head ด้วย ไม่ใช่แค่ .feed-head — หัวข้อในการ์ด "ของฉัน"
   ใช้คลาสคนละตัว ถ้าตกหล่นไอคอนจะกินพื้นที่ผิดขนาดจนหัวข้อดูเยื้องเข้าไปกลางการ์ด */
.feed-head .icon,
.me-section-head .icon { color: var(--color-primary); width: 20px; height: 20px; flex: none; }
.feed-head-link {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-text);
  text-decoration: none;
  background: var(--color-surface);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.section-sub {
  margin: 0 0 var(--space-3);
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ---- พาดหัวประจำหน้า (คลาสเดิม .hero ที่ใช้อยู่แล้วเกือบทุกหน้า) ----
   ⚠️ ของเดิมเป็นหัวเล็กจัดกลาง สีแบรนด์ — ม็อคอัพทุกใบเป็นหัวใหญ่ชิดซ้าย สีเข้ม
      พร้อมลายอุ้งเท้าจางมุมขวา เปลี่ยนตรงนี้ที่เดียว = เปลี่ยนพร้อมกันหลายสิบหน้า */
.hero {
  position: relative;
  text-align: left;
  padding: 16px 0 10px;
  overflow: hidden;
}
.hero h1 {
  margin: 0;
  font-size: clamp(27px, 7.4vw, 34px);
  font-weight: 800;
  line-height: var(--leading-head);
  color: var(--color-ink);
  letter-spacing: -.02em;
}
.hero h1 .accent { color: var(--color-primary-dark); }
.hero > p, .hero .small {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 24em;
}
/* ลายอุ้งเท้าจาง — ของตกแต่งล้วน ใส่ผ่าน ::after จะได้ไม่ต้องแก้ทุกเทมเพลต */
.hero::after {
  content: '🐾';
  position: absolute;
  right: -10px; top: 2px;
  font-size: 76px;
  line-height: 1;
  opacity: .085;
  pointer-events: none;
  user-select: none;
}
/* หน้าที่วางของอื่นไว้ในกล่อง .hero ด้วย (เช่น ปุ่มหรือรูป) ไม่ต้องมีลาย */
.hero.no-deco::after { display: none; }

/* ---- พาดหัวประจำหน้าแบบมีไอคอน ----
   ม็อคอัพหน้ารอง (พาน้องไป / บันทึกน้อง / for Business) ขึ้นต้นด้วยพาดหัวใหญ่
   + คำบรรยาย + ลายอุ้งเท้าจางๆ มุมขวา  ใช้คลาสนี้ซ้ำได้ทุกหน้า */
.page-hero {
  position: relative;
  padding: 18px 0 6px;
  overflow: hidden;
}
.page-hero h1 {
  margin: 0;
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 800;
  line-height: var(--leading-head);
  color: var(--color-ink);
  letter-spacing: -.02em;
}
.page-hero h1 .accent { color: var(--color-primary-dark); }
.page-hero p {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 22em;
}
.page-hero .paw-deco {
  position: absolute;
  right: -14px; top: 6px;
  font-size: 92px;
  line-height: 1;
  color: var(--color-primary);
  opacity: .10;
  pointer-events: none;
  user-select: none;
}
.page-hero-icon {
  width: 54px; height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  margin-bottom: 12px;
}
.page-hero-icon .icon { width: 26px; height: 26px; }

/* ---- ชิป / ป้าย ---- */
.chip {
  border-radius: var(--radius-pill);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}
.chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: none;
  box-shadow: 0 4px 12px var(--color-primary-shadow);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}
.pill-open   { background: #E4F4EA; color: #1F6B3E; }
.pill-closed { background: #FBE7E7; color: #A03131; }
/* ⚠️ สีแบรนด์บนพื้นแบรนด์อ่อนคอนทราสต์ไม่พอ — ใช้พื้นขาว + เส้นขอบสีแบรนด์แทน
   (ทรงเดียวกับ .plan-tag ในหน้าเติมเครดิต) */
.pill-soft   { background: var(--color-surface); color: var(--color-primary-text);
               border: 1px solid var(--color-primary-light); }

/* ---- แถวเมนูในการ์ด (ของฉัน · ตั้งค่า · ฝั่งธุรกิจ · แอดมิน) ----
   ม็อคอัพ: ไอคอนในสี่เหลี่ยมมนพาสเทล + ชื่อ + คำอธิบายบรรทัดเล็ก + ลูกศรขวา
   ⚠️ ของเดิมเป็นไอคอนเส้นลอยๆ ติดกับตัวหนังสือ ทำให้ทุกแถวหน้าตาเหมือนกันหมด
      กวาดตาหาไม่เจอว่าอันไหนคืออะไร */
.me-link, .me-row, .pet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--color-text-main);
  text-decoration: none;
}
.me-link > .icon, .me-row > span > .icon {
  width: 40px; height: 40px;
  flex: none;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 13px;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  overflow: visible;
}
/* ⚠️ เฉพาะ "ชื่อรายการ" เท่านั้นที่ยืดเต็มแถว — ตัวควบคุมท้ายแถวห้ามยืด
   (บุ๋ยเจอเอง 23 ส.ค. 2026: สวิตช์ภาษาเป็น <span> เลยโดน flex:1 ยืดยาวครึ่งแถว
    ยิ่งจอกว้างยิ่งยาว และเม็ดยา "ไทย" กลายเป็นวงกลมเบี้ยว) */
.me-link > span:not(.me-row-arrow):not(.switch):not(.lang-toggle) { flex: 1; min-width: 0; }

/* สวิตช์ภาษาในแถวตั้งค่า — เม็ดยาสองช่องขนาดพอดีตัวอักษร ไม่ใช่แถบยาว
   ⚠️ ความสูง 44px คือขนาดนิ้วกดขั้นต่ำ (--tap-size) ห้ามลด ให้เพิ่มความกว้างแทน
      ไม่งั้นช่องจะกว้างเท่าสูงแล้วดูเป็นวงกลม */
.me-setting-row .lang-toggle { flex: none; margin-left: auto; align-items: center; }
.me-setting-row .lang-toggle a {
  min-width: 0;
  padding: 0 16px;
  line-height: 1;
  justify-content: center;
}
.me-row-arrow { margin-left: auto; color: #A9B8B3; font-size: 21px; flex: none; }
.me-link.danger > .icon { background: #FCE9E9; color: #A03131; }
:root[data-theme="dark"] .me-link.danger > .icon { background: rgba(224, 90, 90, .16); color: #F09B9B; }
.pet-row .pet-emoji {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: grid;
  place-items: center;
  font-size: 22px;
}

/* ---- ไทล์ตัวเลข (เครดิต · จำนวนน้อง · สถิติฝั่งธุรกิจ) ---- */
.me-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.me-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 15px;
  text-align: left;
}
.me-stat b {
  display: block;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-primary-dark);
  letter-spacing: -.02em;
  margin-bottom: 2px;
}
.me-stat span { font-size: 12.5px; color: var(--color-text-muted); font-weight: 500; }

/* ---- การ์ดโปรไฟล์หัวหน้า "ของฉัน" ---- */
/* หัวโปรไฟล์ — ม็อคอัพ 23 ส.ค. 2026 เป็น "แถบเขียวเข้ม ตัวอักษรขาว" ไม่ใช่การ์ดพาสเทล
   ⚠️ ห้ามใช้ var(--color-primary-gradient) ตรงนี้ เฉดต้นของมันสว่างเกินสำหรับตัวอักษรขาว
      (เทสต์ test_no_white_label_on_the_light_brand_gradient ล็อกไว้)
      เฉดคู่นี้วัดแล้ว: #0E7A6C = 5.23:1 · #0A5C52 = 7.88:1 บนตัวอักษรขาว */
.me-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, #0E7A6C 0%, #0A5C52 100%);
  border: 0;
  box-shadow: 0 6px 20px rgba(10, 92, 82, .22);
  margin-bottom: var(--space-4);
  text-decoration: none;
  color: #FFFFFF;
}
.me-profile .small { color: rgba(255, 255, 255, .88); }
.me-profile .me-row-arrow { color: rgba(255, 255, 255, .72); }
:root[data-theme="dark"] .me-profile {
  background: linear-gradient(120deg, #0C5F55 0%, #0A4A43 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .40);
}
.me-profile-face {
  width: 62px; height: 62px;
  flex: none;
  border-radius: 50%;
  /* วงกลมอักษรย่อบนพื้นเขียว — ใช้พื้นขาวโปร่งแทนสีขาวทึบ จะได้ไม่เป็นจานขาวโด่ */
  background: rgba(255, 255, 255, .18);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 26px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.me-profile-face img { width: 100%; height: 100%; object-fit: cover; }
.me-profile-body { min-width: 0; flex: 1; }
.me-profile-body b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-profile-body .small { display: block; margin-top: 1px; }

/* ---------------------------------------------------------------------------
   หน้าบันทึกน้อง (สมุดสุขภาพ)
   --------------------------------------------------------------------------- */

/* การ์ดน้องหัวหน้า — รูปกลม + ชื่อ + ป้ายพันธุ์ + อายุ/น้ำหนัก */
.pet-hero {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-4);
}
.pet-hero-face {
  width: 78px; height: 78px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary-light);
  display: grid;
  place-items: center;
  font-size: 36px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.pet-hero-face img { width: 100%; height: 100%; object-fit: cover; }
.pet-hero-body { min-width: 0; flex: 1; }
.pet-hero-name { display: flex; align-items: center; gap: 8px; }
.pet-hero-name b {
  font-size: 23px;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-hero-edit {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
}
.pet-hero-edit .icon { width: 14px; height: 14px; }
.pet-hero .pill { margin-top: 5px; }
.pet-hero-facts { display: flex; gap: 18px; margin-top: 9px; }
.pet-hero-facts > span { display: block; }
.pet-hero-facts .small { display: block; font-size: 11.5px; line-height: 1.4; }
.pet-hero-facts b { font-size: 15px; color: var(--color-ink); font-weight: 700; }

/* ทางลัดหมวดบันทึก — เลื่อนแนวนอนเพราะมี 6 หมวด (ม็อคอัพวาดไว้ 4) */
.rec-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1) var(--space-4);
  padding: 4px var(--gutter) 6px;
}
.rec-tabs::-webkit-scrollbar { display: none; }
.rec-tab {
  flex: none;
  width: 104px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 12px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.rec-tab-ic {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  display: grid;
  place-items: center;
}
.rec-tab-ic .icon { width: 18px; height: 18px; }
.rec-tab-label { font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.rec-tab-n {
  position: absolute;
  top: 11px; right: 11px;
  font-size: 12px;
  font-weight: 800;
  opacity: .55;
}

/* หัวข้อย่อยของแต่ละหมวด — ไอคอนในกล่องสีเดียวกับไทล์ทางลัด */
.rec-head { display: flex; align-items: center; gap: 9px; }
.rec-head-ic {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.rec-head-ic .icon { width: 16px; height: 16px; }

/* ปุ่มเพิ่มบันทึก — แถบสีแบรนด์เต็มความกว้าง เด่นที่สุดบนหน้า */
.btn.add-rec-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 15px 18px;
  margin: var(--space-5) 0 var(--space-4);
}
.add-rec-plus {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 400;
}
.add-rec-text b { display: block; font-size: 16px; line-height: 1.4; }
.add-rec-text .small { display: block; color: rgba(255, 255, 255, .82); font-size: 12px; }

.pet-facts-card > summary { font-size: 15px; cursor: pointer; }

/* ---- ไทม์ไลน์บันทึก ---- */
.rec-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.rec-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 14px;
}
/* เส้นแนวตั้งเชื่อมจุด — วาดจากจุดของรายการนี้ลงไปหารายการถัดไป
   รายการสุดท้ายไม่ต้องมีเส้นห้อย จึงตัดที่ :last-child */
.rec-item::before {
  content: '';
  position: absolute;
  left: 45px; top: 20px; bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.rec-item:last-child::before { display: none; }
.rec-when {
  flex: none;
  width: 38px;
  text-align: center;
  line-height: 1.3;
  padding-top: 4px;
}
.rec-when b { display: block; font-size: 17px; font-weight: 800; color: var(--color-primary-text); }
.rec-when span { display: block; font-size: 11px; color: var(--color-text-muted); }
.rec-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 14px; height: 14px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid #7FBF8C;
}
.rec-dot.soon { border-color: #E0A63C; }
.rec-dot.over { border-color: #D8574F; }
.rec-body {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 11px 13px;
}
.rec-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-title b { font-size: 14.5px; font-weight: 700; color: var(--color-ink); line-height: 1.5; }
.rec-meta, .rec-next, .rec-note { display: block; font-size: 12.5px; margin-top: 2px; }
.rec-meta .icon { width: 13px; height: 13px; }
.rec-del-form { flex: none; }
.rec-del {
  background: none;
  border: 0;
  color: #A9B8B3;
  font-size: 15px;
  padding: 8px 2px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   หน้าโนอาร์
   --------------------------------------------------------------------------- */
/* ⚠️ ของเดิม .noa-hero เป็นกล่องยืดเต็มจอ (flex:1) จัดกลางแนวตั้ง เพราะหน้าโนอาร์
   เคยเป็นหน้าว่างๆ มีแต่คำทักทายกลางจอ  ต้องล้าง flex:1 + flex-direction + padding
   ไม่งั้นได้การ์ดสูงครึ่งจอที่มีที่ว่างเปล่าอยู่ข้างล่าง (เจอจริง 16 ส.ค.) */
.noa-hero {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  background: linear-gradient(115deg, #EDF7F3 0%, #DCEFE8 100%);
  border: 1px solid #CBE5DC;
  text-align: left;
  margin-bottom: var(--space-3);
}
:root[data-theme="dark"] .noa-hero {
  background: linear-gradient(115deg, #35231A 0%, #402A21 100%);
  border-color: #4A3226;
}
.noa-hero-face {
  width: 78px;
  height: 78px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--color-surface);
  box-shadow: 0 4px 14px rgba(20, 80, 72, .18);
}
.noa-hero-text { min-width: 0; flex: 1; }
.noa-hero-greet {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: var(--leading-head);
  color: var(--color-ink);
}
.noa-hero-intro { margin: 5px 0 0; font-size: 13px; line-height: 1.6; }
.noa-hero-quota { text-align: center; margin-bottom: var(--space-3); }
/* ⚠️ ปุ่มเมนู (ประวัติการคุย) ลอยทับมุมซ้ายบน — ของเดิมไม่ชนอะไรเพราะฮีโร่จัดกลาง
   พอฮีโร่กลายเป็นการ์ดชิดบน ปุ่มเลยไปทับหน้าโนอาร์ ต้องเว้นที่ให้แถวปุ่มก่อน */
.noa-landing { padding-top: 52px; }
.noa-menu-btn { box-shadow: var(--shadow-sm); }

/* คำถามยอดฮิต — ม็อคอัพเรียงเป็นแถวเลื่อนแนวนอน ของเดิมกองซ้อนกันกินจอ */
.noa-chips {
  display: flex;
  flex-wrap: nowrap;
  /* ⚠️ ของเดิม justify-content: center — พอเปลี่ยนเป็นแถวเลื่อน การจัดกลางทำให้
     ชิปใบแรกถูกดันหลุดออกนอกจอซ้าย กดไม่ได้ ต้องบังคับเริ่มจากซ้ายเสมอ */
  justify-content: flex-start;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: var(--space-3) calc(var(--gutter) * -1) var(--space-3);
  padding: 4px var(--gutter) 6px;
}
.noa-chips::-webkit-scrollbar { display: none; }
.noa-chip {
  flex: none;
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-main);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* ---- บับเบิลแชท (ตามม็อคอัพ) ---- */
.noa-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  align-self: flex-start;
}
.noa-who {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-primary-text);
}
.noa-ai {
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.noa-noa .noa-body {
  background: linear-gradient(120deg, #EDF7F3 0%, #DEF0E9 100%);
  border: 1px solid #CBE5DC;
  border-radius: 18px 18px 18px 6px;
  padding: 12px 15px;
}
:root[data-theme="dark"] .noa-noa .noa-body {
  background: linear-gradient(120deg, #33231A 0%, #3A2620 100%);
  border-color: #4A3226;
}
.noa-user .noa-body {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: 0;
  border-radius: 18px 18px 6px 18px;
  padding: 12px 15px;
}

/* แถบพิมพ์ข้อความ */
.noa-input-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 8px;
  box-shadow: var(--shadow-lg);
}
.noa-input-bar input[type=text] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  padding: 10px 4px;
}
.noa-input-bar input[type=text]:focus { box-shadow: none; background: transparent; }
.noa-attach {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.noa-input-bar .btn {
  width: auto;
  flex: none;
  padding: 11px 20px;
  font-size: 14.5px;
}

/* ---------------------------------------------------------------------------
   หน้าพาน้องไป (/places)
   --------------------------------------------------------------------------- */

/* ---- การ์ดร้านในรายการ ----
   ม็อคอัพ: รูปหน้าร้านซ้าย · ชื่อ + ป้ายระดับ · หมวด/ระยะ · ป้ายสถานะเป็นเม็ดยา
   ⚠️ ของเดิมเป็นการ์ดตัวหนังสือล้วน ไม่มีรูป — ร้านทุกร้านหน้าตาเหมือนกันหมด
      กวาดตาเลือกไม่ได้ ต้องอ่านทีละบรรทัด */
.place-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  border-radius: var(--radius-xl);
  padding: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.pc-img {
  position: relative;
  flex: none;
  /* ⚠️ ต้องล็อกทั้งกว้างและสูงเป็นจัตุรัส — ปล่อยให้ยืดตามความสูงการ์ด (align-items:stretch)
     ทำให้ร้านที่ชื่อยาว 2 บรรทัดได้รูปสูงกว่าร้านอื่น รายการเลยดูไม่เป็นระเบียบ */
  width: 92px;
  height: 92px;
  align-self: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-primary-light);
  display: grid;
  place-items: center;
  font-size: 30px;
}
.pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-lv {
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  padding: 2px 4px;
  border-radius: 7px;
  color: #fff;
  background: rgba(46, 36, 30, .8);
  backdrop-filter: blur(3px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-lv.lv-4 { background: #1F6B3E; }
.pc-lv.lv-3 { background: #3C7E36; }
.pc-lv.lv-2 { background: #94620E; }
.pc-lv.lv-1 { background: #A8452D; }
.pc-body { flex: 1; min-width: 0; padding: 4px 2px 4px 0; }
.place-card-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.45;
  margin-bottom: 3px;
}
.place-card-meta { display: block; font-size: 12.5px; color: var(--color-text-muted); }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pc-tags:empty { display: none; }
.pc-tags > span {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  line-height: 1.6;
  background: var(--color-btn-alt-bg);
  color: var(--color-text-muted);
}
.pc-tags .status.open { background: #E4F4EA; color: #1F6B3E; }
.pc-tags .status.closed { background: #FBE7E7; color: #A03131; }
.pc-tags .pl-badge.book { background: #E4F4EA; color: #1F6B3E; }
.pc-tags .pl-badge.verified { background: #E7F1FB; color: #205081; }
/* ⚠️ ป้าย "ยังไม่ยืนยัน" ต้องอ่านออกแต่ไม่ตะโกน — เป็นข้อเท็จจริง ไม่ใช่คำเตือนอันตราย
   (สวนสาธารณะที่เติมจาก Google อยู่ในกลุ่มนี้ทั้งหมด รอคนที่เคยไปจริงมาโหวต) */
.pc-tags .pl-badge.unverified { background: #FFF3DC; color: #6E5013; }
:root[data-theme="dark"] .pc-tags .pl-badge.unverified {
  background: rgba(230, 190, 100, .16); color: #EDD293;
}

/* ---- หน้ารายละเอียดร้าน ---- */
.place-detail { padding: 0; max-width: 520px; }
.place-hero {
  position: relative;
  margin: 0 calc(var(--gutter) * -1) var(--space-4);
  height: 210px;
  overflow: hidden;
  background: var(--color-primary-light);
  display: grid;
  place-items: center;
  font-size: 56px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.place-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-head-card h1 {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 800;
  line-height: var(--leading-head);
  color: var(--color-ink);
}
.place-head-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.place-detail .address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.place-detail .address .icon { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--color-primary); }

/* แถวสิ่งอำนวยความสะดวก — ไอคอนกลม + คำสั้น เลื่อนแนวนอนถ้ามีหลายอัน */
.amenity-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1) var(--space-4);
  padding: 2px var(--gutter) 6px;
}
.amenity-row::-webkit-scrollbar { display: none; }
.amenity {
  flex: none;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-main);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 8px;
  box-shadow: var(--shadow-sm);
}
.am-ic {
  width: 38px; height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
}
.am-ic .icon { width: 19px; height: 19px; }


/* ---- แผ่นผลลัพธ์บนแผนที่ 3 ระดับ ----
   บุ๋ยแจ้ง 16 ส.ค. 2026: เปิดแผนที่แล้วแผ่นรายการบังแผนที่ ดันลงไม่ได้
   peek = โผล่แค่หัว · half = ครึ่งจอ (เห็นทั้งแผนที่และรายการ) · full = เกือบเต็มจอ
   ⚠️ ค่าเริ่มต้นคือ half — ให้เห็นทั้งสองอย่างพร้อมกันโดยไม่ต้องกดอะไรก่อน */
.map-page .map-sheet {
  max-height: none;
  height: 86%;
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
/* ⚠️ ตอนหุบสุด หัวแผ่นต้องอยู่ "เหนือ" แถบเมนูล่าง ไม่งั้นนิ้วไปโดนแถบเมนูแทน
   แล้วลากไม่ขึ้นเลย — นี่คือสาเหตุที่บุ๋ยบอกว่า "ปัดได้บางครั้ง" (16 ส.ค. 2026) */
.map-page .map-sheet.sheet-peek {
  transform: translateY(calc(100% - 56px - var(--nav-h)));
}
.map-page .map-sheet.sheet-half { transform: translateY(48%); }
.map-page .map-sheet.sheet-full { transform: translateY(0); }
/* หัวชีตต้องลากได้ถนัด — ห้ามให้เบราว์เซอร์แย่งท่าปัดไปเลื่อนหน้า */
.map-page #sheet-handle { touch-action: none; padding: 10px 16px 12px; }
.map-page .sheet-grip { width: 46px; height: 5px; }
/* เนื้อในเลื่อนได้เอง ไม่งั้นตอนกางเต็มจอจะเลื่อนดูรายการไม่ได้ */
/* เนื้อในเลื่อนได้เอง + เผื่อที่ท้ายให้พ้นแถบเมนูล่าง ไม่งั้นรายการสุดท้ายโดนบัง */
.map-page .sheet-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
}
/* โหมดรายการเต็มหน้า ไม่ต้องมีสถานะพวกนี้ */
.map-page.list-view .map-sheet,
.map-page.list-view .map-sheet.sheet-peek,
.map-page.list-view .map-sheet.sheet-half,
.map-page.list-view .map-sheet.sheet-full { height: auto; transform: none; }

/* ปุ่ม "ใช้ตำแหน่งฉัน" แบบเม็ดยา (ใช้ในหน้าเพิ่มร้าน — บนแผนที่มันเป็นปุ่มกลมไอคอนล้วน)
   ⚠️ พื้นเป็นมิ้นต์อ่อน (--color-primary-light) ตัวอักษรจึงต้องเป็นเขียวเข้มที่อ่านออก
      --color-primary-dark สว่างเกินไป — ใช้ --color-primary-text แทน */
#use-my-location {
  color: var(--color-primary-text);
  /* พื้นสีแบรนด์อ่อนทำให้ตัวอักษรคอนทราสต์ไม่พอ — เปลี่ยนเป็นทรง "ปุ่มรองแบบเส้นขอบ"
     เหมือน .btn.alt ทั้งแอป พื้นขาวจึงได้ 4.89:1 และหน้าตาไปทางเดียวกับปุ่มรองอื่น
     ⚠️ ปุ่มกลมบนแผนที่ไม่โดน — .map-page #use-my-location เจาะจงกว่า (1,1,0) */
  background: var(--color-surface);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* ---- ปุ่มสลับ แผนที่ / รายการ ---- */
.view-toggle {
  display: inline-flex;
  gap: 3px;
  margin-top: 8px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  /* ⚠️ ฝั่งที่ยังไม่ได้เลือกใช้ --color-text-muted แล้วได้ 3.99:1 (ต้อง 4.5)
     ลดน้ำหนักตัวอักษรแทนการทำให้สีจาง — ยังดูรองกว่าฝั่งที่เลือกอยู่ แต่อ่านออก */
  font-weight: 600;
  color: var(--color-text-main);
  background: transparent;
  cursor: pointer;
}
.view-toggle button .icon { width: 16px; height: 16px; }
.view-toggle button.on {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-weight: 700;
  box-shadow: 0 3px 10px var(--color-primary-shadow);
}

/* โหมดรายการ — ซ่อนแผนที่ แผ่นผลลัพธ์กินทั้งหน้า และเลื่อนได้ตามปกติ
   ⚠️ ต้องปิดปุ่ม "ตำแหน่งฉัน" ที่ลอยอยู่บนแผนที่ด้วย ไม่งั้นมันลอยทับรายการ */
.map-page.list-view .map-container { height: auto; }
.map-page.list-view #map { display: none; }
.map-page.list-view #use-my-location { display: none; }
.map-page.list-view .map-sheet {
  position: static;
  transform: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin-top: 0;
}
.map-page.list-view #sheet-handle { cursor: default; }
.map-page.list-view .sheet-grip { display: none; }
.map-page.list-view .place-list { background: transparent; }
/* หัวลอยของแผนที่ต้องกลายเป็นหัวปกติเมื่อไม่มีแผนที่ให้ลอยทับ */
.map-page.list-view #controls.map-float-top { position: static; padding-top: 10px; }

/* ---- การ์ดฟีด ---- */
.feed-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.feed-title { color: var(--color-ink); }

/* ---- แถวเลื่อนแนวนอน ---- */
.home-strip, .pet-strip, .promo-strip, .lv-collections {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  scrollbar-width: none;
}
.home-strip::-webkit-scrollbar,
.pet-strip::-webkit-scrollbar,
.promo-strip::-webkit-scrollbar,
.lv-collections::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   4. หน้าแรก
   --------------------------------------------------------------------------- */

/* ---- ฮีโร่ ----
   ม็อคอัพ: พาดหัว 2 บรรทัด 2 สี + รูปน้องบนวงกลมสีพีช + ลายอุ้งเท้า
   ⚠️ เป็น "กริด 2 คอลัมน์" ไม่ใช่รูป absolute ลอยทับข้อความ
      ของเดิมเป็น absolute แล้วพังตอนสลับภาษาอังกฤษ (พาดหัวยาวกว่า กล่องสูงขึ้น
      วงกลมยึดบน ตัวน้องยึดล่าง เลยแยกกันคนละที่) — กริดคุมได้ทั้งสองภาษา */
.hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  margin: 0;
  padding: 10px 0 2px;
  min-height: 0;
}
.hub-hero-text { min-width: 0; }
.hub-hero-art {
  position: relative;
  flex: none;
  /* รูปยื่นออกไปชนขอบจอพอดี (ลบเท่ากับ padding ของหน้า) */
  margin-right: calc(var(--gutter) * -1);
  width: min(52vw, 248px);
  display: grid;
  place-items: center;
}
.hub-hero-blob {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #DFF2EA 0%, #C6E7DA 55%, #AEDCCC 100%);
  z-index: 0;
  pointer-events: none;
}
:root[data-theme="dark"] .hub-hero-blob {
  background: radial-gradient(circle at 35% 35%, #1E4A41 0%, #14332D 100%);
}
.hub-hero-pet {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 16px rgba(20, 80, 72, .18));
  pointer-events: none;
}
.hub-hero-head {
  margin: 0;
  font-size: clamp(22px, 5.9vw, 30px);
  font-weight: 800;
  line-height: var(--leading-head);
  color: var(--color-ink);
  letter-spacing: -.02em;
}
.hub-hero-head .accent { display: block; color: var(--color-primary-dark); }
.hub-hero-sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ลายตกแต่งรอบรูป — อิงกรอบรูป (.hub-hero-art) ไม่ใช่กรอบฮีโร่
   ⚠️ ขยับ/ย่อรูปแล้วลายจะตามไปเอง ไม่ต้องไล่แก้ตัวเลขทีละจุดเหมือนของเดิม */
.hub-deco { position: absolute; z-index: 2; pointer-events: none; user-select: none; }
.hub-deco-paw {
  left: -16px; top: 6%;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #E7F4EF;
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 3px 10px rgba(20, 80, 72, .14);
  transform: rotate(-12deg);
}
.hub-deco-lines { right: 30px; top: -2px; width: 28px; height: 22px; color: #7CC3B2; }
:root[data-theme="dark"] .hub-deco-paw { background: #3A2A1E; }
/* จอแคบมาก — ลายตกแต่งเบียดรูป ตัดออกดีกว่าให้ทับกัน */
@media (max-width: 359px) { .hub-deco { display: none; } }

/* ---- ช่องค้นหา ----
   ม็อคอัพ: เม็ดยาขาวลอย เงาชัด ปุ่มสีแบรนด์อยู่ในเม็ดยาเดียวกัน */
.home-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 17px;
  box-shadow: var(--shadow-lg);
  margin: 16px 0 0;
  position: relative;
  z-index: 3;
}
.home-search .icon { width: 19px; height: 19px; color: var(--color-primary); flex: none; }
.home-search input[type=search] {
  flex: 1;
  min-width: 0;
  width: auto;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  padding: 10px 0;
}
.home-search input[type=search]:focus { box-shadow: none; background: transparent; }
.home-search button {
  flex: none;
  border: 0;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px var(--color-primary-shadow);
  cursor: pointer;
}
.home-search button:active { transform: scale(.96); }

/* ---- กริดหมวด ----
   ม็อคอัพ: อยู่ในการ์ดขาวใบเดียว ไอคอนอยู่ในวงพาสเทลรายหมวด */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px 4px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 18px 10px 15px;
  margin-top: 16px;
}
/* ⚠️ ของเดิมห่อไทล์ละกล่อง (พื้นขาว + เส้นขอบ) ซ้อนอยู่ในการ์ดขาวอีกที = กล่องในกล่อง
   ม็อคอัพมีกล่องขาวใบเดียวครอบทั้งกริด ไทล์ข้างในเหลือแค่วงไอคอน + คำ */
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: center;
  text-decoration: none;
  color: var(--color-text-main);
}
.cat-tile-icon {
  width: 54px; height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  transition: transform .15s ease;
}
/* ⚠️ ไอคอนต้องรับสีจากไทล์ (currentColor) ไม่ใช่ล็อกเป็นสีแบรนด์
   ของเดิมตั้ง .cat-tile-icon .icon { color: primary-text } ไว้ ทำให้สีรายหมวดไม่มีผล */
.cat-tile-icon .icon { width: 25px; height: 25px; color: inherit; }
/* ไอคอนทึบ 2 โทน (icons-r5.svg) — สีฝังมาในไฟล์แล้ว จึงห้ามตั้ง color/stroke/fill ทับที่นี่
   พื้นวงพาสเทลยังมาจากคลาส .t-* เหมือนเดิม (ดูจานสีท้ายไฟล์) */
.cat-tile-icon .cat-duo { width: 32px; height: 32px; display: block; }
.cat-tile:active .cat-tile-icon { transform: scale(.93); }
.cat-tile-label { font-size: 12.5px; font-weight: 500; line-height: 1.35; }

/* ---- น้องของฉัน ---- */
.pet-chip {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 0;
}
/* ⚠️ สามอันนี้เป็น <a> จึงโดนกฎ main a{display:inline-flex} ใน app.css หดตามเนื้อหา
   มือถือมองไม่ออกเพราะเนื้อหาเต็มจอพอดี แต่จอกว้างกลายเป็นก้อนลอยกลางที่ว่าง
   (บุ๋ยเจอเอง 23 ส.ค. 2026) */
.pet-invite, .cta-banner, .biz-entry, .me-profile { display: flex; width: 100%; }

/* จังหวะช่องไฟระหว่างบล็อกในหน้า — ให้เท่ากันหมดที่ 32px
   ⚠️ แบนเนอร์พวกนี้เป็น flex container จึงไม่ยุบ margin กับบล็อกข้างเคียงเหมือน <div> ธรรมดา
      ถ้าไม่บังคับ margin-bottom เป็น 0 จะได้ช่องไฟ 48px บ้าง 56px บ้าง ดูเป็นหลุมโหว่
      (บุ๋ยแจ้ง 23 ส.ค. 2026 "ช่องไฟโล่งๆ") */
.page > .cta-banner { margin: 32px 0 0; }
.page > .biz-entry { margin: 32px 0 0; }
.page > .faq-list { margin-bottom: 0; }

/* ---- กลุ่ม "ตั้งค่า" ในหน้าของฉัน ----
   ⚠️ ตอนหุบอยู่ การ์ดใบนี้คือกล่องขาวสูง ~70px ที่มีตัวหนังสือเล็กๆ อยู่มุมซ้าย
      บนจอกว้างยิ่งดูโหวง (บุ๋ยแจ้ง 23 ส.ค. 2026) → ทำให้เป็น "แถว" เต็มความกว้าง
      มีลูกศรชิดขวาเหมือนแถวเมนูอื่นในหน้าเดียวกัน */
/* ---- แถว "เชื่อมกับร้าน/คลินิก" ----
   ⚠️ summary โดนกฎรวม display:inline-flex ทำให้หัวข้อกับคำอธิบายไหลชนกันบรรทัดเดียว
      อ่านเป็น "ให้รหัสกับคลินิกเพื่อให้เขาเปิดสมุดสุขภาพน้องได้" ติดกันหมด (บุ๋ยเจอเอง)
      → หัวข้อบรรทัดหนึ่ง คำอธิบายบรรทัดถัดไป ลูกศรของ details ชิดขวา */
.connect-row > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
}
.connect-row > summary > b { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
/* ลูกศรของ details (::after) ต้องอยู่ท้าย "บรรทัดหัวข้อ" — float ใช้ไม่ได้ในกล่อง flex
   จึงจัดลำดับด้วย order: หัวข้อ(0) → ลูกศร(1) → คำอธิบายตกบรรทัดใหม่(2) */
.connect-row > summary::after { float: none; order: 1; }
.connect-row > summary > .small { order: 2; flex-basis: 100%; color: var(--color-text-muted); }

.settings-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 15.5px;
}
.settings-group > summary > b { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.settings-group:not([open]) { padding-top: 8px; padding-bottom: 8px; }

/* การ์ด "เริ่มต้นใช้งาน" — ข้อความจัดกลางบนการ์ดกว้าง 690px อ่านยากและดูลอย
   คุมความกว้างบรรทัดไว้ แล้วการ์ดจะสมดุลทั้งมือถือและเดสก์ท็อป */
.start-card > h3, .start-card > p { max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ---- คำถามที่พบบ่อยฝั่งธุรกิจ ----
   ⚠️ app.css ดัน "+" ไปขวาด้วย float ซึ่งไม่มีผลเลย เพราะกฎรวม main summary
      ตั้ง display:inline-flex ไว้ (float ใช้ไม่ได้ในกล่อง flex) — เครื่องหมายเลยไปเกาะ
      ท้ายข้อความแทนที่จะชิดขวา (บุ๋ยเจอเอง 23 ส.ค. 2026) */
.faq > summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq > summary::after { float: none; }

/* ช่องลองคุยกับโนอาร์บนหน้าแนะนำธุรกิจ — ช่องกรอกต้องยืดเต็มการ์ด
   ของเดิมกว้างตามค่าเริ่มต้นของเบราว์เซอร์ (~180px) แล้วเหลือที่ว่างยาวข้างๆ */
#demoForm { width: 100%; }
#demoForm #demoInput { flex: 1; min-width: 0; }

.pet-invite {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
}

/* ---- เลือกประเภทบันทึกสุขภาพด้วยไทล์ไอคอน (ม็อคอัพ 23 ส.ค. 2026) ----
   radio ซ่อนไว้ ตัวที่เลือกเน้นด้วยกรอบ+พื้นสีแบรนด์
   ⚠️ ต้องเห็น "ตัวที่เลือกอยู่" ชัดโดยไม่ต้องพึ่งสีอย่างเดียว จึงเพิ่มกรอบหนา + ตัวหนา
      (คนตาบอดสีต้องแยกออก) และ :focus-visible ต้องเห็นขอบโฟกัสตอนใช้คีย์บอร์ด */
.rtype-picker { border: 0; padding: 0; margin: 0 0 14px; }
.rtype-picker > legend {
  padding: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-main);
}
.rtype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rtype-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px 6px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  text-align: center;
}
.rtype-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
/* ไทล์รับสีพื้น+สีไอคอนประจำหมวดมาจากคลาส .t-* (จานสีท้ายไฟล์) เหมือนไทล์หมวดที่อื่นในแอป
   ไอคอนจึงไม่ต้องมีพื้นของตัวเอง แค่รับ currentColor ของไทล์ */
.rtype-ic {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: inherit;
}
.rtype-label { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.rtype-tile:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.rtype-tile:has(input:checked) .rtype-label { font-weight: 800; color: var(--color-primary-text); }
.rtype-tile:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
  outline-offset: 2px;
}

/* ---- การ์ดคู่มือ e-book แบบแทรกในเนื้อหา (หน้าแรกล่าง · ท้ายบทความ · ท้ายบทคุยโนอาร์) ----
   ⚠️ รอบแรกทำเป็นแถบเตี้ย ปก 46px — บุ๋ยแจ้ง 23 ส.ค. ว่า "ไม่สะดุดตา ไม่ชวนซื้อ" และช่องไฟไม่สมดุล
      รอบนี้: ปกใหญ่ 96px เอียงเล็กน้อยมีเงาแบบหนังสือจริง · ราคาขีดฆ่า + ป้ายประหยัด (เลขจริงจากร้าน)
      · ระยะขอบเท่ากันทุกด้าน 16px · ปุ่มขนาดพอมือ ไม่ใช่ก้อนยักษ์ */
.ebook-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  /* ปกอยู่กึ่งกลางแนวตั้ง — ถ้าชิดบน ช่องว่างจะไปกองอยู่ใต้ปกก้อนเดียว (ดูไม่สมดุล) */
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, #FFFDF8 0%, #F3F9F6 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--color-text-main);
}
/* ปก: เอียง 3 องศา + เงาซ้อนสองชั้น = อ่านออกทันทีว่าเป็น "หนังสือ" ไม่ใช่ไอคอน */
.ebook-cover {
  border-radius: 4px 9px 9px 4px;
  overflow: hidden;
  transform: rotate(-3deg);
  box-shadow: 0 10px 20px rgba(20, 80, 72, .22), -3px 0 0 rgba(20, 80, 72, .10);
}
.ebook-cover img { display: block; width: 100%; height: auto; }
.ebook-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ebook-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--color-accent-text);
  background: var(--color-accent-light);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.ebook-title { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--color-ink); }
.ebook-sub { color: var(--color-text-muted); line-height: 1.5; }
.ebook-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ebook-price b { font-size: 22px; font-weight: 800; color: var(--color-primary-text); line-height: 1.1; }
.ebook-price s { font-size: 13.5px; color: var(--color-text-muted); }
.ebook-save {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-accent-text);
  background: var(--color-accent-light);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}
.ebook-cta {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-btn-text);
  background: var(--color-btn-bg);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  box-shadow: 0 4px 12px var(--color-primary-shadow);
}
.ebook-note { color: var(--color-text-muted); }
:root[data-theme="dark"] .ebook-card {
  background: linear-gradient(120deg, #1B2A26 0%, #16302A 100%);
}
/* จอแคบมาก (≤359px): ปกลงมาเป็นแถวบน ปุ่มเต็มความกว้าง จะได้ไม่บีบตัวหนังสือ */
@media (max-width: 359px) {
  .ebook-card { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .ebook-cta { width: 100%; text-align: center; }
}

/* บรรทัดชวน Noa+ ใต้ชิปโควตา — เล็ก ไม่แย่งความสนใจจากช่องพิมพ์
   (โผล่เฉพาะตอนโควตาฟรีเหลือบทสุดท้าย · ดูเงื่อนไขใน noa.html) */
.noa-plus-nudge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

/* ---- คู่มือ e-book บนหน้าเติมเครดิต (ยกเครื่อง 23 ส.ค. 2026) ----
   ⚠️ ของเดิมเป็นแถวเทาๆ มีแค่ชื่อกับลูกศร — คนอ่านไม่รู้ด้วยซ้ำว่านี่คือหนังสือ
      แบบใหม่: ปกจริง + ได้อะไร + ราคา + ปุ่ม (ภาษาภาพเดียวกับการ์ดสินค้าในร้าน)
   ⚠️ ปกใช้ไฟล์ในเครื่องเรา ย่อแล้ว ~7KB/ใบ ไม่ใช่ปกต้นฉบับ 2.5MB ที่ร้าน */
.upsell-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.offer {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text-main);
}
.offer-cover {
  flex: none;
  width: 74px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 3px 10px rgba(20, 80, 72, .16);
  align-self: flex-start;
}
.offer-cover img { display: block; width: 100%; height: auto; }
.offer-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.offer-name { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--color-ink); }
.offer-sub { color: var(--color-text-muted); line-height: 1.5; }
.offer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
.offer-price { font-size: 17px; font-weight: 800; color: var(--color-primary-text); margin: 0;
  display: inline-flex; align-items: baseline; gap: 6px; }
.offer-price s { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.offer-body .ebook-tag { align-self: flex-start; }
.offer-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-btn-text);
  background: var(--color-btn-bg);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  white-space: nowrap;
}

/* ---- การ์ดนับถอยหลังวันเกิด (ม็อคอัพ 23 ส.ค. 2026) ----
   โทนอุ่นแบบวันฉลอง ต่างจากการ์ดเตือนวัคซีน (เขียว/แดง) จะได้ไม่สับสนว่าเป็นของที่ต้องรีบทำ */
.bday-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 14px 0 0;
  padding: 13px 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(115deg, #FFF3E9 0%, #FFE7DC 100%);
  border: 1px solid #FBD9C7;
}
.bday-icon { font-size: 26px; line-height: 1; flex: none; }
.bday-text { min-width: 0; }
.bday-text b { display: block; font-size: 15.5px; color: #8A4A1C; line-height: 1.45; }
.bday-text .small { display: block; color: #A0714D; }
:root[data-theme="dark"] .bday-card {
  background: linear-gradient(115deg, #3A2A1E 0%, #43301F 100%);
  border-color: #55402C;
}
:root[data-theme="dark"] .bday-text b { color: #F5C89A; }
:root[data-theme="dark"] .bday-text .small { color: #C9A583; }

/* ---- แถบตัวเลขจริงใต้กริดหมวด (ม็อคอัพ 23 ส.ค. 2026) ----
   3 ช่องเท่ากัน มีเส้นคั่นบางๆ — ตัวเลขเด่น คำอธิบายเล็ก
   มือถือ: ตัวเลขต้องอ่านออกที่ 320px จึงใช้ clamp ไม่ใช่ค่าตายตัว */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 14px;
  padding: 14px 8px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.trust-item { text-align: center; padding: 0 4px; }
.trust-item + .trust-item { border-left: 1px solid var(--color-border); }
.trust-item b {
  display: block;
  font-size: clamp(17px, 5vw, 22px);
  font-weight: 800;
  color: var(--color-primary-text);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.trust-item span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* ---- การ์ดร้านในแถวเลื่อน ---- */
.home-place { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 0; }
.home-place-name { color: var(--color-ink); }

/* ---- การ์ดบริการ 4 ใบ (ตรงตามม็อคอัพ) ----
   พื้นพาสเทล · หัวข้อสีเข้มของโทน · ปุ่มเม็ดยาทึบ · รูปตัวน้องมุมขวาล่างทะลุขอบการ์ด */
.hub-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: var(--space-2);
}
.hub-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 172px;
  /* ⚠️ กันตัวหนังสือชนรูปด้วย padding ขวา (คุมลูกทุกตัวพร้อมกัน)
     ใช้หน่วย px ไม่ใช่ % — รูปกว้างคงที่ 78px แต่ 40% บนจอแคบเหลือแค่ ~70px ตัวหนังสือเลยชนรูป
     78 (รูป) + 12 (ช่องไฟ) − 6 (รูปล้นขอบขวา) = 84px */
  padding: 15px 84px 15px 14px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-main);
}
.hub-svc img {
  position: absolute;
  right: -6px; bottom: -4px;
  width: 78px;
  height: auto;
  max-height: 94px;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(20, 80, 72, .18));
}
.hub-svc-text { position: relative; z-index: 2; }
/* ⚠️ กล่องพวกนี้ตั้ง overflow:hidden ไว้ (กันรูปล้น) ถ้าไม่ยอมให้ตัดคำ
   คำอังกฤษยาวๆ (Restaurants/Recommendations) จะโดน "ตัดหาย" กลางคำ
   ตรวจเจอ 23 ส.ค. 2026 ด้วยสคริปต์วัด scrollWidth ทั้งไทยและอังกฤษ
   กฎ: กล่องไหน overflow:hidden กล่องนั้นต้องอนุญาตให้ตัดคำเสมอ */
.hub-svc-text, .coll-text { overflow-wrap: anywhere; }

/* ⚠️ จอ 320px (iPhone SE) ช่องค้นหาแคบกว่าคำใบ้ที่เขียนไว้ทั้งไทยและอังกฤษ
   ของเดิมตัดกลางคำดื้อๆ — ให้จบด้วย … แทน จะได้รู้ว่ายังมีข้อความต่อ
   (ตรวจด้วยสคริปต์วัดความกว้างคำใบ้จริง 23 ส.ค. 2026) */
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=url] {
  text-overflow: ellipsis;
}
.hub-svc-text b { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; }
.hub-svc-text .small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; }
/* จอแคบ: การ์ด 2 คอลัมน์เหลือกว้างใบละ ~172px
   รูป 78px + padding 84px = เหลือที่ข้อความ 73px ซึ่งไม่พอแม้แต่คำไทย
   → ย่อรูปลงตามจอ ให้ข้อความได้ที่เพิ่มอีก ~14px */
@media (max-width: 419px) {
  .hub-svc { padding-right: 72px; }
  .hub-svc img { width: 66px; }
}

.hub-svc-cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.hub-svc.c-places   { background: #DFF1EB; }
.hub-svc.c-places   .hub-svc-text b { color: #0A5C52; }
.hub-svc.c-places   .hub-svc-cta { background: #0D8477; }
.hub-svc.c-noa      { background: #FFEAE5; }
.hub-svc.c-noa      .hub-svc-text b { color: #A3382A; }
.hub-svc.c-noa      .hub-svc-cta { background: #B23C2F; }
.hub-svc.c-records  { background: #F3EDFC; }
.hub-svc.c-records  .hub-svc-text b { color: #503A7D; }
.hub-svc.c-records  .hub-svc-cta { background: #6B51AB; }
.hub-svc.c-articles { background: #E7F1FB; }
.hub-svc.c-articles .hub-svc-text b { color: #205081; }
.hub-svc.c-articles .hub-svc-cta { background: #35719F; }
:root[data-theme="dark"] .hub-svc.c-places   { background: rgba(47, 191, 169, .14); }
:root[data-theme="dark"] .hub-svc.c-noa      { background: rgba(249, 107, 92, .14); }
:root[data-theme="dark"] .hub-svc.c-records  { background: rgba(176, 150, 235, .13); }
:root[data-theme="dark"] .hub-svc.c-articles { background: rgba(122, 176, 235, .13); }
:root[data-theme="dark"] .hub-svc .hub-svc-text b { color: var(--color-ink); }

/* ---------------------------------------------------------------------------
   หน้าบทความ & เคล็ดลับ
   --------------------------------------------------------------------------- */
.feat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--color-text-main);
  margin-bottom: var(--space-4);
}
.feat-badge {
  align-self: flex-start;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
}
.feat-title { font-size: 20px; font-weight: 800; line-height: var(--leading-head); color: inherit; }
.feat-ex { font-size: 13px; line-height: 1.65; }
.feat-cta {
  align-self: flex-start;
  margin-top: 6px;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px var(--color-primary-shadow);
}

.art-chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1) var(--space-4);
  padding: 4px var(--gutter) 6px;
}
.art-chips::-webkit-scrollbar { display: none; }
.art-chip {
  flex: none;
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-main);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.art-chip span { opacity: .6; font-weight: 600; margin-left: 3px; }
.art-chip.on {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border-color: transparent;
  box-shadow: 0 4px 12px var(--color-primary-shadow);
}
.art-chip.on span { opacity: .85; }

.art-list { display: flex; flex-direction: column; gap: 12px; }
.art-card {
  display: flex;
  gap: 13px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--color-text-main);
}
.art-ic {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 15px;
  display: grid;
  place-items: center;
}
.art-ic .icon { width: 22px; height: 22px; }
.art-body { min-width: 0; flex: 1; }
.art-body .pill { margin-bottom: 5px; }
.art-body b { display: block; font-size: 15px; font-weight: 700; color: var(--color-ink); line-height: 1.5; }
.art-body .small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.6; }
.art-meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.art-meta .icon { width: 13px; height: 13px; }

.art-back {
  display: inline-block;
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-text);
  text-decoration: none;
}
.art-read {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 20px 18px;
  margin-bottom: var(--space-4);
}
.art-read h1 {
  margin: 10px 0 0;
  font-size: 24px;
  font-weight: 800;
  line-height: var(--leading-head);
  color: var(--color-ink);
}
.art-text { margin: 16px 0 0; font-size: 15.5px; line-height: var(--leading-body); }
.art-flags {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: #FDE9EC;
  border: 1px solid #F6CFD6;
}
.art-flags > b { display: flex; align-items: center; gap: 7px; color: #8B2F41; font-size: 14.5px; }
.art-flags .icon { width: 17px; height: 17px; }
.art-flags ul { margin: 8px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.75; color: #7A2C3B; }
:root[data-theme="dark"] .art-flags { background: rgba(240, 140, 160, .14); border-color: #5A3038; }
:root[data-theme="dark"] .art-flags > b,
:root[data-theme="dark"] .art-flags ul { color: #F5AFBE; }
.art-cite {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.art-note { margin: 10px 0 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.65; }


/* ---- คอลเลกชัน — การ์ดพาสเทล 2 คอลัมน์ ----
   ม็อคอัพ: พื้นพาสเทล · หัวข้อสีเข้มของโทนนั้น · ปุ่มเม็ดยาสีทึบ · รูปจริงเต็มด้านขวา
   ⚠️ รูปกินพื้นที่ขวา 46% — ข้อความจึงถูกจำกัดที่ 56% ไม่งั้นตัวหนังสือวิ่งไปใต้รูป */
.coll-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
/* ⚠️ ของเดิมเป็นการ์ดรูปเต็มใบ + ตัวหนังสือขาวทับบนรูป (พื้นเข้ม)
   แบบใหม่เป็นการ์ดพื้นพาสเทล + รูปอยู่ครึ่งขวา จึงต้องล้างของเดิมให้ครบทุกบรรทัด
   ที่ต้องล้างเป็นพิเศษ:
     height: 120px  → ถ้าไม่ล้าง min-height ใหม่ไม่มีผลเลย ตัวหนังสือจะล้นออกนอกการ์ด
     img inset: 0   → มันตั้ง left:0 ไว้ด้วย รูปเลยไปเกาะซ้ายแทนที่จะเป็นขวา
     .coll-text absolute + พื้นดำไล่เฉด → ต้องกลับเป็น static และไม่มีพื้น */
.coll-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 172px;
  /* ⚠️ กันข้อความชนรูปด้วย "padding ขวา" ไม่ใช่ max-width ที่ตัวข้อความ
     เพราะ padding คุมลูกทุกตัวพร้อมกัน (หัวข้อ · คำอธิบาย · ปุ่ม) แก้ที่เดียวจบ */
  padding: 15px 42% 15px 14px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-main);
}
.coll-card img {
  position: absolute;
  inset: auto;
  right: 0; top: 0; left: auto; bottom: auto;
  width: 40%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  /* ไล่จางบางๆ ที่ขอบซ้ายของรูป — ให้รูปกลืนกับพื้นพาสเทล ไม่ใช่สองชิ้นแปะกัน */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}
.coll-text {
  position: static;
  inset: auto;
  padding: 0;
  background: none;
  display: block;
  z-index: 2;
}
.coll-text b { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; }
.coll-text .small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
  /* ⚠️ ของเดิมบังคับ 1 บรรทัด (nowrap) เพราะตัวหนังสืออยู่บนรูป
     แบบใหม่มีที่ว่างของตัวเอง ปล่อยให้ตัดบรรทัดได้ 2 บรรทัดสวยกว่าตัดคำทิ้ง */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.coll-cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
/* สีประจำคอลเลกชัน — คีย์ตรงกับ domain/place_access.collections() */
.coll-card.c-cafe3 { background: #FFEAE5; }
.coll-card.c-cafe3 .coll-text b { color: #A3382A; }
.coll-card.c-cafe3 .coll-cta { background: #B23C2F; }
.coll-card.c-park4 { background: #EAF4E7; }
.coll-card.c-park4 .coll-text b { color: #33632F; }
.coll-card.c-park4 .coll-cta { background: #498340; }
.coll-card.c-food { background: #F3EDFC; }
.coll-card.c-food .coll-text b { color: #503A7D; }
.coll-card.c-food .coll-cta { background: #6B51AB; }
.coll-card.c-big { background: #E7F1FB; }
.coll-card.c-big .coll-text b { color: #205081; }
.coll-card.c-big .coll-cta { background: #35719F; }
:root[data-theme="dark"] .coll-card.c-cafe3 { background: rgba(249, 107, 92, .14); }
:root[data-theme="dark"] .coll-card.c-park4 { background: rgba(126, 200, 116, .13); }
:root[data-theme="dark"] .coll-card.c-food  { background: rgba(176, 150, 235, .13); }
:root[data-theme="dark"] .coll-card.c-big   { background: rgba(122, 176, 235, .13); }
:root[data-theme="dark"] .coll-card .coll-text b { color: var(--color-ink); }

/* ---- แบนเนอร์ชวน ---- */
.cta-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: var(--space-6);
  padding: 15px 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(115deg, #EDF7F3 0%, #DAEEE7 100%);
  border: 1px solid #C9E4DB;
  text-decoration: none;
  color: var(--color-text-main);
}
.cta-icon {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 15px;
  background: var(--color-surface);
  display: grid;
  place-items: center;
  font-size: 23px;
  box-shadow: var(--shadow-sm);
}
.cta-text { min-width: 0; flex: 1; }
.cta-text b { display: block; font-size: 15px; color: var(--color-ink); line-height: 1.5; }
.cta-text .small { display: block; font-size: 12.5px; line-height: 1.55; }
.cta-btn {
  flex: none;
  align-self: center;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--color-primary-shadow);
}
:root[data-theme="dark"] .cta-banner {
  background: linear-gradient(115deg, #16302A 0%, #1B3B33 100%);
  border-color: #27473F;
}
/* จอแคบ (<=360px): ปุ่มกับข้อความชนกัน → ดันปุ่มลงบรรทัดใหม่เต็มความกว้าง */
@media (max-width: 360px) {
  .cta-banner { flex-wrap: wrap; }
  .cta-btn { width: 100%; text-align: center; margin-top: 4px; }
}

/* ---- FAQ ---- */
.faq-list {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--color-border); background: transparent; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { padding: 15px 17px; font-weight: 600; color: var(--color-ink); }
.faq-item p { padding: 0 17px 15px; margin: 0; }

/* ---- ทางเข้าธุรกิจ ---- */
.biz-entry {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   5. ฝั่งธุรกิจ + แอดมิน
   ทั้งสองฝั่งใช้ .card/.btn/.chip/หัวข้อ ร่วมกับฝั่งผู้ใช้อยู่แล้ว
   จึงได้หน้าตาใหม่ตาม token ทันที ส่วนนี้เก็บเฉพาะของที่ต้องต่างจริงๆ
   --------------------------------------------------------------------------- */

/* แถวเมนูฝั่งธุรกิจ — ทรงเดียวกับแถวฝั่งผู้ใช้ (ไอคอนในกล่องมนพาสเทล) */
.biz-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  font-weight: 600;
  color: var(--color-text-main);
  text-decoration: none;
}
.biz-row > .icon {
  width: 40px; height: 40px;
  flex: none;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 13px;
  background: var(--color-primary-light);
  color: var(--color-primary-text);
  overflow: visible;
}
.biz-row > span:not(.me-row-arrow):not(.lock-tag) { flex: 1; min-width: 0; }
.biz-row.is-locked > .icon { background: var(--color-btn-alt-bg); color: var(--color-text-muted); }
.lock-tag {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #FFF3DC;
  color: #6E5013;
}
:root[data-theme="dark"] .lock-tag { background: rgba(230, 190, 100, .16); color: #EDD293; }

/* ป้าย "for Business" ข้างชื่อแบรนด์ */
.biz-tag {
  display: inline-block;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-left: 7px;
  vertical-align: middle;
  white-space: nowrap;
}

/* แผงตัวเลขสรุป (ออเดอร์วันนี้ / นัดหมาย / รายได้) */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin: var(--space-4) 0;
}
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 15px;
}
.stat-tile-icon {
  width: 42px; height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
}
.stat-tile-icon .icon { width: 20px; height: 20px; }
.stat-tile b {
  display: block;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-ink);
  letter-spacing: -.02em;
}
.stat-tile span { font-size: 12.5px; color: var(--color-text-muted); font-weight: 500; }
.stat-delta { font-size: 12.5px; font-weight: 700; margin-top: 4px; display: block; }
.stat-delta.up { color: #1F6B3E; }
.stat-delta.down { color: #A03131; }

/* ปุ่มลัด 4 ช่องของหน้าธุรกิจ */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.quick-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 14px;
  text-decoration: none;
  color: var(--color-text-main);
}
.quick-tile .ic {
  width: 42px; height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
}
.quick-tile .ic .icon { width: 20px; height: 20px; }
.quick-tile b { display: block; font-size: 14.5px; color: var(--color-ink); line-height: 1.45; }

/* แถบเตือนของในคลัง — โผล่เฉพาะตอนมีของต้องจัดการจริง */
.stock-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--space-4) 0;
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  background: #FFF3DC;
  border: 1px solid #F2DFB4;
  text-decoration: none;
  color: var(--color-text-main);
}
.stock-alert-ic {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 14px;
  background: #F7E3B8;
  color: #6E5013;
  display: grid;
  place-items: center;
}
.stock-alert-ic .icon { width: 20px; height: 20px; }
.stock-alert b { display: block; font-size: 14.5px; color: var(--color-ink); line-height: 1.5; }
:root[data-theme="dark"] .stock-alert {
  background: rgba(230, 190, 100, .13);
  border-color: #4A3D22;
}
:root[data-theme="dark"] .stock-alert-ic { background: rgba(230, 190, 100, .2); color: #EDD293; }

/* รายการนัดหมายบนแดชบอร์ด
   ⚠️ ต้องล้างพื้น/มุมมนของลิงก์ในการ์ดฝั่งธุรกิจก่อน ไม่งั้นแต่ละแถวกลายเป็นกล่องชมพูซ้อนในกล่อง */
.appt-rows .data-row {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 13px 0;
}
.appt-rows {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 4px 16px;
  margin-bottom: var(--space-4);
}

/* แถวรายการ (นัดหมาย / ออเดอร์) */
.data-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text-main);
}
.data-row:last-child { border-bottom: 0; }
.data-row-time {
  flex: none;
  width: 52px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary-text);
}
.data-row-main { flex: 1; min-width: 0; }
.data-row-main b { display: block; font-size: 14.5px; color: var(--color-ink); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   จอกว้าง — ม็อคอัพเป็นดีไซน์มือถือ บนจอใหญ่จึงคุมความกว้างไว้ไม่ให้ยืดเสียทรง
   (ฝั่งธุรกิจ/แอดมินเป็นตาราง ต้องกว้างกว่า จึงคุมเฉพาะ .page)
   --------------------------------------------------------------------------- */
@media (min-width: 760px) {
  :root { --gutter: 24px; }
  .hub-hero { min-height: 250px; }
  .hub-hero-pet { height: 234px; }
  .cat-grid { grid-template-columns: repeat(8, 1fr); }
}


/* ---------------------------------------------------------------------------
   หน้าแอดมิน (ย้ายมาจาก <style> ที่เคยฝังใน templates/admin_nav.html)
   ⚠️ ของเดิมใช้สี hardcode + var(--brand) ที่ไม่มีอยู่จริง จึงไม่เปลี่ยนตามธีม
      และตกดีไซน์ใหม่ไปเงียบๆ — ตอนนี้ใช้ token ชุดเดียวกับทั้งแอป
   --------------------------------------------------------------------------- */
.admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1) var(--space-5);
  padding: 4px var(--gutter) 8px;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs a {
  flex: none;
  white-space: nowrap;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-main);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}
.admin-tabs a.on {
  background: var(--color-btn-bg);
  border-color: transparent;
  color: var(--color-btn-text);
  font-weight: 700;
  box-shadow: 0 4px 12px var(--color-primary-shadow);
}

/* แผงตัวเลขภาพรวม — ทรงเดียวกับไทล์ฝั่งธุรกิจ */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 11px;
  margin-bottom: var(--space-5);
}
.admin-stats .stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.admin-stats .stat b {
  display: block;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-ink);
  letter-spacing: -.02em;
}
.admin-stats .stat span { font-size: 12px; color: var(--color-text-muted); font-weight: 500; }

/* ตารางข้อมูล — เส้นอุ่นเข้ากับพื้นครีม (ของเดิมเป็นเทากลางๆ ดูเย็นและตัดกับพื้น) */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th, .admin-table td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.admin-table th { font-weight: 700; color: var(--color-text-muted); font-size: 12.5px; }
.admin-table tr:last-child td { border-bottom: 0; }
.tag-red { color: #A03131; font-weight: 700; }
.tag-yellow { color: #8A6413; font-weight: 700; }
.tag-green { color: #1F6B3E; font-weight: 700; }
:root[data-theme="dark"] .tag-red { color: #F09B9B; }
:root[data-theme="dark"] .tag-yellow { color: #EDD293; }
:root[data-theme="dark"] .tag-green { color: #8FD3A8; }

.bigcode {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 12px 20px;
  border: 2px dashed var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-lg);
  user-select: all;
}

/* หัวหน้าแอดมิน — หน้าพวกนี้ไม่ extends base.html จึงไม่มีแถบหัวของแอป */
.admin-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 4px 0 var(--space-5);
}
.admin-head-ic {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 15px;
  background: var(--color-primary-gradient);
  color: #fff;
  display: grid;
  place-items: center;
}
.admin-head-ic .icon { width: 22px; height: 22px; }
.admin-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: var(--leading-head);
  color: var(--color-ink);
}
.admin-head .small { display: block; margin-top: 1px; }


/* ---------------------------------------------------------------------------
   ปุ่มไอคอนล้วน (.icon-btn) — ทรงมาตรฐานเดียวของทั้งแอป
   ที่มา: บุ๋ยแจ้ง 16 ส.ค. 2026 "ปุ่มคำสั่งบางปุ่มไม่สมมาตร เช่นปุ่มย้อนหลัง ถัดไป"
   ตรวจด้วยสคริปต์วัดจากหน้าจริงแล้วพบ 2 แบบที่พัง:
     ก) ปุ่มย้อนกลับหน้าร้านใช้อักขระ "‹" → อักขระมีความสูงบรรทัดของตัวเอง
        ปุ่มเลยกลายเป็นวงรี 40x44 และลูกศรไม่อยู่กึ่งกลาง
     ข) ปุ่มวันก่อนหน้า/ถัดไปฝั่งธุรกิจใช้ .btn (เม็ดยาเต็มความกว้าง) กับอักขระตัวเดียว
        ได้ปุ่มสองอันคนละขนาด
   ⚠️ ปุ่มที่มีแต่ไอคอน **ต้องใช้คลาสนี้เท่านั้น** และไอคอนต้องเป็น SVG ไม่ใช่อักขระ
      (เทสต์ล็อกไว้ที่ tests/test_css_contrast.py::test_icon_only_buttons_use_svg)
   --------------------------------------------------------------------------- */
.icon-btn {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  /* ⚠️ ต้องเขียน justify-content + align-items ตรงๆ ห้ามใช้ place-items อย่างเดียว
     place-items ตั้งแค่ align-items กับ justify-items ซึ่ง justify-items ไม่มีผลใน flex
     ของเดิมเขียน inline-grid + place-items แต่มีกฎอื่นทับ display เป็น flex
     ผลคือไอคอนไปกองซ้าย เยื้องจากกลางวง 11px (วัดเจอ 16 ส.ค. 2026) */
  justify-content: center;
  align-items: center;
  place-items: center;
  /* ⚠️ line-height: 0 คือหัวใจ — กันความสูงบรรทัดของ font ดันปุ่มให้สูงกว่ากว้าง */
  line-height: 0;
  font-size: 0;
  background: var(--color-surface);
  color: var(--color-text-main);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.icon-btn > svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:active { transform: scale(.94); }
.icon-btn.on {
  background: var(--color-primary-gradient);
  color: #fff;
  box-shadow: 0 3px 8px var(--color-primary-shadow);
}

/* ปุ่มย้อนกลับที่ลอยบนรูปหน้าร้าน — พื้นโปร่งเบลอให้เห็นรูปข้างหลัง */
.icon-btn.place-back {
  position: absolute;
  left: 12px; top: 12px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
  font-size: 0;
}

/* แถวเลือกวันฝั่งธุรกิจ — ปุ่มสองข้างขนาดเท่ากัน ป้ายวันอยู่กลาง */
.day-nav { display: flex; align-items: center; gap: 12px; }
.day-nav .day-label { flex: 1; text-align: center; }

/* พื้นที่แตะขั้นต่ำ 44px (มาตรฐาน iOS) — ของเดิมบางปุ่มเหลือ 36-37px กดพลาดง่าย */
.view-toggle button { min-height: 44px; }
.use-geo { min-height: 44px; }


/* ---- ป้ายบอกตัวกรองที่ติดมากับลิงก์คอลเลกชัน ----
   ⚠️ ตัวกรองที่มองไม่เห็น = ผู้ใช้งงว่า "กดแล้วไม่ขึ้นอะไรเลย" (บุ๋ยเจอ 16 ส.ค. 2026)
      ทุกตัวกรองที่มีผลต่อผลลัพธ์ ต้องมองเห็นและกดล้างได้ */
.filter-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px var(--color-primary-shadow);
  width: max-content;
  max-width: 100%;
}
.filter-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-tag button {
  width: 26px; height: 26px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  color: #fff;
  display: grid;
  place-items: center;
  line-height: 0;
  cursor: pointer;
}
.filter-tag button svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}


/* ---- หัวฝั่งธุรกิจบนจอแคบ ----
   ⚠️ app.css มีกฎเก่าจากตอนหัวมีของ 4 ชิ้น (แบรนด์/ภาษา/โหมด/ธีม):
        @media (max-width:430px) { .biz-brand span { display: none } }
      ซึ่งซ่อน "ทุก span" ในแบรนด์ = ซ่อนทั้งชื่อร้านและคำบรรยาย เหลือแค่โลโก้เปล่า
      ตอนนี้หัวเหลือปุ่มเดียว (ตั้งค่า) ที่ว่างเหลือเฟือ กฎนั้นจึงไม่จำเป็นแล้ว
   ⚠️ ห้ามซ่อนชื่อแบรนด์อีก — คนที่เปิดมาต้องรู้ว่าอยู่เว็บอะไร */
@media (max-width: 430px) {
  .biz-brand span { display: revert; }
  .biz-brand .brand-text { display: block; }
  .biz-brand { font-size: unset; }
  .biz-brand img { width: 40px; height: 40px; }
}
/* ชื่อแบรนด์ฝั่งธุรกิจต้องตัดด้วย ... ไม่ใช่หายไปทั้งบรรทัด ถ้าที่ไม่พอจริง */
.biz-brand .brand-name,
.biz-brand .brand-sub { overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------------------
   จานสีพาสเทลรายหมวด — ต้องอยู่ "ท้ายสุดของไฟล์"
   เหตุผล: คลาสพวกนี้ทาทับพื้น/สีของ .cat-tile-icon · .stat-tile-icon · .quick-tile .ic
   ซึ่งเป็นเซเลกเตอร์ระดับคลาสเดียวเหมือนกัน CSS จึงตัดสินด้วย "ใครมาทีหลัง"
   ⚠️ ถ้าย้ายบล็อกนี้ขึ้นไปข้างบน ไอคอนหมวดจะกลับไปเป็นสีแบรนด์เหมือนกันหมดทันที
   ⚠️ ทุกคู่สีผ่านเกณฑ์คอนทราสต์ AA (≥4.5:1) บนพื้นของตัวเอง
   --------------------------------------------------------------------------- */
.t-cafe   { background: #FFF0E2; color: #8A4A1C; }
.t-food   { background: #FFEDE6; color: #9B3D26; }
.t-park   { background: #E8F4E6; color: #33632F; }
.t-hosp   { background: #E7F1FB; color: #205081; }
.t-clinic { background: #FDE9EC; color: #8B2F41; }
.t-groom  { background: #F1EBFB; color: #503A7D; }
.t-hotel  { background: #FFF3DC; color: #6E5013; }
.t-stay   { background: #E9F3F2; color: #275A52; }
:root[data-theme="dark"] .t-cafe   { background: rgba(255, 176, 106, .16); color: #FFC48F; }
:root[data-theme="dark"] .t-food   { background: rgba(255, 138, 110, .16); color: #FFAE95; }
:root[data-theme="dark"] .t-park   { background: rgba(126, 200, 116, .16); color: #A6DC9C; }
:root[data-theme="dark"] .t-hosp   { background: rgba(122, 176, 235, .16); color: #A8CCF2; }
:root[data-theme="dark"] .t-clinic { background: rgba(240, 140, 160, .16); color: #F5AFBE; }
:root[data-theme="dark"] .t-groom  { background: rgba(176, 150, 235, .16); color: #C9B6F2; }
:root[data-theme="dark"] .t-hotel  { background: rgba(230, 190, 100, .16); color: #EDD293; }
:root[data-theme="dark"] .t-stay   { background: rgba(120, 195, 185, .16); color: #A2DCD4; }