/* NÜXGROW · หน้าแรก v0.4.3 (11 ต.ค. 2569 · โครง C "แลนดิ้งย่อ": หัวเรื่อง → วง NÜX Ecology → 3 คอลัมน์ + กราฟิกสรุปใต้กรอบ (ลิงก์ /we-grow /we-build /you-grow) → ขั้นตอน → ติดต่อย่อ · ใช้ร่วมกับหน้า /we-grow /we-build /you-grow /contact)
   ต่อจาก quiet-precision.css + deeptech.css (คอมแพค --dt-* · 2 ธีม) · คู่กับ /qp/home-v.js
   ① hero ปักหมุด: ตัวจำลองฝนแสง (/qp/sim/) + ชิปกระจกค่าจำลอง · เลื่อน = 1 วันในห้องปลูก
   ② บท 01 แผงตัวแปร 24 ชม. เลื่อนแล้วเวลาเดิน · ③ Bento บริการ + กล่องตัวจำลอง (/qp/sim/sim-bento.*) · ④ เส้นขั้นตอนเติมตามการเลื่อน
   สีพลังงาน = ชุดสเปกตรัม --sim-spec-* (ชื่อ/ค่าเดียวกับชิ้นตัวจำลองใน /qp/sim/) · พื้นยังเป็น --qp-* ตามธีม
   ลดการเคลื่อนไหว (html.v-still) = ไม่ปักหมุด ไม่ขยับ ค่าคงที่ · ไม่มี JS = เห็นครบ ค่าสุดท้าย */

/* ── สีสเปกตรัม (สีตามความยาวคลื่นจริง · ชุดมืด/สว่าง) → ย้ายเข้า deeptech.css เมื่อทำทั้งเว็บ ── */
html {
  --sim-spec-400: #a07bff; --sim-spec-450: #4f86ff; --sim-spec-500: #2fd0e8; --sim-spec-550: #86e05a;
  --sim-spec-600: #ffb43c; --sim-spec-660: #ff4d4d; --sim-spec-730: #b3264a; --sim-spec-fluor: #ff5a50; --sim-spec-glow: var(--qp-green);
  --v-spec: linear-gradient(90deg, var(--sim-spec-450), var(--sim-spec-500) 26%, var(--sim-spec-550) 50%, var(--sim-spec-600) 74%, var(--sim-spec-660));
  --v-glass: color-mix(in srgb, var(--qp-bg) 56%, transparent);
  --v-glass-line: color-mix(in srgb, var(--qp-ink) 14%, transparent);
  --v-r: 14px;
  --v-ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-qp-theme="light"] {
  --sim-spec-400: #6a3fd0; --sim-spec-450: #2152d0; --sim-spec-500: #0b8aa6; --sim-spec-550: #3a8f1c;
  --sim-spec-600: #c47400; --sim-spec-660: #cf2b2b; --sim-spec-730: #7a1631; --sim-spec-fluor: #c4302a; --sim-spec-glow: #22b45e;
  --v-glass: color-mix(in srgb, var(--qp-surface) 70%, transparent);
  --v-glass-line: color-mix(in srgb, var(--qp-ink) 12%, transparent);
}

/* ── ส่วนร่วม: เผยตอนเลื่อนถึง (เบลอ → ชัด) · ปุ่มแม่เหล็ก · ไฟตามเมาส์ ── */
.v-js:not(.v-still) .dt-reveal { filter: blur(6px); transition: opacity .9s var(--qp-ease), transform .9s var(--qp-ease), filter .9s var(--qp-ease); transition-delay: var(--dt-delay, 0ms); }
.v-js .dt-reveal.is-in { filter: none; }
.v-mag { transition: transform .45s var(--v-ease), background var(--qp-d-2) var(--qp-ease), border-color var(--qp-d-2) var(--qp-ease), color var(--qp-d-2) var(--qp-ease); will-change: transform; }
.v-tag { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--qp-src-sim) 60%, transparent); color: var(--qp-src-sim); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.v-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.v-still *, .v-still *::before, .v-still *::after { animation: none !important; }
.v-off * { animation-play-state: paused !important; }

