/*
 * trang-trong.css - Kiểu dáng cho các trang bên trong website.
 *
 * Trang chủ dùng rieng.css, còn danh mục, bài viết, trang tĩnh và cột bên
 * dùng tệp này. Tách hai tệp để mỗi tệp một vai trò rõ ràng, dễ tìm khi sửa.
 *
 * Mọi tên lớp dưới đây đều là tên mà giao diện cha aloxovn-base ĐANG sinh ra
 * sẵn, nên khi chuyển sang không phải sửa một dòng PHP nào.
 *
 * Bố cục tệp:
 *   1. Khung chung        5. Bài viết đơn
 *   2. Đường dẫn phân cấp 6. Nội dung soạn thảo
 *   3. Đầu trang lưu trữ  7. Chân bài viết
 *   4. Thẻ bài viết       8. Trang tĩnh
 *                         9. Phân trang
 *                        10. Màn hình nhỏ
 */

/* =========================================================
   1. KHUNG CHUNG CHO MỌI TRANG TRONG
   ========================================================= */

.ccl .khoi-noi-dung {
	padding: clamp(24px, 3vw, 44px) 0 clamp(36px, 4.5vw, 64px);
}

/* Bố cục hai cột: nội dung bên trái, cột bên 320px bên phải. */
.ccl .khoi-noi-dung--sidebar-phai {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rong-cot-ben);
	gap: var(--kc-hai-cot);
	align-items: start;
}

.ccl .cot-noi-dung {
	min-width: 0;
}

/*
 * Bài viết và trang tĩnh giới hạn 760px KHI KHÔNG CÓ CỘT BÊN. Đây không phải
 * con số tuỳ hứng: một dòng chữ dài quá 90 ký tự thì mắt phải quét ngang
 * nhiều, đọc mỏi và hay nhảy dòng. Khi có cột bên thì cột nội dung đã tự hẹp
 * lại vừa đúng khoảng đó rồi nên không cần giới hạn thêm.
 */
.ccl .khoi-noi-dung--mot-cot .bai-don,
.ccl .khoi-noi-dung--mot-cot .trang-tinh {
	max-width: 760px;
	margin-inline: auto;
}

/* =========================================================
   1B. CỘT BÊN
   ========================================================= */

/*
 * Cột bên bám dính khi cuộn. Với bài viết dài, cụm hotline và Zalo luôn nằm
 * trong tầm mắt - đây là chỗ khách hay bỏ dở nhất nếu phải cuộn ngược lên tìm.
 */
.ccl .cot-ben__trong {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: var(--kc-5);
}

.ccl .cot-ben .widget {
	padding: var(--kc-4);
	background: #fff;
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-goc);
}

.ccl .cot-ben .widget__tieu-de {
	position: relative;
	margin: 0 0 var(--kc-4);
	padding-bottom: var(--kc-3);
	color: var(--ccl-xanh);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Gạch ngắn màu vàng đồng dưới tiêu đề widget, đồng bộ với tiêu đề trang. */
.ccl .cot-ben .widget__tieu-de::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background: var(--ccl-vang);
	border-radius: 2px;
}

/* ---------- Hộp liên hệ nhanh ---------- */

.ccl .widget-ccl-lien-he {
	padding: 0;
	overflow: hidden;
	border: 0;
}

.ccl .widget-ccl-lien-he .widget__tieu-de {
	padding: var(--kc-4) var(--kc-4) var(--kc-3);
	margin-bottom: 0;
	background: #fff;
	border: 1px solid var(--mau-vien);
	border-bottom: 0;
	border-radius: var(--bo-goc) var(--bo-goc) 0 0;
}

.ccl-hop-lien-he {
	padding: var(--kc-4);
	background: linear-gradient(135deg, var(--ccl-xanh) 0%, var(--ccl-xanh-dam) 100%);
	border-radius: 0 0 var(--bo-goc) var(--bo-goc);
	color: #fff;
	text-align: center;
}

.ccl-hop-lien-he__nhan {
	margin: 0 0 4px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ccl-hop-lien-he__so {
	display: block;
	margin-bottom: 6px;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.ccl-hop-lien-he__so:hover {
	color: var(--ccl-vang-nhat);
}

.ccl-hop-lien-he__gio {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--kc-4);
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.8125rem;
}

.ccl-hop-lien-he__nut {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kc-2);
}

