/* ==========================================================================
   TẦNG 3 — COMPONENTS
   Khối độc lập, tái dùng ở mọi trang. Không phụ thuộc vị trí hay trang cụ thể.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography nội dung WordPress/Astra
   Astra sinh rule có độ ưu tiên cao hơn thẻ HTML thuần. Khối tích hợp này giữ
   token của Design System làm nguồn duy nhất, không dùng cưỡng bức độ ưu tiên hoặc Page ID.
   Các component dst-* nằm sau vẫn được phép định nghĩa biến thể có chủ đích.
   -------------------------------------------------------------------------- */
.entry-content :where(h1, h2),
body.single-post header.entry-header .entry-title,
body.search .ast-container .ast-archive-description h1.page-title,
body.archive .ast-container .ast-archive-description h1.page-title,
body.error404 h1.page-title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
}

.entry-content :where(h3, h4, h5, h6) {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
}

.entry-content :where(h1),
body.single-post header.entry-header .entry-title,
body.search .ast-container .ast-archive-description h1.page-title,
body.archive .ast-container .ast-archive-description h1.page-title,
body.error404 h1.page-title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.entry-content :where(h2) {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.entry-content :where(h3) {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.entry-content :where(h4) {
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
}

.entry-content :where(h5) {
	font-size: var(--fs-h5);
	line-height: var(--lh-tight);
}

.entry-content :where(h6) {
	font-size: var(--fs-h6);
	line-height: var(--lh-tight);
}

body.search h2.entry-title,
body.archive h2.entry-title {
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h3);
}


/* --------------------------------------------------------------------------
   Nhãn tiêu đề (eyebrow) + tiêu đề section
   -------------------------------------------------------------------------- */
.dst-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-2);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-orange-strong);
}

.dst-section--navy .dst-eyebrow {
	color: var(--c-orange);
}

.dst-eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: currentColor;
	border-radius: var(--r-pill);
}

.dst-h1,
.dst-h2 {
	text-align: center;
	margin-bottom: var(--sp-3);
}

.dst-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.dst-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }

.dst-lead {
	max-width: 68ch;
	margin-inline: auto;
	margin-bottom: var(--sp-6);
	text-align: center;
	font-size: var(--fs-body);
	color: var(--c-muted);
}

.dst-note {
	font-size: var(--fs-body);
	color: var(--c-muted);
}

/* Đảo màu trên nền navy */
.dst-section--navy {
	color: var(--c-on-navy-muted);
}

.dst-section--navy .dst-h1,
.dst-section--navy .dst-h2,
.dst-section--navy h1,
.dst-section--navy h2,
.dst-section--navy h3 {
	color: var(--c-on-navy);
}

/* Chu thuong tren nen navy: dung KE THUA, khong liet ke the (p, li).
   Liet ke the se quet ca component co mau rieng (vd .dst-eyebrow cam)
   va lam mat mau do - do la loi logic, khong phai loi hien thi. */
.dst-section--navy .dst-lead,
.dst-section--navy .dst-note,
.dst-section--navy .dst-card-desc,
.dst-section--navy .dst-counter-label {
	color: var(--c-on-navy-muted);
}

/* Nhưng thẻ là "đảo ngược" (nền sáng riêng) nên phần mô tả bên trong thẻ
   phải giữ màu muted gốc, kể cả khi thẻ nằm trong section navy. */