/* ไฟตามเมาส์ + ขอบเรือง (ธีมมืดเท่านั้น · ธีมสว่างใช้เงายก) */
.v-spot { --mx: 50%; --my: 0%; }
.v-spot::before, .v-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--qp-ease); }
.v-spot::before { z-index: 0; background: radial-gradient(520px circle at var(--mx) var(--my), color-mix(in srgb, var(--sim-spec-500) 9%, transparent), transparent 62%); }
.v-spot::after { z-index: 3; padding: 1px; background: radial-gradient(300px circle at var(--mx) var(--my), var(--sim-spec-500), color-mix(in srgb, var(--sim-spec-550) 55%, transparent) 35%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
html[data-qp-theme="dark"] .v-spot:hover::before, html[data-qp-theme="dark"] .v-spot:hover::after { opacity: 1; }
.v-still .v-spot::before, .v-still .v-spot::after { display: none; }

/* ═════════ ① HERO · ปักหมุด 1 วันในห้องปลูก ═════════ */
/* v0.2.0 (10 ต.ค. 2569 · โครง A "ห้องปลูก"): ฉากเปิด = ชิ้นตัวจำลอง onecycle (ห้องปลูก 1 ต้น 1 รอบ + กราฟ SPD) เล่นเองวนลูป ไม่ปักหมุด ไม่มีปุ่มปรับ · ข้อความซ้ายอ่านค่าจาก event ของชิ้น */
.v-hero { position: relative; display: flex; align-items: center; padding: 104px 0 36px; overflow: hidden; }
.v-hero__in { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; gap: 26px; }
.v-hero__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.v-hero__scene { position: relative; min-width: 0; }
.v-hero__scene > [data-sim] { display: block; }

/* ── 3 คอลัมน์จองบริการ (ลำดับเดียวกับบท 01 · 02 · 03 ด้านล่าง) ── */
.v-book { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v-col { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--dt-card-pad); border-radius: var(--v-r); border: 1px solid var(--qp-line); background: linear-gradient(180deg, color-mix(in srgb, var(--qp-surface) 94%, transparent), color-mix(in srgb, var(--qp-bg) 92%, transparent)); transition: border-color .35s var(--qp-ease), box-shadow .45s var(--qp-ease), transform .45s var(--v-ease); }
.v-col > * { position: relative; z-index: 1; }
.v-col__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-col__h { font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--qp-ink); margin: 0; }
.v-col__sub { font-size: 15px; line-height: 1.6; color: var(--qp-ink-2); margin: 0; }
.v-col__sub b { color: var(--qp-ink); font-weight: 600; }
.v-col__meta { font-size: 13px; line-height: 1.5; color: var(--qp-muted); margin: 0; }
.v-col .n6-price { margin-top: 0; }
.v-col .dt-actions { margin-top: auto; padding-top: 12px; align-items: center; gap: 10px 18px; }
.v-col--rd { border-color: color-mix(in srgb, var(--qp-green) 42%, var(--qp-line)); }
html[data-qp-theme="light"] .v-col:hover { border-color: color-mix(in srgb, var(--qp-green) 40%, var(--qp-line)); box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--qp-ink) 40%, transparent); transform: translateY(-2px); }
html[data-qp-theme="dark"] .v-col:hover { border-color: var(--qp-line-strong); }
.v-still .v-col:hover { transform: none; }
@media (max-width: 1000px) { .v-book { grid-template-columns: minmax(0, 1fr); } }
/* ── บทบริการ: หัวบท 2 คอลัมน์ · บล็อกย่อยเว้นระยะ ── */
.v-svc__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dt-gap); align-items: end; margin-bottom: 28px; }
.v-svc__head .dt-lead { max-width: 46ch; }
.v-blk { margin-top: clamp(40px, 6vh, 64px); }   /* บล็อกย่อยในบทบริการ (ไม่ใช้ชื่อ .v-sub ซึ่งเป็นย่อหน้าเล็กของจอเปิดเดิม) */
@media (max-width: 900px) { .v-svc__head { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* ── การ์ด R&D: ชิ้นห้องปลูก 1 ต้น 1 รอบ แทนภาพผัก · บรรทัดวัน/ระยะใต้ภาพอ่านจาก event ของชิ้น ── */
.v-mini--oc { padding: 10px 10px 8px; min-height: 0; }
.v-mini--oc > [data-sim] { flex: 0 0 auto; width: 100%; margin-inline: 0; }   /* ชิ้นมี margin-inline:auto → ในกล่อง flex จะไม่ยืด ต้องกำหนดกว้างเต็ม */
.v-ocline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; color: var(--qp-muted); margin: 10px 2px 0; }
.v-ocline b { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--qp-ink); }
/* ── บท 02 สร้างให้: ข้อความซ้าย + การ์ดห้องขวา · บท 03 ปลูกเอง: อุปกรณ์ + แอป + วงข้อมูล ── */
.v-facts.dt-rows { border-bottom: 0; }
.v-facts .dt-row { grid-template-columns: minmax(84px, 110px) minmax(0, 1fr); padding: 12px 0; }
.v-facts .dt-row p { font-size: 15px; color: var(--qp-ink-2); }
.v-box--one { height: 100%; }
.v-box--one .v-mini--sim { min-height: 340px; }
.v-box--dev, .v-box--loop { grid-column: span 3; }
.v-box--app { grid-column: span 6; }   /* ชิ้นห้องที่มีชีวิตมีแผงอธิบายข้าง ต้องกว้างเต็มแถว (ครึ่งแถวแผงถูกบีบ) */
.v-box--loop .v-mini--sim { min-height: 300px; }
@media (max-width: 760px) { .v-box--dev, .v-box--loop, .v-box--app { grid-column: 1 / -1; } }

