/**
 * Trang tổng quan phào chỉ PU — HM-06.
 *
 * Hướng thiết kế: hiện đại và tinh gọn. Bản cũ xen kẽ chín dải nền đỏ đặc kín
 * bề ngang, mỗi dải một tiêu đề in hoa canh giữa, giữa các dải là bảng viền đen
 * và nền xám var(--ak-mau-nen-2). Bản này bỏ hết dải đỏ, chuyển sang:
 *
 * - Nền trắng là chính, xen kẽ vài khối nền xám rất nhạt để phân mục.
 * - Đầu mục canh trái, gồm một nhãn nhỏ chữ hoa giãn cách và một tiêu đề lớn.
 * - Đỏ thương hiệu chỉ dùng để nhấn: nhãn, nút, gạch chân, số thứ tự.
 * - Viền mảnh 1px thay cho đổ bóng nặng, bo góc đều 14px.
 * - Mục lục dính dưới đầu trang, nhảy nhanh giữa các khối.
 *
 * Phông chữ dùng Manrope chung của site, xem QĐ-13, nên file này không khai báo
 * font-family ở đâu cả.
 *
 * Chiều cao đầu trang A Khoa là 7,1rem trên máy tính và 6,2rem trên màn hẹp,
 * lấy theo trang danh mục sản phẩm. Mục lục dính đúng dưới mức đó.
 *
 * Mọi quy tắc nằm dưới `.ak-tq`.
 */

.ak-tq {
	/* Chữ đỏ và nền nút lấy bậc đậm (5,82:1); vạch, viền, biểu tượng lấy
	   bậc sáng qua --tq-do-hinh (4,17:1, đủ cho hình). */
	--tq-do: var(--ak-mau-do-dam);
	--tq-do-dam: var(--ak-mau-do-tham);
	--tq-do-hinh: var(--ak-mau-do);
	--tq-den: var(--ak-mau-muc);
	--tq-chu: var(--ak-mau-chu);
	--tq-mo: var(--ak-mau-mo);
	--tq-vien: var(--ak-mau-vien);
	--tq-nen: var(--ak-mau-nen);
	--tq-bo: var(--ak-goc-vua);
	--tq-dau-trang: 7.1rem;

	width: 100%;
	max-width: 100%;
	color: var(--tq-chu);
	background: var(--ak-mau-trang);
	line-height: var(--ak-dong-thoang);
}

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

.ak-tq img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ak-tq-wrap {
	width: 100%;
	max-width: var(--ak-rong-max);
	margin: 0 auto;
	padding: 0 var(--ak-le);
}

.ak-tq-wrap--hep {
	max-width: 920px;
}

.ak-tq-bt {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

/* Đầu trang
   ------------------------------------------------------------------------- */

.ak-tq-dau {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 62vh;
	padding: 12vh 0 8vh;
	background-color: var(--tq-den);
	background-position: 50% 45%;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--ak-mau-trang);
}

.ak-tq-dau--phang {
	min-height: 0;
	padding: 8vh 0 6vh;
}

.ak-tq-dau::after {
	position: absolute;
	inset: 0;
	/* Đầu lớp phủ nâng từ .35 lên .60: đường dẫn phân cấp 13px nằm ngay đó,
	   ở .35 chỉ đo được 3,46:1, ở .60 đạt 6,19:1 kể cả khi ảnh trắng tinh. */
	background: linear-gradient(180deg, rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, .88) 100%);
	content: "";
}

.ak-tq-dau--phang::after {
	background: none;
}

.ak-tq-dau__trong {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--ak-rong-max);
	margin: 0 auto;
	padding: 0 var(--ak-le);
}

.ak-tq-duong-dan {
	margin: 0 0 var(--ak-cach-5);
	color: var(--ak-chu-nen-toi-2);
	font-size: var(--ak-co-vua-nho);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tq-duong-dan a {
	color: inherit;
	text-decoration: none;
}

.ak-tq-duong-dan a:hover {
	color: var(--ak-mau-trang);
}

.ak-tq-duong-dan span[aria-hidden] {
	margin: 0 var(--ak-cach-2);
	opacity: 0.5;
}

.ak-tq-dau__tieu-de {
	max-width: 18ch;
	margin: 0;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-hero);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-chat);
	letter-spacing: var(--ak-gian-sit);
}