.dst-section--navy .dst-card .dst-card-desc {
	color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   SẮC CAM THEO NỀN
   Mặc định (nền sáng) mọi chữ cam dùng --c-orange-strong để đạt AA.
   Trên nền navy thì đảo về --c-orange vì lúc đó cam sáng mới đủ tương phản
   (5,86:1) và giữ đúng nhận diện.
   -------------------------------------------------------------------------- */
.dst-section--navy .dst-eyebrow,
.dst-section--navy .dst-card-eyebrow,
.dst-section--navy .dst-counter-value,
.dst-section--navy .dst-stars,
.dst-section--navy .dst-card-more:hover,
.dst-section--navy .dst-svc-mini:hover {
	color: var(--c-orange);
}

/* Thẻ là "đảo ngược" (nền sáng riêng) nên bên trong thẻ vẫn dùng cam đậm,
   kể cả khi thẻ nằm trong section navy. */
.dst-section--navy .dst-card .dst-card-eyebrow,
.dst-section--navy .dst-card .dst-card-more:hover,
.dst-section--navy .dst-testimonial .dst-stars {
	color: var(--c-orange-strong);
}

/* Lien ket tren nen navy: mau link mac dinh (#1E4A72) khong du tuong phan.
   Dao ve trang, hover cam. */
.dst-section--navy a {
	color: var(--c-white);
	text-decoration-color: var(--c-on-navy-border);
}

.dst-section--navy a:hover,
.dst-section--navy a:focus {
	color: var(--c-orange);
}

/* --------------------------------------------------------------------------
   Nút
   -------------------------------------------------------------------------- */
.dst-btn-cta .wp-block-button__link,
.dst-btn-outline .wp-block-button__link,
.dst-btn-ghost .wp-block-button__link,
.dst-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--control-h);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-btn);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}

/* CTA cam đặc */
.dst-btn-cta .wp-block-button__link {
	background-color: var(--c-orange-strong);
	color: var(--c-white);
}

.dst-btn-cta .wp-block-button__link:hover,
.dst-btn-cta .wp-block-button__link:focus {
	background-color: var(--c-orange);
	color: var(--c-white);
}

/* Outline */
.dst-btn-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--c-navy);
	border-color: var(--c-navy);
}

.dst-btn-outline .wp-block-button__link:hover,
.dst-btn-outline .wp-block-button__link:focus {
	background-color: var(--c-navy);
	color: var(--c-white);
}

/* Outline trên nền navy -> viền trắng */
.dst-section--navy .dst-btn-outline .wp-block-button__link {
	color: var(--c-on-navy);
	border-color: var(--c-on-navy);
}

.dst-section--navy .dst-btn-outline .wp-block-button__link:hover,
.dst-section--navy .dst-btn-outline .wp-block-button__link:focus {
	background-color: var(--c-white);
	color: var(--c-navy);
}

/* Ghost */
.dst-btn-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--c-navy);
}

.dst-btn-ghost .wp-block-button__link:hover {
	background-color: var(--c-surface);
}

/* Nhóm nút: mobile full-width, desktop tự co */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
}

@media (max-width: 767.98px) {
	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   NGUYEN TAC "DAO NGUOC" (island)
   Component co nen sang rieng phai TU DAT mau chu, khong phu thuoc mau
   ke thua tu section. Nho vay dat card/form vao section navy hay trang
   deu hien thi dung, khong can rule ghi de theo ngu canh.
   -------------------------------------------------------------------------- */
.dst-card,
.dst-testimonial,
.dst-form-card,
.dst-area-card,
.dst-contact-card,
.dst-aside-box,
.dst-faq-item,
.dst-table,
.dst-svc-mini {
	color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.dst-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--sp-5);
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card);
	box-shadow: var(--sh-2);
	transition: transform var(--t-base), box-shadow var(--t-base);
}

/* Card la mot lien ket khoi: khong dung gach chan cua lien ket trong bai viet.
   Selector co do uu tien du de thang rule Astra ma khong can !important. */
a.dst-card[href] {
	color: var(--c-ink);
	text-decoration: none;
}

a.dst-card[href]:hover,
a.dst-card[href]:focus-visible {
	text-decoration: none;
}

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

.dst-card-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

.dst-card-desc {
	margin: 0;
	font-size: var(--fs-body);
	color: var(--c-muted);
}

.dst-card-img,
.dst-card-link {
	display: block;
}

.dst-card-img {
	margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
	border-radius: var(--r-img) var(--r-img) 0 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.dst-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dst-card-more {
	margin-top: auto;
	padding-top: var(--sp-4);
	font-weight: var(--fw-semibold);
	color: var(--c-link);
}

.dst-card-more:hover {
	color: var(--c-orange-strong);
}

.dst-card--project .dst-card-img {
	aspect-ratio: 4 / 3;
}

/* --- Card: bien the co anh (dung cho luoi "lien quan") ---------------- */
.dst-card--media {
	padding: 0;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.dst-card-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--c-surface);
}

