/**
 * Đầu trang — HM-02.
 *
 * Dựng theo đầu trang An Cường, rồi làm mới ngày 10/09/2026 theo bốn bước.
 * Giữ lại từ bản gốc: logo đặt giữa với menu tách hai bên, gạch chân chạy ra
 * khi rê chuột, mega menu, thanh dính có đổ bóng khi cuộn.
 *
 * ------------------------------------------------------------------------
 * Bốn bước làm mới ngày 10/09/2026
 * ------------------------------------------------------------------------
 *
 *   1. Menu cấp một từ 9 mục xuống 6. Xưởng sản xuất, Đại lý và Catalogue
 *      chuyển thành menu con của Giới thiệu. Đây là bước gốc: chín mục buộc
 *      phải để chữ nhỏ mới xếp vừa hai bên logo, mà chữ nhỏ thì lại phải bù
 *      bằng đậm và in hoa.
 *
 *   2. Chữ menu từ 12px đậm 700 giãn .06em sang 14px đậm 600 giãn .04em.
 *      Bộ ba 12px + 700 + in hoa là công thức "cao cấp" của khoảng 2016.
 *
 *   3. Bỏ thanh phụ 40px, gộp còn một hàng. Tổng chiều cao từ 113,6px xuống
 *      80px. Thanh hai hàng là ngôn ngữ thương mại điện tử 2015–2018 và nó ăn
 *      15% chiều cao màn hình laptop 768px ngay khi mở trang.
 *
 *   4. Hàng chính 73,6px lên 80px, logo 59,2px xuống 48px. Bản trước logo chỉ
 *      cách mép hàng 7,2px nên nhìn như chạm mép; nay còn 16px mỗi bên.
 *
 * ------------------------------------------------------------------------
 *
 * Một chỗ buộc phải làm khác bản gốc. Bản gốc để đầu trang trong suốt đè lên
 * băng ảnh vì trang nào của họ cũng mở đầu bằng ảnh tối. Trang A Khoa phần lớn
 * nền trắng nên chỉ trang có băng ảnh tối mới để trong suốt, xem CH-21.
 *
 * Mọi quy tắc nằm dưới `.ak-dt` hoặc `body`. Đầu trang gốc của Flatsome bị thay
 * ở `header.php` của theme con, xem inc/dau-trang.php.
 */

/*
 * Bảng màu của thanh đầu trang — đổi sang nền sáng ngày 10/09/2026.
 *
 * Lý do đổi: logo A Khoa là ảnh nét đen kèm chữ A đỏ, đo được 23,1% điểm ảnh
 * màu tối và 0% điểm ảnh sáng. Đặt lên nền đen thì phần đen biến mất, chỉ còn
 * chữ A đỏ. Bản trước chữa bằng `filter: brightness(0) invert(1)`, tức bôi đen
 * mọi điểm ảnh rồi lật thành trắng — logo ra một khối trắng đặc, mất luôn sắc
 * đỏ #e62327 của thương hiệu.
 *
 * Nay thanh đầu trang nền trắng, logo hiện đúng hai màu gốc, không lọc gì cả.
 *
 * Mọi màu của thanh đi qua bốn biến đổi được dưới đây. Nhờ vậy nhánh nền tối — chỉ còn
 * dùng cho trang Giới thiệu, nơi đầu trang trong suốt đè lên băng ảnh tối —
 * chỉ phải khai lại đúng bốn dòng ở cuối file, không phải viết lại từng quy tắc.
 */
.ak-dt {
	--dt-do: var(--ak-mau-do);
	--dt-do-dam: var(--ak-mau-do-dam);
	--dt-toi: var(--ak-mau-toi);

	/* Nền của thanh và của ngăn kéo trên màn hẹp. */
	--dt-nen: var(--ak-mau-trang);

	/* Chữ của hàng menu. */
	--dt-chu: var(--ak-mau-muc);

	/* Vạch ngăn và viền nút. */
	--dt-vien: var(--ak-mau-vien);

	/* Nền nút tròn khi rê chuột. */
	--dt-nen-nut: var(--ak-mau-den-mo-1);

	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	color: var(--dt-chu);
	font-size: var(--ak-co-chu);
	transition: background var(--ak-chuyen), box-shadow var(--ak-chuyen), color var(--ak-chuyen);
}

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

.ak-dt ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.ak-dt a {
	color: inherit;
	text-decoration: none;
}

.ak-dt button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* ---------- Khung trong ---------- */

