/**
 * Trang thanh lý — HM-24.
 *
 * Mọi quy tắc đều nằm dưới `.ak-tl` nên không rò rỉ ra phần còn lại của site.
 * File này chỉ được nạp trên trang có shortcode [akhoa_thanh_ly].
 */

.ak-tl {
	/* Trên nền sáng chỉ dùng một sắc đỏ: bậc đậm. Bậc sáng #f32020 dành cho
	   nền mờ, vòng tiêu điểm, quầng bóng và cho chữ nằm trên khối tối — nơi
	   bậc đậm chỉ đọc được 2,28:1. */
	--ak-do: var(--ak-mau-do-dam);
	--ak-do-dam: var(--ak-mau-do-tham);
	--ak-do-tren-toi: var(--ak-mau-do);
	--ak-muc: var(--ak-mau-muc);
	--ak-mo: var(--ak-mau-mo);
	--ak-nen: var(--ak-mau-nen);
	--ak-vien: var(--ak-mau-vien);
	--ak-sao: var(--ak-mau-muc);
	--ak-xanh: var(--ak-mau-tot);
	--ak-bo-goc: var(--ak-goc-to);
	--ak-bong: var(--ak-bong-1);
	--ak-bong-noi: var(--ak-bong-2);

	color: var(--ak-muc);
	font-size: var(--ak-co-chu);
	line-height: var(--ak-dong-thoang);
}

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

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

/*
 * Bọc trong :where() để hai khối nền tảng này có độ đặc hiệu bằng 0. Nếu viết
 * thẳng `.ak-tl h1` thì nó đặc hiệu hơn mọi lớp một tên bên dưới và sẽ đè cả
 * màu chữ lẫn canh lề của chúng: đúng cái bẫy từng làm tiêu đề hero đen trên
 * nền đen và lệch trái.
 */
.ak-tl :where(h1, h2, h3) {
	color: var(--ak-chu-tieu-de, var(--ak-muc));
	margin: 0;
	letter-spacing: var(--ak-gian-sit);
	line-height: var(--ak-dong-chat);
}

.ak-tl :where(p) {
	margin: 0;
}

/* ------------------------------------------------------------------ nút */

.ak-tl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: 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-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--ak-chuyen), box-shadow var(--ak-chuyen), background-color var(--ak-chuyen), color var(--ak-chuyen);
}

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

.ak-tl-btn--chinh {
	background: var(--ak-nut-chinh-nen);
	border-color: var(--ak-nut-chinh-nen);
	color: var(--ak-nut-chinh-chu);
}

.ak-tl-btn--chinh:hover {
	background: var(--ak-nut-chinh-nen-re);
	border-color: var(--ak-nut-chinh-nen-re);
	color: var(--ak-nut-chinh-chu);
	box-shadow: var(--ak-bong-do);
}

.ak-tl-btn--chinh:active {
	background: var(--ak-nut-chinh-nen-nhan);
	border-color: var(--ak-nut-chinh-nen-nhan);
	transform: translateY(0);
	box-shadow: none;
}

.ak-tl-btn--chinh:focus-visible {
	outline: none;
	border-color: var(--ak-mau-do);
	box-shadow: var(--ak-vong-tieu-diem);
}

.ak-tl-btn--chinh[disabled],
.ak-tl-btn--chinh[aria-disabled="true"] {
	background: var(--ak-vo-hieu-nen);
	border-color: var(--ak-vo-hieu-vien);
	color: var(--ak-vo-hieu-chu);
	box-shadow: none;
	cursor: not-allowed;
}

.ak-tl-btn--vien {
	background: transparent;
	border-color: rgba(255, 255, 255, .45);
	color: var(--ak-mau-trang);
}

.ak-tl-btn--vien:hover {
	background: rgba(255, 255, 255, .12);
	border-color: var(--ak-mau-trang);
	color: var(--ak-mau-trang);
}

.ak-tl-btn--nhat {
	background: var(--ak-nen);
	border-color: var(--ak-vien);
	color: var(--ak-muc);
}