.dst-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cho giu cho anh: do shortcode caios_acf_card quyet dinh co render hay khong
   (thuoc tinh fallback). CSS khong doan trang thai du lieu. */
.dst-card-media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-3);
	color: var(--c-muted);
	font-size: var(--fs-body-sm);
	font-style: italic;
	text-align: center;
}

.dst-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--sp-5);
}

.dst-card-eyebrow {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-orange-strong);
}

/* --- Card: bien the dich vu ------------------------------------------- */
.dst-card--service .dst-card-body {
	padding: var(--sp-4) var(--sp-5);
}

/* --- Card: bien the giu cho (chua co du lieu that) -------------------- */
.dst-card--ph {
	border-style: dashed;
	background: var(--c-surface);
	box-shadow: none;
}

.dst-card--ph:hover {
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Lien ket dich vu chinh (trong doan van)
   -------------------------------------------------------------------------- */
.dst-primary-service-link {
	font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Mang xa hoi (footer)
   -------------------------------------------------------------------------- */
.dst-social {
	margin-top: var(--sp-4);
}

.dst-social-title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-orange);
}

.dst-social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}

.dst-social-logo {
	display: inline-flex;
	box-sizing: border-box;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 7px;
	border: 1px solid var(--c-on-navy-border);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.07);
	overflow: hidden;
	transition: transform var(--t-base), opacity var(--t-base);
}

/* Icon dùng chung file với floating actions — 1 nguồn duy nhất.
   Không nhúng SVG vào markup widget nữa. */
.dst-social-logo::before {
	content: "";
	width: 100%;
	height: 100%;
	background: center / contain no-repeat;
}

.dst-social-logo--facebook::before {
	background-image: url("../icons/facebook.svg");
}

.dst-social-logo--zalo::before {
	background-image: url("../icons/zalo.svg");
}

.dst-social-logo:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Ảnh giữ chỗ (khi chưa có ảnh thật)
   -------------------------------------------------------------------------- */
.dst-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px dashed var(--c-border);
	border-radius: var(--r-img);
	color: var(--c-muted);
	font-size: var(--fs-body-sm);
	font-style: italic;
	text-align: center;
}

.dst-img-placeholder--hero { min-height: 300px; aspect-ratio: 4 / 3; }
.dst-img-placeholder--card { min-height: 160px; aspect-ratio: 4 / 3; }

.dst-section--navy .dst-img-placeholder {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--c-on-navy-border);
	color: var(--c-on-navy-muted);
}

/* --------------------------------------------------------------------------
   Nhãn dữ liệu chờ xác nhận
   -------------------------------------------------------------------------- */
.dst-badge-cho-xac-nhan {
	display: inline-block;
	padding: 2px var(--sp-2);
	background: #fff6e5;
	border: 1px solid #f0d9a8;
	border-radius: var(--r-sm);
	color: var(--c-orange-strong);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Trạng thái rỗng do logic dữ liệu PHP xác định
   -------------------------------------------------------------------------- */
.dst-empty-state {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--sp-5);
	border: 1px dashed var(--c-border);
	border-radius: var(--r-card);
	background: var(--c-surface);
	color: var(--c-muted);
	font-size: var(--fs-body-sm);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Danh sách có dấu tick
   -------------------------------------------------------------------------- */
.dst-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dst-check-list li {
	position: relative;
	padding-left: var(--sp-6);
	margin-top: var(--sp-3);
}

.dst-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 18px;
	height: 10px;
	border-left: 2px solid var(--c-orange);
	border-bottom: 2px solid var(--c-orange);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Chip / badge nhóm
   -------------------------------------------------------------------------- */
.dst-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dst-chips li,
.dst-chip {
	margin: 0;
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface);
	border: var(--bd-1);
	border-radius: var(--r-pill);
	font-size: var(--fs-body-sm);
	color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Bảng (bảng giá) — khung cuộn ngang, header dính
   -------------------------------------------------------------------------- */
.dst-table {
	border: var(--bd-1);
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--c-white);
}

