/**
 * NHÁNH DỊCH VỤ — archive · chi tiết  (T-303 · T-304)
 *
 * Hai màn dùng chung bố cục 2 cột (cột danh mục 280 | nội dung), dải điểm mạnh
 * dưới banner, card dịch vụ và khối CTA — đi chung một file, cùng lý do với
 * `page/product.css`.
 *
 * Nguồn số đo: `docs/potaco-layout/service/POTACO_UI_SPEC_DANH_SACH_DICH_VU_PIXEL.md`
 * và `POTACO_UI_SPEC_SINGLE_SERVICE_PIXEL.md` (2026-09-09). Màu, cỡ chữ lấy TỪ
 * TOKEN: hai file pixel dùng navy #001E5A/#002466 trùng token, nhưng cam
 * #E85D04 của họ chỉ đạt ~3,6:1 với chữ trắng — dự án chuẩn hoá về
 * `--c-accent-strong` (#BF4E05, 4,6:1) ở mọi chỗ chữ trắng đè cam
 * (design-system §1.4). Container 1200 theo design-system, không 1360.
 *
 * ⚠️ Banner → nội dung: 40px do `components.css` §8b lo (`--hero-gap`). File này
 *    KHÔNG tự đệm trên cho khối đầu tiên dưới banner (CLAUDE.md §5).
 *
 * ⚠️ Theme không có `box-sizing: border-box` toàn cục — chỗ nào đặt `width` cố
 *    định kèm `padding` đều tự khai (bài học §20.7).
 */

/* =========================================================================
 * 1. BỐ CỤC CHUNG — cột danh mục + nội dung
 * ====================================================================== */

.service-layout {
	display: grid;
	grid-template-columns: var(--sidebar-w, 280px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-block: 0 48px;   /* đệm TRÊN là của dải điểm mạnh / banner */
}

.service-layout__content {
	min-width: 0;   /* chặn lưới con đẩy cột rộng ra ngoài container */
}

.service-layout__aside {
	min-width: 0;
}

/*
 * Trang chi tiết: cột bên chia HAI nhóm DOM (trên: danh mục + tư vấn · dưới:
 * tài liệu + dự án) để mobile chèn bài viết vào giữa. Ở PC cả hai nằm cột 1,
 * bài viết chiếm cột 2 kéo dài hai hàng.
 */
.service-layout--single {
	grid-template-rows: auto 1fr;
}

.service-layout--single .service-layout__aside--top    { grid-column: 1; grid-row: 1; }
.service-layout--single .service-layout__aside--bottom { grid-column: 1; grid-row: 2; }
.service-layout--single .service-layout__content       { grid-column: 2; grid-row: 1 / span 2; }

/*
 * Cột danh mục KHÔNG dính, KHÔNG giới hạn chiều cao — nay là luật gốc của
 * `.sidebar` (components.css §10, chốt 2026-09-19 sau khi Tin tức là nhánh thứ
 * ba dính bug "sidebar bị xén + thanh cuộn trong"); bản ghi đè riêng ở đây đã
 * xoá. Lệch ui-spec §10 ("sticky top 96") — đánh đổi có ý thức, chọn "thấy đủ".
 */

.sidebar--service {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (max-width: 1199px) {

	.service-layout {
		--sidebar-w: 240px;
	}
}

@media (max-width: 991px) {

	.service-layout,
	.service-layout--single {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: 24px;
		padding-block: 0 32px;
	}

	/*
	 * Thứ tự mobile theo spec pixel single-service §26 và list-service-sp.png:
	 * danh mục (+ tư vấn) → nội dung → tài liệu + dự án. `order` chỉ ăn trên
	 * con TRỰC TIẾP của lưới — cả ba đều là con trực tiếp, đã kiểm.
	 */
	.service-layout--single .service-layout__aside--top,
	.service-layout--single .service-layout__aside--bottom,
	.service-layout--single .service-layout__content {
		grid-column: auto;
		grid-row: auto;
	}

	.service-layout__aside--top    { order: 1; }
	.service-layout__content       { order: 2; }
	.service-layout__aside--bottom { order: 3; }
}

/* =========================================================================
 * 3. CỘT DANH MỤC DỊCH VỤ — `.cat-nav` dùng chung (components.css §10)
 *
 * CSS `.service-cats*` riêng của màn này đã xoá — C-17 v2, T-216.3
 * (2026-09-18): khách chốt một mẫu danh mục cho toàn site theo Sản phẩm.
 * Dịch vụ chỉ khác ở chỗ truyền `icon` từng bài.
 * ====================================================================== */

/* =========================================================================
 * 4. TRANG DANH SÁCH — toolbar · lưới · phân trang
 * ====================================================================== */

.service-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 24px;
}

.service-toolbar__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--c-heading);
}