.ccl-nut-lh {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	justify-content: center;
	padding: 10px 8px;
	border-radius: var(--bo-goc-nho);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.ccl-nut-lh--goi {
	background: var(--ccl-vang);
	color: #fff;
}

.ccl-nut-lh--goi:hover {
	background: var(--ccl-vang-nhat);
	color: var(--ccl-xanh-dam);
}

.ccl-nut-lh--zalo {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

.ccl-nut-lh--zalo:hover {
	background: #fff;
	color: var(--ccl-xanh);
}

.ccl-hop-lien-he__dia-chi {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	margin: var(--kc-4) 0 0;
	padding-top: var(--kc-3);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: left;
}

.ccl-hop-lien-he__dia-chi .icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ccl-vang-nhat);
}

/* ---------- Danh sách bài viết nhỏ ---------- */

.ccl-bai-nho {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ccl-bai-nho li {
	display: flex;
	gap: var(--kc-3);
}

.ccl-bai-nho li + li {
	margin-top: var(--kc-3);
	padding-top: var(--kc-3);
	border-top: 1px solid var(--mau-vien);
}

.ccl-bai-nho__anh {
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--bo-goc-nho);
}

.ccl-bai-nho__anh img {
	display: block;
	width: 80px;
	height: 60px;
	object-fit: cover;
	transition: transform var(--vua);
}

.ccl-bai-nho li:hover .ccl-bai-nho__anh img {
	transform: scale(1.06);
}

.ccl-bai-nho__chu a {
	display: block;
	margin-bottom: 5px;
	color: var(--ccl-xanh);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.ccl-bai-nho__chu a:hover {
	color: var(--ccl-vang);
}

.ccl-bai-nho__chu span {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	color: var(--mau-chu-nhat);
	font-size: 0.75rem;
}

.ccl-bai-nho__chu .icon {
	color: var(--ccl-vang);
}

.ccl-xem-tat-ca {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: var(--kc-4);
	color: var(--ccl-xanh);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.ccl-xem-tat-ca:hover {
	color: var(--ccl-vang);
}

/* ---------- Sản phẩm trong cột bên ---------- */

.ccl-sp-nho {
	margin: 0 0 var(--kc-4);
	padding: 0;
	list-style: none;
}

.ccl-sp-nho li {
	display: flex;
	gap: var(--kc-3);
	align-items: center;
}

.ccl-sp-nho li + li {
	margin-top: var(--kc-3);
	padding-top: var(--kc-3);
	border-top: 1px solid var(--mau-vien);
}

.ccl-sp-nho__anh {
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--ccl-kem-dam);
	border-radius: var(--bo-goc-nho);
}

.ccl-sp-nho__anh img {
	display: block;
	width: 68px;
	height: 68px;
	object-fit: cover;
}

.ccl-sp-nho__chu a {
	display: block;
	margin-bottom: 4px;
	color: var(--ccl-xanh);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ccl-sp-nho__chu a:hover {
	color: var(--ccl-vang);
}

.ccl-sp-nho__chu strong {
	color: var(--ccl-vang);
	font-size: 1.0625rem;
	font-weight: 800;
}

/* =========================================================
   2. ĐƯỜNG DẪN PHÂN CẤP
   ========================================================= */

.ccl .dai-duong-dan {
	background: var(--ccl-kem);
	border-bottom: 1px solid rgba(var(--ccl-xanh-rgb), 0.08);
}

.ccl .duong-dan-phan-cap {
	padding: 11px 0;
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
}

.ccl .duong-dan-phan-cap a {
	color: var(--ccl-xanh);
	text-decoration: none;
}

.ccl .duong-dan-phan-cap a:hover {
	color: var(--ccl-vang);
	text-decoration: underline;
}

/* Dấu phân cách giữa các cấp. */
.ccl .duong-dan-phan-cap span + span::before,
.ccl .duong-dan-phan-cap a + a::before,
.ccl .duong-dan-phan-cap a + span::before {
	content: "›";
	margin: 0 8px;
	color: rgba(var(--ccl-xanh-rgb), 0.35);
}

/* =========================================================
   3. ĐẦU TRANG LƯU TRỮ
   ========================================================= */

.ccl .dau-trang-luu-tru {
	margin-bottom: clamp(24px, 3vw, 40px);
	text-align: center;
}

.ccl .tieu-de-trang {
	position: relative;
	margin: 0 0 var(--kc-3);
	padding-bottom: var(--kc-3);
	color: var(--ccl-xanh);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.375rem);
	font-weight: 800;
	line-height: 1.2;
}

/* Gạch trang trí ngắn màu vàng đồng dưới tiêu đề. */
.ccl .tieu-de-trang::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 56px;
	height: 3px;
	background: var(--ccl-vang);
	border-radius: 2px;
	transform: translateX(-50%);
}

