/**
 * Chân trang — HM-03. Dựng lại y theo chân trang https://kosmos.vn/.
 *
 * Chân trang là một UX Block gắn vào ô "Custom Footer Block" của Flatsome,
 * không đụng tới footer.php. Đây là bài học QĐ-01: bản ghi đè footer.php thiếu
 * get_footer đã từng làm 169 bài blog mất chân trang ngày 04/09.
 *
 * Các con số dưới đây chép đúng từ bảng kiểu của Kosmos, đọc trực tiếp từ tệp
 * CSS của họ ngày 06/09/2026: khối trên nền #494949 đệm 65px trên và 250px
 * dưới, khối dưới là thẻ trắng bo 5px kéo ngược lên -212px để đè lên khoảng
 * đệm đó, tên cột 14px in hoa có vạch màu 50px dày 3px nằm dưới 15px, liên kết
 * 14px/28px màu #666.
 *
 * Ba chỗ cố ý khác bản gốc, xem CH-19:
 *   1. Hai ảnh nền hoa văn của Kosmos không chép, dùng màu phẳng.
 *   2. Phông chữ giữ Manrope của A Khoa, không đổi sang Roboto.
 *   3. Màu nhấn dùng #f32020 của A Khoa, không dùng #e31937 của Kosmos.
 *
 * Mọi quy tắc nằm dưới `.ak-kft` để không rò ra phần còn lại của site.
 */

.ak-kft {
	--kft-do: var(--ak-mau-do);
	--kft-toi: var(--ak-mau-toi-mo);
	--kft-nen: var(--ak-mau-nen);
	--kft-chu: var(--ak-mau-mo);
}

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

/*
 * Không đặt lề trong ở màn rộng, đúng như bản gốc. Có lề trong thì chữ của khối
 * tối bắt đầu lệch 15px so với mép thẻ trắng bên dưới, hai khối nhìn không
 * thẳng hàng. Lề trong chỉ thêm lại ở màn hẹp để chữ không dính mép.
 */
.ak-kft .ak-wrap {
	max-width: var(--ak-rong-max);
	margin-inline: auto;
}

/* ---------- Dải giữ liên lạc, nằm trên cùng ---------- */

/*
 * Dải này là chỗ đăng ký bản tin duy nhất của cả site, nên nó phải tự đứng
 * được. Trước đây trang liên hệ còn in thêm một dải y hệt cách đó chưa tới một
 * màn hình; dải kia đã gỡ, xem QĐ-23.
 *
 * Nền lấy màu khối nhạt thay cho trắng: dải nằm ngay dưới nội dung trang, mà
 * phần lớn trang có nền trắng, để trắng thì nó lẫn vào nội dung phía trên và
 * không ai nhận ra chân trang đã bắt đầu.
 */
.ak-kft .ak-bar {
	padding: var(--ak-cach-7) 0;
	border-top: 1px solid var(--ak-mau-vien);
	background: var(--kft-nen);
}

.ak-kft .ak-bar .ak-bar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-inline: -15px;
}

.ak-kft .ak-bar-col {
	padding-inline: var(--ak-le-sm);
}

/*
 * Chia 44/56 chứ không 33/67 như lớp của khối dựng sẵn gợi ý. Câu dẫn dài 16
 * chữ, nhét vào một phần ba bề ngang thì nó gãy làm bốn dòng trong khi cột bên
 * cạnh chỉ có một ô nhập và một cái nút, thừa chỗ.
 */
.ak-kft .ak-bar-col--4 {
	width: 44%;
}

.ak-kft .ak-bar-col--8 {
	width: 56%;
}

.ak-kft .ak-bar-head {
	text-align: left;
}

.ak-kft .ak-bar-title {
	margin: 0;
	max-width: 30ch;
	color: var(--kft-toi);
	font-size: var(--ak-co-h3);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-vua);
}

/* ---------- Khối trên: nền tối, ba cột thông tin ---------- */

.ak-kft .ak-ft1 {
	position: relative;
	z-index: 1;
	padding: 65px 0 250px;
	background: var(--kft-toi);
}

.ak-kft .ak-ft1-wrap {
	display: flex;
	justify-content: space-between;
}

.ak-kft .ak-ft1-wrap .ak-item {
	width: 33.3333%;
	padding-right: 80px;
}