/* Gạch nhấn 32×3 xanh dưới tiêu đề — spec pixel §11. */
.service-toolbar__heading::after {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-top: 8px;
	background: var(--c-primary-600, var(--c-primary));
}

.service-toolbar__filters {
	min-width: 0;
}

/* Chip lọc: viền mảnh theo layout (component chung không có viền). */
.service-toolbar .filter-chips__item {
	border: var(--border-w) solid var(--c-border);
	font-size: var(--fs-xs);
}

.service-toolbar .filter-chips__item.is-active {
	border-color: var(--c-primary);
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* Card dịch vụ — điều chỉnh so với `.card` chung theo layout 2026-09-09 */

.card--service {
	height: 100%;
	box-shadow: var(--shadow-sm);
}

/* Badge số: 40×40 góc trên trái SÁT MÉP, bo góc dưới phải, chữ trắng trên cam
   chuẩn hoá (#BF4E05, 4,6:1). Component chung để navy trên cam sáng + cách
   mép 12px — khác layout. */
.card--service .card__num {
	top: 0;
	left: 0;
	min-width: 40px;
	height: 40px;
	font-size: var(--fs-body);
	color: var(--c-text-invert);
	background: var(--c-accent-strong);
	border-radius: 0 0 var(--radius-md) 0;
}

.card--service .card__body {
	padding: 16px;
}

.card--service .card__title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
}

.card--service .card__desc {
	-webkit-line-clamp: 3;
	font-size: var(--fs-sm);
}

.card--service .card__tags {
	margin-top: 6px;
}

.card--service .card__tag {
	gap: 5px;
	align-items: center;
	padding: 4px 8px;
	font-size: 11px;
	color: var(--c-text);
	background: var(--c-bg-alt);
	border-radius: 5px;
}

.card--service .card__tag svg {
	width: 14px;
	height: 14px;
	color: var(--c-primary-700, var(--c-primary));
}

/* "XEM CHI TIẾT →" góc dưới PHẢI, chữ hoa, đổi cam khi hover card. */
.card--service .card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-end;
	margin-top: auto;
	padding-top: 4px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-primary-700, var(--c-primary));
}

.card--service .card__link svg {
	width: 16px;
	height: 16px;
}

@media (hover: hover) and (pointer: fine) {

	.card--service:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-md);
	}

	.card--service:hover .card__link {
		color: var(--c-accent-hover);
		text-decoration: none;
	}
}

/* Biến thể compact — khối "Dịch vụ liên quan" (trang chi tiết). */
.card--service-compact .card__body {
	gap: 6px;
	padding: 12px;
}

.card--service-compact .card__title {
	font-size: var(--fs-sm);
}

.card--service-compact .card__link {
	align-self: flex-start;
	text-transform: none;
	font-size: var(--fs-xs);
}

.service-list .pagination {
	margin: 24px 0 8px;
}

@media (max-width: 991px) {

	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Chip xuống hàng riêng, cuộn ngang được (spec 5-frontend §5). */
	.service-toolbar__filters {
		flex: 1 0 100%;
		overflow-x: auto;
	}

	.service-toolbar .filter-chips {
		flex-wrap: nowrap;
		padding-bottom: 4px;
	}
}

@media (max-width: 767px) {

	.service-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.service-toolbar .filter-chips {
		flex-wrap: wrap;
	}

	.service-toolbar__filters {
		overflow: visible;
	}
}

@media (max-width: 479px) {

	.card--service .card__body {
		padding: 14px;
	}
}

/* =========================================================================
 * 5. CAM KẾT TỪ POTACO — full-width dưới lưới (block/service-commitments)
 * ====================================================================== */

.service-commit {
	margin-bottom: 24px;
}

.service-commit__inner {
	display: grid;
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	gap: 28px;
	align-items: center;
	padding: 28px;
	background: var(--c-bg-alt);
	border-radius: var(--radius-lg);
}

.service-commit__title {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--c-heading);
}

.service-commit__desc {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--c-text-muted);
}

.service-commit__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Bug #18 end-user testing 2026-09-18: icon 5 thẻ LỆCH HÀNG. Bản cũ
 * `justify-content: center` căn cả cụm icon+nhãn vào giữa thẻ, nên thẻ nhãn
 * 2 dòng đẩy icon lên ~10px so với thẻ nhãn 1 dòng. Sửa: icon bám mép trên
 * (`flex-start`) và nhãn LUÔN chiếm hộp đúng 2 dòng (`min-height` bên dưới) —
 * hàng icon cùng toạ độ ở mọi thẻ, 5 thẻ vẫn cùng chiều cao.
 */
.service-commit__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 100px;
	padding: 12px 8px;
	text-align: center;
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
}

.service-commit__icon {
	display: inline-flex;
	width: 30px;
	height: 30px;
	color: var(--c-primary-700, var(--c-primary));
}