.ccl .mo-ta-trang {
	max-width: 640px;
	margin: 0 auto;
	color: var(--mau-chu-nhat);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* =========================================================
   4. THẺ BÀI VIẾT TRONG LƯỚI
   ========================================================= */

.ccl .luoi-bai {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.2vw, 28px);
}

/*
 * Có cột bên thì cột nội dung chỉ còn khoảng 840px. Chia ba thì mỗi thẻ hụt
 * dưới 280px, tiêu đề và tóm tắt bị bó cụt. Chia hai vừa đẹp.
 */
.ccl .khoi-noi-dung--sidebar-phai .luoi-bai {
	grid-template-columns: repeat(2, 1fr);
}

.ccl .the-bai {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-goc);
	transition: box-shadow var(--vua), transform var(--vua);
}

.ccl .the-bai:hover {
	border-color: transparent;
	box-shadow: var(--bong-3);
	transform: translateY(-3px);
}

.ccl .the-bai__anh {
	margin: 0;
	overflow: hidden;
	background: var(--ccl-kem-dam);
}

.ccl .the-bai__anh img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--vua);
}

.ccl .the-bai:hover .the-bai__anh img {
	transform: scale(1.04);
}

.ccl .the-bai__than {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--kc-4);
}

/* Nhãn chuyên mục kiểu viên thuốc, màu vàng đồng nhạt. */
.ccl .the-bai__chuyen-muc {
	align-self: flex-start;
	margin-bottom: var(--kc-2);
	padding: 4px 11px;
	background: rgba(var(--ccl-vang-rgb), 0.13);
	border-radius: var(--bo-goc-tron);
	color: var(--ccl-vang);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.ccl .the-bai__chuyen-muc:hover {
	background: var(--ccl-vang);
	color: #fff;
}

.ccl .the-bai__tieu-de {
	margin: 0 0 var(--kc-2);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
}

.ccl .the-bai__tieu-de a {
	color: var(--ccl-xanh);
	text-decoration: none;
}

.ccl .the-bai__tieu-de a:hover {
	color: var(--ccl-vang);
}

.ccl .the-bai__tom-tat {
	flex: 1 1 auto;
	margin: 0 0 var(--kc-3);
	color: var(--mau-chu-nhat);
	font-size: 0.875rem;
	line-height: 1.65;
}

/* =========================================================
   5. BÀI VIẾT ĐƠN
   ========================================================= */

.ccl .meta-bai {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-2) var(--kc-4);
	align-items: center;
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
}

.ccl .meta-bai__muc {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.ccl .meta-bai .icon {
	color: var(--ccl-vang);
}

.ccl .meta-bai a {
	color: var(--mau-chu-nhat);
	text-decoration: none;
}

.ccl .meta-bai a:hover {
	color: var(--ccl-xanh);
}

/* Viền trên ngăn phần meta với phần chữ trong thẻ bài. */
.ccl .the-bai__than .meta-bai {
	padding-top: var(--kc-3);
	border-top: 1px solid var(--mau-vien);
}

.ccl .bai-don__dau {
	margin-bottom: clamp(20px, 2.5vw, 32px);
}

.ccl .bai-don__tieu-de {
	margin: 0 0 var(--kc-3);
	color: var(--ccl-xanh);
	font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.5rem);
	font-weight: 800;
	line-height: 1.22;
}

