/* ════════════════════════════════════════════════════════════════════════════
   หน้าตาของบล็อก — ใช้ร่วมกันระหว่างหน้าแอฟกับพรีวิวในตัวแต่งหน้า
   สีมาจากตัวแปรของหน้าที่เรียกใช้ (--red, --card ...) จึงตามโหมดมืดได้เอง
   ทุกตัวแปรใส่ค่าสำรองไว้ เผื่อหน้าไหนลืมประกาศ
   ════════════════════════════════════════════════════════════════════════════ */
.nb-blk{margin:12px 0}
.nb-blk:first-child{margin-top:12px}

/* ── แบนเนอร์ต้อนรับ ─────────────────────────────────────────────────────── */
.nb-wel{
  background:linear-gradient(135deg,var(--red-lt,#fdf0f0) 0%,#fff6f0 100%);
  border:1px solid #f6dcdc;border-radius:18px;padding:16px;
  display:flex;align-items:center;gap:14px;
}
.nb-wel h2{margin:0 0 3px;font-size:17px;font-weight:800;color:var(--red-d,#9e1b1b)}
.nb-wel p{margin:0;font-size:12px;color:var(--text-2,#656c78);line-height:1.5}
.nb-wel-top{
  margin-left:auto;flex:0 0 auto;text-align:center;background:#fff;
  border:1px solid #f0d6d6;border-radius:14px;padding:9px 13px;
  box-shadow:0 2px 8px rgba(198,40,40,.08);
}
.nb-wel-top b{display:block;font-size:19px;font-weight:900;line-height:1.1;color:var(--red,#c62828)}
.nb-wel-top small{font-size:9.5px;color:var(--text-3,#9ba2ae)}
@media(max-width:360px){.nb-wel-top{display:none}}

/* ── รูป: แบนเนอร์เลื่อน / รูปเดี่ยว / รูปหลายรูป ─────────────────────────── */
.nb-slide,.nb-single,.nb-tile{
  position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(135deg,var(--red,#c62828),var(--red-d,#9e1b1b));
}
.nb-slide.has-img,.nb-single.has-img,.nb-tile.has-img{background:var(--card,#fff)}
.nb-slide,.nb-single{aspect-ratio:1200/518}
.nb-slide img,.nb-single img,.nb-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.nb-cap{
  position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;
  display:flex;flex-direction:column;gap:2px;
}
.has-img .nb-cap{background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.08) 70%,transparent)}
.no-img .nb-cap{top:0;justify-content:center}
.nb-cap b{font-size:16px;font-weight:800;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.nb-cap span{font-size:12px;opacity:.95;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.3)}
[data-nb-t]{cursor:pointer}

.nb-car-track{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.nb-car-track::-webkit-scrollbar{display:none}
.nb-car-track .nb-slide{flex:0 0 100%;scroll-snap-align:center}
.nb-dots{display:flex;gap:5px;justify-content:center;margin-top:8px}
.nb-dots i{width:6px;height:6px;border-radius:3px;background:var(--line,#ebedf1);display:block;transition:width .2s}
.nb-dots i.on{background:var(--red,#c62828);width:16px}

.nb-multi{display:grid;gap:8px}
.nb-multi.c2{grid-template-columns:repeat(2,1fr)}
.nb-multi.c3{grid-template-columns:repeat(3,1fr)}
.nb-tile{aspect-ratio:1/1;border-radius:13px}
.nb-multi.c2 .nb-tile{aspect-ratio:4/3}
.nb-tile .nb-cap{padding:8px 9px}
.nb-tile .nb-cap b{font-size:12px}
.nb-tile .nb-cap span{font-size:10.5px}
.nb-tile.empty{background:transparent}

/* ช่องรูปว่าง (พรีวิวเท่านั้น) */
.nb-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 10px,#eceef1 10px,#eceef1 20px);
  color:#9ba2ae;
}
.nb-ph span{font-size:22px;opacity:.6}
.nb-ph small{font-size:11px}

/* ── แถบประกาศ ───────────────────────────────────────────────────────────── */
.nb-notice{
  display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:12px;
  font-size:13px;font-weight:600;
}
.nb-notice .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-notice .go{font-size:18px;opacity:.6;line-height:1}

/* ── หัวข้อ / ข้อความ ────────────────────────────────────────────────────── */
.nb-text h3{margin:0 0 4px;font-size:16px;font-weight:800;color:var(--text,#16181d)}
.nb-text p{margin:0;font-size:13px;color:var(--text-2,#656c78);line-height:1.6}
.nb-text.center{text-align:center}
.nb-text.tinted{padding:14px 15px;border-radius:14px}

/* ── สีพื้น (ใช้กับแถบประกาศและกล่องข้อความ) ───────────────────────────── */
.t-red{background:var(--red,#c62828);color:#fff}
.t-red h3,.t-red p{color:#fff}
.t-pink{background:var(--red-lt,#fdf0f0);color:var(--red-d,#9e1b1b)}
.t-pink h3{color:var(--red-d,#9e1b1b)}
.t-cream{background:#fdf6ea;color:#7a5410}
.t-cream h3{color:#7a5410}
.t-green{background:var(--green-lt,#e8f3ec);color:var(--green,#176b43)}
.t-green h3{color:var(--green,#176b43)}
.t-blue{background:#eaf1fd;color:#1d4ed8}
.t-blue h3{color:#1d4ed8}
.t-dark{background:#1f2328;color:#fff}
.t-dark h3,.t-dark p{color:#fff}

/* ── แถวสินค้าแนะนำ ──────────────────────────────────────────────────────── */
.nb-prow-h{display:flex;align-items:baseline;margin:0 0 8px}
.nb-prow-h h3{margin:0;font-size:16px;font-weight:800;color:var(--text,#16181d)}
.nb-prow-track{
  display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.nb-prow-track::-webkit-scrollbar{display:none}
.nb-pc{
  flex:0 0 132px;background:var(--card,#fff);border:1px solid var(--line,#ebedf1);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.nb-pc-img{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center}
.nb-pc-img img{width:100%;height:100%;object-fit:contain;display:block}
.nb-pc-img span{font-size:26px;opacity:.25}
.nb-pc-nm{
  padding:7px 9px 0;font-size:11.5px;font-weight:600;line-height:1.35;color:var(--text,#16181d);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px;
}
.nb-pc-pr{padding:3px 9px 0;font-size:13.5px;font-weight:800;color:var(--text,#16181d)}
.nb-pc-pr s{font-size:10px;font-weight:400;color:var(--text-3,#9ba2ae)}
.nb-pc-cm{margin:6px 7px 8px}
.nb-pc-cm .nb-cm{padding:5px 7px;border-radius:8px}
.nb-pc-cm .nb-cm .lb{font-size:9.5px}
.nb-pc-cm .nb-cm .v{font-size:12.5px}
.nb-pc>:last-child:not(.nb-pc-cm){padding-bottom:9px}
.nb-empty{
  padding:16px;border:1px dashed var(--line,#ebedf1);border-radius:12px;
  font-size:12px;color:var(--text-3,#9ba2ae);text-align:center;
}

/* ── ช่องค่าคอมบนการ์ดสินค้า (แอดมินเลือกแบบได้ที่บล็อกสินค้าทั้งหมด) ──────────
   เป็น "ข้อมูล" ไม่ใช่ "ปุ่ม" — ทุกแบบวางป้ายซ้าย ตัวเลขขวา แบบบรรทัดสรุปราคา
   (กดได้ทั้งการ์ด ไม่ใช่กดที่กล่องนี้) */
.nb-cm{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  border-radius:10px;padding:7px 10px;border:1px solid transparent;min-width:0;
}
/* การ์ดบนมือถือแคบมาก (~170px) ป้ายจึงต้องตัดบรรทัดได้ ห้ามตัดคำทิ้งเป็น "ค่าคอมขอ…"
   ส่วน % ลงบรรทัดของตัวเองใต้ป้ายเสมอ */
.nb-cm .lb{font-size:11px;font-weight:600;opacity:.88;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.nb-cm .lb em{display:block;font-style:normal;font-weight:700;font-size:10.5px;opacity:.85}
.nb-cm .v{font-size:15.5px;font-weight:800;letter-spacing:-.2px;white-space:nowrap}
/* เขียวอ่อน — ตั้งต้น */
.nb-cm.s-soft{background:var(--green-lt,#e8f3ec);border-color:rgba(23,107,67,.14);color:var(--green,#176b43)}
/* ชมพู โทนแดงนำชัย */
.nb-cm.s-pink{background:var(--red-lt,#fdf0f0);border-color:rgba(198,40,40,.16);color:var(--red,#c62828)}
/* เขียวเข้ม ตัวขาว */
.nb-cm.s-solid{background:var(--green,#176b43);color:#fff}
/* เส้นบาง ไม่มีพื้น */
.nb-cm.s-line{background:transparent;border-radius:0;border:0;border-top:1px dashed var(--line,#e2e5ea);
  padding:7px 1px 1px;color:var(--green,#176b43)}
.nb-cm.s-line .lb{color:var(--text-2,#656c78)}
/* ป้ายเล็ก — ตัวเลขอยู่ในป้ายเขียว ป้ายคำเป็นสีเทา */
.nb-cm.s-tag{background:transparent;padding:2px 0 0;color:var(--text-2,#656c78)}
.nb-cm.s-tag .v{background:var(--green-lt,#e8f3ec);color:var(--green,#176b43);border-radius:99px;padding:2px 9px;font-size:14px}
/* ยังไม่ตั้งค่าคอม */
.nb-cm.zero{background:transparent;border-color:var(--line,#ebedf1);color:var(--text-3,#9ba2ae)}
.nb-cm.zero .lb,.nb-cm.zero .v{font-size:11px;font-weight:600}

/* ── ภาพจำลองส่วนสินค้าทั้งหมด (พรีวิวเท่านั้น) ──────────────────────────── */
.nb-catmock{border:1px dashed #c9cdd4;border-radius:14px;padding:10px;background:rgba(255,255,255,.6)}
.nb-catmock-s{border:1px solid var(--line,#ebedf1);border-radius:99px;padding:7px 12px;font-size:11px;color:#9ba2ae;background:#fff}
.nb-catmock-c{display:flex;gap:5px;margin:8px 0}
.nb-catmock-c i{font-style:normal;font-size:10px;padding:3px 9px;border-radius:99px;border:1px solid var(--line,#ebedf1);background:#fff;color:#656c78}
.nb-catmock-c i.on{background:var(--red,#c62828);border-color:var(--red,#c62828);color:#fff}
.nb-catmock-h{font-size:13px;font-weight:800;margin:4px 0 6px}
.nb-catmock-h small{font-weight:400;color:#9ba2ae;font-size:11px}
.nb-catmock-g{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.nb-catmock-g>div{background:#fff;border:1px solid var(--line,#ebedf1);border-radius:10px;overflow:hidden;font-size:11px}
.nb-catmock-g .im{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:20px;opacity:.9}
.nb-catmock-g img{width:100%;height:100%;object-fit:contain}
.nb-catmock-g>div{display:flex;flex-direction:column}
.nb-catmock-g .nm{padding:5px 7px 0;font-size:10.5px;line-height:1.3;color:var(--text,#16181d);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nb-catmock-g b{display:block;padding:2px 7px 6px}
.nb-catmock-g .cmw{margin:auto 6px 6px}
.nb-catmock-g .nb-cm{padding:5px 7px;border-radius:8px}
.nb-catmock-g .nb-cm .lb{font-size:9.5px}
.nb-catmock-g .nb-cm .v{font-size:12.5px}