/**
 * Trang đại lý — HM-17.
 *
 * Mọi quy tắc nằm dưới `.ak-dl` nên không rò rỉ ra phần còn lại của site.
 * File chỉ nạp trên trang có shortcode [akhoa_dai_ly].
 *
 * Bố cục bám theo trang chính sách đại lý của Kosmos: ảnh lớn dẫn dắt, các khối
 * chữ luôn đi kèm ảnh và đảo chiều so le, một khối nền tối cho kho hàng.
 */

.ak-dl {
	/* 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-toi: var(--ak-mau-toi);
	--ak-goc: var(--ak-goc-to);
	--ak-bong: var(--ak-bong-1);

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

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

/*
 * Bọc trong :where() để hai khối nền tảng này có độ đặc hiệu bằng 0, không đè
 * lên màu chữ và canh lề của các lớp một tên bên dưới.
 */
.ak-dl :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-dl :where(p, ul, ol) {
	margin: 0;
}

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

.ak-dl-khoi {
	padding: 68px 20px;
}

.ak-dl-nen {
	padding: 68px 0;
	background: var(--ak-nen);
}

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

.ak-dl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	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);
}

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

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

.ak-dl-btn--do: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-dl-btn--do:active {
	background: var(--ak-nut-chinh-nen-nhan);
	border-color: var(--ak-nut-chinh-nen-nhan);
	transform: translateY(0);
	box-shadow: none;
}

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

.ak-dl-btn--do[disabled],
.ak-dl-btn--do[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-dl-btn--trang {
	background: var(--ak-mau-trang);
	border-color: var(--ak-vien);
	color: var(--ak-muc);
}

.ak-dl-btn--trang:hover {
	border-color: var(--ak-muc);
	color: var(--ak-muc);
}

/* ------------------------------------------------------ băng ảnh đầu trang */

.ak-dl-bang {
	max-width: var(--ak-rong-rong);
	margin: 0 auto;
	overflow: hidden;
}

.ak-dl-bang__anh {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
}

/* --------------------------------------------------------- tiêu đề trang */

.ak-dl-dau {
	padding-top: var(--ak-cach-8);
	text-align: center;
}

.ak-dl-nhan {
	display: inline-block;
	margin-bottom: var(--ak-cach-4);
	padding: var(--ak-cach-2) var(--ak-cach-4);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-mau-do-mo);
	color: var(--ak-do);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-dl-dau__tieu-de {
	position: relative;
	padding-bottom: 20px;
	font-size: var(--ak-co-hero);
	font-weight: var(--ak-dam-rat);
}

.ak-dl-dau__tieu-de::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 72px;
	height: 4px;
	border-radius: var(--ak-goc-tron);
	background: var(--ak-do);
	transform: translateX(-50%);
}

.ak-dl-dau__mo-ta {
	max-width: 70ch;
	margin: 20px auto 0;
	color: var(--ak-mo);
	font-size: var(--ak-co-chu);
}

/* --------------------------------------------------------- tiêu đề khối */

.ak-dl-tieu-de {
	margin-bottom: var(--ak-cach-7);
	text-align: center;
}

.ak-dl-tieu-de h2 {
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
}

.ak-dl-tieu-de p {
	max-width: 72ch;
	margin: var(--ak-cach-3) auto 0;
	color: var(--ak-mo);
	font-size: var(--ak-co-chu);
}

/* ----------------------------------------------------- thẻ chính sách */

.ak-dl-the-cs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ak-cach-5);
}

.ak-dl-cs {
	position: relative;
	padding: var(--ak-cach-6) var(--ak-cach-6) var(--ak-cach-6);
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc);
	background: var(--ak-mau-trang);
	transition: border-color var(--ak-chuyen), box-shadow var(--ak-chuyen), transform var(--ak-chuyen);
}

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

.ak-dl-cs__so {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--ak-cach-4);
	border-radius: 50%;
	background: var(--ak-mau-do-mo);
	color: var(--ak-do);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-rat);
}

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