.ak-tl-btn--nhat:hover {
	background: var(--ak-mau-nen-2);
	color: var(--ak-muc);
}

.ak-tl-btn--nho {
	padding: var(--ak-nut-dem-nho);
	font-size: var(--ak-nut-co-nho);
}

.ak-tl-btn--to {
	padding: var(--ak-nut-dem-to);
	font-size: var(--ak-nut-co);
	white-space: nowrap;
}

/* ----------------------------------------------------------------- hero */

.ak-tl-hero {
	position: relative;
	max-width: var(--ak-rong-max);
	margin: var(--ak-cach-5) auto var(--ak-cach-8);
	padding: 0 var(--ak-le);
}

.ak-tl-hero__bg {
	position: absolute;
	inset: 0 20px;
	border-radius: var(--ak-goc-lon);
	background:
		radial-gradient(900px 420px at 12% -10%, rgba(243, 32, 32, .28), transparent 62%),
		linear-gradient(140deg, var(--ak-mau-toi) 0%, var(--ak-mau-toi-2) 52%, var(--ak-mau-toi) 100%);
	overflow: hidden;
}

.ak-tl-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}

.ak-tl-hero__inner {
	--ak-chu-tieu-de: var(--ak-mau-trang);

	position: relative;
	padding: 68px 44px var(--ak-cach-8);
	text-align: center;
	color: var(--ak-mau-trang);
}

.ak-tl-hero__eyebrow {
	display: inline-block;
	margin-bottom: 20px;
	padding: var(--ak-cach-2) var(--ak-cach-4);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--ak-goc-tron);
	background: rgba(255, 255, 255, .07);
	color: var(--ak-chu-nen-toi-2);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-vua);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-tl-hero__title {
	max-width: 20ch;
	margin: 0 auto 20px;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-hero);
	font-weight: var(--ak-dam-rat);
}

.ak-tl-hero__title em {
	display: inline-block;
	color: var(--ak-do-tren-toi);
	font-style: normal;
}

.ak-tl-hero__sub {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--ak-chu-nen-toi-2);
	font-size: var(--ak-co-h5);
}

.ak-tl-hero__sub strong {
	color: var(--ak-mau-trang);
}

.ak-tl-hero__nut {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ak-cach-3);
	margin-top: var(--ak-cach-6);
}

.ak-tl-hero__so {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	max-width: var(--ak-rong-hep);
	margin: 46px auto 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--ak-goc-to);
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}

.ak-tl-hero__so > div {
	padding: 20px var(--ak-cach-3);
	background: var(--ak-mau-trang-mo-05);
	text-align: center;
}

.ak-tl-hero__so dt {
	margin: 0 0 var(--ak-cach-1);
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-tl-hero__so dd {
	margin: 0;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h3-co);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-sit);
}

/* ------------------------------------------------------------ đếm ngược */

.ak-tl-dem {
	margin: var(--ak-cach-6) auto 0;
}

.ak-tl-dem__nhan {
	display: block;
	margin-bottom: var(--ak-cach-3);
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-tl-dem__o {
	display: flex;
	justify-content: center;
	gap: var(--ak-cach-2);
}

.ak-tl-dem__oi {
	min-width: 82px;
	padding: var(--ak-cach-3) var(--ak-cach-2);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--ak-goc-vua);
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(6px);
}

.ak-tl-dem__oi b {
	display: block;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
	font-variant-numeric: tabular-nums;
	line-height: var(--ak-dong-sit);
}

.ak-tl-dem__oi span {
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-be);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-tl-dem.is-het .ak-tl-dem__oi {
	opacity: .45;
}

/* -------------------------------------------------------------- vì sao */

.ak-tl-vi-sao {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 64px;
}

.ak-tl-vi-sao article {
	position: relative;
	padding: 28px var(--ak-cach-5) var(--ak-cach-5);
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-bo-goc);
	background: var(--ak-mau-trang);
	transition: border-color var(--ak-chuyen), box-shadow var(--ak-chuyen), transform var(--ak-chuyen);
}

