/**
 * Trang xưởng sản xuất — HM-16.
 *
 * Bản dựng thứ hai, theo ảnh giao diện khách gửi ngày 05/09/2026. Bản một đi
 * nền tối kiểu bản vẽ kỹ thuật, đã lưu ở
 * backup-noithatakhoa/xuong-san-xuat-v1-20260905.
 *
 * Nhịp màu của trang: trắng là nền chính, xen ba dải để chia đoạn — xám nhạt
 * cho dải điểm nhấn, be ấm cho khối xưởng lavabo và khối liên hệ, navy đậm cho
 * dải cam kết.
 *
 * Đỏ logo #f32020 là màu nhấn duy nhất và cố tình dùng ít, khoảng một phần
 * hai mươi diện tích trang, vì đỏ nguyên bản trải rộng là chói mắt. Ba sắc độ
 * chia việc rõ ràng:
 *
 *   --xs-do       đỏ logo nguyên bản, chỉ đặt vào vạch trang trí và số hotline,
 *                 tức những chỗ là hình chứ không phải chữ nhỏ
 *   --xs-do-dam   đỏ hạ sáng, dùng cho chữ và nền nút. Chữ trắng trên nền này
 *                 đạt 5,7:1 nên đọc được, còn đỏ nguyên bản chỉ 4,2:1
 *   --xs-do-tham  đỏ sẫm, chỉ dùng khi rê chuột
 *
 * Hai mã đầu lấy đúng từ thanh-ly.css và dai-ly.css để ba trang tự dựng của
 * website dùng chung một thang đỏ, sửa một chỗ là biết phải sửa những đâu.
 *
 * Nền be trước đây ngả cam để hợp với màu nhấn cũ, nay rút về be trung tính
 * cho khỏi đánh nhau với đỏ.
 *
 * Góc vuông toàn trang, không bo tròn. Đường phân cách là nét 1px màu nhạt.
 *
 * Mọi quy tắc nằm dưới `.ak-xs`. File chỉ nạp trên trang có shortcode.
 * Đầu trang và chân trang do Flatsome lo, file này không đụng tới.
 */

.ak-xs {
	--xs-navy: var(--ak-mau-navy);
	--xs-navy-dam: var(--ak-mau-navy-dam);
	--xs-do: var(--ak-mau-do);
	--xs-do-dam: var(--ak-mau-do-dam);
	--xs-do-tham: var(--ak-mau-do-tham);
	--xs-nen-am: var(--ak-mau-nen-am);
	--xs-xam: var(--ak-mau-nen);
	--xs-vien: var(--ak-mau-vien);
	--xs-vien-am: var(--ak-mau-vien-am);
	--xs-chu: var(--ak-mau-chu);
	--xs-chu-mo: var(--ak-mau-mo);

	margin: 0;
	background: var(--ak-mau-trang);
	color: var(--xs-chu);
	font-size: var(--ak-co-chu);
	line-height: var(--ak-dong-thoang);

	/*
	 * Cắt phần thò ngang. Lúc khối trượt vào chỗ, nó nằm lệch sang phải vài
	 * chục pixel, không cắt thì trang sinh thanh cuộn ngang. Dùng `clip` chứ
	 * không dùng `hidden` để không biến khối này thành vùng cuộn dọc.
	 */
	overflow-x: clip;
}

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

/* Độ đặc hiệu bằng 0 để không đè lên các lớp bên dưới. */
.ak-xs :where(h1, h2, h3) {
	margin: 0;
	color: var(--xs-navy);
	font-weight: var(--ak-dam-rat);
	letter-spacing: var(--ak-gian-sit);
	line-height: var(--ak-dong-chat);
}

.ak-xs :where(p, ul, ol, figure, figcaption) {
	margin: 0;
	padding: 0;
}

.ak-xs :where(li) {
	list-style: none;
}