.service-commit__icon svg,
.service-commit__img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.service-commit__label {
	/* Hộp nhãn đúng 2 dòng (2 × 1.35em) dù chữ 1 dòng — xem chú thích ở
	   `.service-commit__item`. `text-wrap: balance` chia "Chất lượng vượt trội"
	   thành 2 dòng cân, không mồ côi một chữ; trình duyệt cũ bỏ qua, vô hại. */
	min-height: calc(2 * 1.35em);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.35;
	color: var(--c-heading);
	text-wrap: balance;
}

@media (max-width: 991px) {

	.service-commit__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.service-commit__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.service-commit__inner {
		padding: 20px 16px;
	}

	/* SP: 5 mục xếp DỌC, icon trái + chữ phải (list-service-sp.png). */
	.service-commit__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.service-commit__item {
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		min-height: 0;
		padding: 10px 14px;
		text-align: left;
	}

	/* Hàng ngang: icon và nhãn cùng một dòng, không cần giữ hộp 2 dòng nữa. */
	.service-commit__label {
		min-height: 0;
		text-wrap: initial;
	}
}

/* =========================================================================
 * 6. TRANG CHI TIẾT — bài viết
 * ====================================================================== */

/* H1 banner trang chi tiết in hoa như layout ("ĐIỆN ĐỘNG LỰC"); trang danh sách
   không cần vì tiêu đề đã nhập hoa trong option. Banner đứng NGOÀI `<main>` nên
   bám theo class body. */
.single-service .page-hero__title {
	text-transform: uppercase;
}

.service-section {
	margin-bottom: 32px;
}

.service-section:last-child {
	margin-bottom: 0;
}

/* Tiêu đề section: H2 28/36 + gạch nhấn 32×3 xanh bên phải chữ (layout vẽ
   gạch NGANG HÀNG với tiêu đề, không nằm dưới). */
.service-section__title,
.service-article .single-block__title,
.service-related__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--c-heading);
}

.service-section__title::after,
.service-article .single-block__title::after,
.service-related__title::after {
	content: "";
	display: block;
	flex: 0 0 32px;
	width: 32px;
	height: 3px;
	margin: 0;
	background: var(--c-accent);
}

/* Section chung (gallery, FAQ) trong bài dịch vụ dùng nhịp 32px như các section
   riêng, không phải `--section-gap` 80px của trang chi tiết dự án. */
.service-article .single-block {
	margin-bottom: 32px;
}

.service-article .single-block:last-child {
	margin-bottom: 0;
}

.service-section__lead {
	margin: 0 0 16px;
	color: var(--c-text-muted);
}

.service-section__content {
	margin-bottom: 20px;
	color: var(--c-text);
}

.service-section__content > :first-child { margin-top: 0; }
.service-section__content > :last-child  { margin-bottom: 0; }

/* ---- 4 thẻ đặc điểm ---- */

.service-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 120px;
	padding: 16px 12px;
	text-align: center;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
}

.service-features__icon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	margin-bottom: 4px;
	color: var(--c-primary-700, var(--c-primary));
}

.service-features__icon svg,
.service-features__img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.service-features__title {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--c-heading);
}

.service-features__desc {
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--c-text-muted);
}

/* ---- Phạm vi công việc: 55% danh sách | 45% ảnh 16:10 ---- */

@media (min-width: 992px) {

	.split--scope {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		gap: 24px;
		align-items: start;
	}
}

.split--scope .split__img {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-md);
}

.service-scope {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: scope;
}

.service-scope__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 28px;
	color: var(--c-text);
	counter-increment: scope;
}

/* Số 01, 02… trong vòng tròn cam 28px chữ trắng — cam chuẩn hoá vì có chữ đè. */
.service-scope__item::before {
	content: counter(scope, decimal-leading-zero);
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	color: var(--c-text-invert);
	background: var(--c-accent-strong);
	border-radius: 50%;
}

/* ---- Ứng dụng: 4 thẻ ảnh 4:3 ---- */

.service-apps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-apps__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--border-w) solid var(--c-border);
	border-radius: 6px;
}

.service-apps__media {
	display: block;
}

.service-apps__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.service-apps__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
}

.service-apps__title {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.35;
	color: var(--c-heading);
}