.ccl .bai-don__dau .meta-bai {
	padding-bottom: var(--kc-4);
	border-bottom: 1px solid var(--mau-vien);
}

.ccl .bai-don__anh {
	margin: var(--kc-5) 0 0;
	overflow: hidden;
	border-radius: var(--bo-goc);
}

.ccl .bai-don__anh img {
	display: block;
	width: 100%;
	height: auto;
}

.ccl .bai-don__anh figcaption {
	padding: var(--kc-2) var(--kc-3);
	background: var(--ccl-kem);
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
	text-align: center;
}

/* =========================================================
   6. NỘI DUNG SOẠN THẢO
   ========================================================= */

.ccl .noi-dung-soan-thao {
	color: var(--mau-chu);
	font-size: 1.0625rem;
	line-height: 1.8;
	/*
	 * Cho phép ngắt giữa từ khi gặp chuỗi dài không có khoảng trắng - địa chỉ
	 * web dán vào bài chẳng hạn. Không có dòng này thì trên điện thoại một liên
	 * kết dài đủ để đẩy vỡ cả trang sang ngang.
	 */
	overflow-wrap: break-word;
}

.ccl .noi-dung-soan-thao > * + * {
	margin-top: var(--kc-4);
}

.ccl .noi-dung-soan-thao h2,
.ccl .noi-dung-soan-thao h3,
.ccl .noi-dung-soan-thao h4 {
	color: var(--ccl-xanh);
	font-weight: 800;
	line-height: 1.3;
}

.ccl .noi-dung-soan-thao h2 {
	margin-top: clamp(28px, 3.5vw, 44px);
	padding-left: var(--kc-3);
	border-left: 4px solid var(--ccl-vang);
	font-size: 1.5rem;
}

.ccl .noi-dung-soan-thao h3 {
	margin-top: clamp(22px, 2.8vw, 34px);
	font-size: 1.1875rem;
}

.ccl .noi-dung-soan-thao a {
	color: var(--ccl-xanh);
	text-decoration: underline;
	text-decoration-color: rgba(var(--ccl-xanh-rgb), 0.35);
	text-underline-offset: 3px;
}

.ccl .noi-dung-soan-thao a:hover {
	color: var(--ccl-vang);
	text-decoration-color: var(--ccl-vang);
}

.ccl .noi-dung-soan-thao ul,
.ccl .noi-dung-soan-thao ol {
	padding-left: var(--kc-5);
}

.ccl .noi-dung-soan-thao li + li {
	margin-top: 7px;
}

/* Dấu đầu dòng màu vàng đồng thay cho chấm tròn mặc định. */
.ccl .noi-dung-soan-thao ul {
	padding-left: 0;
	list-style: none;
}

.ccl .noi-dung-soan-thao ul > li {
	position: relative;
	padding-left: var(--kc-5);
}

.ccl .noi-dung-soan-thao ul > li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 4px;
	width: 7px;
	height: 7px;
	background: var(--ccl-vang);
	border-radius: 50%;
}

.ccl .noi-dung-soan-thao ol > li::marker {
	color: var(--ccl-vang);
	font-weight: 700;
}

.ccl .noi-dung-soan-thao blockquote {
	margin-inline: 0;
	padding: var(--kc-4) var(--kc-5);
	background: var(--ccl-kem);
	border-left: 4px solid var(--ccl-vang);
	border-radius: 0 var(--bo-goc-nho) var(--bo-goc-nho) 0;
	color: var(--ccl-xanh-dam);
	font-size: 1.0625rem;
	font-style: italic;
}

.ccl .noi-dung-soan-thao blockquote p:last-child {
	margin-bottom: 0;
}

.ccl .noi-dung-soan-thao figure,
.ccl .noi-dung-soan-thao img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bo-goc);
}

.ccl .noi-dung-soan-thao figcaption {
	margin-top: var(--kc-2);
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
	font-style: italic;
	text-align: center;
}

.ccl .noi-dung-soan-thao table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.ccl .noi-dung-soan-thao th {
	padding: 11px 14px;
	background: var(--ccl-xanh);
	color: #fff;
	font-weight: 700;
	text-align: left;
}

.ccl .noi-dung-soan-thao td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--mau-vien);
}

