/* ==========================================================================
   Trang chi tiết sản phẩm — style theo phong cách nahaki.com.vn
   GIỮ chức năng WooCommerce của Flatsome, chỉ tô lại giao diện.
   TẤT CẢ scope dưới body.vhm-single-product (+ class riêng cho khối thêm)
   để KHÔNG ảnh hưởng phần còn lại của site.
   Bảng màu đồng bộ theo Flatsome: xanh = var(--fs-color-primary) · đỏ/cam = var(--fs-color-secondary).
   ========================================================================== */

/* --------------------------- Breadcrumb --------------------------- */
.vhm-single-product .breadcrumbs,
.vhm-single-product .woocommerce-breadcrumb {
	font-size: 14px;
	color: #666;
	margin-bottom: 18px;
}

.vhm-single-product .breadcrumbs a,
.vhm-single-product .woocommerce-breadcrumb a {
	color: var(--fs-color-primary);
}

.vhm-single-product .breadcrumbs a:hover,
.vhm-single-product .woocommerce-breadcrumb a:hover {
	color: var(--fs-color-secondary);
}

/* --------------------------- Tên sản phẩm --------------------------- */
.vhm-single-product .product-title,
.vhm-single-product h1.product_title {
	font-family: 'UTM Helve', UTMHelve, sans-serif;
	font-weight: 700;
	color: var(--fs-color-primary);
	line-height: 1.25;
}

/* ------------------------------- Giá ------------------------------- */
.vhm-single-product div.product p.price,
.vhm-single-product div.product .price,
.vhm-single-product .summary .price ins,
.vhm-single-product .summary .price .amount {
	color: var(--fs-color-secondary);
	font-weight: 700;
}

.vhm-single-product div.product p.price {
	font-size: 26px;
}

/* Giá gạch ngang (giá gốc) giữ màu xám nhạt. */
.vhm-single-product .summary .price del,
.vhm-single-product .summary .price del .amount {
	color: #999;
	font-weight: 400;
}

/* ---------------------- Khối mua hàng kiểu nahaki ----------------------
   2 nút ĐỎ cạnh nhau: [icon giỏ] + [Liên Hệ Tư Vấn]. Ẩn ô số lượng (mặc định 1).
   Màu đỏ CTA riêng cho khối này (nahaki dùng đỏ thuần, khác màu secondary cam). */
.vhm-single-product .product form.cart {
	--vhm-cta-red: var(--fs-color-secondary);
	--vhm-cta-red-dark: var(--fs-color-secondary);
}

/* 2 nút (Thêm vào giỏ + Liên Hệ Tư Vấn) luôn nằm cùng 1 dòng.
   - Sản phẩm đơn: 2 nút là con trực tiếp của form.cart (loại trừ form biến thể
     để không phá bảng chọn biến thể).
   - Sản phẩm biến thể: 2 nút nằm trong .woocommerce-variation-add-to-cart. */
.vhm-single-product .product form.cart:not(.variations_form),
.vhm-single-product .product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Ẩn ô số lượng — giá trị mặc định 1 vẫn được gửi đi khi thêm vào giỏ. */
.vhm-single-product .product form.cart .quantity {
	display: none !important;
}

/* Nút "Thêm vào giỏ": đỏ, BỎ chữ, chỉ còn icon giỏ hàng ở giữa. */
.vhm-single-product .single_add_to_cart_button.button,
.vhm-single-product .single_add_to_cart_button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	flex: 0 0 auto;          /* không giãn/co full-width → giữ cùng dòng với nút tư vấn */
	width: auto;
	min-width: 120px;
	height: 52px;
	padding: 0 22px;
	margin: 0 12px 10px 0;
	background-color: var(--vhm-cta-red);
	border: none;
	border-radius: 6px;
	font-size: 0;            /* ẩn chữ "Thêm vào giỏ hàng" */
	line-height: 0;
}