/*
 * Nền trải hết bề ngang màn hình, còn nội dung nằm trong khung này.
 * Trên màn 2K và 4K, menu bám sát hai mép thì logo ở giữa cách menu cả gang
 * tay, đọc thành ba cụm rời chứ không thành một đầu trang. Dùng đúng cặp
 * `--ak-rong-rong` và `--ak-le-rong` của bộ biến chung để đầu trang thẳng lề
 * với các dải rộng trong thân trang.
 */
.ak-dt-khung {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 2 * var(--ak-le-rong), var(--ak-rong-rong));
	height: 100%;
	margin-inline: auto;
}

/* ---------- Hàng chính ---------- */

/*
 * Lưới ba cột chứ không phải hàng flex. Hai cột bên đều `1fr` nên cột giữa —
 * chỉ rộng bằng logo — luôn nằm đúng trục giữa màn hình, dù cụm menu trái dài
 * hơn cụm phải bao nhiêu. Flex `space-between` của bản trước không làm được
 * việc đó: cụm nút ở mép phải chiếm chỗ chỉ một bên nên kéo logo lệch trái gần
 * 90px trên màn 1600.
 *
 * Hai cụm menu ôm sát logo: cụm trái dồn phải, cụm phải dồn trái, khoảng hở hai
 * bên logo bằng nhau nhờ `column-gap`.
 */
.ak-dt-chinh {
	position: relative;
	/* 5rem = 80px. Ban truoc 4.6rem = 73,6px, logo 59,2px, chi con 7,2px moi
	   ben nen logo nhu cham mep hang. Nay logo 48px, con 16px moi ben. */
	height: 5rem;
}

.ak-dt-chinh > .ak-dt-khung {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: var(--ak-cach-5);
	align-items: center;
	justify-content: initial;
}

.ak-dt-nav-nhom ul {
	/*
	 * `flex` chứ không `inline-flex`. Hộp inline-flex co đúng bằng nội dung nên
	 * `justify-content` bên dưới không có gì để chia, cụm menu trái dạt hẳn về
	 * mép trái thay vì ôm logo. Đây là lỗi khiến bản trước trông rời rạc.
	 */
	display: flex;
	align-items: center;
}

/*
 * Ghi cả `button.ak-dt-nav` chứ không chỉ `.ak-dt-nav`. Flatsome đặt cỡ chữ
 * riêng cho thẻ button với độ đặc hiệu cao hơn, nên hai mục có menu con vốn là
 * button sẽ to vọt lên nếu chỉ khai lớp trần.
 */
.ak-dt .ak-dt-nav,
.ak-dt button.ak-dt-nav {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--ak-cach-2) var(--ak-cach-2);
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	/* Buoc 2 ngay 10/09/2026: 12px dam 700 in hoa gian .06em la cong thuc
	   "cao cap" cua khoang 2016, doc dac va gat. Nay 14px dam 600 gian .04em,
	   giu in hoa. Xep vua vi menu da tu 9 muc xuong 6. */
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	letter-spacing: var(--ak-gian-vua-nhe);
	line-height: var(--ak-dong-chat);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--ak-chuyen-nhanh);
}

/* Gạch chân chạy ra từ trái khi rê chuột, đúng kiểu bản gốc. */
.ak-dt-nav::after {
	content: "";
	position: absolute;
	bottom: .3rem;
	left: .65rem;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width var(--ak-chuyen-nhanh);
}

.ak-dt-nav:hover::after,
.ak-dt-nav[aria-expanded="true"]::after,
.is-nay .ak-dt-nav::after {
	width: calc(100% - 1.3rem);
}

/* Mục của trang đang xem để gạch đỏ, phân biệt với gạch trắng lúc rê chuột. */
.is-nay .ak-dt-nav::after {
	height: 2px;
	background: var(--dt-do);
}

.ak-dt-nav-nhom--trai ul {
	justify-content: flex-end;
}

.ak-dt-nav-nhom--phai ul {
	justify-content: flex-start;
}

/*
 * Ô phải của lưới: menu phải ôm sát logo, cụm tiện ích dạt hẳn ra mép.
 * Gộp hai thứ vào một ô để lưới vẫn đúng ba cột và logo vẫn ở trục giữa.
 */
.ak-dt-cuoi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-cach-5);
	min-width: 0;
}

.ak-dt-cuoi .ak-dt-nav-nhom {
	min-width: 0;
}