.ak-tl-vi-sao article:hover {
	border-color: var(--ak-mau-vien-dam);
	box-shadow: var(--ak-bong);
	transform: translateY(var(--ak-nhac));
}

.ak-tl-vi-sao__so {
	display: block;
	margin-bottom: var(--ak-cach-3);
	color: var(--ak-do);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-rat);
	letter-spacing: var(--ak-gian-rong);
}

.ak-tl-vi-sao h3 {
	margin-bottom: var(--ak-cach-2);
	font-size: var(--ak-co-h4);
	font-weight: var(--ak-dam-manh);
}

.ak-tl-vi-sao p {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
	line-height: var(--ak-dong-thoang);
}

/* ------------------------------------------------------------ thanh lọc */

.ak-tl-thanh {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-cach-4);
	margin-bottom: var(--ak-cach-4);
	padding: var(--ak-cach-3) var(--ak-cach-4);
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-bo-goc);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	box-shadow: var(--ak-bong);
}

.ak-tl-chip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-2);
}

.ak-tl-chip__nut {
	padding: var(--ak-cach-2) var(--ak-cach-4);
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-mau-trang);
	color: var(--ak-muc);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-chat);
	cursor: pointer;
	transition: all var(--ak-chuyen);
}

.ak-tl-chip__nut span {
	margin-left: var(--ak-cach-1);
	color: var(--ak-mo);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
}

.ak-tl-chip__nut:hover {
	border-color: var(--ak-mau-vien-dam);
	background: var(--ak-nen);
}

.ak-tl-chip__nut.is-chon {
	border-color: var(--ak-muc);
	background: var(--ak-muc);
	color: var(--ak-mau-trang);
}

.ak-tl-chip__nut.is-chon span {
	color: var(--ak-chu-nen-toi-3);
}

.ak-tl-thanh__phai {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-2);
}

.ak-tl-tim input,
.ak-tl-chon select {
	height: var(--ak-o-cao);
	margin: 0;
	padding: 0 var(--ak-cach-4);
	border: 1px solid var(--ak-o-vien);
	border-radius: var(--ak-o-goc);
	background: var(--ak-mau-trang);
	box-shadow: none;
	color: var(--ak-muc);
	font-size: var(--ak-co-nho);
}

.ak-tl-tim input {
	min-width: 210px;
}

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

.ak-tl-ket-qua {
	margin-bottom: 20px;
	color: var(--ak-mo);
	font-size: var(--ak-co-nho);
}

/* ------------------------------------------------------------------ lưới */

.ak-tl-luoi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ak-cach-5);
	margin-bottom: 28px;
}

.ak-tl-the {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-bo-goc);
	background: var(--ak-mau-trang);
	transition: border-color var(--ak-chuyen), box-shadow var(--ak-chuyen), transform var(--ak-chuyen);
}

.ak-tl-the:hover {
	border-color: var(--ak-mau-vien-dam);
	box-shadow: var(--ak-bong-noi);
	transform: translateY(var(--ak-nhac));
}

.ak-tl-the__anh {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ak-nen);
}

.ak-tl-the__anh a {
	display: block;
	height: 100%;
}

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

.ak-tl-the:hover .ak-tl-the__anh img {
	transform: scale(var(--ak-phong));
}

.ak-tl-nhan {
	position: absolute;
	top: 12px;
	padding: var(--ak-cach-1) var(--ak-cach-3);
	border-radius: var(--ak-goc-tron);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-khong);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tl-nhan--giam {
	left: 12px;
	background: var(--ak-nut-chinh-nen);
	color: var(--ak-mau-trang);
}

.ak-tl-nhan--het {
	right: 12px;
	background: var(--ak-mau-muc);
	color: var(--ak-mau-trang);
}

.ak-tl-the__than {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--ak-cach-4) var(--ak-cach-4) 20px;
}

.ak-tl-the__dm {
	margin-bottom: var(--ak-cach-2);
	color: var(--ak-do);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-tl-the__ten {
	margin-bottom: var(--ak-cach-2);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-vua);
}

.ak-tl-the__ten a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ak-muc);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-decoration: none;
}

