/**
 * Bộ trang chính sách — 6 trang dùng chung một giao diện.
 *
 * Bố cục bám theo hai ảnh mẫu Kosmos khách gửi: một thẻ trắng bo góc, trên
 * cùng là băng tiêu đề đỏ chữ trắng in hoa, bên trong là các dòng ngăn nhau
 * bằng đường kẻ mảnh. Dòng chia hai cột: cột trái số thứ tự cỡ lớn kèm biểu
 * tượng và tên mục, cột phải phần diễn giải. Dưới thẻ là khối "Lưu ý" chữ
 * nghiêng. Kiểu bảng nhiều cột dùng lại đúng băng đỏ và đường kẻ đó.
 *
 * Màu theo thang đỏ chung của website: #f32020 cho vạch và chi tiết nhỏ,
 * #c9151b cho nền băng đỏ và chữ nhấn, đúng QĐ-07. Không dùng #E31937 của
 * Kosmos.
 *
 * Mọi quy tắc nằm dưới `.ak-cs`. File chỉ nạp trên trang có shortcode.
 * Đầu trang và chân trang do Flatsome lo, file này không đụng tới, đúng QĐ-01.
 */

.ak-cs {
	--cs-do: var(--ak-mau-do);
	--cs-do-dam: var(--ak-mau-do-dam);
	--cs-do-tham: var(--ak-mau-do-tham);
	--cs-muc: var(--ak-mau-muc);
	--cs-mo: var(--ak-mau-mo);
	--cs-nen: var(--ak-mau-nen);
	--cs-vien: var(--ak-mau-vien);
	--cs-vien-nhat: var(--ak-mau-vien-nhat);
	--cs-goc: var(--ak-goc-vua);
	--cs-bong: var(--ak-bong-1);

	padding: var(--ak-cach-6) 0 64px;
	color: var(--cs-muc);
	font-size: var(--ak-co-chu);
	line-height: var(--ak-dong-thoang);
	overflow-x: clip;
}

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

/* Độ đặc hiệu bằng 0 để không đè lên các lớp bên dưới. */
.ak-cs :where(h1, h2, h3, h4) {
	margin: 0;
	color: var(--cs-muc);
	letter-spacing: var(--ak-gian-sit);
	line-height: var(--ak-dong-chat);
}

.ak-cs :where(p, ul, ol) {
	margin: 0;
	padding: 0;
}

.ak-cs :where(li) {
	list-style: none;
}

.ak-cs :where(a) {
	color: var(--cs-do-dam);
	text-decoration: none;
}

.ak-cs :where(a):hover {
	text-decoration: underline;
}

/* Đồng bộ khoảng cách 09/09/2026, nhóm A. Phần lề 32px đúng bằng hai lần
   --ak-le-sm nên đổi được, không dịch điểm ảnh nào. Còn 1120px thì cố ý giữ
   nguyên: nó không trùng bậc nào trong --ak-rong-*, quy về 1200px là nới mạch
   đọc thêm 80px, phải hỏi trước. */
.ak-cs-wrap {
	width: min(100% - 2 * var(--ak-le-sm), var(--ak-rong-vua));
	margin-inline: auto;
}

/* ---------- Đầu trang: nhãn, tiêu đề, câu dẫn ---------- */

.ak-cs-dau {
	margin-bottom: var(--ak-cach-6);
	text-align: center;
}

.ak-cs-nhan {
	display: inline-block;
	margin-bottom: var(--ak-cach-3);
	padding: var(--ak-cach-1) var(--ak-cach-3);
	border-radius: var(--ak-goc-tron);
	background: var(--ak-mau-do-mo);
	color: var(--cs-do-dam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh);
	letter-spacing: var(--ak-gian-rong);
	text-transform: uppercase;
}

.ak-cs-h1 {
	font-size: var(--ak-co-h1-co);
	font-weight: var(--ak-dam-rat);
	text-transform: uppercase;
}

.ak-cs-h1::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: var(--ak-cach-4) auto 0;
	border-radius: var(--ak-goc-sac);
	background: var(--cs-do);
}

.ak-cs-dat {
	max-width: var(--ak-rong-doc);
	margin: var(--ak-cach-4) auto 0;
	color: var(--cs-mo);
}

/* ---------- Thẻ trắng: băng đỏ và phần thân ---------- */

.ak-cs-the {
	margin-top: var(--ak-cach-5);
	border: 1px solid var(--cs-vien);
	border-radius: var(--cs-goc);
	background: var(--ak-mau-trang);
	box-shadow: var(--cs-bong);
	overflow: hidden;
}

