/**
 * Trang chi tiết sản phẩm — HM-19.
 * Dựng theo https://www.lanhadecor.vn/san-pham/nikta/0076692859491404.
 *
 * Con số lấy thẳng từ bảng kiểu của bản mẫu: phần giới thiệu nền #f7f7f7 hai
 * cột 66% và 33% cách nhau 32px đệm 60px 40px, tên hàng 36px nét 800, nhãn danh
 * mục 14px nét 600, mô tả 14px nét 500 màu #525257, thẻ thuộc tính viền
 * #12121229 bo 2px đệm 16px, giá 20px nét 700, dải lời hứa đệm 60px 40px 32px
 * với tiêu đề 20px nét 700, thanh tab nền #f7f7f7 đệm 40px, nội dung tab rộng
 * tối đa 1360px, dải gợi ý đệm 60px 40px cách nhau 40px.
 *
 * Bốn chỗ cố ý làm khác bản mẫu, ghi ở CH-27:
 *
 * 1. Thêm nút "Thêm vào giỏ hàng". Bản mẫu bán qua bảng cấu hình nên không có
 *    nút này, còn A Khoa đang chạy WooCommerce có giỏ hàng thật.
 * 2. Thẻ thuộc tính hiện giá trị của hàng, nút "Thay đổi" dẫn sang trang danh
 *    mục. Bản mẫu mở bảng chọn cấu hình, A Khoa không bán hàng cấu hình được.
 * 3. Bỏ khối "key-details" của bản mẫu vì chưa có dữ liệu tương đương.
 * 4. Biểu tượng đánh dấu chỉ để cho giống, chưa có chức năng lưu sản phẩm.
 *
 * Phông chữ giữ Manrope, giống bản mẫu, đúng QĐ-13.
 *
 * Mọi quy tắc nằm dưới `.ak-sp`.
 */

.ak-sp {
	--sp-den: var(--ak-mau-muc);
	--sp-xam: var(--ak-mau-mo);
	--sp-nen: var(--ak-mau-nen);
	--sp-vien: var(--ak-mau-vien);
	--sp-cam: var(--ak-mau-cam);
	--sp-toi: var(--ak-mau-toi);

	width: 100%;
	max-width: 100%;
	background: var(--ak-mau-trang);
	color: var(--sp-den);
}

.ak-sp *,
.ak-sp *::before,
.ak-sp *::after {
	box-sizing: border-box;
}

.ak-sp a {
	text-decoration: none;
}

/* Dòng danh mục
   ------------------------------------------------------------------------- */

.ak-sp-duong {
	padding: var(--ak-cach-3) var(--ak-cach-4);
	background: var(--ak-mau-trang);
}

.ak-sp-duong a {
	color: var(--sp-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	text-transform: uppercase;
	letter-spacing: var(--ak-gian-nhe);
}

/* Thông báo của WooCommerce
   ------------------------------------------------------------------------- */

.ak-sp-thong-bao:not(:empty) {
	padding: var(--ak-cach-3) var(--ak-cach-4) 0;
}

.ak-sp-thong-bao .woocommerce-message,
.ak-sp-thong-bao .woocommerce-error,
.ak-sp-thong-bao .woocommerce-info {
	margin: 0;
	font-size: var(--ak-co-nho);
}

/* Phần giới thiệu
   ------------------------------------------------------------------------- */

.ak-sp-intro {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--ak-cach-6);
	padding: var(--ak-cach-7) var(--ak-cach-4);
	background-color: var(--sp-nen);
}

.ak-sp-anh {
	position: relative;
	width: 100%;
}

.ak-sp-anh-khung {
	width: 100%;
	overflow: hidden;
}

.ak-sp-anh-chay {
	display: flex;
	width: 100%;
	transition: transform var(--ak-chuyen-anh);
}

.ak-sp-anh-mot {
	display: flex;
	flex: 0 0 100%;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 60vw;
	background-color: var(--sp-nen);
}

.ak-sp-anh-mot img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}