.ak-xs :where(img) {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

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

.ak-xs-khoi {
	padding: var(--ak-cach-9) 0;
}

/* -------------------------------------------------------------------------
 * Mảnh dùng lại: nhãn nhỏ, tiêu đề có gạch, biểu tượng, nút, ô giữ chỗ ảnh
 * ---------------------------------------------------------------------- */

.ak-xs-nhan {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-3);
	color: var(--xs-do-dam);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-xs-nhan::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--xs-do);
	flex: none;
}

.ak-xs-tieu-de-gach {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-4);
	font-size: var(--ak-co-h2);
}

.ak-xs-tieu-de-gach::before {
	content: "";
	width: 34px;
	height: 3px;
	background: var(--xs-do);
	flex: none;
}

.ak-xs-bt {
	width: 26px;
	height: 26px;
	flex: none;
	color: var(--xs-navy);
}

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

.ak-xs-nut:hover,
.ak-xs-nut:focus-visible {
	background: var(--xs-do-tham);
	color: var(--ak-mau-trang);
}

.ak-xs-nut i {
	font-style: normal;
}

.ak-xs-nut--vien {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
}

.ak-xs-nut--vien:hover,
.ak-xs-nut--vien:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: var(--ak-mau-trang);
}

.ak-xs-nut--toi {
	background: var(--xs-navy);
}

.ak-xs-nut--toi:hover,
.ak-xs-nut--toi:focus-visible {
	background: var(--xs-navy-dam);
}

/* Ảnh chưa có thì hiện ô gạch chéo kèm biểu tượng, không để khoảng trắng. */
.ak-xs-cho-anh {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 140px;
	background: repeating-linear-gradient(
		135deg,
		var(--ak-mau-nen-2),
		var(--ak-mau-nen-2) 9px,
		var(--ak-mau-vien) 9px,
		var(--ak-mau-vien) 18px
	);
}

.ak-xs-cho-anh .ak-xs-bt {
	width: 42px;
	height: 42px;
	color: var(--ak-mau-mo);
}

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

.ak-xs-hero {
	position: relative;
	background: var(--xs-navy);
	overflow: hidden;
}

.ak-xs-hero__nen {
	position: absolute;
	inset: 0;
}

.ak-xs-hero__nen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(16, 37, 64, .95) 0%,
		rgba(16, 37, 64, .86) 42%,
		rgba(16, 37, 64, .45) 100%
	);
}

.ak-xs-hero__chu {
	position: relative;
	padding-top: 104px;
	padding-bottom: 104px;
	max-width: 760px;
}

/*
 * Trên nền navy mọi bậc đỏ đều đọc dưới 3,5:1 nên chữ nhãn chuyển hẳn sang
 * trắng, đo được 13,22:1. Vạch giữ nguyên đỏ vì vạch là hình, không phải chữ,
 * và chỉ cần 3:1.
 */
.ak-xs-nhan--sang {
	color: var(--ak-mau-trang);
}

.ak-xs-nhan--sang::before {
	background: var(--xs-do);
}

.ak-xs-hero h1 {
	margin-top: var(--ak-cach-4);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-hero-co);
	line-height: 1.18;
}

.ak-xs-hero__mo-ta {
	margin-top: var(--ak-cach-4);
	max-width: 560px;
	color: var(--ak-chu-nen-toi-2);
	font-size: var(--ak-co-chu);
}

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

/* -------------------------------------------------------------------------
 * Dải điểm nhấn
 * ---------------------------------------------------------------------- */

.ak-xs-dai {
	background: var(--xs-xam);
	border-top: 1px solid var(--xs-vien);
	border-bottom: 1px solid var(--xs-vien);
}

.ak-xs-dai__trong {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.ak-xs-dai__o {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ak-cach-3);
	padding: var(--ak-cach-5) var(--ak-cach-4);
	color: var(--xs-navy);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-vua);
	text-align: center;
}

.ak-xs-dai__o + .ak-xs-dai__o {
	border-left: 1px solid var(--ak-mau-vien);
}

/* -------------------------------------------------------------------------
 * Hệ thống cơ sở
 * ---------------------------------------------------------------------- */

.ak-xs-dau-khoi {
	margin-bottom: var(--ak-cach-6);
}

