/**
 * Chân trang "Footer AKhoa" — dựng bằng UX Builder.
 *
 * Bản dựng lại của `chan-trang.css`. Khác ở chỗ khối nội dung nay là Section /
 * Row / Column của UX Builder chứ không phải một ô `[ux_html]` đặc, nên file này
 * chỉ tạo dáng cho phần bên trong cột, còn lưới cột để UX Builder lo.
 *
 * Giữ nguyên ngôn ngữ thị giác của bản cũ, chép từ chân trang Kosmos: khối trên
 * nền tối đệm 65px trên và 250px dưới, khối dưới là thẻ trắng bo góc kéo ngược
 * lên -212px để đè lên khoảng đệm đó, tên cột in hoa có vạch đỏ 50px dày 3px
 * nằm dưới 15px, liên kết 14px/28px màu xám.
 *
 * Namespace `.ak-ft`, không quy tắc nào chạm tới thẻ trần hay lớp của Flatsome.
 */

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

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

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

/*
 * 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-ft__bar {
	border-top: 1px solid var(--ak-mau-vien);
	background: var(--ft-nen);
}

.ak-ft__bar-title {
	max-width: 30ch;
	margin: 0;
	color: var(--ft-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 ---------- */

/*
 * Đệm dưới 250px là chỗ trống để thẻ trắng bên dưới kéo ngược lên đè vào. Đổi
 * số này thì phải đổi `margin-top` của `.ak-ft__card` theo, hai số đi cùng nhau.
 */
.ak-ft__dark {
	position: relative;
	z-index: 1;
	background: var(--ft-toi);
}

.ak-ft__info p {
	margin: 0 0 var(--ak-cach-2);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-nhe);
	line-height: var(--ak-dong-thoang);
}

.ak-ft__info p:last-child {
	margin-bottom: 0;
}

.ak-ft__info strong {
	font-weight: var(--ak-dam-manh);
}

.ak-ft__info a {
	color: var(--ak-mau-trang);
	text-decoration: none;
	transition: var(--ak-chuyen-nhanh);
}

.ak-ft__info 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-ft__pin {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: var(--ak-cach-1);
	color: var(--ak-lk-chu);
	vertical-align: -8px;
}

/* Logo đặt trên nền trắng vì bản logo là chữ sẫm, để thẳng lên nền tối thì mất. */
.ak-ft__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-ft__title {
	position: relative;
	display: block;
	margin: 0 0 var(--ak-cach-6);
	color: var(--ft-toi);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-manh);
	line-height: 22px; /* Cố ý giữ px: quy tắc trong khối tối đè cỡ chữ lên 20px. Xem QĐ-37. */
	text-transform: uppercase;
}

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

/* Trong khối tối tên cột là chữ thường, to hơn, vạch dài hơn. */
.ak-ft__dark .ak-ft__title {
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h4);
	text-transform: none;
}

.ak-ft__dark .ak-ft__title::before {
	width: 80px;
}

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

.ak-ft__light {
	background: var(--ft-nen);
}

/*
 * Thẻ trắng là hai `row` nằm trong hai section liền nhau, không phải một khối.
 * Lý do: một `row` lồng trong `col` thì `wpautop` chèn thêm `<p>` vào giữa và
 * cả lưới vỡ — đã thử và footer gãy làm đôi. Tách ra thì mỗi row là con trực
 * tiếp của section, lưới đúng, và hai nửa ghép lại nhìn vẫn liền một thẻ: nửa
 * trên bo hai góc trên, nửa dưới bo hai góc dưới, giữa hai nửa là một vạch mảnh.
 */
.ak-ft__card {
	position: relative;
	z-index: 2;
	padding-inline: 80px;
	background: var(--ak-mau-trang);
}

/* Chỉ nửa trên kéo ngược lên đè vào khoảng đệm 250px của khối tối. */
.ak-ft__card-top .ak-ft__card {
	margin-top: -212px;
	padding-top: 43px;
	padding-bottom: 40px;
	border-radius: var(--ak-goc-nho) var(--ak-goc-nho) 0 0;
}

.ak-ft__card--bot {
	padding-top: 40px;
	padding-bottom: 46px;
	border-top: 1px solid var(--ak-mau-vien);
	border-radius: 0 0 var(--ak-goc-nho) var(--ak-goc-nho);
}

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

.ak-ft__menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	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. */
.ak-ft__menu-item {
	margin: 0;
	list-style: none;
}

