/**
 * Trang Giới thiệu — brief "10 giây nắm được thông tin" (chủ dự án, 2026-10-10), bảng màu và
 * typography của Home (docs/04-theme/homepage-ui-design.md). Chỉ nạp cho /gioi-thieu/.
 * Nhịp nền: Hero panel ngà → 01 Về Chu Tước trắng → Giá trị trắng
 * → 02 Năng lực graphite → 03 Phương pháp trắng → 04 Khách hàng dải ngà → CTA panel cam → Footer tối.
 * Mỗi section một bố cục riêng, chung nhãn chương, thang tiêu đề và bo góc.
 */
.chutuoc-main--about {
	--chutuoc-about-gutter: var(--chutuoc-container-gutter);
	--chutuoc-about-section: var(--chutuoc-space-8);
	--chutuoc-about-band-inline: max(var(--chutuoc-about-gutter), calc((100% - var(--chutuoc-container-max)) / 2));
	--chutuoc-about-tile-dark: #1f2b31;
	--chutuoc-about-tile-dark-hover: #26353c;
	--chutuoc-about-ivory-hover: #ede6db;
	--chutuoc-about-line: rgb(23 33 38 / .12);
	/* Cam đậm cho chữ lớn trên nền sáng: 4.2:1 trên ngà (#fb6e2e chỉ đạt 2.5:1). */
	--chutuoc-about-accent-text: #c94a12;
	--chutuoc-about-radius-card: 18px;
	--chutuoc-about-radius-panel: 24px;
	display: grid;
	grid-template-columns: minmax(var(--chutuoc-about-gutter), 1fr) minmax(0, var(--chutuoc-container-max)) minmax(var(--chutuoc-about-gutter), 1fr);
	width: 100%;
	max-width: none;
	font-size: 1rem;
}
@media (min-width: 768px) {
	.chutuoc-main--about { --chutuoc-about-section: var(--chutuoc-space-9); --chutuoc-about-radius-panel: 28px; }
}
@media (min-width: 1200px) {
	.chutuoc-main--about { --chutuoc-about-section: var(--chutuoc-space-10); }
}
.chutuoc-main--about > * { grid-column: 2; min-width: 0; }
.chutuoc-main--about > section { box-sizing: border-box; padding-block: var(--chutuoc-about-section); }
.chutuoc-main--about > :is(.chutuoc-about-capabilities, .chutuoc-about-testimonial) { grid-column: 1 / -1; padding-inline: var(--chutuoc-about-band-inline); }

/* ---------- Shared type: chapter label, headline, lead ---------- */
.chutuoc-main--about p { text-wrap: pretty; }
.chutuoc-about-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 16px; color: var(--chutuoc-color-primary-text); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }
.chutuoc-about-eyebrow::before { content: ''; flex: 0 0 28px; height: 2px; border-radius: 1px; background: var(--chutuoc-color-primary); }
.chutuoc-about-eyebrow__number { font-variant-numeric: tabular-nums; font-weight: 700; }
.chutuoc-about-eyebrow__dot { opacity: .6; }
.chutuoc-about-heading { max-width: 22ch; margin: 0; color: var(--chutuoc-color-heading); font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-align: left; text-wrap: balance; }
.chutuoc-about-heading__line { display: block; }
.chutuoc-about-lead { max-width: 40ch; margin: 20px 0 0; color: var(--chutuoc-color-muted); font-size: 1.0625rem; line-height: 1.6; }
.chutuoc-main--about h3 { letter-spacing: -.01em; }

