/**
 * Trang dịch vụ Sàn TMĐT (/san-thuong-mai-dien-tu/) — CSS cho component riêng:
 * hero facts, proof strip, funnel 5 bước, roadmap pilot 90 ngày, case big-number.
 * Khung chung (hero/section/card/pricing/FAQ/form) dùng svc-* trong style.css —
 * file này chỉ bổ sung theo brief UX/UI, không override token, chỉ nạp trên trang TMĐT.
 */

/* ----- Typography theo brief (chỉ scope trang này) ----- */
.ecom-page .svc-hero h1 { font-size: clamp(3rem, 5.2vw, 5.25rem); line-height: 1.04; }
.ecom-page .svc-h2 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.5rem); line-height: 1.12; }

/* ----- Hero: 3 thông tin nhanh dưới CTA ----- */
.ecom-facts {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 1rem 2.5rem;
	margin-top: 2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--divider);
}
.ecom-facts__item strong { display: block; color: var(--accent); font-size: 1.15rem; font-weight: var(--fw-extrabold); line-height: 1.2; }
.ecom-facts__item small { color: var(--text-muted); font-size: .82rem; }

/* ----- Hero dashboard: hàng tag nền tảng ----- */
.ecom-dash__tags { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--divider); }

/* ----- Proof strip dưới hero ----- */
.ecom-proof { background: var(--bg-section); border-bottom: 1px solid var(--divider); padding: 1.6rem 0; }
.ecom-proof__in {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 1.25rem 2.25rem;
	align-items: center;
}
.ecom-proof__claim { margin: 0; color: var(--text-strong); font-size: 1rem; line-height: 1.55; font-weight: var(--fw-semibold); }
.ecom-proof__claim b { color: var(--accent); font-weight: var(--fw-bold); }
.ecom-proof__stat strong { display: block; color: var(--accent); font-size: 1.7rem; font-weight: var(--fw-extrabold); line-height: 1.15; }
.ecom-proof__stat small { display: block; color: var(--text-muted); font-size: .8rem; line-height: 1.45; margin-top: .2rem; }

/* ----- Card giai đoạn: CTA text trong svc-pain ----- */
.ecom-stage__more {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 44px; /* khoảng chạm tối thiểu 44px theo brief */
	color: var(--accent);
	font-weight: var(--fw-semibold);
	font-size: .88rem;
	text-decoration: none;
	margin-top: 1rem;
}
.ecom-stage__more .ti { transition: transform var(--dur-lift) var(--ease); }
.ecom-stage__more:hover .ti { transform: translateX(4px); }
.ecom-page .svc-pain { display: flex; flex-direction: column; }
.ecom-page .svc-pain .ecom-stage__more { margin-top: auto; padding-top: 1rem; }

/* ----- Phễu tăng trưởng 5 bước (desktop một hàng, mũi tên nối) ----- */
.ecom-funnel {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .9rem;
	margin-top: 3rem;
	counter-reset: ecom-step;
}
.ecom-funnel__step {
	position: relative;
	background: var(--bg-surface);
	border: 1px solid var(--border-card);
	border-radius: var(--radius-md);
	padding: 1.15rem 1.1rem 1.25rem;
}
.ecom-funnel__step::before {
	counter-increment: ecom-step;
	content: counter(ecom-step, decimal-leading-zero);
	display: block;
	color: var(--text-muted);
	opacity: .5;
	font-size: .74rem;
	font-weight: var(--fw-extrabold);
	letter-spacing: .08em;
	margin-bottom: .5rem;
}
.ecom-funnel__step:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	top: 50%;
	right: -.85rem;
	transform: translateY(-50%);
	color: var(--accent);
	font-size: .95rem;
	z-index: 1;
}
.ecom-funnel__stage { display: block; color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.ecom-funnel__step strong { display: block; color: var(--text-strong); font-size: 1.12rem; font-weight: var(--fw-extrabold); margin-top: .25rem; }
.ecom-funnel__step small { display: block; color: var(--text-muted); font-size: .8rem; line-height: 1.5; margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--divider); }

/* ----- Lộ trình pilot 90 ngày ----- */
.ecom-roadmap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: start; }
.ecom-roadmap__copy .svc-h2 { margin-top: 1rem; }
.ecom-roadmap__note {
	color: var(--text-strong);
	background: var(--gold-tint);
	border: 1px solid var(--gold-tint-2);
	border-radius: var(--radius-md);
	padding: 1rem 1.2rem;
	line-height: 1.6;
	margin: 1.4rem 0 1.8rem;
}
.ecom-roadmap__timeline { display: grid; gap: 1rem; }
.ecom-roadmap__item {
	display: flex;
	gap: 1.25rem;
	background: var(--bg-surface);
	border: 1px solid var(--border-card);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.5rem;
}
.ecom-roadmap__num { flex: none; color: var(--accent); font-size: 1.9rem; font-weight: var(--fw-extrabold); line-height: 1; opacity: .85; }
.ecom-roadmap__label { margin: 0 0 .3rem; color: var(--accent); font-size: .78rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; }
.ecom-roadmap__item h3 { color: var(--text-strong); font-size: 1.1rem; margin: 0 0 .4rem; }
.ecom-roadmap__item p:last-child { color: var(--text-muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* ----- Pricing: gói Pilot nổi bật nhấc lên (chỉ desktop 3 cột) ----- */
@media (min-width: 901px) {
	.ecom-page .svc-pkg--anchor { transform: translateY(-12px); }
}

/* ----- Case study: 2 cột, con số lớn ----- */
.ecom-cases { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin-left: auto; margin-right: auto; }
.ecom-case__big { color: var(--accent); font-size: clamp(3.25rem, 7vw, 4.75rem); font-weight: var(--fw-extrabold); line-height: 1; margin: .4rem 0 .9rem; }
.ecom-case__copy { color: var(--text-muted); font-size: .95rem; line-height: 1.6; margin: 0; }
.ecom-page .svc-note a { color: var(--accent); text-decoration: none; }
.ecom-page .svc-note a:hover { text-decoration: underline; }

/* ----- Link nội bộ trong card dịch vụ ----- */
.ecom-page .svc-ch p a { color: var(--accent); text-decoration: none; }
.ecom-page .svc-ch p a:hover { text-decoration: underline; }

/* ----- Responsive ----- */
@media (max-width: 1199px) {
	.ecom-roadmap { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 900px) {
	.ecom-proof__in { grid-template-columns: 1fr 1fr; }
	.ecom-proof__claim { grid-column: 1 / -1; }
	/* file nạp sau style.css nên phải tự trả case về 1 cột (rule .svc-cases của theme bị đè) */
	.ecom-cases { grid-template-columns: 1fr; max-width: 460px; }
	/* Funnel chuyển timeline dọc */
	.ecom-funnel { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
	.ecom-funnel__step:not(:last-child)::after {
		content: "\2193";
		top: auto;
		right: auto;
		bottom: -1.05rem;
		left: 50%;
		transform: translateX(-50%);
	}
}
@media (max-width: 560px) {
	.ecom-facts { grid-template-columns: 1fr 1fr; }
	.ecom-proof__in { grid-template-columns: 1fr; gap: 1.1rem; }
	.ecom-roadmap__item { flex-direction: column; gap: .7rem; padding: 1.2rem 1.25rem; }
	/* CTA hero full width trên mobile */
	.ecom-page .svc-hero__cta { flex-direction: column; align-items: stretch; }
	.ecom-page .svc-hero__cta .sm-btn { width: 100%; }
}