/* Cẩm Nang Quảng Châu — lớp trang: thẻ tiêu đề, người phụ trách, mục lục, bảng thông tin, danh bạ, hồ sơ */

/* ---- thẻ tiêu đề ---- */
.the-tieu-de {
	background: var(--nen-khu);
	padding-block: 1.8rem 1.4rem;
}

.the-tieu-de-khung {
	background: var(--nen-trang);
	border: 1px solid var(--ke);
	border-left: 5px solid var(--mau-nhan);
	border-radius: var(--bo-goc);
	padding: 1.3rem 1.6rem 1.2rem;
}

.the-tieu-de h1 {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
	margin: 0.2rem 0 0.6rem;
	max-width: 36ch;
}

.duong-dan ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
	font-family: var(--chu-tieu-de);
	font-size: 0.82rem;
	color: var(--muc-nhat);
}

.duong-dan li + li::before {
	content: "/";
	margin-inline: 0.45rem;
	color: var(--ke);
}

.duong-dan a {
	color: var(--muc-nhat);
}

.chuyen-muc {
	margin: 0;
	font-family: var(--chu-tieu-de);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mau-nhan);
}

.dong-tac-gia {
	margin: 0;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--muc-nhat);
}

/* ---- người phụ trách ---- */
.phu-trach {
	background: var(--nen-khu);
	padding-bottom: 1.8rem;
}

.phu-trach-hang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1rem 1.6rem;
	background: var(--mau-nhan-nhat);
	border-radius: var(--bo-goc);
}

/* Chữ nhấn trên nền nhạt dùng màu đậm (đủ tương phản AA). */
.phu-trach-hang a:not(.nut) {
	color: var(--mau-nhan-dam);
}

.phu-trach-ai p {
	margin: 0;
}

.phu-trach-nhan {
	font-family: var(--chu-tieu-de);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mau-nhan-dam);
}

.phu-trach-ten {
	font-family: var(--chu-tieu-de);
	font-weight: 700;
	font-size: 1.05rem;
}

.phu-trach-viec {
	font-size: 0.92rem;
	color: var(--muc-nhat);
	max-width: 44ch;
}

.phu-trach-nut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.phu-trach-gio {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.82rem;
	color: var(--muc-nhat);
}

/* «Vì sao WeChat» — một dòng nhỏ dưới giờ làm việc và dưới mã QR trang liên hệ */
.ly-do-wechat {
	flex-basis: 100%;
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	color: var(--muc-nhat);
	max-width: 62ch;
}

/* ---- bố cục: một cột rộng, mục lục dính bên trái trên màn hình lớn ---- */
.bo-cuc {
	padding-top: 2rem;
}

.bai {
	min-width: 0;
	max-width: 46rem;
}

.dan-nhap {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--muc);
}

.dan-nhap p:first-child {
	margin-top: 0;
}

.dan-nhap p:first-child::first-line {
	font-weight: 600;
}

.muc-luc {
	font-family: var(--chu-tieu-de);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--ke);
	border-radius: var(--bo-goc);
}

.muc-luc-nhan {
	margin: 0 0 0.4rem;
	font-weight: 700;
}

.muc-luc ol {
	margin: 0;
	padding-left: 1.2rem;
}

.muc-luc li {
	padding: 0.15rem 0;
}

.muc-luc a {
	color: var(--muc-nhat);
	text-decoration: none;
}

.muc-luc a:hover {
	color: var(--mau-nhan);
	text-decoration: underline;
}

@media (min-width: 64em) {
	.bo-cuc.co-muc-luc {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}
	.co-muc-luc .muc-luc {
		position: sticky;
		top: calc(var(--cao-thanh-nong) + 1.2rem);
		border: 0;
		border-left: 2px solid var(--ke);
		border-radius: 0;
		padding: 0.2rem 0 0.2rem 1rem;
	}
	.bai {
		max-width: 50rem;
	}
}

.than-bai table,
.bang-thong-tin {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.than-bai th,
.than-bai td {
	border-bottom: 1px solid var(--ke);
	padding: 0.55rem 0.6rem;
	text-align: left;
	vertical-align: top;
}

.cuon-ngang {
	overflow-x: auto;
}

/* ---- bảng thông tin chợ ---- */
.bang-thong-tin th,
.bang-thong-tin td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ke);
}

.bang-thong-tin th {
	width: 38%;
	font-family: var(--chu-tieu-de);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--muc-nhat);
	background: var(--nen-khu);
}

.hang-address-zh td {
	font-size: 1.15rem;
}

/* Chữ Hán trong ô bảng được xuống dòng — địa chỉ dài không đẩy bảng rộng quá màn hình */
td .han {
	white-space: normal;
	overflow-wrap: anywhere;
}

.hang-pitfalls td {
	color: var(--mau-nhan-dam);
}

