/**
 * Trang chủ — HM-01.
 * Dựng theo https://www.lanhadecor.vn/.
 *
 * Con số lấy thẳng từ bảng kiểu của bản mẫu: mạch nội dung rộng 1520px đệm
 * 40px, băng đầu tỉ lệ 21/9 chữ trắng cách mép trái 80px, cặp tiêu đề 16px nét
 * 600 và 48px nét 800, câu dẫn 16px màu #525257, nút cao 8px 24px bo 2px, thẻ
 * hàng ảnh tỉ lệ 3/2 nền #fafafa tên 16px nét 600 mô tả và giá 12px, dải ô
 * danh mục mỗi ô rộng 28%, khối tối nền #121212, ô ghé thăm nền #f7f7f7.
 *
 * Ba mốc màn hình theo đúng bản mẫu: trên 1280px, 961–1280px, 577–960px và
 * dưới 576px. Lưới cột thì theo mốc của Flatsome (550px và 850px) vì lớp
 * `small-*` và `medium-*` do Flatsome sinh ra, không đổi được.
 *
 * Phông chữ giữ Manrope của site, đúng QĐ-13. Bản mẫu cũng dùng Manrope.
 *
 * Mọi quy tắc nằm dưới `.ak-trang-chu` (lớp gắn vào thẻ body chỉ ở trang chủ)
 * nên không có quy tắc nào rò sang trang khác, kể cả khi khối được chép sang
 * trang khác bằng trình dựng trang.
 */

/* Bảng màu và số đo dùng chung
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home {
	--tc-den: var(--ak-mau-muc);
	--tc-xam: var(--ak-mau-mo);
	--tc-nen: var(--ak-mau-nen);
	--tc-nen-anh: var(--ak-mau-nen-anh);
	--tc-nen-nhan: var(--ak-mau-nen-2);
	--tc-dai: var(--ak-mau-vien);
	--tc-cam: var(--ak-mau-cam);
	--tc-cam-dam: var(--ak-mau-cam-dam);
	--tc-toi: var(--ak-mau-toi);
	--tc-mo: var(--ak-mau-vien-dam);
	--tc-rong: var(--ak-rong-rong);
}

/* Bản mẫu để nội dung rộng 1520px, rộng hơn mức 1080px mặc định của Flatsome.
   Đệm hai bên 40px, trừ đi 15px đệm sẵn của `.row` còn 25px. */
.ak-trang-chu .ak-home .row {
	max-width: var(--tc-rong);
	padding-left: calc(var(--ak-le-rong) - 15px);
	padding-right: calc(var(--ak-le-rong) - 15px);
}

.ak-trang-chu .ak-home .row.row-collapse {
	padding-left: calc(var(--ak-le-rong) - 15px);
	padding-right: calc(var(--ak-le-rong) - 15px);
}