.ak-tq-dau__mo-ta {
	max-width: 62ch;
	margin: 19px 0 0;
	color: var(--ak-chu-nen-toi-2);
	font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
}

.ak-tq-so-lieu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3) 44px;
	margin: var(--ak-cach-7) 0 0;
	padding: 0;
	list-style: none;
}

.ak-tq-so-lieu li {
	display: flex;
	flex-direction: column;
	padding-left: var(--ak-cach-3);
	border-left: 2px solid var(--tq-do-hinh);
}

.ak-tq-so-lieu strong {
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h3-co);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-chat);
}

.ak-tq-so-lieu span {
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-vua-nho);
}

.ak-tq-dau__nut {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3);
	margin-top: var(--ak-cach-7);
}

/* Nút dùng chung
   ------------------------------------------------------------------------- */

.ak-tq-nut {
	display: inline-flex;
	align-items: center;
	gap: var(--ak-cach-2);
	padding: var(--ak-nut-dem);
	border: 1px solid transparent;
	border-radius: var(--ak-goc-tron);
	font-size: var(--ak-nut-co);
	font-weight: var(--ak-nut-dam);
	line-height: var(--ak-dong-chat);
	text-decoration: none;
	transition: background-color var(--ak-chuyen), color var(--ak-chuyen), border-color var(--ak-chuyen), transform var(--ak-chuyen);
}

.ak-tq-nut:hover {
	transform: translateY(var(--ak-nhac-nho));
	text-decoration: none;
}

.ak-tq-nut--chinh {
	background: var(--tq-do);
	color: var(--ak-mau-trang);
}

.ak-tq-nut--chinh:hover {
	background: var(--tq-do-dam);
	color: var(--ak-mau-trang);
}

.ak-tq-nut--vien {
	border-color: var(--tq-vien);
	background: var(--ak-mau-trang);
	color: var(--tq-den);
}

.ak-tq-nut--vien:hover {
	border-color: var(--tq-do);
	color: var(--tq-do);
}

.ak-tq-nut--sang {
	border-color: rgba(255, 255, 255, 0.4);
	background: transparent;
	color: var(--ak-mau-trang);
}

.ak-tq-nut--sang:hover {
	border-color: var(--ak-mau-trang);
	background: rgba(255, 255, 255, 0.1);
	color: var(--ak-mau-trang);
}

/* Mục lục dính
   ------------------------------------------------------------------------- */

.ak-tq-muc-luc {
	position: sticky;
	top: var(--tq-dau-trang);
	z-index: 20;
	border-bottom: 1px solid var(--tq-vien);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(8px);
}

/*
 * Dải mục lục rộng hơn phần thân trang và đệm ngang hẹp hơn, vì mười một mục
 * không lọt vào bề ngang 1240px của phần thân. Cố ý không canh thẳng hàng với
 * nội dung: đây là thanh điều hướng, không phải một khối nội dung.
 */
.ak-tq-muc-luc__trong {
	display: flex;
	gap: var(--ak-cach-1);
	max-width: var(--ak-rong-rong);
	margin: 0 auto;
	padding: 0 var(--ak-le);
	overflow-x: auto;
	scrollbar-width: none;

	/* Mép phải mờ dần khi còn mục chưa nhìn thấy, để biết là cuộn được. */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
}

.ak-tq-muc-luc__trong::-webkit-scrollbar {
	display: none;
}

.ak-tq-muc-luc a {
	position: relative;
	flex: none;
	padding: var(--ak-cach-4) var(--ak-cach-3);
	color: var(--tq-mo);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--ak-chuyen-nhanh);
}

.ak-tq-muc-luc a::after {
	position: absolute;
	right: 0.75rem;
	bottom: 0;
	left: 0.75rem;
	height: 2px;
	background: var(--tq-do-hinh);
	transform: scaleX(0);
	transition: transform var(--ak-chuyen);
	content: "";
}

.ak-tq-muc-luc a:hover,
.ak-tq-muc-luc a.la-hien {
	color: var(--tq-den);
}