/*
 * Logo canh theo chiều cao chứ không theo bề ngang. Đặt bề ngang 9rem thì ảnh
 * cao 74,8px trong hàng cao 73,6px, tức là tràn ra ngoài hàng và ép sát cả hai
 * mép. Khoá chiều cao thì logo luôn có khoảng thở đều trên dưới.
 */
.ak-dt-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Không lọc gì ở trạng thái thường. Thanh đầu trang nay nền trắng nên logo
 * hiện đúng hai màu gốc: khung và chữ đen, chữ A đỏ #e62327.
 *
 * Bộ lọc đảo màu chỉ còn dùng cho trang Giới thiệu lúc đầu trang trong suốt đè
 * lên băng ảnh tối, khai ở cuối file.
 */
.ak-dt-logo img {
	display: block;
	width: auto;
	height: 3rem;
}

.ak-dt-logo__chu {
	display: block;
	font-size: var(--ak-co-h5);
	font-weight: var(--ak-dam-rat);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

/* ---------- Cụm tiện ích ---------- */

.ak-dt-phai {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--ak-cach-1);
}

/*
 * Cụm in ra hai bản. Bản `chinh` nằm cuối hàng chính cho màn rộng, bản `hep`
 * cũng trong hàng chính nhưng cho màn hẹp, lúc đó nó gánh thêm nút ba gạch.
 * Chỉ một bản hiện mỗi lúc, xem khối màn hẹp ở cuối file.
 */
.ak-dt-phai--hep {
	display: none;
}

/*
 * Ghi cả `button.ak-dt-nut` vì lý do y hệt `.ak-dt-nav`: Flatsome đặt chiều cao
 * tối thiểu và lề phải cho mọi thẻ button với độ đặc hiệu cao hơn lớp trần. Bỏ
 * dòng đó thì nút tìm kiếm và nút ba gạch cao 40px trong khi nút giỏ hàng — vốn
 * là thẻ a — chỉ cao 27px, nền tròn khi rê chuột thành hình bầu dục, và nút ba
 * gạch bị đẩy vào trong 16px so với mép phải.
 */
.ak-dt .ak-dt-nut,
.ak-dt button.ak-dt-nut {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	min-width: 0;
	height: 1.7rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: currentColor;
	line-height: var(--ak-dong-khong);
	transition: background var(--ak-chuyen-nhanh), color var(--ak-chuyen-nhanh), border-color var(--ak-chuyen-nhanh);
}

.ak-dt-nut:hover {
	background: var(--dt-nen-nut);
}

/*
 * Nút ẩn phải ẩn thật. `[hidden]` của trình duyệt chỉ là `display: none` ở lớp
 * mặc định, thua quy tắc `display: inline-flex` có hai lớp ở trên, nên nút đã
 * lưu lúc chưa có gì vẫn hiện ra thành một ô trống.
 */
.ak-dt .ak-dt-nut[hidden] {
	display: none;
}

.ak-dt-nut svg {
	width: 1.05rem;
	height: 1.05rem;
}

.ak-dt .ak-dt-nut--chu {
	width: auto;
	height: 1.5rem;
	padding: 0 var(--ak-cach-3);
	border: 1px solid var(--dt-vien);
	border-radius: var(--ak-goc-tron);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
	white-space: nowrap;
}

.ak-dt-nut--chu:hover {
	border-color: transparent;
}

/*
 * Con số của giỏ hàng và của danh sách đã lưu dùng chung một khuôn. Hai thứ
 * đứng cạnh nhau trên cùng một hàng nên chỉ cần lệch nhau một chi tiết là nhìn
 * ra ngay.
 */
.ak-dt-gio__so,
.ak-dt-luu__so {
	position: absolute;
	top: -.1rem;
	right: -.15rem;
	min-width: .9rem;
	height: .9rem;
	padding: 0 var(--ak-cach-1);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-nut-chinh-nen);
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-manh);
	line-height: .9rem;
	text-align: center;
}

/* Nút ba gạch, chỉ có trong bản `hep` nên chỉ hiện ở màn hẹp. */
.ak-dt-bam span,
.ak-dt-bam span::before,
.ak-dt-bam span::after {
	position: absolute;
	left: calc(50% - .55rem);
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	transition: transform var(--ak-chuyen), opacity var(--ak-chuyen);
}

.ak-dt-bam span::before,
.ak-dt-bam span::after {
	content: "";
	left: 0;
}

.ak-dt-bam span::before {
	top: -.35rem;
}