/* Cặp tiêu đề đầu mỗi khối
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__head-row {
	margin-bottom: var(--ak-cach-7);
}

.ak-trang-chu .ak-home__head .col-inner > *:last-child {
	margin-bottom: 0;
}

.ak-trang-chu .ak-home__eyebrow {
	margin: 0 0 var(--ak-cach-2);
	color: var(--tc-den);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-khong);
	text-transform: uppercase;
}

.ak-trang-chu .ak-home__title {
	margin: 0;
	color: var(--tc-den);
	font-size: var(--ak-co-hero);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-chat);
	letter-spacing: var(--ak-gian-khong);
	text-transform: none;
}

.ak-trang-chu .ak-home__lead {
	margin: var(--ak-cach-4) 0 0;
	color: var(--tc-xam);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
}

/* Nút
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home .ak-home__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: var(--ak-nut-dem);
	border-radius: var(--ak-goc-sac);
	border-width: 1px;
	border-style: solid;
	font-size: var(--ak-nut-co);
	font-weight: var(--ak-nut-dam);
	line-height: var(--ak-dong-chat);
	letter-spacing: var(--ak-gian-khong);
	text-transform: none;
	box-shadow: none;
	transition: background-color var(--ak-chuyen), color var(--ak-chuyen), border-color var(--ak-chuyen);
}

.ak-trang-chu .ak-home .ak-home__btn span {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

.ak-trang-chu .ak-home .ak-home__btn--peach {
	background-color: var(--tc-cam);
	border-color: var(--tc-cam);
	color: var(--tc-den);
}

.ak-trang-chu .ak-home .ak-home__btn--peach:hover {
	background-color: var(--tc-cam-dam);
	border-color: var(--tc-cam-dam);
	color: var(--tc-den);
}

.ak-trang-chu .ak-home .ak-home__btn--outline {
	background-color: transparent;
	border-color: var(--tc-den);
	color: var(--tc-den);
}

.ak-trang-chu .ak-home .ak-home__btn--outline:hover {
	background-color: var(--tc-den);
	border-color: var(--tc-den);
	color: var(--ak-mau-trang);
}

.ak-trang-chu .ak-home .ak-home__btn--ghost {
	background-color: transparent;
	border-color: var(--ak-mau-trang);
	color: var(--ak-mau-trang);
}

.ak-trang-chu .ak-home .ak-home__btn--ghost:hover {
	background-color: var(--ak-mau-trang);
	border-color: var(--ak-mau-trang);
	color: var(--tc-den);
}

.ak-trang-chu .ak-home__cta-row {
	margin-top: var(--ak-cach-2);
}

/* 01 · Băng đầu trang
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__hero .banner {
	background-color: var(--tc-nen);
}

/*
 * Ảnh của băng chạy trang chủ phần lớn là phòng khách sáng màu, chữ trắng đặt
 * thẳng lên chỉ đo được 2,03:1 ở 1440px và 2,92:1 ở 375px. Lớp đen mờ dưới đây
 * chỉ phủ nửa trái, đúng chỗ có chữ, nên vẫn nhìn rõ đồ nội thất bên phải.
 * Ở mốc 55% chiều ngang lớp phủ còn .60, đặt trên ảnh trắng tinh cho 5,74:1.
 *
 * Phải dùng `!important`: UX Builder in thẳng vào trang một quy tắc theo mã
 * định danh cho từng ảnh — `#banner-1943039662 .overlay { background-color:
 * rgba(18, 18, 18, .42) }` — mà mã định danh thì mạnh hơn mọi tổ hợp lớp. Sửa
 * độ mờ trong UX Builder thì lần dựng lại nào cũng phải nhớ, đặt ở đây một lần
 * là xong. Nhân tiện bỏ luôn sắc #121212 lạc khỏi thang trung tính.
 */
.ak-trang-chu .ak-home__hero .banner .overlay {
	background: linear-gradient(90deg,
		rgba(0, 0, 0, .68) 0%,
		rgba(0, 0, 0, .60) 55%,
		rgba(0, 0, 0, 0) 85%) !important;
}

.ak-trang-chu .ak-home__hero-box .text-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ak-cach-5);
}

.ak-trang-chu .ak-home__hero-title {
	margin: 0;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-hero);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-chat);
	letter-spacing: var(--ak-gian-khong);
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.12);
}

.ak-trang-chu .ak-home__hero-text {
	margin: 0;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.12);
}

/* Chấm chuyển ảnh: bản mẫu dùng gạch dài 48x6, gạch chưa xem chỉ là vạch mảnh
   sáng ở đáy, gạch đang xem tô đặc màu đen. */
.ak-trang-chu .ak-home__hero .flickity-page-dots {
	bottom: 6%;
	padding: 0;
	line-height: 0;
}

.ak-trang-chu .ak-home__hero .flickity-page-dots .dot {
	position: relative;
	width: 48px;
	height: 6px;
	margin: var(--ak-cach-1);
	border: 0;
	border-radius: var(--ak-goc-sac);
	background-color: transparent;
	opacity: 1;
}

.ak-trang-chu .ak-home__hero .flickity-page-dots .dot::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: var(--ak-mau-nen-anh);
}

.ak-trang-chu .ak-home__hero .flickity-page-dots .dot.is-selected {
	background-color: var(--tc-den);
}

.ak-trang-chu .ak-home__hero .flickity-page-dots .dot.is-selected::before {
	display: none;
}

/* 02 · Mua sắm theo danh mục
   ------------------------------------------------------------------------- */

/* Bản mẫu cho mỗi ô rộng 28% để lộ một phần ô kế tiếp, nhắc người xem là còn
   kéo được. Flatsome chia đều 4 cột nên phải ghi đè bề rộng ô. */
.ak-trang-chu .ak-home__cat-cards.slider .col {
	flex: 0 0 28%;
	max-width: 28%;
}

.ak-trang-chu .ak-home__cat-cards .box-image {
	border-radius: var(--ak-goc-sac);
	overflow: hidden;
	background-color: var(--tc-nen-anh);
}

