/* =====================================================================
   เช็คประกันชิ้นส่วนโดรน — FLY TECH
   ลำดับการใช้งาน: ค้นหาอะไหล่ที่เสีย -> แตะชิ้นส่วน -> ใส่วันเริ่ม (ถ้ายังไม่มี) -> คำตอบ + เช็กลิสต์
   หน้าเดียวคอลัมน์เดียว ใช้ได้ทั้งมือถือและคอม · ธีมสว่างธีมเดียว
   ===================================================================== */

/* ================= tokens ================= */
:root {
  --primary: #00A987;
  --primary-dark: #007E66;
  --primary-soft: #DFF7F1;
  --primary-glow: rgba(0, 169, 135, .35);
  --cta: linear-gradient(135deg, #00D7AE, #00A987);
  --cta-ink: #02100D;
  --night: #050b0a;
  --night-2: #0a1412;
  --night-line: rgba(139, 230, 214, .14);
  --brand-glow: 0 4px 20px rgba(0, 169, 135, .4);

  --bg: #f5f8f7;
  --paper: #ffffff;
  --paper-2: #f4f7f6;
  --ink: #1f2933;
  --ink-2: #5c6670;
  --ink-3: #8a949c;
  --line: #e5e7eb;
  --lime: #8BE6D6;
  --brand: #00A987;
  --brand-ink: #00785F;
  --brand-soft: var(--primary-soft);

  --ok: #157a46;   --ok-soft: #e0f2e7;
  --warn: #b26a00; --warn-soft: #fbefd6;
  --bad: #be3a2a;  --bad-soft: #f9e3df;
  --none: #6e7570; --none-soft: #ebebe6;

  --radius: 20px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 18px 40px -24px rgba(0, 0, 0, .18);
  --bar-top: 12px;
  --bar-h: 60px;
  --find-h: 84px; /* ความสูงแถบค้นหาที่ติดบนจอ */
  --font: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* ================= base ================= */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* เลื่อนไปที่รายการแล้วไม่ให้ถูกแถบบน + ช่องค้นหาบัง */
  scroll-padding-top: calc(var(--bar-top) + var(--bar-h) + var(--find-h) + 8px);
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); line-height: 1.5; font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
a { color: var(--brand); }
h1, h2, h3 { margin: 0; font-family: var(--font); line-height: 1.25; font-weight: 800; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ================= แถบบน ================= */
.bar {
  position: sticky; top: var(--bar-top); z-index: 30;
  max-width: 820px; margin: var(--bar-top) auto 0; width: calc(100% - 24px);
  background: rgba(10, 20, 18, .94); color: #f1f5f9;
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--night-line); border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
.bar-inner { height: var(--bar-h); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 14px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo img { display: block; width: 60px; height: auto; }
.logo strong { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.1; color: #fff; }
.logo span { display: block; font-size: .72rem; font-weight: 600; color: var(--primary); line-height: 1.2; }
.models {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--night-line);
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.models button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .88rem; white-space: nowrap; color: #cbd5e1; }
.models button.on { background: var(--cta); color: var(--cta-ink); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 7px 14px; font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.bar .icon-btn { background: transparent; border-color: rgba(255, 255, 255, .22); color: #e2e8f0; }
.bar .icon-btn:hover { border-color: var(--primary); color: #fff; }
.icon-btn .ico { width: 18px; height: 18px; }
.icon-btn.round { padding: 8px; min-width: 44px; }

/* ================= หน้าเดียว คอลัมน์เดียว ================= */
.app { max-width: 820px; margin: 0 auto; padding: 0 16px 40px; display: grid; gap: 12px; }

/* 1) ค้นหา: ติดใต้แถบบนตลอด */
.find {
  position: sticky; top: calc(var(--bar-top) + var(--bar-h)); z-index: 20;
  padding: 12px 0 8px; background: linear-gradient(var(--bg) 85%, transparent);
}

/* ช่องค้นหาใหญ่ ชัด แบบหน้า Google */
.search {
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  background: var(--paper); border: 2px solid #d6dcda; border-radius: 999px;
  padding: 0 8px 0 22px; color: var(--brand-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 10px 28px -12px rgba(0, 0, 0, .25);
  transition: box-shadow .15s, border-color .15s;
}
.search:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .1), 0 12px 32px -12px rgba(0, 0, 0, .3); }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px var(--primary-soft), 0 12px 32px -12px rgba(0, 0, 0, .3); }
.search > .ico { width: 26px; height: 26px; stroke-width: 2.2; }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 600 1.2rem var(--font); color: var(--ink); padding: 14px 0;
}
.search input::placeholder { color: var(--ink-3); font-weight: 500; }
.search input::-webkit-search-cancel-button { display: none; }
.clear { flex: none; border: 0; background: var(--paper-2); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink-2); }
.clear .ico { width: 18px; height: 18px; stroke-width: 2.4; }

/* 2) ปุ่มหมวด: มือถือ = ตาราง 3 ช่อง · คอม = แถวที่ขึ้นบรรทัดใหม่ได้ */
.groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 6px 14px 6px 12px; font-size: .88rem; color: var(--ink-2);
}
.chip span { white-space: nowrap; font-weight: 600; }
.chip .ico { width: 18px; height: 18px; }
.chip em { font-style: normal; font-size: .74rem; color: var(--ink-3); }
.chip.on { background: var(--cta); border-color: transparent; color: var(--cta-ink); font-weight: 700; box-shadow: var(--brand-glow); }
.chip.on em { color: var(--cta-ink); opacity: .7; }

/* รายการชิ้นส่วน */
.list { display: grid; gap: 14px; }
.block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.block header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.b-ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.block h3 { font-size: 1rem; }
.block header small { color: var(--ink-3); font-size: .8rem; }
.b-count { margin-left: auto; font-weight: 700; color: var(--ink-3); font-size: .9rem; }
.block ul { list-style: none; margin: 0; padding: 0; }
.block li + li { border-top: 1px solid var(--line); }
.row {
  position: relative; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 14px;
  padding: 14px 16px 16px 16px; border: 0; background: transparent; text-align: left;
  border-left: 4px solid transparent;
}
.row:hover { background: var(--paper-2); }
.r-main { min-width: 0; }
.r-th { display: block; font-weight: 700; font-size: .98rem; }
.r-en { display: block; color: var(--ink-3); font-size: .84rem; }
.r-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag { font-size: .8rem; padding: 1px 8px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); }
.tag.tier { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); font-weight: 600; }
.r-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.r-num { font-weight: 800; font-size: 1.5rem; line-height: 1; }
.r-word { font-weight: 700; font-size: .95rem; }
.r-unit { font-size: .8rem; color: var(--ink-3); max-width: 150px; }
.r-go { width: 16px; height: 16px; color: var(--ink-3); }
.r-meter { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.r-meter i { display: block; height: 100%; border-radius: 3px; background: currentColor; }
.st-active { border-left-color: var(--ok); }
.st-active .r-num, .st-active .r-meter { color: var(--ok); }
.st-expiring { border-left-color: var(--warn); }
.st-expiring .r-num, .st-expiring .r-meter { color: var(--warn); }
.st-expired { border-left-color: var(--bad); }
.st-expired .r-word, .st-expired .r-meter { color: var(--bad); }
.st-expired .r-th { color: var(--ink-2); }
.st-none { border-left-color: var(--none); }
.st-none .r-word { color: var(--none); }
.st-info .r-unit { color: var(--brand-ink); font-weight: 600; }

/* ไม่พบ / หมายถึง…ใช่ไหม */
.empty {
  display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--ink-3);
  background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty .ico { width: 32px; height: 32px; }
.empty p { margin: 0; color: var(--ink-2); }
.empty.did { justify-items: stretch; text-align: left; padding: 18px 16px; border-style: solid; }
.empty.did p b { color: var(--ink); }
.did-list { display: grid; gap: 8px; }
.did-list button {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper);
}
.did-list button:hover { border-color: var(--brand); }
.did-list .ico { color: var(--brand-ink); }
.did-list span { flex: 1; min-width: 0; }
.did-list b { display: block; color: var(--ink); }
.did-list small { display: block; color: var(--ink-3); font-size: .82rem; }
.text-btn {
  border: 0; background: none; min-height: 44px; padding: 6px 0;
  color: var(--brand-ink); font-weight: 700; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px;
}
.empty.did .text-btn { justify-self: center; }
.foot { margin: 8px 4px 0; font-size: .8rem; color: var(--ink-3); text-align: center; }