.ak-tq-muc-luc a.la-hien::after {
	transform: scaleX(1);
}

/* Khối và đầu mục
   ------------------------------------------------------------------------- */

.ak-tq-khoi {
	padding: clamp(var(--ak-cach-8), 7vw, 96px) 0;
	scroll-margin-top: calc(var(--tq-dau-trang) + 3.5rem);
}

.ak-tq-khoi--xam {
	background: var(--tq-nen);
}

.ak-tq-khoi--toi {
	background: var(--tq-den);
	color: var(--ak-chu-nen-toi-2);
}

.ak-tq-dau-muc {
	max-width: 62ch;
	margin: 0 0 var(--ak-cach-7);
}

.ak-tq-nhan {
	margin: 0 0 var(--ak-cach-2);
	color: var(--tq-do);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-tq-tieu-de {
	margin: 0;
	color: var(--tq-den);
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-chat);
	letter-spacing: var(--ak-gian-sit);
}

.ak-tq-khoi--toi .ak-tq-tieu-de {
	color: var(--ak-mau-trang);
}

.ak-tq-mo-ta {
	margin: var(--ak-cach-3) 0 0;
	color: var(--tq-mo);
	font-size: var(--ak-co-chu);
}

.ak-tq-khoi--toi .ak-tq-mo-ta {
	color: var(--ak-chu-nen-toi-3);
}

/* Phần chữ chạy dài
   ------------------------------------------------------------------------- */

.ak-tq-van-ban > *:first-child {
	margin-top: 0;
}

.ak-tq-van-ban > *:last-child {
	margin-bottom: 0;
}

.ak-tq-van-ban p,
.ak-tq-van-ban li {
	font-size: var(--ak-co-chu);
	line-height: var(--ak-dong-doc);
}

.ak-tq-van-ban p {
	margin: 0 0 var(--ak-cach-4);
}

.ak-tq-van-ban ul {
	margin: 0 0 var(--ak-cach-4);
	padding-left: var(--ak-cach-4);
}

.ak-tq-van-ban li {
	margin-bottom: var(--ak-cach-1);
}

.ak-tq-van-ban a {
	color: var(--tq-do);
	text-decoration: none;
	border-bottom: 1px solid rgba(243, 32, 32, .35);
}

.ak-tq-van-ban a:hover {
	border-bottom-color: var(--tq-do);
}

/* Tổng quan: chữ và video
   ------------------------------------------------------------------------- */

.ak-tq-gt {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(var(--ak-cach-6), 4vw, var(--ak-cach-8));
	align-items: start;
}

.ak-tq-gt--mot-cot {
	grid-template-columns: minmax(0, 1fr);
}

.ak-tq-gt__video {
	position: sticky;
	top: calc(var(--tq-dau-trang) + 4.5rem);
	overflow: hidden;
	border-radius: var(--tq-bo);
	background: var(--tq-nen);
}

.ak-tq-gt__video iframe,
.ak-tq-gt__video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Dải tab dùng chung cho khối mẫu và khối hỏi đáp
   ------------------------------------------------------------------------- */

.ak-tq-tabs {
	display: flex;
	gap: var(--ak-cach-1);
	margin-bottom: var(--ak-cach-6);
	padding-bottom: var(--ak-cach-1);
	overflow-x: auto;
	scrollbar-width: none;

	/* Cùng vệt mờ mép phải như dải mục lục, để biết là còn tab bên phải. */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
}

.ak-tq-tabs::-webkit-scrollbar {
	display: none;
}

.ak-tq-tab {
	flex: none;
	margin: 0;
	padding: var(--ak-cach-2) var(--ak-cach-4);
	border: 1px solid var(--tq-vien);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-mau-trang);
	color: var(--tq-mo);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-chat);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ak-chuyen-nhanh), color var(--ak-chuyen-nhanh), border-color var(--ak-chuyen-nhanh);
}

.ak-tq-tab:hover {
	border-color: var(--tq-do);
	color: var(--tq-do);
}

.ak-tq-tab.la-hien {
	border-color: var(--tq-do);
	background: var(--tq-do);
	color: var(--ak-mau-trang);
}

.ak-tq-tam[hidden] {
	display: none;
}