.ak-dl-cs p {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

.ak-dl-giua {
	margin-top: 36px;
	text-align: center;
}

/* ------------------------------------------------------------- hỗ trợ */

.ak-dl-ht {
	display: grid;
	gap: var(--ak-cach-5);
}

.ak-dl-ht__hang {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc-lon);
	background: var(--ak-mau-trang);
}

.ak-dl-ht__hang.is-dao .ak-dl-ht__chu {
	order: 2;
}

.ak-dl-ht__chu {
	padding: var(--ak-cach-7) 36px;
	border-left: 5px solid var(--ak-do);
}

.ak-dl-ht__hang.is-dao .ak-dl-ht__chu {
	border-right: 5px solid var(--ak-do);
	border-left: 0;
}

.ak-dl-ht__chu h3 {
	margin-bottom: var(--ak-cach-4);
	font-size: var(--ak-co-h4);
	font-weight: var(--ak-dam-manh);
}

.ak-dl-ht__chu ul {
	padding: 0;
	list-style: none;
}

.ak-dl-ht__chu li {
	position: relative;
	margin-bottom: var(--ak-cach-3);
	padding-left: var(--ak-cach-6);
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

.ak-dl-ht__chu li::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 16px;
	height: 9px;
	border-bottom: 2.5px solid var(--ak-do);
	border-left: 2.5px solid var(--ak-do);
	transform: rotate(-45deg);
}

.ak-dl-ht__anh {
	min-height: 260px;
	background: var(--ak-nen);
}

.ak-dl-ht__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------- thương hiệu */

.ak-dl-th {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.ak-dl-th h2 {
	margin-bottom: var(--ak-cach-4);
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
}

.ak-dl-th__chu p {
	color: var(--ak-mo);
	font-size: var(--ak-co-chu);
}

.ak-dl-th__y {
	padding: var(--ak-cach-6) var(--ak-cach-6);
	border-radius: var(--ak-goc);
	background: var(--ak-nen);
	list-style: none;
}

.ak-dl-th__y li {
	position: relative;
	margin-bottom: var(--ak-cach-3);
	padding-left: var(--ak-cach-5);
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

.ak-dl-th__y li:last-child {
	margin-bottom: 0;
}

.ak-dl-th__y li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ak-do);
}

/* ---------------------------------------------------------- điều kiện */

.ak-dl-dk {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ak-cach-5);
}

.ak-dl-dk__the {
	overflow: hidden;
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc);
	background: var(--ak-mau-trang);
	transition: box-shadow var(--ak-chuyen), transform var(--ak-chuyen);
}

.ak-dl-dk__the:hover {
	box-shadow: var(--ak-bong);
	transform: translateY(var(--ak-nhac));
}

.ak-dl-dk__anh {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ak-nen);
}

.ak-dl-dk__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ak-chuyen-anh);
}

.ak-dl-dk__the:hover .ak-dl-dk__anh img {
	transform: scale(var(--ak-phong));
}

.ak-dl-dk__chu {
	padding: 20px 20px var(--ak-cach-5);
}

.ak-dl-dk__chu h3 {
	margin-bottom: var(--ak-cach-2);
	font-size: var(--ak-co-h5);
	font-weight: var(--ak-dam-manh);
}

.ak-dl-dk__chu p {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

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

.ak-dl-vs {
	display: grid;
	gap: var(--ak-cach-6);
}

.ak-dl-vs__hang {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: var(--ak-cach-6);
	align-items: center;
}

.ak-dl-vs__hang.is-dao .ak-dl-vs__chu {
	order: 2;
}

.ak-dl-vs__chu {
	padding: var(--ak-cach-6) var(--ak-cach-6);
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc);
	background: var(--ak-mau-trang);
}

.ak-dl-vs__so {
	display: flex;
	align-items: baseline;
	gap: var(--ak-cach-2);
	margin-bottom: var(--ak-cach-2);
}

.ak-dl-vs__so b {
	color: var(--ak-do);
	font-size: var(--ak-co-h1);
	font-weight: var(--ak-dam-rat);
	letter-spacing: var(--ak-gian-sit);
	line-height: var(--ak-dong-khong);
}

