/* ============================================================
   NÜXGROW · ชุด "deeptech" ของหน้าร้าน nuxgrow.com · v0.2 (10 ต.ค. 2569 · + tiny + 2 ธีม: ดูส่วน v0.2 ท้ายไฟล์)
   แก้ไฟล์นี้ = ขึ้นเลข ?v= ทุกหน้าที่ลิงก์
   ต้องใช้คู่กับ quiet-precision.css (ตัวแปร --qp-*) และ <body class="dt"> · ธีม: <html data-qp-theme="dark|light"> (ส่วน v0.2)
     <link rel="stylesheet" href="/qp/quiet-precision.css?v=0.2">
     <link rel="stylesheet" href="/qp/deeptech.css?v=0.2.0">
     <script src="/qp/deeptech.js?v=0.2.0" defer></script>   (ไม่ใส่ก็ได้ = เนื้อหาเห็นครบ แค่ไม่มีเลื่อนแล้วค่อยโผล่ / เมนูทึบตอนเลื่อน)
   หลัก: พื้นมืดเต็มจอ · ทีละ "บท" เต็มหน้าจอ (1 บท = 1 ประโยคใหญ่ + 1–2 ปุ่ม) · ตัวใหญ่มาก คำน้อย · ป้ายอังกฤษโมโนตัวพิมพ์ใหญ่ · ตัวเลขโมโน
   กติกาเดิมของ QP ยังอยู่ครบ: ใช้ --qp-* เท่านั้น ห้ามใส่สีตรง · ตัวเลขจากอุปกรณ์/ตัวอย่างต้องมีป้าย สด/ค้าง/จำลอง
     · ⛔ dt-label / dt-mega / qp-caps = อังกฤษล้วนเท่านั้น (ถ่างตัวอักษร + ตัวพิมพ์ใหญ่ → ตัวไทยแตก) · ป้ายไทยใช้ dt-tag
     · ไทยห้ามอยู่ใน SVG <text> / canvas (Safari เพี้ยน)
   ============================================================ */

.dt { margin: 0; background: var(--qp-bg); color: var(--qp-ink); font-family: var(--qp-font-sans); font-size: var(--qp-t-16); line-height: var(--qp-lh-th); -webkit-font-smoothing: antialiased; }
.dt *, .dt *::before, .dt *::after { box-sizing: border-box; }
.dt :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.dt a) { color: inherit; }
.dt ::selection { background: var(--qp-green); color: var(--qp-bg); }
.dt-wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.dt [id] { scroll-margin-top: 64px; }   /* เมนูบนติดหัว ไม่บังหัวข้อเวลากดลิงก์ #… */