/* Lưới mặt hàng
   ------------------------------------------------------------------------- */

.ak-tq-luoi-hang {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px var(--ak-cach-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-tq-the-hang a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ak-tq-the-hang__anh {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--ak-cach-3);
	border: 1px solid var(--tq-vien);
	border-radius: var(--ak-goc-vua);
	background: var(--ak-mau-trang);
}

.ak-tq-the-hang__anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ak-chuyen-anh);
}

.ak-tq-the-hang a:hover .ak-tq-the-hang__anh img {
	transform: scale(var(--ak-phong));
}

.ak-tq-the-hang__ten {
	display: block;
	color: var(--tq-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
}

.ak-tq-the-hang a:hover .ak-tq-the-hang__ten {
	color: var(--tq-do);
}

.ak-tq-xem-them {
	margin: var(--ak-cach-6) 0 0;
	text-align: center;
}

/* Khối file CAD & 3D
   ------------------------------------------------------------------------- */

.ak-tq-cad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ak-cach-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-tq-cad__muc {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--ak-cach-1) var(--ak-cach-4);
	align-items: start;
	padding: var(--ak-cach-5);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--tq-bo);
	background: rgba(255, 255, 255, 0.04);
	transition: border-color var(--ak-chuyen-nhanh), background-color var(--ak-chuyen-nhanh);
}

.ak-tq-cad__muc:hover {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.07);
}

.ak-tq-cad__muc.la-cho {
	opacity: 0.55;
}

.ak-tq-cad__hop {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
	align-items: center;
	justify-content: center;
	width: 4.25rem;
	padding: var(--ak-cach-3) var(--ak-cach-1);
	border-radius: var(--ak-goc-vua);
	background: var(--ak-mau-do-mo-2);
	color: var(--ak-mau-trang);
}

.ak-tq-cad__hop .ak-tq-bt {
	width: 1.5rem;
	height: 1.5rem;
}

.ak-tq-cad__dinh-dang {
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
}

.ak-tq-cad__chu {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
}

.ak-tq-cad__chu strong {
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
}

.ak-tq-cad__mo-ta {
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-nho);
	line-height: var(--ak-dong-thoang);
}

.ak-tq-cad__cd {
	color: var(--ak-chu-nen-toi-4);
	font-size: var(--ak-co-be);
	letter-spacing: var(--ak-gian-vua);
}

.ak-tq-cad__nut,
.ak-tq-cad__cho {
	grid-column: 2;
	justify-self: start;
	margin-top: var(--ak-cach-2);
}

.ak-tq-cad__cho {
	padding: var(--ak-cach-2) var(--ak-cach-3);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: var(--ak-goc-tron);
	color: var(--ak-chu-nen-toi-4);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-vua);
}

.ak-tq-cad__ghi-chu {
	max-width: 78ch;
	margin: var(--ak-cach-6) 0 0;
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-vua);
}

.ak-tq-cad__form {
	margin-top: var(--ak-cach-6);
}

/* Bảng
   ------------------------------------------------------------------------- */

.ak-tq-tim {
	position: relative;
	max-width: 26rem;
	margin: 0 0 20px;
	color: var(--tq-mo);
}

.ak-tq-tim .ak-tq-bt {
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 1.05rem;
	height: 1.05rem;
	transform: translateY(-50%);
	pointer-events: none;
}

.ak-tq-tim input {
	width: 100%;
	height: auto;
	margin: 0;
	padding: var(--ak-cach-3) var(--ak-cach-4) var(--ak-cach-3) 44px;
	border: 1px solid var(--ak-o-vien);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-mau-trang);
	box-shadow: none;
	color: var(--tq-den);
	font-size: var(--ak-co-vua);
}

.ak-tq-tim input:focus {
	border-color: var(--ak-o-vien-tieu-diem);
	box-shadow: var(--ak-vong-tieu-diem);
	outline: none;
}

.ak-tq-cuon {
	overflow-x: auto;
	border: 1px solid var(--tq-vien);
	border-radius: var(--tq-bo);
	background: var(--ak-mau-trang);
	-webkit-overflow-scrolling: touch;
}

