/* ============================================================
   NÜXGROW · กริดบล็อก (bento) + แผงข้อมูล v0.1.1 (14 ต.ค. 2569 · หัวบล็อกขึ้นบรรทัดใหม่แทนตัดคำ · ตัวอักษร ≥ 14 px)
   ใช้กับหน้าที่ใส่ <body class="… dt-dense bx-on"> · โหลดท้ายสุด (หลัง dense.css)
   หลัก: ทุกบล็อกอยู่บนกริด 12 ช่องเดียวกัน · ช่องห่างเท่ากันทุกทิศ · บล็อกในแถวเดียวกันสูงเท่ากัน
         · ทุกบล็อกมีหัวแบบเดียวกัน (เลข · ชื่อ · ป้ายขวา) · ไม่มีข้อความลอยนอกบล็อก · ตัวแปร --qp-* เท่านั้น
   ============================================================ */
.bx-on { --bx-gap: 12px; --bx-r: 14px; --bx-pad: 16px; }
.bx-on main { background: var(--qp-bg); }
.bx-page { padding: 76px 0 var(--bx-gap); border-top: 0; }
.bx-page + .bx-page { padding-top: 0; }
.bx-bc { margin: 0 0 10px; font-size: 14px; color: var(--qp-muted); }
.bx-bc a { color: var(--qp-ink-2); text-decoration: none; }
.bx-bc a:hover { text-decoration: underline; }

/* ── กริด 12 ช่อง ── */
.bx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bx-gap); align-items: stretch; grid-auto-flow: row dense; }
.bx-grid > * { min-width: 0; }
.s-3 { grid-column: span 3; } .s-4 { grid-column: span 4; } .s-5 { grid-column: span 5; } .s-6 { grid-column: span 6; }
.s-7 { grid-column: span 7; } .s-8 { grid-column: span 8; } .s-9 { grid-column: span 9; } .s-12 { grid-column: 1 / -1; }
.r-2 { grid-row: span 2; }

/* ── บล็อก ── */
.bx { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; border: 1px solid var(--qp-line); border-radius: var(--bx-r); background: var(--qp-surface); overflow: hidden; }
.bx__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; padding: 8px var(--bx-pad); border-bottom: 1px solid var(--qp-line); }
.bx__no { font-family: var(--qp-font-mono); font-size: 12px; font-weight: 500; color: var(--qp-gold); }
.bx__t { font-family: var(--qp-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--qp-ink-2); overflow-wrap: anywhere; }
.bx__th { font-size: 14px; font-weight: 600; color: var(--qp-ink-2); overflow-wrap: anywhere; }   /* ชื่อไทยต่อท้ายหัว */
.bx__tag { margin-left: auto; flex: none; }
.bx__tag .dt-pill, .bx__tag.dt-pill { height: 22px; padding: 0 9px; font-size: 12px; }
.bx__bd { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: var(--bx-pad); min-width: 0; }
.bx__bd--flush { padding: 0; }
.bx__bd > .dt-actions { margin-top: auto; padding-top: 4px; }
.bx__ft { padding: 10px var(--bx-pad); border-top: 1px solid var(--qp-line); font-size: 14px; line-height: 1.55; color: var(--qp-ink-2); }
.bx h1, .bx h2, .bx h3 { margin: 0; }
.bx p { margin: 0; }
.bx__title { font-weight: 600; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.22; letter-spacing: -.01em; color: var(--qp-ink); }
.bx__h { font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--qp-ink); }
.bx__lead { font-size: 15px; line-height: 1.65; color: var(--qp-ink-2); max-width: 66ch; }
.bx__muted { font-size: 14px; line-height: 1.6; color: var(--qp-muted); }
.bx--hero .bx__bd { gap: 12px; padding: 20px var(--bx-pad); }
.bx--accent { border-color: color-mix(in srgb, var(--qp-gold) 60%, var(--qp-line)); }
.bx--cta { background: color-mix(in srgb, var(--qp-green) 7%, var(--qp-surface)); }

/* ── ตัวเลขใหญ่ (แบบการ์ด "by the numbers") ── */
.bx-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.bx-stat > div { padding: 12px var(--bx-pad); border-top: 1px solid var(--qp-line); }
.bx-stat > div:nth-child(-n+2) { border-top: 0; }
.bx-stat > div:nth-child(odd) { border-right: 1px solid var(--qp-line); }
.bx-stat b { display: block; font-family: var(--qp-font-mono); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.02em; color: var(--qp-ink); }
.bx-stat b small { font-size: 14px; letter-spacing: 0; color: var(--qp-muted); margin-left: 4px; }
.bx-stat span { display: block; margin-top: 4px; font-size: 14px; color: var(--qp-ink-2); }

