/* === incard: 15 trang VI dựng bằng Bricks (đợt 22/08/2026) ===
 * File riêng, KHÔNG dùng incard-solutions-bricks.css, vì file đó đang có
 * session khác sửa song song. Chỉ chứa component mới; layout/section/hero/cta
 * vẫn lấy từ hệ incard-sol-*.
 */

/* ---------- 0. Wrapper bắt buộc ----------
 * incard.css có `.incard-sol-section > * { margin-inline: 0 !important }`, nên
 * MỌI khối muốn tự căn giữa phải nằm trong một wrapper, không được là con trực
 * tiếp của section. Wrapper hứng lấy rule đó, phần tử bên trong tự do.
 */
div.incard-pg-wrap {
	width: 100%;
}

/* ---------- 1. Văn bản dài (trang pháp lý) ---------- */
div.incard-lg-prose {
	max-width: 820px;
	margin-inline: auto;
}

.incard-lg-prose > * + * {
	margin-top: 16px;
}

.incard-lg-prose h2 {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--sol-line);
}

.incard-lg-prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.incard-lg-prose h3 {
	margin-top: 28px;
	font-size: var(--text-h4);
}

.incard-lg-prose p {
	color: var(--text-secondary);
	font-size: var(--text-body);
	line-height: 1.7;
}

.incard-lg-prose ul {
	margin: 12px 0 0;
	padding-left: 22px;
	list-style: disc;
}

.incard-lg-prose li {
	margin: 0 0 8px;
	color: var(--text-secondary);
	font-size: var(--text-body);
	line-height: 1.7;
}

.incard-pg-meta {
	display: inline-block;
	margin: 20px 0 0;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: var(--on-ink-body);
	font-size: var(--text-sm);
}

/* ---------- 2. Form (Liên hệ, Đặt lịch demo) ---------- */
div.incard-fm {
	max-width: 760px;
	margin-inline: auto;
	padding: 32px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: #fff;
	box-shadow: var(--sol-shadow-sm);
}

.incard-fm form .form-group {
	margin-bottom: 18px;
}

.incard-fm form label {
	display: block;
	margin-bottom: 6px;
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: 600;
}

.incard-fm form input[type="text"],
.incard-fm form input[type="email"],
.incard-fm form input[type="tel"],
.incard-fm form select,
.incard-fm form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--sol-line);
	border-radius: 8px;
	background: #fff;
	color: var(--text-primary);
	font-family: inherit;
	font-size: var(--text-body);
	line-height: 1.4;
}

.incard-fm form textarea {
	min-height: 120px;
	resize: vertical;
}

.incard-fm form input:focus-visible,
.incard-fm form select:focus-visible,
.incard-fm form textarea:focus-visible {
	outline: 2px solid var(--incard-green);
	outline-offset: 1px;
	border-color: var(--incard-green);
}

.incard-fm form .submit-button-wrapper {
	width: 100%;
}

.incard-fm form button[type="submit"] {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--incard-green);
	border-radius: 8px;
	background: var(--incard-green);
	color: var(--ag-on-green, #0c1922);
	font-size: var(--text-btn);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.incard-fm form button[type="submit"]:hover {
	border-color: var(--incard-green-hover);
	background: var(--incard-green-hover);
}

.incard-fm-note {
	margin: 14px 0 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	text-align: center;
}

/* ---------- 3. Thẻ thông tin liên hệ ---------- */
.incard-ct-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
}

.incard-ct-card {
	flex: 1 1 300px;
	padding: 24px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: #fff;
}

.incard-ct-card > * {
	margin: 0;
}

.incard-ct-card__org {
	color: var(--text-primary);
	font-size: var(--text-h4);
	font-weight: 700;
}

.incard-ct-card__role {
	margin-top: 4px;
	color: var(--incard-green);
	font-size: var(--text-sm);
	font-weight: 600;
}

.incard-ct-card__addr {
	margin-top: 12px;
	color: var(--text-secondary);
	font-size: var(--text-body);
	line-height: 1.6;
}

.incard-ct-card__line {
	margin-top: 8px;
	font-size: var(--text-body);
}

.incard-ct-card__line a {
	color: var(--incard-blue);
	text-decoration: none;
}

.incard-ct-card__line a:hover {
	text-decoration: underline;
}

/* ---------- 4. Danh sách bài viết / sự kiện / playbook ---------- */
.incard-pg-cardgrid {
	display: flex;
	/* not stretch: one webinar card has a banner and the other does not, and
	   equal heights left the imageless card with a large empty foot */
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
}

.incard-pg-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 320px;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: #fff;
	box-shadow: var(--sol-shadow-sm);
}

.incard-pg-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px;
}

img.incard-pg-card__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 200px;
	object-fit: cover;
}

.incard-pg-card__meta {
	margin: 0 0 10px;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.incard-pg-card__body h3 {
	margin: 0;
	font-size: var(--text-h4);
	line-height: 1.35;
}

.incard-pg-card__copy {
	margin: 10px 0 0;
	color: var(--text-secondary);
	font-size: var(--text-body);
	line-height: 1.6;
}

.incard-pg-card__foot {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--sol-line);
	font-size: var(--text-body);
}

.incard-pg-card__foot a {
	color: var(--incard-green);
	font-weight: 600;
	text-decoration: none;
}

.incard-pg-card__foot a:hover {
	text-decoration: underline;
}

.incard-pg-soon {
	display: inline-block;
	margin: 16px 0 0;
	padding: 8px 16px;
	border: 1px dashed var(--sol-line);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: 600;
}

/* ---------- 5. Danh sách trống (query loop chưa có bài publish) ----------
 * Chỉ hiện khi query không trả về item nào; khi bài được publish thì tự ẩn,
 * không phải sửa lại trang.
 */
.incard-pg-empty {
	display: none;
	margin-top: 28px;
	padding: 28px;
	border: 1px dashed var(--sol-line);
	border-radius: var(--sol-radius);
	color: var(--text-secondary);
	font-size: var(--text-body);
	text-align: center;
}

/* ---------- 6. Mobile ---------- */
@media (max-width: 767px) {
	.incard-fm {
		padding: 22px;
	}

	.incard-lg-prose h2 {
		margin-top: 36px;
	}

	img.incard-pg-card__image {
		height: 168px;
	}
}

/* ---------- 7. Trích dẫn khách hàng ---------- */
.incard-pg-quote {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-lead);
	font-style: italic;
	line-height: 1.6;
}

.incard-pg-author {
	margin: 18px 0 0;
	color: var(--text-primary);
	font-size: var(--text-body);
	font-weight: 700;
}

.incard-pg-authorrole {
	margin: 2px 0 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

/* ---------- 8. Danh sách lợi ích trong hero (nền tối) ---------- */
.incard-pg-herolist {
	max-width: 640px;
	margin-inline: auto;
	margin-top: 24px;
	text-align: left;
}

.incard-pg-herolist .incard-sol-check-list li {
	color: var(--on-ink-body);
}

/* ---------- 9. Số liệu trên nền SÁNG ----------
 * incard-sol-stat__* của incard.css đặt color: var(--incard-surface) (trắng) và
 * value màu #4ade80 — bộ đó chỉ dùng được trên section tối. Trên band sáng nhãn
 * gần như vô hình, nên các trang này dùng bộ riêng.
 */
.incard-pg-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	margin-top: 8px;
}

.incard-pg-stats > .incard-pg-stat {
	flex: 1 1 200px;
	min-width: 180px;
	padding: 24px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: #fff;
	text-align: center;
}

.incard-pg-stat__value {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-h3);
	font-weight: 800;
	line-height: 1.1;
}

.incard-pg-stat__label {
	margin: 8px 0 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.35;
}

/* ---------- 10. Hình thức hợp tác (trang Đối tác) ---------- */
.incard-pg-modelnum {
	margin: 0 0 6px;
	color: var(--incard-green);
	font-size: var(--text-sm);
	font-weight: 800;
	letter-spacing: 0.08em;
}

div.incard-sol-panel + div.incard-sol-panel {
	margin-top: 24px;
}

/* ---------- 11. Lưới bài viết (query loop của Bricks) ---------- */
.incard-pg-postgrid {
	margin-top: 8px;
}

.incard-pg-postgrid .bricks-layout-item {
	overflow: hidden;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: #fff;
	box-shadow: var(--sol-shadow-sm);
}

.incard-pg-postgrid .dynamic h3,
.incard-pg-postgrid .dynamic h4 {
	font-size: var(--text-h4);
	line-height: 1.35;
}

/* ---------- 12. Panel dài: giới hạn độ dài dòng ----------
 * .incard-sol-panel chiếm hết 1392px nên mỗi dòng chữ dài gần cả trang. Chỉ
 * khoanh trong .incard-pg-wrap để không đụng các trang khác đang dùng class này.
 */
.incard-pg-wrap > div.incard-sol-panel {
	max-width: 900px;
	margin-inline: auto;
}

.incard-pg-wrap > .incard-sol-panel > .brxe-button {
	align-self: flex-start;
	margin-top: 20px;
}

.incard-pg-wrap > ul.incard-sol-check-list,
.incard-pg-wrap > .brxe-text {
	max-width: 900px;
	margin-inline: auto;
}

/* ---------- 13. Panel hình thức hợp tác: khung thẻ + ghi chú ---------- */
.incard-pg-wrap > div.incard-sol-panel {
	padding: 28px 32px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: #fff;
	box-shadow: var(--sol-shadow-sm);
}

/* .incard-sol-fit-note is centred in the shared sheet, which makes it read like a
 * stray list row when it follows a check-list. */
.incard-pg-wrap .incard-sol-fit-note {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--sol-line);
	color: var(--text-primary);
	font-style: italic;
	text-align: left;
}

.incard-pg-postgrid:not(:has(li.bricks-layout-item)) ~ .incard-pg-empty {
	display: block;
}

.incard-pg-postgrid .bricks-pagination:empty {
	display: none;
}

/* ---------- 14. Card bài viết là MỘT link (query loop trang Blog) ---------- */
a.incard-pg-card {
	color: inherit;
	text-decoration: none;
}

a.incard-pg-card:hover .incard-pg-card__foot--static,
a.incard-pg-card:hover h3 {
	color: var(--incard-green);
}

a.incard-pg-card:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.incard-pg-card__foot--static {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--sol-line);
	color: var(--incard-green);
	font-weight: 600;
}

/* thân card giãn để mọi card cùng hàng cao bằng nhau, foot ghim đáy */
.incard-pg-cardgrid--top > .incard-pg-card {
	flex: 0 1 calc((100% - 48px) / 3);
	min-width: 300px;
}

/* trạng thái rỗng cho query loop: Bricks in card đầu làm template ẩn? Không —
   loop rỗng thì không in gì, nên :has() kiểm sự tồn tại của card link */
.incard-pg-cardgrid--top:not(:has(a.incard-pg-card)) ~ .incard-pg-empty {
	display: block;
}

/* ---------- 15. Trang bài viết đơn (template Single Post VI, #834) ---------- */
.incard-post-back {
	margin: 0 0 18px;
	font-size: var(--text-sm);
}

.incard-post-back a {
	color: var(--on-ink-body);
	text-decoration: none;
}

.incard-post-back a:hover {
	color: #fff;
	text-decoration: underline;
}

/* nội dung Gutenberg của bài: ảnh, bảng, code trong khuôn cột 820px */
.incard-post-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 24px auto;
	border-radius: var(--radius-sm);
}

.incard-post-prose h4 {
	margin-top: 24px;
}

.incard-post-prose table {
	display: block;
	overflow-x: auto;
	margin: 20px 0;
	border-collapse: collapse;
}

.incard-post-prose td,
.incard-post-prose th {
	padding: 8px 12px;
	border: 1px solid var(--sol-line);
	font-size: var(--text-body);
}

.incard-post-prose blockquote {
	margin: 20px 0;
	padding: 12px 20px;
	border-left: 3px solid var(--incard-green);
	color: var(--text-secondary);
	font-style: italic;
}

.incard-post-metaline {
	width: 100%;
	margin: 16px 0 0;
	color: var(--on-ink-body);
	font-size: var(--text-sm);
	text-align: center;
}

.incard-post-metaline a {
	color: var(--on-ink-body);
	text-decoration: none;
}

.incard-post-metaline a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------- 16. Blog chuyên nghiệp: featured + meta + hover ---------- */
a.incard-bl-featured {
	display: flex;
	overflow: hidden;
	align-items: stretch;
	margin-bottom: 40px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: #fff;
	box-shadow: var(--sol-shadow-sm);
	color: inherit;
	text-decoration: none;
}

img.incard-bl-featured__image {
	display: block;
	flex: 0 0 52%;
	width: 52%;
	min-height: 340px;
	object-fit: cover;
}

.incard-bl-featured__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	padding: 40px 44px;
}

.incard-bl-featured__body h2 {
	margin: 10px 0 0;
	font-size: var(--text-h3);
	line-height: 1.3;
}

.incard-bl-badge {
	margin: 0 0 12px;
	width: fit-content;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--sol-green-wash, rgba(22, 139, 71, 0.12));
	color: var(--incard-green);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.incard-bl-cat {
	color: var(--incard-green);
	font-weight: 700;
}

.incard-bl-dot {
	margin: 0 6px;
	color: var(--sol-line);
}

a.incard-bl-featured:hover h2,
a.incard-bl-featured:hover .incard-pg-card__foot--static {
	color: var(--incard-green);
}

a.incard-bl-featured:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* hover có chiều sâu cho card thường */
@media (hover: hover) {
	a.incard-pg-card,
	a.incard-bl-featured {
		transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
	}

	a.incard-pg-card:hover,
	a.incard-bl-featured:hover {
		transform: translateY(-3px);
		border-color: rgba(22, 139, 71, 0.35);
		box-shadow: 0 14px 30px rgba(8, 45, 64, 0.12);
	}
}

@media (max-width: 767px) {
	a.incard-bl-featured {
		flex-direction: column;
	}

	img.incard-bl-featured__image {
		flex-basis: auto;
		width: 100%;
		min-height: 0;
		height: 200px;
	}

	.incard-bl-featured__body {
		padding: 22px;
	}
}

/* ---------- 17. Bài đơn: ảnh cover + prose scale bài viết ---------- */
img.incard-post-cover {
	display: block;
	width: min(100%, 980px);
	max-height: 460px;
	margin: -56px auto 40px;
	border-radius: var(--sol-radius);
	object-fit: cover;
	box-shadow: 0 18px 44px rgba(8, 45, 64, 0.18);
}

.incard-post-metaline--top {
	margin: 0 0 14px;
}

/* Trong cột 820px, h2 40px của site quá nặng cho thân bài — bài viết dùng
 * nấc component: h2 -> 24 (--text-h3), h3 -> 20 (--text-h4). Vẫn là token.
 */
.incard-post-prose h2 {
	margin-top: 40px;
	font-size: var(--text-h3);
	line-height: 1.3;
}