/*
 * Cắt một dò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-ft__menu-item a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ft-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-ft__menu-item a:hover {
	color: var(--ak-lk-chu);
	font-weight: var(--ak-dam-vua);
}

/* ---------- Cụm mạng xã hội ---------- */

/* Cho xuống dòng: màn 320px không đủ chỗ cho cả hàng, nút cuối thò ra mép phải
   và Safari iOS cho vuốt ngang cả trang. */
.ak-ft__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-1);
	justify-content: flex-start;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.ak-ft__social li {
	margin: 0;
	list-style: none;
}

.ak-ft__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ft-toi);
	color: var(--ak-mau-trang);
	transition: background var(--ak-chuyen-nhanh);
}

.ak-ft__social a svg {
	width: 21px;
	height: 21px;
	transition: transform var(--ak-chuyen-nhanh);
}

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

.ak-ft__social a:hover svg {
	transform: scale(1.1);
}

/* ---------- Bản đồ ---------- */

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

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

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

.ak-ft__bottom p {
	margin: 0;
}

/* ---------- Biểu mẫu nhận bản tin ---------- */

.ak-ft__form .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. Biểu mẫu gói mỗi phần trong `div` chứ không
 * trong `p`, nên phải nhắm vào `div`; nhắm vào `p` thì không dòng nào ăn và cái
 * nút tụt xuống hàng dưới.
 */
.ak-ft__form .wpcf7 form > .ak-form,
.ak-ft__form .wpcf7 .ak-form--bantin {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3);
	align-items: center;
	width: 100%;
}

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

.ak-ft__form .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 mặc định chỉ `visibility: hidden` lúc rỗi,
 * tức vẫn chiếm 24px cộng lề. Ở khổ rộng thì nó đẩy cái nút lệch khỏi mép phải;
 * ở khổ hẹp nó chen mất chỗ nên nút hụt lại. Cho ra khỏi dòng chảy khi rỗi, trả
 * lại đúng lúc đang gửi — CF7 gắn lớp `submitting` vào form trong lúc đó.
 */
.ak-ft__form .wpcf7 .wpcf7-spinner {
	display: none;
	margin: 0;
}

.ak-ft__form .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-ft__form .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-ft__form .wpcf7 .wpcf7-response-output {
	flex: 1 0 100%;
	margin: 0;
}

.ak-ft__form .wpcf7 input[type="text"],
.ak-ft__form .wpcf7 input[type="email"],
.ak-ft__form .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-ft__form .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-ft__form .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-ft__form .wpcf7 input[type="submit"]:active {
	background: var(--ak-nut-chinh-nen-nhan);
	transform: translateY(0);
	box-shadow: none;
}

.ak-ft__form .wpcf7 input[type="email"]:focus,
.ak-ft__form .wpcf7 input[type="text"]:focus,
.ak-ft__form .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 ---------- */

/*
 * Dưới 1240px trang hết chỗ trống hai bên, phải tự chừa lề, nếu không chữ dính
 * mép màn. `.row` của Flatsome đã rộng tối đa 1200px nên ở màn rộng không cần.
 */
@media (max-width: 1240px) {
	.ak-ft .row {
		padding-inline: var(--ak-le-sm);
	}
}

@media (max-width: 1024px) {
	.ak-ft .ak-ft__card {
		padding-inline: var(--ak-cach-6);
	}
}

@media (max-width: 849px) {
	.ak-ft__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-ft__form .wpcf7 .ak-form__nut {
		flex: 1 0 100%;
	}

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

@media (max-width: 549px) {
	.ak-ft .ak-ft__card {
		padding-inline: 20px;
	}

	.ak-ft__card-top .ak-ft__card {
		margin-top: -130px;
		padding-top: 28px;
	}

	/*
	 * Bỏ cắt một dòng: cột chỉ còn nửa bề ngang màn, mà tên mục dài như "Hướng
	 * dẫn đổi trả hàng hóa" thì cắt còn "Hướng dẫn đổi tr…" — người xem không
	 * đoán được mục đó là gì. Ở đây cho xuống dòng, cột lệch chiều cao một chút
	 * cũng không sao vì mỗi hàng chỉ có hai cột.
	 */
	.ak-ft__menu-item a {
		display: block;
		overflow: visible;
		line-height: 26px;
		-webkit-line-clamp: unset;
	}

	/* Tên cột dài xuống hai dòng thì vạch đỏ tụt theo, các cột hết thẳng hàng.
	   Cỡ chữ nhỏ lại một nấc để phần lớn tên cột vừa một dòng. */
	.ak-ft__title {
		font-size: var(--ak-co-be);
	}
}