/*
 * Trang chi tiết sản phẩm.
 *
 * TRANG NÀY PHỤC VỤ HAI VIỆC, không phải để ngắm:
 *   1. kỹ sư tra THÔNG SỐ và đối chiếu với yêu cầu của họ
 *   2. tải TDS, hoặc gửi yêu cầu báo giá
 * Nên thứ tự thị giác là: tên + mã hàng → tóm tắt → nút tải/hỏi giá → bảng
 * thông số. Bảng thông số được ưu tiên chiều rộng và độ tương phản hơn mọi
 * thứ khác trên trang.
 *
 * Bố cục MỘT CỘT là hệ quả của dữ liệu, không phải sở thích: toàn site có 0
 * ảnh đại diện. Bản cũ vẫn dành `col-lg-5` cho một carousel rỗng, nên gần nửa
 * màn hình đầu tiên là khoảng trắng có nút prev/next không bấm được.
 * `single-products.php` nay chỉ in cột ảnh khi thật sự có ảnh, và khi đó
 * class `.vt-sp-khong-anh` biến mất — các luật một cột dưới đây tự ngừng.
 *
 * @package hkt-simple-child
 */

.vt-sp {
	padding-top: 24px;
	padding-bottom: 56px;
}

.vt-sp .ws-breadcrumbs {
	font-size: .85rem;
	color: #5b6b7d;
	margin-bottom: 16px;
}

.vt-sp .ws-breadcrumbs a {
	color: #0b5cab;
}

/* --- Phần đầu ------------------------------------------------------------ */

.vt-sp-dau {
	align-items: flex-start;
}

/* Một cột thì chữ chạy hết chiều ngang màn hình rộng sẽ khó đọc — mắt lạc dòng
 * khi một dòng quá dài. Giới hạn phần chữ, KHÔNG giới hạn bảng thông số. */
.vt-sp-khong-anh .vt-sp-ten,
.vt-sp-khong-anh .vt-sp-tomtat {
	max-width: 62ch;
}

.vt-sp-ten {
	font-size: clamp(1.45rem, 2.8vw, 2.15rem);
	font-weight: 800;
	line-height: 1.25;
	color: #16283d;
	margin: 0 0 12px;
}

/* --- Mã hàng ------------------------------------------------------------- */

/* Mã hàng là thứ kỹ sư gõ vào Google và vào đơn hàng, nên nó phải đọc được từ
 * xa và copy được dễ. Dùng font đều nét để phân biệt 0/O và 1/l. */
.vt-sp-pn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #eef4fa;
	border: 1px solid #d3e2f1;
	border-radius: 8px;
	padding: 8px 14px;
	margin-bottom: 18px;
}

.vt-sp-pn .nhan {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5b6b7d;
}

.vt-sp-pn .ma {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 1.02rem;
	font-weight: 700;
	color: #0b5cab;
	user-select: all;          /* bấm một cái là chọn trọn mã */
}

/* --- Tóm tắt ------------------------------------------------------------- */

.vt-sp-tomtat {
	font-size: 1rem;
	line-height: 1.7;
	color: #42536a;
	background: #f5f7f9;
	border-left: 3px solid #08A6D9;
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin-bottom: 22px;
}

.vt-sp-tomtat p:last-child {
	margin-bottom: 0;
}

/* --- Nút tải và hỏi giá -------------------------------------------------- */

