/* ============================================================
   /your-plant-factory · หน้าแนะนำรุ่น Model 2a / 3a · v0.3.1 (9 ต.ค. 2569)
   โหลดต่อท้าย quiet-precision.css?v=0.2 + deeptech.css · ทับเฉพาะที่หน้านี้ต้องใช้
   ใช้ตัวแปร --qp-* เท่านั้น ห้ามใส่สีตรง · คลาสเฉพาะหน้าขึ้นต้น y-
   ============================================================ */

.dt [hidden] { display: none !important; }   /* คลาสที่ตั้ง display เอง (dt-ch = flex) ต้องไม่ชนะ hidden */
.y-nw { white-space: nowrap; }                /* ไทยตัดบรรทัดกลางวลี → ครอบวลีที่ห้ามแยก */

/* บท 00 · เปิด */
.y-bg { width: 100%; height: 100%; display: block; }
.y-hero__say { margin-top: 24px; font-size: clamp(18px, 1.8vw, 24px); color: var(--qp-ink); }

/* บท 01 · เลือกรุ่น */
.y-name { font-size: clamp(44px, 6vw, 88px); line-height: 1.02; letter-spacing: -.03em; }
.y-pick { display: flex; gap: 14px; margin: 10px 0 4px; }
.y-dial { width: 76px; height: 76px; border-radius: 50%; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--qp-line-strong); color: var(--qp-muted); display: grid; place-items: center; transition: border-color var(--qp-d-2) var(--qp-ease), color var(--qp-d-2) var(--qp-ease), box-shadow var(--qp-d-2) var(--qp-ease); }
.y-dial__face { font-family: var(--qp-font-mono); font-size: 22px; }
.y-dial:hover { border-color: var(--qp-ink-2); color: var(--qp-ink); }
.y-dial[aria-checked="true"] { border-color: var(--qp-gold); color: var(--qp-ink); box-shadow: 0 0 0 4px var(--qp-gold-t); }
.y-dial:focus-visible { outline: 2px solid var(--qp-gold); outline-offset: 3px; }
.y-area { margin-top: clamp(16px, 4vh, 40px); display: flex; flex-direction: column; gap: 14px; }
.y-area .dt-num--xl { font-size: clamp(96px, 12vw, 176px); }   /* xl ของชุด (300px) ล้นเข้าคอลัมน์ภาพ */
#ypf .dt-num small { font-family: var(--qp-font-sans); font-size: max(.24em, 14px); letter-spacing: 0; white-space: nowrap; }   /* หน่วยไทย: ฟอนต์ไทย ไม่ใช่โมโน (Plex Mono ไม่มีอักษรไทย) */

.y-iso { position: relative; }
.y-iso__stage { position: relative; aspect-ratio: 264 / 196; width: 100%; }
.y-iso__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.y-iso__m { opacity: 0; transition: opacity var(--qp-d-3) var(--qp-ease); }
[data-ypf-model="2a"] .y-iso__m[data-model="2a"], [data-ypf-model="3a"] .y-iso__m[data-model="3a"] { opacity: 1; }
.y-iso__floor { fill: var(--qp-green-t); stroke: none; }
.y-iso__tier { fill: color-mix(in srgb, var(--qp-green) 9%, transparent); stroke: var(--qp-green); stroke-width: .5; stroke-opacity: .75; }
.y-iso__hid { fill: none; stroke: var(--qp-line-strong); stroke-width: .6; stroke-dasharray: 2 2; }
.y-iso__edge { fill: none; stroke: var(--qp-ink-2); stroke-width: .8; stroke-linejoin: round; }
.y-iso__lab { position: absolute; transform: translate(-50%, -50%); font-size: var(--qp-t-13); color: var(--qp-ink-2); white-space: nowrap; background: color-mix(in srgb, var(--qp-bg) 70%, transparent); padding: 2px 6px; border-radius: 2px; transition: left var(--qp-d-3) var(--qp-ease), top var(--qp-d-3) var(--qp-ease); }
.y-iso__lab .dt-num { color: var(--qp-ink); letter-spacing: 0; }
/* จุดยึดป้าย (% ของ viewBox 264×196): กลางขอบยาวหน้า · กลางขอบกว้างขวา · ป้ายชั้น = มุมซ้ายบน (มุมเดียวกันทั้ง 2 รุ่น · ไม่ล้นขวาบนมือถือ) */
[data-ypf-model="2a"] .y-iso__lab--len { left: 31.8%; top: 65%; }
[data-ypf-model="2a"] .y-iso__lab--wid { left: 72%; top: 73%; }
[data-ypf-model="3a"] .y-iso__lab--len { left: 39.7%; top: 71%; }
[data-ypf-model="3a"] .y-iso__lab--wid { left: 88%; top: 85%; }
.y-iso__lab--tier { left: 2%; top: 9%; transform: translate(0, -50%); }
.y-iso__cap { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-top: 14px; font-size: var(--qp-t-12); color: var(--qp-muted); }

