/* ============================================================
   TechTide — About Us (page-about-us.php) — kiểu Appen, đen–trắng
   Hero · Stats · Our History (text | timeline sáng dần) · Values & Vision · Core team
   (Dải CTA + popup form dùng CSS từ home.css — đã enqueue kèm ở trang này.)
   ============================================================ */

/* nhãn nhỏ (eyebrow) dùng chung */
.tt-ab-eyebrow{
	font-family: var(--tt-font-body);            /* DM Sans (trước đây để nhầm mono) */
	font-size: .72rem;                            /* = 11.52px, đúng Appen */
	font-weight: 600;
	letter-spacing: .12em;                        /* = 1.3824px */
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--tt-ink);                         /* gần đen */
	-webkit-font-smoothing: antialiased;
	margin: 0 0 1rem;
}

/* ===================== HERO ===================== */
.tt-ab-hero{ padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.tt-ab-hero__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-ab-hero__title{
	font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 300;
	line-height: 1.08; letter-spacing: -.03em; color: var(--tt-ink);
	max-width: 18ch; margin: 0;
}
.tt-ab-hero__sub{
	color: rgba(0, 0, 0, .55); font-size: 1.0625rem; line-height: 1.65;
	max-width: 62ch; margin: 1.25rem 0 0;
}

/* ===================== STATS ===================== */
.tt-ab-stats{ border-top: 1px solid var(--tt-line); padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(3.5rem, 6vw, 5rem); }   /* line full-width chia Hero ↔ Stats */
.tt-ab-stats__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-ab-stats__grid{
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.75rem, 3vw, 2.75rem);
}
.tt-ab-stat__num{
	display: block; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 400;
	line-height: 1.1; letter-spacing: -.02em; color: var(--tt-ink); margin: 0 0 .65rem;
}
.tt-ab-stat__desc{ color: rgba(0, 0, 0, .55); font-size: .95rem; line-height: 1.55; margin: 0; }

/* ===================== OUR HISTORY (text | timeline) ===================== */
.tt-ah{ padding-block: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid var(--tt-line); }
.tt-ah__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-ah__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.tt-ah__title{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; margin: 0 0 1.5rem; }
.tt-ah__text p:not(.tt-ab-eyebrow){ color: #2c2c2c; font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1.1rem; }
.tt-ah__text p:not(.tt-ab-eyebrow):last-child{ margin-bottom: 0; }

/* timeline: line nền xám + phần đã cuộn ĐEN (--tt-progress), chữ sáng dần (.is-active) */
.tt-ah-timeline{ position: relative; list-style: none; margin: 0; padding: 0; }
.tt-ah-timeline::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--tt-line); }
.tt-ah-timeline::after{ content: ""; position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--tt-progress, 0) * 100%); background: var(--tt-ink); }
.tt-ah-item{ padding: 0 0 clamp(1.75rem, 3vw, 2.5rem) 1.75rem; }
.tt-ah-item:last-child{ padding-bottom: 0; }
.tt-ah-item__year{ display: block; font-family: var(--tt-font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .08em; color: #c7c7c7; margin: 0 0 .45rem; transition: color .45s ease; }
.tt-ah-item__title{ font-family: var(--tt-font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: #c4c4c4; margin: 0 0 .4rem; transition: color .45s ease; }
.tt-ah-item__desc{ font-size: .95rem; line-height: 1.6; color: #cfcfcf; margin: 0; transition: color .45s ease; }
.tt-ah-item.is-active .tt-ah-item__year{ color: var(--tt-ink-soft); }
.tt-ah-item.is-active .tt-ah-item__title{ color: var(--tt-ink); }
.tt-ah-item.is-active .tt-ah-item__desc{ color: #424242; }

/* ===================== VALUES & VISION ===================== */
.tt-ab-values{ padding-block: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid var(--tt-line); background: var(--tt-bg-soft); }
.tt-ab-values__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-ab-values__head{ max-width: 760px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.tt-ab-values__title{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; margin: 0 0 1rem; }
.tt-ab-values__lead{ color: rgba(0, 0, 0, .55); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.tt-ab-values__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tt-ab-value{ padding-top: 1.4rem; border-top: 2px solid var(--tt-ink); }
.tt-ab-value__title{ font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0 0 .6rem; }
.tt-ab-value__desc{ color: rgba(0, 0, 0, .55); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ===================== CORE TEAM ===================== */
.tt-ab-team{ padding-block: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid var(--tt-line); }
.tt-ab-team__inner{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.tt-ab-team__head{ text-align: center; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); }
.tt-ab-team__title{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; margin: 0; }
.tt-ab-team__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); max-width: 1000px; margin-inline: auto; }
.tt-ab-member{ display: block; text-decoration: none; color: var(--tt-ink); }
a.tt-ab-member{ transition: transform .2s ease; }
a.tt-ab-member:hover{ transform: translateY(-3px); }
a.tt-ab-member:focus-visible{ outline: 2px solid var(--tt-accent); outline-offset: 3px; border-radius: 10px; }
.tt-ab-member__photo{ aspect-ratio: 1 / 1; background: var(--tt-bg-soft); border: 1px solid var(--tt-line); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
.tt-ab-member__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-ab-member__name{ font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin: 0 0 .25rem; }
.tt-ab-member__role{ color: rgba(0, 0, 0, .55); font-size: .95rem; line-height: 1.4; margin: 0; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
	.tt-ah__grid{ grid-template-columns: 1fr; gap: 2.5rem; }
	.tt-ab-stats__grid{ grid-template-columns: repeat(2, 1fr); }
	.tt-ab-values__grid{ grid-template-columns: repeat(2, 1fr); }
	.tt-ab-team__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
	.tt-ab-stats__grid{ grid-template-columns: 1fr; }
	.tt-ab-values__grid{ grid-template-columns: 1fr; }
	.tt-ab-team__grid{ grid-template-columns: 1fr; max-width: 360px; }
}