.ccl .noi-dung-soan-thao tbody tr:nth-child(even) {
	background: var(--ccl-kem);
}

/* Khối mục lục tự sinh của giao diện cha. */
.ccl .muc-luc {
	padding: var(--kc-4) var(--kc-5);
	background: var(--ccl-kem);
	border: 1px solid rgba(var(--ccl-xanh-rgb), 0.12);
	border-radius: var(--bo-goc);
}

.ccl .muc-luc__tieu-de {
	margin: 0 0 var(--kc-3);
	color: var(--ccl-xanh);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ccl .muc-luc ol {
	margin: 0;
	padding-left: var(--kc-5);
	font-size: 0.9375rem;
}

/* =========================================================
   7. CHÂN BÀI VIẾT
   ========================================================= */

.ccl .bai-don__chan {
	margin-top: clamp(28px, 3.5vw, 44px);
	padding-top: var(--kc-5);
	border-top: 1px solid var(--mau-vien);
}

.ccl .danh-sach-the {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-2);
	align-items: center;
	margin-bottom: var(--kc-5);
}

.ccl .danh-sach-the__nhan {
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ccl .the-nho {
	padding: 5px 12px;
	background: var(--ccl-kem);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-goc-tron);
	color: var(--ccl-xanh);
	font-size: 0.8125rem;
	text-decoration: none;
}

.ccl .the-nho:hover {
	background: var(--ccl-xanh);
	border-color: var(--ccl-xanh);
	color: #fff;
}

.ccl .khoi-chia-se {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-2);
	align-items: center;
	margin-bottom: var(--kc-5);
}

.ccl .khoi-chia-se__nhan {
	margin-right: var(--kc-2);
	color: var(--mau-chu-nhat);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ccl .khoi-chia-se a,
.ccl .khoi-chia-se button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--ccl-kem);
	border: 1px solid var(--mau-vien);
	border-radius: 50%;
	color: var(--ccl-xanh);
}

.ccl .khoi-chia-se a:hover,
.ccl .khoi-chia-se button:hover {
	background: var(--ccl-xanh);
	border-color: var(--ccl-xanh);
	color: #fff;
	transform: none;
}

.ccl .hop-tac-gia {
	display: flex;
	gap: var(--kc-4);
	padding: var(--kc-5);
	background: var(--ccl-kem);
	border-radius: var(--bo-goc);
}

.ccl .hop-tac-gia__anh img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.ccl .hop-tac-gia__noi-dung h3 {
	margin: 0 0 6px;
	color: var(--ccl-xanh);
	font-size: 1.0625rem;
}

.ccl .hop-tac-gia__noi-dung p {
	margin: 0;
	color: var(--mau-chu-nhat);
	font-size: 0.875rem;
	line-height: 1.65;
}

/* Điều hướng bài trước - bài sau. */
.ccl .dieu-huong-bai {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kc-4);
	margin-top: clamp(28px, 3.5vw, 44px);
}

.ccl .dieu-huong-bai__muc {
	padding: var(--kc-4);
	background: #fff;
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-goc);
	color: var(--ccl-xanh);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	text-decoration: none;
}

.ccl .dieu-huong-bai__muc:hover {
	border-color: var(--ccl-xanh);
	box-shadow: var(--bong-2);
}

.ccl .dieu-huong-bai__muc small {
	display: block;
	margin-bottom: 5px;
	color: var(--ccl-vang);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ccl .dieu-huong-bai__sau {
	text-align: right;
}

/* Bài liên quan. */
.ccl .bai-lien-quan {
	margin-top: clamp(36px, 4.5vw, 60px);
	padding-top: clamp(28px, 3.5vw, 44px);
	border-top: 1px solid var(--mau-vien);
}

.ccl .bai-lien-quan .tieu-de-khoi {
	margin: 0 0 var(--kc-5);
	color: var(--ccl-xanh);
	font-size: 1.25rem;
	font-weight: 800;
}

/* Bài liên quan nằm trong cột chữ hẹp nên để hai cột cho vừa. */
.ccl .bai-lien-quan .luoi-bai {
	grid-template-columns: repeat(2, 1fr);
}

/* =========================================================
   8. TRANG TĨNH
   ========================================================= */

.ccl .trang-tinh__dau {
	margin-bottom: clamp(20px, 2.5vw, 32px);
	padding-bottom: var(--kc-4);
	border-bottom: 1px solid var(--mau-vien);
}

.ccl .trang-tinh__tieu-de {
	margin: 0;
	color: var(--ccl-xanh);
	font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.5rem);
	font-weight: 800;
	line-height: 1.22;
}