.ak-tq-bang {
	width: 100%;
	min-width: 704px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--ak-co-vua);
}

.ak-tq-bang th,
.ak-tq-bang td {
	padding: var(--ak-cach-3) var(--ak-cach-4);
	border: 0;
	border-bottom: 1px solid var(--tq-vien);
	text-align: left;
	vertical-align: top;
	line-height: var(--ak-dong-vua);
}

.ak-tq-bang thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--tq-nen);
	color: var(--tq-den);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
	white-space: nowrap;
}

.ak-tq-bang tbody tr:last-child th,
.ak-tq-bang tbody tr:last-child td {
	border-bottom: 0;
}

.ak-tq-bang tbody tr:hover {
	background: var(--ak-mau-do-mo);
}

.ak-tq-bang tbody th {
	color: var(--tq-den);
	font-weight: var(--ak-dam-vua);
}

.ak-tq-bang__stt {
	width: 3.5rem;
	color: var(--tq-mo);
	font-weight: var(--ak-dam-nhe);
	text-align: center;
}

.ak-tq-bang__gia {
	color: var(--tq-do);
	font-weight: var(--ak-dam-manh);
	white-space: nowrap;
}

.ak-tq-bang__kq {
	color: var(--tq-den);
	font-weight: var(--ak-dam-vua);
	white-space: nowrap;
}

.ak-tq-bang tr[hidden] {
	display: none;
}

.ak-tq-khong-thay {
	margin: 0;
	padding: var(--ak-cach-6) var(--ak-cach-4);
	color: var(--tq-mo);
	text-align: center;
}

.ak-tq-luu-y {
	display: flex;
	gap: var(--ak-cach-3);
	align-items: flex-start;
	max-width: 82ch;
	margin: var(--ak-cach-5) 0 0;
	padding: var(--ak-cach-4) var(--ak-cach-5);
	border-left: 3px solid var(--tq-do-hinh);
	border-radius: 0 var(--ak-goc-vua) var(--ak-goc-vua) 0;
	background: var(--tq-nen);
	color: var(--tq-chu);
	font-size: var(--ak-co-vua);
}

.ak-tq-khoi--xam .ak-tq-luu-y {
	background: var(--ak-mau-trang);
}

.ak-tq-luu-y .ak-tq-bt {
	margin-top: var(--ak-cach-1);
	color: var(--tq-do);
}

.ak-tq-uu-dai {
	margin-top: 28px;
}

/* Chứng chỉ
   ------------------------------------------------------------------------- */

.ak-tq-cc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--ak-cach-6), 4vw, var(--ak-cach-8));
	align-items: center;
}

.ak-tq-cc__anh {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--tq-vien);
	border-radius: var(--tq-bo);
	background: var(--tq-nen);
}

.ak-tq-cc__chu p {
	max-width: 56ch;
	font-size: var(--ak-co-chu);
	line-height: var(--ak-dong-doc);
}

.ak-tq-cc__neo {
	margin-top: var(--ak-cach-5);
}

/* Nút mở ảnh lớn
   ------------------------------------------------------------------------- */

.ak-tq-mo-anh {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: inherit;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.ak-tq-mo-anh img {
	width: 100%;
	transition: transform var(--ak-chuyen-anh);
}

.ak-tq-mo-anh:hover img {
	transform: scale(var(--ak-phong));
}

.ak-tq-mo-anh__dau {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--ak-mau-den-mo-3);
	color: var(--ak-mau-trang);
	opacity: 0;
	transition: opacity var(--ak-chuyen-nhanh);
}

.ak-tq-mo-anh:hover .ak-tq-mo-anh__dau,
.ak-tq-mo-anh:focus-visible .ak-tq-mo-anh__dau {
	opacity: 1;
}

/* Quy trình thi công
   ------------------------------------------------------------------------- */

.ak-tq-qt {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(var(--ak-cach-6), 4vw, var(--ak-cach-8));
	align-items: start;
}

.ak-tq-buoc {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ak-tq-buoc li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--ak-cach-4);
	padding: var(--ak-cach-4) 0;
	border-bottom: 1px solid var(--tq-vien);
}

.ak-tq-buoc li:first-child {
	padding-top: 0;
}

