/* =============================================================
   Vivobite – Single product (WooCommerce + GeneratePress)
   Đặt file này trong child theme: /vivo-single-product.css
   ============================================================= */

:root {
	--vv-cream: #fef0cc;
	--vv-yellow: #fbb93a;
	--vv-text: #3b3b3b;
	--vv-border: #f0c966;
	--vv-radius: 24px;
	--vv-wrap: 1200px;
}

/* ---------- Nền tảng / reset của GeneratePress ---------- */
body.single-product {
	background: #fff;
	color: var(--vv-text);
	/*font-family: 'Montserrat', sans-serif;*/
	overflow-x: hidden; /* tránh scroll ngang do khối full-bleed */
}
body.single-product .site-content { display: block; }
body.single-product #primary { width: 100%; }
body.single-product .site-main { margin: 0; }
body.single-product .inside-article {
	padding: 0;
	background: transparent;
	box-shadow: none;
}
body.single-product .grid-container { max-width: none; }

/* Khối tràn hết chiều ngang màn hình */
.vv-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.vv-wrap {
	max-width: var(--vv-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Khối trên: nền kem ---------- */
.vv-top {
	background: var(--vv-cream);
	padding: 24px 0 56px;
}
.vv-breadcrumb {
	font-size: 15px;
	color: var(--vv-text);
}
.vv-breadcrumb a { color: var(--vv-text); text-decoration: none; }
.vv-breadcrumb a:first-child::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: -4px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1-1.4.1-2.8.1-4.2.1H392c-22.1 0-40-17.9-40-40V360c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v112c0 22.1-17.9 40-40 40H128.1c-1.5 0-3-.1-4.5-.2-1.2.1-2.4.2-3.6.2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9.1-2.8V287.6H32c-18 0-32-14-32-32.1 0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E");
}

.vv-top__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: 40px;
	margin-top: 28px;
	align-items: start;
}
.vv-top .woocommerce-product-gallery,
.vv-top .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* ---------- Gallery: thumbnail dọc bên trái ---------- */
.vv-top .woocommerce-product-gallery {
	display: flex;
	flex-direction: row-reverse;
	gap: 16px;
	opacity: 1 !important;
}
.vv-top .flex-viewport {
	flex: 1;
	min-width: 0;
	border-radius: var(--vv-radius);
	overflow: hidden;
}
.vv-top .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }
.vv-top .flex-control-thumbs {
	width: 150px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Carousel dọc: khung thumbnail luôn cao bằng ảnh chính, thừa thì cuộn */
.vv-top .vv-thumbs {
	position: relative;
	width: 150px;
	flex: none;
	height: var(--vv-gal-h, auto);
}
.vv-top .vv-thumbs .flex-control-thumbs {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	scroll-snap-type: y proximity;
}
.vv-top .vv-thumbs .flex-control-thumbs::-webkit-scrollbar { display: none; }
.vv-top .flex-control-thumbs li {
	flex: none;
	scroll-snap-align: start;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: 100%;
}
.vv-tarrow {
	position: absolute;
	left: 50%;
	z-index: 3;
	width: 30px;
	height: 30px;
	padding: 0;
	transform: translateX(-50%);
	border: 0;
	border-radius: 50%;
	background: #2f2f2f;
	color: var(--vv-yellow);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.vv-tarrow[hidden] { display: none; }
.vv-tarrow:disabled { opacity: .35; cursor: default; }
.vv-tarrow--up { top: 6px; }
.vv-tarrow--down { bottom: 6px; }
.vv-top .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	opacity: .55;
	cursor: pointer;
	transition: opacity .2s;
}
.vv-top .flex-control-thumbs img.flex-active,
.vv-top .flex-control-thumbs img:hover { opacity: 1; }
.vv-top .woocommerce-product-gallery__trigger { display: none; }

/* ---------- Cột phải ---------- */
.vv-top .product_title {
	margin: 0 0 14px;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--vv-text);
}
.vv-price-line { margin: 0 0 14px; font-size: 16px; }
.vv-price { color: var(--vv-yellow); font-weight: 700; }
.vv-price del { color: #8a8a8a; font-weight: 400; margin-right: 6px; }
.vv-price ins { text-decoration: none; }

/* Mô tả ngắn của WooCommerce (có "Mô tả sản phẩm" + "Thành phần" do người dùng nhập) */
.woocommerce-product-details__short-description { font-size: 14.5px; line-height: 1.85; color: #4a4a4a; text-align: justify; }
.woocommerce-product-details__short-description p { margin: 0 0 .6em; }
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description h3,
.woocommerce-product-details__short-description h4 {
	margin: 18px 0 6px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--vv-text);
	text-align: left;
}
.vv-text {
	font-size: 14.5px;
	line-height: 1.85;
	color: #4a4a4a;
}
.vv-top .vv-text { text-align: justify; }
.vv-text p { margin: 0 0 .6em; }

/* Form đặt hàng: Số lượng / Đơn giá / Nút */
.vv-top form.cart {
	/*display: grid;*/
	align-items: center;
	margin: 26px 0 0;
}
.vv-label { font-weight: 700; font-size: 16px; }
table.variations.wpcvs-initialized tr .label { text-align: left; }

.vv-top .quantity {
	display: inline-flex;
	width: max-content;
	border: 1px solid var(--vv-border);
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}
.vv-top .quantity .qty {
	width: 64px;
	height: 44px !important;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--vv-border);
	border-right: 1px solid var(--vv-border);
	border-radius: 0;
	text-align: center;
	background: #fff;
	-moz-appearance: textfield;
}
.vv-top .quantity .qty::-webkit-outer-spin-button,
.vv-top .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vv-qbtn {
	width: 38px;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--vv-text);
	font-size: 16px;
	cursor: pointer;
}
.vv-qbtn:hover { background: var(--vv-cream); }