.ak-xs-dau-khoi h2 {
	margin-top: var(--ak-cach-3);
	font-size: var(--ak-co-h2-co);
}

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

.ak-xs-dau-khoi--hang h2 {
	margin-top: 0;
}

.ak-xs-ghi-chu {
	color: var(--xs-chu-mo);
	font-size: var(--ak-co-vua-nho);
	text-align: right;
}

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

.ak-xs-cs__the {
	border: 1px solid var(--xs-vien);
	background: var(--ak-mau-trang);
}

.ak-xs-cs__anh {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.ak-xs-cs__chu {
	padding: var(--ak-cach-4) var(--ak-cach-4) 20px;
}

.ak-xs-cs__chu h3 {
	font-size: var(--ak-co-h5);
}

.ak-xs-dia-chi {
	display: flex;
	align-items: flex-start;
	gap: var(--ak-cach-2);
	margin-top: var(--ak-cach-2);
	color: var(--xs-chu-mo);
	font-size: var(--ak-co-nho);
	line-height: var(--ak-dong-vua);
}

.ak-xs-dia-chi .ak-xs-bt {
	width: 17px;
	height: 17px;
	margin-top: var(--ak-cach-1);
	color: var(--xs-do-dam);
}

/* -------------------------------------------------------------------------
 * Khối xưởng lavabo, nền be ấm
 * ---------------------------------------------------------------------- */

.ak-xs-kem {
	background: var(--xs-nen-am);
	padding: var(--ak-cach-9) 0;
}

.ak-xs-lv {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ak-cach-8);
	align-items: center;
}

.ak-xs-lv__anh {
	position: relative;
}

.ak-xs-lv__chinh {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ak-xs-lv__phu {
	position: absolute;
	right: -18px;
	bottom: 34px;
	width: 44%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 5px solid var(--xs-nen-am);
	box-shadow: var(--ak-bong-1);
}

.ak-xs-lv__chu h2 {
	margin-top: var(--ak-cach-4);
	font-size: var(--ak-co-h2-co);
}

.ak-xs-lv__chu > p {
	margin-top: var(--ak-cach-4);
	color: var(--xs-chu-mo);
}

.ak-xs-lv__y {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 28px 0 var(--ak-cach-6);
}

.ak-xs-lv__o {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-3);
	padding: 0 var(--ak-cach-4);
	color: var(--ak-mau-chu);
	font-size: var(--ak-co-nho);
	line-height: var(--ak-dong-vua);
}

.ak-xs-lv__o:first-child {
	padding-left: 0;
}

.ak-xs-lv__o + .ak-xs-lv__o {
	border-left: 1px solid var(--xs-vien-am);
}

.ak-xs-lv__o .ak-xs-bt {
	width: 30px;
	height: 30px;
}

/* -------------------------------------------------------------------------
 * Danh mục sản phẩm
 * ---------------------------------------------------------------------- */

.ak-xs-sp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: var(--ak-cach-6);
}

.ak-xs-sp__o {
	display: block;
	border: 1px solid var(--xs-vien);
	background: var(--ak-mau-trang);
	color: var(--xs-navy);
	text-decoration: none;
	transition: border-color var(--ak-chuyen), box-shadow var(--ak-chuyen);
}

a.ak-xs-sp__o:hover,
a.ak-xs-sp__o:focus-visible {
	border-color: var(--xs-do-dam);
	box-shadow: var(--ak-bong-1);
	color: var(--xs-navy);
}

.ak-xs-sp__anh {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ak-xs-sp__ten {
	display: block;
	padding: var(--ak-cach-3) var(--ak-cach-3) var(--ak-cach-4);
	border-top: 1px solid var(--ak-mau-nen-2);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-vua);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Dải cam kết, nền navy
 * ---------------------------------------------------------------------- */

/* Nét đỏ mỏng trên đầu dải navy, đủ để dải này thuộc về cùng bộ màu với nút và
 * các vạch trang trí, mà không phải tô đỏ cả mảng lớn. */
.ak-xs-toi {
	background: var(--xs-navy);
	border-top: 3px solid var(--xs-do);
	padding: var(--ak-cach-8) 0;
	color: var(--ak-mau-trang);
}

.ak-xs-toi h2 {
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h2-co);
	text-align: center;
}