.ak-dt-bam span::after {
	top: .35rem;
}

/* ---------- Trạng thái nền của đầu trang ---------- */

/*
 * Mặc định nền sáng đặc. Chỉ trang nào có băng ảnh tối ngay dưới đầu trang mới
 * để trong suốt, và chỉ khi chưa cuộn.
 *
 * Phải có vạch chân. Bản nền đen tự tách khỏi thân trang nhờ chênh lệch sáng
 * tối, còn thanh trắng đặt trên trang trắng thì không còn ranh giới nào, menu
 * trông như trôi giữa nội dung.
 *
 * Vẽ vạch bằng đổ bóng chứ không bằng `border-bottom`: viền cộng thêm 1px vào
 * chiều cao thanh cố định, trong khi phần chừa chỗ cho thân trang là con số
 * 80px viết cứng ở dưới. Đổ bóng không chiếm chỗ nên hai bên vẫn khớp.
 */
.ak-dt {
	background: var(--dt-nen);
	box-shadow: 0 1px 0 var(--dt-vien);
}

/* Cuộn xuống thì thêm bóng mềm, cho thấy thanh đang nổi trên nội dung trượt qua. */
.ak-dt.is-cuon {
	box-shadow: 0 1px 0 var(--dt-vien), var(--ak-bong-1);
}

/*
 * ------------------------------------------------------------------------
 * Nhánh nền tối — chỉ còn dùng cho trang Giới thiệu
 * ------------------------------------------------------------------------
 *
 * Trang duy nhất để đầu trang trong suốt là trang chứa `[akhoa_gioi_thieu]`,
 * xem `akhoa_dt_lop_body()`. Ở đó đầu trang đè lên băng ảnh tối nên phải quay
 * về chữ trắng, và logo phải đảo màu vì bản gốc là nét đen.
 *
 * Khai lại đúng bộ biến ở đầu file, không viết lại quy tắc nào. Khi người xem
 * cuộn xuống thì `.is-cuon` trả thanh về nền trắng như mọi trang khác, lúc đó
 * logo cũng thôi đảo màu và hiện đúng hai màu gốc.
 *
 * Trong suốt không có nghĩa là không có gì: ảnh bìa có chỗ rất sáng, chữ trắng
 * đặt thẳng lên là không đọc được. Lớp phủ đen mờ vẫn cho thấy ảnh nhưng kéo
 * tương phản của hàng menu lên 4,74:1.
 */
body.ak-dt-trong .ak-dt:not(.is-cuon) {
	--dt-nen: transparent;
	--dt-chu: var(--ak-mau-trang);
	--dt-vien: var(--ak-mau-trang-mo-2);
	--dt-nen-nut: var(--ak-mau-trang-mo-1);

	background: var(--ak-phu-dau-trang);
}

/* Logo là ảnh nét đen, trên băng ảnh tối phải đảo thành trắng mới đọc được.
   Đây là chỗ duy nhất còn dùng bộ lọc này. */
body.ak-dt-trong .ak-dt:not(.is-cuon) .ak-dt-logo img {
	filter: brightness(0) invert(1);
}

body.ak-dt-trong .ak-dt.is-cuon {
	background: var(--dt-nen);
	box-shadow: var(--ak-bong-1);
}

/* Trang không có băng ảnh phải chừa chỗ, nếu không đầu trang che mất nội dung. */
body:not(.ak-dt-trong) #main {
	padding-top: 80px;
}

/*
 * Băng tiêu đề danh mục của Flatsome in ra từ móc `flatsome_after_header`, tức
 * là nó nằm **ngoài** thẻ `main` và không hưởng phần chừa chỗ ở trên. Bật tiêu
 * đề danh mục lên mà không có hai dòng này thì thẻ h1 rơi vào đúng chỗ đầu
 * trang cố định đang che, có trong mã nguồn nhưng không ai nhìn thấy.
 *
 * Khi băng đó có mặt thì nó nhận phần chừa chỗ, và `main` đứng ngay sau phải
 * bỏ phần của mình đi, nếu không trang thụt xuống hai lần. Xem QĐ-39.
 */
body:not(.ak-dt-trong) .shop-page-title.page-title {
	padding-top: 80px;
}

body:not(.ak-dt-trong) .shop-page-title.page-title ~ #main {
	padding-top: 0;
}

/* ---------- Lớp phủ dùng chung ---------- */