/* ---------- Interaction: 44px+ targets, visible focus, calm hover ---------- */
.chutuoc-main--about :where(a):focus-visible { outline: 3px solid var(--chutuoc-color-primary-text); outline-offset: 3px; border-radius: 6px; }
.chutuoc-main--about .chutuoc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 52px; padding: 14px 24px; border: 1px solid transparent; border-radius: 12px; box-shadow: none; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.chutuoc-main--about .chutuoc-btn--primary { background: var(--chutuoc-color-primary); color: var(--chutuoc-color-text); }
.chutuoc-main--about .chutuoc-btn--primary:hover { background: #f05f1f; color: var(--chutuoc-color-text); }
.chutuoc-main--about .chutuoc-about-btn--ghost { border-color: var(--chutuoc-about-line); background: var(--chutuoc-color-surface); color: var(--chutuoc-color-heading); }
.chutuoc-main--about .chutuoc-about-btn--ghost:hover { border-color: var(--chutuoc-color-heading); color: var(--chutuoc-color-heading); }

/* ---------- Hero: editorial panel, copy | image, facts row ---------- */
.chutuoc-main--about > .chutuoc-about-hero { padding-top: var(--chutuoc-space-4); padding-bottom: 0; }
.chutuoc-about-hero__panel { display: grid; gap: 32px; padding: 28px 20px 20px; border-radius: var(--chutuoc-about-radius-panel); background: var(--chutuoc-color-background-alt); }
.chutuoc-about-hero__copy { min-width: 0; overflow-wrap: anywhere; }
.chutuoc-about-hero .chutuoc-breadcrumb { margin: 0 0 12px; }
.chutuoc-about-hero .chutuoc-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.chutuoc-about-hero .chutuoc-breadcrumb__item { display: inline-flex; align-items: center; gap: 10px; color: var(--chutuoc-color-muted); }
.chutuoc-about-hero .chutuoc-breadcrumb__item + .chutuoc-breadcrumb__item::before { content: '/'; }
.chutuoc-about-hero .chutuoc-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--chutuoc-color-text); text-decoration: underline; text-underline-offset: 4px; }
.chutuoc-about-hero__title { margin: 0; color: var(--chutuoc-color-heading); font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.chutuoc-about-hero__line { display: block; }
.chutuoc-about-hero__line--accent { color: var(--chutuoc-about-accent-text); }
.chutuoc-about-hero__lead { max-width: 38ch; margin: 20px 0 0; color: var(--chutuoc-color-text); font-size: 1.125rem; line-height: 1.6; }
.chutuoc-about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.chutuoc-about-hero__visual { margin: 0; overflow: hidden; border-radius: var(--chutuoc-about-radius-card); background: var(--chutuoc-color-surface); }
.chutuoc-about-hero__visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.chutuoc-about-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.chutuoc-about-hero__fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; padding: 16px 20px; border-radius: 16px; background: var(--chutuoc-color-surface); }
.chutuoc-about-hero__fact-value { margin: 0; color: var(--chutuoc-color-heading); font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.chutuoc-about-hero__fact-label { margin: 0; color: var(--chutuoc-color-muted); font-size: .875rem; line-height: 1.4; }
@media (min-width: 768px) {
	.chutuoc-main--about > .chutuoc-about-hero { padding-top: var(--chutuoc-space-5); }
	.chutuoc-about-hero__panel { gap: 40px; padding: 48px 40px 40px; }
	.chutuoc-about-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.chutuoc-about-hero__panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; column-gap: 56px; padding: 64px 56px 40px; }
	.chutuoc-about-hero__panel--text { grid-template-columns: minmax(0, 1fr); }
	.chutuoc-about-hero__facts { grid-column: 1 / -1; }
}

/* Optional editor content keeps a readable measure. */
.chutuoc-about-content .chutuoc-page__content { max-width: 68ch; }

/* ---------- 01 Về Chu Tước: headline "1 …" | ảnh với hai card; ba thẻ trụ cột bên dưới ---------- */
.chutuoc-about-intro { display: grid; grid-template-areas: "copy" "pillars" "media"; gap: 40px; }
.chutuoc-about-intro__copy { grid-area: copy; min-width: 0; }
/*
 * Headline: một chữ số "1" mảnh (400, không ép đậm giả) phủ gradient cam, cao bằng ba dòng; vạch dọc cam nhạt
 * ngắn nối số với ba dòng "đội ngũ. / đầu mối. / hệ thống."; dấu chấm cam đậm (4.9:1). Số là trang trí (aria-hidden).
 */
