/* ===== NỀN VÀ BREADCRUMB ===== */
.section.product_page {
	background: var(--color-white) !important;
}

.product_page .pd_breadcrumb .custom-breadcrumb {
	padding: 10px 0 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #555 !important;
	text-align: left !important;
	text-shadow: none !important;
	-webkit-text-stroke: 0 !important;
}

.product_page .pd_breadcrumb .custom-breadcrumb a {
	color: #444 !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}

.product_page .pd_breadcrumb .custom-breadcrumb a:hover {
	color: var(--color-black) !important;
	text-decoration: underline !important;
}

.product_page .pd_breadcrumb .custom-breadcrumb span {
	color: #555 !important;
	font-weight: 400 !important;
}

/* ===== GIỚI HẠN KHUNG GALLERY NHƯ MẪU ===== */
.product_page .pd_img > .col-inner {
	margin-right: auto;
	margin-left: auto;
}

/* ===== ẨN ZOOM VÀ NÚT GỐC ===== */
.product_page .pd_img .image-tools,
.product_page .pd_img .zoom-button,
.product_page .pd_img .product-gallery-slider > .flickity-prev-next-button,
.product_page .pd_img .product-thumbnails > .flickity-prev-next-button,
.product_page .pd_img .pd-gallery-control {
	display: none !important;
}

/* ===== ẢNH LỚN ===== */
.product_page .pd_img .product-images {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 10px !important;
	padding: 6px !important;
	border: 1px solid #e1e1e1 !important;
	border-radius: 4px !important;
	background: var(--color-white) !important;
	overflow: hidden;
}

.product_page .pd_img .product-gallery-slider {
	margin: 0 !important;
}

.product_page .pd_img .product-gallery-slider .flickity-viewport {
	height: auto !important;
	aspect-ratio: 1 / 1;
}

.product_page .pd_img .woocommerce-product-gallery__image {
	width: 100% !important;
}

.product_page .pd_img .woocommerce-product-gallery__image > a {
	display: block !important;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.product_page .pd_img .woocommerce-product-gallery__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center;
}

/* ===== THUMBNAIL ===== */
.product_page .pd_img .product-thumbnails {
	position: relative !important;
	box-sizing: border-box;
	width: auto !important;
	max-width: none !important;
	margin: 0 25px !important;
	padding: 0 !important;
	overflow: visible !important;
}

.product_page .pd_img .product-thumbnails .col {
	box-sizing: border-box;
	width: 86px !important;
	max-width: 25% !important;
	margin: 0 !important;
	padding: 0 5px !important;
}

.product_page .pd_img .product-thumbnails a {
	display: block !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 4px !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 2px !important;
	background: var(--color-white) !important;
	opacity: 1 !important;
	overflow: hidden;
	transition: border-color .2s ease;
}

.product_page .pd_img .product-thumbnails img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	opacity: 1 !important;
	transform: none !important;
}

.product_page .pd_img .product-thumbnails .is-nav-selected a,
.product_page .pd_img .product-thumbnails a:hover {
	border-color: #bfc5cc !important;
}

/* ===== HAI NÚT DO JS TẠO ===== */
.product_page .pd_img .product-thumbnails > .pd-gallery-arrow {
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	z-index: 5 !important;
	box-sizing: border-box;
	width: 24px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(-50%) !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

.product_page .pd_img .pd-gallery-arrow--prev {
	left: -25px !important;
	right: auto !important;
}

.product_page .pd_img .pd-gallery-arrow--next {
	right: -25px !important;
	left: auto !important;
}

.product_page .pd_img .pd-gallery-arrow::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	box-sizing: border-box;
	top: 50% !important;
	left: 50% !important;
	width: 9px !important;
	height: 9px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: solid #34495e !important;
	border-width: 0 1.5px 1.5px 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.product_page .pd_img .pd-gallery-arrow--prev::before {
	transform: translate(-30%, -50%) rotate(135deg) !important;
}

.product_page .pd_img .pd-gallery-arrow--next::before {
	transform: translate(-70%, -50%) rotate(-45deg) !important;
}

.product_page .pd_img .pd-gallery-arrow::after {
	content: none !important;
}

.product_page .pd_img .pd-gallery-arrow:focus-visible {
	outline: 2px solid #34495e !important;
	outline-offset: 2px;
}

/* CSS LÀM ĐẸP TABS WOOCOMMERCE MẶC ĐỊNH (CHUẨN THEO MẪU) */

/* 1. Xóa bỏ khung viền xám bao quanh nội dung mặc định của Flatsome */
.pd_chitietsp .woocommerce-tabs .tab-panels .panel {
	border: none !important;
	padding: 30px 0 0 0 !important;
	background-color: transparent !important;
}

/* 2. Tạo đường kẻ ngang dài ở dưới chân các nút Tab */
.pd_chitietsp .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid #ddd !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	justify-content: flex-start !important;
}

/* 3. Chỉnh từng nút bấm Tab (Mô tả, Đánh giá) */
.pd_chitietsp .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	margin-bottom: -1px !important;
	background: transparent !important;
	border: none !important;
}

.pd_chitietsp .woocommerce-tabs ul.tabs li a {
	display: block !important;
	padding: 10px 25px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #555 !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	text-transform: none !important; /* Giữ chữ hoa chữ thường bình thường */
	transition: all 0.3s ease !important;
}

/* 4. TRẠNG THÁI ACTIVE (Tab đang được mở) - Viền đỏ trên cùng, che đường kẻ dưới */
.pd_chitietsp .woocommerce-tabs ul.tabs li.active a {
	border: 1px solid #ddd !important; /* Viền 2 bên xám nhạt */
	border-top: 2px solid var(--color-main, #c0392b) !important; /* Viền trên cùng màu đỏ */
	border-bottom: 1px solid var(--color-white) !important; /* Đường dưới màu trắng để tạo cảm giác cửa mở */
	background: var(--color-white) !important;
	color: #333 !important;
	font-weight: 600 !important;
}

/* Hiệu ứng khi rê chuột vào các tab chưa chọn */
.pd_chitietsp .woocommerce-tabs ul.tabs li:not(.active) a:hover {
	color: var(--color-main) !important;
}

@media (max-width :  768px) {
	.pd_page .col {
		padding-bottom: 0px !important;
	}
	.pd_page h2 {
		margin-top: 15px;
		font-size: 22px;
	}
	
	.pd_page .custom-breadcrumb {
		font-size: 14px;
	}
	
	.product-custom-title {
		font-size: 20px !important;
	}
	
	.pd_chitietsp .woocommerce-tabs ul.tabs li {
		width: max-content;
	}
	
	.pd_chitietsp .nav-tabs+.tab-panels {
		background: var(--color-white);
		border: 1px solid #ddd;
		padding: 0px 10px;
	}
}