.ak-dt-tim,
.ak-dt-ngan {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.ak-dt-tam[hidden],
.ak-dt-tim[hidden],
.ak-dt-ngan[hidden],
.ak-dt-nb[hidden] {
	display: none !important;
}

.ak-dt-lop__nen {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: ak-dt-mo var(--ak-chuyen-cham) both;
}

@keyframes ak-dt-mo {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.ak-dt-dong {
	position: absolute;
	top: 1.6rem;
	right: 2rem;
	z-index: 5;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--ak-mau-trang);
}

.ak-dt-dong:hover {
	background: rgba(255, 255, 255, .2);
}

.ak-dt-dong span,
.ak-dt-dong span::before {
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - .6rem);
	width: 1.2rem;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

.ak-dt-dong span::before {
	content: "";
	top: 0;
	left: 0;
	transform: rotate(-90deg);
}

/* ---------- Mega menu ----------

   Tấm buông xuống ngay dưới đầu trang thay cho lớp phủ kín màn hình. Nền sáng
   vì thứ cần khoe là bề mặt vật liệu: vân gỗ, đá trắng, sứ men bóng. Đặt chúng
   trên nền đen là mất hết sắc độ. Trang phía sau chỉ mờ đi chứ không biến mất,
   nên đóng menu xong người xem không phải định vị lại từ đầu.

   Xem QĐ-27. */

.ak-dt-tam {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

.ak-dt-tam__nen {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--ak-mau-den-mo-3);
	animation: ak-dt-mo var(--ak-chuyen) both;
}

.ak-dt-tam__trong {
	position: relative;
	/* 7,1rem là chiều cao đầu trang: thanh trên 2,5rem cộng hàng chính 4,6rem. */
	max-height: calc(100vh - 7.1rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 2px solid var(--dt-do);
	background: var(--ak-mau-trang);
	color: var(--ak-mau-muc);
	box-shadow: var(--ak-bong-2);
	animation: ak-dt-buong var(--ak-chuyen) both;
}

@keyframes ak-dt-buong {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ak-dt-tam__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 15.5rem;
	width: min(100% - 3rem, var(--ak-rong-max));
	margin-inline: auto;
}

.ak-dt-tam__cot {
	/*
	 * Mỗi cột con một cột lưới, chia đều. Không dùng
	 * repeat(auto-fit, minmax(0, 1fr)): cận dưới bằng 0 thì trình duyệt không suy
	 * ra được số cột và dồn hết về một cột.
	 */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

/* ---------- Một cột ---------- */

.ak-dt-cot {
	display: flex;
	flex-direction: column;
	padding: var(--ak-cach-5) var(--ak-cach-5) 27px;
	border-right: 1px solid var(--ak-mau-vien-nhat);
	animation: ak-dt-cot-vao var(--ak-chuyen) both;
}

.ak-dt-cot:nth-child(2) { animation-delay: .03s; }
.ak-dt-cot:nth-child(3) { animation-delay: .06s; }
.ak-dt-cot:nth-child(4) { animation-delay: .09s; }

@keyframes ak-dt-cot-vao {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ak-dt-cot__de {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-2);
	margin: 0 0 var(--ak-cach-3);
	color: var(--dt-do-dam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-dt-cot__de::before {
	content: "";
	flex: none;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--dt-do);
}

a.ak-dt-cot__de:hover {
	color: var(--ak-mau-do-tham);
}

.ak-dt-cot__ds {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
}

.ak-dt-mien {
	display: grid;
	grid-template-columns: 2.35rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1px var(--ak-cach-3);
	padding: var(--ak-cach-2) var(--ak-cach-2) var(--ak-cach-2) 0;
	border-radius: var(--ak-goc-nho);
	transition: background var(--ak-chuyen-nhanh), transform var(--ak-chuyen-nhanh);
}

.ak-dt-mien:hover,
.ak-dt-mien:focus-visible {
	background: var(--ak-mau-do-mo);
	transform: translateX(2px);
}

.ak-dt-mien__anh {
	grid-row: 1 / span 2;
	display: block;
	width: 2.35rem;
	height: 2.35rem;
	overflow: hidden;
	border: 1px solid var(--ak-mau-vien-nhat);
	border-radius: 3px;
	background: var(--ak-mau-nen-2);
}

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

.ak-dt-mien__ten {
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-chat);
}

.ak-dt-mien__so {
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-vua);
	font-variant-numeric: tabular-nums;
}

.ak-dt-mien__phu {
	grid-column: 2 / span 2;
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-be);
	line-height: var(--ak-dong-vua);
}

/* Dòng không có ảnh thì chữ dồn sang trái, không để ô trống. */
.ak-dt-mien--khong-anh {
	grid-template-columns: minmax(0, 1fr) auto;
	padding-left: var(--ak-cach-2);
}

.ak-dt-mien--khong-anh .ak-dt-mien__phu {
	grid-column: 1 / span 2;
}

.ak-dt-cot__tat {
	margin-top: var(--ak-cach-3);
	padding-top: var(--ak-cach-3);
	border-top: 1px solid var(--ak-mau-vien-nhat);
	color: var(--dt-do-dam);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-dt-cot__tat span {
	color: var(--ak-mau-mo);
	font-weight: var(--ak-dam-vua);
	letter-spacing: var(--ak-gian-khong);
	text-transform: none;
}

.ak-dt-cot__tat:hover {
	color: var(--ak-mau-do-tham);
}

/* ---------- Thẻ nổi bật ---------- */

.ak-dt-tam__nb {
	position: relative;
	display: flex;
	background: var(--ak-mau-nen-2);
}

.ak-dt-nb {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--ak-cach-5);
	animation: ak-dt-cot-vao var(--ak-chuyen) .09s both;
}

.ak-dt-nb__nhan {
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-dt-nb__anh {
	margin-top: var(--ak-cach-3);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--ak-mau-vien-nhat);
	border-radius: var(--ak-goc-nho);
	background: var(--ak-mau-nen);
}

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

.ak-dt-nb__ten {
	margin: var(--ak-cach-3) 0 0;
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-chat);
}