.incard-post-prose h3 {
	font-size: var(--text-h4);
}

.incard-post-prose li {
	margin-bottom: 10px;
}

.incard-post-prose hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--sol-line);
}

#lien-quan .incard-pg-card__body h3 {
	font-size: var(--text-body);
	line-height: 1.4;
}

/* Trên hero TỐI, chuyên mục phải dùng thang on-ink (xanh brand chỉ ~2.7:1
 * trên navy — phép đo leo-lên-body cho 4.61 là số giả vì gặp nền trắng). */
.incard-sol-hero .incard-bl-cat {
	color: var(--on-ink-accent);
}

.incard-sol-hero .incard-bl-dot {
	color: var(--on-ink-muted, rgba(255, 255, 255, 0.58));
}

/* ---------- 18. Sửa 4 lỗi nhìn thấy trên listing (22/08 tối) ---------- */
/* (1) đáy card phải thẳng hàng: grid --top stretch lại (flex-start là ngoại lệ
 * riêng của trang webinar vì có card không ảnh), foot ghim đáy nhờ body flex:1 */
.incard-pg-cardgrid--top {
	align-items: stretch;
}

.incard-pg-cardgrid--top > .incard-pg-card {
	height: auto;
}

.incard-pg-card__foot--static {
	margin-top: auto;
}

.incard-pg-card__body .incard-pg-card__foot--static {
	padding-top: 14px;
}

/* (2) dấu phân cách meta phải nhìn thấy được */
.incard-bl-dot {
	margin: 0 8px;
	color: #9aa6b2;
}

/* (3) featured: bỏ đường kẻ lơ lửng giữa card, cân lại khoảng thở */
a.incard-bl-featured .incard-pg-card__foot--static {
	margin-top: 18px;
	padding-top: 0;
	border-top: 0;
}

img.incard-bl-featured__image {
	min-height: 320px;
}

.incard-bl-featured__body h2 {
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* excerpt gọn 3 dòng để khối chữ các card đều nhau */
.incard-pg-card__copy {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* cụm ngày / thời-gian-đọc không được ngắt giữa chừng ("10 PHÚT / ĐỌC") */
.incard-bl-nw {
	white-space: nowrap;
}

/* ---------- 19. Card blog theo góp ý 22/08: meta xuống chân, bỏ "Đọc bài" ---------- */
.incard-pg-card__meta--foot {
	margin: 20px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--sol-line);
}

/* meta là chân card: ghim đáy để mọi card cùng nhịp */
.incard-pg-card__body .incard-pg-card__meta--foot {
	margin-top: auto;
}

/* mô tả khoá ĐÚNG 2 dòng trên card lưới — mọi card cùng khối chữ */
.incard-pg-cardgrid--top .incard-pg-card__copy {
	min-height: calc(2 * 1.6em);
	margin-top: 12px;
	/* foot ghim đáy bằng margin-top:auto nên khoảng cách TỐI THIỂU
	   tới kẻ ngang phải nằm ở đây */
	margin-bottom: 20px;
	-webkit-line-clamp: 2;
}

/* featured rộng hơn thì 3 dòng */
.incard-pg-card__copy--featured {
	margin-top: 12px;
	margin-bottom: 6px;
	-webkit-line-clamp: 3;
}

/* tiêu đề lên đầu thân card, sát ảnh */
.incard-pg-cardgrid--top .incard-pg-card__body h3 {
	margin-top: 0;
}

/* ---------- 20. Bảng trong bài viết: hàng đầu là hàng tiêu đề ----------
 * Bảng so sánh của bài #773 vốn căn giữa hàng đầu bằng inline style
 * `<p style="text-align:center">`. Đã bỏ inline style khỏi nội dung, ý định
 * căn giữa chuyển về đây. Bảng cũng mang class Tailwind (border-gray-300,
 * px-4…) mà site KHÔNG nạp Tailwind, nên viền/padding do khối này lo.
 */
.incard-post-prose table tr:first-child td,
.incard-post-prose table tr:first-child th {
	background: var(--sol-band, #f2f6fa);
	font-weight: 700;
	text-align: center;
}

.incard-post-prose table tr:first-child td p {
	margin: 0;
}

.incard-post-prose table td p {
	margin: 0;
}

/* ảnh minh hoạ giữa section trên trang landing: không có hero để đè lên */
#van-de img.incard-post-cover,
#ket-qua img.incard-post-cover {
	margin-top: 32px;
	margin-bottom: 0;
	max-height: 420px;
}

/* ---------- 21. Blog: bộ lọc chuyên mục + nhãn section ---------- */
.incard-bl-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.incard-bl-filter__item {
	margin: 0;
}

.incard-bl-filter__item a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--sol-line);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.incard-bl-filter__item a:hover {
	border-color: var(--incard-green);
	background: var(--sol-green-wash, rgba(22, 139, 71, 0.08));
	color: var(--incard-green);
}

.incard-bl-filter__item a:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.incard-bl-seclabel {
	margin: 0 0 16px;
	font-size: var(--text-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- 22. Services & SaaS: văn bản tự do và danh sách lợi ích ----------
   Trang này (VI 274 / EN 234) dùng .incard-sol-card__copy — class dành cho chữ
   trong THẺ hẹp — cho ba đoạn văn tự do, nên chúng chạy hết 1392px ở 14px:
   dài dòng gấp đôi ngưỡng đọc được. Danh sách lợi ích cũng nằm trần ở 14px.
   margin-inline phải có !important vì .incard-sol-section > * đặt
   margin-inline: 0 !important (bẫy đã ghi ở DESIGN-GUIDELINE §7). */
.incard-sol-prose {
	max-width: 68ch;
	margin-inline: auto !important;
	font-size: var(--text-body);
	line-height: 1.75;
	color: var(--text-secondary);
}
.incard-sol-prose + .incard-sol-prose {
	margin-top: 18px;
}
.incard-sol-checks {
	max-width: 68ch;
	margin-inline: auto !important;
}
/* .incard-sol-check-list tự lo dấu tick bằng ::before đặt absolute và
   padding-left: 24px trên li. Vì vậy TUYỆT ĐỐI không dùng shorthand `padding`
   ở đây: nó xoá padding-left và dấu tick rơi lên trên, đè vào chữ. */
.incard-sol-checks li {
	padding-block: 12px;
	padding-left: 26px;
	font-size: var(--text-body);
	line-height: 1.6;
	color: var(--text-primary);
}
/* ::before định vị theo padding-box nên padding-block ở trên đẩy chữ xuống mà
   để dấu tick lại phía trên: cộng lại đúng lượng padding-top. */
.incard-sol-checks li::before {
	top: calc(12px + 0.24em);
}
.incard-sol-checks li + li {
	border-top: 1px solid var(--sol-line);
}

/* ---------- 23. Thẻ kênh trong .incard-sol-feature__copy: đáy so le ----------
   incard-solutions-bricks.css đặt `.incard-sol-channel-grid > .incard-sol-channel-card
   { height: 100% }`. Trong ngữ cảnh GRID điều đó đúng, nhưng chính file đó lại
   đổi grid này thành `display:flex; flex-wrap:wrap` khi nằm trong
   .incard-sol-feature__copy — và ở flex nhiều dòng, height:100% là chiều cao
   xác định nên triệt tiêu align-items: stretch: cùng một hàng cao 135/135/157.
   Trả height về auto CHỈ trong ngữ cảnh flex (3 class thắng 2 class, không cần
   !important); các grid khác giữ nguyên height:100%. */
.incard-sol-feature__copy .incard-sol-channel-grid > .incard-sol-channel-card {
	height: auto;
	align-self: stretch;
}

/* ============================================================================
   24. Hero E-commerce & Retail — AI Commerce Agent
   design/ecommerce-retail/01-hero/{SPEC.md, prototype/}
   Token theo design/SYSTEM.md, khai báo trên chính section với tiền tố --eh-.
   Toàn bộ scope dưới .ecom-hero nên không rò ra trang khác.
   Cột grid và mọi breakpoint đặt Ở ĐÂY (không đặt _gridTemplateColumns trong
   Bricks): Bricks ghi `#brxe-<id>{...}` mà ID thắng class, nên media query theo
   class sẽ không override được. Bricks vẫn giữ display:grid native.
   ============================================================================ */
.ecom-hero {
	--eh-ink: #0c1922;
	--eh-green: #15803d;
	--eh-green-ink: #066d31;
	--eh-muted: #55626a;
	--eh-line: #dce7e2;
	--eh-paper: #fbfdfc;
	--eh-focus: #1268a8;
	/* mockup dùng #f15a2b nhưng với chữ trắng 15px chỉ đạt 3.37:1 (cần 4.5:1);
	   tối lại thành #cf3f17 = 4.80:1. Lệch có chủ ý, đã ghi trong báo cáo. */
	--eh-orange: #cf3f17;
	--eh-orange-hi: #b8360f;
	position: relative;
	overflow: hidden;
	background: linear-gradient(140deg, #f7fcf9 0%, #fff 56%, #eef9f4 100%);
}

/* hai quầng blur là trang trí: không nhận chuột, không vào accessibility tree */
.ecom-hero::before,
.ecom-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.ecom-hero::before {
	width: 520px;
	height: 520px;
	right: -160px;
	top: -160px;
	background: radial-gradient(circle, rgba(8, 129, 59, 0.13), transparent 69%);
}

.ecom-hero::after {
	width: 360px;
	height: 360px;
	left: -190px;
	bottom: -180px;
	background: radial-gradient(circle, rgba(207, 63, 23, 0.07), transparent 70%);
}

.ecom-hero__grid {
	position: relative;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	column-gap: 53px;
	row-gap: 40px;
	align-items: center;
	width: 100%;
}

/* ---- cột chữ ---- */
.ecom-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: start;
	padding: 7px 12px;
	border: 1px solid #cde5d9;
	border-radius: 30px;
	background: #f4faf7;
	color: var(--eh-green-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.ecom-hero__eyebrow svg {
	width: 18px;
	height: 18px;
	flex: none;
	padding: 4px;
	border-radius: 6px;
	background: var(--eh-green);
	color: #fff;
}

.ecom-hero h1.ecom-hero__title {
	margin: 0;
	color: var(--eh-ink);
	font-size: clamp(34px, 4.6vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.035em;
	font-weight: 800;
}

.ecom-hero__title em {
	font-style: normal;
	color: var(--eh-green);
}

.ecom-hero__lead {
	margin: 0;
	max-width: 34rem;
	color: var(--eh-muted);
	font-size: 15px;
	line-height: 1.75;
}

.ecom-hero__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 11px;
}

/* nút: 15px = --text-btn của site; vùng bấm >= 44px theo SYSTEM.md §4 */
.ecom-hero .ecom-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	padding: 14px 20px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ecom-hero .ecom-hero__btn--primary {
	border: 1px solid var(--eh-orange);
	background: var(--eh-orange);
	color: #fff;
	box-shadow: 0 10px 23px rgba(207, 63, 23, 0.18);
}

.ecom-hero .ecom-hero__btn--ghost {
	border: 1px solid transparent;
	background: transparent;
	color: #2d3933;
}

.ecom-hero__btn--ghost svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 8px;
	border: 1px solid #c9d8d0;
	border-radius: 50%;
	color: var(--eh-green-ink);
}

@media (hover: hover) {
	.ecom-hero .ecom-hero__btn--primary:hover {
		border-color: var(--eh-orange-hi);
		background: var(--eh-orange-hi);
	}

	.ecom-hero .ecom-hero__btn--ghost:hover {
		border-color: var(--eh-line);
		background: #fff;
	}
}

.ecom-hero .ecom-hero__btn:focus-visible {
	outline: 3px solid var(--eh-focus);
	outline-offset: 3px;
}

.ecom-hero__proof {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	padding-top: 22px;
	border-top: 1px solid var(--eh-line);
}

.ecom-hero__proof-title {
	margin: 0;
	color: var(--eh-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.ecom-hero__proof-sub {
	margin: 3px 0 0;
	color: #84918a;
	font-size: 12px;
	line-height: 1.4;
}

/* ---- Commerce Agent: dựng bằng HTML/CSS/SVG, KHÔNG phải một ảnh phẳng ----
   Cỡ chữ trong mock nằm ở 10-12px chứ không xuống 5-7px như prototype: dưới
   10px thì không đọc được và mock mất ý nghĩa minh hoạ. */
.ecom-hero__mockwrap {
	position: relative;
	width: 100%;
	min-width: 0;
}

.ecom-mock {
	position: relative;
	min-width: 0;
	border: 1px solid #d8e4dd;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(17, 73, 41, 0.15);
}

.ecom-mock__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-bottom: 1px solid #e1e9e5;
}

.ecom-mock__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	margin: 0;
	color: var(--eh-ink);
	font-size: 12px;
	font-weight: 700;
}

.ecom-mock__brand svg {
	width: 22px;
	height: 22px;
	flex: none;
	padding: 5px;
	border-radius: 7px;
	background: var(--eh-green);
	color: #fff;
}

.ecom-mock__store {
	margin: 0;
	padding: 5px 9px;
	border: 1px solid #dfe7e3;
	border-radius: 8px;
	color: #55635c;
	font-size: 10px;
	white-space: nowrap;
}

.ecom-mock__store::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 5px;
	border-radius: 50%;
	background: #24b05f;
}

.ecom-mock__body {
	grid-template-columns: 46px minmax(0, 1.35fr) minmax(0, 0.72fr);
	width: 100%;
}

.ecom-mock__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-right: 1px solid #e1e9e5;
	border-radius: 0 0 0 20px;
	background: #f7faf8;
	color: #8d9a93;
}

.ecom-mock__rail svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 7px;
}

.ecom-mock__rail svg:first-child {
	background: #e5f5ed;
	color: var(--eh-green-ink);
}

.ecom-mock__conv {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 13px;
	border-right: 1px solid #e2e9e5;
}

.ecom-mock__convhead {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 11px;
	border-bottom: 1px solid #e4eae7;
}

.ecom-mock__agent {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	margin: 0;
	color: var(--eh-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
}

.ecom-mock__agent svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
	background: var(--eh-green);
	color: #fff;
}

.ecom-mock__agent small {
	display: block;
	color: var(--eh-green-ink);
	font-size: 10px;
	font-weight: 600;
}

.ecom-mock__agent small::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 4px;
	border-radius: 50%;
	background: #1db05a;
}

.ecom-mock__handoff,
.ecom-mock__chip {
	margin: 0;
	padding: 6px 9px;
	border: 1px solid #d8e3dd;
	border-radius: 7px;
	background: #fff;
	color: #55635c;
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
}

.ecom-mock__chip--on {
	border-color: #b5d9c4;
	background: #e5f5ed;
	color: var(--eh-green-ink);
}

.ecom-mock__msgs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 13px 0;
}

.ecom-mock__msg--user {
	margin: 0 0 0 30px;
	padding: 9px 11px;
	border-radius: 9px 9px 3px 9px;
	background: #edf2ef;
	color: #2f3b35;
	font-size: 11px;
	line-height: 1.55;
}