.ak-kft .ak-ft1-wrap .ak-item p,
.ak-kft .ak-ft1-wrap .ak-item a {
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-nhe);
	line-height: var(--ak-dong-thoang);
}

.ak-kft .ak-ft1-wrap .ak-item p {
	margin-bottom: 0;
}

.ak-kft .ak-ft1-wrap .ak-item p:nth-child(1) {
	margin: 0 0 var(--ak-cach-2);
}

.ak-kft .ak-ft1-wrap .ak-item strong {
	font-weight: var(--ak-dam-manh);
}

.ak-kft .ak-ft1-wrap .ak-item a {
	text-decoration: none;
	transition: var(--ak-chuyen-nhanh);
}

.ak-kft .ak-ft1-wrap a:hover {
	color: var(--ak-mau-trang);
	text-decoration: underline;
}

/* Ghim bản đồ nằm sát trước chữ, chép đúng cỡ 30px của bản gốc. */
.ak-kft .ak-pin {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: var(--ak-cach-1);
	color: var(--ak-lk-chu);
	vertical-align: -8px;
}

.ak-kft .ak-item-logo img {
	display: block;
	max-width: 220px;
	height: auto;
	padding: var(--ak-cach-3) var(--ak-cach-4);
	border-radius: var(--ak-goc-nho);
	background: var(--ak-mau-trang);
}

/* ---------- Tên cột, dùng chung hai khối ---------- */

.ak-kft .ak-title {
	position: relative;
	display: block;
	margin-bottom: var(--ak-cach-6);
	color: var(--kft-toi);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-manh);
	line-height: 22px; /* Cố ý giữ px, không đổi sang bội số: quy tắc .ak-ft1-wrap .ak-title đè cỡ chữ lên 20px. Xem QĐ-37. */
	text-transform: uppercase;
}

.ak-kft .ak-title::before {
	content: "";
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 50px;
	height: 3px;
	background: var(--kft-do);
}

.ak-kft .ak-ft1-wrap .ak-title {
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h4);
	text-transform: unset;
}

.ak-kft .ak-ft1-wrap .ak-title::before {
	width: 80px;
}

/* ---------- Khối dưới: thẻ trắng kéo ngược lên đè khối tối ---------- */

.ak-kft .ak-ft2 {
	overflow: unset;
	background: var(--kft-nen);
}

.ak-kft .ak-ft2 .ak-wrap {
	position: relative;
	z-index: 2;
	margin-top: -212px;
	padding: 43px 80px 46px;
	border-radius: var(--ak-goc-nho);
	background: var(--ak-mau-trang);
}

.ak-kft .ak-ft2-wrap .ak-top {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--ak-cach-7);
	padding-bottom: var(--ak-cach-7);
	border-bottom: 1px solid var(--ak-mau-trang-mo-1);
}

.ak-kft .ak-ft2-wrap .ak-top .ak-item {
	width: 25%;
	padding-right: var(--ak-cach-6);
}

.ak-kft .ak-ft2-wrap .ak-top .ak-title {
	min-height: 25px;
	padding-right: var(--ak-cach-5);
}

.ak-kft .ak-ft2-wrap .ak-bot {
	display: flex;
	justify-content: space-between;
}

.ak-kft .ak-ft2-wrap .ak-bot .ak-item {
	width: 30%;
	padding-right: var(--ak-cach-6);
}

.ak-kft .ak-ft2-wrap .ak-bot .ak-item:last-child {
	width: 40%;
	padding-right: 0;
}

/* ---------- Danh sách liên kết ---------- */

.ak-kft .ak-ft2-wrap .ak-item .ak-menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-kft .ak-ft2-wrap .ak-item .ak-menu li {
	margin: 0;
	list-style: none;
}

/*
 * Cắt một dòng bằng -webkit-line-clamp đúng như bản gốc. Tên mục dài như
 * "Tổng quan thiết bị vệ sinh" nhờ vậy không xuống dòng làm lệch chiều cao
 * giữa các cột.
 */