/* ================= หน้ารายละเอียดชิ้นส่วน ================= */
.sheet {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 48px);
}
.sheet::backdrop { background: rgba(6, 22, 24, .45); backdrop-filter: blur(3px); }
.sheet[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.sheet-inner {
  background: var(--paper); border-radius: 22px; padding: 18px 22px 22px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); max-height: calc(100vh - 48px); overflow-y: auto;
  transition: transform .15s ease-out;
}
.grab { display: none; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -6px auto 10px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-group { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-3); }
.sheet-group .ico { width: 16px; height: 16px; color: var(--brand); }
.sheet h2 { font-size: 1.4rem; }
.sheet-en { margin: 2px 0 12px; color: var(--ink-3); font-size: .88rem; }

/* วันเริ่มรับประกัน: ช่องใหญ่ ชัด แบบช่องค้นหา (ถามในหน้าชิ้นส่วน) */
.sheet-date { display: grid; gap: 10px; margin: 4px 0 14px; }
.sheet-date > b { font-size: 1.12rem; font-weight: 800; color: var(--ink); }
.sheet-date small { font-size: .84rem; color: var(--ink-3); }
.date-box {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 20px;
  background: var(--paper); border: 2px solid #d6dcda; border-radius: 999px; color: var(--brand-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 10px 28px -12px rgba(0, 0, 0, .25);
  transition: box-shadow .15s, border-color .15s;
}
.date-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px var(--primary-soft), 0 12px 32px -12px rgba(0, 0, 0, .3); }
.date-box > .ico { width: 26px; height: 26px; stroke-width: 2.2; }
.date-box input {
  flex: 1; min-width: 0; min-height: 60px; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: 700 1.25rem var(--font); text-align: left; -webkit-appearance: none; appearance: none; color-scheme: light; cursor: pointer;
}
.date-box input::-webkit-date-and-time-value { text-align: left; }
.date-box input::-webkit-calendar-picker-indicator { width: 26px; height: 26px; cursor: pointer; opacity: .75; }
/* ยังไม่ใส่วันที่: ขอบสีเขียวเด่น ชวนให้แตะ */
.sheet-date.need .date-box { border-color: var(--brand); }