.ak-dt-nb__chu {
	margin: var(--ak-cach-1) 0 0;
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-be);
	line-height: var(--ak-dong-vua);
}

.ak-dt-nb__nut {
	margin-top: auto;
	padding-top: var(--ak-cach-4);
	color: var(--dt-do-dam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-dt-nb__nut::after {
	content: " 92";
}

.ak-dt-nb__nut:hover {
	color: var(--ak-mau-do-tham);
}

/* ---------- Tấm chỉ có chữ, dùng cho Hỗ trợ khách hàng ---------- */

.ak-dt-tam--chu .ak-dt-tam__wrap {
	display: block;
	padding: var(--ak-cach-5) 0 var(--ak-cach-6);
}

.ak-dt-tam__de {
	margin: 0 0 var(--ak-cach-4);
	color: var(--dt-do-dam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-dt-tam__ds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0 var(--ak-cach-7);
}

.ak-dt-tam__ds a {
	display: block;
	padding: var(--ak-cach-2) 0;
	border-bottom: 1px solid var(--ak-mau-vien-nhat);
	font-size: var(--ak-co-nho);
	transition: color var(--ak-chuyen-nhanh), padding-left var(--ak-chuyen-nhanh);
}

.ak-dt-tam__ds a:hover {
	padding-left: var(--ak-cach-1);
	color: var(--dt-do-dam);
}

@media (max-width: 1088px) {
	.ak-dt-tam__wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.ak-dt-tam__nb {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ak-dt-tam__nen,
	.ak-dt-tam__trong,
	.ak-dt-cot,
	.ak-dt-nb {
		animation: none;
	}
}

/* ---------- Lớp phủ tìm kiếm ---------- */

.ak-dt-tim__trong {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--ak-mau-trang);
}

.ak-dt-tim__form {
	display: flex;
	align-items: center;
	width: min(100% - 4rem, 736px);
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	animation: ak-dt-len var(--ak-chuyen-cham) both;
}

.ak-dt-tim__form input[type="search"] {
	width: 100%;
	height: 4rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h2-co);
	font-weight: var(--ak-dam-mong);
}

.ak-dt-tim__form input[type="search"]:focus {
	outline: none;
	box-shadow: none;
}

.ak-dt-tim__form input::placeholder {
	color: var(--ak-chu-nen-toi-4);
}

.ak-dt-tim__form button {
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	color: var(--ak-mau-trang);
}

.ak-dt-tim__form button svg {
	width: 1.6rem;
	height: 1.6rem;
}

.ak-dt-tim__goi-y {
	width: min(100% - 4rem, 736px);
	margin: var(--ak-cach-4) 0 0;
	color: var(--ak-chu-nen-toi-4);
	font-size: var(--ak-co-vua-nho);
}

/* ---------- Ngăn kéo menu cho màn hẹp ---------- */

/*
 * Ngăn kéo trên màn hẹp — đổi sang nền sáng ngày 10/09/2026.
 *
 * Bản trước để nền đen trong khi thanh đầu trang đã sáng, hai mặt phẳng của
 * cùng một bộ điều hướng vênh nhau. Nhưng lý do đổi không chỉ là cho hợp mắt,
 * bản đen còn hai lỗi tương phản thật:
 *
 *   mục con   #c9151b trên nền đen  3,61:1  dưới ngưỡng AA cho chữ thường
 *   số đếm    trắng 14% trên nền đen 1,35:1  gần như không đọc được
 *
 * Trên nền trắng cả bốn cặp đều đạt: mục cấp một 18,91:1, tên nhóm 5,82:1,
 * mục con 13,44:1, số đếm 4,99:1.
 *
 * Kiểu chữ đi theo hàng menu máy tính đã sửa ở bước 2: 14px đậm 600 giãn .04em,
 * để hai bản của cùng một menu đọc như một.
 */
.ak-dt-ngan__trong {
	position: absolute;
	top: 0;
	right: 0;
	width: min(88%, 26rem);
	height: 100%;
	padding: var(--ak-cach-9) var(--ak-cach-5) var(--ak-cach-6);
	background: var(--dt-nen);
	color: var(--dt-chu);
	overflow-y: auto;
	animation: ak-dt-truot var(--ak-chuyen-cham) both;
}

/* Nút đóng nằm trong ngăn kéo sáng, khác nút đóng của lớp phủ tìm kiếm vốn
   nằm trên nền tối. Ghi riêng để không đụng tới cái kia. */
.ak-dt-ngan__trong .ak-dt-dong {
	background: var(--ak-mau-den-mo-1);
	color: var(--dt-chu);
}

.ak-dt-ngan__trong .ak-dt-dong:hover {
	background: var(--ak-mau-den-mo-2);
}

@keyframes ak-dt-truot {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

.ak-dt-ngan__ds > li {
	border-bottom: 1px solid var(--dt-vien);
}

/*
 * Hàng cấp một. Ô chạm phải cao tối thiểu 48px theo hướng dẫn của cả Apple lẫn
 * Google. Chữ 14px nhân chiều cao dòng 1,25 ra 17,5px, nên đệm phải là:
 *
 *   --ak-cach-3 = 12px  ->  40,8px   chưa đạt
 *   --ak-cach-4 = 16px  ->  48,8px   đạt
 *
 * Bản trước dùng 12px nên mỗi hàng chỉ cao 40,8px.
 */
.ak-dt-ngan__ds > li > a,
.ak-dt-ngan__mo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-cach-3);
	width: 100%;
	padding: var(--ak-cach-4) 0;
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	letter-spacing: var(--ak-gian-vua-nhe);
	text-align: left;
	text-transform: uppercase;
}

/*
 * Dấu cộng trừ vẽ bằng hai vạch chứ không bằng ký tự "+" thả nổi bên phải.
 * Ký tự cộng và ký tự gạch ngang khác nhau cả bề rộng lẫn chiều cao chữ nên
 * bản trước bị nhảy chỗ mỗi lần mở đóng. Hai vạch thì tâm luôn đứng yên.
 */
.ak-dt-ngan__mo::after {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--dt-chu), var(--dt-chu)) center / 11px 1.5px no-repeat,
		linear-gradient(var(--dt-chu), var(--dt-chu)) center / 1.5px 11px no-repeat;
	transition: transform var(--ak-chuyen-nhanh);
}