.ak-dl-vs__so span {
	color: var(--ak-mo);
	font-size: var(--ak-co-nho);
}

.ak-dl-vs__chu h3 {
	margin-bottom: var(--ak-cach-2);
	font-size: var(--ak-co-h3);
	font-weight: var(--ak-dam-manh);
}

.ak-dl-vs__chu p {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

.ak-dl-vs__anh {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--ak-goc);
	background: var(--ak-nen);
}

.ak-dl-vs__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------ kho, nền tối */

.ak-dl-toi {
	--ak-chu-tieu-de: var(--ak-mau-trang);

	padding: var(--ak-cach-9) 0;
	background: linear-gradient(150deg, var(--ak-mau-toi) 0%, var(--ak-mau-toi-2) 55%, var(--ak-mau-toi) 100%);
	color: var(--ak-mau-trang);
}

.ak-dl-toi__tieu-de {
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
	text-align: center;
}

.ak-dl-toi__mo-ta {
	max-width: 70ch;
	margin: var(--ak-cach-3) auto 0;
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-chu);
	text-align: center;
}

.ak-dl-toi__than {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--ak-cach-6);
	align-items: start;
	margin-top: var(--ak-cach-7);
}

.ak-dl-toi__ds {
	display: grid;
	gap: var(--ak-cach-3);
}

.ak-dl-diem {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: var(--ak-cach-4);
	align-items: center;
	padding: var(--ak-cach-3);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ak-goc-vua);
	background: rgba(255, 255, 255, .05);
	transition: border-color var(--ak-chuyen-nhanh), background-color var(--ak-chuyen-nhanh);
}

.ak-dl-diem:hover {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .09);
}

.ak-dl-diem__anh {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--ak-goc-vua);
	background: rgba(255, 255, 255, .08);
}

.ak-dl-diem__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ak-dl-diem__chu h3 {
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h5);
	font-weight: var(--ak-dam-manh);
}

.ak-dl-diem__nhan {
	display: inline-block;
	margin: var(--ak-cach-1) 0 var(--ak-cach-1);
	padding: var(--ak-cach-1) var(--ak-cach-2);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-mau-do-mo-2);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-vua);
}

.ak-dl-diem__chu p {
	color: var(--ak-chu-nen-toi-3);
	font-size: var(--ak-co-nho);
}

.ak-dl-diem__chu a {
	display: inline-block;
	margin-top: var(--ak-cach-1);
	color: var(--ak-mau-trang-mo-2);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	text-decoration: none;
}

.ak-dl-diem__chu a:hover {
	color: var(--ak-mau-trang);
	text-decoration: underline;
}

.ak-dl-toi__anh {
	position: sticky;
	top: 20px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ak-goc-lon);
	background: rgba(255, 255, 255, .06);
}

.ak-dl-toi__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------- quy trình */

.ak-dl-qt {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ak-dl-qt li {
	position: relative;
	padding: 28px var(--ak-cach-5);
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc);
	background: var(--ak-mau-trang);
}

.ak-dl-qt__so {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: var(--ak-cach-3);
	border-radius: 50%;
	background: var(--ak-nut-chinh-nen);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-rat);
}

.ak-dl-qt h3 {
	margin-bottom: var(--ak-cach-2);
	font-size: var(--ak-co-h5);
	font-weight: var(--ak-dam-manh);
}

.ak-dl-qt p {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

/* --------------------------------------------------------- khuyến mãi */

.ak-dl-km {
	--ak-chu-tieu-de: var(--ak-mau-trang);

	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 0;
	overflow: hidden;
	border-radius: var(--ak-goc-lon);
	background:
		radial-gradient(680px 340px at 10% 0%, rgba(255, 255, 255, .16), transparent 60%),
		linear-gradient(120deg, var(--ak-mau-do-tham) 0%, var(--ak-mau-den) 78%);
	color: var(--ak-mau-trang);
}

.ak-dl-km__chu {
	padding: 48px 44px;
}

.ak-dl-km__chu h2 {
	margin-bottom: var(--ak-cach-3);
	font-size: var(--ak-co-h1-co);
	font-weight: var(--ak-dam-rat);
}

.ak-dl-km__chu > p {
	max-width: 58ch;
	color: var(--ak-chu-nen-toi-1);
	font-size: var(--ak-co-chu);
}

.ak-dl-km__nut {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3);
	margin-top: var(--ak-cach-5);
}