/* ---- lối vào (trang chủ) ---- */
.loi-vao {
	list-style: none;
	padding: 0;
	margin: 1.8rem 0;
	border-top: 2px solid var(--muc);
}

.loi-vao li {
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--ke);
}

.loi-vao a {
	font-family: var(--chu-tieu-de);
	font-weight: 700;
}

/* ---- danh mục con (trang mục) ---- */
.muc-con ul {
	padding-left: 1.2rem;
}

.muc-con li {
	margin-bottom: 0.7rem;
}

.muc-con a {
	font-family: var(--chu-tieu-de);
	font-weight: 600;
}

/* ---- hỏi đáp dạng dl ---- */
.hoi-dap dl {
	margin: 0;
}

.hoi-dap dt {
	font-family: var(--chu-tieu-de);
	font-weight: 700;
	margin-top: 1.3rem;
}

.hoi-dap dd {
	margin: 0.3rem 0 0;
	padding-left: 1rem;
	border-left: 3px solid var(--mau-nhan-nhat);
}

.hoi-dap dd p {
	margin: 0.3rem 0;
}

/* ---- bài liên quan + ghi chú công ty ---- */
.lien-quan ul {
	padding-left: 1.2rem;
}

.lien-quan li {
	padding: 0.15rem 0;
}

.ghi-chu-cong-ty {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ke);
	font-size: 0.9rem;
	color: var(--muc-nhat);
}

/* ---- mẫu tin nhắn + mã QR ---- */
.mau-tin-khoi {
	background: var(--nen-khu);
	border-radius: var(--bo-goc);
	padding: 1rem 1.2rem;
	font-family: var(--chu-tieu-de);
	font-size: 0.95rem;
	white-space: pre-wrap;
}

.kenh-luoi {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.kenh-luoi figure {
	width: 12.5rem;
	margin: 0;
	text-align: center;
	font-family: var(--chu-tieu-de);
	font-size: 0.9rem;
}

.kenh-luoi figcaption a {
	white-space: nowrap;
}

.kenh-luoi img {
	width: 11rem;
	border: 1px solid var(--ke);
}

/* ---- danh bạ phiên dịch viên ---- */
.ghi-chu-gia {
	font-size: 0.93rem;
	color: var(--muc-nhat);
}

.bo-loc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	padding: 0.8rem 1rem;
	margin: 1rem 0 0.4rem;
	background: var(--nen-khu);
	border-radius: var(--bo-goc);
}

.nhom-loc {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}

.nhom-loc legend {
	float: left;
	margin-right: 0.4rem;
	font-family: var(--chu-tieu-de);
	font-weight: 700;
	font-size: 0.8rem;
}

.nhom-loc input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.nhom-loc label {
	cursor: pointer;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--ke);
	border-radius: 999px;
	background: var(--nen-trang);
	font-family: var(--chu-tieu-de);
	font-size: 0.8rem;
}

.nhom-loc input:checked + label {
	background: var(--mau-nhan);
	border-color: var(--mau-nhan);
	color: #FFFFFF;
}

.nhom-loc input:focus-visible + label {
	outline: 2px solid var(--mau-nhan-dam);
	outline-offset: 2px;
}

.ho-so {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"dau dau"
		"vai vai"
		"mota cuoi";
	gap: 0.2rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--ke);
}

.ho-so-dau {
	grid-area: dau;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
}

.ho-so-ten {
	font-family: var(--chu-tieu-de);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--muc);
}

.ma-so {
	font-family: var(--chu-tieu-de);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--mau-nhan-dam);
	letter-spacing: 0.04em;
}

.huy-hieu {
	font-family: var(--chu-tieu-de);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--nen-khu);
	color: var(--muc-nhat);
}

.huy-hieu-gold {
	background: #F3D98B;
	color: #5A4200;
}

.huy-hieu-recent {
	background: #DDEFE3;
	color: #1F5A33;
}

.ho-so-vai {
	grid-area: vai;
	margin: 0;
	font-family: var(--chu-tieu-de);
	font-size: 0.85rem;
	color: var(--muc-nhat);
}

.ho-so-mo-ta {
	grid-area: mota;
	margin: 0.2rem 0 0;
	font-size: 0.97rem;
}

.ho-so-cuoi {
	grid-area: cuoi;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4rem;
	text-align: right;
}

.gia {
	font-family: var(--chu-tieu-de);
	font-size: 0.9rem;
	white-space: nowrap;
}

.gia strong {
	font-size: 1.05rem;
}

.gia-dong {
	display: block;
	color: var(--muc-nhat);
	font-size: 0.82rem;
}

.lien-dat {
	display: inline-flex;
	align-items: center;
	font-family: var(--chu-tieu-de);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--bo-goc);
	background: var(--mau-nhan-dam);
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

.lien-dat:hover {
	background: var(--mau-nhan);
	color: #FFFFFF;
}