.ak-trang-chu .ak-home__cat-cards .box-text {
	padding: var(--ak-cach-2) 0 0;
}

.ak-trang-chu .ak-home__cat-cards .header-title {
	margin: 0;
	color: var(--tc-den);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-khong);
	text-transform: none;
}

.ak-trang-chu .ak-home__cat-cards .box:hover .header-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 03 và 05 · Thẻ hàng
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__pcards .box {
	background-color: var(--ak-mau-trang);
}

/* Ảnh hàng tỉ lệ 3/2 như bản mẫu. Không đặt bằng tham số `image_height` của
   shortcode được: kiểu thẻ mặc định của Flatsome vẽ bằng `content-product.php`
   nên tham số đó bị bỏ qua. Đặt bằng CSS thì mọi kiểu thẻ đều đúng. */
.ak-trang-chu .ak-home__pcards .box-image {
	aspect-ratio: 3 / 2;
	border-radius: var(--ak-goc-sac);
	overflow: hidden;
	background-color: var(--tc-nen-anh);
}

/*
 * Chỉ căng đúng khối bọc ảnh cho đầy ô, không đụng tới các khối công cụ.
 *
 * Bản trước viết `.box-image > div` và `.box-image a`, quét trúng cả ba khối
 * `.image-tools` mà Flatsome đặt chồng lên ảnh, trong đó có nút "Xem nhanh".
 * Nút đó nền đỏ, bị kéo cao 100% nên rê chuột vào là cả ô ảnh hoá một tấm đỏ
 * đặc, chữ nằm chỏng chơ trên đỉnh. Xem QĐ-30.
 */
.ak-trang-chu .ak-home__pcards .box-image > div:not(.image-tools),
.ak-trang-chu .ak-home__pcards .box-image > div:not(.image-tools) > a,
.ak-trang-chu .ak-home__pcards .box-image > a {
	display: block;
	height: 100%;
}

.ak-trang-chu .ak-home__pcards .box-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bản mẫu không có sao đánh giá trên thẻ hàng, mà A Khoa cũng chưa có đánh
   giá thật nào. Tham số `show_rating` của shortcode không ăn với kiểu thẻ mặc
   định nên giấu bằng CSS. */
.ak-trang-chu .ak-home__pcards .star-rating,
.ak-trang-chu .ak-home__pcards .rating-wrapper {
	display: none;
}

.ak-trang-chu .ak-home__pcards .box-text {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
	padding: var(--ak-cach-2) 0 0;
}

/* Bản mẫu xếp tên hàng trước, dòng chất liệu sau, rồi mới tới giá. Flatsome
   nhét dòng danh mục vào trong `.title-wrapper`, ngay trên tên hàng, nên đảo
   lại bằng thứ tự của flexbox ngay trong khối đó. */
.ak-trang-chu .ak-home__pcards .box-text .title-wrapper {
	order: 1;
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
}

.ak-trang-chu .ak-home__pcards .title-wrapper .name {
	order: 1;
}

.ak-trang-chu .ak-home__pcards .box-text .category {
	order: 2;
	margin: 0;
	opacity: 1;
	color: var(--tc-xam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-transform: none;
}

.ak-trang-chu .ak-home__pcards .box-text .price-wrapper {
	order: 3;
}

.ak-trang-chu .ak-home__pcards .name.product-title {
	margin: 0;
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

/* Gạch chân chạy từ trái sang khi rê chuột vào thẻ, đúng như bản mẫu. */
.ak-trang-chu .ak-home__pcards .name.product-title a {
	color: var(--tc-den);
	background-image: linear-gradient(var(--tc-den), var(--tc-den));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--ak-chuyen-nhanh);
}

.ak-trang-chu .ak-home__pcards .col:hover .name.product-title a {
	background-size: 100% 1px;
}

.ak-trang-chu .ak-home__pcards .price-wrapper .price {
	margin: 0;
	color: var(--tc-den);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
	line-height: 18px; /* Cố ý giữ px, không đổi sang bội số: bên trong có thể là bdi, del, small của WooCommerce với cỡ chữ khác. Xem QĐ-37. */
	letter-spacing: var(--ak-gian-nhe);
}

.ak-trang-chu .ak-home__pcards .price-wrapper del {
	color: var(--tc-xam);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-thuong);
}

.ak-trang-chu .ak-home__pcards.slider .col {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}