.ak-dl-km__nut .ak-dl-btn--do {
	background: var(--ak-mau-trang);
	border-color: var(--ak-mau-trang);
	color: var(--ak-do);
	box-shadow: var(--ak-bong-1);
}

.ak-dl-km__nut .ak-dl-btn--do:hover {
	background: var(--ak-mau-muc);
	border-color: var(--ak-mau-muc);
	color: var(--ak-mau-trang);
}

.ak-dl-km__nut .ak-dl-btn--trang {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--ak-mau-trang);
}

.ak-dl-km__nut .ak-dl-btn--trang:hover {
	background: rgba(255, 255, 255, .14);
	border-color: var(--ak-mau-trang);
	color: var(--ak-mau-trang);
}

.ak-dl-km__anh {
	min-height: 280px;
	background: rgba(255, 255, 255, .1);
}

.ak-dl-km__anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.ak-dl-dem {
	margin-top: 28px;
}

.ak-dl-dem__nhan {
	display: block;
	margin-bottom: var(--ak-cach-3);
	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-dl-dem__o {
	display: flex;
	gap: var(--ak-cach-2);
}

.ak-dl-dem__oi {
	min-width: 76px;
	padding: var(--ak-cach-3) var(--ak-cach-2);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--ak-goc-vua);
	background: rgba(255, 255, 255, .14);
	text-align: center;
}

.ak-dl-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-dl-dem__oi span {
	color: var(--ak-chu-nen-toi-2);
	font-size: var(--ak-co-be);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-dl-dem.is-het .ak-dl-dem__oi {
	opacity: .5;
}

/* ------------------------------------------------------------ đăng ký */

.ak-dl-form {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: var(--ak-cach-7);
	align-items: start;
}

.ak-dl-form__chu h2 {
	margin-bottom: var(--ak-cach-3);
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
}

.ak-dl-form__chu p {
	color: var(--ak-mo);
	font-size: var(--ak-co-chu);
}

.ak-dl-form__hotline {
	margin-top: var(--ak-cach-4);
}

.ak-dl-form__hotline a {
	color: var(--ak-do);
	font-size: var(--ak-co-h4);
	font-weight: var(--ak-dam-rat);
	text-decoration: none;
}

.ak-dl-form__o {
	padding: var(--ak-cach-6) var(--ak-cach-6);
	border: 1px solid var(--ak-vien);
	border-radius: var(--ak-goc);
	background: var(--ak-mau-trang);
	box-shadow: var(--ak-bong);
}

.ak-dl-form__trong {
	color: var(--ak-mo);
	font-size: var(--ak-co-vua);
}

.ak-dl-form__o input[type="text"],
.ak-dl-form__o input[type="email"],
.ak-dl-form__o input[type="tel"],
.ak-dl-form__o select,
.ak-dl-form__o textarea {
	width: 100%;
	height: auto;
	min-height: var(--ak-o-cao);
	margin-bottom: var(--ak-cach-3);
	padding: var(--ak-o-dem);
	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-vua);
}

.ak-dl-form__o textarea {
	min-height: 110px;
}

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

.ak-dl-form__o input[type="submit"],
.ak-dl-form__o button[type="submit"] {
	width: 100%;
	min-height: 52px;
	margin: var(--ak-cach-1) 0 0;
	padding: var(--ak-nut-dem);
	border: 0;
	border-radius: var(--ak-goc-tron);
	background: var(--ak-nut-chinh-nen);
	color: var(--ak-nut-chinh-chu);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-manh);
	cursor: pointer;
	transition: background-color var(--ak-chuyen-nhanh);
}

.ak-dl-form__o input[type="submit"]:hover,
.ak-dl-form__o button[type="submit"]:hover {
	background: var(--ak-nut-chinh-nen-re);
	box-shadow: var(--ak-bong-do);
}