.ecom-mock__agentrow {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.ecom-mock__agentrow > svg {
	width: 22px;
	height: 22px;
	flex: none;
	padding: 5px;
	border-radius: 7px;
	background: var(--eh-green);
	color: #fff;
}

.ecom-mock__agentcol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	flex: 1;
}

.ecom-mock__msg--agent {
	margin: 0;
	color: #2f3b35;
	font-size: 11px;
	line-height: 1.5;
}

.ecom-mock__products {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.ecom-mock__product {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 8px;
	border: 1px solid #dfe7e3;
	border-radius: 9px;
	background: #fff;
}

.ecom-mock__thumb {
	width: 38px;
	height: 34px;
	flex: none;
	border-radius: 8px;
}

.ecom-mock__pbody {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.ecom-mock__pname {
	margin: 0;
	color: var(--eh-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}

.ecom-mock__pmeta {
	margin: 2px 0 0;
	color: #65706a;
	font-size: 10px;
	line-height: 1.3;
}

.ecom-mock__pprice {
	margin: 3px 0 0;
	color: var(--eh-ink);
	font-size: 11px;
	font-weight: 700;
}

.ecom-mock__pmatch {
	margin: 0;
	flex: none;
	padding: 5px 7px;
	border-radius: 7px;
	background: #e5f5ed;
	color: var(--eh-green-ink);
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
}

.ecom-mock__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ecom-mock__composer {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0;
	padding: 8px 9px;
	border: 1px solid #dce5e0;
	border-radius: 9px;
	color: #65706a;
	font-size: 10px;
}

.ecom-mock__composer span {
	flex: 1;
	min-width: 0;
}

.ecom-mock__composer svg {
	width: 24px;
	height: 24px;
	flex: none;
	padding: 6px;
	border-radius: 6px;
	background: var(--eh-green);
	color: #fff;
}

/* ---- cart panel: chỉ hiện ở desktop ---- */
.ecom-mock__cart {
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-width: 0;
	padding: 13px;
	border-radius: 0 0 20px 0;
	background: var(--eh-paper);
}

.ecom-mock__carthead {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-bottom: 9px;
	border-bottom: 1px solid #e2e9e5;
}

.ecom-mock__cartlabel {
	flex: 1;
	margin: 0;
	color: #65706a;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ecom-mock__cartcount {
	margin: 0;
	color: var(--eh-ink);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.ecom-mock__cartitem {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.ecom-mock__stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px;
	border: 1px solid #c4e1d2;
	border-radius: 9px;
	background: #ecf8f2;
	color: #07632d;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;
}

.ecom-mock__stock svg {
	width: 20px;
	height: 20px;
	flex: none;
	padding: 5px;
	border-radius: 6px;
	background: var(--eh-green);
	color: #fff;
}

.ecom-mock__stock small {
	display: block;
	color: #62706a;
	font-size: 10px;
	font-weight: 500;
}

.ecom-mock__data {
	margin: 0;
	color: #65706a;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ecom-mock__data dl {
	display: flex;
	flex-direction: column;
	margin: 6px 0 0;
	letter-spacing: normal;
	text-transform: none;
}

.ecom-mock__data dl > div {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid #e5ebe8;
}

.ecom-mock__data dt {
	flex: 1;
	color: var(--eh-ink);
	font-size: 10px;
	font-weight: 700;
}

.ecom-mock__data dd {
	margin: 0;
	color: #65706a;
	font-size: 10px;
	font-weight: 500;
	text-align: right;
}

.ecom-mock__cartcta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: auto 0 0;
	padding: 10px 11px;
	border-radius: 8px;
	background: var(--eh-orange);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

/* ---- toast tồn kho ---- */
.ecom-mock__toast {
	position: absolute;
	right: -22px;
	bottom: -34px;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 250px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #d6e3dc;
	border-radius: 11px;
	background: #fff;
	color: var(--eh-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	box-shadow: 0 16px 35px rgba(17, 66, 38, 0.18);
}

.ecom-mock__toast svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
	background: #e4f5ec;
	color: var(--eh-green-ink);
}

.ecom-mock__toast small {
	display: block;
	color: #6b7873;
	font-size: 10px;
	font-weight: 500;
}

.ecom-hero__mocklabel {
	margin: 48px 0 0;
	color: #62706a;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.09em;
}

.ecom-hero__mocklabel::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--eh-green);
}

/* ---- Tablet: hai cột, ẨN cart panel, giữ hội thoại/product finder ---- */
@media (max-width: 1000px) {
	.ecom-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
		column-gap: 30px;
	}

	.ecom-mock__body {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.ecom-mock__cart {
		display: none;
	}

	.ecom-mock__conv {
		border-right: 0;
	}

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

	.ecom-mock__toast {
		right: -12px;
		bottom: -28px;
		max-width: 220px;
	}
}

/* ---- Mobile: một cột; hội thoại + MỘT product card + toast tồn kho.
   Không scale nhỏ cả dashboard desktop — reflow thật, ẩn phần không cần. ---- */
@media (max-width: 700px) {
	.ecom-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 34px;
	}

	.ecom-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.ecom-hero .ecom-hero__btn {
		justify-content: center;
	}

	.ecom-mock {
		border-radius: 16px;
	}

	.ecom-mock__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.ecom-mock__rail {
		display: none;
	}

	.ecom-mock__conv {
		padding: 12px;
	}

	.ecom-mock__handoff {
		display: none;
	}

	/* chỉ giữ product card đầu tiên */
	.ecom-mock__products > .ecom-mock__product + .ecom-mock__product {
		display: none;
	}

	.ecom-mock__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ecom-mock__chip {
		text-align: center;
		white-space: normal;
	}

	/* toast thành một hàng tĩnh trong khung, không còn nổi ngoài mép */
	.ecom-mock__toast {
		position: static;
		right: auto;
		bottom: auto;
		max-width: none;
		margin: 0 12px 12px;
		box-shadow: none;
	}

	.ecom-hero__mocklabel {
		margin-top: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecom-hero *,
	.ecom-hero *::before,
	.ecom-hero *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---- Điều chỉnh theo markup Bricks thật sinh ra ----
   Bricks bọc mỗi element trong div riêng, nên không thể có <svg> là con trực
   tiếp của một hàng flex do element khác tạo: icon phải nằm TRONG chính element
   chứa chữ. Các rule dưới đây bám cấu trúc đó.
   Icon của hai CTA vẽ bằng pseudo-element (clip-path) chứ không nhúng SVG vào
   text của Bricks button: text của button không đảm bảo giữ nguyên markup, và
   pseudo-element thì aria không đọc như nội dung. */

.ecom-hero .ecom-hero__btn--primary::after {
	content: "";
	width: 16px;
	height: 8px;
	flex: none;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
}

.ecom-hero .ecom-hero__btn--ghost {
	position: relative;
	padding-left: 58px;
}

.ecom-hero .ecom-hero__btn--ghost::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border: 1px solid #c9d8d0;
	border-radius: 50%;
	background: #fff;
}

.ecom-hero .ecom-hero__btn--ghost::after {
	content: "";
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 9px;
	background: var(--eh-green-ink);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* dòng agent: icon nằm trong cùng element với chữ */
.ecom-mock__msg--agent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.ecom-mock__msg--agent svg {
	width: 22px;
	height: 22px;
	flex: none;
	padding: 5px;
	border-radius: 7px;
	background: var(--eh-green);
	color: #fff;
}

/* product list và action chips thụt vào cho thẳng hàng dưới chữ của agent */
.ecom-mock__products,
.ecom-mock__actions {
	margin-left: 30px;
}

.ecom-mock__thumb {
	display: block;
	overflow: hidden;
	background: linear-gradient(145deg, #e8e0d1, #bca98a);
}

.ecom-mock__thumb--alt {
	background: linear-gradient(145deg, #d8e9e6, #77a88b);
}

.ecom-mock__thumb svg {
	display: block;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.92);
}

.ecom-mock__cartitem .ecom-mock__thumb {
	width: 34px;
	height: 34px;
}

.ecom-mock__stock span,
.ecom-mock__toast span {
	min-width: 0;
}

.ecom-mock__cartcta span:last-child {
	flex: none;
	width: 14px;
	height: 8px;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
}

@media (max-width: 700px) {
	.ecom-mock__products,
	.ecom-mock__actions {
		margin-left: 0;
	}

	.ecom-mock__msg--user {
		margin-left: 16px;
	}
}

/* Bricks đặt `.brxe-container{width:1100px}` (width cố định, KHÔNG phải
   max-width) nên container không co ở mobile: ở viewport 390px nó vẫn 1100px và
   khối hội thoại rộng 1068px, bị `overflow:hidden` của hero cắt mất — nhìn thì
   không thấy tràn ngang nhưng nội dung đã bị mất. Ghi đè bằng selector 2 class
   để thắng rule mặc định mà không cần !important. */
.ecom-hero > .brxe-container {
	width: 100%;
	/* Cột nội dung 1392px — khớp token --container-max: 1440px của site và các
	   trang /vi/linh-vuc/ khác. Bricks ghi padding 15px ở specificity ID nên
	   không sửa được bằng class; cộng bù vào max-width để nội dung ra đúng 1392. */
	max-width: calc(1392px + 30px);
	min-width: 0;
	margin-inline: auto;
}

.ecom-hero .ecom-hero__grid,
.ecom-hero .ecom-mock__body {
	min-width: 0;
}

/* ---- Hai sửa lỗi sau khi xem render thật ----

   (a) Element `text` của Bricks bọc nội dung trong <p>, nên svg và span là con
   của <p> chứ không phải của div mang class: `gap` của flex không bao giờ áp
   vào giữa chúng và icon đè lên chữ. `display: contents` cho <p> đưa svg/span
   lên làm con trực tiếp của hàng flex, đồng thời bỏ margin mặc định của <p>.
   (Chỉ áp cho những element cần hàng icon+chữ, không áp toàn cục.)

   (b) Theme có `:root .bricks-button[class*="primary"]:not(.outline)` =
   specificity 0,4,0 nên tô cả hai CTA thành xanh brand, thắng rule 0,2,0 của
   tôi. Nâng lên 0,4,1 (thêm `a` và một class nữa) để thắng mà KHÔNG cần
   !important. Rule `.bricks-button:not(...)` cũng 0,4,0 nên nút ghost cũng bị
   tô xanh — xử lý cùng cách. */

.ecom-hero__eyebrow > p,
.ecom-mock__brand > p,
.ecom-mock__rail > p,
.ecom-mock__agent > p,
.ecom-mock__msg--agent > p,
.ecom-mock__thumb > p,
.ecom-mock__composer > p,
.ecom-mock__stock > p,
.ecom-mock__data > p,
.ecom-mock__cartcta > p,
.ecom-mock__toast > p {
	display: contents;
}

.ecom-hero .ecom-hero__cta > a.ecom-hero__btn.ecom-hero__btn--primary {
	border: 1px solid var(--eh-orange);
	background-color: var(--eh-orange);
	color: #fff;
	box-shadow: 0 10px 23px rgba(207, 63, 23, 0.18);
}

.ecom-hero .ecom-hero__cta > a.ecom-hero__btn.ecom-hero__btn--ghost {
	border: 1px solid transparent;
	background-color: transparent;
	color: #2d3933;
	box-shadow: none;
}

@media (hover: hover) {
	.ecom-hero .ecom-hero__cta > a.ecom-hero__btn.ecom-hero__btn--primary:hover {
		border-color: var(--eh-orange-hi);
		background-color: var(--eh-orange-hi);
	}

	.ecom-hero .ecom-hero__cta > a.ecom-hero__btn.ecom-hero__btn--ghost:hover {
		border-color: var(--eh-line);
		background-color: #fff;
	}
}

.ecom-hero .ecom-hero__cta > a.ecom-hero__btn:focus-visible {
	outline: 3px solid var(--eh-focus);
	outline-offset: 3px;
}

/* cart panel: không ghim CTA xuống đáy bằng margin auto nữa — khi nội dung cao
   hơn hàng grid thì nó bị bo góc của .ecom-mock cắt mất chữ. */
.ecom-mock__cartcta {
	margin-top: 2px;
}

.ecom-mock__cart {
	justify-content: flex-start;
}

/* Trong cart panel 213px, tên SP + giá không đủ chỗ trên một hàng ở 11px nên
   "AirFlow Runner 2" ngắt thành hai dòng. Cho giá xuống dòng riêng, canh phải:
   đọc rõ hơn hẳn so với việc cắt bớt tên bằng ellipsis. */
.ecom-mock__cartitem {
	flex-wrap: wrap;
}

.ecom-mock__cartitem > .ecom-mock__pprice {
	width: 100%;
	margin-top: 4px;
	text-align: right;
}

/* ============================================================================
   25. E-commerce & Retail — Section 02 V2 "Bốn điểm nghẽn làm mất doanh thu"
   design/ecommerce-retail/02-revenue-bottlenecks/{SPEC-V2.md, prototype-v2/}
   Token theo design/SYSTEM.md, tiền tố --rb-. Mọi rule scope dưới
   .ecom-revenue-bottlenecks.
   V2 bỏ hẳn mockup dashboard của V1: visual chính là ảnh bối cảnh commerce
   (attachment #894, đúng file Ecommerce-Retail-BG.jpg) + overlay nhỏ.
   ============================================================================ */
.ecom-revenue-bottlenecks {
	--rb-ink: #0c1922;
	--rb-green: #15803d;
	--rb-green-ink: #066d31;
	--rb-muted: #55626a;
	--rb-line: #dce7e2;
	--rb-paper: #fbfdfc;
	--rb-dark: #09282e;
	--rb-focus: #1268a8;
	/* cam cảnh báo: #f15a2b chỉ 3.37:1 với chữ trắng nên chỉ dùng làm nền khối
	   lớn có chữ trắng ĐẬM cỡ to; chữ nhỏ dùng bản tối hơn */
	--rb-alert: #cf3f17;
	--rb-alert-soft: #fdf1ed;
	--rb-alert-line: #f0c3b4;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #f5faf7 100%);
}

.ecom-revenue-bottlenecks > .brxe-container {
	/* Bricks đặt .brxe-container{width:1100px} cố định — không co ở mobile.
	   Cùng bẫy đã gặp ở Hero. */
	width: 100%;
	/* Cột nội dung 1392px — khớp token --container-max: 1440px của site và các
	   trang /vi/linh-vuc/ khác. Bricks ghi padding 15px ở specificity ID nên
	   không sửa được bằng class; cộng bù vào max-width để nội dung ra đúng 1392. */
	max-width: calc(1392px + 30px);
	min-width: 0;
	margin-inline: auto;
}

/* ---------------- header ---------------- */
.rb__head {
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	column-gap: 72px;
	row-gap: 22px;
	align-items: end;
	width: 100%;
}

.rb__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--rb-green-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.rb__eyebrow svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.ecom-revenue-bottlenecks h2.rb__title {
	margin: 16px 0 0;
	color: var(--rb-ink);
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.14;
	letter-spacing: -0.035em;
	font-weight: 800;
}

.rb__title em {
	font-style: normal;
	color: var(--rb-green);
}

.rb__lead {
	margin: 0 0 6px;
	color: var(--rb-muted);
	font-size: 15px;
	line-height: 1.75;
}

/* ---------------- khung trải nghiệm ---------------- */
.rb__experience {
	grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
	width: 100%;
	margin-top: 42px;
	overflow: hidden;
	border: 1px solid var(--rb-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(18, 72, 41, 0.1);
}

.rb__stage {
	position: relative;
	min-height: 540px;
	overflow: hidden;
}

.rb__stage .brxe-image,
.rb__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 48% center;
}

.rb__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(7, 29, 16, 0.1), rgba(7, 29, 16, 0.02) 43%, rgba(7, 29, 16, 0.34)),
		linear-gradient(0deg, rgba(6, 27, 19, 0.72), transparent 44%);
}

.rb__stagelabel {
	position: absolute;
	top: 18px;
	left: 18px;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 12px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.92);
	color: #3f4d46;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1;
}

.rb__stagelabel::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--rb-green);
}