/* การ์ดคำตอบ */
.verdict { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; }
.verdict > .ico { width: 40px; height: 40px; padding: 8px; border-radius: 50%; stroke: #fff; stroke-width: 2.6; flex: none; }
.verdict > div { flex: 1; min-width: 0; }
.verdict strong { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.verdict span { display: block; font-size: .88rem; color: var(--ink-2); margin-top: 2px; }
.v-yes { background: var(--ok-soft); } .v-yes strong { color: var(--ok); } .v-yes > .ico { background: var(--ok); }
.v-no { background: var(--bad-soft); } .v-no strong { color: var(--bad); } .v-no > .ico { background: var(--bad); }
.v-soon { background: var(--warn-soft); } .v-soon strong { color: var(--warn); } .v-soon > .ico { background: var(--warn); }
.v-wait { background: var(--warn-soft); } .v-wait strong { color: var(--warn); } .v-wait > .ico { background: var(--warn); }

/* รอบชาร์จ/ชั่วโมง (เฉพาะแบต/เครื่องปั่นไฟ) */
.usage { display: block; margin-top: 12px; }
.usage span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.usage small { font-weight: 400; color: var(--ink-3); }
.usage input {
  width: 100%; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px;
  font: 600 1.05rem var(--font); color: var(--ink); background: var(--paper);
}
.usage input:focus { outline: 0; border-color: var(--brand); }

/* กล่องระยะประกัน: เริ่ม -> เหลือ -> สิ้นสุด */
.period { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.p-head { margin: 0; font-size: .9rem; color: var(--ink-2); }
.p-head b { color: var(--ink); font-size: 1.05rem; }
.p-bar { height: 8px; border-radius: 8px; background: var(--line); margin: 12px 0 10px; overflow: hidden; }
.p-bar i { display: block; height: 100%; border-radius: 8px; background: var(--ok); }
.period.st-expiring .p-bar i { background: var(--warn); }
.period.st-expired .p-bar i { background: var(--bad); }
.p-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.p-dates small { display: block; font-size: .8rem; color: var(--ink-3); }
.p-dates span { font-weight: 700; font-size: .92rem; }
.p-end { text-align: right; }
.p-mid { text-align: center; }
.p-mid b { display: block; font-size: 1.7rem; line-height: 1; color: var(--ok); }
.period.st-expiring .p-mid b { color: var(--warn); }
.p-mid b.p-word { font-size: 1.1rem; color: var(--bad); }
.p-none { margin: 8px 0 0; font-size: .86rem; color: var(--ink-2); }

/* เงื่อนไขที่ไม่รับประกัน: ข้อความอ้างอิง ไม่ใช่เช็กลิสต์ */
.conds { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--paper-2); }
.conds h3 { font-size: .95rem; margin-bottom: 6px; }
.conds h3 small { font-weight: 500; font-size: .8rem; color: var(--ink-3); margin-left: 4px; }
.conds ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.conds li b { color: var(--ink); font-weight: 700; }
.conds-full { margin-top: 6px; font-size: .84rem; color: var(--ink-2); }
.conds-full summary { cursor: pointer; color: var(--brand-ink); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.conds-full ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.note { margin: 12px 0 0; font-size: .84rem; color: var(--ink-2); padding-left: 12px; border-left: 3px solid var(--lime); }
.contact { margin: 0; padding: 14px 0 0; font-size: .82rem; color: var(--ink-3); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 50; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-size: .9rem;
  opacity: 0; pointer-events: none; transition: .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= มือถือ ================= */
@media (max-width: 899px) {
  :root { --bar-top: calc(8px + env(safe-area-inset-top)); --bar-h: 56px; }
  .bar { width: calc(100% - 16px); }
  .app { padding: 0 12px 32px; }
  .sheet { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 90vh; max-height: 90dvh; }
  .sheet-inner { border-radius: 22px 22px 0 0; padding: 16px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 90vh; max-height: 90dvh; }
  .sheet[open] { animation: rise .22s ease-out; }
  .grab { display: block; }
  @keyframes rise { from { transform: translateY(40%); opacity: .4; } }
}
@media (max-width: 560px) {
  .bar-inner { padding: 0 8px 0 12px; gap: 10px; }
  .logo img { width: 52px; }
  .logo div { display: none; }
  .icon-btn span { display: none; }
  .icon-btn { padding: 8px; min-width: 44px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 13px 14px 16px; }
  .r-go { display: none; }
  .r-meter { left: 14px; right: 14px; }
  .block header { padding: 12px 14px; }
}

/* ================= พิมพ์ (คอม) ================= */
@media print {
  .bar, .find, .find-title, .groups, .r-go, .sheet, .toast, .foot { display: none !important; }
  body { background: #fff; color: #000; }
  .app { display: block; padding: 0; }
  .block { box-shadow: none; break-inside: avoid; margin-bottom: 12px; }
  .row { break-inside: avoid; }
}

/* =====================================================================
   ธีมหน้าแรก v23 — ส่วนหัวสีเข้มแบบแบรนด์ (kapcrop.co.th) + ช่องค้นหาเด่นสุด
   ลำดับความเด่น: ช่องค้นหา > ชื่อรุ่น/คำถาม > ปุ่มหมวด > ข้อความท้าย
   ===================================================================== */

/* กำลังค้นหา: ผลค้นหาขึ้นใต้ช่องค้นหาทันที */
.searching .groups, .searching .groups-label { display: none; }

/* ---------- ส่วนหัวสีเข้ม (แถบบนลอยอยู่บนส่วนหัว) ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  margin-top: calc(-1 * (var(--bar-top) + var(--bar-h) + 2px)); /* +2px = ขอบบน-ล่างของแถบบน */
  padding: calc(var(--bar-top) + var(--bar-h) + 22px) 16px 64px;
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(0, 201, 161, .30) 0%, transparent 60%),
    radial-gradient(55% 80% at 5% 100%, rgba(0, 169, 135, .20) 0%, transparent 70%),
    linear-gradient(180deg, #071311 0%, var(--night) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(139, 230, 214, .05) 0 1px, transparent 1px 64px);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; }
.hero-kicker {
  display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 169, 135, .18); border: 1px solid var(--night-line);
  color: var(--lime); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.find-title { margin: 14px 0 0; font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.005em; }

/* ---------- หน้าเลือกรุ่น (บนส่วนหัวสีเข้ม) ---------- */
.pick { margin: 6px 0 0; }
.pick-title { margin: 0 0 16px; font-size: 1.6rem; font-weight: 800; color: #fff; }
.mp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mp {
  display: grid; justify-items: center; gap: 8px; padding: 16px 10px 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88));
  color: var(--ink); font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6);
  transition: transform .15s, box-shadow .15s;
}
.mp img { width: 100%; max-width: 180px; height: auto; aspect-ratio: 300 / 110; object-fit: contain; }
.mp:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--primary), 0 16px 34px -14px rgba(0, 0, 0, .6); }
.mp:active { transform: scale(.98); }
body:not(.no-model) .pick { display: none; }
.no-model .hero { padding-bottom: 40px; }
.no-model .find-title, .no-model .app .find, .no-model .groups-label, .no-model .groups, .no-model .list, .no-model .th-note { display: none !important; }

/* ---------- แถบรุ่นที่เลือก (บนส่วนหัวสีเข้ม) ---------- */
.model-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.model-bar .back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 8px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: #e2e8f0; font-weight: 700; font-size: .9rem;
}
.model-bar .back:hover { border-color: var(--primary); color: #fff; }
.model-bar .back .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.model-bar b {
  font-size: .95rem; font-weight: 800; color: var(--cta-ink); background: var(--cta);
  padding: 9px 16px; border-radius: 999px; white-space: nowrap; box-shadow: var(--brand-glow);
}

/* ---------- ช่องค้นหา: เด่นสุด วางคร่อมขอบล่างส่วนหัว ---------- */
.app { gap: 14px; }
.find-sentinel { display: block; height: 0; }
.find {
  margin-top: -44px; padding: 0; background: none;
  transition: padding .15s, background-color .15s;
}
/* เลื่อนลงจนช่องติดบนจอ -> มีพื้นหลังรองไม่ให้รายการด้านหลังโผล่ */
.find.stuck { padding: 10px 0 8px; background: linear-gradient(var(--bg) 82%, transparent); }
.search {
  min-height: 68px; padding: 0 8px 0 24px; gap: 14px;
  border: 0; background: #fff; color: var(--brand-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 18px 40px -16px rgba(2, 16, 13, .45), 0 2px 6px rgba(0, 0, 0, .06);
}
.search:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 20px 44px -16px rgba(2, 16, 13, .5), 0 3px 8px rgba(0, 0, 0, .08); }
.search:focus-within { box-shadow: 0 0 0 3px var(--primary), 0 0 0 8px rgba(0, 169, 135, .18), 0 20px 44px -16px rgba(2, 16, 13, .5); }
.search > .ico { width: 26px; height: 26px; stroke-width: 2.3; }
.search input { font-size: 1.2rem; font-weight: 600; }