.ak-xs-ck {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 36px;
}

.ak-xs-ck__o {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ak-cach-3);
	padding: var(--ak-cach-1) var(--ak-cach-4);
	color: var(--ak-chu-nen-toi-1);
	font-size: var(--ak-co-nho);
	text-align: center;
}

.ak-xs-ck__o + .ak-xs-ck__o {
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.ak-xs-ck__o .ak-xs-bt {
	width: 34px;
	height: 34px;
	color: var(--ak-mau-trang);
}

/* -------------------------------------------------------------------------
 * Thư viện ảnh
 * ---------------------------------------------------------------------- */

.ak-xs-kg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ak-cach-3);
}

.ak-xs-kg__o {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--xs-xam);
}

/* -------------------------------------------------------------------------
 * Khối liên hệ
 * ---------------------------------------------------------------------- */

.ak-xs-lh__trong {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
	align-items: center;
}

.ak-xs-gach {
	display: block;
	width: 38px;
	height: 3px;
	background: var(--xs-do);
	margin-bottom: var(--ak-cach-5);
}

.ak-xs-lh__chu h2 {
	font-size: var(--ak-co-h1-co);
}

.ak-xs-lh__chu > p {
	margin-top: var(--ak-cach-3);
	color: var(--xs-chu-mo);
}

.ak-xs-hotline {
	display: inline-flex;
	align-items: center;
	gap: var(--ak-cach-3);
	margin-top: var(--ak-cach-5);
	color: var(--xs-navy);
	font-size: var(--ak-co-h4);
	text-decoration: none;
}

.ak-xs-hotline:hover,
.ak-xs-hotline:focus-visible {
	color: var(--xs-do-tham);
}

.ak-xs-hotline .ak-xs-bt {
	width: 24px;
	height: 24px;
	color: var(--xs-do);
}

/* Số hotline là chỗ duy nhất trên nền sáng được dùng đỏ logo nguyên bản, vì
 * chữ 22px đậm nên vẫn đủ tương phản, và đây là chỗ đáng để mắt dừng lại. */
.ak-xs-hotline b {
	color: var(--xs-do);
	font-size: var(--ak-co-h3);
	font-weight: var(--ak-dam-rat);
}

/* ---- Biểu mẫu Contact Form 7 ----
 * Đánh dấu bằng lớp .ak-form ngay trong nội dung biểu mẫu, xem
 * akhoa_scf_tat_autop() trong inc/scf-chung.php.
 */

.ak-xs .ak-form {
	display: grid;
	gap: var(--ak-cach-3);
}

.ak-xs .ak-form__hang {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ak-cach-3);
}

.ak-xs .ak-form .wpcf7-form-control-wrap {
	display: block;
}

.ak-xs .ak-form input[type="text"],
.ak-xs .ak-form input[type="tel"],
.ak-xs .ak-form input[type="email"],
.ak-xs .ak-form textarea {
	width: 100%;
	height: auto;
	margin: 0;
	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(--xs-chu);
	font-size: var(--ak-co-vua);
	line-height: var(--ak-dong-vua);
}

.ak-xs .ak-form textarea {
	min-height: 104px;
	resize: vertical;
}

.ak-xs .ak-form input::placeholder,
.ak-xs .ak-form textarea::placeholder {
	color: var(--ak-o-goi-y);
	opacity: 1;
}

.ak-xs .ak-form input[type="text"]:focus,
.ak-xs .ak-form input[type="tel"]:focus,
.ak-xs .ak-form input[type="email"]:focus,
.ak-xs .ak-form textarea:focus {
	border-color: var(--ak-o-vien-tieu-diem);
	box-shadow: var(--ak-vong-tieu-diem);
	outline: none;
}