/* Icon giỏ hàng (SVG trắng, không phụ thuộc font-icon). */
.vhm-single-product .single_add_to_cart_button.button::before {
	content: "";
	width: 26px;
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vhm-single-product .single_add_to_cart_button.button:hover,
.vhm-single-product .single_add_to_cart_button.button.alt:hover {
	background-color: var(--vhm-cta-red-dark);
}

/* Nút "Liên Hệ Tư Vấn" (gọi điện). */
.vhm-single-product .vhm-consult-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	flex: 0 1 auto;          /* giữ cùng dòng; được phép co lại nếu cột hẹp */
	height: 52px;
	padding: 0 44px;
	margin: 0 0 10px;
	background-color: var(--vhm-cta-red, #ED1B24);
	color: #fff;
	border-radius: 6px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	text-decoration: none;
}

.vhm-single-product .vhm-consult-btn:hover {
	background-color: var(--vhm-cta-red-dark, #c50f17);
	color: #fff;
}

@media (max-width: 479px) {
	.vhm-single-product .single_add_to_cart_button.button,
	.vhm-single-product .vhm-consult-btn {
		margin-right: 0;
	}
	.vhm-single-product .vhm-consult-btn {
		flex: 1 1 100%;
	}
}

/* --------------------------- Tab thông tin --------------------------- */
.vhm-single-product .woocommerce-tabs .tabs li a,
.vhm-single-product .woocommerce-tabs .nav a {
	font-family: 'UTM Helve', UTMHelve, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fs-color-primary);
}

.vhm-single-product .woocommerce-tabs .tabs li.active a,
.vhm-single-product .woocommerce-tabs .nav li.active a {
	color: var(--fs-color-secondary);
	border-color: var(--fs-color-secondary);
}

.vhm-single-product .woocommerce-tabs .panel h2,
.vhm-single-product .woocommerce-Tabs-panel h2 {
	color: var(--fs-color-primary);
}

/* --------------- Bảng THÔNG SỐ kẻ sọc xanh (cột phải nahaki) --------------- */
.vhm-single-product .vhm-specs {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	overflow: hidden;
}

.vhm-single-product .vhm-specs__row {
	display: flex;
	gap: 12px;
	padding: 9px 14px;
	font-size: 15px;
	line-height: 1.45;
}

.vhm-single-product .vhm-specs__row--blue {
	background-color: var(--fs-color-primary);
	color: #fff;
}

.vhm-single-product .vhm-specs__k {
	flex: 0 0 42%;
	font-weight: 700;
}

.vhm-single-product .vhm-specs__v {
	flex: 1;
}

/* ---------------------- Box "Cam kết của chúng tôi" ---------------------- */
.vhm-single-product .vhm-commitment {
	margin: 22px 0 0;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	overflow: hidden;
}

.vhm-single-product .vhm-commitment__title {
	background-color: var(--fs-color-secondary);
	color: #fff;
	font-family: 'UTM Helve', UTMHelve, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	padding: 10px 14px;
}

.vhm-single-product .vhm-commitment__list {
	list-style: none;
	margin: 0;
	padding: 12px 14px;
}

.vhm-single-product .vhm-commitment__list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.vhm-single-product .vhm-commitment__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--fs-color-secondary);
	font-weight: 700;
}

.vhm-single-product .vhm-commitment__list li:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Tiêu đề khối kiểu nahaki (.title-all-wed): chữ đỏ + đường kẻ xanh ngang.
   ========================================================================== */
.vhm-sec-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

.vhm-sec-title::before {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--fs-color-primary);
}

.vhm-sec-title strong {
	position: relative;
	z-index: 2;
	background-color: #fff;
	padding: 0 20px;
	font-family: 'UTM Helve', UTMHelve, sans-serif;
	font-weight: 700;
	font-size: 24px;
	text-transform: uppercase;
	text-align: center;
	color: var(--fs-color-secondary);
}

/* ==========================================================================
   Khối DANH MỤC SẢN PHẨM (giống .product-new-item của nahaki).
   ========================================================================== */
.vhm-singlecat {
	padding: 40px 0 10px;
}