.ak-cs-de {
	padding: var(--ak-cach-4) var(--ak-cach-5);
	background: linear-gradient(135deg, var(--cs-do-dam), var(--cs-do-tham));
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-h3-co);
	font-weight: var(--ak-dam-rat);
	letter-spacing: var(--ak-gian-vua);
	text-align: center;
	text-transform: uppercase;
}

.ak-cs-than {
	padding: var(--ak-cach-2) var(--ak-cach-5);
}

/* ---------- Dòng nội dung: cột trái nhãn, cột phải diễn giải ---------- */

.ak-cs-dong {
	display: grid;
	grid-template-columns: minmax(210px, 30%) 1fr;
	gap: var(--ak-cach-5);
	align-items: start;
	padding: var(--ak-cach-5) 0;
	border-top: 1px solid var(--cs-vien-nhat);
}

.ak-cs-dong:first-child {
	border-top: 0;
}

/*
 * `align-content: center` gom số, biểu tượng và tên thành một cụm giữa cột.
 * Thiếu dòng này thì dòng nào phần diễn giải dài, cụm bên trái bị kéo giãn ra
 * hai đầu: biểu tượng dính mép trên, tên rơi xuống mép dưới.
 */
.ak-cs-dong__trai {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ak-cach-1) var(--ak-cach-3);
	align-content: center;
	align-items: center;
	min-height: 100%;
	padding-right: var(--ak-cach-5);
	border-right: 1px solid var(--cs-vien-nhat);
}

.ak-cs-so {
	grid-row: span 2;
	align-self: center;
	color: var(--cs-do-dam);
	font-size: var(--ak-co-h2);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-khong);
}

.ak-cs-bt {
	display: block;
	width: 34px;
	height: 34px;
	color: var(--cs-do-dam);
}

.ak-cs-bt svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ak-cs-ten {
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-rat);
	letter-spacing: var(--ak-gian-nhe);
	line-height: var(--ak-dong-chat);
	text-transform: uppercase;
}

/* Dòng không có biểu tượng thì tên chiếm cả hai hàng cho cân. */
.ak-cs-dong--tron .ak-cs-ten {
	grid-row: span 2;
	align-self: center;
}

.ak-cs-dong__phai > * + * {
	margin-top: var(--ak-cach-3);
}

.ak-cs-ds {
	display: grid;
	gap: var(--ak-cach-2);
}

.ak-cs-ds li {
	position: relative;
	padding-left: 20px;
}

.ak-cs-ds li::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cs-do);
}

.ak-cs-ds--so {
	counter-reset: ak-cs-buoc;
}

.ak-cs-ds--so li {
	padding-left: var(--ak-cach-6);
	counter-increment: ak-cs-buoc;
}

.ak-cs-ds--so li::before {
	content: counter(ak-cs-buoc) ".";
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--cs-do-dam);
	font-weight: var(--ak-dam-manh);
}

.ak-cs-phu {
	padding: var(--ak-cach-3) var(--ak-cach-4);
	border-left: 3px solid var(--cs-do);
	border-radius: 0 var(--ak-goc-nho) var(--ak-goc-nho) 0;
	background: var(--cs-nen);
	color: var(--cs-mo);
	font-size: var(--ak-co-vua);
}

.ak-cs-phu strong {
	color: var(--cs-muc);
}

/* ---------- Bảng nhiều cột ---------- */

.ak-cs-cuon {
	padding: var(--ak-cach-1) var(--ak-cach-5) var(--ak-cach-4);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ak-cs-tb {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: var(--ak-co-vua);
	text-align: left;
}

/*
 * Flatsome in hoa mọi ô tiêu đề bảng. Bảng tra cứu ở đây có tên sản phẩm dài
 * nên in hoa vừa khó đọc vừa lệch với ảnh mẫu, phải trả về chữ thường.
 */
.ak-cs-tb th,
.ak-cs-tb td {
	padding: var(--ak-cach-4) var(--ak-cach-4);
	border-top: 1px solid var(--cs-vien-nhat);
	color: var(--cs-muc);
	letter-spacing: var(--ak-gian-khong);
	text-transform: none;
	vertical-align: middle;
}

.ak-cs-tb thead th {
	border-top: 0;
	color: var(--cs-muc);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-vua);
}

.ak-cs-tb thead th small {
	display: block;
	color: var(--cs-mo);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-thuong);
	text-transform: none;
}

.ak-cs-tb tbody th {
	width: 24%;
	font-weight: var(--ak-dam-rat);
}

.ak-cs-tb tbody th small {
	display: block;
	color: var(--cs-mo);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
	text-transform: none;
}

.ak-cs-tb .ak-cs-giua {
	text-align: center;
	white-space: nowrap;
}

.ak-cs-tb .ak-cs-nhan-do {
	color: var(--cs-do-dam);
	font-weight: var(--ak-dam-manh);
}