.chutuoc-about-intro__heading { display: flex; align-items: center; gap: .32em; max-width: none; }
.chutuoc-about-intro__count { flex: 0 0 auto; margin-left: -.06em; color: var(--chutuoc-about-accent-text); font-size: 4.6em; font-variant-numeric: lining-nums; font-weight: 400; letter-spacing: -.08em; line-height: .76; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.chutuoc-about-intro__count { background: linear-gradient(165deg, var(--chutuoc-color-primary) 10%, var(--chutuoc-about-accent-text) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.chutuoc-about-intro__lines { min-width: 0; padding: .1em 0 .1em .5em; border-left: 2px solid rgb(251 110 46 / .35); }
.chutuoc-about-intro__line { font-weight: 600; letter-spacing: -.03em; }
.chutuoc-about-intro__dot { color: var(--chutuoc-about-accent-text); }
.chutuoc-about-intro__copy .chutuoc-about-lead { max-width: 34ch; margin-top: 28px; font-size: 1.125rem; }
/* Hiện dần khi cuộn tới (chỉ trình duyệt hỗ trợ scroll-driven animation; không cần JS). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.chutuoc-about-intro__count { animation: chutuoc-about-rise both ease-out; animation-timeline: view(); animation-range: entry 5% cover 25%; }
		.chutuoc-about-intro__line { animation: chutuoc-about-rise both ease-out; animation-timeline: view(); animation-range: entry 10% cover 25%; }
		.chutuoc-about-intro__line:nth-child(2) { animation-range: entry 20% cover 30%; }
		.chutuoc-about-intro__line:nth-child(3) { animation-range: entry 30% cover 35%; }
	}
}
@keyframes chutuoc-about-rise {
	from { opacity: 0; transform: translateY(.35em); }
	to { opacity: 1; transform: none; }
}
.chutuoc-about-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.chutuoc-about-pills li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--chutuoc-about-line); border-radius: 999px; color: var(--chutuoc-color-heading); font-size: .875rem; font-weight: 600; }
.chutuoc-about-intro__media { grid-area: media; position: relative; min-width: 0; }
.chutuoc-about-intro__visual { margin: 0; overflow: hidden; border-radius: var(--chutuoc-about-radius-panel); background: var(--chutuoc-color-background-alt); }
.chutuoc-about-intro__visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 600ms ease; }
.chutuoc-about-intro__media:hover .chutuoc-about-intro__visual img { transform: scale(1.02); }
.chutuoc-about-intro__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: -36px 12px 0; }
.chutuoc-about-statement { min-width: 0; padding: 16px 18px; border: 1px solid rgb(23 33 38 / .08); border-radius: 16px; background: var(--chutuoc-color-surface); box-shadow: 0 12px 32px rgb(23 33 38 / .10); }
.chutuoc-about-statement__label { margin: 0; color: var(--chutuoc-color-primary-text); font-size: .75rem; font-weight: 600; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }
.chutuoc-about-statement__text { margin: 6px 0 0; color: var(--chutuoc-color-heading); font-size: 1rem; font-weight: 600; line-height: 1.4; }
/* Trụ cột: thẻ trắng viền mảnh (khác ô ngà của Giá trị cốt lõi ngay sau). */
.chutuoc-about-pillars { grid-area: pillars; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.chutuoc-about-pillar { display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; padding: 24px; border: 1px solid var(--chutuoc-about-line); border-radius: var(--chutuoc-about-radius-card); background: var(--chutuoc-color-surface); }
.chutuoc-about-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--chutuoc-color-primary-soft); color: var(--chutuoc-color-primary-text); }
.chutuoc-about-pillar__title { margin: 20px 0 0; color: var(--chutuoc-color-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.chutuoc-about-pillar__text { margin: 6px 0 0; color: var(--chutuoc-color-muted); font-size: 1rem; line-height: 1.5; }
.chutuoc-about-pillar .chutuoc-about-pills { margin-top: auto; padding-top: 20px; gap: 6px; }
.chutuoc-about-pillar .chutuoc-about-pills li { min-height: 32px; padding: 0 12px; border-color: transparent; background: var(--chutuoc-color-background-alt); font-size: .8125rem; }
@media (min-width: 768px) {
	.chutuoc-about-intro__cards { position: absolute; bottom: 24px; left: 24px; width: min(calc(100% - 48px), 460px); margin: 0; }
	.chutuoc-about-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.chutuoc-about-pillar { padding: 28px; }
}
@media (min-width: 1024px) {
	.chutuoc-about-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy media" "pillars pillars"; align-items: center; column-gap: 64px; row-gap: 48px; }
}

/* ---------- Giá trị cốt lõi: four values, ivory tiles, gentle lift ---------- */
.chutuoc-main--about > .chutuoc-about-intro + .chutuoc-about-values { padding-top: 0; }
.chutuoc-about-values__intro { margin-bottom: 32px; }
.chutuoc-about-values__grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.chutuoc-about-value { display: flex; flex-direction: column; min-width: 0; min-height: 168px; box-sizing: border-box; padding: 24px; border-radius: var(--chutuoc-about-radius-card); background: var(--chutuoc-color-background-alt); transition: background-color 200ms ease, transform 200ms ease; }
.chutuoc-about-value:hover { background: var(--chutuoc-about-ivory-hover); transform: translateY(-2px); }
.chutuoc-about-value__number { color: var(--chutuoc-color-primary-text); font-size: .875rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em; }
.chutuoc-about-value__title { margin: auto 0 0; padding-top: 32px; color: var(--chutuoc-color-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.chutuoc-about-value__text { margin: 6px 0 0; color: var(--chutuoc-color-muted); font-size: 1rem; line-height: 1.5; }
@media (min-width: 480px) {
	.chutuoc-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.chutuoc-about-values__intro { margin-bottom: 40px; }
	.chutuoc-about-values__grid { gap: 16px; }
}
@media (min-width: 1024px) {
	.chutuoc-about-values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.chutuoc-about-value { min-height: 200px; padding: 28px; }
}

/* ---------- 02 Năng lực: graphite band, headline + dark image + CTA | five comparable rows ---------- */
.chutuoc-main--about > .chutuoc-about-capabilities { display: grid; grid-template-areas: "head" "list" "media"; gap: 32px; background: var(--chutuoc-color-background-dark); color: var(--chutuoc-color-on-dark); }
.chutuoc-about-capabilities :where(a):focus-visible { outline-color: var(--chutuoc-color-primary); }
.chutuoc-about-capabilities__head { grid-area: head; min-width: 0; }
.chutuoc-about-capabilities .chutuoc-about-eyebrow { color: var(--chutuoc-color-link-on-dark); }
.chutuoc-about-capabilities .chutuoc-about-heading { color: var(--chutuoc-color-on-dark); }
.chutuoc-about-capabilities__media { grid-area: media; display: grid; gap: 24px; justify-items: start; min-width: 0; }
.chutuoc-about-capabilities__visual { width: 100%; margin: 0; overflow: hidden; border-radius: var(--chutuoc-about-radius-card); background: var(--chutuoc-about-tile-dark); }
.chutuoc-about-capabilities__visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; filter: brightness(.62) saturate(.9); }
.chutuoc-about-capabilities__list { grid-area: list; display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.chutuoc-about-capability { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 14px; align-items: start; min-width: 0; padding: 20px 18px; border-radius: var(--chutuoc-about-radius-card); background: var(--chutuoc-about-tile-dark); overflow-wrap: anywhere; transition: background-color 200ms ease; }
.chutuoc-about-capability:hover { background: var(--chutuoc-about-tile-dark-hover); }
.chutuoc-about-capability__number { color: var(--chutuoc-color-primary); font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.chutuoc-about-capability__body { min-width: 0; }
.chutuoc-about-capability__title { margin: 0; color: var(--chutuoc-color-on-dark); font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.chutuoc-about-capability__title a { color: inherit; text-decoration: none; }
.chutuoc-about-capability__title a:hover { color: var(--chutuoc-color-link-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.chutuoc-about-capability__text { margin: 6px 0 0; color: var(--chutuoc-color-muted-on-dark); font-size: .9375rem; line-height: 1.55; }
.chutuoc-about-capability__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.chutuoc-about-capability__tags li { padding: 3px 10px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; color: var(--chutuoc-color-muted-on-dark); font-size: .8125rem; line-height: 1.5; }
.chutuoc-about-capability__count { display: flex; flex-direction: column; align-items: flex-end; margin: 0; text-align: right; }
.chutuoc-about-capability__count-value { color: var(--chutuoc-color-on-dark); font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.chutuoc-about-capability__count-label { margin-top: 4px; color: var(--chutuoc-color-muted-on-dark); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 768px) {
	.chutuoc-about-capability { grid-template-columns: 56px minmax(0, 1fr) 96px; gap: 0 20px; padding: 24px 28px; }
	.chutuoc-about-capability__number,
	.chutuoc-about-capability__count-value { font-size: 2rem; }
	.chutuoc-about-capability__title { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
	.chutuoc-main--about > .chutuoc-about-capabilities { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head list" "media list"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 32px; align-items: start; }
	.chutuoc-about-capabilities__visual img { aspect-ratio: 4 / 5; }
}

/* ---------- 03 Phương pháp: six frameless steps, large numerals ---------- */
.chutuoc-main--about > .chutuoc-about-method { display: grid; gap: 32px; }
.chutuoc-about-method__intro { min-width: 0; }
.chutuoc-main--about .chutuoc-about-method .chutuoc-process__timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; }
.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step::before,
.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step::after { content: none; }
.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step__number { grid-row: span 2; display: block; width: auto; height: auto; margin: 0; border-radius: 0; background: none; color: var(--chutuoc-about-accent-text); font-family: var(--chutuoc-font-body); font-size: 2rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step__title { margin: 0; color: var(--chutuoc-color-heading); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step__description { grid-column: 2; margin: 0; color: var(--chutuoc-color-muted); font-size: 1rem; line-height: 1.5; }
@media (min-width: 640px) {
	.chutuoc-main--about .chutuoc-about-method .chutuoc-process__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
	.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step__number { grid-row: auto; margin-bottom: 12px; font-size: 2.5rem; }
	.chutuoc-main--about .chutuoc-about-method .chutuoc-process-step__description { grid-column: 1; }
}
@media (min-width: 1024px) {
	.chutuoc-main--about > .chutuoc-about-method { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; column-gap: 64px; }
	.chutuoc-about-method__intro { position: sticky; top: 6rem; }
	.chutuoc-main--about .chutuoc-about-method .chutuoc-process__timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
}

/* ---------- 04 Khách hàng: ivory band, one formal quote ---------- */
.chutuoc-main--about > .chutuoc-about-testimonial { display: grid; gap: 32px; background: var(--chutuoc-color-background-alt); }
.chutuoc-about-testimonial__intro { min-width: 0; }
.chutuoc-about-quote { min-width: 0; margin: 0; padding: 32px 24px; border: 1px solid rgb(23 33 38 / .06); border-radius: var(--chutuoc-about-radius-panel); background: var(--chutuoc-color-surface); }
.chutuoc-about-quote__body { margin: 0; padding: 0; border: 0; }
.chutuoc-about-quote__body p { margin: 0; color: var(--chutuoc-color-heading); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.4; }
.chutuoc-about-quote__source { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.chutuoc-about-quote__avatar { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--chutuoc-color-primary); color: var(--chutuoc-color-text); font-size: 1.125rem; font-weight: 700; }
.chutuoc-about-quote__meta { display: flex; flex-direction: column; min-width: 0; }
.chutuoc-about-quote__author { color: var(--chutuoc-color-heading); font-style: normal; font-weight: 600; }
.chutuoc-about-quote__company { color: var(--chutuoc-color-muted); font-size: .9375rem; }
@media (min-width: 768px) {
	.chutuoc-about-quote { padding: 48px 56px; }
}
@media (min-width: 1024px) {
	.chutuoc-main--about > .chutuoc-about-testimonial { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; column-gap: 64px; }
}

/* ---------- CTA: orange panel; charcoal text (5.75:1), white primary, outlined phone ---------- */
.chutuoc-main--about > .chutuoc-about-cta { display: grid; gap: 28px; margin-block: var(--chutuoc-about-section); padding: 40px 24px; border-radius: var(--chutuoc-about-radius-panel); background: var(--chutuoc-color-primary); color: var(--chutuoc-color-text); text-align: left; }
.chutuoc-about-cta .chutuoc-about-eyebrow { color: var(--chutuoc-color-text); }
.chutuoc-about-cta .chutuoc-about-eyebrow::before { background: var(--chutuoc-color-text); }
.chutuoc-main--about .chutuoc-about-cta .chutuoc-cta__heading { max-width: 24ch; margin: 0; color: var(--chutuoc-color-text); font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.chutuoc-about-cta :where(a):focus-visible { outline-color: var(--chutuoc-color-text); }
.chutuoc-main--about .chutuoc-about-cta .chutuoc-cta__buttons { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin: 0; }
.chutuoc-main--about .chutuoc-about-cta__primary { background: var(--chutuoc-color-surface); color: var(--chutuoc-color-background-dark); }
.chutuoc-main--about .chutuoc-about-cta__primary:hover { background: var(--chutuoc-color-background-alt); color: var(--chutuoc-color-background-dark); }
/* Viền than thay cho viền trắng của brief: trắng trên cam chỉ 2.85:1, dưới ngưỡng 3:1 cho viền điều khiển. */
.chutuoc-main--about .chutuoc-about-cta__secondary { border: 2px solid var(--chutuoc-color-text); background: transparent; color: var(--chutuoc-color-text); font-variant-numeric: tabular-nums; }
.chutuoc-main--about .chutuoc-about-cta__secondary:hover { background: rgb(23 33 38 / .08); color: var(--chutuoc-color-text); }
.chutuoc-about-cta__email { margin: 12px 0 0; font-size: .9375rem; }
.chutuoc-about-cta__email a { display: inline-flex; align-items: center; min-height: 44px; color: var(--chutuoc-color-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) {
	.chutuoc-main--about > .chutuoc-about-cta { padding: 56px 48px; }
}
@media (min-width: 1024px) {
	.chutuoc-main--about > .chutuoc-about-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 56px; padding: 64px; }
	.chutuoc-about-cta__email { text-align: right; }
}

/* ---------- Small screens and reduced motion ---------- */
@media (max-width: 479px) {
	.chutuoc-about-hero__actions .chutuoc-btn,
	.chutuoc-main--about .chutuoc-about-cta .chutuoc-cta__buttons .chutuoc-btn { width: 100%; }
	.chutuoc-about-hero__fact { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.chutuoc-main--about .chutuoc-btn,
	.chutuoc-about-value,
	.chutuoc-about-capability,
	.chutuoc-about-intro__visual img { transition: none; }
	.chutuoc-about-value:hover,
	.chutuoc-about-intro__media:hover .chutuoc-about-intro__visual img { transform: none; }
}