.dst-table-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-navy);
	color: var(--c-on-navy);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
}

/* Vùng cuộn: bắt buộc để bảng rộng đọc được trên mobile. */
.dst-table-scroll {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.dst-table-scroll table {
	min-width: 900px;
	font-size: var(--fs-table);
	border-collapse: separate;
	border-spacing: 0;
}

/* Biến thể bảng nhiều cột (bảng giá chi tiết): cần rộng hơn mặc định.
   Đặt .dst-table--wide trên KHUNG .dst-table, không sửa rule gốc. */
.dst-table--wide .dst-table-scroll table {
	min-width: 1200px;
}

.dst-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: var(--z-raised);
	background: var(--c-surface);
	color: var(--c-navy);
	font-size: var(--fs-caption);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	white-space: nowrap;
}

.dst-table-scroll th,
.dst-table-scroll td {
	padding: var(--sp-2) var(--sp-3);
	border-right: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}

.dst-table-scroll tbody tr:nth-child(even) td {
	background: #fbfcfe;
}

.dst-table-title {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
}

.dst-table-meta {
	font-size: var(--fs-caption);
	color: var(--c-on-navy-muted);
}

/* Dong nhom / dong tong / dong ghi chu trong bang gia.
   Dung !important vi phai thang rule soc chan-le o tren (cung do uu tien). */
.dst-table-group td {
	background: var(--c-surface) !important;
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

.dst-table-total td {
	background: #fff6e5 !important;
	font-weight: var(--fw-bold);
	color: var(--c-navy);
}

.dst-table-note td {
	font-size: var(--fs-body-sm);
	color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Accordion / FAQ
   -------------------------------------------------------------------------- */
.dst-faq-item {
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card);
	margin-bottom: var(--sp-3);
	overflow: hidden;
}

.dst-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: var(--tap-min);
	padding: var(--sp-4) var(--sp-5);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-body);
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

.dst-faq-item > summary::-webkit-details-marker { display: none; }

.dst-faq-item > summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--c-orange);
	border-bottom: 2px solid var(--c-orange);
	transform: rotate(45deg);
	transition: transform var(--t-base);
}

.dst-faq-item[open] > summary::after {
	transform: rotate(-135deg);
}

.dst-faq-item > *:not(summary) {
	padding: 0 var(--sp-5) var(--sp-4);
	margin: 0;
	color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.dst-breadcrumb {
	/* Nen body do Astra dat la navy; breadcrumb thuoc vung noi dung nen
	   phai co nen trang de doc duoc. */
	background: var(--c-white);
	/* CHI padding doc (nhip noi bo cua component). KHONG co padding ngang:
	   gutter mep ngoai thuoc ve `.dst-container` boc ben ngoai - MOT nguon
	   duy nhat. Truoc 28/07 o day co `padding-inline: var(--pad-x)` con sot
	   lai tu thoi breadcrumb la markup go tay trong noi dung (chua co
	   container boc). Sau khi breadcrumb chuyen sang tu sinh bang PHP (G7.2,
	   luon co `.dst-container`), no thanh GUTTER DOI: 24px + 24px = 48px,
	   lam dong breadcrumb thut vao sau hon moi phan tu khac. */
	padding-block: var(--sp-3);
	font-size: var(--fs-body-sm);
	color: var(--c-muted);
}

.dst-breadcrumb p { margin: 0; }

.dst-breadcrumb a[href] {
	color: var(--c-muted);
	text-decoration: none;
}

.dst-breadcrumb a[href]:hover,
.dst-breadcrumb a[href]:focus-visible {
	color: var(--c-orange);
}

/* --------------------------------------------------------------------------
   Mục lục (TOC) — thanh dính
   -------------------------------------------------------------------------- */
.dst-toc-bar {
	position: sticky;
	/* Xếp ngay dưới header dính (#masthead) - chiều cao thật do
	   header-height.js đo và ghi vào --header-h, không hard-code số cố định
	   vì top bar có thể xuống dòng ở mobile. */
	top: var(--header-h, 0px);
	z-index: var(--z-sticky);
	background: var(--c-white);
	border-bottom: var(--bd-1);
	box-shadow: var(--sh-1);
}

.dst-toc-toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--sp-2) 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