/* Dải nhãn dưới thẻ, do `inc/trang-chu.php` in ra. */
.ak-trang-chu .ak-home__tags {
	order: 4;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--ak-cach-1);
}

.ak-trang-chu .ak-home__tag {
	display: inline-flex;
	align-items: center;
	padding: var(--ak-cach-1);
	border-radius: var(--ak-goc-sac);
	background-color: var(--tc-nen-nhan);
	color: var(--tc-den);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-sit);
	letter-spacing: var(--ak-gian-nhe);
}

/* Nhãn giảm giá của WooCommerce: bản mẫu không có hình tròn cam, đổi về đúng
   kiểu chip vuông sẫm như các nhãn khác. */
.ak-trang-chu .ak-home__pcards .badge-container {
	margin: var(--ak-cach-2);
}

.ak-trang-chu .ak-home__pcards .badge {
	width: auto;
	height: auto;
	margin: 0;
}

.ak-trang-chu .ak-home__pcards .badge-inner {
	width: auto;
	height: auto;
	min-height: 0;
	padding: var(--ak-cach-1) var(--ak-cach-1);
	border-radius: var(--ak-goc-sac);
	background-color: var(--tc-toi);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-sit);
	letter-spacing: 0.08px;
	text-transform: none;
}

/* Thanh kéo và mũi tên của ba dải trượt ngang
   ------------------------------------------------------------------------- */

/* Bản mẫu đặt mũi tên và thanh tiến trình ở dưới dải ảnh, lệch về bên trái
   một phần tư bề rộng. Thanh tiến trình do `trang-chu.js` chèn thêm. */
.ak-trang-chu .ak-home .slider.ak-home__cat-cards,
.ak-trang-chu .ak-home .slider.ak-home__pcards,
.ak-trang-chu .ak-home__inspire-slider .slider {
	position: relative;
	padding-bottom: 100px;
}

.ak-trang-chu .ak-home .ak-home__cat-cards .flickity-prev-next-button,
.ak-trang-chu .ak-home .ak-home__pcards .flickity-prev-next-button,
.ak-trang-chu .ak-home__inspire-slider .flickity-prev-next-button {
	top: auto;
	bottom: 28px;
	width: 40px;
	height: 40px;
	margin: 0;
	transform: none;
	opacity: 1;
	background-color: transparent;
	color: var(--tc-den);
}

.ak-trang-chu .ak-home .ak-home__cat-cards .flickity-prev-next-button.previous,
.ak-trang-chu .ak-home .ak-home__pcards .flickity-prev-next-button.previous,
.ak-trang-chu .ak-home__inspire-slider .flickity-prev-next-button.previous {
	left: 25%;
	right: auto;
}

.ak-trang-chu .ak-home .ak-home__cat-cards .flickity-prev-next-button.next,
.ak-trang-chu .ak-home .ak-home__pcards .flickity-prev-next-button.next,
.ak-trang-chu .ak-home__inspire-slider .flickity-prev-next-button.next {
	left: calc(25% + 50px);
	right: auto;
}

/* Flatsome giấu hẳn mũi tên khi hết đường (`opacity: 0 !important`). Bản mẫu
   để mờ chứ không giấu, cho người xem biết đang ở đầu hay cuối dải. */
.ak-trang-chu .ak-home .flickity-prev-next-button[disabled] {
	opacity: 0.3 !important;
}

/* Dải trượt dựng bằng `[ux_slider]` bị Flatsome giấu mũi tên cho tới khi rê
   chuột. Bản mẫu để hiện sẵn. */
.ak-trang-chu .ak-home__inspire-slider .flickity-prev-next-button {
	display: flex;
}

.ak-trang-chu .ak-home__bar {
	display: block;
	position: absolute;
	left: calc(25% + 90px);
	bottom: 46px;
	width: calc(50% - 90px);
	height: 2px;
	background-color: var(--tc-mo);
}

.ak-trang-chu .ak-home__bar span {
	display: block;
	position: absolute;
	top: -2px;
	left: 0;
	height: 6px;
	border-radius: var(--ak-goc-sac);
	background-color: var(--tc-den);
	transition: transform var(--ak-chuyen);
	transform-origin: left center;
}

/* 04 · Điểm nhấn phào chỉ PU
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__spot {
	position: relative;
	overflow: hidden;
	background-color: var(--tc-nen);
}

/* Ảnh nền dán đáy khối, phủ lên trên là dải chuyển màu để chữ vẫn đọc được.
   Bản mẫu làm y hệt: ảnh sản phẩm nằm dưới cùng, nội dung trôi trên nền mờ. */