.vv-top button.single_add_to_cart_button {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0;
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--vv-yellow);
	color: var(--vv-text);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
}
.vv-top button.single_add_to_cart_button:hover { background: #f3a91c; color: var(--vv-text); }

/* ---------- Khối thông tin (tab) ---------- */
.vv-info { padding: 24px 0 56px; background: #fff; }
.vv-tabnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 56px;
	padding: 6px;
	border: 1px solid var(--vv-yellow);
	border-radius: 6px;
	background: var(--vv-cream);
}
.vv-tabnav button {
	margin: 0;
	padding: 6px 14px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--vv-text);
	/*font: 700 16px/1.4 'Montserrat', sans-serif;*/
	cursor: pointer;
	transition: background .2s;
}
.vv-tabnav button:hover { background: rgba(251, 185, 58, .35); }
.vv-tabnav button.is-active,
.vv-tabnav button[aria-selected="true"] { background: var(--vv-yellow); color: var(--vv-text); }
.vv-tabnav button:focus-visible { outline: 2px solid var(--vv-text); outline-offset: 2px; }

.vv-info__body { padding-top: 12px; }
.vv-info__body { min-height: 260px; }
.vv-sec { margin-top: 28px; }
.vv-sec[hidden] { display: none; }
.vv-sec h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.vv-sec .vv-text { font-size: 15px; line-height: 1.7; }
.vv-sec ul { margin: 0 0 .6em 1.2em; padding: 0; list-style: disc; }
.vv-sec li { margin: 0 0 4px; }
#thanh-phan ul { columns: 2; column-gap: 60px; max-width: 700px; }
#thanh-phan li { break-inside: avoid; }

/* ---------- Sản phẩm khác ---------- */
.vv-others { background: var(--vv-cream); padding: 56px 0 72px; }
.vv-others h2 {
	margin: 0 0 40px;
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--vv-text);
}
.vv-carousel { position: relative; }
.vv-track {
	display: flex;
	gap: 40px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.vv-track::-webkit-scrollbar { display: none; }
.vv-track.is-static { justify-content: center; }
.vv-card {
	flex: 0 0 calc((100% - 120px) / 4);
	scroll-snap-align: start;
	text-align: center;
	text-decoration: none;
}
.vv-card__img { display: block; }
.vv-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--vv-radius);
}
.vv-card__title {
	display: inline-block;
	margin-top: 14px;
	padding: 12px 22px;
	border-radius: 6px;
	background: var(--vv-yellow);
	color: var(--vv-text);
	font-size: 20px;
	line-height: 1.3;
}
.vv-arrow {
	position: absolute;
	top: 42%;
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2f2f2f;
	color: var(--vv-yellow);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.vv-arrow[hidden] { display: none; }
.vv-arrow:disabled { opacity: .35; cursor: default; }
.vv-prev { left: -64px; }
.vv-next { right: -64px; }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
	.vv-prev { left: 4px; }
	.vv-next { right: 4px; }
}
@media (max-width: 900px) {
	.vv-top__grid { grid-template-columns: 1fr; }
	.vv-top .woocommerce-product-gallery { flex-direction: column; }
	.vv-top .vv-thumbs { width: 100%; height: auto !important; }
	.vv-top .vv-thumbs .flex-control-thumbs { height: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
	.vv-top .flex-control-thumbs { width: 100%; flex-direction: row; }
	.vv-tarrow { display: none !important; }
	.vv-top .flex-control-thumbs li { width: 90px !important; }
	.vv-card { flex-basis: calc((100% - 40px) / 2); }
	.vv-card__title { font-size: 16px; }
	#thanh-phan ul { columns: 1; }
	.vv-tabnav { gap: 4px 12px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
	.vv-tabnav button { white-space: nowrap; font-size: 14px; }
}
@media (max-width: 480px) {
	.vv-card { flex-basis: 85%; }
}