/* บริการเพิ่มเติม (njservices.js) — สไตล์ชุดเดียวที่ใช้ได้ทั้งหน้าแรกและหน้ารายละเอียดแปลง
 *
 * ⚠️ เว็บมีชุดสีอยู่ 2 ชุด (home.css โทนน้ำเงินเข้ม–ทอง · marketplace.css โทน navy–เขียว)
 * ไฟล์นี้จึงประกาศตัวแปรของตัวเองไว้ครบทุกค่า และ **ใช้ font-family:inherit ทุกที่**
 * เพื่อให้แต่ละหน้ายืมฟอนต์ของตัวเองไป — วางบนหน้าไหนก็ไม่ตีกับชุดสีของหน้านั้น
 * (คนละวิธีกับการเขียนสไตล์การ์ดซ้ำสองไฟล์ ซึ่งเคยทำให้ลืมแก้ที่ใดที่หนึ่งมาแล้ว)
 */
.njsv{
  --njsv-ink:#12315F; --njsv-sub:#5A7091; --njsv-line:#DCE3EF;
  --njsv-bg:#fff; --njsv-soft:#F5F8FC; --njsv-accent:#1E6FE0; --njsv-gold:#8A6A2E;
  --njsv-ok:#0F8A4F;
  font-family:inherit; color:var(--njsv-ink);
}

/* ---------- รายการบริการ ---------- */
.njsv-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.njsv-compact{ grid-template-columns:1fr; gap:6px; }
@media (max-width:760px){ .njsv-list{ grid-template-columns:1fr; } }