.ak-tq-buoc li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ak-tq-buoc__so {
	color: var(--tq-do);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
	line-height: var(--ak-dong-doc);
}

.ak-tq-buoc__chu {
	font-size: var(--ak-co-vua);
	line-height: var(--ak-dong-doc);
}

.ak-tq-qt__anh {
	position: sticky;
	top: calc(var(--tq-dau-trang) + 4.5rem);
	display: grid;
	gap: var(--ak-cach-4);
}

.ak-tq-qt__anh .ak-tq-mo-anh {
	overflow: hidden;
	border: 1px solid var(--tq-vien);
	border-radius: var(--tq-bo);
	background: var(--ak-mau-trang);
}

.ak-tq-qt__ket {
	margin: var(--ak-cach-6) 0 0;
	font-size: var(--ak-co-chu);
}

/* Catalogue
   ------------------------------------------------------------------------- */

.ak-tq-cat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--ak-cach-6), 4vw, var(--ak-cach-8));
	align-items: center;
	padding: clamp(var(--ak-cach-6), 4vw, 48px);
	border: 1px solid var(--tq-vien);
	border-radius: var(--tq-bo);
	background: var(--tq-nen);
}

.ak-tq-cat .ak-tq-dau-muc {
	margin-bottom: var(--ak-cach-5);
}

.ak-tq-cat__ds {
	display: grid;
	gap: var(--ak-cach-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-tq-cat__ds a {
	display: flex;
	gap: var(--ak-cach-3);
	align-items: center;
	padding: var(--ak-cach-3) var(--ak-cach-4);
	border: 1px solid var(--tq-vien);
	border-radius: var(--ak-goc-vua);
	background: var(--ak-mau-trang);
	color: var(--tq-den);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-thuong);
	text-decoration: none;
	transition: border-color var(--ak-chuyen-nhanh), color var(--ak-chuyen-nhanh);
}

.ak-tq-cat__ds a:hover {
	border-color: var(--tq-do);
	color: var(--tq-do);
}

.ak-tq-cat__ds a > span:nth-child(2) {
	flex: 1 1 auto;
}

.ak-tq-cat__dinh-dang {
	flex: none;
	padding: var(--ak-cach-1) var(--ak-cach-2);
	border-radius: var(--ak-goc-nho);
	background: var(--ak-mau-do-mo);
	color: var(--tq-do);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
}

/* Thư viện ảnh dự án
   ------------------------------------------------------------------------- */

.ak-tq-thu-vien {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ak-cach-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-tq-thu-vien li {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--ak-goc-vua);
	background: var(--tq-vien);
}

.ak-tq-thu-vien .ak-tq-mo-anh,
.ak-tq-thu-vien img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hỏi đáp
   ------------------------------------------------------------------------- */

.ak-tq-hoi {
	border-bottom: 1px solid var(--tq-vien);
}

.ak-tq-hoi summary {
	display: flex;
	gap: var(--ak-cach-4);
	align-items: center;
	justify-content: space-between;
	padding: var(--ak-cach-4) 0;
	color: var(--tq-den);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	list-style: none;
	cursor: pointer;
}

.ak-tq-hoi summary::-webkit-details-marker {
	display: none;
}

.ak-tq-hoi summary:hover {
	color: var(--tq-do);
}

.ak-tq-hoi__dau {
	position: relative;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.ak-tq-hoi__dau::before,
.ak-tq-hoi__dau::after {
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity var(--ak-chuyen), transform var(--ak-chuyen);
	content: "";
}

.ak-tq-hoi__dau::before {
	width: 1.05rem;
	height: 1.5px;
}

.ak-tq-hoi__dau::after {
	width: 1.5px;
	height: 1.05rem;
}

.ak-tq-hoi[open] .ak-tq-hoi__dau::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.ak-tq-hoi[open] summary {
	color: var(--tq-do);
}

.ak-tq-hoi .ak-tq-van-ban {
	padding: 0 0 var(--ak-cach-5);
	color: var(--tq-chu);
}

/* Cảm nhận khách hàng
   ------------------------------------------------------------------------- */

.ak-tq-cam-nhan {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-tq-cam-nhan li {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-5);
	justify-content: space-between;
	padding: clamp(var(--ak-cach-5), 2.5vw, var(--ak-cach-6));
	border: 1px solid var(--tq-vien);
	border-radius: var(--tq-bo);
	background: var(--ak-mau-trang);
}

.ak-tq-cam-nhan blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tq-chu);
	font-size: var(--ak-co-vua);
	font-style: normal;
	line-height: var(--ak-dong-doc);
}