/* ── เมนูบนบาง (โปร่งบนบทแรก · ทึบเมื่อเลื่อน: deeptech.js ใส่ .is-solid) ── */
.dt-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px; background: linear-gradient(to bottom, color-mix(in srgb, var(--qp-bg) 70%, transparent), transparent); transition: background var(--qp-d-3) var(--qp-ease), border-color var(--qp-d-3) var(--qp-ease); border-bottom: 1px solid transparent; }
.dt-nav.is-solid { background: color-mix(in srgb, var(--qp-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--qp-line); }
.dt-nav__in { height: 64px; display: flex; align-items: center; gap: 32px; }
.dt-logo { font-weight: 700; font-size: 15px; letter-spacing: .14em; text-decoration: none; color: var(--qp-ink); white-space: nowrap; }
.dt-logo b { color: var(--qp-green); font-weight: 700; }
.dt-menu { display: none; gap: 28px; font-size: 14px; font-weight: 500; color: var(--qp-ink-2); }
.dt-menu a { text-decoration: none; transition: color var(--qp-d-2) var(--qp-ease); }
.dt-menu a:hover { color: var(--qp-ink); }
.dt-menu .is-off, .dt-off { color: var(--qp-faint); cursor: default; }
.dt-nav__end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dt-nav__end a:not(.dt-btn) { font-size: 14px; font-weight: 500; color: var(--qp-ink-2); text-decoration: none; white-space: nowrap; }
.dt-nav__end a:not(.dt-btn):hover { color: var(--qp-ink); }
@media (min-width: 960px) { .dt-menu { display: flex; } }
/* เมนูมือถือ (<details class="dt-mnav">) · จอ < 960 px · ไม่ต้องใช้ JS · v0.2.2 (10 ต.ค. 2569): ลิ้นชักสูงเต็มจอ (bottom:0) ไม่เห็นเนื้อหาโผล่ใต้ลิ้นชัก */
.dt-mnav { position: relative; }
.dt-mnav summary { list-style: none; cursor: pointer; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--qp-ink); border: 1px solid color-mix(in srgb, var(--qp-ink) 34%, transparent); }
.dt-mnav summary::-webkit-details-marker { display: none; }
.dt-mnav[open] summary { border-color: var(--qp-ink); }
.dt-mnav__panel { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; overflow-y: auto; background: var(--qp-bg); border-bottom: 1px solid var(--qp-line); padding: 4px clamp(20px, 4vw, 56px) 18px; display: flex; flex-direction: column; }
.dt-mnav__panel > * { padding: 15px 0; border-top: 1px solid var(--qp-line); font-size: 17px; text-decoration: none; }
@media (min-width: 960px) { .dt-mnav { display: none; } }
/* เมนูย่อย "บริการ" (<details class="dt-dd">) · จอ ≥ 960 px · ไม่มี JS ก็เปิด-ปิดได้ (deeptech.js ช่วยปิดเมื่อคลิกนอก/กด Esc) */
.dt-menu a[aria-current="page"] { color: var(--qp-ink); }
.dt-dd { position: relative; }
.dt-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color var(--qp-d-2) var(--qp-ease); }
.dt-dd > summary::-webkit-details-marker { display: none; }
.dt-dd > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--qp-d-2) var(--qp-ease); }
.dt-dd[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.dt-dd > summary:hover, .dt-dd[open] > summary, .dt-dd > summary.is-cur { color: var(--qp-ink); }
.dt-dd > summary:focus-visible { outline: 2px solid var(--qp-green); outline-offset: 4px; border-radius: 2px; }
.dt-dd__panel { position: absolute; top: calc(100% + 20px); left: -16px; z-index: 60; min-width: 300px; padding: 8px; display: flex; flex-direction: column; background: var(--qp-bg); border: 1px solid var(--qp-line-strong); border-radius: 4px; box-shadow: var(--qp-shadow); }
.dt-menu .dt-dd__panel a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 3px; font-size: 15px; color: var(--qp-ink); }
.dt-menu .dt-dd__panel a small { font-size: 13px; font-weight: 400; color: var(--qp-muted); }
.dt-menu .dt-dd__panel a:hover, .dt-menu .dt-dd__panel a:focus-visible { background: color-mix(in srgb, var(--qp-ink) 7%, transparent); outline: none; }
.dt-menu .dt-dd__panel a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--qp-green); }
/* เมนูมือถือ: หัวกลุ่ม + เลื่อนได้เมื่อจอเตี้ย */
.dt-mnav__panel { max-height: calc(100svh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.dt-mnav__panel > .dt-mnav__h { margin: 0; padding: 18px 0 6px; border-top: 0; font-size: 12px; font-weight: 600; color: var(--qp-muted); }
.dt-mnav__panel > a[aria-current="page"] { color: var(--qp-green); }

/* ── บท (chapter) เต็มจอ ── */
.dt-ch { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(96px, 12vh, 140px) 0 clamp(72px, 10vh, 112px); border-top: 1px solid var(--qp-line); overflow: hidden; isolation: isolate; }
.dt-ch:first-of-type { border-top: 0; }
.dt-ch--auto { min-height: 0; }
.dt-ch--end { justify-content: flex-end; }
.dt-ch > .dt-wrap { position: relative; z-index: 2; width: 100%; }
.dt-ch__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dt-ch__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--qp-bg) 0%, color-mix(in srgb, var(--qp-bg) 55%, transparent) 38%, transparent 70%); }