/* ---- pin trên ảnh: button thật, mỗi pin chọn một tab ---- */
.rb__pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rb__pin {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: 224px;
	padding: 9px 11px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 10px 25px rgba(9, 36, 20, 0.14);
	color: #2c3a33;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
	transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.rb__pin-num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	background: #edf2ef;
	color: #5d6b63;
	font-size: 12px;
	font-weight: 800;
	transition: background-color 200ms ease, color 200ms ease;
}

.rb__pin-text b {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.rb__pin-text small {
	display: block;
	margin-top: 2px;
	color: #65706a;
	font-size: 11px;
	line-height: 1.3;
}

.rb__pin[aria-pressed="true"] {
	border-color: var(--rb-alert-line);
	background: #fff;
}

.rb__pin[aria-pressed="true"] .rb__pin-num {
	background: var(--rb-alert);
	color: #fff;
}

@media (hover: hover) {
	.rb__pin:hover {
		background: #fff;
		transform: translateY(-1px);
	}
}

.rb__pin:focus-visible {
	outline: 3px solid #85e7ae;
	outline-offset: 3px;
}

.rb__pin--1 { left: 20px; top: 108px }
.rb__pin--2 { right: 20px; top: 178px }
.rb__pin--3 { left: 74px; bottom: 148px }
.rb__pin--4 { right: 18px; bottom: 96px }

/* ---- caption dưới ảnh: đổi theo tab ---- */
.rb__caption {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
}

.rb__caption[hidden] {
	display: none;
}

.rb__caption-num {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	margin: 0;
	border-radius: 13px;
	background: var(--rb-alert);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

.rb__caption-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.rb__caption-sub {
	margin: 4px 0 0;
	color: #cbd6d1;
	font-size: 13px;
	line-height: 1.45;
}

/* ---------------- panel chi tiết ---------------- */
.rb__panels {
	min-width: 0;
	padding: 30px 28px;
	background: #fff;
}

.rb__panel[hidden] {
	display: none;
}

.rb__panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.rb__panel-top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.rb__panel-num {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	margin: 0;
	border-radius: 12px;
	background: var(--rb-alert-soft);
	color: #b53a12;
	font-size: 15px;
	font-weight: 800;
}

.rb__kicker {
	margin: 0;
	color: #b53a12;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
}

.ecom-revenue-bottlenecks h3.rb__panel-title {
	margin: 7px 0 0;
	color: var(--rb-ink);
	font-size: 24px;
	line-height: 1.32;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.rb__desc {
	margin: 0;
	color: var(--rb-muted);
	font-size: 15px;
	line-height: 1.75;
}

.rb__signal {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--rb-line);
	border-bottom: 1px solid var(--rb-line);
}

.rb__signal svg {
	width: 30px;
	height: 30px;
	flex: none;
	padding: 7px;
	border-radius: 9px;
	background: var(--rb-alert-soft);
	color: #b53a12;
}

.rb__signal b {
	display: block;
	color: var(--rb-ink);
	font-size: 14px;
	font-weight: 700;
}

.rb__signal small {
	display: block;
	margin-top: 3px;
	color: #65706a;
	font-size: 13px;
	line-height: 1.45;
}

.rb__micro {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.rb__microrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	min-width: 0;
	padding: 10px 11px;
	border: 1px solid var(--rb-line);
	border-radius: 10px;
}

.rb__microrow svg {
	width: 28px;
	height: 28px;
	flex: none;
	padding: 7px;
	border-radius: 8px;
	background: #edf2ef;
	color: #61706a;
}

.rb__microrow > span:nth-child(2) {
	flex: 1;
	min-width: 0;
}

.rb__microrow small {
	display: block;
	color: #65706a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rb__microrow b {
	display: block;
	margin-top: 3px;
	color: var(--rb-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.rb__microflag {
	flex: none;
	padding: 5px 9px;
	border-radius: 8px;
	background: var(--rb-alert-soft);
	color: #b53a12;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.rb__opportunity {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px;
	border-radius: 12px;
	background: var(--rb-dark);
	color: #fff;
}

.rb__opportunity svg {
	width: 30px;
	height: 30px;
	flex: none;
	padding: 7px;
	border-radius: 9px;
	background: #144629;
	color: #85e7ae;
}

.rb__opportunity b {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.rb__opportunity small {
	display: block;
	margin-top: 5px;
	color: #b8cdc5;
	font-size: 14px;
	line-height: 1.6;
}

.ecom-revenue-bottlenecks .rb__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: start;
	min-height: 44px;
	padding: 10px 2px;
	border: 0;
	background: none;
	color: var(--rb-green-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.ecom-revenue-bottlenecks .rb__cta::after {
	content: "";
	width: 15px;
	height: 8px;
	flex: none;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
	transition: transform 200ms ease;
}

@media (hover: hover) {
	.ecom-revenue-bottlenecks .rb__cta:hover {
		text-decoration: underline;
	}

	.ecom-revenue-bottlenecks .rb__cta:hover::after {
		transform: translateX(3px);
	}
}

.ecom-revenue-bottlenecks .rb__cta:focus-visible {
	outline: 3px solid var(--rb-focus);
	outline-offset: 3px;
}

/* ---------------- hàng tab ---------------- */
.rb__tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: 13px 0 0;
}

.ecom-revenue-bottlenecks .rb__tab {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 60px;
	padding: 10px 12px;
	border: 1px solid var(--rb-line);
	border-radius: 12px;
	background: #fff;
	color: #4f5d56;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.rb__tab-num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	background: #edf2ef;
	color: #5d6b63;
	font-size: 12px;
	font-weight: 800;
	transition: background-color 200ms ease, color 200ms ease;
}

.rb__tab-text b {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
}

.rb__tab-text small {
	display: block;
	margin-top: 2px;
	color: #65706a;
	font-size: 12px;
	line-height: 1.3;
}

.ecom-revenue-bottlenecks .rb__tab[aria-selected="true"] {
	border-color: var(--rb-alert-line);
	background: var(--rb-alert-soft);
	color: #a8340f;
}

.ecom-revenue-bottlenecks .rb__tab[aria-selected="true"] .rb__tab-num {
	background: var(--rb-alert);
	color: #fff;
}

.ecom-revenue-bottlenecks .rb__tab[aria-selected="true"] .rb__tab-text small {
	color: #9b5d48;
}

@media (hover: hover) {
	.ecom-revenue-bottlenecks .rb__tab:hover {
		border-color: #c4d5cd;
	}
}

.ecom-revenue-bottlenecks .rb__tab:focus-visible {
	outline: 3px solid var(--rb-focus);
	outline-offset: 3px;
}

/* ---------------- tablet ---------------- */
@media (max-width: 1000px) {
	.rb__head {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 32px;
	}

	.rb__experience {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		margin-top: 32px;
	}

	.rb__stage {
		min-height: 520px;
	}

	.rb__pin {
		max-width: 180px;
		padding: 8px 9px;
	}

	.rb__pin-text small {
		display: none;
	}

	.rb__pin--3 {
		left: 20px;
	}

	.rb__panels {
		padding: 24px 20px;
	}
}

/* ---------------- mobile: ảnh trên, nội dung dưới, tab số 01–04 ---------------- */
@media (max-width: 700px) {
	.rb__experience {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 17px;
	}

	.rb__stage {
		min-height: 340px;
	}

	.rb__stage .brxe-image,
	.rb__stage img {
		object-position: 52% center;
	}

	/* SPEC: không hiển thị bốn pin cùng lúc trên ảnh để tránh rối */
	.rb__pins {
		display: none;
	}

	.rb__caption {
		left: 13px;
		right: 13px;
		bottom: 13px;
		gap: 10px;
	}

	.rb__caption-num {
		width: 40px;
		height: 40px;
		font-size: 12px;
	}

	.rb__caption-title {
		font-size: 15px;
	}

	.rb__caption-sub {
		font-size: 12px;
	}

	.rb__panels {
		padding: 21px 16px;
	}

	.ecom-revenue-bottlenecks h3.rb__panel-title {
		font-size: 21px;
	}

	/* hàng số 01–04 cuộn ngang */
	.rb__tabs {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.rb__tabs::-webkit-scrollbar {
		display: none;
	}

	.ecom-revenue-bottlenecks .rb__tab {
		flex: none;
		justify-content: center;
		width: 56px;
		min-width: 56px;
		min-height: 52px;
		padding: 0;
	}

	.rb__tab-text {
		display: none;
	}
}

/* Đổi tab: fade + nhích nhẹ 200ms (trong khoảng 180–250ms của SPEC).
   Chạy khi panel/caption chuyển từ display:none sang hiện — KHÔNG autoplay. */
@keyframes rb-in {
	from { opacity: 0; transform: translateY(6px) }
	to { opacity: 1; transform: none }
}

.rb__panel:not([hidden]),
.rb__caption:not([hidden]) {
	animation: rb-in 200ms ease both;
}

@media (prefers-reduced-motion: reduce) {
	.ecom-revenue-bottlenecks *,
	.ecom-revenue-bottlenecks *::before,
	.ecom-revenue-bottlenecks *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Caption là chữ trắng nằm trên ảnh thật: vùng dưới của ảnh này có quầy gỗ rất
   sáng nên gradient .72 của prototype không đủ. Làm đậm dải dưới và thêm một
   lớp scrim cục bộ ngay sau caption -> đọc được bất kể ảnh sau này đổi.
   Đây là lệch có chủ ý so với mockup (mockup chỉ dựa vào gradient). */
.ecom-revenue-bottlenecks .rb__shade {
	background:
		linear-gradient(90deg, rgba(7, 29, 16, 0.1), rgba(7, 29, 16, 0.02) 43%, rgba(7, 29, 16, 0.34)),
		linear-gradient(0deg, rgba(4, 20, 14, 0.88) 0%, rgba(4, 20, 14, 0.55) 26%, transparent 52%);
}

.ecom-revenue-bottlenecks .rb__caption {
	padding: 12px 14px;
	border-radius: 14px;
	background: linear-gradient(0deg, rgba(4, 18, 13, 0.62), rgba(4, 18, 13, 0.42));
}

/* "01 / 04" không vừa ô vuông 46px ở 13px -> cho ô tự giãn, không ngắt dòng */
.ecom-revenue-bottlenecks .rb__caption-num {
	width: auto;
	min-width: 52px;
	height: 44px;
	padding: 0 10px;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.ecom-revenue-bottlenecks .rb__caption-num {
		min-width: 46px;
		height: 40px;
		padding: 0 8px;
	}
}

/* Theme có `.brxe-text-basic { color: var(--text-copy) }` — màu đặt TRỰC TIẾP
   trên element con, nên `color:#fff` của .rb__caption cha không hề được thừa
   hưởng: tiêu đề caption ra màu xám #676e7b trên scrim tối, đo được 3.15:1.
   Mọi text-basic nằm trong vùng tối phải khai màu tường minh. */
.ecom-revenue-bottlenecks .rb__caption .rb__caption-title {
	color: #fff;
}

.ecom-revenue-bottlenecks .rb__caption .rb__caption-sub {
	color: #dfe8e4;
}

/* ============================================================================
   26. E-commerce & Retail — Section 03 "Một Agent cho toàn bộ hành trình"
   design/ecommerce-retail/03-commerce-journey/{SPEC.md, prototype/}
   Token dùng CHUNG giá trị với Hero (--eh-*) và Điểm nghẽn V2 (--rb-*); theo
   SYSTEM.md §1 mỗi section khai token trên chính nó với tiền tố riêng, giá trị
   thì không được đổi. Bổ sung nhóm on-dark vì section này nền tối.
   ============================================================================ */
.ecom-commerce-journey {
	--cj-ink: #0c1922;
	--cj-green: #15803d;
	--cj-green-ink: #066d31;
	--cj-muted: #55626a;
	--cj-line: #dce7e2;
	--cj-paper: #fbfdfc;
	--cj-focus: #1268a8;
	/* on-dark: nền section + focus ring trên nền tối theo SYSTEM.md §4 */
	--cj-dark: #0b2114;
	--cj-dark-2: #112f1e;
	--cj-dark-line: #2b553d;
	--cj-on-dark: #ffffff;
	--cj-on-dark-body: #b6c8c0;
	--cj-on-dark-soft: #90b49f;
	--cj-mint: #72d89c;
	--cj-focus-dark: #85e7ae;
	position: relative;
	overflow: hidden;
	background: var(--cj-dark);
}

.ecom-commerce-journey > .brxe-container {
	/* Bricks đặt .brxe-container{width:1100px} cố định — cùng bẫy đã gặp ở Hero */
	width: 100%;
	/* Cột nội dung 1392px — khớp token --container-max: 1440px của site và các
	   trang /vi/linh-vuc/ khác. Bricks ghi padding 15px ở specificity ID nên
	   không sửa được bằng class; cộng bù vào max-width để nội dung ra đúng 1392. */
	max-width: calc(1392px + 30px);
	min-width: 0;
	margin-inline: auto;
}

/* ---------------- header ---------------- */
.cj__head {
	max-width: 800px;
	margin-inline: auto;
	text-align: center;
}

.cj__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--cj-mint);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.cj__eyebrow svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.ecom-commerce-journey h2.cj__title {
	margin: 16px 0 0;
	color: var(--cj-on-dark);
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.14;
	letter-spacing: -0.035em;
	font-weight: 800;
}

.cj__title em {
	font-style: normal;
	color: var(--cj-mint);
}

.ecom-commerce-journey .cj__lead {
	max-width: 720px;
	margin: 14px auto 0;
	color: var(--cj-on-dark-body);
	font-size: 15px;
	line-height: 1.75;
}

/* ---------------- 3 tab giai đoạn ---------------- */
.cj__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: 42px 0 11px;
}

.ecom-commerce-journey .cj__tab {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 18px;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
	border: 1px solid var(--cj-dark-line);
	border-radius: 13px;
	background: var(--cj-dark-2);
	color: var(--cj-on-dark-body);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.cj__tab-num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #1a432b;
	color: var(--cj-mint);
	font-size: 13px;
	font-weight: 800;
	transition: background-color 200ms ease, color 200ms ease;
}

.cj__tab-text {
	min-width: 0;
}

.cj__tab-text small {
	display: block;
	color: var(--cj-on-dark-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.2;
}

.cj__tab-text b {
	display: block;
	margin-top: 3px;
	color: var(--cj-on-dark);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.cj__tab-text em {
	display: block;
	margin-top: 2px;
	color: var(--cj-on-dark-body);
	font-size: 12px;
	font-style: normal;
	line-height: 1.35;
}

.cj__tab-arrow {
	width: 16px;
	height: 8px;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
	opacity: 0.55;
}

.ecom-commerce-journey .cj__tab[aria-selected="true"] {
	border-color: #6abd8d;
	background: #f1faf5;
	color: var(--cj-green-ink);
}

.ecom-commerce-journey .cj__tab[aria-selected="true"] .cj__tab-num {
	background: var(--cj-green);
	color: #fff;
}

.ecom-commerce-journey .cj__tab[aria-selected="true"] .cj__tab-text small {
	color: var(--cj-green-ink);
}

.ecom-commerce-journey .cj__tab[aria-selected="true"] .cj__tab-text b {
	color: var(--cj-ink);
}

.ecom-commerce-journey .cj__tab[aria-selected="true"] .cj__tab-text em {
	color: #65706a;
}

@media (hover: hover) {
	.ecom-commerce-journey .cj__tab:hover {
		border-color: #3f7053;
	}
}

.ecom-commerce-journey .cj__tab:focus-visible {
	outline: 3px solid var(--cj-focus-dark);
	outline-offset: 3px;
}

/* ---------------- workspace ---------------- */
.cj__workspace {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 21px;
	background: #fff;
	box-shadow: 0 26px 65px rgba(0, 0, 0, 0.2);
}

.cj__panel[hidden] {
	display: none;
}

/* mỗi panel tự là lưới 2 cột (không dùng subgrid: hỗ trợ trình duyệt còn lệch
   và ở đây không cần chia sẻ track với phần tử cha) */
.cj__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
	min-width: 0;
}

/* ---- cột copy ---- */
.cj__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 34px 28px;
	border-right: 1px solid #dfe8e3;
	background: linear-gradient(145deg, #f1faf5, #fff);
}

.cj__kicker {
	margin: 0;
	color: var(--cj-green-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
}

.ecom-commerce-journey h3.cj__stage-title {
	margin: 0;
	color: var(--cj-ink);
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.cj__stage-desc {
	margin: 0;
	color: var(--cj-muted);
	font-size: 15px;
	line-height: 1.75;
}

.cj__jobs {
	min-width: 0;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid #dfe8e3;
}

.cj__jobs-label {
	margin: 0 0 4px;
	color: #65706a;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cj__job {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid #e3eae6;
}

.cj__job svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
	background: #e2f3ea;
	color: var(--cj-green-ink);
}

.cj__job b {
	display: block;
	color: var(--cj-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.cj__job small {
	display: block;
	margin-top: 3px;
	color: #65706a;
	font-size: 13px;
	line-height: 1.5;
}

.cj__result {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 0;
	padding: 14px;
	border-radius: 12px;
	background: #0c2b19;
	color: #fff;
}

.cj__result svg {
	width: 30px;
	height: 30px;
	flex: none;
	padding: 7px;
	border-radius: 9px;
	background: #185230;
	color: var(--cj-mint);
}

.cj__result b {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.cj__result small {
	display: block;
	margin-top: 5px;
	color: var(--cj-on-dark-body);
	font-size: 14px;
	line-height: 1.6;
}

/* ---- cột product UI ---- */
.cj__ui {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 18px 18px 13px;
}

.cj__ui-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e9e5;
}

.cj__ui-agent {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1;
	min-width: 0;
	margin: 0;
	color: var(--cj-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.cj__ui-agent svg {
	width: 30px;
	height: 30px;
	flex: none;
	padding: 7px;
	border-radius: 9px;
	background: var(--cj-green);
	color: #fff;
}

.cj__ui-agent small {
	display: block;
	margin-top: 2px;
	color: var(--cj-green-ink);
	font-size: 12px;
	font-weight: 600;
}

.cj__ui-agent small::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 5px;
	border-radius: 50%;
	background: #18af57;
}

.cj__handoff {
	flex: none;
	margin: 0;
	padding: 7px 10px;
	border: 1px solid #d7e2dc;
	border-radius: 8px;
	background: #fff;
	color: #5b6a62;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.cj__ui-body {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 168px;
	flex: 1;
	min-width: 0;
}

/* stepper dọc */
.cj__steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 18px 6px;
	border-right: 1px solid #e2e9e5;
	text-align: center;
}

.cj__step {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	margin: 0;
	border: 1px solid #cedbd4;
	border-radius: 50%;
	color: #74827b;
	font-size: 12px;
	font-weight: 700;
}

.cj__step--on {
	border-color: var(--cj-green);
	background: var(--cj-green);
	color: #fff;
}

.cj__step-line {
	width: 1px;
	height: 26px;
	margin: 0;
	background: #c9dcd2;
}

.cj__steps-note {
	margin: 12px 0 0;
	color: #65706a;
	font-size: 11px;
	line-height: 1.35;
}

/* hội thoại */
.cj__chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 16px 14px;
}

.cj__customer {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 10px 11px;
	border: 1px solid #e0e8e4;
	border-radius: 10px;
	background: #f5f8f6;
}

.cj__customer-avatar {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	margin: 0;
	border-radius: 50%;
	background: #e6ece9;
	color: #55635c;
	font-size: 12px;
	font-weight: 800;
}

.cj__customer small {
	display: block;
	color: #65706a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cj__customer b {
	display: block;
	margin-top: 3px;
	color: var(--cj-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.cj__understood {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	min-width: 0;
}

.cj__understood > svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
	background: var(--cj-green);
	color: #fff;
}

.cj__understood small {
	display: block;
	color: #65706a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cj__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.cj__chips span {
	padding: 5px 9px;
	border-radius: 8px;
	background: #e7f6ee;
	color: var(--cj-green-ink);
	font-size: 12px;
	font-weight: 600;
}

.cj__card {
	min-width: 0;
	padding: 11px;
	border: 1px solid var(--cj-line);
	border-radius: 12px;
}

.cj__card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 9px;
}

.cj__card-head > span:first-child {
	flex: 1;
	min-width: 0;
}

.cj__card-head small {
	display: block;
	color: #65706a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cj__card-head b {
	display: block;
	margin-top: 3px;
	color: var(--cj-ink);
	font-size: 14px;
	font-weight: 700;
}

.cj__card-flag {
	flex: none;
	color: var(--cj-green-ink);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.cj__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	min-width: 0;
}

.cj__product {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 9px;
	border: 1px solid #e0e8e4;
	border-radius: 10px;
}

.cj__product--on {
	border-color: #9fd1b4;
	background: #f1f9f5;
}

.cj__thumb {
	display: block;
	width: 36px;
	height: 36px;
	flex: none;
	overflow: hidden;
	border-radius: 9px;
	background: linear-gradient(145deg, #ede5d7, #baa78a);
}

.cj__thumb--alt {
	background: linear-gradient(145deg, #d9e9e6, #74a789);
}

.cj__thumb svg {
	display: block;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.92);
}

.cj__pbody {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.cj__pname {
	margin: 0;
	color: var(--cj-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.cj__pmeta {
	margin: 2px 0 0;
	color: #65706a;
	font-size: 11px;
	line-height: 1.3;
}

.cj__pprice {
	margin: 3px 0 0;
	color: var(--cj-ink);
	font-size: 13px;
	font-weight: 700;
}

.cj__pmatch {
	margin: 0;
	flex: none;
	color: var(--cj-green-ink);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* hàng dữ liệu dạng nhãn - giá trị (dùng cho tab 02 và 03) */
.cj__rows {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-top: 4px;
}

.cj__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 9px 0;
	border-top: 1px solid #eaf0ed;
}

.cj__row span:first-child {
	flex: 1;
	min-width: 0;
	color: #65706a;
	font-size: 13px;
}

.cj__row b {
	flex: none;
	color: var(--cj-ink);
	font-size: 13px;
	font-weight: 700;
	text-align: right;
}

.cj__answer {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	min-width: 0;
}

.cj__answer > svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
	background: var(--cj-green);
	color: #fff;
}

.cj__answer span {
	min-width: 0;
	padding: 10px 12px;
	border-radius: 3px 11px 11px 11px;
	background: #f2f7f4;
	color: #2f3b35;
	font-size: 13px;
	line-height: 1.6;
}

.cj__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: 35px;
}

.cj__action {
	margin: 0;
	padding: 7px 10px;
	border: 1px solid #d8e3dd;
	border-radius: 8px;
	background: #fff;
	color: #55635c;
	font-size: 12px;
	font-weight: 600;
}

.cj__action--on {
	border-color: #bbdccb;
	background: #e4f5ec;
	color: var(--cj-green-ink);
}

/* context panel */
.cj__context {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	padding: 16px 12px;
	border-left: 1px solid #e2e9e5;
	background: var(--cj-paper);
}

.cj__context-label {
	margin: 0 0 2px;
	color: #65706a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
}

.cj__ctx {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #e4eae7;
}

.cj__ctx svg {
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 2px;
	color: var(--cj-green-ink);
}

.cj__ctx b {
	display: block;
	color: var(--cj-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.cj__ctx small {
	display: block;
	margin-top: 2px;
	color: #65706a;
	font-size: 12px;
	line-height: 1.35;
}

.cj__next {
	position: relative;
	margin: 12px 0 0;
	padding: 11px;
	border: 1px solid #c7e0d3;
	border-radius: 10px;
	background: #eff8f4;
}

.cj__next small {
	display: block;
	color: var(--cj-green-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cj__next b {
	display: block;
	margin-top: 3px;
	color: var(--cj-ink);
	font-size: 14px;
	font-weight: 700;
}

.cj__next em {
	display: block;
	margin-top: 3px;
	color: #65706a;
	font-size: 12px;
	font-style: normal;
	line-height: 1.45;
}

/* chân UI */
.cj__ui-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding-top: 11px;
	border-top: 1px solid #e2e9e5;
	color: #66746d;
	font-size: 11px;
}

.cj__ui-foot svg {
	width: 20px;
	height: 20px;
	flex: none;
	padding: 4px;
	margin-right: 5px;
	border-radius: 6px;
	background: #e7f5ed;
	color: var(--cj-green-ink);
	vertical-align: -6px;
}

.cj__mocklabel {
	margin-left: auto;
	color: #65706a;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
}

/* ---------------- dải continuity ---------------- */
.cj__continuity {
	display: grid;
	grid-template-columns: 230px repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 16px;
	width: 100%;
	margin-top: 12px;
	padding: 16px 18px;
	border: 1px solid var(--cj-dark-line);
	border-radius: 14px;
	background: var(--cj-dark-2);
}

.cj__continuity-label {
	margin: 0;
	color: var(--cj-on-dark-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.4;
}

.cj__cont {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding-left: 16px;
	border-left: 1px solid #315540;
}

.cj__cont-num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	background: #1a4a2e;
	color: var(--cj-mint);
	font-size: 12px;
	font-weight: 800;
}

.cj__cont b {
	display: block;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.cj__cont small {
	display: block;
	margin-top: 3px;
	color: var(--cj-on-dark-body);
	font-size: 12px;
	line-height: 1.4;
}

/* ---------------- tablet ---------------- */
@media (max-width: 1000px) {
	.cj__tabs {
		margin-top: 32px;
	}

	.ecom-commerce-journey .cj__tab {
		grid-template-columns: 34px minmax(0, 1fr);
		padding: 11px 12px;
	}

	.cj__tab-arrow {
		display: none;
	}

	.cj__panel {
		grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
	}

	.cj__copy {
		padding: 26px 20px;
	}

	.cj__ui-body {
	display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
	}

	/* SPEC: tablet giữ hai cột, ẨN context panel */
	.cj__context {
		display: none;
	}

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

	.cj__continuity-label {
		grid-column: 1 / -1;
	}

	.cj__cont:first-of-type {
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------------- mobile: tab số 01–03, một cột ---------------- */
@media (max-width: 700px) {
	.cj__tabs {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.cj__tabs::-webkit-scrollbar {
		display: none;
	}

	.ecom-commerce-journey .cj__tab {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		flex: none;
		width: 58px;
		min-width: 58px;
		height: 54px;
		padding: 0;
	}

	.cj__tab-text {
		display: none;
	}

	.cj__workspace {
		border-radius: 17px;
	}

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

	.cj__copy {
		padding: 22px 17px;
		border-right: 0;
		border-bottom: 1px solid #dfe8e3;
	}

	.cj__ui {
		padding: 14px 12px 11px;
	}

	.cj__ui-body {
	display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.cj__steps {
		display: none;
	}

	.cj__handoff {
		display: none;
	}

	.cj__chat {
		padding: 14px 0;
	}

	/* SPEC: mobile chỉ giữ MỘT product/result card nổi bật */
	.cj__products {
	display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.cj__products > .cj__product + .cj__product {
		display: none;
	}

	.cj__actions {
		flex-direction: column;
		align-items: stretch;
		margin-left: 0;
	}

	.cj__action {
		text-align: center;
	}

	.cj__ui-foot {
		gap: 10px;
		font-size: 10px;
	}

	.cj__mocklabel {
		width: 100%;
		margin-left: 0;
	}

	.cj__continuity {
	display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 14px;
	}

	.cj__cont {
		padding: 10px 0 0;
		border-left: 0;
		border-top: 1px solid #315540;
	}

	.cj__cont:first-of-type {
		border-top: 0;
	}
}

/* đổi tab: fade + nhích 200ms, không autoplay */
@keyframes cj-in {
	from { opacity: 0; transform: translateY(6px) }
	to { opacity: 1; transform: none }
}

.cj__panel:not([hidden]) {
	animation: cj-in 200ms ease both;
}

@media (prefers-reduced-motion: reduce) {
	.ecom-commerce-journey *,
	.ecom-commerce-journey *::before,
	.ecom-commerce-journey *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Thẻ "TIẾP THEO" là <button> thô nên nhận style mặc định của theme (nền tối,
   chữ tối, chồng nhau). Trả nó về dạng khối bấm được, thừa hưởng màu của .cj__next. */
.ecom-commerce-journey .cj__next button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.ecom-commerce-journey .cj__next button:focus-visible {
	outline: 3px solid var(--cj-focus);
	outline-offset: 4px;
}

/* Cột chat rộng ~540px chia 2 thẻ sản phẩm: sau khi trừ thumb và badge thì tên
   chỉ còn ~110px nên "AirFlow Runner 2" ngắt thành hai dòng. Cho badge xuống
   dòng riêng, canh phải — tên sản phẩm được trọn chiều ngang. */
.ecom-commerce-journey .cj__product {
	flex-wrap: wrap;
}

.ecom-commerce-journey .cj__product > .cj__pmatch {
	width: 100%;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #e6ede9;
	text-align: right;
}

/* ============================================================================
   27. E-commerce & Retail — Section 05 "Kết nối Commerce Stack"
   design/ecommerce-retail/05-commerce-stack/{SPEC.md, prototype/}
   Token dùng chung giá trị với Hero (--eh-*), Điểm nghẽn V2 (--rb-*) và
   Hành trình (--cj-*); tiền tố riêng --cs-* theo SYSTEM.md §1.
   ============================================================================ */
.ecom-commerce-stack {
	--cs-ink: #0c1922;
	--cs-green: #15803d;
	--cs-green-ink: #066d31;
	--cs-muted: #55626a;
	--cs-line: #dce7e2;
	--cs-paper: #fbfdfc;
	--cs-dark: #09282e;
	--cs-focus: #1268a8;
	--cs-focus-dark: #85e7ae;
	--cs-mint: #72d89c;
	/* ba trạng thái quyền: đọc / cần duyệt / không truy cập */
	--cs-read: #066d31;
	--cs-read-bg: #e7f6ee;
	--cs-warn: #9a5b00;
	--cs-warn-bg: #fdf3e3;
	--cs-deny: #a8341b;
	--cs-deny-bg: #fdefeb;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f5faf7 0%, #fff 100%);
}

.ecom-commerce-stack > .brxe-container {
	width: 100%;
	/* Cột nội dung 1392px — khớp token --container-max: 1440px của site và các
	   trang /vi/linh-vuc/ khác. Bricks ghi padding 15px ở specificity ID nên
	   không sửa được bằng class; cộng bù vào max-width để nội dung ra đúng 1392. */
	max-width: calc(1392px + 30px);
	min-width: 0;
	margin-inline: auto;
}

/* ---------------- header ---------------- */
.cs__head {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	column-gap: 72px;
	row-gap: 22px;
	align-items: end;
	width: 100%;
}

.cs__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--cs-green-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.cs__eyebrow svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.ecom-commerce-stack h2.cs__title {
	margin: 16px 0 0;
	color: var(--cs-ink);
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.14;
	letter-spacing: -0.035em;
	font-weight: 800;
}

.cs__title em {
	font-style: normal;
	color: var(--cs-green);
}

.cs__lead {
	margin: 0 0 6px;
	color: var(--cs-muted);
	font-size: 15px;
	line-height: 1.75;
}

/* ---------------- studio ---------------- */
.cs__studio {
	display: grid;
	grid-template-columns: 258px minmax(0, 1fr);
	width: 100%;
	margin-top: 42px;
	overflow: hidden;
	border: 1px solid var(--cs-line);
	border-radius: 21px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(18, 72, 41, 0.1);
}

/* rail 6 lớp */
.cs__rail {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding: 18px 12px;
	border-right: 1px solid #e1e9e5;
	background: #f7faf8;
}

.cs__rail-label {
	margin: 0 0 5px;
	padding: 0 8px;
	color: #65706a;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ecom-commerce-stack .cs__tab {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 20px;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 9px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: transparent;
	color: #5e6b65;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.cs__tab-ico {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	color: #fff;
}

.cs__tab-ico svg {
	width: 18px;
	height: 18px;
}

.cs__tab-ico--1 { background: #5f55cf }
.cs__tab-ico--2 { background: #d16f1f }
.cs__tab-ico--3 { background: #15a652 }
.cs__tab-ico--4 { background: #3b75d4 }
.cs__tab-ico--5 { background: #d9552f }
.cs__tab-ico--6 { background: #0e7d9c }

.cs__tab-text {
	min-width: 0;
}

.cs__tab-text b {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
}

.cs__tab-text small {
	display: block;
	margin-top: 2px;
	color: #65706a;
	font-size: 12px;
	line-height: 1.3;
}

.cs__tab-num {
	color: #96a29c;
	font-size: 12px;
	font-weight: 700;
	text-align: right;
}

.ecom-commerce-stack .cs__tab[aria-selected="true"] {
	border-color: #b6d9c7;
	background: #fff;
	color: var(--cs-ink);
	box-shadow: 0 7px 17px rgba(18, 72, 41, 0.07);
}

.ecom-commerce-stack .cs__tab[aria-selected="true"] .cs__tab-num {
	color: var(--cs-green-ink);
}

@media (hover: hover) {
	.ecom-commerce-stack .cs__tab:hover {
		background: #eef5f1;
	}
}

.ecom-commerce-stack .cs__tab:focus-visible {
	outline: 3px solid var(--cs-focus);
	outline-offset: 2px;
}

/* ---------------- panel ---------------- */
.cs__panels {
	min-width: 0;
	padding: 23px 25px;
}

.cs__panel[hidden] {
	display: none;
}

.cs__panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.cs__panel-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e2e9e5;
}

.cs__panel-head > .cs__headtext {
	flex: 1;
	min-width: 0;
}

.cs__kicker {
	margin: 0;
	color: #6a5fd0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ecom-commerce-stack h3.cs__panel-title {
	margin: 5px 0 0;
	color: var(--cs-ink);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.cs__status {
	flex: none;
	margin: 0;
	padding: 7px 11px;
	border-radius: 20px;
	background: var(--cs-read-bg);
	color: var(--cs-read);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.cs__status::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--cs-green);
}

/* ---- sơ đồ kiến trúc ---- */
.cs__arch {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1.2fr) 58px minmax(0, 1fr);
	align-items: center;
	gap: 0;
	min-width: 0;
}

.cs__systems,
.cs__caps {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.cs__system {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 9px 10px;
	border: 1px solid #e3eae6;
	border-radius: 10px;
	background: #fff;
}

.cs__system--on {
	border-color: #9fd1b4;
	background: #f2faf6;
}

.cs__system-ico {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	background: #edf2ef;
	color: #55635c;
	font-size: 12px;
	font-weight: 800;
}

.cs__system-body {
	flex: 1;
	min-width: 0;
}

.cs__system-name {
	margin: 0;
	color: var(--cs-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.cs__system-sub {
	margin: 2px 0 0;
	color: #65706a;
	font-size: 11px;
	line-height: 1.3;
}

/* trạng thái kết nối: chữ, KHÔNG khẳng định native integration */
.cs__system-state {
	flex: none;
	margin: 0;
	padding: 4px 8px;
	border-radius: 7px;
	background: #f1f5f3;
	color: #5b6a62;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.cs__system--on .cs__system-state {
	background: var(--cs-read-bg);
	color: var(--cs-read);
}

/* dòng dữ liệu giữa các cột */
.cs__flow {
	position: relative;
	align-self: stretch;
	min-height: 120px;
}

.cs__flow::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: #b6d7c6;
}

.cs__flow::after {
	content: "";
	position: absolute;
	right: 0;
	top: calc(50% - 4px);
	width: 9px;
	height: 9px;
	background: #62ac81;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.cs__flow-labels {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	margin: 0;
	pointer-events: none;
}

.cs__flow-labels span {
	padding: 3px 6px;
	border-radius: 6px;
	background: #fff;
	color: #65706a;
	font-size: 11px;
	font-weight: 600;
}

/* thẻ Agent ở giữa */
.cs__agent {
	min-width: 0;
	margin: 0 10px;
	padding: 16px 14px;
	border: 1px solid #8bcbaa;
	border-radius: 15px;
	background: linear-gradient(145deg, #eff9f4, #fff);
	box-shadow: 0 12px 27px rgba(15, 140, 67, 0.12);
	text-align: center;
}

.cs__agent-logo {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border-radius: 13px;
	background: linear-gradient(135deg, #17a753, #087435);
	color: #fff;
}

.cs__agent-logo svg {
	width: 22px;
	height: 22px;
}

.cs__agent-label {
	margin: 8px 0 0;
	color: #65706a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cs__agent-name {
	margin: 3px 0 0;
	color: var(--cs-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.cs__scope {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 0;
	padding: 8px 10px;
	border: 1px solid #dfe8e3;
	border-radius: 8px;
	background: #fff;
	color: #55635c;
	font-size: 12px;
	line-height: 1.35;
	text-align: left;
}

.cs__scope svg {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--cs-green-ink);
}

.cs__guardrail {
	display: inline-block;
	margin: 9px 0 0;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--cs-read-bg);
	color: var(--cs-read);
	font-size: 11px;
	font-weight: 700;
}

/* capability */
.cs__cap {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	margin: 0;
	padding: 9px 10px;
	border: 1px solid #e3eae6;
	border-radius: 10px;
}

.cs__cap svg {
	width: 28px;
	height: 28px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
	background: var(--cs-read-bg);
	color: var(--cs-read);
}

.cs__cap b {
	display: block;
	color: var(--cs-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.cs__cap small {
	display: block;
	margin-top: 2px;
	color: #65706a;
	font-size: 11px;
	line-height: 1.35;
}

/* ---- ma trận quyền ---- */
.cs__perm {
	min-width: 0;
	padding-top: 14px;
	border-top: 1px solid #e2e9e5;
}

.cs__perm-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 9px;
}

.cs__perm-label {
	flex: 1;
	margin: 0;
	color: #65706a;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cs__policy {
	flex: none;
	margin: 0;
	color: #65706a;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.cs__perm-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	min-width: 0;
}

.cs__permcard {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	min-width: 0;
	margin: 0;
	padding: 11px;
	border: 1px solid #e3eae6;
	border-radius: 10px;
}

.cs__permcard svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
}

.cs__permcard b {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.cs__permcard small {
	display: block;
	margin-top: 3px;
	color: #65706a;
	font-size: 12px;
	line-height: 1.45;
}

.cs__permcard--read svg { background: var(--cs-read-bg); color: var(--cs-read) }
.cs__permcard--read b { color: var(--cs-read) }
.cs__permcard--warn svg { background: var(--cs-warn-bg); color: var(--cs-warn) }
.cs__permcard--warn b { color: var(--cs-warn) }
.cs__permcard--deny svg { background: var(--cs-deny-bg); color: var(--cs-deny) }
.cs__permcard--deny b { color: var(--cs-deny) }

/* ---- activity log ---- */
.cs__activity {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid var(--cs-line);
	border-radius: 10px;
	background: var(--cs-paper);
}

.cs__activity-time {
	flex: none;
	color: #65706a;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cs__activity svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 8px;
	background: var(--cs-read-bg);
	color: var(--cs-read);
}

.cs__activity-body {
	flex: 1;
	min-width: 0;
}

.cs__activity b {
	display: block;
	color: var(--cs-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.cs__activity small {
	display: block;
	margin-top: 2px;
	color: #65706a;
	font-size: 11px;
	line-height: 1.35;
}

.cs__activity-tags {
	display: flex;
	flex: none;
	gap: 6px;
}

.cs__activity-tags span {
	padding: 5px 9px;
	border-radius: 7px;
	background: #eef3f1;
	color: #5b6a62;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------- dải ghi chú + CTA ---------------- */
.cs__note {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin-top: 14px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--cs-dark);
	color: #fff;
}

.cs__note-body {
	display: flex;
	align-items: center;
	gap: 11px;
	flex: 1;
	min-width: 0;
	margin: 0;
}

.cs__note-body svg {
	width: 32px;
	height: 32px;
	flex: none;
	padding: 8px;
	border-radius: 9px;
	background: #144629;
	color: var(--cs-mint);
}

.cs__note-body b {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.cs__note-body small {
	display: block;
	margin-top: 4px;
	color: #b6c8c0;
	font-size: 13px;
	line-height: 1.55;
}

.ecom-commerce-stack .cs__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	min-height: 44px;
	padding: 11px 4px;
	color: var(--cs-mint);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ecom-commerce-stack .cs__cta::after {
	content: "";
	width: 15px;
	height: 8px;
	flex: none;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
	transition: transform 200ms ease;
}

@media (hover: hover) {
	.ecom-commerce-stack .cs__cta:hover { text-decoration: underline }
	.ecom-commerce-stack .cs__cta:hover::after { transform: translateX(3px) }
}

.ecom-commerce-stack .cs__cta:focus-visible {
	outline: 3px solid var(--cs-focus-dark);
	outline-offset: 3px;
}

/* ---------------- tablet ---------------- */
@media (max-width: 1000px) {
	.cs__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.cs__studio {
		grid-template-columns: 196px minmax(0, 1fr);
		margin-top: 32px;
	}

	.cs__rail {
		padding: 15px 8px;
	}

	.cs__tab-text small {
		display: none;
	}

	.cs__panels {
		padding: 20px 16px;
	}

	.cs__arch {
		grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.1fr) 36px minmax(0, 1fr);
	}

	.cs__flow-labels {
		display: none;
	}

	.cs__agent {
		margin: 0 6px;
		padding: 13px 9px;
	}

	/* SPEC: tablet permission matrix hai cột */
	.cs__perm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs__perm-grid > .cs__permcard:last-child {
		grid-column: 1 / -1;
	}

	.cs__activity-tags {
		display: none;
	}
}

/* ---------------- mobile: hàng icon cuộn ngang ---------------- */
@media (max-width: 700px) {
	.cs__studio {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 17px;
	}

	.cs__rail {
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		padding: 11px;
		border-right: 0;
		border-bottom: 1px solid #e1e9e5;
		scrollbar-width: none;
	}

	.cs__rail::-webkit-scrollbar {
		display: none;
	}

	.cs__rail-label {
		display: none;
	}

	.ecom-commerce-stack .cs__tab {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		flex: none;
		width: 54px;
		min-width: 54px;
		height: 50px;
		padding: 0;
	}

	.cs__tab-text,
	.cs__tab-num {
		display: none;
	}

	.cs__panels {
		padding: 17px 12px;
	}

	.ecom-commerce-stack h3.cs__panel-title {
		font-size: 19px;
	}

	.cs__panel-head {
		flex-wrap: wrap;
		gap: 10px;
	}

	/* SPEC: mobile chỉ hiện hai hệ thống và bốn capability chính */
	.cs__arch {
		grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
	}

	.cs__systems > .cs__system:nth-child(n + 3) {
		display: none;
	}

	.cs__flow--right {
		display: none;
	}

	.cs__agent {
		grid-column: 3;
		margin: 0;
	}

	.cs__caps {
		grid-column: 1 / -1;
		grid-row: 2;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 10px;
	}

	/* SPEC: permission matrix dọc. Giữ ĐỦ ba trạng thái — yêu cầu 6 buộc phải
	   thấy cả "không truy cập", nên không ẩn thẻ thứ ba như prototype. */
	.cs__perm-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cs__perm-grid > .cs__permcard:last-child {
		grid-column: auto;
	}

	.cs__activity {
		flex-wrap: wrap;
	}

	.cs__activity-time {
		display: none;
	}

	.cs__note {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.ecom-commerce-stack .cs__cta {
		width: 100%;
		padding-top: 12px;
		border-top: 1px solid #29513a;
	}
}

/* đổi tab: fade 200ms, không autoplay */
@keyframes cs-in {
	from { opacity: 0; transform: translateY(6px) }
	to { opacity: 1; transform: none }
}

.cs__panel:not([hidden]) {
	animation: cs-in 200ms ease both;
}

@media (prefers-reduced-motion: reduce) {
	.ecom-commerce-stack *,
	.ecom-commerce-stack *::before,
	.ecom-commerce-stack *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Cột hệ thống chỉ ~240px: tên + mô tả + badge trạng thái không đủ chỗ trên một
   hàng nên "WooCommerce" bị badge chèn và "Haravan / Sapo" ngắt ba dòng.
   Cho badge xuống dòng riêng, canh phải — cùng cách đã dùng ở Hero và Hành trình. */
.ecom-commerce-stack .cs__system {
	flex-wrap: wrap;
}

.ecom-commerce-stack .cs__system > .cs__system-state {
	width: 100%;
	margin-top: 7px;
	padding-top: 7px;
	border-top: 1px solid #e9efec;
	text-align: right;
}

/* rail rộng thêm một chút để nhãn lớp không phải ngắt dòng */
.ecom-commerce-stack .cs__studio {
	grid-template-columns: 274px minmax(0, 1fr);
}

.ecom-commerce-stack .cs__tab-text small {
	font-size: 11px;
}

@media (max-width: 1000px) {
	.ecom-commerce-stack .cs__studio {
		grid-template-columns: 196px minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	.ecom-commerce-stack .cs__studio {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Các <button> tab nằm TRONG element text-basic `.cs__rail-tabs`, không phải con
   trực tiếp của `.cs__rail`. Đặt flex lên `.cs__rail` chỉ dàn wrapper — ở mobile
   sáu icon vẫn xếp dọc thay vì cuộn ngang. Flex phải đặt lên chính wrapper đó. */
.ecom-commerce-stack .cs__rail {
	display: block;
}

.ecom-commerce-stack .cs__rail-tabs {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

@media (max-width: 700px) {
	.ecom-commerce-stack .cs__rail {
		overflow: hidden;
	}

	.ecom-commerce-stack .cs__rail-tabs {
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
	}

	.ecom-commerce-stack .cs__rail-tabs::-webkit-scrollbar {
		display: none;
	}
}

/* ============================================================================
   28. E-commerce & Retail — Section 06 "Tình huống minh hoạ — AI Commerce Agent"
   design/ecommerce-retail/06-success-story/{SPEC.md, prototype/}
   Prefix class theo yêu cầu: ic-commerce-story-*
   KHÔNG khai font-family ở đâu cả — section kế thừa font toàn site (mockup dùng
   Manrope chỉ để thể hiện thiết kế).
   Token giữ đúng giá trị chung với --eh-* / --rb-* / --cj-* / --cs-*.
   ============================================================================ */
.ic-commerce-story {
	--ics-ink: #0c1922;
	--ics-green: #15803d;
	--ics-green-ink: #066d31;
	--ics-muted: #55626a;
	--ics-line: #dce7e2;
	--ics-paper: #fbfdfc;
	--ics-dark: #093019;
	--ics-focus: #1268a8;
	--ics-focus-dark: #85e7ae;
	--ics-mint: #72d89c;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 82% 8%, #e5f6ee 0, transparent 30%),
		linear-gradient(180deg, #f7fbf8, #fff);
}

.ic-commerce-story > .brxe-container {
	/* Bricks đặt .brxe-container{width:1100px} cố định — bẫy đã gặp từ Hero */
	width: 100%;
	/* Cột nội dung 1392px — khớp token --container-max: 1440px của site và các
	   trang /vi/linh-vuc/ khác. Bricks ghi padding 15px ở specificity ID nên
	   không sửa được bằng class; cộng bù vào max-width để nội dung ra đúng 1392. */
	max-width: calc(1392px + 30px);
	min-width: 0;
	margin-inline: auto;
}

/* ---------------- header ---------------- */
.ic-commerce-story-head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr);
	column-gap: 72px;
	row-gap: 22px;
	align-items: end;
	width: 100%;
}

.ic-commerce-story-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--ics-green-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.ic-commerce-story-eyebrow svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.ic-commerce-story h2.ic-commerce-story-title {
	margin: 16px 0 0;
	color: var(--ics-ink);
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.035em;
	font-weight: 800;
}

.ic-commerce-story-title em {
	font-style: normal;
	color: var(--ics-green);
}

.ic-commerce-story-lead {
	margin: 0 0 6px;
	color: var(--ics-muted);
	font-size: 15px;
	line-height: 1.75;
}

/* ---------------- khung hai cột ---------------- */
.ic-commerce-story-stage {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	width: 100%;
	margin-top: 42px;
	overflow: hidden;
	border: 1px solid #dbe7e1;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 55px rgba(18, 58, 35, 0.08);
}

/* ---- cột bối cảnh (nền tối) ---- */
.ic-commerce-story-context {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	overflow: hidden;
	padding: 30px;
	background: var(--ics-dark);
	color: #fff;
}

.ic-commerce-story-context::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -130px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: #0c6d34;
	opacity: 0.25;
	pointer-events: none;
}

.ic-commerce-story-brandrow {
	display: flex;
	align-items: center;
	gap: 11px;
	position: relative;
	z-index: 1;
	margin: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ic-commerce-story-mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 11px;
	background: #0c873f;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

.ic-commerce-story-brandtext {
	flex: 1;
	min-width: 0;
}

.ic-commerce-story-brandtext b {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.ic-commerce-story-brandtext small {
	display: block;
	margin-top: 3px;
	color: #a8c3b3;
	font-size: 12px;
	line-height: 1.35;
}

/* nhãn bắt buộc giữ nguyên chữ: TÌNH HUỐNG GIẢ ĐỊNH */
.ic-commerce-story-demolabel {
	flex: none;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid rgba(146, 226, 180, 0.4);
	border-radius: 20px;
	color: #92e2b4;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.3;
}

.ic-commerce-story-quote {
	/* theme tô blockquote bằng font serif (Georgia) — chữ có dấu tiếng Việt bị
	   vỡ. `inherit` vừa tránh bẫy đó vừa đúng yêu cầu kế thừa font toàn site. */
	font-family: inherit;
	position: relative;
	z-index: 1;
	margin: 30px 0 0;
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.02em;
}

.ic-commerce-story-customer {
	display: flex;
	align-items: center;
	gap: 11px;
	position: relative;
	z-index: 1;
	margin: 24px 0 0;
}

.ic-commerce-story-avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: #e8faf3;
	color: #056c30;
	font-size: 12px;
	font-weight: 800;
}

.ic-commerce-story-customer b {
	display: block;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.ic-commerce-story-customer small {
	display: block;
	margin-top: 3px;
	color: #a8c3b3;
	font-size: 12px;
}

.ic-commerce-story-friction {
	position: relative;
	z-index: 1;
	margin: 28px 0 0;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
}

.ic-commerce-story-friction b {
	display: block;
	color: #ffc59d;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ic-commerce-story-friction small {
	display: block;
	margin-top: 8px;
	color: #c8d9d3;
	font-size: 13px;
	line-height: 1.6;
}

/* ---- cột hành trình ---- */
.ic-commerce-story-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 30px 32px 26px;
}

.ic-commerce-story-panelhead {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e6ece9;
}

.ic-commerce-story-headtext {
	flex: 1;
	min-width: 0;
}

.ic-commerce-story-kicker {
	margin: 0;
	color: #65706a;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ic-commerce-story h3.ic-commerce-story-subtitle {
	margin: 7px 0 0;
	color: var(--ics-ink);
	font-size: 22px;
	line-height: 1.28;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.ic-commerce-story-live {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: none;
	margin: 0;
	padding: 7px 12px;
	border-radius: 20px;
	background: #ebf8f3;
	color: var(--ics-green-ink);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.ic-commerce-story-live::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: #10aa50;
	box-shadow: 0 0 0 4px rgba(16, 170, 80, 0.14);
}

/* bốn bước */
.ic-commerce-story-steps {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 0;
}

.ic-commerce-story-steps::before {
	content: "";
	position: absolute;
	left: 47px;
	top: 52px;
	bottom: 52px;
	width: 1px;
	background: #dce9e4;
}

.ic-commerce-story-step {
	position: relative;
	display: grid;
	grid-template-columns: 24px 38px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0;
	min-height: 66px;
	padding: 10px 12px;
	border-radius: 13px;
	background: transparent;
	transition: background-color 220ms ease;
}

.ic-commerce-story-step[data-on="true"] {
	background: #f1faf6;
}

.ic-commerce-story-stepno {
	color: #93a29d;
	font-size: 12px;
	font-weight: 700;
}

.ic-commerce-story-step > svg {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	padding: 8px;
	border-radius: 10px;
	background: #e9f7f1;
	color: var(--ics-green-ink);
	transition: background-color 220ms ease, color 220ms ease;
}

.ic-commerce-story-step[data-on="true"] > svg {
	background: var(--ics-green);
	color: #fff;
}

.ic-commerce-story-steptext {
	min-width: 0;
}

.ic-commerce-story-steptext b {
	display: block;
	color: var(--ics-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.ic-commerce-story-steptext small {
	display: block;
	margin-top: 3px;
	color: #65706a;
	font-size: 13px;
	line-height: 1.45;
}

.ic-commerce-story-steptag {
	flex: none;
	margin: 0;
	padding: 6px 11px;
	border-radius: 14px;
	background: #eef9f5;
	color: var(--ics-green-ink);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* ba kết quả */
.ic-commerce-story-results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	min-width: 0;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid #e5ece9;
}

.ic-commerce-story-result {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0 18px;
	border-right: 1px solid #e5ece9;
}

.ic-commerce-story-result:first-child { padding-left: 0 }
.ic-commerce-story-result:last-child { border-right: 0 }

.ic-commerce-story-result small {
	color: #65706a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ic-commerce-story-result b {
	margin-top: 7px;
	color: var(--ics-green-ink);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ic-commerce-story-result em {
	margin-top: 4px;
	color: #697471;
	font-size: 12px;
	font-style: normal;
	line-height: 1.4;
}

/* ---------------- chân section: miễn trừ + CTA ---------------- */
.ic-commerce-story-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	width: 100%;
	margin-top: 14px;
	padding: 18px 22px;
	border-radius: 15px;
	background: #eff8f4;
}

.ic-commerce-story-note {
	display: flex;
	align-items: center;
	gap: 11px;
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #5f716b;
	font-size: 13px;
	line-height: 1.6;
}

.ic-commerce-story-note svg {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 6px;
	border-radius: 50%;
	background: #d9f1e3;
	color: #05672e;
}

.ic-commerce-story .ic-commerce-story-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	min-height: 44px;
	padding: 11px 4px;
	color: var(--ics-green-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ic-commerce-story .ic-commerce-story-cta::after {
	content: "";
	width: 15px;
	height: 8px;
	flex: none;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
	transition: transform 200ms ease;
}

@media (hover: hover) {
	.ic-commerce-story .ic-commerce-story-cta:hover { text-decoration: underline }
	.ic-commerce-story .ic-commerce-story-cta:hover::after { transform: translateX(3px) }
}

.ic-commerce-story .ic-commerce-story-cta:focus-visible {
	outline: 3px solid var(--ics-focus);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------------- tablet ---------------- */
@media (max-width: 1000px) {
	.ic-commerce-story-head {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 30px;
	}

	.ic-commerce-story-stage {
		grid-template-columns: 288px minmax(0, 1fr);
		margin-top: 32px;
	}

	.ic-commerce-story-context {
		padding: 24px;
	}

	.ic-commerce-story-quote {
		font-size: 19px;
	}

	.ic-commerce-story-panel {
		padding: 24px 22px 22px;
	}

	.ic-commerce-story h3.ic-commerce-story-subtitle {
		font-size: 19px;
	}

	.ic-commerce-story-step {
		grid-template-columns: 20px 34px minmax(0, 1fr);
		gap: 10px;
	}

	/* tablet: thu gọn nhãn phụ của từng bước */
	.ic-commerce-story-steptag {
		display: none;
	}

	.ic-commerce-story-steps::before {
		left: 42px;
	}

	.ic-commerce-story-result b {
		font-size: 20px;
	}
}

/* ---------------- mobile: xếp dọc, ba kết quả thành ba hàng ---------------- */
@media (max-width: 700px) {
	.ic-commerce-story-stage {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 20px;
	}

	.ic-commerce-story-context {
		padding: 23px;
	}

	.ic-commerce-story-brandrow {
		flex-wrap: wrap;
	}

	.ic-commerce-story-quote {
		margin-top: 24px;
		font-size: 20px;
	}

	.ic-commerce-story-panel {
		padding: 25px 18px 20px;
	}

	.ic-commerce-story-panelhead {
		flex-direction: column;
		gap: 12px;
	}

	.ic-commerce-story-step {
		grid-template-columns: 19px 34px minmax(0, 1fr);
		gap: 9px;
		padding: 9px 4px;
	}

	.ic-commerce-story-steps::before {
		left: 36px;
	}

	.ic-commerce-story-results {
		grid-template-columns: minmax(0, 1fr);
	}

	.ic-commerce-story-result {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: center;
		gap: 6px 12px;
		padding: 13px 0;
		border-right: 0;
		border-bottom: 1px solid #e5ece9;
	}

	.ic-commerce-story-result:last-child {
		border-bottom: 0;
	}

	.ic-commerce-story-result b {
		grid-row: 1 / 3;
		grid-column: 2;
		margin: 0;
		text-align: right;
		font-size: 19px;
	}

	.ic-commerce-story-result em {
		margin: 0;
	}

	.ic-commerce-story-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 17px;
	}

	.ic-commerce-story .ic-commerce-story-cta {
		width: 100%;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid #d6e8e0;
	}
}

/* ---------------- hiệu ứng bốn bước ----------------
   Chỉ chạy MỘT LẦN khi section vào viewport, mỗi bước cách nhau 180ms và tự
   nền lên trong 220ms. Không autoplay lặp, không timer chạy nền. */
.ic-commerce-story-step {
	opacity: 1;
}

.ic-commerce-story[data-reveal="pending"] .ic-commerce-story-step {
	opacity: 0.55;
}

.ic-commerce-story[data-reveal="pending"] .ic-commerce-story-step[data-on="true"] {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ic-commerce-story *,
	.ic-commerce-story *::before,
	.ic-commerce-story *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	/* bỏ hẳn trạng thái mờ: mọi bước hiện đủ ngay */
	.ic-commerce-story[data-reveal="pending"] .ic-commerce-story-step {
		opacity: 1;
	}
}

/* Cột bối cảnh 340px: sau khi trừ padding, ô chữ "R" và badge "Tình huống giả
   định" (~135px) thì tên thương hiệu chỉ còn ~94px nên "Urban Run" ngắt hai
   dòng. Cho badge xuống hàng riêng — nhãn bắt buộc vẫn hiển thị đầy đủ. */
.ic-commerce-story .ic-commerce-story-brandrow {
	flex-wrap: wrap;
}

.ic-commerce-story .ic-commerce-story-demolabel {
	order: 3;
	width: 100%;
	margin-top: 12px;
	text-align: center;
}

/* ============================================================================
   29. E-commerce & Retail — Section 07 "FAQ"
   design/ecommerce-retail/07-faq/{SPEC.md, prototype/}
   Prefix class theo yêu cầu: ic-commerce-faq-*
   KHÔNG khai font-family — kế thừa font toàn site (prototype dùng Manrope chỉ
   để thể hiện mockup).
   Dấu +/− vẽ bằng pseudo-element và ĐỌC TỪ `aria-expanded`, nên JS chỉ cần đổi
   ARIA + `hidden`; cái người thấy và cái screen reader nghe không thể lệch nhau.
   ============================================================================ */
.ic-commerce-faq {
	--icf-ink: #0c1922;
	--icf-green: #15803d;
	--icf-green-ink: #066d31;
	--icf-muted: #55626a;
	--icf-line: #dce7e2;
	--icf-dark: #08361b;
	--icf-focus: #1268a8;
	--icf-mint: #72d89c;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 84%, #e4f5ed 0, transparent 28%),
		linear-gradient(180deg, #fbfdfc, #f5faf7);
}

.ic-commerce-faq > .brxe-container {
	/* Bricks đặt .brxe-container{width:1100px} cố định — bẫy đã gặp từ Hero */
	width: 100%;
	/* Cột nội dung 1392px — khớp token --container-max: 1440px của site và các
	   trang /vi/linh-vuc/ khác. Bricks ghi padding 15px ở specificity ID nên
	   không sửa được bằng class; cộng bù vào max-width để nội dung ra đúng 1392. */
	max-width: calc(1392px + 30px);
	min-width: 0;
	margin-inline: auto;
}

.ic-commerce-faq-grid {
	display: grid;
	grid-template-columns: 390px minmax(0, 1fr);
	column-gap: 84px;
	row-gap: 32px;
	width: 100%;
}

/* ---------------- cột trái: giới thiệu + CTA ---------------- */
.ic-commerce-faq-intro {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ic-commerce-faq-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--icf-green-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.ic-commerce-faq-eyebrow svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.ic-commerce-faq h2.ic-commerce-faq-title {
	margin: 20px 0 0;
	color: var(--icf-ink);
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.035em;
	font-weight: 800;
}

.ic-commerce-faq-lead {
	max-width: 360px;
	margin: 20px 0 0;
	color: var(--icf-muted);
	font-size: 15px;
	line-height: 1.75;
}

.ic-commerce-faq-callout {
	margin-top: 46px;
	padding: 22px;
	border-radius: 18px;
	background: var(--icf-dark);
	color: #fff;
}

.ic-commerce-faq-calloutrow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.ic-commerce-faq-calloutrow svg {
	width: 36px;
	height: 36px;
	flex: none;
	padding: 9px;
	border-radius: 10px;
	background: #0daa4f;
	color: #fff;
}

.ic-commerce-faq-calloutrow b {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.ic-commerce-faq-calloutrow small {
	display: block;
	margin-top: 6px;
	color: #b1c9bb;
	font-size: 13px;
	line-height: 1.6;
}

.ic-commerce-faq .ic-commerce-faq-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: #95e5b6;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.ic-commerce-faq .ic-commerce-faq-cta::after {
	content: "";
	width: 15px;
	height: 8px;
	flex: none;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
	transition: transform 200ms ease;
}

@media (hover: hover) {
	.ic-commerce-faq .ic-commerce-faq-cta:hover { text-decoration: underline }
	.ic-commerce-faq .ic-commerce-faq-cta:hover::after { transform: translateX(3px) }
}

.ic-commerce-faq .ic-commerce-faq-cta:focus-visible {
	outline: 3px solid var(--icf-mint);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------------- cột phải: accordion ---------------- */
.ic-commerce-faq-list {
	min-width: 0;
	border-top: 1px solid #cfdcd6;
}

.ic-commerce-faq-item {
	min-width: 0;
	border-bottom: 1px solid #d8e3de;
}

.ic-commerce-faq-item[data-open="true"] {
	padding-bottom: 18px;
}

.ic-commerce-faq .ic-commerce-faq-q {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 38px;
	align-items: center;
	gap: 14px;
	width: 100%;
	/* vùng chạm >= 44px theo SPEC accessibility */
	min-height: 78px;
	padding: 12px 5px;
	border: 0;
	background: transparent;
	color: var(--icf-ink);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.ic-commerce-faq-num {
	color: #91a09b;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ic-commerce-faq-q b {
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

/* dấu +/− vẽ bằng pseudo-element, trạng thái đọc từ aria-expanded */
.ic-commerce-faq-ico {
	position: relative;
	justify-self: end;
	width: 36px;
	height: 36px;
	border: 1px solid #cfddd7;
	border-radius: 50%;
	background: #fff;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.ic-commerce-faq-ico::before,
.ic-commerce-faq-ico::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #4d6859;
	transition: opacity 200ms ease, background-color 200ms ease;
}

.ic-commerce-faq-ico::before {
	width: 13px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.ic-commerce-faq-ico::after {
	width: 2px;
	height: 13px;
	transform: translate(-50%, -50%);
}

.ic-commerce-faq-q[aria-expanded="true"] .ic-commerce-faq-ico {
	border-color: var(--icf-green);
	background: var(--icf-green);
}

.ic-commerce-faq-q[aria-expanded="true"] .ic-commerce-faq-ico::before {
	background: #fff;
}

/* mở rồi thì chỉ còn gạch ngang */
.ic-commerce-faq-q[aria-expanded="true"] .ic-commerce-faq-ico::after {
	opacity: 0;
}

@media (hover: hover) {
	.ic-commerce-faq .ic-commerce-faq-q:hover b {
		color: var(--icf-green-ink);
	}

	.ic-commerce-faq .ic-commerce-faq-q:hover .ic-commerce-faq-ico {
		border-color: #a9c9b7;
	}
}

.ic-commerce-faq .ic-commerce-faq-q:focus-visible {
	outline: 3px solid var(--icf-focus);
	outline-offset: 2px;
	border-radius: 10px;
}

.ic-commerce-faq-a {
	min-width: 0;
	padding: 0 58px 4px 54px;
}

.ic-commerce-faq-a[hidden] {
	display: none;
}

.ic-commerce-faq-answer {
	margin: 0;
	color: var(--icf-muted);
	font-size: 15px;
	line-height: 1.75;
}

.ic-commerce-faq-highlight {
	display: inline-block;
	margin: 14px 0 0;
	padding: 8px 13px;
	border-radius: 20px;
	background: #eaf7f1;
	color: var(--icf-green-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

/* ---------------- tablet ---------------- */
@media (max-width: 1000px) {
	.ic-commerce-faq-grid {
		grid-template-columns: 310px minmax(0, 1fr);
		column-gap: 48px;
	}

	.ic-commerce-faq-callout {
		margin-top: 38px;
	}

	.ic-commerce-faq-q b {
		font-size: 15px;
	}

	.ic-commerce-faq-a {
		padding-right: 44px;
	}
}

/* ---------------- mobile: xếp dọc, CTA trước accordion ---------------- */
@media (max-width: 700px) {
	.ic-commerce-faq-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.ic-commerce-faq-lead {
		max-width: none;
	}

	/* CTA nằm trước danh sách câu hỏi — cột intro vốn đứng trước trong DOM */
	.ic-commerce-faq-callout {
		margin: 28px 0 34px;
	}

	.ic-commerce-faq .ic-commerce-faq-q {
		grid-template-columns: 28px minmax(0, 1fr) 34px;
		gap: 9px;
		min-height: 74px;
		padding: 12px 0;
	}

	.ic-commerce-faq-q b {
		font-size: 15px;
	}

	.ic-commerce-faq-ico {
		width: 32px;
		height: 32px;
	}

	.ic-commerce-faq-a {
		padding: 0 8px 4px 37px;
	}

	.ic-commerce-faq-answer {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ic-commerce-faq *,
	.ic-commerce-faq *::before,
	.ic-commerce-faq *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* h2 có line-height 1.12 nên chân chữ sát ngay đoạn mô tả — mockup có khoảng
   nghỉ rõ hơn. */
.ic-commerce-faq .ic-commerce-faq-lead {
	margin-top: 26px;
}

/* ============================================================================
   30. CTA cuối trang lĩnh vực — dùng chung cho E-commerce (270) và
   Hospitality (272), và cho mọi trang lĩnh vực dựng sau.
   Class TRUNG TÍNH `ic-industry-cta` (không mang tên ngành) vì section này
   không thuộc riêng trang nào.
   Token cùng giá trị với --eh-* / --rb-* / --cj-* / --cs-* / --ics-* / --icf-*.
   ============================================================================ */
.ic-industry-cta {
	--icc-ink: #0c1922;
	--icc-green: #15803d;
	--icc-green-ink: #066d31;
	--icc-line: #dce7e2;
	--icc-dark: #09282e;
	--icc-dark-2: #103740;
	--icc-dark-line: #2b553d;
	--icc-on-dark: #ffffff;
	--icc-on-dark-body: #b6c8c0;
	--icc-on-dark-soft: #90b49f;
	--icc-mint: #72d89c;
	--icc-focus-dark: #85e7ae;
	/* cam CTA: bản tối để đạt AA với chữ trắng 15px (4.80:1) */
	--icc-orange: #cf3f17;
	--icc-orange-hi: #b8360f;
	position: relative;
	overflow: hidden;
	background: var(--icc-dark);
}

.ic-industry-cta > .brxe-container {
	/* Bricks đặt padding 15px ở specificity ID -> cộng bù vào max-width để cột
	   nội dung ra đúng 1392px như các section khác. */
	width: 100%;
	max-width: calc(1392px + 30px);
	min-width: 0;
	margin-inline: auto;
}

/* quầng sáng trang trí, không nhận chuột */
.ic-industry-cta::before {
	content: "";
	position: absolute;
	right: -160px;
	top: -170px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(114, 216, 156, 0.16), transparent 68%);
	pointer-events: none;
}

.ic-industry-cta-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	column-gap: 72px;
	row-gap: 32px;
	align-items: center;
	width: 100%;
	position: relative;
}

/* ---------------- cột trái ---------------- */
.ic-industry-cta-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ic-industry-cta-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--icc-mint);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1;
}

.ic-industry-cta-eyebrow svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.ic-industry-cta h2.ic-industry-cta-title {
	margin: 18px 0 0;
	color: var(--icc-on-dark);
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.14;
	letter-spacing: -0.035em;
	font-weight: 800;
}

.ic-industry-cta-title em {
	font-style: normal;
	color: var(--icc-mint);
}

.ic-industry-cta .ic-industry-cta-lead {
	/* 34rem: đủ rộng để dòng cuối không còn mỗi chữ "hợp." đứng lẻ ở 1440 */
	max-width: 34rem;
	margin: 18px 0 0;
	color: var(--icc-on-dark-body);
	font-size: 15px;
	line-height: 1.75;
}

.ic-industry-cta-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.ic-industry-cta .ic-industry-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* vùng bấm >= 44px */
	min-height: 48px;
	padding: 14px 20px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ic-industry-cta .ic-industry-cta-btn::after {
	content: "";
	width: 15px;
	height: 8px;
	flex: none;
	background: currentColor;
	clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
	transition: transform 200ms ease;
}

.ic-industry-cta .ic-industry-cta-actions > a.ic-industry-cta-btn.ic-industry-cta-btn--primary {
	/* theme có `:root .bricks-button[class*="primary"]:not(.outline)` ở
	   specificity 0,4,0 — nâng lên 0,4,1 để thắng mà không cần !important */
	border: 1px solid var(--icc-orange);
	background-color: var(--icc-orange);
	color: #fff;
	box-shadow: 0 10px 23px rgba(207, 63, 23, 0.24);
}

.ic-industry-cta .ic-industry-cta-actions > a.ic-industry-cta-btn.ic-industry-cta-btn--ghost {
	border: 1px solid var(--icc-dark-line);
	background-color: transparent;
	color: var(--icc-mint);
	box-shadow: none;
}

@media (hover: hover) {
	.ic-industry-cta .ic-industry-cta-actions > a.ic-industry-cta-btn--primary:hover {
		border-color: var(--icc-orange-hi);
		background-color: var(--icc-orange-hi);
	}

	.ic-industry-cta .ic-industry-cta-actions > a.ic-industry-cta-btn--ghost:hover {
		border-color: var(--icc-mint);
	}

	.ic-industry-cta .ic-industry-cta-btn:hover::after {
		transform: translateX(3px);
	}
}

.ic-industry-cta .ic-industry-cta-btn:focus-visible {
	outline: 3px solid var(--icc-focus-dark);
	outline-offset: 3px;
}

/* ---------------- cột phải: ba đầu vào ---------------- */
.ic-industry-cta-inputs {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--icc-dark-line);
	border-radius: 18px;
	background: var(--icc-dark-2);
}

.ic-industry-cta-inputs-label {
	margin: 0 0 4px;
	color: var(--icc-on-dark-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ic-industry-cta-input {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.ic-industry-cta-input:last-of-type {
	border-bottom: 0;
	padding-bottom: 4px;
}

.ic-industry-cta-input svg {
	width: 32px;
	height: 32px;
	flex: none;
	padding: 8px;
	border-radius: 9px;
	background: #17454a;
	color: var(--icc-mint);
}

.ic-industry-cta-input b {
	display: block;
	color: var(--icc-on-dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.ic-industry-cta-input small {
	display: block;
	margin-top: 4px;
	color: var(--icc-on-dark-body);
	font-size: 13px;
	line-height: 1.55;
}

.ic-industry-cta-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	color: var(--icc-on-dark-body);
	font-size: 13px;
	line-height: 1.6;
}

.ic-industry-cta-note svg {
	width: 24px;
	height: 24px;
	flex: none;
	padding: 5px;
	border-radius: 50%;
	background: #17454a;
	color: var(--icc-mint);
}

/* ---------------- tablet ---------------- */
@media (max-width: 1000px) {
	.ic-industry-cta-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.ic-industry-cta .ic-industry-cta-lead {
		max-width: none;
	}
}

/* ---------------- mobile ---------------- */
@media (max-width: 700px) {
	.ic-industry-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ic-industry-cta .ic-industry-cta-btn {
		justify-content: center;
	}

	.ic-industry-cta-inputs {
		padding: 20px 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ic-industry-cta *,
	.ic-industry-cta *::before,
	.ic-industry-cta *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}