.ak-tq-cam-nhan blockquote::before {
	display: block;
	margin-bottom: var(--ak-cach-2);
	color: var(--tq-do);
	font-size: var(--ak-co-h1);
	font-weight: var(--ak-dam-manh);
	line-height: 0.7;
	content: "\201C";
}

.ak-tq-cam-nhan__nguoi {
	display: flex;
	gap: var(--ak-cach-3);
	align-items: center;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--tq-vien);
}

.ak-tq-cam-nhan__nguoi img {
	width: 3rem;
	height: 3rem;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.ak-tq-cam-nhan__nguoi figcaption {
	display: flex;
	flex-direction: column;
}

.ak-tq-cam-nhan__nguoi strong {
	color: var(--tq-den);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-manh);
}

.ak-tq-cam-nhan__nguoi span {
	color: var(--tq-mo);
	font-size: var(--ak-co-vua-nho);
}

/* Kêu gọi cuối trang
   ------------------------------------------------------------------------- */

.ak-tq-cta {
	padding: clamp(48px, 6vw, var(--ak-cach-9)) 0;
	background: var(--tq-den);
	color: var(--ak-chu-nen-toi-2);
}

.ak-tq-cta__trong {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-6);
	align-items: center;
	justify-content: space-between;
}

.ak-tq-cta h2 {
	max-width: 22ch;
	margin: 0;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h2-co);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-chat);
}

.ak-tq-cta p {
	max-width: 52ch;
	margin: var(--ak-cach-3) 0 0;
	font-size: var(--ak-co-vua);
}

.ak-tq-cta__nut {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3);
}

/* Khung xem ảnh lớn
   ------------------------------------------------------------------------- */

.ak-tq-den {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: var(--ak-mau-den-mo-4);
}

.ak-tq-den[hidden] {
	display: none;
}

.ak-tq-den__anh {
	max-width: 100%;
	max-height: 92vh;
	object-fit: contain;
}

.ak-tq-den button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--ak-mau-trang);
	cursor: pointer;
	transition: background-color var(--ak-chuyen-nhanh);
}

.ak-tq-den button:hover {
	background: rgba(255, 255, 255, 0.2);
}

.ak-tq-den button .ak-tq-bt {
	width: 1.35rem;
	height: 1.35rem;
}

.ak-tq-den__dong {
	top: 1.5rem;
	right: 1.5rem;
}

.ak-tq-den__truoc {
	top: 50%;
	left: 1.5rem;
	transform: translateY(-50%);
}

.ak-tq-den__sau {
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
}

/* Ghi đè mặc định của Flatsome
   -------------------------------------------------------------------------

   Flatsome nạp `flatsome-main` và `flatsome-shop` **sau** file này, nên mọi quy
   tắc của họ có cùng độ ưu tiên đều thắng. Thêm `.ak-tq` ở đầu bộ chọn để nâng
   độ ưu tiên lên, thay vì phải gắn `!important` hay đảo thứ tự nạp.

   Ba chỗ va nhau, đã kiểm chứng bằng ảnh chụp thật:

   1. `.uppercase,h6,span.widget-title,th` viết hoa mọi thẻ `th`, kể cả ô tên
      sản phẩm ở đầu mỗi dòng bảng. Bản cũ để chữ thường in đậm.
   2. `input[type=search]` là bộ chọn có thuộc tính nên ăn đứt một lớp đơn, kéo
      theo cả chiều cao, đệm, bo góc và bóng đổ của ô tìm kiếm.
   3. `.button,button,…` viết hoa và thêm chiều cao tối thiểu cho mọi thẻ
      `button`, gồm cả nút mở ảnh và nút của khung xem ảnh lớn. */