.ak-tl-the__ten a:hover {
	color: var(--ak-do);
}

.ak-tl-the__ma {
	margin-bottom: var(--ak-cach-2);
	color: var(--ak-mo);
	font-size: var(--ak-co-vua-nho);
}

.ak-tl-the__dg {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-2);
	margin-bottom: var(--ak-cach-3);
	font-size: var(--ak-co-vua-nho);
}

.ak-tl-the__dg b {
	color: var(--ak-muc);
	font-weight: var(--ak-dam-manh);
}

.ak-tl-the__dg span {
	color: var(--ak-mo);
}

.ak-tl-sao {
	position: relative;
	display: inline-block;
	color: var(--ak-mau-vien-dam);
	font-size: var(--ak-co-vua-nho);
	line-height: var(--ak-dong-khong);
	white-space: nowrap;
}

.ak-tl-sao::before {
	content: "\2605\2605\2605\2605\2605";
	letter-spacing: 1px;
}

.ak-tl-sao i {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--ak-sao);
	font-style: normal;
}

.ak-tl-sao i::before {
	content: "\2605\2605\2605\2605\2605";
	letter-spacing: 1px;
}

.ak-tl-the__gia {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ak-cach-2);
	margin-top: auto;
}

.ak-tl-the__gia del {
	color: var(--ak-mo);
	font-size: var(--ak-co-nho);
	text-decoration: line-through;
}

.ak-tl-the__gia ins {
	color: var(--ak-do);
	font-size: var(--ak-co-h3);
	font-weight: var(--ak-dam-rat);
	letter-spacing: var(--ak-gian-sit);
	text-decoration: none;
}

.ak-tl-the__gia small {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua-nho);
}

.ak-tl-the__loi {
	margin-top: var(--ak-cach-1);
	color: var(--ak-xanh);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-vua);
}

.ak-tl-the__kho {
	margin: var(--ak-cach-3) 0 var(--ak-cach-4);
}

.ak-tl-thanh-kho {
	height: 5px;
	margin-bottom: var(--ak-cach-2);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-mau-nen-2);
	overflow: hidden;
}

.ak-tl-thanh-kho i {
	display: block;
	height: 100%;
	border-radius: var(--ak-goc-tron);
	background: linear-gradient(90deg, var(--ak-mau-do-dam) 0%, var(--ak-mau-do-tham) 100%);
}

.ak-tl-the.is-sap-het .ak-tl-thanh-kho i {
	background: var(--ak-do);
}

.ak-tl-the__kho p {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua-nho);
}

.ak-tl-the__nut {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--ak-cach-2);
}

.ak-tl-the__nut .ak-tl-btn {
	width: 100%;
}

/* Woo chèn thêm liên kết "Xem giỏ hàng" sau khi thêm vào giỏ. */
.ak-tl-the__nut .added_to_cart {
	grid-column: 1 / -1;
	color: var(--ak-mo);
	font-size: var(--ak-co-vua-nho);
	text-align: center;
}

.ak-tl-rong {
	padding: 48px 20px;
	border: 1px dashed var(--ak-vien);
	border-radius: var(--ak-bo-goc);
	color: var(--ak-mo);
	text-align: center;
}

.ak-tl-lien-ket {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ak-do);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.ak-tl-them {
	margin-bottom: 68px;
	text-align: center;
}

.ak-tl-them .ak-tl-btn--vien {
	border-color: var(--ak-vien);
	color: var(--ak-muc);
}

.ak-tl-them .ak-tl-btn--vien:hover {
	border-color: var(--ak-muc);
	background: var(--ak-nen);
	color: var(--ak-muc);
}

/* ---------------------------------------------------------------- câu hỏi */

.ak-tl-hoi {
	margin-bottom: 64px;
}

.ak-tl-hoi h2 {
	margin-bottom: var(--ak-cach-5);
	font-size: var(--ak-co-h2-co);
	font-weight: var(--ak-dam-rat);
}

.ak-tl-hoi__ds {
	display: grid;
	gap: var(--ak-cach-3);
}

