/**
 * Trang Google Maps Marketing (/dich-vu-google-maps/) — CSS cho component riêng:
 * LocalActionPreview (hero), MapStatusSelector, so sánh tự nhiên/quảng cáo,
 * trust grid tuân thủ. Khung chung (hero/section/card/FAQ/form) dùng ads-* trong
 * style.css — file này chỉ bổ sung, không override token, chỉ nạp trên trang Maps.
 */

/* ----- Hero: Local Action Preview (mk-map nền + card hành động) ----- */
.maps-preview { min-height: 340px; }
.maps-preview__card {
	position: absolute;
	left: .85rem;
	right: .85rem;
	bottom: .85rem;
	background: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: 10px;
	padding: .8rem .9rem;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
}
.maps-preview__card strong { display: block; color: var(--text-strong); font-size: .95rem; }
.maps-preview__open { display: block; color: var(--accent); font-size: .74rem; margin-top: .15rem; }
.maps-preview__actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .55rem; }
.maps-preview__actions .mk-btn { display: inline-flex; align-items: center; gap: .3rem; }
.maps-preview__tag {
	display: inline-block;
	font-style: normal;
	color: var(--text-muted);
	font-size: .68rem;
	margin-top: .55rem;
	padding: .2rem .55rem;
	border: 1px solid var(--border-chip);
	border-radius: var(--radius-pill);
}

/* ----- MapStatusSelector ----- */
.maps-status { margin-top: 2.5rem; }
.maps-status__tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
}
.maps-status__tab {
	display: flex;
	align-items: center;
	gap: .55rem;
	text-align: left;
	background: var(--bg-surface);
	border: 1px solid var(--border-card);
	border-radius: var(--radius-md);
	color: var(--text-strong);
	font: inherit;
	font-size: .92rem;
	font-weight: var(--fw-semibold);
	line-height: 1.35;
	padding: .85rem 1rem;
	cursor: pointer;
	transition: border-color .2s var(--smx-ease, ease), background .2s;
}
.maps-status__tab .ti { color: var(--accent); font-size: 1.15rem; flex: none; }
.maps-status__tab:hover { border-color: var(--gold-tint-2); }
.maps-status__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.maps-status__tab[aria-selected="true"] {
	border-color: var(--gold-strong);
	background: linear-gradient(180deg, rgba(253, 184, 19, .08), var(--bg-surface) 70%);
}
.maps-status__panel {
	margin-top: 1rem;
	background: var(--bg-surface);
	border: 1px solid var(--gold-tint-2);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius-xl);
	padding: 1.75rem 1.75rem 2rem;
}
.maps-status__panel h3 { color: var(--text-strong); font-size: 1.2rem; margin: 0 0 .75rem; }
.maps-status__panel p { color: var(--text-muted); font-size: .95rem; line-height: 1.65; margin: 0 0 .75rem; }
.maps-status__panel p b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.maps-status__panel .sm-btn { margin-top: .35rem; }
.maps-status__route { display: flex; align-items: center; gap: .5rem; }
.maps-status__route .ti { color: var(--accent); flex: none; }
.maps-status__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----- Local Growth route: line vàng nối 5 trụ cột (desktop) ----- */
.maps-pillars { position: relative; }
.maps-pillars::before {
	content: "";
	position: absolute;
	top: -1.6rem;
	left: 8%;
	right: 8%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold-tint-2) 12%, var(--gold-tint-2) 88%, transparent);
}

/* ----- So sánh tự nhiên vs quảng cáo (2 card, cùng thứ tự tiêu chí) ----- */
.maps-cmp {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-top: 3rem;
}
.maps-cmp__col {
	background: var(--bg-surface);
	border: 1px solid var(--border-card);
	border-radius: var(--radius-xl);
	padding: 1.75rem;
}
.maps-cmp__col--ads { border-color: var(--gold-tint-2); }
.maps-cmp__col h3 {
	display: flex;
	align-items: center;
	gap: .55rem;
	color: var(--text-strong);
	font-size: 1.15rem;
	margin: 0 0 1.1rem;
}
.maps-cmp__col h3 .ti { color: var(--accent); }
.maps-cmp__col dl { margin: 0; display: grid; gap: .7rem; }
.maps-cmp__col dl > div {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: .75rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--divider);
}
.maps-cmp__col dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.maps-cmp__col dt { color: var(--text-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; padding-top: .1rem; }
.maps-cmp__col dd { margin: 0; color: var(--text-strong); font-size: .93rem; line-height: 1.5; }
.maps-cmp__note {
	margin: 1.5rem auto 0;
	max-width: 760px;
	text-align: center;
	color: var(--text-strong);
	background: var(--gold-tint);
	border: 1px solid var(--gold-tint-2);
	border-radius: var(--radius-md);
	padding: 1rem 1.25rem;
	line-height: 1.6;
}

/* ----- Trust grid tuân thủ + khối quyền sở hữu ----- */
.maps-trust {
	list-style: none;
	margin: 2.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .9rem;
}
.maps-trust li {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	background: var(--bg-surface);
	border: 1px solid var(--border-card);
	border-radius: var(--radius-md);
	padding: .95rem 1rem;
	color: var(--text-strong);
	font-size: .9rem;
	line-height: 1.45;
}
.maps-trust .ti { color: var(--accent); flex: none; font-size: 1.1rem; margin-top: .1rem; }
.maps-trust__own {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	margin-top: 1.25rem;
	background: var(--gold-tint);
	border: 1px solid var(--gold-tint-2);
	border-radius: var(--radius-md);
	padding: 1.15rem 1.3rem;
}
.maps-trust__own .ti { color: var(--accent); font-size: 1.4rem; flex: none; }
.maps-trust__own p { margin: 0; color: var(--text-strong); line-height: 1.65; }
.maps-trust__own b { color: var(--accent); font-weight: var(--fw-semibold); }

/* ----- Case study: một card thì canh giữa, không kéo full 3 cột ----- */
.maps-cases { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* ----- Responsive ----- */
@media (max-width: 900px) {
	.maps-status__tabs { grid-template-columns: repeat(2, 1fr); }
	.maps-cmp { grid-template-columns: 1fr; }
	.maps-trust { grid-template-columns: repeat(2, 1fr); }
	.maps-pillars::before { display: none; }
	.maps-preview { min-height: 280px; }
}
@media (max-width: 560px) {
	.maps-status__tabs { grid-template-columns: 1fr; }
	.maps-trust { grid-template-columns: 1fr; }
	.maps-cmp__col dl > div { grid-template-columns: 96px 1fr; }
}

/* Không JS: mọi panel hiển thị lần lượt (JS mới thêm [hidden] cho panel ẩn). */