/* Mở ra thì vạch dọc xoay về trùng vạch ngang, còn lại dấu trừ. */
.ak-dt-ngan__mo[aria-expanded="true"]::after {
	background:
		linear-gradient(var(--dt-do-dam), var(--dt-do-dam)) center / 11px 1.5px no-repeat;
	transform: rotate(180deg);
}

.ak-dt-ngan__mo[aria-expanded="true"] {
	color: var(--dt-do-dam);
}

.ak-dt-ngan__trong-muc {
	display: none;
	padding-bottom: var(--ak-cach-2);
}

.ak-dt-ngan__mo[aria-expanded="true"] + .ak-dt-ngan__trong-muc {
	display: block;
}

/*
 * Đầu nhóm trong ngăn kéo, tương ứng với đầu cột của mega menu.
 *
 * Bản trước để đỏ #f32020 cỡ 10px cho mọi nhãn nhóm. Ba nhãn đỏ liền nhau
 * trong một màn hình làm mắt nhảy loạn, mà đỏ là màu nhấn nên dùng cho nhãn
 * lặp lại là phí. Nay xám phụ, cỡ 12px cho đọc được.
 */
.ak-dt-ngan__nhom {
	display: block;
	margin: var(--ak-cach-5) 0 var(--ak-cach-2);
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

/* Nhóm đầu tiên sát ngay dưới hàng cấp một, không cần đẩy xuống thêm. */
.ak-dt-ngan__trong-muc > .ak-dt-ngan__nhom:first-child {
	margin-top: var(--ak-cach-3);
}

/*
 * Mục con. Bản trước để đỏ đậm #c9151b, trên nền đen chỉ được 3,61:1. Nay là
 * chữ nội dung thường, trên nền trắng được 13,44:1.
 */
.ak-dt-ngan__ds ul a {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-3);
	min-height: 3rem;
	padding: var(--ak-cach-1) 0;
	color: var(--ak-mau-chu);
	font-size: var(--ak-co-nho);
	transition: color var(--ak-chuyen-nhanh);
}