.ak-sp-anh-duoi {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ak-cach-3);
	margin-top: var(--ak-cach-4);
}

.ak-sp-anh-to {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 0;
	margin: 0;
	padding: var(--ak-cach-1);
	color: var(--sp-den);
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.ak-sp-anh-to-hinh {
	width: 18px;
	height: 18px;
}

.ak-sp-anh-vach {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-2);
}

.ak-sp-anh-vach-mot {
	width: 48px;
	height: 6px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: var(--ak-mau-vien-dam);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transform: scaleY(.4);
	transition: transform var(--ak-chuyen-anh), background var(--ak-chuyen-anh);
}

.ak-sp-anh-vach-mot.dang-xem {
	background: var(--sp-den);
	border-radius: var(--ak-goc-sac);
	transform: scale(1);
}

.ak-sp-anh-so {
	margin-left: auto;
	padding: var(--ak-cach-1) var(--ak-cach-3);
	color: var(--sp-xam);
	background-color: var(--sp-nen);
	font-size: var(--ak-co-nho);
}

.ak-sp-anh-mui {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-2);
}

.ak-sp-mui {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--sp-den);
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.ak-sp-mui svg {
	width: 20px;
	height: 20px;
}

.ak-sp-mui[disabled] {
	color: var(--ak-vo-hieu-chu);
	opacity: 1;
	cursor: not-allowed;
}

/* Cột thông tin
   ------------------------------------------------------------------------- */

.ak-sp-tin {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-5);
	width: 100%;
}

.ak-sp-tin-tren {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-2);
}

.ak-sp-loai {
	margin: 0;
	color: var(--sp-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	text-transform: uppercase;
	letter-spacing: var(--ak-gian-nhe);
}

.ak-sp-hang-ten {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ak-cach-4);
}

.ak-sp-ten {
	margin: 0;
	color: var(--sp-den);
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-chat);
	text-transform: none;
	letter-spacing: var(--ak-gian-khong);
}

.ak-sp-luu {
	display: inline-flex;
	flex: 0 0 20px;
	color: var(--sp-den);
	pointer-events: none;
}

.ak-sp-luu svg {
	width: 20px;
	height: 20px;
}

.ak-sp-mo-ta {
	margin: 0;
	color: var(--sp-xam);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-thoang);
}

.ak-sp-tuy-chon {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-3);
}

.ak-sp-the {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-3);
	padding: var(--ak-cach-4);
	background-color: transparent;
	border: 1px solid var(--sp-vien);
	border-radius: var(--ak-goc-sac);
	transition: all var(--ak-chuyen);
}

.ak-sp-the:hover {
	background-color: var(--ak-mau-trang);
	border-color: var(--sp-den);
}

.ak-sp-the-tren,
.ak-sp-the-duoi {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ak-cach-3);
}

.ak-sp-the-nhan {
	margin: 0;
	color: var(--sp-xam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
}

.ak-sp-the-so {
	color: var(--sp-den);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-vua);
}

.ak-sp-the-chu {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ak-sp-the-ten {
	margin: 0;
	color: var(--sp-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
}

.ak-sp-the-phu {
	margin: 0;
	color: var(--sp-xam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-vua);
}

.ak-sp-doi {
	position: relative;
	flex: 0 0 auto;
	color: var(--sp-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	border-bottom: 2px solid transparent;
}

.ak-sp-doi::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--sp-den);
	transform: scaleX(0);
	transform-origin: bottom left;
	transition: transform var(--ak-chuyen);
}

.ak-sp-doi:hover::after {
	transform: scaleX(1);
}

.ak-sp-gia {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-2);
	color: var(--sp-den);
	font-size: var(--ak-co-h4);
	font-weight: var(--ak-dam-manh);
}

.ak-sp-gia .amount,
.ak-sp-gia .woocommerce-Price-amount {
	color: var(--sp-den);
	font-size: var(--ak-co-h4);
	font-weight: var(--ak-dam-manh);
}