.ak-tl-hoi details {
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc-vua);
	background: var(--ak-mau-trang);
	transition: border-color var(--ak-chuyen-nhanh);
}

.ak-tl-hoi details[open] {
	border-color: var(--ak-mau-vien-dam);
	box-shadow: var(--ak-bong);
}

.ak-tl-hoi summary {
	padding: var(--ak-cach-4) var(--ak-cach-5);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-manh);
	list-style: none;
	cursor: pointer;
}

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

.ak-tl-hoi summary::after {
	content: "+";
	float: right;
	color: var(--ak-do);
	font-size: var(--ak-co-h4);
	font-weight: var(--ak-dam-nhe);
	line-height: var(--ak-dong-chat);
}

.ak-tl-hoi details[open] summary::after {
	content: "\2212";
}

.ak-tl-hoi details p {
	padding: 0 var(--ak-cach-5) 19px;
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

/* -------------------------------------------------------------------- CTA */

.ak-tl-cta {
	margin-bottom: var(--ak-cach-2);
	padding: 0 20px;
}

.ak-tl-cta__inner {
	--ak-chu-tieu-de: var(--ak-mau-trang);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-cach-5);
	padding: 44px 44px;
	border-radius: var(--ak-goc-lon);
	background: linear-gradient(135deg, var(--ak-mau-toi) 0%, var(--ak-mau-toi-2) 100%);
	color: var(--ak-mau-trang);
}

.ak-tl-cta h2 {
	margin-bottom: var(--ak-cach-2);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h2-co);
	font-weight: var(--ak-dam-rat);
}

.ak-tl-cta p {
	max-width: 62ch;
	color: var(--ak-chu-nen-toi-2);
	font-size: var(--ak-co-chu);
}

.ak-tl--rong {
	max-width: 680px;
	margin: 60px auto;
	padding: var(--ak-cach-7);
	border: 1px dashed var(--ak-vien);
	border-radius: var(--ak-bo-goc);
	color: var(--ak-mo);
	text-align: center;
}

/* ------------------------------------------------------------ đáp ứng */

@media (max-width: 1100px) {
	.ak-tl-luoi {
		grid-template-columns: repeat(3, 1fr);
	}

	.ak-tl-vi-sao {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 849px) {
	.ak-tl-hero__inner {
		padding: 52px var(--ak-cach-5) 44px;
	}

	.ak-tl-hero__so {
		grid-template-columns: repeat(2, 1fr);
	}

	.ak-tl-thanh {
		position: static;
	}

	.ak-tl-thanh__phai {
		width: 100%;
	}

	.ak-tl-tim,
	.ak-tl-chon {
		flex: 1 1 160px;
	}

	.ak-tl-tim input,
	.ak-tl-chon select {
		width: 100%;
	}

	.ak-tl-cta__inner {
		padding: var(--ak-cach-6) var(--ak-cach-5);
	}
}

@media (max-width: 640px) {
	.ak-tl-luoi {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ak-cach-3);
	}

	.ak-tl-vi-sao {
		grid-template-columns: 1fr;
	}

	.ak-tl-hero__bg,
	.ak-tl-hero__inner {
		border-radius: var(--ak-goc-lon);
	}

	.ak-tl-dem__oi {
		min-width: 0;
		flex: 1;
		padding: var(--ak-cach-3) var(--ak-cach-1);
	}

	.ak-tl-dem__oi b {
		font-size: var(--ak-co-h3);
	}

	.ak-tl-the__than {
		padding: var(--ak-cach-3) var(--ak-cach-3) var(--ak-cach-4);
	}

	.ak-tl-the__gia ins {
		font-size: var(--ak-co-h4);
	}

	.ak-tl-the__nut {
		grid-template-columns: 1fr;
	}

	.ak-tl-chip {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -18px;
		padding: 0 var(--ak-cach-4) var(--ak-cach-1);
		scrollbar-width: none;
	}

	.ak-tl-chip::-webkit-scrollbar {
		display: none;
	}

	.ak-tl-chip__nut {
		white-space: nowrap;
	}
}

/*
 * 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.
 */