.ak-trang-chu .ak-home__spot .section-bg {
	background-size: 100% auto;
	background-position: 50% 100%;
	background-repeat: no-repeat;
}

.ak-trang-chu .ak-home__spot .section-bg::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		180deg,
		var(--tc-nen) 0%,
		var(--tc-nen) 28%,
		var(--ak-mau-trang) 72%,
		rgba(255, 255, 255, 0.69) 81%,
		rgba(255, 255, 255, 0) 100%
	);
}

.ak-trang-chu .ak-home__spot .ak-home__head .ak-home__btn {
	margin-top: var(--ak-cach-7);
}

/* Chừa chỗ cho ảnh nền lộ ra bên dưới hàng thẻ, bản mẫu chừa 40vw. */
.ak-trang-chu .ak-home__spot-cards {
	margin-bottom: 34vw;
}

.ak-trang-chu .ak-home__scard .col-inner {
	display: grid;
	grid-template-columns: 1fr auto auto 1fr;
	align-items: center;
	gap: var(--ak-cach-4) var(--ak-cach-2);
	height: 100%;
	padding: var(--ak-cach-5);
	border-radius: var(--ak-goc-sac);
	background-color: var(--ak-mau-trang);
	text-align: center;
}

/* Bốn biểu tượng là file SVG, WordPress không đọc được kích thước nên xuất
   `width="1" height="1"`. Phải ra lệnh cỡ bằng CSS cho cả khung lẫn ảnh. */
/*
 * Hai chỗ phải thắng độ đặc hiệu, cùng một lý do: Flatsome và UX Builder đều
 * viết luật mạnh hơn tổ hợp lớp thường.
 *
 * 1. Lề dưới. Flatsome có
 *
 *        .col-inner>.img:not(:last-child),
 *        .col>.img:not(:last-child) { margin-bottom: 1em }   (0,3,0)
 *
 *    Khung biểu tượng là một `.img` và không phải con cuối, nên dính
 *    `margin-bottom: 16px`. Lưới cha căn giữa theo **hộp lề**, nên hộp thành
 *    24 + 16 = 40px, phần nhìn thấy 24px nằm ở mép trên hộp và bị đẩy lên 8px
 *    so với tâm chữ. Đây chính là lỗi lệch đã thấy.
 *
 *    Bộ chọn dưới đây thêm một bậc lớp thành (0,4,0) để thắng dứt điểm, không
 *    phụ thuộc thứ tự nạp tệp.
 *
 * 2. Bề rộng. UX Builder in thẳng vào trang `#image_447128004 { width: 100% }`
 *    cho từng ảnh, mà mã định danh mạnh hơn mọi tổ hợp lớp nên chỉ `!important`
 *    mới thắng. Cùng cách đã dùng cho lớp phủ băng ảnh phía trên.
 */
.ak-trang-chu .ak-home__scard .col-inner > .ak-home__scard-icon {
	grid-column: 2;
	grid-row: 1;
	width: 24px !important;
	margin: 0;
}

/* Ảnh thẻ cũng là một `.img` không phải con cuối nên dính đúng luật trên. Ở đây
   khoảng cách với đoạn chữ đã do `row-gap` của lưới lo, cộng thêm 16px lề nữa
   là hở gấp đôi. */
.ak-trang-chu .ak-home__scard .col-inner > .ak-home__scard-photo {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
}

.ak-trang-chu .ak-home__scard-icon .img-inner,
.ak-trang-chu .ak-home__scard-icon img {
	width: 24px;
	height: 24px;
	max-width: 24px;
}

/*
 * Biểu tượng lệch lên so với chữ — sửa 10/09/2026.
 *
 * Thẻ `img` mặc định là `display: inline`, tức nó ngồi trên đường cơ chữ và
 * chừa lại khoảng chân chữ bên dưới. Hộp ảnh vì thế cao khoảng 28px chứ không
 * phải 24px, trong khi hộp chữ h3 cao đúng 24px (16px nhân 1,45). Lưới cha
 * `align-items: center` căn giữa theo **hộp**, nên phần nhìn thấy của biểu
 * tượng bị đẩy lên chừng 2px so với tâm chữ.
 *
 * `display: block` bỏ hẳn khoảng chân chữ. Thêm `flex` cho khung ngoài để nếu
 * sau này thay bộ biểu tượng có tỉ lệ khác thì ảnh vẫn nằm giữa khung 24px.
 */