.ccl .trang-tinh__anh {
	margin: 0 0 var(--kc-5);
	overflow: hidden;
	border-radius: var(--bo-goc);
}

.ccl .trang-tinh__anh img {
	display: block;
	width: 100%;
	height: auto;
}

/* =========================================================
   8B. BIỂU MẪU ĐẶT HÀNG NHÚNG TRONG NỘI DUNG
   ========================================================= */

/*
 * Khối đặt hàng vốn chạy hết chiều ngang màn hình ở trang chủ. Khi dán mã ngắn
 * [ccl_dat_hang] vào một trang, nó nằm trong cột nội dung hẹp nên phải đổi
 * thành một thẻ bo góc gọn gàng thay vì một dải tràn viền.
 *
 * QUAN TRỌNG: mã ngắn nằm trong vùng .noi-dung-soan-thao nên toàn bộ kiểu chữ
 * của vùng soạn thảo đè lên khối này - tiêu đề bị đổi sang màu xanh đậm và mọc
 * gạch vàng bên trái, liên kết bị đổi sang màu xanh có gạch chân, danh sách mọc
 * chấm tròn vàng. Trên nền xanh đậm thì chữ chìm hẳn không đọc được.
 * Khối dưới đây trả lại đúng kiểu gốc của khối đặt hàng.
 */
.ccl .cot-noi-dung .ccl-dat-hang {
	padding: clamp(20px, 3vw, 32px);
	border-radius: var(--bo-goc);
}

.ccl .noi-dung-soan-thao .ccl-dat-hang h2 {
	margin-top: 0;
	padding-left: 0;
	border-left: 0;
	color: #fff;
}

.ccl .noi-dung-soan-thao .ccl-dat-hang a {
	color: #fff;
	text-decoration: none;
}

.ccl .noi-dung-soan-thao .ccl-dat-hang a:hover {
	color: var(--ccl-vang-nhat);
}

.ccl .noi-dung-soan-thao .ccl-dat-hang ul {
	padding-left: 0;
}

/* Bỏ chấm tròn vàng của vùng soạn thảo, cụm liên hệ đã có biểu tượng riêng. */
.ccl .noi-dung-soan-thao .ccl-dat-hang ul > li {
	padding-left: 0;
}

.ccl .noi-dung-soan-thao .ccl-dat-hang ul > li::before {
	display: none;
}

/* Trong khung biểu mẫu nền trắng thì trả lại màu chữ tối. */
.ccl .noi-dung-soan-thao .ccl-dat-hang__khung-form {
	color: var(--mau-chu);
}

.ccl .noi-dung-soan-thao .ccl-dat-hang__khung-form label {
	color: var(--ccl-xanh);
}

.ccl .cot-noi-dung .ccl-dat-hang .khung {
	padding-inline: 0;
}

/*
 * Ép một cột. Cột nội dung khi có cột bên chỉ còn khoảng 840px, chia đôi thì
 * mỗi bên hụt dưới 400px - ô địa chỉ và ô ghi chú bị bó lại rất khó nhập.
 */
.ccl .cot-noi-dung .ccl-dat-hang__trong {
	grid-template-columns: 1fr;
	gap: var(--kc-5);
}

/* Cụm liên hệ xếp ngang cho đỡ chiếm chiều cao khi đã một cột. */
.ccl .cot-noi-dung .ccl-dat-hang__lien-he {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--kc-4);
}

.ccl .cot-noi-dung .ccl-dat-hang__lien-he li {
	margin-bottom: 0;
}

/* =========================================================
   9. PHÂN TRANG KIỂU GOOGLE
   ========================================================= */

.ccl .phan-trang {
	margin-top: clamp(28px, 3.5vw, 44px);
}