/* ── รายการแถว (สถานะ · ฟีเจอร์ · ค่า) ── */
.bx-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bx-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px var(--bx-pad); border-top: 1px solid var(--qp-line); font-size: 14px; line-height: 1.5; color: var(--qp-ink-2); }
.bx-rows > li:first-child { border-top: 0; }
.bx-rows > li > b { color: var(--qp-ink); font-weight: 600; }
.bx-rows .dt-pill { white-space: normal; height: auto; min-height: 22px; padding: 2px 9px; line-height: 1.35; text-align: center; }
.bx-feat { list-style: none; margin: 0; padding: 0; display: grid; }
.bx-feat > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; padding: 10px var(--bx-pad); border-top: 1px solid var(--qp-line); }
.bx-feat > li:first-child { border-top: 0; }
.bx-feat .k { grid-row: span 2; font-family: var(--qp-font-mono); font-size: 12px; color: var(--qp-gold); padding-top: 2px; }
.bx-feat h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--qp-ink); }
.bx-feat p { font-size: 14px; line-height: 1.55; color: var(--qp-ink-2); }
.bx-feat--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-feat--2 > li:nth-child(2) { border-top: 0; }
.bx-feat--2 > li:nth-child(odd) { border-right: 1px solid var(--qp-line); }
.bx-feat--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-feat--3 > li:nth-child(-n+3) { border-top: 0; }
.bx-feat--3 > li:not(:nth-child(3n)) { border-right: 1px solid var(--qp-line); }

/* ── แผงย่อยแบบห้องควบคุม (เช่น อุปกรณ์ 6 ตัว) ── */
.bx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bx-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--qp-line); border-radius: 10px; background: var(--qp-surface-2); min-width: 0; }
.bx-tile .k { font-family: var(--qp-font-mono); font-size: 12px; color: var(--qp-gold); }
.bx-tile b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--qp-ink); }
.bx-tile span { font-size: 14px; line-height: 1.5; color: var(--qp-ink-2); }

/* ── สื่อในบล็อก (ภาพ · ตัวจำลอง) ── */
.bx__media { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--qp-surface-2); min-height: 0; }
.bx__media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bx__sim { flex: 1 1 auto; padding: 12px; min-width: 0; }
.bx__sim > [data-sim] { margin: 0 !important; }
.bx-shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bx-shots figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bx-shots img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--qp-line); border-radius: 8px; background: var(--qp-surface-2); }
.bx-shots figcaption { font-size: 14px; line-height: 1.45; color: var(--qp-ink-2); }
.bx-shots figcaption b { color: var(--qp-ink); }

/* ── แพ็กเกจ (แอป) ── */
.bx-tier .bx__bd { gap: 6px; }
.bx-tier .price { font-family: var(--qp-font-mono); font-size: 22px; font-weight: 500; color: var(--qp-green); }
.bx-tier .annual { font-size: 14px; color: var(--qp-ink-2); }
.bx-tier .fit { font-size: 14px; line-height: 1.5; color: var(--qp-ink-2); }
.bx-tier .fit b { color: var(--qp-ink); }
.bx-tier ul { margin: 2px 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--qp-ink-2); }