.ak-trang-chu .ak-home__scard-icon .img-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ak-trang-chu .ak-home__scard-icon img {
	display: block;
	object-fit: contain;
}

/* Bốn file SVG này vẽ nét trắng vì vốn dùng trên nền tối. Thẻ ở đây nền trắng
   nên đảo màu, thành nét đen như bản mẫu. Thay bằng bộ biểu tượng nét đen thì
   bỏ dòng này đi. */
.ak-trang-chu .ak-home__scard-icon img {
	filter: invert(1);
}

/*
 * Tiêu đề thẻ. `line-height` ghim bằng đúng 24px, tức bằng chiều cao khung biểu
 * tượng bên cạnh — xem ghi chú ở `.ak-home__scard-icon .img-inner`.
 *
 * Lý do không để chiều cao dòng theo tỉ lệ: lưới cha căn giữa theo **hộp**, mà
 * hộp dòng chữ cao theo `font-size` nhân tỉ lệ, còn hộp biểu tượng cao cố định
 * 24px. Hai hộp lệch chiều cao thì phần nhìn thấy của chúng không bao giờ trùng
 * tâm. Ghim cả hai về 24px là hết lệch, không phụ thuộc chỉ số của phông.
 */
.ak-trang-chu .ak-home__scard-title {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
	color: var(--tc-den);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-manh);
	line-height: 24px;
	letter-spacing: var(--ak-gian-khong);
	text-transform: none;
}

.ak-trang-chu .ak-home__scard-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ak-trang-chu .ak-home__scard-text {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 0;
	color: var(--tc-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-thoang);
}

/* 06 · Băng ưu đãi
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__promo-row {
	padding-left: 0;
	padding-right: 0;
}

.ak-trang-chu .ak-home__promo-img img {
	width: 100%;
	display: block;
}

/* 07 · Vì sao chọn A Khoa
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__why {
	background-color: var(--tc-den);
}

.ak-trang-chu .ak-home__why .ak-home__eyebrow,
.ak-trang-chu .ak-home__why .ak-home__title,
.ak-trang-chu .ak-home__why .ak-home__wcard-title {
	color: var(--ak-mau-trang);
}

.ak-trang-chu .ak-home__why .ak-home__title {
	margin-bottom: var(--ak-cach-7);
}

.ak-trang-chu .ak-home__why-list {
	margin: 0 0 var(--ak-cach-7);
	padding-left: var(--ak-cach-4);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-doc);
}

.ak-trang-chu .ak-home__why-right img {
	width: 100%;
	display: block;
}

/* Khối mở rộng: đóng thì cao 0, mở thì nhả ra. Bản mẫu cũng đổi `max-height`
   chứ không đổi `display`, để có hiệu ứng trượt. */
.ak-trang-chu .ak-home__why-more {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--ak-chuyen-cham);
}

.ak-trang-chu .ak-home__why-more.is-open {
	max-height: 2400px;
}

.ak-trang-chu .ak-home__why-more::before {
	content: "";
	flex: 0 0 100%;
	width: 100%;
	height: 1px;
	margin: var(--ak-cach-7) 0;
	background-color: rgba(255, 255, 255, .16);
}

.ak-trang-chu .ak-home__wcard .col-inner {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-4);
	height: 100%;
}

.ak-trang-chu .ak-home__wcard-img img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.ak-trang-chu .ak-home__wcard-title {
	margin: 0;
	font-size: var(--ak-co-h5);
	font-weight: var(--ak-dam-manh);
	line-height: 26px;
	letter-spacing: var(--ak-gian-khong);
	text-transform: none;
}

.ak-trang-chu .ak-home__wcard-list {
	margin: 0;
	padding-left: var(--ak-cach-4);
	color: var(--ak-chu-nen-toi-2);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-thoang);
}

/* 08 · Đối tác chiến lược
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__partners {
	background-color: var(--tc-nen);
}

.ak-trang-chu .ak-home__partner .col-inner {
	height: 100%;
	padding: var(--ak-cach-2);
	border-radius: var(--ak-goc-sac);
	background-color: var(--ak-mau-trang);
	transition: transform var(--ak-chuyen), box-shadow var(--ak-chuyen);
}

.ak-trang-chu .ak-home__partner .col-inner:hover {
	transform: translateY(var(--ak-nhac));
	box-shadow: var(--ak-bong-1);
}

/* Ảnh nguồn là giấy chứng nhận hợp tác, khổ ngang. Dùng `contain` để không cắt
   mất con dấu và chữ ký. Thay bằng logo vuông sau này thì đổi tỉ lệ ở đây. */