/* ---------- ปุ่มหมวด: เล็ก เรียบ ไอคอนซ้าย ชื่อขวา ---------- */
.groups-label { margin: 6px 0 -4px; text-align: center; font-size: .84rem; font-weight: 600; color: var(--ink-3); }
.groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.groups .chip {
  flex: 0 0 calc((100% - 24px) / 4); min-width: 0;
  flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; text-align: left;
  min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.groups .chip:hover { border-color: var(--brand); box-shadow: 0 6px 16px -10px rgba(0, 120, 95, .5); }
.groups .chip:active { transform: scale(.98); }
.groups .chip .ico {
  flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-ink); stroke-width: 1.9;
}
.groups .chip span { flex: 1; min-width: 0; font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.25; white-space: normal; }
.groups .chip em { flex: none; font-size: .78rem; font-style: normal; color: var(--ink-3); background: var(--paper-2); padding: 2px 8px; border-radius: 999px; }
.groups .chip.on { background: var(--night-2); border-color: var(--night-2); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); }
.groups .chip.on span { color: #fff; }
.groups .chip.on .ico { background: var(--cta); color: var(--cta-ink); }
.groups .chip.on em { background: rgba(255, 255, 255, .12); color: var(--lime); opacity: 1; }

/* เลือกหมวดแล้ว: ย่อเป็นแคปซูล */
.has-list .groups { gap: 6px; }
.has-list .groups .chip { flex: 0 0 auto; min-height: 40px; padding: 4px 12px 4px 6px; border-radius: 999px; gap: 6px; }
.has-list .groups .chip .ico { width: 28px; height: 28px; padding: 5px; border-radius: 999px; }
.has-list .groups .chip span { font-size: .86rem; white-space: nowrap; }
.has-list .groups .chip em { display: none; }
.has-list .groups-label { display: none; }

@media (max-width: 899px) {
  .hero { padding: calc(var(--bar-top) + var(--bar-h) + 18px) 14px 58px; }
  .groups .chip { flex-basis: calc((100% - 16px) / 3); }
}
@media (max-width: 560px) {
  .find-title { font-size: 1.35rem; margin-top: 12px; }
  .pick-title { font-size: 1.35rem; }
  .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mp { font-size: 1.05rem; padding: 14px 8px 12px; }
  .search { min-height: 62px; padding-left: 20px; gap: 12px; }
  .search input { font-size: 1.08rem; }
  .find { margin-top: -40px; }
  /* มือถือ: 2 ช่องต่อแถว ไอคอนซ้าย ชื่อขวา */
  .groups { gap: 8px; }
  .groups .chip { flex-basis: calc((100% - 8px) / 2); min-height: 54px; padding: 8px 10px; gap: 8px; border-radius: 14px; }
  .groups .chip .ico { width: 30px; height: 30px; padding: 6px; }
  .groups .chip span { font-size: .88rem; }
  .groups .chip em { display: none; } /* ให้ชื่อหมวดยาว ๆ อยู่บรรทัดเดียว ปุ่มสูงเท่ากันทุกปุ่ม */
  .groups .chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* มือถือตอนย่อ: 3 ช่องต่อแถว ไม่ต้องปัดข้าง */
  .has-list .groups .chip { flex: 0 0 calc((100% - 12px) / 3); justify-content: center; min-height: 40px; padding: 4px 6px; border-radius: 12px; }
  .has-list .groups .chip .ico { display: none; }
  .has-list .groups .chip span { flex: none; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; text-align: center; }
}

/* ================= หน้าเลือกรุ่น: พื้นสีเข้มเต็มจอ ================= */
html:has(body.no-model), body.no-model { background: var(--night); }
.no-model .hero { min-height: 100vh; min-height: 100dvh; padding-bottom: 28px; display: flex; flex-direction: column; }
.no-model .hero-inner { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.no-model .hero::after { mask-image: linear-gradient(180deg, transparent, #000 20%, #000 100%); }
/* ข้อความท้ายหน้า ย้ายมาอยู่ในส่วนหัวสีเข้ม */
.no-model .app { display: none; }
.pick-foot { display: none; margin: 22px auto 0; max-width: 520px; font-size: .78rem; line-height: 1.6; color: rgba(226, 232, 240, .5); }
.no-model .pick-foot { display: block; }