/* บท 02 · ตัวเลข */
.y-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 6vh, 64px); border-top: 1px solid var(--qp-line); }
.y-specs > div { padding: clamp(22px, 3vw, 36px) clamp(12px, 2vw, 28px) clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--qp-line); display: flex; flex-direction: column; gap: 12px; }
.y-specs > div:not(:nth-child(3n+1)) { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--qp-line); }
.y-specs dt { display: flex; gap: 10px; align-items: center; }
.y-specs dd.dt-num { white-space: nowrap; }
.y-specs__th { font-size: var(--qp-t-13); color: var(--qp-muted); }
.y-specs__sim { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--qp-src-sim) 7%, transparent)); }
.y-note { margin-top: var(--qp-s-5); font-size: var(--qp-t-13); color: var(--qp-muted); max-width: 90ch; }

/* บท 03 · เทียบ */
.y-tablewrap { margin-top: clamp(28px, 4vw, 48px); overflow-x: auto; }
.y-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--qp-t-16); }
.y-table th, .y-table td { text-align: left; padding: 18px 12px; border-bottom: 1px solid var(--qp-line); vertical-align: baseline; }
.y-table thead th { border-bottom-color: var(--qp-line-strong); font-size: var(--qp-t-15); font-weight: 600; color: var(--qp-muted); }
.y-table th[scope="row"] { font-weight: 500; color: var(--qp-ink-2); font-size: var(--qp-t-15); }
.y-table td { color: var(--qp-muted); }
.y-table td .qp-num { font-size: var(--qp-t-20); color: var(--qp-ink-2); margin-right: 4px; }
.y-table th.is-on { color: var(--qp-gold); }
.y-table td.is-on { color: var(--qp-ink); background: color-mix(in srgb, var(--qp-gold) 5%, transparent); }
.y-table td.is-on .qp-num { color: var(--qp-ink); }

/* บท 04 · ในอาคาร */
.y-sys { list-style: none; padding: 0; margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--qp-line); }
.y-sys li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 22px 28px 0; border-bottom: 1px solid var(--qp-line); }
.y-sys li:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--qp-line); }
.y-sys li > b { font-size: var(--qp-t-20); font-weight: 600; color: var(--qp-ink); }
.y-sys li > span:last-child { font-size: var(--qp-t-15); color: var(--qp-muted); }
.y-prep { margin-top: 40px; }
.y-prep p { color: var(--qp-ink-2); }
.y-prep__note { font-size: var(--qp-t-13); }
.y-photos { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.y-photo__frame { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--qp-faint); font-size: var(--qp-t-13); border-style: dashed; }
.y-photo figcaption { margin-top: 10px; font-size: var(--qp-t-13); color: var(--qp-muted); }