.ak-xs .ak-form input[type="submit"] {
	width: auto;
	min-height: 0;
	margin: 0;
	padding: var(--ak-nut-dem);
	border: 0;
	border-radius: var(--ak-goc-tron);
	background: var(--xs-navy);
	box-shadow: none;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-vua);
	letter-spacing: var(--ak-gian-khong);
	line-height: var(--ak-dong-chat);
	text-transform: none;
	cursor: pointer;
	transition: background var(--ak-chuyen-nhanh);
}

.ak-xs .ak-form input[type="submit"]:hover {
	background: var(--xs-navy-dam);
}

.ak-xs .ak-form .wpcf7-not-valid-tip {
	margin-top: var(--ak-cach-1);
	color: var(--ak-mau-do-dam);
	font-size: var(--ak-co-vua-nho);
}

.ak-xs .wpcf7-response-output {
	margin: var(--ak-cach-3) 0 0;
	padding: var(--ak-cach-3) var(--ak-cach-3);
	border-width: 1px;
	font-size: var(--ak-co-nho);
}

.ak-xs .wpcf7-spinner {
	margin: 0 0 0 var(--ak-cach-3);
}

/* -------------------------------------------------------------------------
 * Khối hiện dần khi cuộn
 *
 * Cơ chế nằm ở `assets/css/hieu-ung.css` và `assets/js/hieu-ung.js`, dùng
 * chung cho cả site. Trang này chỉ việc gắn `data-ak-vao` vào khối trong
 * `inc/xuong-san-xuat.php`; thời gian, đường cong và quãng đường lấy từ
 * `tokens.css`.
 *
 * Bản trước khai riêng ở đây với lớp `ak-xs-js`, còn trang giới thiệu lại khai
 * kiểu khác, nên hai trang chuyển động không cùng nhịp. Xem QĐ-22.
 * ---------------------------------------------------------------------- */

/* Ảnh nền đầu trang thu nhẹ về, chạy một lần rồi dừng. */
.ak-xs-hero__nen img {
	animation: ak-xs-nen 16s var(--ak-cong-vao) forwards;
	transform-origin: 60% 50%;
}

@keyframes ak-xs-nen {

	from {
		transform: scale(var(--ak-phong));
	}

	to {
		transform: scale(1);
	}
}

/* ---- Rê chuột ---- */

.ak-xs-nut {
	transition: background var(--ak-chuyen-nhanh), border-color var(--ak-chuyen-nhanh), color var(--ak-chuyen-nhanh);
		transform .2s ease, box-shadow .2s ease;
}

.ak-xs-nut:hover,
.ak-xs-nut:focus-visible {
	transform: translateY(var(--ak-nhac-nho));
	box-shadow: var(--ak-bong-1);
}

.ak-xs-nut i {
	transition: transform var(--ak-chuyen);
}

.ak-xs-nut:hover i,
.ak-xs-nut:focus-visible i {
	transform: translateX(var(--ak-day));
}

.ak-xs-dai__o .ak-xs-bt,
.ak-xs-lv__o .ak-xs-bt,
.ak-xs-ck__o .ak-xs-bt {
	transition: transform var(--ak-chuyen), color var(--ak-chuyen);
}

.ak-xs-dai__o:hover .ak-xs-bt,
.ak-xs-lv__o:hover .ak-xs-bt {
	transform: translateY(var(--ak-nhac));
	color: var(--xs-do-dam);
}

.ak-xs-ck__o:hover .ak-xs-bt {
	transform: translateY(var(--ak-nhac)) scale(var(--ak-phong));
}

.ak-xs-cs__anh img,
.ak-xs-sp__anh img,
.ak-xs-kg__o img,
.ak-xs-lv__chinh img {
	transition: transform var(--ak-chuyen-anh);
}

.ak-xs-cs__the {
	transition: border-color var(--ak-chuyen), box-shadow var(--ak-chuyen), transform var(--ak-chuyen);
}

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

.ak-xs-cs__the:hover .ak-xs-cs__anh img,
.ak-xs-kg__o:hover img,
.ak-xs-lv__anh:hover .ak-xs-lv__chinh img {
	transform: scale(var(--ak-phong));
}

