/*!
 * Vinaly B2B 8.47.0 (gói C) — Trang SP: thanh 5 tab + 3 thanh info cột trái.
 * Copy 1:1 mockup Vinaly_Mockup_ProductPage_HubAnh_AnhSP_2026-07.html (v4.3) màn ①.
 * Namespace `.vnb2b-pdt*` — KHÔNG đụng class nào của Flatsome / khối RFQ.
 */
.vnb2b-pdt { --b:#F2A42C; --bd:#D97706; --ink:#3D2914; --mut:#5C677D; --line:#E5E7EB; --bg:#FFF8E7; }
.vnb2b-pdt { margin:18px 0 8px; color:var(--ink); }
.vnb2b-pdt *, .vnb2b-pdt *:before, .vnb2b-pdt *:after { box-sizing:border-box; }

/* ---- Thanh tab ---- */
.vnb2b-pdt-bar-nav {
	background:#fff; border:1.5px solid var(--bd); border-radius:11px; padding:5px;
	display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-bottom:12px;
}
.vnb2b-pdt-t {
	border:0; background:none; font-size:14px; font-weight:700; color:var(--mut);
	padding:9px 14px; border-radius:8px; cursor:pointer; font-family:inherit; line-height:1.3;
}
.vnb2b-pdt-t:hover { background:var(--bg); color:var(--bd); }
.vnb2b-pdt-t.on { background:var(--b); color:#3D2914; }
.vnb2b-pdt-cta {
	margin-left:auto; background:var(--bd); color:#fff; padding:9px 16px; border-radius:8px;
	font-size:14px; font-weight:800; cursor:pointer; white-space:nowrap;
}
.vnb2b-pdt-cta:hover { filter:brightness(1.06); }

/* ---- Khối nội dung: CHỈ ẩn/hiện, nội dung LUÔN có trong HTML (SEO) ----
   Mặc định HIỆN HẾT: JS lỗi / bị chặn thì khách vẫn đọc đủ 5 khối (không mất trắng nội dung).
   JS gắn `.js-on` lên khung mới bật chế độ tab. Không có đường nào lazy-load. */
.vnb2b-pdt.js-on .vnb2b-pdt-panel { display:none; }
.vnb2b-pdt.js-on .vnb2b-pdt-panel.on { display:block; }
.vnb2b-pdt:not(.js-on) .vnb2b-pdt-bar-nav { display:none; }
.vnb2b-pdt-h { font-size:19px; margin:0 0 10px; font-weight:800; }
.vnb2b-pdt-sub { font-size:15px; margin:16px 0 8px; font-weight:800; }
/* Tab rỗng — CHỈ quản trị thấy, kèm lý do + chỗ bổ sung. */
.vnb2b-pdt-empty { background:#FFF8E7; border:1px dashed #D97706; border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.6; color:#3D2914; }
/* Đánh giá Woo render nguyên bản trong tab — không ép style, chỉ chặn tràn ngang. */
.vnb2b-pdt-panel #reviews { max-width:100%; }
.vnb2b-pdt-panel p { margin:0 0 10px; }

/* ---- Bảng ---- */
.vnb2b-pdt-tb { width:100%; max-width:620px; border-collapse:collapse; background:#fff; margin:0 0 12px; }
.vnb2b-pdt-tb th, .vnb2b-pdt-tb td { padding:8px 10px; border-bottom:1px solid #f1efec; font-size:14px; text-align:left; vertical-align:top; }
.vnb2b-pdt-tb thead th { background:var(--bg); font-size:12.5px; text-transform:uppercase; color:var(--mut); letter-spacing:.3px; }
.vnb2b-pdt-tb tbody th { width:180px; font-weight:700; color:var(--ink); }
.vnb2b-pdt-moq { font-size:13px; color:var(--mut); }

/* ---- Lưới ảnh trong tab ---- */
.vnb2b-pdt-imgs { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin:10px 0 14px; }
.vnb2b-pdt-imgs figure { margin:0; }
.vnb2b-pdt-imgs img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; }
.vnb2b-pdt-imgs figcaption { font-size:12px; color:var(--mut); margin-top:4px; line-height:1.4; }

/* ---- 3 thanh info cột trái (dưới gallery) ---- */
.vnb2b-pdt-side { margin:10px 0 4px; display:flex; flex-direction:column; gap:7px; clear:both; }
/* Sau khi JS dời xuống dưới gallery: tách khỏi dải thumbnail cho thoáng. */
.vnb2b-pdt-side.moved { margin-top:14px; }
.vnb2b-pdt-bar {
	width:100%; text-align:left; background:#fff; border:1px solid #E5E7EB; border-radius:10px;
	padding:9px 11px; font-size:13.5px; cursor:pointer; display:flex; align-items:center; gap:8px;
	flex-wrap:wrap; font-family:inherit; color:#3D2914; line-height:1.4;
}
.vnb2b-pdt-bar:hover { border-color:#D97706; background:#FFF8E7; }
.vnb2b-pdt-bar .lb { font-weight:400; }
.vnb2b-pdt-bar .vl { color:#5C677D; font-size:12.5px; }
.vnb2b-pdt-bar .go { margin-left:auto; color:#D97706; font-weight:700; font-size:12.5px; white-space:nowrap; }
/* Thanh thiếu số liệu — CHỈ quản trị thấy, để QC biết là "chưa nhập" chứ không phải "code chết". */
.vnb2b-pdt-bar.dim { border-style:dashed; background:#fbfaf8; }
.vnb2b-pdt-adm { color:#B45309; font-size:11.5px; font-style:italic; }

/* =====================================================================================
 * 8.51.0 (gói E · B7) — E21…E26: sửa bố cục panel, bảng, ảnh, thanh tab.
 * ===================================================================================== */

/* E25 — thanh tab KHÔNG BAO GIỜ tràn ngang (trước chỉ cuộn ở ≤640px; ở 390px thanh rộng 858px
   nên wrap/tràn — vi phạm Vinaly_Rule_Mobile_KhongTranNgang). Nay cuộn ngang ở MỌI khổ. */
.vnb2b-pdt-bar-nav { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.vnb2b-pdt-bar-nav::-webkit-scrollbar { display:none; }
.vnb2b-pdt-t { flex:0 0 auto; scroll-snap-align:start; }

/* E22 — MỘT cỡ cột nhãn cho MỌI bảng trong panel, kể cả bảng attributes của Woo (trước 100px vs
   245px nên 2 bảng trong tab Kích thước nhìn như 2 trang dán vào nhau). */
.vnb2b-pdt-tb tbody th,
.vnb2b-pdt-panel .woocommerce-product-attributes th,
.vnb2b-pdt-panel .shop_attributes th { width:38%; font-weight:700; color:var(--ink); }
.vnb2b-pdt-panel .woocommerce-product-attributes,
.vnb2b-pdt-panel .shop_attributes { width:100%; max-width:620px; border-collapse:collapse; background:#fff; margin:0 0 12px; }
.vnb2b-pdt-panel .woocommerce-product-attributes th, .vnb2b-pdt-panel .woocommerce-product-attributes td,
.vnb2b-pdt-panel .shop_attributes th, .vnb2b-pdt-panel .shop_attributes td { padding:8px 10px; border-bottom:1px solid #f1efec; font-size:14px; text-align:left; vertical-align:top; }
.vnb2b-pdt-panel .shop_attributes p { margin:0; }

/* E23 — ảnh trong MỌI tab cùng 1 tỉ lệ (trước: tab In logo full-width ~440px × 6 = panel dài
   ~2.800px cho 185 chữ, tab Đóng gói chỉ ~130px). Bấm để mở lớn (lightbox tự viết, không lib). */
.vnb2b-pdt-imgs { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.vnb2b-pdt-imgs figure { position:relative; }        /* E24 — mốc cho mọi lớp phủ trong figure. */
.vnb2b-pdt-imgs img { aspect-ratio:1/1; object-fit:cover; cursor:zoom-in; }
/* E24 — watermark (lớp phủ tuyệt đối) KHÔNG được đè chữ caption nữa. */
.vnb2b-pdt-imgs figcaption { position:relative; z-index:2; background:#fff; }

/* E21 — panel có CẢ bảng lẫn ảnh: bảng bên trái, ảnh bên phải (trước bảng chiếm ~790/1110px,
   nửa phải trắng trơn). Trình duyệt không hỗ trợ :has() thì giữ nguyên bố cục dọc cũ.

   ❗8.51.1 (N2 — P1 prod, mọi khách desktop) — SELECTOR PHẢI BÁM CLASS ACTIVE `.on`.
   Bản 8.51.0 viết `.vnb2b-pdt-panel:has(…):has(…) { display:grid }` = specificity (0,3,0), BẰNG
   ĐIỂM với cơ chế ẩn tab `.vnb2b-pdt.js-on .vnb2b-pdt-panel { display:none }` (0,3,0) và đứng SAU
   ⇒ THẮNG ⇒ panel Đóng gói (panel duy nhất có đồng thời bảng + ảnh) **không bao giờ bị ẩn**, dính
   thêm bên dưới bất kể đang mở tab nào. Nay thêm `.vnb2b-pdt.js-on` + `.on` ⇒ (0,6,0) và chỉ áp
   cho panel ĐANG MỞ.
   LUẬT TỪ NAY: mọi layout mới cho panel tab phải bám `.on`, không bám riêng nội dung — không thì
   đánh nhau với cơ chế ẩn/hiện. QC phải đếm: số panel `display != none` LUÔN = 1. */
@media (min-width:1024px) {
	.vnb2b-pdt.js-on .vnb2b-pdt-panel.on:has(> .vnb2b-pdt-tb):has(> .vnb2b-pdt-imgs) {
		display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 24px; align-items:start;
	}
	.vnb2b-pdt.js-on .vnb2b-pdt-panel.on:has(> .vnb2b-pdt-tb):has(> .vnb2b-pdt-imgs) > * { grid-column:1; }
	.vnb2b-pdt.js-on .vnb2b-pdt-panel.on:has(> .vnb2b-pdt-tb):has(> .vnb2b-pdt-imgs) > .vnb2b-pdt-imgs {
		grid-column:2; grid-row:1 / span 50; margin-top:0;
	}
	.vnb2b-pdt-tb, .vnb2b-pdt-panel .shop_attributes { max-width:none; }
	/* 8.54.0 (H2) — BỎ HẲN rule ẩn 3 thanh info của E26. Triển: "vẫn đang bị ẩn các trường: Ước Đóng
	   gói, Trợ lý kiểu in, đóng gói…" ⇒ 3 thanh này PHẢI hiện ở MỌI khổ. E26 (spec gói E) suy luận
	   rằng chúng lặp thông tin của card phải nên ẩn ở desktop — sai với cách Triển dùng: đây là đường
	   dẫn nhanh xuống đúng tab, và là chỗ đọc số nhanh nhất. KHÔNG ẩn nữa, đừng thêm lại. */

	/* Trong bố cục 2 cột (E21), ảnh chỉ chiếm nửa panel ⇒ 3 cột sẽ quá nhỏ, dùng 2 cột. */
	.vnb2b-pdt.js-on .vnb2b-pdt-panel.on:has(> .vnb2b-pdt-tb):has(> .vnb2b-pdt-imgs) > .vnb2b-pdt-imgs {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

/* =====================================================================================
 * 8.52.0 (H5 + H7 — Triển 30/07) — KHUNG PANEL: viền + nền xám, nội dung KHÔNG lòi ra.
 *
 * H5: nội dung tab đang tràn rộng hơn thanh tab (thanh tab có viền bo, nội dung thì trần) nên nhìn
 * như bể bố cục — lồi/lõm/phình ngang. Nay panel là 1 THẺ có viền + nền xám nhạt, rộng ĐÚNG bằng
 * thanh tab, mọi thứ bên trong nằm gọn trong đó. (8.54.0 đã BỎ `overflow-x:auto` từng đặt ở đây —
 * xem ghi chú H1 ngay dưới: nó là nguyên nhân cắt dấu tiếng Việt.)
 * H7: ảnh trong mọi tab CANH GIỮA theo mặc định.
 * ===================================================================================== */
/* ❗8.54.0 (H1) — BỎ `overflow-x:auto` KHỎI PANEL. Đây chính là chỗ làm "chữ, dấu bị cắt mất":
   đặt overflow trên trục X biến panel thành scroll container ⇒ trục Y cũng bị kẹp ⇒ dấu tiếng Việt
   (ắ, ữ, ể…) và bullet của <ul> nằm sát mép bị CẮT. Nay không kẹp gì: bảng đã `width:100%` nên tự
   xuống dòng, thêm `overflow-wrap:anywhere` để chuỗi dài (URL/mã) không đội panel rộng ra.
   Padding cũng tăng để chữ THỤT VÀO, không dính mép viền. */
.vnb2b-pdt-panel {
	background:#FAFAF8; border:1px solid var(--line); border-radius:11px;
	padding:18px 22px; margin:0 0 12px; max-width:100%; overflow-wrap:anywhere;
}
.vnb2b-pdt-panel > :first-child { margin-top:0; }
.vnb2b-pdt-panel > :last-child { margin-bottom:0; }
/* H1 — bullet/số của danh sách phải nằm TRONG panel: chừa lề trái đủ rộng, không để marker ra ngoài. */
.vnb2b-pdt-panel ul, .vnb2b-pdt-panel ol { padding-left:26px; margin:0 0 12px; list-style-position:outside; }
.vnb2b-pdt-panel li { margin:0 0 6px; line-height:1.65; }
/* Dấu tiếng Việt ở dòng đầu cần chỗ thở — line-height chặt + container kẹp là bị cắt ngọn. */
.vnb2b-pdt-panel, .vnb2b-pdt-panel p, .vnb2b-pdt-panel td, .vnb2b-pdt-panel th { line-height:1.65; }
.vnb2b-pdt-panel h2, .vnb2b-pdt-panel h3, .vnb2b-pdt-panel .vnb2b-pdt-h, .vnb2b-pdt-panel .vnb2b-pdt-sub { line-height:1.45; padding-top:2px; }
/* Bảng/ảnh trong thẻ: nền trắng để nổi trên nền xám của thẻ. */
.vnb2b-pdt-panel .vnb2b-pdt-tb,
.vnb2b-pdt-panel .woocommerce-product-attributes,
.vnb2b-pdt-panel .shop_attributes { background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.vnb2b-pdt-panel .vnb2b-pdt-tb th, .vnb2b-pdt-panel .vnb2b-pdt-tb td { border-bottom:1px solid #f1efec; }
.vnb2b-pdt-panel .vnb2b-pdt-tb tr:last-child th, .vnb2b-pdt-panel .vnb2b-pdt-tb tr:last-child td { border-bottom:0; }

/* H7 — ảnh canh giữa (cả lưới lẫn ảnh lẻ nằm trong bài mô tả). */
.vnb2b-pdt-imgs { justify-items:center; }
.vnb2b-pdt-imgs figure { width:100%; text-align:center; }
.vnb2b-pdt-panel > img,
.vnb2b-pdt-panel p > img { display:block; margin-left:auto; margin-right:auto; }
.vnb2b-pdt-panel figcaption { text-align:center; }

/* =====================================================================================
 * 8.54.0 (H1) — LƯỚI 3 ẢNH + NÚT ZOOM KHI RÊ CHUỘT.
 *
 * Trước dùng `auto-fill minmax(220px,1fr)`: panel rộng ⇒ tự tạo 5 cột ⇒ tab chỉ có 2–3 ảnh thì mỗi ô
 * co về 220px và **hở một khoảng trống bên phải** (đúng "ảnh hở, lưới hơi nhỏ"). Nay CHỐT 3 cột ở
 * desktop (2 cột tablet, 1 cột mobile) nên ảnh to gấp ~1,7 lần và lưới không bao giờ hở.
 * Nút 🔍 hiện khi rê chuột — bấm vào ảnh mở lightbox (JS bọc mỗi ảnh bằng .vnb2b-pdt-zw).
 * ===================================================================================== */
.vnb2b-pdt-imgs,
.vnb2b-pdt-panel .vnb2b-sp-imgs {
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:10px 0 14px; justify-items:stretch;
}
.vnb2b-pdt-panel .vnb2b-sp-imgs img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; aspect-ratio:1/1; object-fit:cover; cursor:zoom-in; }

/* Vỏ bọc do JS tạo — mốc cho nút zoom, và chính nó là ô của lưới. */
.vnb2b-pdt-zw { position:relative; display:block; width:100%; overflow:hidden; border-radius:10px; }
.vnb2b-pdt-zw img { margin:0 !important; }
.vnb2b-pdt-zw:after {
	content:'🔍'; position:absolute; right:8px; bottom:8px; z-index:3;
	background:rgba(255,255,255,.94); border:1px solid var(--bd); color:var(--ink);
	border-radius:8px; padding:3px 8px; font-size:14px; line-height:1.3;
	opacity:0; transform:translateY(4px); transition:opacity .16s, transform .16s; pointer-events:none;
}
.vnb2b-pdt-zw:hover:after, .vnb2b-pdt-zw:focus-within:after { opacity:1; transform:translateY(0); }
@media (max-width:1023px) { .vnb2b-pdt-imgs, .vnb2b-pdt-panel .vnb2b-sp-imgs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px)  { .vnb2b-pdt-imgs, .vnb2b-pdt-panel .vnb2b-sp-imgs { grid-template-columns:1fr; } }

/* Lightbox ảnh tab (E23) — tự viết, không phụ thuộc theme/lib. */
.vnb2b-pdt-lb { position:fixed; inset:0; background:rgba(0,0,0,.86); z-index:100020; display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.vnb2b-pdt-lb img { max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:10px; }

/* ---- Mobile: thanh tab CUỘN NGANG, trang không tràn ngang (rule hiện hành) ---- */
@media (max-width:640px) {
	.vnb2b-pdt-bar-nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
	.vnb2b-pdt-bar-nav::-webkit-scrollbar { display:none; }
	.vnb2b-pdt-t { flex:0 0 auto; font-size:13.5px; padding:8px 12px; }
	.vnb2b-pdt-cta { flex:0 0 auto; margin-left:6px; font-size:13.5px; padding:8px 13px; }
	.vnb2b-pdt-h { font-size:17px; }
	.vnb2b-pdt-tb tbody th { width:130px; }
	/* 8.54.0 (H1) — KHÔNG set `overflow-x` cho panel nữa (kẹp trục Y ⇒ cắt dấu tiếng Việt).
	   Bảng đã width:100% + `overflow-wrap:anywhere` nên tự xuống dòng, trang vẫn không tràn ngang. */
	.vnb2b-pdt-panel { padding:14px 16px; }
	.vnb2b-pdt-bar .go { margin-left:0; width:100%; }
}