/* ── รอบ D: จอแรก = หัวเรื่องย่อ + ชิ้น 3 มิติ "วงดีเอ็นเอ" (eco3d) เต็มจอ ── */
.v-hero--3d { min-height: 0; padding: 92px 0 4px; }   /* รอบ G: ไม่ดันเต็มจอ ให้ 3 คอลัมน์ตามขึ้นมาชิดภาพ */
.v-hero--3d .v-hero__in { gap: 14px; }
.v-hero--3d .v-hero__copy { gap: 8px; max-width: none; }
.v-hero--3d .v-h1 { font-size: clamp(26px, 2.6vw, 38px); }
.v-hero--3d .v-h1.v-slogan { width: 100%; font-size: clamp(48px, 9.2vw, 140px); font-weight: 700; line-height: .98; letter-spacing: -.035em; margin: 0 0 6px; color: var(--qp-ink); white-space: nowrap; }   /* สโลแกนใหญ่เต็มแถว (เจาะจงกว่า .v-hero--3d .v-h1) */
@media (max-width: 899px) { .v-hero--3d .v-h1.v-slogan { font-size: clamp(40px, 12.5vw, 64px); white-space: normal; } }
.v-hero--3d .v-lead { max-width: none; }
.v-hero--3d .v-lead .dt-go { margin-left: 8px; }
.v-hero3d { position: relative; }
.v-meter { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--qp-line); font-size: 13px; color: var(--qp-muted); }
.v-meter b { font-family: var(--qp-font-mono); font-weight: 500; font-size: 16px; color: var(--qp-ink); margin-right: 6px; }
html:not(.v-js) .v-hero--3d, .v-still .v-hero--3d { min-height: 0; }
@media (max-width: 899px) { .v-hero--3d { min-height: 0; padding-top: 84px; } }
/* ── รอบ C: วง Ecology ต่อจากหัวเรื่อง · คอลัมน์ + กราฟิกสรุปใต้กรอบ · หน้าย่อย ── */
.v-eco { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: center; padding: var(--dt-card-pad); border-radius: var(--v-r); border: 1px solid var(--qp-line); background: linear-gradient(180deg, color-mix(in srgb, var(--qp-surface) 94%, transparent), color-mix(in srgb, var(--qp-bg) 92%, transparent)); }
.v-eco > * { position: relative; z-index: 1; }
.v-eco .dt-lead { max-width: 44ch; }
.v-eco__sim { min-height: 300px; }
.v-booksec { padding-top: 28px; border-top: 0; }
.v-booksec__head { gap: 10px; margin-bottom: 22px; }
.v-booksec__h { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.15; }   /* หัวข้อใหญ่ "บริการของเรา" เหนือ 3 กล่อง */
.v-colwrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v-colwrap .v-col { flex: 1 1 auto; }
.v-teaser { position: relative; display: flex; flex-direction: column; padding: 10px 10px 8px; border-radius: var(--v-r); border: 1px dashed var(--qp-line-strong); background: color-mix(in srgb, var(--qp-surface) 60%, transparent); }
@media (min-width: 1001px) { .v-teaser { height: 410px; } }   /* 3 กราฟิกสูงเท่ากัน → กรอบเมนู 3 ใบสูงเท่ากัน */
.v-teaser > [data-sim] { flex: 0 0 auto; }
.v-teaser .v-ocline { margin-top: auto; padding-top: 8px; }
.v-teaser::before { content: ""; position: absolute; left: 50%; top: -13px; width: 1px; height: 12px; background: var(--qp-line-strong); }   /* เส้นต่อลงมาจากกรอบเมนู */
.v-teaser > [data-sim] { width: 100%; margin-inline: 0; }
.v-teaser .v-mini--sim { flex: 1 1 auto; min-height: 250px; padding: 10px; }
.v-teaser .v-ocline { margin: 8px 2px 0; }
.v-page { padding-top: clamp(96px, 12vh, 128px); }
@media (max-width: 900px) { .v-eco { grid-template-columns: minmax(0, 1fr); } }