.ccl .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ccl .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-goc-nho);
	color: var(--ccl-xanh);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.ccl .page-link:hover {
	border-color: var(--ccl-xanh);
	color: var(--ccl-vang);
}

.ccl .page-link.active {
	background: var(--ccl-xanh);
	border-color: var(--ccl-xanh);
	box-shadow: 0 2px 8px rgba(var(--ccl-xanh-rgb), 0.28);
	color: #fff;
	cursor: default;
}

.ccl .page-link.disabled {
	color: var(--mau-chu-nhat);
	cursor: default;
	opacity: 0.4;
}

.ccl .page-link--mui-ten {
	font-size: 1.25rem;
	line-height: 1;
}

.ccl .page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 40px;
	color: var(--mau-chu-nhat);
}

/* =========================================================
   10. MÀN HÌNH NHỎ
   ========================================================= */

@media (max-width: 1024px) {
	/*
	 * Dưới 1024px không đủ chỗ cho hai cột. Cột bên xuống dưới phần nội dung,
	 * và bỏ bám dính vì lúc này nó không còn nằm cạnh nội dung nữa.
	 */
	.ccl .khoi-noi-dung--sidebar-phai {
		grid-template-columns: 1fr;
		gap: clamp(28px, 4vw, 44px);
	}

	.ccl .cot-ben__trong {
		position: static;
	}

	.ccl .luoi-bai,
	.ccl .khoi-noi-dung--sidebar-phai .luoi-bai {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Máy tính bảng: ba hộp cột bên xếp ngang cho đỡ dài trang. */
@media (min-width: 761px) and (max-width: 1024px) {
	.ccl .cot-ben__trong {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}
}

@media (max-width: 640px) {
	.ccl .luoi-bai,
	.ccl .bai-lien-quan .luoi-bai,
	.ccl .dieu-huong-bai {
		grid-template-columns: 1fr;
	}

	/* Đảo chiều căn lề để hai thẻ điều hướng nhìn đồng nhất khi xếp dọc. */
	.ccl .dieu-huong-bai__sau {
		text-align: left;
	}

	.ccl .hop-tac-gia {
		flex-direction: column;
		padding: var(--kc-4);
	}

	.ccl .noi-dung-soan-thao {
		font-size: 1rem;
	}

	.ccl .noi-dung-soan-thao h2 {
		font-size: 1.3125rem;
	}

	/* Bảng dài tự cuộn ngang trong khung riêng, không đẩy vỡ trang. */
	.ccl .noi-dung-soan-thao table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* Đường dẫn phân cấp dài thì xuống dòng chứ không đẩy tràn ngang. */
	.ccl .duong-dan-phan-cap {
		font-size: 0.75rem;
		line-height: 1.7;
	}

	/* Tiêu đề bài dài trên máy hẹp: cho ngắt giữa từ để không tràn. */
	.ccl .bai-don__tieu-de,
	.ccl .trang-tinh__tieu-de,
	.ccl .tieu-de-trang {
		overflow-wrap: break-word;
	}

	/* Đầu trang lưu trữ căn trái cho hợp mắt trên màn hình hẹp. */
	.ccl .dau-trang-luu-tru {
		text-align: left;
	}

	.ccl .tieu-de-trang::after {
		left: 0;
		transform: none;
	}

	.ccl .mo-ta-trang {
		margin-inline: 0;
	}
}

/*
 * Máy rất hẹp: nới lại các khoảng đệm cho chữ có chỗ thở, và hai nút gọi -
 * Zalo trong cột bên xếp dọc để mỗi nút đủ rộng mà chạm.
 */
@media (max-width: 380px) {
	.ccl .cot-ben .widget,
	.ccl .widget-ccl-lien-he .widget__tieu-de,
	.ccl-hop-lien-he {
		padding-inline: var(--kc-3);
	}

	.ccl-hop-lien-he__nut {
		grid-template-columns: 1fr;
	}

	.ccl .the-bai__than {
		padding: var(--kc-3);
	}

	.ccl .hop-tac-gia,
	.ccl .muc-luc {
		padding: var(--kc-3);
	}

	.ccl .noi-dung-soan-thao blockquote {
		padding: var(--kc-3) var(--kc-4);
	}
}