.ak-sp-gia del,
.ak-sp-gia del .amount {
	color: var(--sp-xam);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	text-decoration: line-through;
	opacity: 1;
}

.ak-sp-gia ins {
	background: none;
	text-decoration: none;
}

.ak-sp-mua {
	margin: 0;
}

.ak-sp-nut {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 0;
	margin: 0;
	padding: var(--ak-nut-dem);
	color: var(--sp-den);
	background: var(--sp-cam);
	border: 0;
	border-radius: var(--ak-goc-sac);
	box-shadow: none;
	font-size: var(--ak-nut-co);
	font-weight: var(--ak-nut-dam);
	line-height: var(--ak-dong-chat);
	text-transform: none;
	letter-spacing: var(--ak-gian-khong);
	cursor: pointer;
}

.ak-sp-nut:hover {
	color: var(--ak-mau-trang);
	background: var(--ak-mau-cam-dam);
}

/* Ba lời hứa
   ------------------------------------------------------------------------- */

.ak-sp-uu-dai {
	padding: var(--ak-cach-7) var(--ak-cach-4) var(--ak-cach-5);
}

.ak-sp-uu-dai-o {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	gap: var(--ak-cach-6);
	max-width: var(--ak-rong-rong);
	margin: 0 auto;
}

.ak-sp-uu-dai-mot {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--ak-cach-4);
	width: 100%;
	text-align: center;
}

.ak-sp-uu-dai-hinh {
	width: 32px;
	height: 32px;
	color: var(--sp-den);
}

.ak-sp-uu-dai-ten {
	margin: 0;
	color: var(--sp-den);
	font-size: var(--ak-co-h4);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-chat);
	text-transform: none;
	letter-spacing: var(--ak-gian-khong);
}

.ak-sp-uu-dai-chu {
	margin: 0;
	color: var(--sp-xam);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
}

/* Tab nội dung
   ------------------------------------------------------------------------- */

.ak-sp-tab {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ak-sp-tab-dau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ak-cach-2);
	padding: var(--ak-cach-5) var(--ak-cach-4);
	background-color: var(--sp-nen);
}

.ak-sp-tab-nut {
	min-height: 0;
	margin: 0;
	padding: var(--ak-cach-2);
	color: var(--sp-xam);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	box-shadow: none;
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	text-transform: none;
	letter-spacing: var(--ak-gian-khong);
	cursor: pointer;
}

.ak-sp-tab-nut:hover {
	color: var(--sp-den);
	background: none;
}

.ak-sp-tab-nut.dang-xem {
	color: var(--sp-den);
	border-bottom-color: var(--sp-den);
}

.ak-sp-tab-than[hidden] {
	display: none;
}

.ak-sp-tab-chu {
	max-width: var(--ak-rong-rong);
	margin: 0 auto;
	padding: var(--ak-cach-5) var(--ak-cach-4);
	overflow: hidden;
	color: var(--sp-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
}

.ak-sp-tab-chu.thu-gon {
	max-height: 420px;
}

.ak-sp-tab-chu img {
	width: 90%;
	height: auto;
	padding: var(--ak-cach-2) 0 var(--ak-cach-2) 10%;
	object-fit: contain;
	pointer-events: none;
}

.ak-sp-tab-chu h2,
.ak-sp-tab-chu h3 {
	margin-bottom: .6em;
	font-size: var(--ak-co-h5);
	font-weight: var(--ak-dam-manh);
}

.ak-sp-xem-them {
	display: none;
	min-height: 0;
	margin: 0 auto var(--ak-cach-5);
	padding: var(--ak-cach-2) var(--ak-cach-4);
	color: var(--sp-den);
	background: none;
	border: 1px solid var(--sp-den);
	border-radius: var(--ak-goc-sac);
	box-shadow: none;
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	text-transform: none;
	cursor: pointer;
}

.ak-sp-xem-them.hien {
	display: block;
}

/* Dải gợi ý
   ------------------------------------------------------------------------- */

.ak-sp-goi-y {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-5);
	padding: var(--ak-cach-7) var(--ak-cach-4) var(--ak-cach-2);
}