/* แสงเหนือฉาก (สีสเปกตรัม · ลอยช้า) */
.v-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.v-aurora i { position: absolute; width: 52vw; height: 52vw; max-width: 900px; max-height: 900px; border-radius: 50%; filter: blur(40px); opacity: .5; }
.v-aurora i:nth-child(1) { left: 34%; top: -34%; background: radial-gradient(circle, color-mix(in srgb, var(--sim-spec-450) 42%, transparent), transparent 64%); animation: v-drift 22s ease-in-out infinite alternate; }
.v-aurora i:nth-child(2) { left: 62%; top: -22%; background: radial-gradient(circle, color-mix(in srgb, var(--sim-spec-660) 30%, transparent), transparent 64%); animation: v-drift 26s ease-in-out -8s infinite alternate-reverse; }
.v-aurora i:nth-child(3) { left: 46%; top: 40%; background: radial-gradient(circle, color-mix(in srgb, var(--sim-spec-550) 24%, transparent), transparent 64%); animation: v-drift 30s ease-in-out -14s infinite alternate; }
html[data-qp-theme="light"] .v-aurora i { opacity: .38; }
.v-hero.is-night .v-aurora i { opacity: .16; transition: opacity 1.2s var(--qp-ease); }
.v-aurora i { transition: opacity 1.2s var(--qp-ease); }
@keyframes v-drift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } }


.v-hero__copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 820px; }
.v-h1 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--qp-ink); margin: 2px 0 0; }
.v-hero--a .v-hero__foot { max-width: none; margin-top: 10px; padding-top: 12px; }
.v-h1 em { font-style: normal; color: var(--qp-green); }
.v-lead { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: var(--qp-ink-2); max-width: 44ch; margin: 0; }
.v-sub { font-size: 13px; line-height: 1.6; color: var(--qp-muted); margin: 0; max-width: 48ch; }
.v-hero .dt-actions { margin-top: 2px; }
/* v0.2.2 (11 ต.ค. 2569): จอเปิดเหลือข้อความ + ปุ่ม + บรรทัดเดียวบอกว่าเป็นภาพจำลอง (ไม่มีแถบค่า/การ์ด) */
.v-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--qp-muted); margin: 4px 0 0; }
/* v0.2.2 (10 ต.ค. 2569): ห้ามตัดคำ "น้ำ-ปุ๋ย" / "ตามโจทย์ของคุณ" ใน h1 · ปุ่ม 2 ตัวในกล่อง R&D กว้างเท่ากันเต็มคอลัมน์ */
.v-nw { white-space: nowrap; }
.v-box--rd .dt-actions .dt-btn { flex: 1 1 100%; }


