/**
 * Trang danh mục Thiết bị vệ sinh — HM-07, HM-08.
 * Dựng theo https://www.lanhadecor.vn/sofa/tat-ca-sofa/.
 *
 * Con số lấy thẳng từ bảng kiểu của bản mẫu: băng đầu nền #f7f7f7 đệm 24px 40px,
 * tên nhóm 72px nét 800, ô danh mục 180x180 với dải chữ nền #ededed và nền
 * #f1be87 khi đang xem, nút lọc viền 1px bo 2px đệm 8px 16px, lưới ba cột cách
 * nhau 16px và 30px, ảnh thẻ tỉ lệ 3/2 nền #fafafa, tên hàng 16px nét 600, mô tả
 * và giá 12px, nhãn nền #f5f6f6 chữ 10px, ô số trang 32x32.
 *
 * Ba chỗ cố ý làm khác bản mẫu, ghi ở CH-24:
 *
 * 1. Trên màn hẹp bản mẫu gom bộ lọc vào một nút mở bảng phủ kín màn hình. Ở
 *    đây giữ nguyên dải nút lọc, cho xuống dòng khi hết chỗ.
 *    Dải ô danh mục cũng trượt ngang ở mọi bề rộng, vì A Khoa có tám ô còn bản
 *    mẫu chỉ có sáu, xem CH-25.
 * 2. Bản mẫu có thanh lọc thu gọn dính mép trên khi cuộn. Ở đây thanh lọc chính
 *    dính luôn, đặt ngay dưới đầu trang A Khoa.
 * 3. Biểu tượng đánh dấu ở góc thẻ hàng nay lưu thật, danh sách nằm trên máy
 *    người xem chứ không gắn với tài khoản như bản mẫu. Xem `da-luu.css` và
 *    `inc/da-luu.php`, chốt ngày 10/09/2026.
 *
 * 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-tb`.
 */

.ak-tb {
	--tb-den: var(--ak-mau-muc);
	--tb-xam: var(--ak-mau-mo);
	--tb-nen: var(--ak-mau-nen);
	--tb-nen-anh: var(--ak-mau-nen-anh);
	--tb-nen-nhan: var(--ak-mau-nen-2);
	--tb-dai: var(--ak-mau-vien);
	--tb-cam: var(--ak-mau-cam);
	--tb-toi: var(--ak-mau-toi);
	--tb-mo: var(--ak-vo-hieu-chu);

	width: 100%;
	max-width: 100%;
	background-color: var(--ak-mau-trang);
	color: var(--tb-den);
}

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

.ak-tb a {
	text-decoration: none;
}

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

.ak-tb-dau {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ak-cach-6);
	width: 100%;
	padding: var(--ak-cach-7) var(--ak-cach-4);
	background: var(--tb-nen);
}

.ak-tb-dau-chu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ak-cach-4);
	width: 100%;
}

.ak-tb-dau-ten {
	width: 100%;
	margin: 0;
	color: var(--tb-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-tb-dau-mo-ta {
	width: 100%;
	color: var(--tb-xam);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-o-nhom {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-2);
	width: 100%;
	padding-bottom: var(--ak-cach-1);
	overflow-x: auto;
	scrollbar-width: thin;
}

.ak-tb-nhom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 auto;
	width: 180px;
	min-width: 180px;
	height: 180px;
	background: var(--ak-mau-trang);
	border-radius: var(--ak-goc-sac);
	overflow: hidden;
	transition: all var(--ak-chuyen);
}

.ak-tb-nhom-anh {
	display: block;
	flex: 1 0 0;
	align-self: stretch;
	overflow: hidden;
}

.ak-tb-nhom-anh img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ak-tb-nhom-ten {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ak-cach-1);
	align-self: stretch;
	padding: var(--ak-cach-4) var(--ak-cach-5);
	background: var(--tb-dai);
	transition: background var(--ak-chuyen-nhanh);
}

.ak-tb-nhom-ten span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	align-self: stretch;
	color: var(--tb-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-transform: uppercase;
}

.ak-tb-nhom:hover .ak-tb-nhom-ten {
	background: var(--tb-toi);
}

.ak-tb-nhom:hover .ak-tb-nhom-ten span {
	color: var(--ak-mau-trang);
}