.njsv-item{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  background:var(--njsv-bg); border:1px solid var(--njsv-line); border-radius:11px; padding:12px 13px;
}
.njsv-item:hover{ border-color:#9FC0E8; }
.njsv-item input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--njsv-accent); cursor:pointer; }
.njsv-body{ display:block; min-width:0; }
.njsv-name{ display:block; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--njsv-ink); }
.njsv-icon{ font-style:normal; margin-right:7px; }
.njsv-desc{ display:block; font-style:normal; font-size:12.5px; line-height:1.65; color:var(--njsv-sub); margin-top:3px; }
/* ป้ายผู้ให้บริการ — ต้องอ่านออกทันทีว่าอันไหนบริษัททำเอง อันไหนต้องหาพันธมิตรมาให้ */
.njsv-by{
  display:inline-block; font-style:normal; font-size:11px; font-weight:700; line-height:1;
  border-radius:20px; padding:5px 9px; margin-top:7px;
}
.njsv-by.own{ background:#E8F5EE; color:var(--njsv-ok); }
.njsv-by.partner{ background:#F3EFE4; color:var(--njsv-gold); }
.njsv-item:has(input:checked){ border-color:var(--njsv-accent); background:#F6FAFF; }
.njsv-compact .njsv-item{ padding:9px 11px; }
.njsv-compact .njsv-name{ font-size:13.5px; }

/* ---------- ฟอร์ม ---------- */
.njsv-form{ display:grid; gap:13px; }
.njsv-contact{ display:grid; gap:13px; }
/* แบบเต็มความกว้าง (หน้าแรก) — รายการบริการกาง 3 คอลัมน์ ช่องกรอกยุบเป็นการ์ดกลางหน้า */
.njsv-wide .njsv-list{ grid-template-columns:repeat(3,1fr); }
.njsv-wide .njsv-contact{
  max-width:760px; margin:6px auto 0; background:#fff; border-radius:14px; padding:20px 22px;
}
@media (max-width:1080px){ .njsv-wide .njsv-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .njsv-wide .njsv-list{ grid-template-columns:1fr; } }
.njsv-fieldset{ display:grid; gap:8px; }
.njsv-legend{ font-size:13px; font-weight:700; color:var(--njsv-ink); }
.njsv-legend i{ font-style:normal; font-weight:400; color:var(--njsv-sub); }
.njsv-field{ display:grid; gap:5px; }
.njsv-field > span{ font-size:12.5px; font-weight:600; color:var(--njsv-sub); }
.njsv-field > span i{ font-style:normal; font-weight:400; }
.njsv-field input, .njsv-field textarea{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; color:var(--njsv-ink);
  background:var(--njsv-soft); border:1px solid var(--njsv-line); border-radius:10px; padding:11px 13px;
}
.njsv-field textarea{ resize:vertical; line-height:1.6; }
.njsv-field input:focus, .njsv-field textarea:focus{ outline:2px solid var(--njsv-accent); outline-offset:-1px; background:#fff; }
.njsv-hint{ font-style:normal; font-size:12px; line-height:1.6; color:var(--njsv-sub); }
.njsv-row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .njsv-row2{ grid-template-columns:1fr; } }

/* รหัสทรัพย์ที่ล็อกไว้ — เป็นพระเอกของกล่องนี้ ต้องเด่นพอที่ผู้ซื้อจะจดไปแจ้งทางไลน์ได้ */
.njsv-code.locked{
  background:#0B2549; color:#fff; border-radius:12px; padding:13px 15px;
}
.njsv-code-label{ display:block; font-size:11.5px; letter-spacing:.04em; color:#9DBBE0; }
.njsv-code-val{
  display:block; font-size:24px; font-weight:800; letter-spacing:.06em; margin:2px 0 5px;
  font-family:var(--nj-font);
}
.njsv-code-note{ display:block; font-size:12px; line-height:1.65; color:#C7DAF2; }

.njsv-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.njsv-submit{
  font-family:inherit; font-size:15.5px; font-weight:700; color:#fff; cursor:pointer;
  background:var(--njsv-accent); border:none; border-radius:11px; padding:14px 18px; width:100%;
}
.njsv-submit:hover{ background:#1558B8; }
.njsv-submit:disabled{ opacity:.6; cursor:default; }
.njsv-pdpa{ font-size:11.5px; line-height:1.65; color:var(--njsv-sub); margin:0; }

.njsv-msg{ font-size:13px; line-height:1.6; border-radius:10px; padding:10px 13px; }
.njsv-msg.bad{ background:#FEF2F2; border:1px solid #FCA5A5; color:#B91C1C; }
.njsv-msg.wait{ background:#FFF8E6; border:1px solid #FDE68A; color:#8A5A00; }

.njsv-done{
  display:grid; gap:6px; background:#F1F9F4; border:1px solid #C6E6D2; border-radius:12px; padding:16px 17px;
}
.njsv-done b{ font-size:16px; color:#15803D; }
.njsv-done span{ font-size:13.5px; line-height:1.7; color:#1B5334; }
.njsv-done-sub{ font-size:12.5px !important; color:#3F6B52 !important; }
.njsv-done a{ color:#0F8A4F; font-weight:700; }

/* ---------- แถบบนหน้าแรก ----------
 * ⚠️ **แถบนี้ต้องเป็นพื้นสว่าง ห้ามทำเป็นพื้นเข้ม** — มันวางต่อจากแถบ "บริการ" (#E7EEF5 ฟ้าอ่อน)
 * และก่อนแถบ "แนะนำระบบทำงาน" (.nj-intro พื้น #050F1D เกือบดำ) ซึ่งตั้งใจไว้ให้เป็นจังหวะเข้ม
 * ทำแถบนี้เข้มด้วยเมื่อไหร่ = พื้นเข้มสองแถบติดกัน จังหวะสีของหน้าแรกที่วางไว้จะพังทันที
 * เส้นขอบบนมีไว้กันไม่ให้กลืนเป็นแถบเดียวกับ "บริการ" ที่อยู่เหนือขึ้นไป
 */
.njsv-sec{ background:var(--paper,#F4F7FA); color:#0B1F3A; border-top:1px solid #CFDBE6; }
.njsv-sec .njsv-in{ max-width:1280px; margin:0 auto; padding:52px 32px; }
.njsv-sec .njsv-eyebrow{ font-size:13px; letter-spacing:.06em; color:#1B4B7A; margin-bottom:16px; }
/* หัวข้อบนหน้าแรกใช้ฟอนต์กลางตัวเดียวกับทั้งเว็บแล้ว (รวมฟอนต์ 20 ก.ย. 2569) */
.njsv-sec h2{
  font-family:var(--nj-font); font-weight:500; font-size:38px; line-height:1.38;
  letter-spacing:-0.01em; margin:0 0 14px; color:#0B1F3A;
}
.njsv-sec .njsv-lede{ font-size:16px; font-weight:300; line-height:1.75; color:#3D5470; max-width:720px; margin:0; }
.njsv-sec .njsv-head{ margin-bottom:30px; }
.njsv-sec .njsv-item{ border-color:#CFDBE6; }
.njsv-sec .njsv-contact{ border:1px solid #CFDBE6; }
@media (max-width:980px){
  .njsv-sec h2{ font-size:29px; }
  .njsv-sec .njsv-in{ padding:40px 20px; }
}

/* ---------- ทำเนียบบริษัทพันธมิตร (แผงหลังติ๊กบริการของพันธมิตร · หน้ารวมพันธมิตร) ---------- */
.njsv-pps{ display:grid; gap:12px; }
.njsv-pp{ border:1px solid #E3CC8F; background:#FFFCF4; border-radius:12px; padding:14px; display:grid; gap:10px; }
.njsv-pp-h{ display:flex; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; align-items:baseline; }
.njsv-pp-h b{ font-size:14.5px; color:var(--njsv-ink); }
.njsv-pp-h span{ font-size:12px; color:var(--njsv-sub); }
.njsv-opt{ display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--njsv-line); border-radius:10px; padding:10px 12px; cursor:pointer; }
.njsv-opt input{ margin-top:4px; flex:none; accent-color:var(--njsv-accent); }
.njsv-opt:has(input:checked){ border-color:var(--njsv-accent); }
.njsv-opt b{ font-size:13.5px; color:var(--njsv-ink); }
.njsv-opt small{ display:block; font-size:12px; color:var(--njsv-sub); line-height:1.6; }
.njsv-rec{ font-style:normal; font-size:10.5px; font-weight:700; background:#EAF1FC; color:#1552B0; border-radius:4px; padding:1px 6px; }
.njsv-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:10px; }
.njsv-pc{ background:#fff; border:1px solid var(--njsv-line); border-radius:10px; padding:12px; display:grid; gap:7px; align-content:start; min-width:0; }
.njsv-pc.sel{ border-color:var(--njsv-accent); box-shadow:0 0 0 2px #EAF1FC; }
.njsv-pc-top{ display:flex; gap:10px; align-items:center; min-width:0; }
.njsv-logo{ width:38px; height:38px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--njsv-ink); color:#fff; font-weight:700; }
.njsv-pc-name{ font-size:13.5px; font-weight:600; color:var(--njsv-ink); line-height:1.35; min-width:0; overflow-wrap:anywhere; }
.njsv-pc-name small{ display:block; font-weight:400; font-size:11.5px; color:var(--njsv-sub); }
.njsv-pc-tag{ margin:0; font-size:12.5px; color:var(--njsv-ink); line-height:1.55; }
.njsv-chip{ justify-self:start; font-size:11px; font-weight:600; border-radius:4px; padding:2px 7px; }
.njsv-chip.ok{ background:#E8F5EE; color:var(--njsv-ok); }
.njsv-chip.warn{ background:#FFF6DC; color:#7A5A00; }
.njsv-facts{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0; font-size:12px; }
.njsv-facts dt{ color:var(--njsv-sub); }
.njsv-facts dd{ margin:0; color:var(--njsv-ink); overflow-wrap:anywhere; }
.njsv-links{ display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12px; }
.njsv-links a{ color:#1552B0; text-decoration:underline; text-underline-offset:2px; }
.njsv-choose{ font-family:inherit; font-size:12.5px; font-weight:700; border-radius:8px; padding:8px 10px; cursor:pointer; border:1px solid var(--njsv-accent); background:#fff; color:var(--njsv-accent); }
.njsv-pc.sel .njsv-choose{ background:var(--njsv-accent); color:#fff; }
.njsv-choose:focus-visible, .njsv-links a:focus-visible{ outline:3px solid #D8B96B; outline-offset:2px; }
.njsv-disclose{ margin:0; font-size:12px; color:var(--njsv-sub); line-height:1.6; border-top:1px dashed var(--njsv-line); padding-top:8px; }
.njsv-disclose b{ color:var(--njsv-ink); }
.njsv-refs{ display:grid; gap:3px; margin-top:6px; font-size:13px; }
.njsv-refs small{ color:var(--njsv-sub); font-size:12px; }

/* ---------- แบบกระชับ (brief) — แถบข้างของหน้าแปลง (2026-09-27) ----------
   ชื่อ/เบอร์ขึ้นก่อน · ปุ่มเหตุผลแตะเดียว · รายการบริการพับไว้ (ไม่บังคับ) */
.njsv-brief .njsv-contact{ gap:11px; }
.njsv-why{ display:flex; flex-wrap:wrap; gap:6px; }
.njsv-why-b{
  min-height:36px; padding:6px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--njsv-line); background:#fff; color:var(--njsv-ink);
  font:inherit; font-size:12.5px; font-weight:600; line-height:1.3;
}
.njsv-why-b:hover{ border-color:var(--njsv-accent); }
/* สถานะเลือกแล้วบอกทั้งสีและเครื่องหมาย ✓ ไม่ใช่สีอย่างเดียว */
.njsv-why-b[aria-pressed="true"]{ background:#0B2549; border-color:#0B2549; color:#fff; }
.njsv-why-b[aria-pressed="true"]::before{ content:"✓ "; }
.njsv-why-b:focus-visible{ outline:3px solid var(--njsv-accent); outline-offset:2px; }
.njsv-more{ border:1px solid var(--njsv-line); border-radius:10px; background:var(--njsv-soft); }
.njsv-more > summary{
  cursor:pointer; padding:11px 13px; font-size:13px; font-weight:700; color:var(--njsv-ink); list-style:none;
}
.njsv-more > summary::-webkit-details-marker{ display:none; }
.njsv-more > summary::after{ content:"＋"; float:right; color:var(--njsv-sub); }
.njsv-more[open] > summary::after{ content:"－"; }
.njsv-more > summary i{ font-style:normal; font-weight:400; color:var(--njsv-sub); }
.njsv-more > .njsv-fieldset, .njsv-more > .njsv-pps{ padding:0 10px 10px; }