.v-hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--qp-line); max-width: 560px; }
.n6-scroll { font-family: var(--qp-font-mono); font-size: 12px; letter-spacing: .2em; color: var(--qp-muted); display: inline-flex; align-items: center; gap: 10px; }
.n6-scroll i { display: block; width: 1px; height: 24px; background: linear-gradient(var(--qp-muted), transparent); animation: n6-drop 2.2s var(--qp-ease) infinite; }
@keyframes n6-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 899px) {
  .v-hero { padding: 84px 0 24px; }
  .v-hero__grid { grid-template-columns: 1fr; gap: 18px; }
  .v-hero__scene { order: 2; }
  .v-h1 { font-size: clamp(28px, 7.4vw, 36px); }
  .v-cycle { max-width: none; }
  .v-hero__foot { margin-top: 12px; padding-top: 10px; }
  .n6-scroll { display: none; }
}

/* ═════════ ② บท 01 · แผงตัวแปร 24 ชม. (เลื่อนแล้วเวลาเดิน) ═════════ */
.v-env__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dt-gap); align-items: end; margin-bottom: 26px; }
.v-env__head .dt-lead { max-width: 46ch; }
.v-env__panel { position: relative; border: 1px solid var(--qp-line); border-radius: var(--v-r); padding: 16px var(--dt-card-pad) 4px; background: color-mix(in srgb, var(--qp-surface) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v-env__panel .dt-rows { border-bottom: 0; }
.v-env__panel .dt-row { padding: 16px 0; }
.v-env__panel .dt-row:first-child { border-top: 0; }
@media (max-width: 900px) { .v-env__head { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.v-env .dt-row { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) minmax(0, 1.1fr) minmax(116px, auto); align-items: center; }
.v-env .dt-label { color: var(--qp-ink); }
.v-env p { color: var(--qp-ink-2); font-size: 15px; }
.v-prof { width: 100%; height: 40px; display: block; overflow: visible; }
.v-prof path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-prof .p-bg { stroke: var(--qp-line-strong); }
.v-prof .p-head { stroke: var(--qp-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-val { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--qp-ink); text-align: right; white-space: nowrap; }
.v-val small { color: var(--qp-ink-2); font-size: 12px; }
.v-axis { display: grid; grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) minmax(0, 1.1fr) minmax(116px, auto); gap: 0 24px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--qp-line); }
.v-axis__clock { grid-column: 1 / 3; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--qp-ink-2); }
.v-axis__clock b { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--dt-fs-num-md); font-weight: 500; color: var(--qp-ink); letter-spacing: -.01em; }
.v-axis__ticks { grid-column: 3; display: flex; justify-content: space-between; font-family: var(--qp-font-mono); font-size: 10px; color: var(--qp-muted); }
.v-axis__end { grid-column: 4; text-align: right; }
html:not(.v-js) .v-axis, html:not(.v-js) .v-val { display: none; }
html:not(.v-js) .v-env .dt-row { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 900px) {
  .v-env .dt-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .v-env .dt-row > .dt-label { grid-column: 1; }
  .v-env .dt-row > .v-val { grid-column: 2; grid-row: 1; }
  .v-env .dt-row > p, .v-env .dt-row > svg { grid-column: 1 / -1; }
  .v-axis { grid-template-columns: minmax(0, 1fr) auto; }
  .v-axis__clock { grid-column: 1; }
  .v-axis__ticks { display: none; }
  .v-axis__end { grid-column: 2; }
}
/* เส้นคลื่นเดิม (ไม่มี JS) */
.n6-trace { width: 100%; height: 40px; display: block; overflow: hidden; }
.n6-trace path { fill: none; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.n6-trace g { animation: n6-slide var(--p) linear infinite; }
@keyframes n6-slide { to { transform: translateX(var(--dx)); } }

/* ═════════ บท 02 · คลังพืช 210 จุด ═════════ */
.n6-dots { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 7px; max-width: 640px; }
.n6-dots i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--c); opacity: .9; transition: opacity .6s var(--qp-ease), transform .6s var(--qp-ease), box-shadow .3s; transition-delay: calc(var(--i) * 4ms); }
.dt-js .n6-dots:not(.is-in) i { opacity: 0; transform: scale(.2); }
.n6-g1 { --c: var(--qp-data-1); } .n6-g2 { --c: var(--qp-data-2); } .n6-g3 { --c: var(--qp-data-3); } .n6-g4 { --c: var(--qp-data-4); } .n6-g5 { --c: var(--qp-data-5); } .n6-g6 { --c: var(--qp-ink-2); }
.n6-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 14px; color: var(--qp-ink-2); }
.n6-legend span { display: inline-flex; align-items: center; gap: 8px; cursor: default; border-radius: 999px; transition: color .2s; }
.n6-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.n6-legend b { font-family: var(--qp-font-mono); font-weight: 500; color: var(--qp-ink); }
.n6-dots[data-hl] i { opacity: .14; transition-delay: 0ms; }
.n6-dots[data-hl="1"] .n6-g1, .n6-dots[data-hl="2"] .n6-g2, .n6-dots[data-hl="3"] .n6-g3, .n6-dots[data-hl="4"] .n6-g4, .n6-dots[data-hl="5"] .n6-g5, .n6-dots[data-hl="6"] .n6-g6 { opacity: 1; transform: scale(1.12); }
.v-lib .dt-num--xl { background: var(--v-spec); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--qp-green); }
@media (max-width: 560px) { .n6-dots { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 6px; } }