.ak-trang-chu .ak-home__partner img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background-color: var(--ak-mau-trang);
	display: block;
}

/* 09 · Ghé showroom
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__showroom {
	background-color: var(--tc-nen);
}

.ak-trang-chu .ak-home__showroom-media img {
	width: 100%;
	display: block;
	object-fit: cover;
}

.ak-trang-chu .ak-home__showroom-text .ak-home__title {
	margin-bottom: var(--ak-cach-6);
}

.ak-trang-chu .ak-home__showroom-list {
	margin: 0 0 var(--ak-cach-7);
	color: var(--tc-den);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-doc);
}

/* 10 · Video
   ------------------------------------------------------------------------- */

.ak-trang-chu .ak-home__video .banner {
	background-color: var(--tc-den);
}

.ak-trang-chu .ak-home__play {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .16);
	color: var(--ak-mau-trang);
	cursor: pointer;
	transition: background-color var(--ak-chuyen-nhanh);
}

.ak-trang-chu .ak-home__play:hover {
	background-color: rgba(255, 255, 255, .32);
}

.ak-trang-chu .ak-home__play svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* 11 · Góc cảm hứng
   ------------------------------------------------------------------------- */

/* Dải này không nằm trong `.row` nên tự lo đệm hai bên cho khớp 40px của các
   khối khác. */
.ak-trang-chu .ak-home__inspire-slider {
	padding-left: var(--ak-le-rong);
	padding-right: var(--ak-le-rong);
}

.ak-trang-chu .ak-home__inspire-slider .flickity-slider > * {
	padding-right: var(--ak-cach-4);
}

.ak-trang-chu .ak-home__inspire-slider .img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Màn hình 961–1280px
   ------------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.ak-trang-chu .ak-home__spot-cards {
		margin-bottom: 30vw;
	}

	.ak-trang-chu .ak-home__inspire-slider .flickity-slider > * {
		padding-right: var(--ak-cach-3);
	}
}

/* Màn hình 851–960px: cột vẫn theo `large-*` của Flatsome nên chỉ hạ cỡ chữ.
   ------------------------------------------------------------------------- */

@media (max-width: 960px) {
}

/* Màn hình dưới 850px: Flatsome đổi sang lớp `medium-*`
   ------------------------------------------------------------------------- */