.ak-kft .ak-ft2-wrap .ak-item .ak-menu li a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--kft-chu);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-nhe);
	line-height: 28px;
	text-decoration: none;
	text-overflow: ellipsis;
	transition: var(--ak-chuyen-nhanh);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.ak-kft .ak-ft2-wrap .ak-item .ak-menu li a:hover {
	color: var(--ak-lk-chu);
	font-weight: var(--ak-dam-vua);
}

/* ---------- Cụm mạng xã hội và bản đồ ---------- */

.ak-kft .ak-ft2-wrap ul.ak-social {
	display: flex;
	flex-direction: row;
	gap: var(--ak-cach-1);
	justify-content: flex-start;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

/* Flatsome đánh dấu chấm cho mọi li trong nội dung, phải tắt riêng cho hàng này. */
.ak-kft .ak-ft2-wrap ul.ak-social li {
	margin: 0;
	list-style: none;
}

.ak-kft .ak-ft2-wrap .ak-item ul.ak-social li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: unset;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--kft-toi);
	color: var(--ak-mau-trang);
	-webkit-line-clamp: unset;
}

.ak-kft .ak-social li a svg {
	width: 21px;
	height: 21px;
	transition: var(--ak-chuyen-nhanh);
}

.ak-kft .ak-social li a:hover {
	background: var(--ak-nut-chinh-nen);
}

.ak-kft .ak-social li:hover svg {
	transform: scale(1.1);
}

.ak-kft .ak-map iframe {
	display: block;
	width: 100%;
	max-width: 386px;
	height: 150px;
	border-radius: var(--ak-goc-nho);
}

/* ---------- Dòng bản quyền ---------- */

.ak-kft .ak-copyright {
	padding: 21px 0;
	color: var(--kft-chu);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-vua);
	line-height: 20px;
	opacity: .7;
	text-align: center;
}

/* ---------- Biểu mẫu nhận bản tin trong dải trên cùng ---------- */

.ak-kft .ak-bar .wpcf7 form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3);
	align-items: center;

	/* Flatsome đặt lề dưới 1,3em cho mọi thẻ form. Ở đây nó thành 21px trống
	   dưới cái nút, làm dải lệch hẳn: trên 40px dưới 61px. */
	margin-bottom: 0;
}

/*
 * Ô nhập và nút nằm cùng một hàng.
 *
 * Quy tắc cũ nhắm vào `.wpcf7 p`, mà biểu mẫu này gói mỗi phần trong `div` chứ
 * không trong `p`, nên không dòng nào ăn: hai `div` rơi về bề rộng tự nhiên,
 * ô nhập một hàng còn cái nút tụt xuống hàng dưới lệch hẳn sang trái. Nhắm
 * đúng vào hai `div` thì ô nhập giãn ra chiếm chỗ trống, nút giữ nguyên bề
 * rộng theo chữ, hai bên cao bằng nhau.
 */
.ak-kft .ak-bar .wpcf7 form > .ak-form,
.ak-kft .ak-bar .wpcf7 .ak-form--bantin {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3);
	align-items: center;
	width: 100%;
}

.ak-kft .ak-bar .wpcf7 .ak-form__o,
.ak-kft .ak-bar .wpcf7 p {
	flex: 1 1 240px;
	min-width: 0;
	margin: 0;
}

.ak-kft .ak-bar .wpcf7 .ak-form__nut {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--ak-cach-2);
}

/*
 * Con quay chờ của Contact Form 7 nằm ngay sau cái nút trong cùng ô này.
 *
 * Mặc định nó chỉ `visibility: hidden` lúc rỗi, tức là vẫn chiếm 24px cộng lề
 * hai bên. Ở khổ rộng thì 32px đó đẩy cái nút lệch khỏi mép phải; ở khổ hẹp,
 * lúc nút trải hết bề ngang, nó chen mất chỗ nên nút hụt lại một đoạn không ai
 * hiểu vì sao. Cho nó ra khỏi dòng chảy hẳn khi rỗi, và trả lại đúng lúc đang
 * gửi — Contact Form 7 gắn lớp `submitting` vào thẻ form trong lúc đó.
 */
.ak-kft .ak-bar .wpcf7 .wpcf7-spinner {
	display: none;
	margin: 0;
}

.ak-kft .ak-bar .wpcf7 form.submitting .wpcf7-spinner {
	display: inline-block;
}

