/**
 * Trang danh mục sản phẩm — HM-05. Dựng theo https://www.doric.vn/san-pham.
 *
 * Con số lấy thẳng từ bảng kiểu của bản mẫu: nền trắng đệm 4vw, dải tab dính
 * mép trên với vạch dưới 1px #eff1f6 và vạch đỏ #9e1c20 cho tab đang xem, lưới
 * 4 cột cách nhau 16px và 24px, ảnh vuông, tên hàng cỡ 1rem canh giữa, dòng
 * kích thước cỡ 12px nét 300, ô số trang 40x40, nút đen bo 4px rộng 30vw.
 *
 * Bốn chỗ cố ý làm khác bản mẫu, ghi ở CH-22:
 *
 * 1. Phông chữ giữ Manrope của site, không chép Alexandria của bản mẫu. Đây là
 *    quy ước chung cho mọi trang dựng theo mẫu, xem QĐ-13. Vì vậy file này
 *    không khai báo font-family ở đâu cả.
 * 2. Dải tab của bản mẫu dính ở 76px vì đầu trang của họ cao chừng đó. Ở đây
 *    dính đúng chiều cao đầu trang A Khoa, 7,1rem và 6,2rem trên màn hẹp.
 * 3. Bản mẫu đặt tên hàng màu trắng trong khoảng 480–767px, trên nền thẻ cũng
 *    trắng, nên ở dải màn hình đó chữ biến mất. Đây là lỗi của họ, không chép.
 * 4. Bản mẫu ẩn nút "Sau" nên chỉ còn đúng một ô số trang bấm được. Ở đây liệt
 *    kê đủ số trang, kiểu ô giữ nguyên.
 *
 * Mọi quy tắc nằm dưới `.ak-dm`.
 */

.ak-dm {
	--dm-chinh: var(--ak-mau-do);
	--dm-vien: var(--ak-mau-vien-nhat);
	--dm-den: var(--ak-mau-muc);

	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 4vw;
	background-color: var(--ak-mau-trang);
}

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

/* Dải tab
   ------------------------------------------------------------------------- */

.ak-dm-tabs {
	position: sticky;
	top: 7.1rem;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: var(--ak-cach-5);
	background-color: var(--ak-mau-trang);
	border-bottom: 1px solid var(--dm-vien);
}

.ak-dm-tab {
	flex: 1 1 0;
	width: 100%;
	padding: var(--ak-cach-4) 0;
	background-color: var(--ak-mau-trang);
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

.ak-dm-tab:hover,
.ak-dm-tab:focus {
	text-decoration: none;
}

.ak-dm-tab.dang-xem {
	border-bottom-color: var(--dm-chinh);
}

.ak-dm-tab-chu {
	display: block;
	color: var(--dm-den);
	text-align: center;
	text-transform: uppercase;
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-nhe);
	line-height: var(--ak-dong-vua);
}

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

.ak-dm-noi-dung {
	width: 100%;
	max-width: 100%;
}

.ak-dm-luoi {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: var(--ak-cach-4);
	row-gap: var(--ak-cach-5);
	width: 100%;
	max-width: 100%;
}

.ak-dm-o {
	width: 100%;
	margin-bottom: 0;
}

.ak-dm-the {
	display: flex;
	flex-flow: column;
	gap: var(--ak-cach-4);
	width: 100%;
	max-width: 100%;
	background-color: var(--ak-mau-trang);
	text-decoration: none;
	cursor: pointer;
}

.ak-dm-the:hover,
.ak-dm-the:focus {
	text-decoration: none;
}

.ak-dm-anh {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	vertical-align: baseline;
	border-radius: 0;
}

.ak-dm-chu {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: var(--ak-cach-1);
}

.ak-dm-ten {
	margin-bottom: 0;
	color: var(--dm-den);
	text-align: center;
	font-size: var(--ak-co-chu);
	font-weight: var(--ak-dam-nhe);
	font-style: normal;
	line-height: var(--ak-dong-vua);
	text-decoration: none;
}

/* Dòng kích thước L x H x W
   ------------------------------------------------------------------------- */

.ak-dm-kt {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ak-cach-1);
	width: 100%;
	text-align: left;
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-nhe);
}

.ak-dm-kt-o {
	display: flex;
	gap: var(--ak-cach-1);
}

.ak-dm-kt-nhan,
.ak-dm-kt-so {
	margin-left: 1px;
	margin-right: 1px;
	color: var(--dm-den);
	font-weight: var(--ak-dam-mong);
}