.service-apps__desc {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* ---- Hình ảnh thi công: 4 ảnh/hàng 16:9 (lưới lightbox C-09) ---- */

.service-article .lightbox-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.service-article .lightbox-grid__item {
	border-radius: 6px;
}

.service-article .lightbox-grid__img {
	aspect-ratio: 16 / 9;
}

/* ---- FAQ: số thứ tự trong ô vuông xanh nhạt ---- */

.service-article .accordion__item {
	counter-increment: faq;
}

.service-article .accordion {
	counter-reset: faq;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.service-article .accordion__summary {
	display: flex;
	align-items: center;
	/* Component chung đặt `space-between` cho cặp (chữ, dấu +); có thêm ô số
	   `::before` thì chữ bị đẩy ra giữa. Canh trái, dấu + tự đẩy sang phải. */
	justify-content: flex-start;
	gap: 12px;
	padding: 14px 12px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
}

.service-article .accordion__summary::after {
	margin-left: auto;
}

.service-article .accordion__summary::before {
	content: counter(faq);
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-weight: var(--fw-bold);
	color: var(--c-primary);
	background: var(--c-primary-50);
	border-radius: var(--radius-sm);
}

.service-article .accordion__body {
	padding: 0 12px 16px 52px;
	font-size: var(--fs-sm);
}

@media (max-width: 991px) {

	.service-features,
	.service-apps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-article .lightbox-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.service-features {
		gap: 8px;
	}

	.service-features__item {
		min-height: 110px;
		padding: 12px;
	}

	.service-article .lightbox-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-article .accordion__summary {
		padding: 14px 8px;
	}

	.service-article .accordion__body {
		padding-left: 48px;
		font-size: var(--fs-sm);
	}
}

/* =========================================================================
 * 7. CỘT BÊN TRANG CHI TIẾT — tư vấn · tài liệu · dự án tiêu biểu
 * ====================================================================== */

/* Box tư vấn `.service-consult` đã chuyển sang `components.css` §13 (T-501):
   dùng ở cả Dịch vụ lẫn Tin tức nên không còn là CSS riêng của trang này. */

/* ---- Tài liệu (single/document-list, biến thể sidebar) ---- */

.doc-side {
	padding: 16px;
	box-shadow: var(--shadow-sm);
}

.doc-side__title,
.side-projects__title {
	margin: 0 0 8px;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--c-heading);
}

.doc-side__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-side__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 10px 0;
	border-bottom: var(--border-w) solid var(--c-border);
}

.doc-side__item:last-child {
	border-bottom: 0;
}

/* Icon tệp 28px màu đỏ PDF, chữ phần mở rộng đè nhỏ bên dưới. */
.doc-side__icon {
	position: relative;
	flex: 0 0 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 36px;
	color: #C62828;
}

.doc-side__icon svg {
	width: 28px;
	height: 28px;
}

.doc-side__ext {
	position: absolute;
	right: -2px;
	bottom: 0;
	padding: 0 3px;
	font-size: 8px;
	font-weight: var(--fw-bold);
	line-height: 12px;
	color: var(--c-text-invert);
	background: #C62828;
	border-radius: 2px;
}

.doc-side__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.doc-side__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	line-height: 1.4;
	color: var(--c-heading);
}

.doc-side__meta {
	font-size: 11px;
	color: var(--c-text-muted);
}

/* Nút tải: hộp chạm 44×44 (WCAG 2.5.8), icon 18px. */
.doc-side__download {
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	color: var(--c-primary);
	border-radius: var(--radius-sm);
}

.doc-side__download svg {
	width: 18px;
	height: 18px;
}

@media (hover: hover) and (pointer: fine) {

	.doc-side__download:hover {
		color: var(--c-accent-hover);
		background: var(--c-bg-alt);
	}
}

.doc-side__download:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: -2px;
}

/* ---- Dự án tiêu biểu ---- */

.side-projects {
	padding: 16px;
	box-shadow: var(--shadow-sm);
}

.side-projects__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	color: var(--c-heading);
	text-decoration: none;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	transition: var(--transition);
}

.side-projects__card + .side-projects__card {
	margin-top: 12px;
}

.side-projects__media {
	display: block;
	overflow: hidden;
	border-radius: 6px;
}

.side-projects__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.side-projects__name {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	line-height: 1.4;
}

.side-projects__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	color: var(--c-primary-700, var(--c-primary));
}

.side-projects__more svg {
	width: 16px;
	height: 16px;
}

@media (hover: hover) and (pointer: fine) {

	.side-projects__card:hover {
		box-shadow: var(--shadow-md);
	}

	.side-projects__card:hover .side-projects__more {
		color: var(--c-accent-hover);
	}
}

/* =========================================================================
 * 8. DỊCH VỤ LIÊN QUAN — full-width dưới hai cột
 * ====================================================================== */

.service-related {
	margin-bottom: 24px;
}

.service-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.service-related__title {
	margin: 0;
}

.service-related__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-primary-700, var(--c-primary));
	text-decoration: none;
}

.service-related__all svg {
	width: 16px;
	height: 16px;
}

@media (hover: hover) and (pointer: fine) {

	.service-related__all:hover {
		color: var(--c-accent-hover);
		text-decoration: underline;
	}
}

.service-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 991px) {

	.service-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}