/* ---------- Khối lưu ý ---------- */

.ak-cs-luu-y {
	margin-top: var(--ak-cach-5);
	padding: var(--ak-cach-5) var(--ak-cach-5);
	border: 1px solid var(--cs-vien);
	border-left: 4px solid var(--cs-do);
	border-radius: var(--cs-goc);
	background: var(--cs-nen);
	font-style: italic;
}

.ak-cs-luu-y__de {
	margin-bottom: var(--ak-cach-2);
	color: var(--cs-do-dam);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-rat);
	font-style: normal;
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

.ak-cs-luu-y .ak-cs-ds li::before {
	background: var(--cs-mo);
}

.ak-cs-luu-y .ak-cs-nhan-do {
	color: var(--cs-do-dam);
	font-weight: var(--ak-dam-vua);
}

/* ---------- Dải liên hệ nhanh ---------- */

.ak-cs-ho-tro {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ak-cach-3) var(--ak-cach-5);
	align-items: center;
	justify-content: center;
	margin-top: var(--ak-cach-5);
	padding: 20px var(--ak-cach-5);
	border-radius: var(--cs-goc);
	background: linear-gradient(135deg, var(--ak-mau-toi), var(--ak-mau-toi-2));
	color: var(--ak-mau-trang);
	text-align: center;
}

.ak-cs-ho-tro__chu {
	font-weight: var(--ak-dam-vua);
}

.ak-cs-ho-tro a {
	display: inline-flex;
	gap: var(--ak-cach-2);
	align-items: center;
	padding: var(--ak-cach-2) 20px;
	border-radius: var(--ak-goc-tron);
	background: var(--cs-do-dam);
	color: var(--ak-mau-trang);
	font-weight: var(--ak-dam-manh);
}

.ak-cs-ho-tro a:hover {
	background: var(--cs-do-tham);
	text-decoration: none;
}

.ak-cs-ho-tro a svg {
	width: 18px;
	height: 18px;
}

/* ---------- Điều hướng sang các trang chính sách còn lại ---------- */

.ak-cs-lien-quan {
	margin-top: var(--ak-cach-7);
}

.ak-cs-lien-quan__de {
	margin-bottom: var(--ak-cach-3);
	font-size: var(--ak-co-h5);
	font-weight: var(--ak-dam-rat);
	text-transform: uppercase;
}

.ak-cs-lien-quan ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ak-cach-3);
}

.ak-cs-lien-quan a {
	display: flex;
	gap: var(--ak-cach-2);
	align-items: center;
	height: 100%;
	padding: var(--ak-cach-3) var(--ak-cach-4);
	border: 1px solid var(--cs-vien);
	border-radius: var(--ak-goc-vua);
	background: var(--ak-mau-trang);
	color: var(--cs-muc);
	font-weight: var(--ak-dam-vua);
	transition: border-color var(--ak-chuyen), box-shadow var(--ak-chuyen), color var(--ak-chuyen);
}

.ak-cs-lien-quan a:hover {
	border-color: var(--cs-do);
	box-shadow: var(--cs-bong);
	color: var(--cs-do-dam);
	text-decoration: none;
}

.ak-cs-lien-quan a svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--cs-do-dam);
}

.ak-cs-lien-quan .ak-cs-hien-tai a {
	border-color: var(--cs-do);
	background: var(--ak-mau-do-mo);
	color: var(--cs-do-dam);
}

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

@media (max-width: 849px) {
	.ak-cs-dong {
		grid-template-columns: 1fr;
		gap: var(--ak-cach-3);
	}

	.ak-cs-dong__trai {
		grid-template-columns: auto auto 1fr;
		gap: var(--ak-cach-3);
		padding: 0 0 var(--ak-cach-3);
		border-right: 0;
		border-bottom: 1px solid var(--cs-vien-nhat);
	}

	.ak-cs-so,
	.ak-cs-dong--tron .ak-cs-ten {
		grid-row: auto;
	}

	.ak-cs-bt {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 549px) {
	.ak-cs {
		padding: var(--ak-cach-5) 0 48px;
	}

	.ak-cs-than {
		padding: var(--ak-cach-1) var(--ak-cach-4);
	}

	.ak-cs-de {
		padding: var(--ak-cach-3) var(--ak-cach-4);
	}

	.ak-cs-so {
		font-size: var(--ak-co-h3);
	}

	.ak-cs-ten {
		font-size: var(--ak-co-nho);
	}

	.ak-cs-luu-y,
	.ak-cs-ho-tro {
		padding: var(--ak-cach-4) var(--ak-cach-4);
	}
}

@media print {
	.ak-cs-lien-quan,
	.ak-cs-ho-tro {
		display: none;
	}

	.ak-cs-the {
		box-shadow: none;
	}
}