.ak-dt-ngan__ds ul a:hover,
.ak-dt-ngan__ds ul a:focus-visible {
	color: var(--dt-do-dam);
}

/*
 * Ảnh thẻ. 2,75rem = 44px thay cho 2,2rem = 35px: ở bản 35px ảnh phòng khách
 * thu nhỏ thành một vệt màu, không nhận ra gì. Bo góc theo thang chung.
 */
.ak-dt-ngan__anh {
	flex: none;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	overflow: hidden;
	border: 1px solid var(--dt-vien);
	border-radius: var(--ak-goc-nho);
	background: var(--ak-mau-nen);
}

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

.ak-dt-ngan__ten {
	flex: 1;
}

/*
 * Số sản phẩm trong danh mục. Bản trước là trắng 14% trên nền đen, đo được
 * 1,35:1 tức gần như vô hình. Nay xám phụ trên nền trắng, 4,99:1.
 */
.ak-dt-ngan__so {
	flex: none;
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-vua-nho);
	font-variant-numeric: tabular-nums;
}

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

/*
 * Từ 1100px trở xuống, hai cụm menu nhường chỗ cho ngăn kéo. Cụm tiện ích đổi
 * từ bản `tren` sang bản `hep`, tức là rơi từ thanh trên xuống hàng chính, vì
 * hàng chính lúc này chỉ còn logo nên rộng chỗ, mà nút ba gạch thì buộc phải
 * đứng cạnh logo chứ không phải nằm trên một thanh cao 40px.
 */
@media (max-width: 1100px) {
	.ak-dt-nav-nhom,
	.ak-dt-phai--chinh {
		display: none;
	}

	.ak-dt-phai--hep {
		display: flex;
	}

	.ak-dt-chinh > .ak-dt-khung {
		display: flex;
		justify-content: space-between;
	}

	/* Giu bang co goc; ban truoc ha tu 3.7rem xuong 3.2rem, nay goc da la 3rem. */
	.ak-dt-logo img {
		height: 3rem;
	}
}

@media (max-width: 600px) {
	/* Đủ đặc hiệu để thắng khối `.ak-dt .ak-dt-nut--chu` ở trên. */
	.ak-dt .ak-dt-nut--chu {
		display: none;
	}

	/* Man rat hep: ha hang chinh xuong 64px va logo xuong 40px. */
	.ak-dt-chinh {
		height: 4rem;
	}

	.ak-dt-logo img {
		height: 2.5rem;
	}

	/* Hang chinh xuong 64px thi phan chua cho phai xuong theo, khong thi
	   than trang tut them 16px vo co. */
	body:not(.ak-dt-trong) #main,
	body:not(.ak-dt-trong) .shop-page-title.page-title {
		padding-top: 64px;
	}

	.ak-dt-logo img {
		height: 2.7rem;
	}

	.ak-dt .ak-dt-nut,
	.ak-dt button.ak-dt-nut {
		width: 1.6rem;
		height: 1.6rem;
	}

	.ak-dt-nut svg {
		width: 1.05rem;
		height: 1.05rem;
	}

	body:not(.ak-dt-trong) #main {
		padding-top: 99px;
	}

	body:not(.ak-dt-trong) .shop-page-title.page-title {
		padding-top: 99px;
	}

	.ak-dt-dong {
		top: 1rem;
		right: 1rem;
	}
}

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