/* ── ตัวอักษร ── */
.dt-label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--qp-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--qp-muted); }   /* อังกฤษล้วน */
.dt-label--line::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.dt-label b { color: var(--qp-gold); font-weight: 500; }
.dt-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--qp-ink-2); }   /* ป้ายไทยได้ */
.dt-mega { font-weight: 600; font-size: clamp(56px, 11.5vw, 184px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; margin: 0; }   /* อังกฤษล้วน */
.dt-mega em { font-style: normal; color: var(--qp-green); }
.dt-title { font-weight: 600; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.22; letter-spacing: -.015em; }
.dt-h { font-weight: 600; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; }
.dt-lead { font-size: clamp(16px, 1.35vw, 19px); color: var(--qp-ink-2); max-width: 60ch; }
.dt-muted { color: var(--qp-muted); }
.dt-gold { color: var(--qp-gold); }
.dt-stack { display: flex; flex-direction: column; gap: 18px; }

/* ── ตัวเลขโมโน ── */
.dt-num { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -.04em; line-height: .95; }
.dt-num--xl { font-size: clamp(104px, 21vw, 300px); }
.dt-num--lg { font-size: clamp(48px, 7vw, 104px); }
.dt-num--md { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.02em; }
.dt-num small { font-size: .32em; letter-spacing: 0; color: var(--qp-muted); margin-left: .25em; }

/* ── ปุ่ม (เหลี่ยมเกือบตรง แบบเว็บรถ/จรวด) ── */
.dt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 4px; border: 1px solid transparent; font: 600 15px/1 var(--qp-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: 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); }
.dt-btn--solid { background: var(--qp-ink); color: var(--qp-bg); }
.dt-btn--solid:hover { background: var(--qp-ink-2); }
.dt-btn--ghost { color: var(--qp-ink); border-color: color-mix(in srgb, var(--qp-ink) 34%, transparent); background: color-mix(in srgb, var(--qp-bg) 35%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dt-btn--ghost:hover { border-color: var(--qp-ink); }
.dt-btn--green { background: var(--qp-green); color: var(--qp-bg); }
.dt-btn--green:hover { background: var(--qp-green-d); }
.dt-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.dt-btn.is-off, .dt-btn[aria-disabled="true"] { opacity: .42; cursor: default; pointer-events: none; }
.dt-go { font-weight: 600; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--qp-ink) 30%, transparent); padding-bottom: 3px; transition: border-color var(--qp-d-2) var(--qp-ease); }
.dt-go:hover { border-bottom-color: var(--qp-ink); }