.vt-sp-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.vt-nut {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 8px;
	font-size: .92rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.vt-nut-tai {
	background: #fff;
	border: 1px solid #d8e0e8;
	color: #0b5cab;
}

.vt-nut-tai:hover,
.vt-nut-tai:focus-visible {
	border-color: #08A6D9;
	color: #08A6D9;
	box-shadow: 0 2px 10px rgba(8, 166, 217, .14);
	text-decoration: none;
}

/* Hỏi giá là hành động chính của trang — nó phải là thứ đậm nhất trong hàng,
 * và là nút DUY NHẤT được tô đặc. Ba nút tải cùng tô đặc thì không nút nào
 * nổi lên nữa. */
.vt-nut-chinh {
	background: #0b5cab;
	border: 1px solid #0b5cab;
	color: #fff;
}

.vt-nut-chinh:hover,
.vt-nut-chinh:focus-visible {
	background: #08A6D9;
	border-color: #08A6D9;
	color: #fff;
	text-decoration: none;
}

/* Theme cha đặt `outline: none` cho nút trong slider; đảm bảo vòng focus ở đây
 * không bị mất — người dùng bàn phím cần thấy mình đang ở đâu. */
.vt-nut:focus-visible {
	outline: 2px solid #08A6D9;
	outline-offset: 2px;
}

/* --- Tiêu đề mục --------------------------------------------------------- */

.vt-sp-muc {
	position: relative;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 800;
	color: #16283d;
	padding-bottom: 12px;
	margin: 0 0 20px;
}

.vt-sp-muc::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #08A6D9, #0b5cab);
}

.vt-sp-khoi {
	margin-top: 48px;
}

/* --- Bảng thông số ------------------------------------------------------- */

/* Đây là phần có giá trị nhất của cả website — 111 sản phẩm đều có bảng này và
 * đối thủ trong nước không có. Nên nó được đối xử như dữ liệu: dòng kẻ rõ, nền
 * xen kẽ để mắt không lạc dòng, tên thông số đậm hơn giá trị. */
.vt-sp-noidung {
	margin-top: 44px;
}

.vt-sp-noidung table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: .95rem;
}

.vt-sp-noidung table td,
.vt-sp-noidung table th {
	padding: 11px 16px;
	border: 0;
	border-bottom: 1px solid #e6ecf2;
	vertical-align: top;
	text-align: left;
}

.vt-sp-noidung table tr:nth-child(odd) td {
	background: #f7f9fb;
}

/* Cột đầu là TÊN thông số. Cho nó đậm và hẹp lại, để cột giá trị — thứ người
 * ta thực sự đọc — bắt đầu ở cùng một mức trên mọi dòng. */
.vt-sp-noidung table td:first-child {
	width: 42%;
	font-weight: 600;
	color: #16283d;
}

.vt-sp-noidung table td:not(:first-child) {
	color: #42536a;
}

/* Bảng rộng hơn màn hình thì phải cuộn ĐƯỢC, và chỉ bảng cuộn chứ không phải
 * cả trang. */
.vt-sp-noidung {
	overflow-x: auto;
}

.vt-sp-noidung h2,
.vt-sp-noidung h3 {
	font-size: 1rem;
	font-weight: 700;
	color: #16283d;
	margin: 22px 0 10px;
}

.vt-sp-noidung p {
	line-height: 1.7;
	color: #42536a;
}

/* --- Màn hình nhỏ -------------------------------------------------------- */

@media (max-width: 767px) {
	.vt-sp {
		padding-bottom: 40px;
	}

	.vt-sp-cta .vt-nut {
		flex: 1 1 auto;
		justify-content: center;
	}

	.vt-sp-noidung table {
		font-size: .88rem;
	}

	.vt-sp-noidung table td,
	.vt-sp-noidung table th {
		padding: 9px 12px;
	}

	.vt-sp-noidung table td:first-child {
		width: 46%;
	}
}

/* --- Breadcrumb cụt đuôi -------------------------------------------------- */

/* Đo được: markup ĐẦY ĐỦ — `Home » Product » <span class="current">Tên sản
 * phẩm</span>` — nhưng `.current` bị `display: none`, nên trên màn hình chỉ
 * còn "Home » Product »" với một dấu » treo lơ lửng.
 *
 * Hiện lại thay vì giấu dấu phân cách: mục hiện tại là thứ nói cho người đọc
 * biết họ đang đứng ở đâu, và nó cũng là mắt cuối của chuỗi BreadcrumbList mà
 * `inc/schema.php` sinh ra. Giấu nó đi là để chuỗi hiển thị lệch với chuỗi
 * khai báo cho Google. */
.vt-sp .ws-breadcrumbs .current {
	display: inline;
	color: #5b6b7d;
}