.dst-toc-toggle-label {
	flex: 1;
	text-align: left;
}

.dst-toc-toggle-icon {
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--c-orange);
	border-bottom: 2px solid var(--c-orange);
	transform: rotate(45deg);
	transition: transform var(--t-base);
}

.dst-toc-toggle[aria-expanded="true"] .dst-toc-toggle-icon {
	transform: rotate(-135deg);
}

/* Panel mục lục: mặc định đóng, JS thêm --open khi bấm nút.
   Trạng thái nằm ở class có namespace dst-*, không dùng class chung. */
.dst-toc-panel {
	display: none;
	padding-bottom: var(--sp-4);
}

.dst-toc-panel--open {
	display: block;
}

.dst-toc {
	display: grid;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.dst-toc { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
	.dst-toc { grid-template-columns: repeat(3, 1fr); }
}

.dst-toc li { margin: 0; }

.dst-toc-link {
	display: block;
	padding: var(--sp-2) 0;
	font-size: var(--fs-body-sm);
	color: var(--c-link);
}

.dst-toc-link:hover { color: var(--c-orange-strong); }

/* Cuộn mượt tới mỏ neo, chừa chỗ cho thanh dính (header + top bar) */
html { scroll-behavior: smooth; }

:target,
.dst-h2 {
	scroll-margin-top: calc(var(--header-h, 0px) + var(--sp-4));
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.dst-form-card {
	padding: var(--sp-5);
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card);
	box-shadow: var(--sh-2);
}

.dst-form-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

/* Thẻ form là bề mặt sáng độc lập, kể cả khi nằm trong section nền navy. */
.dst-form-card .dst-form-title {
	color: var(--c-navy);
}

.dst-form-sub {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-body-sm);
	color: var(--c-muted);
}

.dst-form-secure {
	margin-top: var(--sp-3);
	font-size: var(--fs-body-sm);
	color: var(--c-muted);
	text-align: center;
}

/* Fluent Forms — chuẩn hoá theo token */
.dst-form-card .ff-el-input--content input[type="text"],
.dst-form-card .ff-el-input--content input[type="email"],
.dst-form-card .ff-el-input--content input[type="tel"],
.dst-form-card .ff-el-input--content input[type="number"],
.dst-form-card .ff-el-input--content select,
.dst-form-card .ff-el-input--content textarea {
	min-height: var(--control-h);
	padding: var(--sp-3);
	border: var(--bd-1);
	border-radius: var(--r-btn);
	font-family: var(--font-body);
	font-size: 16px; /* >=16px để iOS không tự zoom khi focus */
	color: var(--c-ink);
	background: var(--c-white);
	box-shadow: var(--sh-1);
}

.dst-form-card textarea {
	min-height: 120px;
	resize: vertical;
}

.dst-form-card .ff-el-input--label label {
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
	margin-bottom: var(--sp-1);
}

.dst-form-card .ff-el-is-required label::after,
.dst-form-card .ff-el-input--label.ff-el-is-required label:after {
	color: var(--c-orange);
}

.dst-form-card form[class*="fluent_form_"] .ff-btn-submit:not(.ff_btn_no_style) {
	width: 100%;
	min-height: var(--control-h);
	padding-block: var(--sp-3);
	white-space: normal;
	line-height: var(--lh-tight);
	background: var(--c-orange-strong);
	border: 0;
	border-radius: var(--r-btn);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	transition: background-color var(--t-base);
}

.dst-form-card form[class*="fluent_form_"] .ff-btn-submit:not(.ff_btn_no_style):hover {
	background: var(--c-navy);
	color: var(--c-white);
}