/* Gợi ý trong ô lấy đúng màu của mọi biểu mẫu khác trên site: 4,99:1. */
.ak-kft .ak-bar .wpcf7 input::placeholder {
	color: var(--ak-o-goi-y);
	opacity: 1;
}

/* Dòng báo kết quả gửi luôn chiếm trọn một hàng, không chen vào giữa. */
.ak-kft .ak-bar .wpcf7 .wpcf7-response-output {
	flex: 1 0 100%;
	margin: 0;
}

.ak-kft .ak-bar .wpcf7 input[type="text"],
.ak-kft .ak-bar .wpcf7 input[type="email"],
.ak-kft .ak-bar .wpcf7 input[type="tel"] {
	width: 100%;
	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;
	font-size: var(--ak-co-nho);
}

.ak-kft .ak-bar .wpcf7 input[type="submit"] {
	height: var(--ak-o-cao);
	margin: 0;
	padding: 0 28px;
	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-nho);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-khong);
	white-space: nowrap;
	transition: background var(--ak-chuyen), transform var(--ak-chuyen),
		box-shadow var(--ak-chuyen);
}

.ak-kft .ak-bar .wpcf7 input[type="submit"]:hover {
	background: var(--ak-nut-chinh-nen-re);
	transform: translateY(var(--ak-nhac-nho));
	box-shadow: var(--ak-bong-do);
}

.ak-kft .ak-bar .wpcf7 input[type="submit"]:active {
	background: var(--ak-nut-chinh-nen-nhan);
	transform: translateY(0);
	box-shadow: none;
}

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

/* ---------- Màn hẹp ---------- */

@media (max-width: 1024px) {
	.ak-kft .ak-ft2 .ak-wrap {
		padding: var(--ak-cach-6) var(--ak-cach-6) 36px;
	}

	.ak-kft .ak-ft1-wrap .ak-item {
		padding-right: var(--ak-cach-6);
	}
}

@media (max-width: 849px) {
	.ak-kft .ak-bar-col--4,
	.ak-kft .ak-bar-col--8 {
		width: 100%;
	}

	.ak-kft .ak-bar-head {
		padding-top: 0;
		padding-bottom: var(--ak-cach-4);
	}

	.ak-kft .ak-bar-title {
		max-width: none;
		font-size: var(--ak-co-h4);
	}

	/* Hẹp quá thì nút xuống hàng, nhưng trải hết bề ngang cho cân với ô nhập. */
	.ak-kft .ak-bar .wpcf7 .ak-form__nut {
		flex: 1 0 100%;
	}

	.ak-kft .ak-bar .wpcf7 input[type="submit"] {
		width: 100%;
	}

	.ak-kft .ak-ft1 {
		padding: 44px 0 190px;
	}

	.ak-kft .ak-ft1-wrap,
	.ak-kft .ak-ft2-wrap .ak-top,
	.ak-kft .ak-ft2-wrap .ak-bot {
		flex-wrap: wrap;
	}

	.ak-kft .ak-ft1-wrap .ak-item {
		width: 100%;
		padding-right: 0;
		margin-bottom: var(--ak-cach-6);
	}

	.ak-kft .ak-ft1-wrap .ak-item:last-child {
		margin-bottom: 0;
	}

	.ak-kft .ak-ft2-wrap .ak-top .ak-item,
	.ak-kft .ak-ft2-wrap .ak-bot .ak-item,
	.ak-kft .ak-ft2-wrap .ak-bot .ak-item:last-child {
		width: 50%;
		margin-bottom: var(--ak-cach-6);
		padding-right: 20px;
	}
}

@media (max-width: 549px) {
	.ak-kft .ak-ft2 .ak-wrap {
		margin-top: -170px;
		padding: 28px 20px var(--ak-cach-6);
	}

	.ak-kft .ak-ft2-wrap .ak-top .ak-item,
	.ak-kft .ak-ft2-wrap .ak-bot .ak-item,
	.ak-kft .ak-ft2-wrap .ak-bot .ak-item:last-child {
		width: 100%;
		padding-right: 0;
	}
}

/* Lề trong chỉ dùng ở màn hẹp, xem ghi chú ở quy tắc .ak-wrap phía trên. */
@media (max-width: 1240px) {
	.ak-kft .ak-wrap {
		padding-inline: var(--ak-le-sm);
	}
}