@media (max-width: 849px) {

	/* Dưới 850px ô chữ của Flatsome rộng 66% nên lớp phủ phải kéo dài ra theo,
	   nếu giữ mốc 55% thì cuối dòng chữ rơi vào chỗ đã tan hết, chỉ còn 3,23:1. */
	.ak-trang-chu .ak-home__hero .banner .overlay {
		background: linear-gradient(90deg,
			rgba(0, 0, 0, .68) 0%,
			rgba(0, 0, 0, .60) 80%,
			rgba(0, 0, 0, .30) 100%) !important;
	}

	.ak-trang-chu .ak-home .row {
		padding-left: max(1px, calc(var(--ak-le-rong) - 15px));
		padding-right: max(1px, calc(var(--ak-le-rong) - 15px));
	}

	.ak-trang-chu .ak-home__head-row {
		margin-bottom: var(--ak-cach-6);
	}

	/* Bản mẫu thu mũi tên lại, chỉ để lại thanh kéo chạy hết bề ngang. */
	.ak-trang-chu .ak-home .flickity-prev-next-button {
		display: none;
	}

	.ak-trang-chu .ak-home__bar {
		left: 15px;
		width: calc(100% - 30px);
		bottom: 40px;
	}

	.ak-trang-chu .ak-home .slider.ak-home__cat-cards,
	.ak-trang-chu .ak-home .slider.ak-home__pcards,
	.ak-trang-chu .ak-home__inspire-slider .slider {
		padding-bottom: 60px;
	}

	.ak-trang-chu .ak-home__cat-cards.slider .col {
		flex: 0 0 40%;
		max-width: 40%;
	}

	.ak-trang-chu .ak-home__pcards.slider .col {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.ak-trang-chu .ak-home__spot-cards {
		margin-bottom: 24vw;
	}

	/* Bản mẫu đảo thứ tự: chữ lên trên, ảnh xuống dưới. Phải cho hai cột rộng
	   hết hàng, nếu không Flatsome vẫn giữ `medium-6` và hai cột xếp chồng mà
	   mỗi cột chỉ rộng nửa hàng, nhìn như bị lỗi. */
	.ak-trang-chu .ak-home__showroom-row {
		flex-direction: column-reverse;
	}

	.ak-trang-chu .ak-home__showroom-row > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.ak-trang-chu .ak-home__showroom-media img {
		height: 278px;
	}

	/* Flatsome giấu ảnh nền của băng có video (`.has-video .bg { display: none }`)
	   ở mọi bề rộng. Dưới 850px video không chạy nên phải trả lại ảnh, không thì
	   chỉ còn một dải đen. */
	.ak-trang-chu .ak-home__video .has-video .bg {
		display: block;
	}

	.ak-trang-chu .ak-home__why-more::before {
		margin: var(--ak-cach-6) 0;
	}

	.ak-trang-chu .ak-home__inspire-slider {
		padding-left: var(--ak-le-rong);
		padding-right: var(--ak-le-rong);
	}

	/* Dưới 850px băng video chỉ hiện ảnh tĩnh (`hide-for-medium` của Flatsome),
	   khỏi bắt máy điện thoại tải 6 MB video. Không có video thì cũng không cần
	   nút dừng. */
	.ak-trang-chu .ak-home__play {
		display: none;
	}
}

/* Màn hình dưới 550px: Flatsome đổi sang lớp `small-*`
   ------------------------------------------------------------------------- */

@media (max-width: 549px) {

	/* Ở màn hẹp chữ chiếm gần hết bề ngang nên lớp phủ trải đều, .60 cho 5,74:1
	   ngay cả khi ảnh dưới nó trắng tinh. */
	.ak-trang-chu .ak-home__hero .banner .overlay {
		background: rgba(0, 0, 0, .60) !important;
	}

	.ak-trang-chu .ak-home__eyebrow {
		margin-bottom: var(--ak-cach-1);
		font-size: var(--ak-co-nho);
		line-height: var(--ak-dong-vua);
	}

	.ak-trang-chu .ak-home__lead {
		margin-top: var(--ak-cach-3);
		font-size: var(--ak-co-nho);
		line-height: var(--ak-dong-thoang);
	}

	.ak-trang-chu .ak-home__hero-box .text-inner {
		gap: var(--ak-cach-2);
	}

	.ak-trang-chu .ak-home__hero-text {
		margin-bottom: var(--ak-cach-4);
		font-size: var(--ak-co-nho);
		line-height: var(--ak-dong-vua);
	}

	.ak-trang-chu .ak-home__hero .flickity-page-dots {
		bottom: 5%;
	}

	.ak-trang-chu .ak-home__hero .flickity-page-dots .dot {
		width: 24px;
		height: 4px;
		border-radius: 0;
	}

	.ak-trang-chu .ak-home__hero .flickity-page-dots .dot::before {
		height: 2px;
	}

	.ak-trang-chu .ak-home__hero .flickity-page-dots .dot.is-selected {
		height: 4px;
	}

	.ak-trang-chu .ak-home__cat-cards.slider .col {
		flex: 0 0 80%;
		max-width: 80%;
	}

	.ak-trang-chu .ak-home__pcards.slider .col {
		flex: 0 0 65%;
		max-width: 65%;
	}

	.ak-trang-chu .ak-home__spot-cards {
		margin-bottom: 45vw;
	}

	.ak-trang-chu .ak-home__scard .col-inner {
		padding: var(--ak-cach-4);
	}

	.ak-trang-chu .ak-home__why .ak-home__title {
		margin-bottom: var(--ak-cach-5);
	}

	/* Bản mẫu bỏ luôn nút mở rộng trên máy nhỏ và mở sẵn khối bên dưới. */
	.ak-trang-chu .ak-home__why-toggle {
		display: none;
	}

	.ak-trang-chu .ak-home__why-more {
		max-height: none;
	}

	.ak-trang-chu .ak-home__showroom-list {
		margin-bottom: var(--ak-cach-6);
		font-size: var(--ak-co-nho);
		line-height: var(--ak-dong-doc);
	}

	.ak-trang-chu .ak-home__play {
		right: 16px;
		bottom: 16px;
	}

	.ak-trang-chu .ak-home__inspire-slider .flickity-slider > * {
		padding-right: var(--ak-cach-2);
	}
}