.ak-tb-nhom-ten.dang-xem,
.ak-tb-nhom:hover .ak-tb-nhom-ten.dang-xem {
	background: var(--tb-cam);
}

.ak-tb-nhom:hover .ak-tb-nhom-ten.dang-xem span {
	color: var(--tb-den);
}

/* Thanh bộ lọc
   ------------------------------------------------------------------------- */

.ak-tb-ds {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--ak-cach-6);
	width: 100%;
	padding: var(--ak-cach-7) var(--ak-cach-4);
}

.ak-tb-thanh {
	position: sticky;
	top: 7.1rem;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ak-cach-4);
	align-self: stretch;
	width: 100%;
	margin: 0;
	padding: var(--ak-cach-2) 0;
	background: var(--ak-mau-trang);
}

.ak-tb-loc {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-4);
	max-width: 100%;
}

.ak-tb-loc-ten {
	display: none;
	color: var(--tb-den);
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

/*
 * Dải nút lọc không được đặt overflow. Bảng thả xuống là phần tử định vị tuyệt
 * đối nằm trong dải này, hễ dải có overflow là bảng bị cắt mất. Màn hẹp thì cho
 * xuống dòng thay vì trượt ngang.
 */
.ak-tb-loc-o {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ak-cach-2);
	max-width: 100%;
}

.ak-tb-chon {
	position: relative;
	flex: 0 0 auto;
}

.ak-tb-chon-nut {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--ak-cach-2);
	min-height: 0;
	margin: 0;
	padding: var(--ak-nut-dem-nho);
	color: var(--tb-xam);
	background: var(--ak-mau-trang);
	border: 1px solid var(--tb-den);
	border-radius: var(--ak-goc-sac);
	box-shadow: none;
	cursor: pointer;
	text-transform: none;
	line-height: 20px;
	transition: background var(--ak-chuyen), color var(--ak-chuyen);
}

.ak-tb-chon-nut:hover,
.ak-tb-chon-nut[aria-expanded="true"] {
	color: var(--ak-mau-trang);
	background: var(--tb-toi);
	border-color: var(--tb-den);
}

.ak-tb-chon-chu {
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-align: center;
	white-space: nowrap;
}

.ak-tb-chon-mui {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.ak-tb-chon-so {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 16px;
	color: var(--ak-mau-trang);
	background: var(--tb-toi);
	border-radius: var(--ak-goc-tron);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-khong);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-chon-nut:hover .ak-tb-chon-so,
.ak-tb-chon-nut[aria-expanded="true"] .ak-tb-chon-so {
	color: var(--tb-den);
	background: var(--ak-mau-trang);
}

.ak-tb-chon-bang {
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-2);
	min-width: 200px;
	max-height: 320px;
	padding: var(--ak-cach-2);
	overflow-y: auto;
	background: var(--ak-mau-trang);
	border-radius: var(--ak-goc-sac);
	box-shadow: var(--ak-bong-1);
}

.ak-tb-chon-bang[hidden] {
	display: none;
}

.ak-tb-chon-bang-phai {
	left: auto;
	right: 0;
}

.ak-tb-chon-muc {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-2);
	margin: 0;
	padding: var(--ak-cach-2);
	color: var(--tb-den);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-vua);
	line-height: 16px;
	letter-spacing: var(--ak-gian-nhe);
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

.ak-tb-chon-muc:hover,
.ak-tb-chon-muc.dang-chon {
	background: var(--tb-nen-nhan);
	border-radius: var(--ak-goc-sac);
}

.ak-tb-chon-muc input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--tb-den);
}

.ak-tb-phai {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ak-cach-4);
	align-self: stretch;
}