/* ── ป้ายสถานะ ── */
.dt-pill { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--qp-line-strong); font-size: 12px; font-weight: 600; color: var(--qp-ink-2); white-space: nowrap; }
.dt-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--qp-faint); }
.dt-pill--live { color: var(--qp-green); border-color: color-mix(in srgb, var(--qp-green) 45%, transparent); }
.dt-pill--live::before { background: var(--qp-green); box-shadow: 0 0 0 0 var(--qp-green); animation: dt-ping 2.4s var(--qp-ease) infinite; }
@keyframes dt-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qp-green) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ── แถว/เส้น แบบเครื่องมือวัด ── */
.dt-rows { border-bottom: 1px solid var(--qp-line); }
.dt-row { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--qp-line); }
.dt-ticker { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--qp-font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--qp-muted); }   /* อังกฤษ/ตัวเลขล้วน */
.dt-ticker span { white-space: nowrap; }
.dt-ticker b { color: var(--qp-ink); font-weight: 500; }
.dt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.dt-frame { position: relative; border: 1px solid var(--qp-line); border-radius: 2px; background: color-mix(in srgb, var(--qp-surface) 70%, transparent); }
.dt-frame::before, .dt-frame::after { content: ""; position: absolute; width: 12px; height: 12px; border: solid var(--qp-gold); opacity: .8; }
.dt-frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.dt-frame::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.dt-gridbg { background-image: linear-gradient(var(--qp-line) 1px, transparent 1px), linear-gradient(90deg, var(--qp-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%); }
.dt-glow { background: radial-gradient(ellipse 60% 50% at 70% 30%, color-mix(in srgb, var(--qp-green) 16%, transparent), transparent 70%); }
@media (max-width: 900px) {
  .dt-split { grid-template-columns: minmax(0, 1fr); }
  .dt-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ── ท้ายหน้า ── */
.dt-foot { border-top: 1px solid var(--qp-line); padding: 64px 0 32px; font-size: 14px; }
.dt-foot__grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.dt-foot h5 { margin: 0 0 14px; font-family: var(--qp-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--qp-faint); }   /* อังกฤษล้วน */
.dt-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-foot ul a { text-decoration: none; color: var(--qp-ink-2); }
.dt-foot ul a:hover { color: var(--qp-ink); }
.dt-foot__base { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--qp-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--qp-faint); font-size: 13px; }
@media (max-width: 900px) { .dt-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dt-foot__grid > :first-child { grid-column: 1 / -1; } }

/* ── เลื่อนแล้วค่อยโผล่ (เฉพาะเมื่อ deeptech.js ทำงาน: <html class="dt-js">) · ไม่มี JS = เห็นครบทันที ── */
.dt-js .dt-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--qp-ease), transform .9s var(--qp-ease); transition-delay: var(--dt-delay, 0ms); }
.dt-js .dt-reveal.is-in { opacity: 1; transform: none; }