.ak-dl-form__o label {
	display: block;
	margin-bottom: var(--ak-cach-1);
	color: var(--ak-muc);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
}

/* ------------------------------------------------------------ bản tin */

.ak-dl-bt {
	padding: var(--ak-cach-3) 20px 76px;
	text-align: center;
}

.ak-dl-bt h2 {
	max-width: 34ch;
	margin: 0 auto;
	font-size: var(--ak-co-h2-co);
	font-weight: var(--ak-dam-rat);
}

.ak-dl-bt__o {
	max-width: 520px;
	margin: var(--ak-cach-5) auto 0;
	text-align: left;
}

/*
 * Biểu mẫu bản tin dùng lại form chân trang của Contact Form 7 nên mang sẵn
 * kiểu dáng của theme. Kéo nó về cùng tông với biểu mẫu đăng ký ở trên.
 */
.ak-dl-bt__o input[type="text"],
.ak-dl-bt__o input[type="email"],
.ak-dl-bt__o input[type="tel"],
.ak-dl-bt__o select,
.ak-dl-bt__o textarea {
	width: 100%;
	height: auto;
	min-height: var(--ak-o-cao);
	margin-bottom: var(--ak-cach-3);
	padding: var(--ak-o-dem);
	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-vua);
}

.ak-dl-bt__o textarea {
	min-height: 96px;
}

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

.ak-dl-bt__o input[type="submit"],
.ak-dl-bt__o button[type="submit"] {
	width: 100%;
	min-height: 52px;
	margin: var(--ak-cach-1) 0 0;
	padding: var(--ak-nut-dem);
	border: 0;
	border-radius: var(--ak-goc-tron);
	background: var(--ak-nut-chinh-nen);
	color: var(--ak-nut-chinh-chu);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-khong);
	cursor: pointer;
	transition: background-color var(--ak-chuyen-nhanh);
}

.ak-dl-bt__o input[type="submit"]:hover,
.ak-dl-bt__o button[type="submit"]:hover {
	background: var(--ak-nut-chinh-nen-re);
	box-shadow: var(--ak-bong-do);
}

/* Contact Form 7 bọc mỗi ô trong một <p>, bỏ khoảng trắng thừa của nó. */
.ak-dl-bt__o p,
.ak-dl-form__o p {
	margin: 0;
}

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

@media (max-width: 1024px) {
	.ak-dl-dk {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.ak-dl-toi__than {
		grid-template-columns: 1fr;
	}

	.ak-dl-toi__anh {
		position: static;
		order: -1;
	}
}

@media (max-width: 849px) {
	.ak-dl-khoi,
	.ak-dl-nen {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.ak-dl-the-cs,
	.ak-dl-th,
	.ak-dl-form {
		grid-template-columns: 1fr;
		gap: var(--ak-cach-5);
	}

	.ak-dl-ht__hang,
	.ak-dl-vs__hang,
	.ak-dl-km {
		grid-template-columns: 1fr;
	}

	/* Trên màn hẹp luôn đặt ảnh lên trước cho dễ nhìn, bỏ kiểu so le. */
	.ak-dl-ht__hang.is-dao .ak-dl-ht__chu,
	.ak-dl-vs__hang.is-dao .ak-dl-vs__chu {
		order: 0;
	}

	.ak-dl-ht__hang.is-dao .ak-dl-ht__chu {
		border-right: 0;
		border-left: 5px solid var(--ak-do);
	}

	.ak-dl-ht__chu,
	.ak-dl-km__chu {
		padding: 28px var(--ak-cach-5);
	}

	.ak-dl-bang__anh {
		max-height: 260px;
	}
}

@media (max-width: 549px) {
	.ak-dl-dk,
	.ak-dl-qt {
		grid-template-columns: 1fr;
	}

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

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

	.ak-dl-diem {
		grid-template-columns: 68px minmax(0, 1fr);
	}

	.ak-dl-form__o {
		padding: var(--ak-cach-5) var(--ak-cach-4);
	}
}

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