a.ak-xs-sp__o:hover .ak-xs-sp__anh img,
a.ak-xs-sp__o:focus-visible .ak-xs-sp__anh img {
	transform: scale(var(--ak-phong));
}

a.ak-xs-sp__o {
	transition: border-color var(--ak-chuyen), box-shadow var(--ak-chuyen), transform var(--ak-chuyen);
}

a.ak-xs-sp__o:hover,
a.ak-xs-sp__o:focus-visible {
	transform: translateY(var(--ak-nhac));
}

.ak-xs-sp__ten {
	transition: color var(--ak-chuyen-nhanh);
}

a.ak-xs-sp__o:hover .ak-xs-sp__ten {
	color: var(--xs-do-tham);
}

.ak-xs-hotline .ak-xs-bt {
	transition: transform var(--ak-chuyen);
}

.ak-xs-hotline:hover .ak-xs-bt {
	transform: rotate(-12deg) scale(var(--ak-phong));
}

.ak-xs-lv__phu {
	transition: transform var(--ak-chuyen), box-shadow var(--ak-chuyen);
}

.ak-xs-lv__anh:hover .ak-xs-lv__phu {
	transform: translateY(var(--ak-nhac));
	box-shadow: var(--ak-bong-2);
}

.ak-xs .ak-form input[type="submit"] {
	transition: background var(--ak-chuyen), transform var(--ak-chuyen), box-shadow var(--ak-chuyen);
}

.ak-xs .ak-form input[type="submit"]:hover {
	transform: translateY(var(--ak-nhac-nho));
	box-shadow: var(--ak-bong-1);
}

/* Viền chỉ hiện khi đi bằng bàn phím, chuột bấm thì không thấy. */
.ak-xs a:focus-visible,
.ak-xs button:focus-visible,
.ak-xs input:focus-visible {
	outline: 2px solid var(--xs-do-dam);
	outline-offset: 3px;
}

/* Người dùng đã yêu cầu giảm chuyển động thì bỏ hết, chỉ giữ đổi màu. */
/* -------------------------------------------------------------------------
 * Màn hình hẹp
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.ak-xs-lv,
	.ak-xs-lh__trong {
		gap: var(--ak-cach-7);
	}

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

@media (max-width: 849px) {

	.ak-xs-khoi,
	.ak-xs-kem {
		padding: 52px 0;
	}

	.ak-xs-hero__chu {
		padding-top: var(--ak-cach-9);
		padding-bottom: var(--ak-cach-9);
	}

	.ak-xs-cs,
	.ak-xs-kg {
		grid-template-columns: repeat(2, 1fr);
	}

	.ak-xs-lv,
	.ak-xs-lh__trong {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ak-cach-6);
	}

	.ak-xs-lv__phu {
		position: static;
		width: 56%;
		margin-top: -46px;
		margin-left: auto;
		margin-right: var(--ak-cach-2);
	}

	.ak-xs-ck {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 0;
	}

	.ak-xs-ck__o:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 549px) {

	.ak-xs-dai__trong,
	.ak-xs-cs,
	.ak-xs-sp,
	.ak-xs-kg,
	.ak-xs-ck {
		grid-template-columns: minmax(0, 1fr);
	}

	.ak-xs-dai__o + .ak-xs-dai__o {
		border-left: 0;
		border-top: 1px solid var(--ak-mau-vien);
	}

	.ak-xs-dai__o {
		justify-content: flex-start;
		text-align: left;
	}

	.ak-xs-ck__o {
		border-left: 0 !important;
	}

	.ak-xs-lv__y {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ak-cach-4);
	}

	.ak-xs-lv__o {
		flex-direction: row;
		align-items: center;
		padding: 0;
		border-left: 0 !important;
	}

	.ak-xs-dau-khoi--hang {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ak-cach-2);
	}

	.ak-xs-ghi-chu {
		text-align: left;
	}

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

	.ak-xs-hero__nut .ak-xs-nut {
		flex: 1 1 auto;
		justify-content: center;
	}
}

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