/* บท 05 · เริ่ม */
.y-contact { align-items: start; }
.y-steps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: var(--qp-t-17); color: var(--qp-ink-2); }
.y-steps li { display: inline-flex; align-items: baseline; gap: 10px; }
.y-ways { margin-top: 12px; }
.y-ways .dt-row { padding: 16px 0; grid-template-columns: 72px minmax(0, 1fr) auto; }
.y-ways__v { font-size: var(--qp-t-17); overflow-wrap: anywhere; }
.y-ways a { text-decoration: none; }
.y-ways a:hover { color: var(--qp-green); }
.y-form { display: flex; flex-direction: column; gap: 18px; }
.y-form__models { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.y-form__models legend { font-size: var(--qp-t-13); color: var(--qp-muted); margin-bottom: 10px; padding: 0; }
.y-form__models label { position: relative; cursor: pointer; }
.y-form__models input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.y-form__models label span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--qp-line-strong); border-radius: 4px; font-size: var(--qp-t-15); color: var(--qp-ink-2); }
.y-form__models input:checked + span { border-color: var(--qp-gold); color: var(--qp-ink); box-shadow: 0 0 0 3px var(--qp-gold-t); }
.y-form__models input:focus-visible + span { outline: 2px solid var(--qp-gold); outline-offset: 2px; }
.y-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--qp-t-13); color: var(--qp-muted); }
.y-field b { color: var(--qp-gold); font-weight: 600; }
.y-field input, .y-field textarea { width: 100%; background: transparent; color: var(--qp-ink); border: 0; border-bottom: 1px solid var(--qp-line-strong); border-radius: 0; padding: 10px 0; font: 400 var(--qp-t-17)/1.5 var(--qp-font-sans); }
.y-field input:focus, .y-field textarea:focus { outline: none; border-bottom-color: var(--qp-gold); }
.y-field textarea { resize: vertical; }
/* ช่องติ๊ก: ห้ามโดน width:100% (Safari ข้อความทับช่องข้าง) — กำหนดขนาดเอง */
.y-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--qp-t-13); color: var(--qp-muted); cursor: pointer; }
.y-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--qp-green); }
.y-consent a { color: var(--qp-ink-2); }
.y-form__msg { min-height: 1.4em; font-size: var(--qp-t-13); color: var(--qp-warn); }
.y-form__go { align-self: flex-start; }
.y-form__go[disabled] { opacity: .5; cursor: progress; }
.y-thanks { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-top: 8px; }
.y-thanks:focus { outline: none; }

/* ── มือถือ ── */
@media (max-width: 900px) {
  .y-specs, .y-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .y-specs > div:not(:nth-child(3n+1)), .y-sys li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .y-specs > div:nth-child(2n), .y-sys li:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--qp-line); }
  .y-ways .dt-row { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .y-hero .dt-mega { font-size: clamp(40px, 12.4vw, 56px); }   /* "ONE STANDARD." ต้องไม่ล้นจอ 390 */
  .y-specs, .y-sys, .y-photos { grid-template-columns: minmax(0, 1fr); }
  .y-specs > div:nth-child(n), .y-sys li:nth-child(n) { padding-left: 0; border-left: 0; }
  .y-hero .dt-actions .dt-btn { flex: 1 1 140px; }
  .y-table { min-width: 0; font-size: var(--qp-t-15); }
  .y-table td, .y-table th { padding: 12px 6px; }
  .y-table th[scope="row"] { font-size: var(--qp-t-13); }
  .y-table td .qp-num { font-size: var(--qp-t-17); }
  .y-ways .dt-row { grid-template-columns: 56px minmax(0, 1fr); }
}

/* ── คอมแพค (10 ต.ค. 2569 · ใช้ตัวแปร --dt-* จาก deeptech.css v0.2) ── */
.y-name { font-size: clamp(28px, 3.4vw, 46px); }
.y-area .dt-num--xl { font-size: var(--dt-fs-num-xl); }
@media (max-width: 560px) {
  .y-hero .dt-mega { font-size: clamp(30px, 10vw, 44px); }
}