.ak-tb-dem span {
	color: var(--tb-xam);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-chon-nut-nho {
	padding: var(--ak-cach-2);
	border-color: transparent;
	color: var(--tb-den);
}

.ak-tb-chon-nut-nho:hover,
.ak-tb-chon-nut-nho[aria-expanded="true"] {
	color: var(--ak-mau-trang);
}

.ak-tb-sap-hinh {
	width: 20px;
	height: 20px;
}

.ak-tb-ap-dung {
	margin-top: var(--ak-cach-2);
	padding: var(--ak-cach-2) var(--ak-cach-4);
	color: var(--ak-mau-trang);
	background: var(--tb-toi);
	border: 0;
	border-radius: var(--ak-goc-sac);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
}

/* Lưới hàng
   ------------------------------------------------------------------------- */

.ak-tb-luoi {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	align-self: stretch;
	column-gap: var(--ak-cach-2);
	row-gap: var(--ak-cach-5);
	width: 100%;
}

.ak-tb-o {
	width: calc(50% - 4px);
}

.ak-tb-the {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ak-cach-2);
	width: 100%;
	height: 100%;
	background: var(--ak-mau-trang);
	border-radius: var(--ak-goc-sac);
}

.ak-tb-anh {
	position: relative;
	align-self: stretch;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--tb-nen-anh);
	border-radius: var(--ak-goc-sac);
	overflow: hidden;
}

.ak-tb-anh-chay {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform var(--ak-chuyen-anh);
}

.ak-tb-anh-mot {
	display: flex;
	flex: 0 0 100%;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ak-tb-anh-mot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ak-tb-mui {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 0;
	margin: 0;
	padding: var(--ak-cach-2);
	color: var(--ak-mau-muc);
	background: var(--ak-mau-den-mo-2);
	border: 0;
	border-radius: var(--ak-goc-tron);
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity var(--ak-chuyen-nhanh);
	cursor: pointer;
}

.ak-tb-mui svg {
	width: 20px;
	height: 20px;
}

.ak-tb-mui-trai {
	left: 8px;
}

.ak-tb-mui-phai {
	right: 8px;
}

/*
 * Flatsome đặt `button[disabled] { opacity: .6 }` với độ đặc hiệu cao hơn lớp
 * trần, nên mũi tên ở đầu dải vẫn hiện mờ mờ dù đã để opacity 0. Phải ghi kèm
 * `[disabled]` mới đè được.
 */
.ak-tb-anh .ak-tb-mui[disabled] {
	opacity: 0;
}

.ak-tb-anh:hover .ak-tb-mui {
	opacity: 1;
	transition: opacity var(--ak-chuyen-nhanh);
}

.ak-tb-anh:hover .ak-tb-mui[disabled] {
	opacity: .35;
	cursor: auto;
}

.ak-tb-tin {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ak-cach-1);
	align-self: stretch;
	padding: 0;
}

.ak-tb-tin-dau {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ak-cach-2);
	align-self: stretch;
	color: var(--tb-den);
}

.ak-tb-ten {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ak-cach-2);
	min-width: 0;
	color: var(--tb-den);
}

.ak-tb-ten span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--tb-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-ten::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--tb-den);
	transform: scaleX(0);
	transform-origin: bottom left;
	transition: transform var(--ak-chuyen);
}

.ak-tb-the:hover .ak-tb-ten::after {
	transform: scaleX(1);
}

/*
 * Ô chứa nút đánh dấu. Chỉ giữ chỗ trong dòng tiêu đề; hình dáng, màu và trạng
 * thái của nút nằm ở `da-luu.css`.
 *
 * Bản trước đặt `pointer-events: none` vì biểu tượng chỉ vẽ cho giống bản mẫu,
 * bấm không có gì xảy ra nên thà đừng cho bấm. Từ 10/09/2026 nút chạy thật.
 */
.ak-tb-luu {
	flex: 0 0 18px;
}

.ak-tb-tin-chi-tiet {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ak-cach-2);
	align-self: stretch;
}