.ak-tq .ak-tq-bang th {
	letter-spacing: var(--ak-gian-khong);
	line-height: var(--ak-dong-vua);
	text-transform: none;
}

.ak-tq .ak-tq-bang thead th {
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-tq .ak-tq-tim input {
	height: auto;
	padding: var(--ak-cach-3) var(--ak-cach-4) var(--ak-cach-3) 44px;
	border-radius: var(--ak-goc-tron);
	box-shadow: none;
	font-size: var(--ak-co-vua);
	line-height: var(--ak-dong-vua);
}

.ak-tq .ak-tq-tab,
.ak-tq .ak-tq-mo-anh,
.ak-tq .ak-tq-den button {
	min-height: 0;
	text-shadow: none;
	text-transform: none;
}

.ak-tq .ak-tq-mo-anh {
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* Màn hình hẹp dần
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.ak-tq-luoi-hang {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ak-tq-thu-vien {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ak-tq-cam-nhan {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ak-tq-cam-nhan li:last-child {
		grid-column: span 2;
	}
}

@media (max-width: 849px) {

	.ak-tq {
		--tq-dau-trang: 6.2rem;
	}

	.ak-tq-gt,
	.ak-tq-cc,
	.ak-tq-qt,
	.ak-tq-cat,
	.ak-tq-cad {
		grid-template-columns: minmax(0, 1fr);
	}

	.ak-tq-gt__video,
	.ak-tq-qt__anh {
		position: static;
	}

	.ak-tq-qt__anh {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ak-tq-cc {
		gap: var(--ak-cach-6);
	}

	.ak-tq-cc__anh {
		order: -1;
	}
}

@media (max-width: 640px) {

	.ak-tq-dau {
		min-height: 52vh;
		padding: 10vh 0 6vh;
	}

	.ak-tq-so-lieu {
		gap: var(--ak-cach-3) var(--ak-cach-5);
	}

	.ak-tq-dau__nut .ak-tq-nut {
		flex: 1 1 100%;
		justify-content: center;
	}

	.ak-tq-luoi-hang,
	.ak-tq-thu-vien {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ak-tq-cam-nhan {
		grid-template-columns: minmax(0, 1fr);
	}

	.ak-tq-cam-nhan li:last-child {
		grid-column: auto;
	}

	.ak-tq-qt__anh {
		grid-template-columns: minmax(0, 1fr);
	}

	.ak-tq-cad__muc {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ak-cach-3);
	}

	.ak-tq-cad__hop {
		flex-direction: row;
		width: auto;

		/* Ô lưới mặc định giãn hết bề ngang, phải ghim về mép trái. */
		align-self: start;
		justify-self: start;
		padding: var(--ak-cach-1) var(--ak-cach-3);
	}

	.ak-tq-cad__nut,
	.ak-tq-cad__cho {
		grid-column: 1;
	}

	.ak-tq-den {
		padding: 6vh 3vw;
	}

	.ak-tq-den button {
		width: 2.5rem;
		height: 2.5rem;
	}

	.ak-tq-den__truoc {
		left: 0.5rem;
	}

	.ak-tq-den__sau {
		right: 0.5rem;
	}
}

/* Tôn trọng lựa chọn giảm chuyển động của người dùng
   ------------------------------------------------------------------------- */

/* In giấy: bỏ mọi thứ tương tác, mở hết phần trả lời
   ------------------------------------------------------------------------- */

@media print {

	.ak-tq-muc-luc,
	.ak-tq-den,
	.ak-tq-tim,
	.ak-tq-dau__nut,
	.ak-tq-cta__nut,
	.ak-tq-mo-anh__dau {
		display: none !important;
	}

	.ak-tq-bang {
		min-width: 0;
	}

	.ak-tq-cuon {
		overflow: visible;
	}

	.ak-tq-tam[hidden],
	.ak-tq-hoi .ak-tq-van-ban {
		display: block !important;
	}
}

/*
 * Phần giảm chuyển động của trang này đã gom về `assets/css/hieu-ung.css`,
 * dùng chung cho cả site. Trước đây mỗi trang tự khai một khối riêng, tám khối
 * làm gần như cùng một việc bằng năm cách viết khác nhau. Xem QĐ-22.
 */