/* ═════════ ③ บท 03 · Bento บริการ ═════════ */
.v-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.v-box { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--dt-card-pad); border-radius: var(--v-r); border: 1px solid var(--qp-line); background: linear-gradient(180deg, color-mix(in srgb, var(--qp-surface) 94%, transparent), color-mix(in srgb, var(--qp-bg) 92%, transparent)); transition: border-color .35s var(--qp-ease), box-shadow .45s var(--qp-ease), transform .45s var(--v-ease); }
.v-box > * { position: relative; z-index: 1; }
.v-box .dt-actions { margin-top: auto; padding-top: 14px; }
.v-box__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-box--rd { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 26px; align-items: stretch; }
.v-box--rd > .dt-stack { display: flex; flex-direction: column; }
.v-box--ypf { grid-column: span 3; }
html[data-qp-theme="light"] .v-box:hover { border-color: color-mix(in srgb, var(--qp-green) 40%, var(--qp-line)); box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--qp-ink) 40%, transparent); transform: translateY(-2px); }
html[data-qp-theme="dark"] .v-box:hover { border-color: var(--qp-line-strong); }
.v-still .v-box:hover { transform: none; }
.n6-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.n6-price .dt-num { font-size: var(--dt-fs-num-md); }
.n6-price span:last-child { color: var(--qp-muted); font-size: 14px; }
.n6-svc .dt-btn.is-off, .v-bento .dt-btn.is-off { opacity: 1; color: var(--qp-muted); border-color: var(--qp-line-strong); background: transparent; }
.dt-off, .dt-menu .is-off { color: var(--qp-muted); }

/* ชิ้นจำลองเล็ก (กรอบเดียวกันทุกกล่อง) */
.v-mini { position: relative; min-height: 210px; border-radius: 10px; overflow: hidden; border: 1px solid var(--qp-line); background: radial-gradient(ellipse 80% 70% at 50% 100%, color-mix(in srgb, var(--qp-green) 10%, transparent), transparent 70%), color-mix(in srgb, var(--qp-bg) 70%, transparent); }