/* ── แถบติดต่อเป็นบล็อก ── */
.bx-ct .bx__bd { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bx-ct .bx__bd > p { font-size: 15px; line-height: 1.55; color: var(--qp-ink-2); }
.bx-ct .bx__bd > p b { color: var(--qp-ink); }
.bx-ct .dt-actions { margin: 0; }

/* ── จอกลาง/มือถือ ── */
@media (max-width: 1100px) {
  .s-3 { grid-column: span 6; } .s-4, .s-5 { grid-column: span 6; } .s-7, .s-8, .s-9 { grid-column: 1 / -1; } .s-6 { grid-column: span 6; }
  .r-2 { grid-row: auto; }
  .bx-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-feat--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-feat--3 > li:nth-child(3) { border-top: 1px solid var(--qp-line); }
  .bx-feat--3 > li:not(:nth-child(3n)) { border-right: 0; }
  .bx-feat--3 > li:nth-child(odd) { border-right: 1px solid var(--qp-line); }
}
@media (max-width: 760px) {
  .bx-on { --bx-pad: 14px; }
  .bx-page { padding-top: 72px; }
  .bx-grid > [class*="s-"] { grid-column: 1 / -1; }
  .bx-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-feat--2, .bx-feat--3 { grid-template-columns: minmax(0, 1fr); }
  .bx-feat--2 > li, .bx-feat--3 > li { border-right: 0 !important; border-top: 1px solid var(--qp-line) !important; }
  .bx-feat--2 > li:first-child, .bx-feat--3 > li:first-child { border-top: 0 !important; }
  .bx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-stat b { font-size: 24px; }
}

/* ── /plant-factory ในกริดบล็อก ── */
.pfx-herocard { isolation: isolate; }
.pfx-herocard .pfx-hero__cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.pfx-herocard .pfx-hero__shade { position: absolute; inset: 0; z-index: 1; }
.pfx-herocard > .bx__hd, .pfx-herocard > .bx__bd { position: relative; z-index: 2; }
.pfx-herocard > .bx__hd { background: color-mix(in srgb, var(--qp-surface) 80%, transparent); }
.pfx-herocard .dt-mega { font-size: clamp(30px, 3.6vw, 52px); line-height: 1; margin: 0; }
.bx-helix .pfx-fig { margin: 0; }
.bx-helix .pfx-fig__stage { max-width: 360px; margin: 0 auto; }
.bx-helix .pfx-fig figcaption, .bx-helix .pfx-fig > p { margin-top: 6px; font-size: 13px; color: var(--qp-muted); text-align: center; }
.bx-helix .pfx-ana__i { padding: 7px 0; }
.bx-helix .pfx-ana__i:first-child { border-top: 0; }
.bx-helix .pfx-dlv { margin: 0; }
.bx-helix .pfx-dlv li { padding: 8px 0; font-size: 15px; }
.bx-helix .pfx-dlv li:first-child { border-top: 0; }
.bx-helix:has(.pfx-ana__i:hover) .pfx-ana__i:not(:hover) { opacity: .42; }
.bx-helix:has(.pfx-ana__i--1:hover) .pfx-pin--1, .bx-helix:has(.pfx-ana__i--2:hover) .pfx-pin--2,
.bx-helix:has(.pfx-ana__i--3:hover) .pfx-pin--3, .bx-helix:has(.pfx-ana__i--4:hover) .pfx-pin--4,
.bx-helix:has(.pfx-ana__i--5:hover) .pfx-pin--5, .bx-helix:has(.pfx-ana__i--6:hover) .pfx-pin--6 { background: var(--qp-gold); transform: scale(1.18); box-shadow: 0 0 0 8px color-mix(in srgb, var(--qp-gold) 22%, transparent); }
.bx-on .pkgrid { gap: var(--bx-gap); }
.bx-on .pk { border-radius: var(--bx-r); }
.bx-on .pknote { margin: 0; padding: 0; border-top: 0; max-width: none; }
.bx-on .pfx-chart { border: 0; padding: 0; background: none; }
.bx-on .pfx-lw__bar { margin-top: 4px; }
.bx-on .pfx-cust { text-align: left; }
.bx-on .pfx-cust::before { display: none; }
.bx-on .pfx-cfg-head { padding: 0; }
.bx-on #cfg { padding-top: 0; }
.bx-on #cfg .card, .bx-on #cfg .out > * { border-radius: var(--bx-r); }
.bx-on .wrap { max-width: 1360px; padding: 0 clamp(14px, 2.4vw, 32px) 28px; gap: var(--bx-gap); }

/* ── /we-grow · /you-grow ในกริดบล็อก ── */
.bx-on .v-env__panel { padding: 6px 12px 0; border-radius: 10px; background: var(--qp-surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.bx-on .v-ocbox .bx__sim { display: flex; align-items: center; }
.bx-on .v-ocbox .bx__sim > [data-sim] { width: 100%; }
.bx-on .v-ocline { margin: 0; }
.bx-on .v-lib .dt-num--xl { font-size: clamp(56px, 6vw, 84px); line-height: 1; }
.bx-on .n6-dots { max-width: none; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 5px; }
@media (max-width: 560px) { .bx-on .n6-dots { grid-template-columns: repeat(15, minmax(0, 1fr)); } }