/* Form 2 cột từ tablet trở lên */
@media (min-width: 768px) {
	.dst-form-card .ff-t-cell { padding-inline: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   Bước quy trình (timeline)
   -------------------------------------------------------------------------- */
.dst-process-step {
	text-align: center;
}

.dst-process-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--sp-3);
	background: var(--c-orange-strong);
	border-radius: var(--r-pill);
	/* Chữ trắng trên cam đậm đạt 5,19:1 — WCAG AA. */
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	box-shadow: 0 0 0 6px rgba(240, 123, 29, 0.14);
}

/* --------------------------------------------------------------------------
   Đếm số / trust bar
   -------------------------------------------------------------------------- */
.dst-counter { text-align: center; }

.dst-counter-value {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	color: var(--c-orange-strong);
}

.dst-counter-label {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-body-sm);
	color: var(--c-muted);
}

.dst-section--navy .dst-counter-label { color: var(--c-on-navy-muted); }

/* --------------------------------------------------------------------------
   Đánh giá khách hàng
   -------------------------------------------------------------------------- */
.dst-testimonial {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--sp-5);
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card);
	box-shadow: var(--sh-2);
}

.dst-stars {
	color: var(--c-orange-strong);
	letter-spacing: 0.1em;
	margin-bottom: var(--sp-3);
}

.dst-testi-quote {
	flex: 1;
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-body);
	color: var(--c-ink);
}

.dst-testi-foot {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: var(--bd-1);
}

.dst-testi-avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	background: var(--c-surface);
	object-fit: cover;
}

.dst-testi-avatar.wp-block-image {
	margin: 0;
	overflow: hidden;
}

.dst-testi-avatar.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dst-testi-name {
	display: block;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

.dst-testi-role,
.dst-testi-meta {
	display: block;
	font-size: var(--fs-body-sm);
	color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Khu vực phục vụ
   -------------------------------------------------------------------------- */
.dst-area-card {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   Liên hệ
   -------------------------------------------------------------------------- */
.dst-contact-card {
	padding: var(--sp-5);
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card);
}

.dst-contact-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.dst-cc-ic {
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-surface);
	border-radius: var(--r-pill);
	color: var(--c-orange);
}

.dst-cc-title { font-weight: var(--fw-semibold); color: var(--c-navy); }
.dst-cc-sub   { font-size: var(--fs-body-sm); color: var(--c-muted); }

/* --------------------------------------------------------------------------
   Bản đồ
   -------------------------------------------------------------------------- */
.dst-map {
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
	border: var(--bd-1);
	border-radius: var(--r-card);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.dst-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 992px) {
	.dst-map {
		aspect-ratio: 21 / 9;
	}
}

/* --------------------------------------------------------------------------
   Cột phụ bài viết
   -------------------------------------------------------------------------- */
.dst-aside-box {
	padding: var(--sp-4);
	background: var(--c-surface);
	border: var(--bd-1);
	border-radius: var(--r-card);
}

.dst-aside-h {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	color: var(--c-navy);
}

.dst-article-aside { align-self: start; }

@media (min-width: 992px) {
	.dst-article-aside {
		position: sticky;
		top: 90px;
	}
}

/* --------------------------------------------------------------------------
   Dịch vụ rút gọn
   -------------------------------------------------------------------------- */
.dst-svc-mini {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card);
	color: var(--c-navy);
	font-weight: var(--fw-medium);
}

.dst-svc-mini:hover {
	border-color: var(--c-orange);
	color: var(--c-orange-strong);
}

/* --------------------------------------------------------------------------
   Floating contact actions — Gọi / Zalo / Facebook
   Một component BEM toàn site. Markup nằm duy nhất trong Astra Footer HTML 1.
   Mobile/tablet: dock ngang. Desktop: ba nút tròn xếp dọc bên phải.
   -------------------------------------------------------------------------- */
.dst-float-actions {
	--dst-float-size: var(--control-h);
	position: fixed;
	inset-inline: var(--sp-2);
	bottom: 0;
	z-index: var(--z-float);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-1);
	margin: 0;
	padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom));
	background: var(--c-white);
	border: var(--bd-1);
	border-radius: var(--r-card) var(--r-card) 0 0;
	box-shadow: var(--sh-float);
}