.vhm-singlecat__container,
.vhm-projects__container {
	width: 100%;
	max-width: 1230px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

.vhm-singlecat__grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

.vhm-singlecat__col {
	width: 33.3333%;
	padding: 0 8px;
	box-sizing: border-box;
}

.vhm-singlecat__item {
	position: relative;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 8px;
}

.vhm-singlecat__img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.vhm-singlecat__item > a {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: rgba(4, 4, 4, 0.2);
	transition: background-color 0.3s ease;
}

.vhm-singlecat__item > a:hover {
	background: rgba(4, 4, 4, 0.4);
}

.vhm-singlecat__item h5 {
	margin: 0;
	padding: 0 10px;
	font-family: 'UTM Helve', UTMHelve, sans-serif;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	text-shadow: 1px 1px 4px #000;
	color: #fff;
}

/* ==========================================================================
   Khối DỰ ÁN ĐÃ TRIỂN KHAI (giống .item-new-products-details của nahaki).
   ========================================================================== */
.vhm-projects {
	padding: 30px 0 50px;
}

.vhm-projects__grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

.vhm-projects__col {
	width: 25%;
	padding: 0 8px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.vhm-projects__item {
	display: block;
	height: 100%;
	background-color: #eaeaea;
	padding: 15px;
	box-sizing: border-box;
	text-decoration: none;
	color: #333;
}

.vhm-projects__img {
	overflow: hidden;
	border-radius: 15px;
	margin-bottom: 18px;
}

.vhm-projects__img img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.vhm-projects__item:hover .vhm-projects__img img {
	transform: scale(1.12);
}

.vhm-projects__name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vhm-projects__item:hover .vhm-projects__name {
	color: var(--fs-color-primary);
}

/* ==========================================================================
   Khối SẢN PHẨM LIÊN QUAN — card kiểu nahaki (ảnh + tên + giá đỏ + nút mua đỏ).
   ========================================================================== */
.vhm-related {
	padding: 40px 0 10px;
}

.vhm-related__container {
	width: 100%;
	max-width: 1230px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

.vhm-pcard__grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

.vhm-pcard__col {
	width: 25%;
	padding: 0 8px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.vhm-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.vhm-pcard:hover {
	border-color: var(--vhm-cta-red, #ED1B24);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.vhm-pcard__thumb {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.vhm-pcard__thumb .vhm-pcard__img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vhm-pcard:hover .vhm-pcard__img {
	transform: scale(1.08);
}

.vhm-pcard__name {
	margin: 0;
	padding: 12px 12px 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vhm-pcard__name a {
	color: var(--fs-color-primary);
	text-decoration: none;
}

.vhm-pcard:hover .vhm-pcard__name a {
	color: var(--vhm-cta-red, #ED1B24);
}

.vhm-pcard__price {
	padding: 0 12px 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--vhm-cta-red, #ED1B24);
}

.vhm-pcard__price del,
.vhm-pcard__price del .amount {
	color: #999;
	font-weight: 400;
	font-size: 14px;
}

.vhm-pcard__price ins {
	text-decoration: none;
}

/* Nút "Mua hàng" đỏ, full-width đáy card. */
.vhm-single-product .vhm-pcard__btn.button {
	margin: auto 12px 12px;
	background-color: var(--vhm-cta-red, #ED1B24);
	border: none;
	border-radius: 6px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.3px;
}

.vhm-single-product .vhm-pcard__btn.button:hover {
	background-color: var(--vhm-cta-red-dark, #c50f17);
	color: #fff;
}

/* Đỏ CTA cũng cung cấp ở cấp khối liên quan (vì biến gốc khai báo ở form.cart). */
.vhm-related {
	--vhm-cta-red: var(--fs-color-secondary);
	--vhm-cta-red-dark: var(--fs-color-secondary);
}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 991px) {
	.vhm-projects__col,
	.vhm-pcard__col {
		width: 50%;
	}
}

@media (max-width: 767px) {
	.vhm-singlecat__col {
		width: 50%;
	}
	.vhm-singlecat__img {
		height: 150px;
	}
	.vhm-singlecat__item h5 {
		font-size: 15px;
	}
	.vhm-sec-title strong {
		font-size: 18px;
		padding: 0 12px;
	}
}

@media (max-width: 479px) {
	.vhm-projects__col,
	.vhm-pcard__col {
		width: 100%;
	}
}