.ak-tb-mo-ta span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--tb-xam);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-gia {
	display: flex;
	align-items: center;
	gap: var(--ak-cach-1);
	align-self: stretch;
	min-height: 30px;
	color: var(--tb-den);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
	line-height: 16px;
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-gia .amount,
.ak-tb-gia .woocommerce-Price-amount {
	color: var(--tb-den);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-gia del {
	color: var(--tb-xam);
	font-size: var(--ak-co-vi);
	opacity: 1;
}

.ak-tb-gia ins {
	background: none;
	text-decoration: none;
}

.ak-tb-nhan-o {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: var(--ak-cach-1);
	align-self: stretch;
}

.ak-tb-nhan {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--ak-cach-2);
	padding: var(--ak-cach-1) var(--ak-cach-1);
	background: var(--tb-nen-nhan);
	border-radius: var(--ak-goc-sac);
}

.ak-tb-nhan span {
	color: var(--tb-xam);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-trong {
	width: 100%;
	padding: var(--ak-cach-6) 0;
	color: var(--tb-xam);
	text-align: center;
}

/* Phân trang
   ------------------------------------------------------------------------- */

.ak-tb-phan-trang {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--ak-cach-2);
	align-self: stretch;
	padding: var(--ak-cach-5) 0 60px;
}

.ak-tb-trang {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.ak-tb-trang-nut {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	padding: var(--ak-cach-1) var(--ak-cach-2);
	color: var(--tb-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

.ak-tb-trang-nut svg {
	width: 20px;
	height: 20px;
}

.ak-tb-trang-nut.so:hover,
.ak-tb-trang-nut.so.dang-xem {
	border-bottom: 1px solid var(--tb-den);
}

.ak-tb-trang-nut.tat {
	color: var(--tb-mo);
	cursor: not-allowed;
}

.ak-tb-trang-cham {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	color: var(--tb-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	pointer-events: none;
}

/* Màn hẹp: thanh lọc dính thấp hơn vì đầu trang thấp hơn
   ------------------------------------------------------------------------- */

@media (max-width: 600px) {

	.ak-tb-thanh {
		top: 6.2rem;
	}
}

/* Máy tính
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	.ak-tb-dau {
		gap: var(--ak-cach-6);
		padding: var(--ak-cach-5) var(--ak-cach-7);
	}

	/*
	 * Hai số này cố ý nằm ngoài thang chữ chung. 72px là cỡ tiêu đề riêng của
	 * đầu trang nhánh Thiết bị vệ sinh, dựng theo mẫu Là Nhà, và chỉ dùng đúng
	 * một lần trên toàn website. Gom về `--ak-co-hero` là 48px thì mất hẳn sức
	 * nặng của khối đầu trang đó. Xem QĐ-37.
	 *
	 * Dòng cơ sở ở trên đã dùng `--ak-co-hero`, nên từ 1024px trở xuống tiêu đề
	 * tự đi theo thang chung: 48px, rồi 36px, rồi 30px.
	 */
	.ak-tb-dau-ten {
		font-size: 72px;
		line-height: 96px;
	}

	.ak-tb-dau-mo-ta {
		font-size: var(--ak-co-chu);
		line-height: var(--ak-dong-vua);
		letter-spacing: var(--ak-gian-nhe);
	}

	.ak-tb-ds {
		gap: var(--ak-cach-7);
		padding: 60px var(--ak-cach-7);
	}

	.ak-tb-thanh {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.ak-tb-loc-ten {
		display: inline;
	}

	.ak-tb-phai {
		justify-content: flex-end;
		align-self: auto;
	}

	.ak-tb-luoi {
		column-gap: var(--ak-cach-4);
		row-gap: var(--ak-cach-6);
	}

	.ak-tb-o {
		width: calc(33.33333% - 10.66667px);
	}

	.ak-tb-tin {
		gap: var(--ak-cach-2);
		padding: 0 var(--ak-cach-2);
	}

	.ak-tb-ten span {
		font-size: var(--ak-co-chu);
		line-height: var(--ak-dong-vua);
		letter-spacing: var(--ak-gian-nhe);
	}

	.ak-tb-tin-chi-tiet {
		gap: var(--ak-cach-1);
	}

	.ak-tb-mo-ta span {
		-webkit-line-clamp: 1;
		font-size: var(--ak-co-be);
		line-height: var(--ak-dong-vua);
		letter-spacing: var(--ak-gian-nhe);
	}

	.ak-tb-gia {
		min-height: 0;
		line-height: 18px;
	}
}

/* Màn rộng: lưới cố định 1360px như bản mẫu
   ------------------------------------------------------------------------- */

@media (min-width: 1440px) {

	.ak-tb-luoi {
		width: 1360px;
		max-width: 100%;
		margin: 0 auto;
		row-gap: var(--ak-cach-7);
	}

	.ak-tb-o {
		width: 442.66667px;
	}
}