.dst-float-actions__item {
	min-width: 0;
	min-height: var(--dst-float-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	padding-inline: var(--sp-1);
	border: var(--bd-1);
	border-radius: var(--r-btn);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

.site-footer .dst-float-actions__item--call {
	background: var(--c-orange-strong);
	border-color: var(--c-orange-strong);
	color: var(--c-white);
}

.site-footer .dst-float-actions__item--zalo,
.site-footer .dst-float-actions__item--facebook {
	background: var(--c-surface);
	border-color: var(--c-border);
	color: var(--c-navy);
}

.dst-float-actions__label {
	display: block;
	color: inherit;
}

.dst-float-actions__icon {
	width: var(--sp-5);
	height: var(--sp-5);
	display: block;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Icon lấy từ 1 nguồn duy nhất: assets/icons/*.svg.
   phone.svg là icon đơn sắc nên dùng mask + currentColor để đổi màu theo
   ngữ cảnh; zalo/facebook giữ màu thương hiệu nên dùng background-image. */
.dst-float-actions__item--call .dst-float-actions__icon {
	width: calc(var(--sp-5) - var(--sp-1));
	height: calc(var(--sp-5) - var(--sp-1));
	background-color: currentColor;
	-webkit-mask: url("../icons/phone.svg") center / contain no-repeat;
	mask: url("../icons/phone.svg") center / contain no-repeat;
}

.dst-float-actions__item--zalo .dst-float-actions__icon {
	background-image: url("../icons/zalo.svg");
}

.dst-float-actions__item--facebook .dst-float-actions__icon {
	background-image: url("../icons/facebook.svg");
}

.site-footer .dst-float-actions__item:hover {
	transform: translateY(-1px);
	box-shadow: var(--sh-2);
	text-decoration: none;
}

.site-footer .dst-float-actions__item--call:hover {
	background: var(--c-orange-strong);
	color: var(--c-white);
}

.site-footer .dst-float-actions__item--zalo:hover,
.site-footer .dst-float-actions__item--facebook:hover {
	background: var(--c-white);
	color: var(--c-navy);
}

.dst-float-actions__item:focus-visible {
	outline: 3px solid var(--c-orange);
	outline-offset: 2px;
}

body {
	padding-bottom: calc(var(--dst-float-size, var(--control-h)) + var(--sp-6) + env(safe-area-inset-bottom));
}

.ast-scroll-to-top-right {
	bottom: calc(var(--control-h) + var(--sp-7) + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
	.dst-float-actions {
		inset-inline: auto;
		left: 50%;
		width: min(560px, calc(100% - var(--sp-6)));
		transform: translateX(-50%);
	}

	.dst-float-actions__item {
		gap: var(--sp-2);
		padding-inline: var(--sp-4);
		font-size: var(--fs-button);
	}
}

@media (min-width: 992px) {
	.dst-float-actions {
		inset: 50% var(--sp-4) auto auto;
		width: auto;
		grid-template-columns: 1fr;
		gap: var(--sp-2);
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transform: translateY(-50%);
	}

	.dst-float-actions__item {
		width: calc(var(--control-h) + var(--sp-2));
		height: calc(var(--control-h) + var(--sp-2));
		min-height: 0;
		padding: 0;
		border-radius: var(--r-pill);
		box-shadow: var(--sh-2);
	}

	.dst-float-actions__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.dst-float-actions__icon {
		width: calc(var(--sp-6) - var(--sp-1));
		height: calc(var(--sp-6) - var(--sp-1));
	}

	.dst-float-actions__item--call .dst-float-actions__icon {
		width: var(--sp-5);
		height: var(--sp-5);
	}

	.site-footer .dst-float-actions__item:hover {
		transform: translateX(-2px);
	}

	body {
		padding-bottom: 0;
	}

	.ast-scroll-to-top-right {
		bottom: var(--sp-5);
	}
}