.ak-dm-trong {
	padding: var(--ak-cach-6) 0;
	text-align: center;
	color: var(--ak-mau-mo);
}

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

.ak-dm-phan-trang {
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: var(--ak-cach-2) 20px;
	margin-top: 80px;
	text-align: center;
	font-weight: var(--ak-dam-thuong);
}

.ak-dm-so-trang {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--ak-cach-1);
	flex-wrap: wrap;
}

.ak-dm-so {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	color: var(--dm-den);
	border: 1px solid var(--dm-vien);
	text-decoration: none;
}

.ak-dm-so:hover,
.ak-dm-so:focus {
	text-decoration: none;
}

.ak-dm-so.dang-xem {
	background-color: var(--ak-nut-chinh-nen);
	color: var(--ak-nut-chinh-chu);
}

.ak-dm-dem {
	margin-top: var(--ak-cach-2);
	margin-bottom: var(--ak-cach-2);
}

.ak-dm-nut {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	width: 30vw;
	padding: var(--ak-nut-dem);
	background-color: var(--dm-den);
	border-radius: var(--ak-goc-tron);
	text-decoration: none;
}

.ak-dm-nut:hover,
.ak-dm-nut:focus {
	text-decoration: none;
}

.ak-dm-nut-chu {
	display: block;
	color: var(--ak-mau-trang);
	font-weight: var(--ak-dam-nhe);
	text-decoration: none;
}

/* Màn rộng
   ------------------------------------------------------------------------- */

@media (min-width: 1440px) {

	.ak-dm-tab {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.ak-dm-tab-chu {
		font-size: var(--ak-co-h5);
	}

	.ak-dm-ten {
		font-weight: var(--ak-dam-thuong);
	}
}

/* Máy bảng
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {

	.ak-dm-luoi {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.ak-dm-tabs {
		flex-flow: wrap;
	}

	.ak-dm-tab {
		display: flex;
		flex: 0 0 33%;
		justify-content: center;
		align-items: center;
		align-self: center;
		width: 33%;
		height: 56px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.ak-dm-phan-trang {
		margin-top: var(--ak-cach-7);
	}

	.ak-dm-nut-chu {
		font-size: var(--ak-co-vua-nho);
	}
}

/* Điện thoại ngang và màn hẹp
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.ak-dm-luoi {
		grid-template-columns: 1fr 1fr;
	}

	.ak-dm-tabs {
		justify-content: space-around;
		align-items: stretch;
		height: 100%;
	}

	.ak-dm-tab-chu {
		width: 100%;
		padding-left: var(--ak-cach-4);
		padding-right: var(--ak-cach-4);
	}

	.ak-dm-nut {
		padding-top: var(--ak-cach-4);
		padding-bottom: var(--ak-cach-4);
		text-align: center;
	}
}

@media (max-width: 600px) {

	.ak-dm-tabs {
		top: 6.2rem;
	}
}

@media (max-width: 479px) {

	.ak-dm-luoi {
		grid-template-columns: 1fr;
	}

	.ak-dm-the {
		gap: var(--ak-cach-5);
	}

	.ak-dm-chu {
		justify-content: flex-start;
		align-items: center;
	}

	.ak-dm-ten {
		font-size: var(--ak-co-h4);
		text-align: left;
	}

	.ak-dm-tab {
		flex: 0 0 50%;
		width: 50%;
	}

	.ak-dm-tab-chu {
		padding-left: 0;
		padding-right: 0;
		font-size: var(--ak-co-be);
	}

	.ak-dm-phan-trang {
		row-gap: var(--ak-cach-4);
	}

	.ak-dm-nut {
		width: 80vw;
	}
}

/* ---------- Tiêu đề trang danh mục ----------

   Bản mẫu Doric mở thẳng vào dải tab, nên chín trang nhánh Phào chỉ trước đây
   không có thẻ tiêu đề nào. Thêm lại một dòng h1 đặt trên dải tab: đủ để trang
   có tiêu đề thật cho người đọc lẫn cho Google, mà không phá nhịp mở đầu gọn
   của bản mẫu. Xem QĐ-39. */

.ak-dm-dau {
	margin-bottom: 20px;
}

.ak-dm-dau-ten {
	margin: 0;
	color: var(--dm-den);
	font-size: var(--ak-co-h2-co);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-chat);
	letter-spacing: var(--ak-gian-sit);
}

.ak-dm-dau-mo-ta {
	max-width: 68ch;
	margin: var(--ak-cach-2) 0 0;
	color: var(--ak-mau-mo);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-nhe);
	line-height: var(--ak-dong-thoang);
}