.ak-sp-goi-y-ten {
	margin: 0;
	color: var(--sp-den);
	font-size: var(--ak-co-h3);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-chat);
	text-transform: none;
	letter-spacing: var(--ak-gian-khong);
}

.ak-sp-goi-y-chay {
	display: flex;
	gap: var(--ak-cach-4);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ak-sp-goi-y-chay::-webkit-scrollbar {
	display: none;
}

.ak-sp-hang {
	display: flex;
	flex: 0 0 calc(50% - 8px);
	flex-direction: column;
	gap: var(--ak-cach-2);
	width: calc(50% - 8px);
}

.ak-sp-hang-anh {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--ak-mau-nen-anh);
	border-radius: var(--ak-goc-sac);
	overflow: hidden;
}

.ak-sp-hang-anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ak-sp-hang-tin {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
	padding: 0;
}

.ak-sp-hang-dau {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ak-cach-2);
}

.ak-sp-hang-ten-nho span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--sp-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-sp-hang-mo-ta span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--sp-xam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-sp-hang-gia,
.ak-sp-hang-gia .amount {
	color: var(--sp-den);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-sp-goi-y-duoi {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-2);
}

.ak-sp-goi-y-thanh {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	margin-left: var(--ak-cach-4);
	background: var(--ak-mau-mo-nhat);
}

.ak-sp-goi-y-keo {
	position: absolute;
	top: -2px;
	left: 0;
	height: 6px;
	background: var(--sp-den);
	border-radius: var(--ak-goc-sac);
	transition: left var(--ak-chuyen-nhanh), width var(--ak-chuyen-nhanh);
}

/* Lớp phủ xem ảnh
   ------------------------------------------------------------------------- */

.ak-sp-phu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--ak-cach-5);
	background: var(--ak-mau-den-mo-4);
}

.ak-sp-phu[hidden] {
	display: none;
}

.ak-sp-phu-anh {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ak-sp-phu-dong {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--ak-mau-trang);
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.ak-sp-phu-dong svg {
	width: 24px;
	height: 24px;
}

/* Máy tính
   ------------------------------------------------------------------------- */

@media (min-width: 961px) {

	.ak-sp-duong {
		padding: var(--ak-cach-4) var(--ak-cach-7);
	}

	.ak-sp-intro {
		flex-direction: row;
		align-items: stretch;
		min-height: 90vh;
		padding: 60px var(--ak-cach-7);
	}

	.ak-sp-anh {
		width: 66%;
		height: fit-content;
	}

	.ak-sp-anh-mot {
		min-height: 60vh;
		max-height: 70vh;
	}

	.ak-sp-tin {
		width: 33%;
	}

	.ak-sp-ten {
		font-size: var(--ak-co-h1);
	}

	.ak-sp-uu-dai {
		padding: 60px var(--ak-cach-7) var(--ak-cach-6);
	}

	.ak-sp-uu-dai-o {
		flex-direction: row;
	}

	.ak-sp-uu-dai-mot {
		width: 30%;
	}

	.ak-sp-tab-dau {
		padding: var(--ak-cach-7);
	}

	.ak-sp-tab-chu {
		padding: var(--ak-cach-7);
	}

	.ak-sp-tab-chu.thu-gon {
		max-height: none;
	}

	.ak-sp-xem-them.hien {
		display: none;
	}

	.ak-sp-goi-y {
		gap: var(--ak-cach-7);
		padding: 60px var(--ak-cach-7);
	}

	.ak-sp-goi-y-ten {
		font-size: var(--ak-co-h2);
	}

	.ak-sp-hang {
		flex: 0 0 calc(33.3333% - 10.6667px);
		width: calc(33.3333% - 10.6667px);
	}

	.ak-sp-hang-ten-nho span {
		font-size: var(--ak-co-chu);
		line-height: var(--ak-dong-vua);
		letter-spacing: var(--ak-gian-nhe);
	}
}