/* กล่องชิ้นตัวจำลอง (/qp/sim/sim-bento.*) · ชิ้นอยู่ในลำดับ (ไม่ absolute) แล้วยืดเต็มกรอบ · กล่องสูงตามเนื้อชิ้นเมื่อแผงล่างพับบรรทัด
   ไม่ซ่อนส่วนล้น (เดิม overflow:hidden + absolute ตัดปุ่ม/ป้ายแถบล่าง 5–11 px · ผลตรวจล่วงหน้า V.1) */
.v-mini--sim { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 320px; padding: 12px 12px 10px; overflow: visible; }
.v-mini--sim > [data-sim] { position: relative; flex: 1 1 auto; min-height: 0; }
.v-box--rd .v-mini--sim { min-height: 350px; }

@media (max-width: 1100px) { .v-box--rd { grid-column: span 6; } }
@media (max-width: 760px) {
  .v-bento { grid-template-columns: minmax(0, 1fr); }
  .v-box--rd, .v-box--loop, .v-box--ypf, .v-box--app { grid-column: 1 / -1; }
  .v-box--rd { grid-template-columns: minmax(0, 1fr); }
  .v-box--rd .v-mini--sim, .v-mini--sim { min-height: 330px; }
}

/* ═════════ ④ บท 04 · ขั้นตอน (เส้นเติมตามการเลื่อน) ═════════ */
.n6-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--qp-line-strong); margin-top: 40px; position: relative; --p: 1; }
.n6-steps::after { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--v-spec); transform-origin: left center; transform: scaleX(var(--p)); }
.n6-steps li { padding: 24px 22px 0 0; position: relative; display: flex; flex-direction: column; gap: 10px; }
.n6-steps li::before { content: ""; position: absolute; top: -5px; left: 0; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--qp-bg); border: 1px solid var(--qp-line-strong); transition: background .4s, border-color .4s, box-shadow .4s; }
.n6-steps li.is-on::before, html:not(.v-js) .n6-steps li::before, .v-still .n6-steps li::before { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.n6-steps li:nth-child(1) { --c: var(--sim-spec-450); } .n6-steps li:nth-child(2) { --c: var(--sim-spec-500); } .n6-steps li:nth-child(3) { --c: var(--sim-spec-550); } .n6-steps li:nth-child(4) { --c: var(--sim-spec-600); } .n6-steps li:nth-child(5) { --c: var(--sim-spec-660); }
.n6-steps .dt-num { font-size: 14px; letter-spacing: .1em; color: var(--qp-gold); }
.n6-steps h3 { font-size: 19px; font-weight: 600; line-height: 1.4; }
.n6-steps p { font-size: 15px; color: var(--qp-ink-2); }
.n6-steps .n6-fact { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--qp-muted); }
@media (max-width: 1000px) {
  .n6-steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--qp-line-strong); margin-left: 4px; }
  .n6-steps::after { left: -1px; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, var(--sim-spec-450), var(--sim-spec-500) 26%, var(--sim-spec-550) 50%, var(--sim-spec-600) 74%, var(--sim-spec-660)); transform-origin: center top; transform: scaleY(var(--p)); }
  .n6-steps li { padding: 0 0 28px 26px; }
  .n6-steps li::before { top: 6px; left: -5px; }
}

/* ═════════ บท 05 · ติดต่อ (แผงเรืองขอบสเปกตรัม) ═════════ */
.v-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; border: 1px solid var(--qp-line); padding: clamp(22px, 4vw, 52px); background: radial-gradient(ellipse 60% 90% at 100% 0%, color-mix(in srgb, var(--sim-spec-450) 12%, transparent), transparent 70%), radial-gradient(ellipse 50% 80% at 0% 100%, color-mix(in srgb, var(--sim-spec-550) 9%, transparent), transparent 70%), var(--qp-surface); }
.v-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--v-spec); }
.v-cta > * { position: relative; z-index: 1; }
.n6-ct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 32px; }
.n6-ct .dt-row { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr); }
.n6-ct a { text-decoration: none; }
.n6-ct a:hover { color: var(--qp-green); }
.n6-ct p { font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 900px) { .n6-ct { grid-template-columns: minmax(0, 1fr); } .n6-ct .dt-row { grid-template-columns: minmax(0, 1fr); } }