/* ── เคารพ "ลดการเคลื่อนไหว" ── */
@media (prefers-reduced-motion: reduce) {
  .dt *, .dt *::before, .dt *::after { animation: none !important; transition: none !important; }
  .dt-js .dt-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   v0.2 (10 ต.ค. 2569) · คอมแพค + 2 ธีม
   ① คอมแพค: ขนาดตัวอักษร/ระยะห่างอยู่ในตัวแปร --dt-* ชุดเดียว (ด้านล่าง) · ปรับทั้งเว็บ = แก้ที่นี่ที่เดียว
      · บทไม่บังคับเต็มจอ (สูงตามเนื้อหา) · บทแรกสูงไม่เกิน ~70svh · กว้างสุด 1240 px · จอสัมผัส: ปุ่ม/เมนูสูง ≥ 44 px
   ② 2 ธีม: <html data-qp-theme="dark|light"> — สคริปต์สั้นในหัวหน้าตั้งค่าก่อนวาด (ไม่กะพริบ) · ปุ่ม .dt-theme ในเมนูวน อัตโนมัติ → สว่าง → มืด
      · จำค่าใน localStorage "nx-theme" (auto | light | dark) · อัตโนมัติ = ตามเครื่อง · ไม่มี JS = มืด (ค่าเดิมของหน้า)
      · ภาพเคลื่อนไหว (canvas) ฟังเหตุการณ์ "qp-theme" ที่ document แล้วอ่านสี --qp-* ใหม่
      · สีมาจาก --qp-* ชุดเดียวกับระบบออกแบบกลาง · หน้าร้านปรับเฉพาะสีตัวหนังสือที่ contrast ไม่ถึง 4.5 (ด้านล่าง)
   ============================================================ */

/* ── ① ตัวแปรขนาด/ระยะ (ชุดเดียวทั้งเว็บ) ── */
.dt {
  --dt-fs-mega: clamp(32px, 5vw, 72px);       /* หัวใหญ่บทแรก (อังกฤษล้วน) */
  --dt-fs-title: clamp(22px, 2.4vw, 32px);    /* หัวบท */
  --dt-fs-h: clamp(18px, 1.5vw, 21px);        /* หัวรอง */
  --dt-fs-lead: clamp(15px, 1.1vw, 16px);     /* ย่อหน้านำ */
  --dt-fs-num-xl: clamp(56px, 6.6vw, 96px);   /* ตัวเลขใหญ่สุด */
  --dt-fs-num-lg: clamp(32px, 3.8vw, 52px);
  --dt-fs-num-md: clamp(22px, 2vw, 28px);
  --dt-pad-top: clamp(40px, 5.4vh, 64px);     /* ระยะบน/ล่างของบท */
  --dt-pad-bot: clamp(34px, 4.8vh, 52px);
  --dt-hero-top: clamp(88px, 11vh, 112px);    /* บทแรก (หลบเมนูบน 64 px) */
  --dt-gap: clamp(20px, 3vw, 44px);           /* ช่องระหว่างคอลัมน์/กลุ่ม */
  --dt-stack: 12px;                           /* ช่องหัว → เนื้อ → ปุ่ม */
  --dt-card-pad: clamp(16px, 1.8vw, 24px);    /* ระยะในการ์ด/ช่องตาราง */
  --dt-tap: 44px;                             /* ปุ่มบนจอสัมผัส */
}
.dt-wrap { max-width: 1240px; }
.dt-ch { min-height: 0; padding: var(--dt-pad-top) 0 var(--dt-pad-bot); }
main > .dt-ch:first-child, main > header.dt-ch { padding-top: var(--dt-hero-top); max-height: none; }
main > .dt-ch:first-child:not(.dt-ch--auto), main > header.dt-ch:not(.dt-ch--auto) { min-height: 0; }
.dt-mega { font-size: var(--dt-fs-mega); }
.dt-title { font-size: var(--dt-fs-title); line-height: 1.3; }
.dt-h { font-size: var(--dt-fs-h); }
.dt-lead { font-size: var(--dt-fs-lead); }
.dt-num--xl { font-size: var(--dt-fs-num-xl); }
.dt-num--lg { font-size: var(--dt-fs-num-lg); }
.dt-num--md { font-size: var(--dt-fs-num-md); }
.dt-stack { gap: var(--dt-stack); }
.dt-actions { margin-top: 18px; gap: 10px; }
.dt-split { gap: var(--dt-gap); }
.dt-foot { padding: 36px 0 24px; }
.dt-foot__base { margin-top: 28px; }
@media (pointer: coarse) {
  .dt-btn, .dt-btn--sm, .dt-mnav summary { min-height: var(--dt-tap); }
  .dt-theme { width: var(--dt-tap); height: var(--dt-tap); }
}

/* ── ② สีตัวหนังสือให้ contrast ≥ 4.5 ทั้ง 2 ธีม (เฉพาะหน้าร้าน · ตั้งที่ <html> = ตัวแปรที่อ้างต่อได้ค่าใหม่ด้วย) ── */
html[data-qp-theme="dark"] { --qp-faint: #7b8592; }
html[data-qp-theme="light"] { --qp-muted: #5b6459; --qp-faint: #687066; --qp-gold: #8a6420; --qp-warn: #8f5f15; --qp-data-3: #8a6420; --qp-data-5: #b84d33; }   /* data-5: สัญลักษณ์ธาตุ /crops มือถือ 4.26 → 4.78 (10 ต.ค. 69) */
html[data-qp-theme="light"] .dt-nav.is-solid { box-shadow: 0 1px 0 var(--qp-line); }

/* ── ปุ่มสลับธีม (ในเมนูบน · ไม่มี JS = ซ่อน) ── */
.dt-theme { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--qp-ink) 26%, transparent); background: transparent; color: var(--qp-ink); cursor: pointer; transition: border-color var(--qp-d-2) var(--qp-ease), background var(--qp-d-2) var(--qp-ease); }
html[data-nx-theme] .dt-theme { display: inline-flex; }
.dt-theme:hover { border-color: var(--qp-ink); background: color-mix(in srgb, var(--qp-ink) 6%, transparent); }
.dt-theme:focus-visible { outline: 2px solid var(--qp-green); outline-offset: 2px; }
.dt-theme svg { width: 18px; height: 18px; }
.dt-theme svg g { display: none; }
html[data-nx-theme="auto"] .dt-theme .i-auto, html[data-nx-theme="light"] .dt-theme .i-light, html[data-nx-theme="dark"] .dt-theme .i-dark { display: inline; }