.bo-loc-xoa {
	align-self: center;
	font: inherit;
	font-size: 0.8rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--mau-nhan-dam);
	border-radius: var(--bo-goc);
	background: transparent;
	color: var(--mau-nhan-dam);
	cursor: pointer;
}

.bo-loc-trong {
	display: none;
	padding: 0.6rem 1rem;
	border-left: 3px solid var(--mau-nhan);
	background: var(--nen-khu);
}

/* Trình duyệt chưa hỗ trợ :has() thì bộ lọc không có tác dụng — ẩn đi, danh sách hiện đủ. */
@supports not selector(:has(*)) {
	.bo-loc {
		display: none;
	}
}

@media (max-width: 40em) {
	.bang-thong-tin th {
		width: 32%;
		padding-inline: 0.5rem;
	}
	.ho-so {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "dau" "vai" "mota" "cuoi";
	}
	.ho-so-cuoi {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
}

/* ---- trang hồ sơ riêng ---- */
.dat-phien-dich {
	margin-top: 1.4rem;
	padding: 1.2rem 1.4rem;
	border: 2px solid var(--mau-nhan);
	border-radius: var(--bo-goc);
	max-width: 46rem;
}

.dat-phien-dich h2 {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
}

.dat-phien-dich p {
	margin: 0.4rem 0;
}

.dat-gia .gia strong {
	font-size: 1.35rem;
}

.dat-ghi {
	font-size: 0.85rem;
	color: var(--muc-nhat);
}

.bai-don {
	padding-top: 1.6rem;
}

.dong-huy-hieu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.the-nho {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	padding: 0;
	margin: 1.4rem 0;
}

.the-nho li {
	font-family: var(--chu-tieu-de);
	font-size: 0.78rem;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--ke);
	border-radius: 999px;
}

/* ---- 404 ---- */
.khong-thay {
	padding-block: 3rem 1rem;
	max-width: 42rem;
}

.khong-thay-so {
	margin: 0;
	font-family: var(--chu-tieu-de);
	font-weight: 700;
	font-size: 5.5rem;
	line-height: 1;
	color: var(--mau-nhan-nhat);
	-webkit-text-stroke: 2px var(--mau-nhan);
}

.khong-thay-lien-ket li {
	padding: 0.2rem 0;
}

.khong-thay-nut {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* bộ lọc danh sách — sinh tự động */
.danh-ba:has(#loc-gt-nam:checked) .ho-so:not([data-loc~="gt-nam"]),
.danh-ba:has(#loc-gt-nu:checked) .ho-so:not([data-loc~="gt-nu"]),
.danh-ba:has(#loc-nv-1:checked) .ho-so:not([data-loc~="nv-1"]),
.danh-ba:has(#loc-nv-2:checked) .ho-so:not([data-loc~="nv-2"]),
.danh-ba:has(#loc-lv-4:checked) .ho-so:not([data-loc~="lv-4"]),
.danh-ba:has(#loc-lv-5:checked) .ho-so:not([data-loc~="lv-5"]),
.danh-ba:has(#loc-lv-1:checked) .ho-so:not([data-loc~="lv-1"]),
.danh-ba:has(#loc-lv-3:checked) .ho-so:not([data-loc~="lv-3"]),
.danh-ba:has(#loc-lv-7:checked) .ho-so:not([data-loc~="lv-7"]),
.danh-ba:has(#loc-lv-2:checked) .ho-so:not([data-loc~="lv-2"]),
.danh-ba:has(#loc-hh-gold:checked) .ho-so:not([data-loc~="hh-gold"]),
.danh-ba:has(#loc-hh-jobs:checked) .ho-so:not([data-loc~="hh-jobs"]) {
	display: none;
}
/* bộ lọc không còn hồ sơ — sinh tự động */
.danh-ba:has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-nv-1:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-nv-1:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-nv-1:checked):has(#loc-lv-2:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-nv-2:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-nv-2:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-lv-5:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-1:checked):has(#loc-lv-5:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-1:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-1:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-1:checked):has(#loc-lv-2:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-1:checked):has(#loc-lv-2:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-2:checked):has(#loc-lv-5:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-2:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nam:checked):has(#loc-nv-2:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-lv-7:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-lv-7:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-lv-2:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-1:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-1:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-1:checked):has(#loc-lv-7:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-1:checked):has(#loc-lv-7:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-1:checked):has(#loc-lv-2:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-2:checked):has(#loc-lv-5:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-2:checked):has(#loc-lv-5:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-2:checked):has(#loc-lv-7:checked):has(#loc-hh-gold:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-2:checked):has(#loc-lv-7:checked):has(#loc-hh-jobs:checked) .bo-loc-trong,
.danh-ba:has(#loc-gt-nu:checked):has(#loc-nv-2:checked):has(#loc-lv-2:checked):has(#loc-hh-gold:checked) .bo-loc-trong {
	display: block;
}