/* ============================================================
   AAU — About page (Về AAU Academy)
   Palette: navy #1b2a4a | gold #c5a880 | cream #faf7f2
   ============================================================ */

.aau-about {
  --ab-navy: #1b2a4a;
  --ab-navy-2: #142039;
  --ab-gold: #c5a880;
  --ab-gold-2: #b69468;
  --ab-cream: #faf7f2;
  --ab-line: #e5e0d6;
  --ab-text: #2a3147;
  --ab-mute: #6c7080;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ab-text);
  font-size: 16px;
  line-height: 1.7;
}

.aau-about img { max-width: 100%; height: auto; display: block; }

.aau-ab-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ab-gold);
  margin: 0 0 14px;
}
.aau-ab-eyebrow--light { color: var(--ab-gold); }

.aau-ab-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  color: var(--ab-navy);
  margin: 0 0 18px;
}
.aau-ab-heading--center { text-align: center; }
.aau-ab-heading--light { color: #fff; }

.aau-ab-sub {
  font-size: 16px;
  color: var(--ab-mute);
  max-width: 680px;
  margin: 0 0 36px;
}
.aau-ab-sub--center { margin-left: auto; margin-right: auto; text-align: center; }
.aau-ab-sub--light { color: rgba(255,255,255,0.78); }

.aau-ab-richtext :where(p, ul, ol) { margin: 0 0 16px; }
.aau-ab-richtext :where(p):last-child { margin-bottom: 0; }
.aau-ab-richtext strong { color: var(--ab-navy); font-weight: 700; }

.aau-ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.aau-ab-btn--primary { background: var(--ab-navy); color: #fff; }
.aau-ab-btn--primary:hover { background: var(--ab-navy-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,42,74,0.25); }
.aau-ab-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.aau-ab-btn--ghost:hover { background: #fff; color: var(--ab-navy); }
.aau-ab-btn--gold { background: var(--ab-gold); color: var(--ab-navy); }
.aau-ab-btn--gold:hover { background: var(--ab-gold-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(197,168,128,0.35); }

.aau-ab-section-header__wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 80px 24px 24px;
  text-align: center;
}
.aau-ab-section-header .aau-ab-eyebrow { text-align: center; }

/* ============================================================
   HERO
   ============================================================ */
.aau-ab-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--hero-bg, linear-gradient(135deg, #1b2a4a 0%, #2c3a5e 100%)) center / cover no-repeat;
  text-align: center;
}
.aau-ab-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(27,42,74,0.78) 0%, rgba(20,32,57,0.85) 100%);
}
.aau-ab-hero__wrap {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 100px 24px;
}
.aau-ab-hero__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ab-gold);
  margin: 0 0 18px;
}
.aau-ab-hero__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.15;
  margin: 0 0 18px;
  color: #fff;
}
.aau-ab-hero__subtitle {
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255,255,255,0.85);
  max-width: 680px;
  margin: 0 auto 32px;
}
.aau-ab-hero__ctas {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   STORY
   ============================================================ */
.aau-ab-story { padding: 80px 24px; background: #fff; }
.aau-ab-story__wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.aau-ab-story--left .aau-ab-story__image { order: -1; }
.aau-ab-story__image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(27,42,74,0.15);
}
@media (max-width: 900px) {
  .aau-ab-story__wrap { grid-template-columns: 1fr; gap: 32px; }
  .aau-ab-story--left .aau-ab-story__image { order: 0; }
}

/* ============================================================
   STATS
   ============================================================ */
.aau-ab-stats {
  padding: 70px 24px;
  background: linear-gradient(135deg, var(--ab-navy) 0%, var(--ab-navy-2) 100%);
  color: #fff;
}
.aau-ab-stats__wrap { max-width: 1180px; margin: 0 auto; }
.aau-ab-stats .aau-ab-heading { color: #fff; text-align: center; margin-bottom: 36px; }
.aau-ab-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.aau-ab-stat { text-align: center; padding: 12px; }
.aau-ab-stat__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  color: var(--ab-gold);
  margin-bottom: 8px;
}
.aau-ab-stat__lbl {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}
@media (max-width: 700px) {
  .aau-ab-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ============================================================
   VALUES
   ============================================================ */
.aau-ab-values__grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.aau-ab-value {
  background: var(--ab-cream);
  padding: 32px 24px;
  border-radius: 14px;
  border: 1px solid var(--ab-line);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.aau-ab-value:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(27,42,74,0.1);
  border-color: var(--ab-gold);
}
.aau-ab-value__icon {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--ab-gold);
  margin-bottom: 14px;
}
.aau-ab-value__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ab-navy);
  margin: 0 0 10px;
}
.aau-ab-value__desc {
  font-size: 14px;
  color: var(--ab-mute);
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 900px) { .aau-ab-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .aau-ab-values__grid { grid-template-columns: 1fr; } }

/* ============================================================
   TEAM
   ============================================================ */
.aau-ab-trainer {
  padding: 56px 24px;
  background: #fff;
}
.aau-ab-trainer:nth-of-type(even) { background: var(--ab-cream); }
.aau-ab-trainer__wrap {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.aau-ab-trainer--right .aau-ab-trainer__avatar { order: 2; }
.aau-ab-trainer__avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ab-cream);
  box-shadow: 0 16px 50px rgba(27,42,74,0.12);
  position: relative;
}
.aau-ab-trainer__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aau-ab-trainer__avatar::after {
  content: '';
  position: absolute;
  inset: auto -10px -10px auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ab-gold);
  opacity: 0.15;
  z-index: -1;
}
.aau-ab-trainer__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--ab-navy);
  margin: 0 0 6px;
}
.aau-ab-trainer__role {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ab-gold);
  text-transform: uppercase;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ab-line);
  line-height: 1.5;
}
.aau-ab-trainer__bio {
  color: var(--ab-text);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.aau-ab-trainer__courses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--ab-line);
}
.aau-ab-trainer__courses-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ab-mute);
  margin-right: 4px;
}
.aau-ab-pill {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ab-navy);
  text-decoration: none;
  transition: all 0.18s ease;
}
.aau-ab-pill:hover {
  background: var(--ab-navy);
  color: #fff;
  border-color: var(--ab-navy);
}
.aau-ab-trainer:nth-of-type(even) .aau-ab-pill { background: #fff; }
@media (max-width: 800px) {
  .aau-ab-trainer__wrap { grid-template-columns: 1fr; gap: 24px; }
  .aau-ab-trainer__avatar { max-width: 280px; margin: 0 auto; }
  .aau-ab-trainer--right .aau-ab-trainer__avatar { order: 0; }
  .aau-ab-trainer__name, .aau-ab-trainer__role { text-align: center; }
  .aau-ab-trainer__role { text-align: center; }
}

/* ============================================================
   ECOSYSTEM (PEACH)
   ============================================================ */
.aau-ab-eco {
  padding: 80px 24px;
  background: linear-gradient(135deg, var(--ab-navy) 0%, var(--ab-navy-2) 100%);
  color: #fff;
}
.aau-ab-eco__wrap { max-width: 1180px; margin: 0 auto; }
.aau-ab-eco__head { text-align: center; margin-bottom: 48px; }
.aau-ab-eco__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) { .aau-ab-eco__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aau-ab-eco__grid { grid-template-columns: repeat(4, 1fr); } }
.aau-ab-eco__col {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px 20px;
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.aau-ab-eco__col:hover {
  transform: translateY(-4px);
  border-color: var(--ab-gold);
  background: rgba(255,255,255,0.08);
}
.aau-ab-eco__col-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--ab-gold);
  margin-bottom: 10px;
}
.aau-ab-eco__col-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  margin: 0 0 10px;
}
.aau-ab-eco__col-dom {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ab-gold);
  letter-spacing: .02em;
}
.aau-ab-eco__col--link:hover .aau-ab-eco__col-dom { text-decoration: underline; }
.aau-ab-section-header__cta { text-align: center; margin-top: 6px; }
.aau-ab-eco__col-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  margin: 0;
}


/* ============================================================
   CLIENT LOGOS — auto-scrolling marquee
   ============================================================ */
.aau-ab-clients__marquee {
  margin: 0 auto;
  padding: 24px 0 80px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.aau-ab-clients__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: aau-ab-clients-scroll 45s linear infinite;
}
.aau-ab-clients__marquee:hover .aau-ab-clients__track { animation-play-state: paused; }
@keyframes aau-ab-clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.aau-ab-client {
  flex: 0 0 200px;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.aau-ab-client:hover {
  border-color: var(--ab-gold);
  transform: translateY(-2px);
}
.aau-ab-client img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.2s ease;
}
.aau-ab-client:hover img { filter: grayscale(0) opacity(1); }
.aau-ab-client a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.aau-ab-client__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ab-navy);
  text-align: center;
}
@media (max-width: 768px) {
  .aau-ab-client { flex-basis: 160px; padding: 18px; }
  .aau-ab-clients__track { animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce) {
  .aau-ab-clients__track { animation: none; }
}

/* ============================================================
   TIMELINE
   ============================================================ */
.aau-ab-timeline { padding: 24px 24px 80px; background: #fff; }
.aau-ab-timeline__wrap { max-width: 800px; margin: 0 auto; }
.aau-ab-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.aau-ab-timeline__list::before {
  content: '';
  position: absolute;
  left: 100px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--ab-line);
}
.aau-ab-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 16px 0;
}
.aau-ab-timeline__item::before {
  content: '';
  position: absolute;
  left: 94px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ab-gold);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--ab-gold);
  z-index: 1;
}
.aau-ab-timeline__year {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--ab-navy);
  text-align: right;
  padding-top: 12px;
}
.aau-ab-timeline__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ab-navy);
  margin: 0 0 6px;
}
.aau-ab-timeline__desc {
  font-size: 14px;
  color: var(--ab-mute);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 600px) {
  .aau-ab-timeline__list::before { left: 8px; }
  .aau-ab-timeline__item { grid-template-columns: 50px 1fr; gap: 20px; }
  .aau-ab-timeline__item::before { left: 2px; }
  .aau-ab-timeline__year { text-align: left; padding-top: 12px; font-size: 16px; }
}

/* ============================================================
   CTA
   ============================================================ */
.aau-ab-cta {
  padding: 70px 24px;
  background: linear-gradient(135deg, #c5a880 0%, #b69468 100%);
  color: var(--ab-navy);
  text-align: center;
}
.aau-ab-cta__wrap { max-width: 760px; margin: 0 auto; }
.aau-ab-cta__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--ab-navy);
}
.aau-ab-cta__sub {
  font-size: 16px;
  color: rgba(27,42,74,0.85);
  margin: 0 0 26px;
}
.aau-ab-cta .aau-ab-btn--gold {
  background: var(--ab-navy);
  color: #fff;
}
.aau-ab-cta .aau-ab-btn--gold:hover {
  background: var(--ab-navy-2);
}

/* ============================================================
   Founder — dải chứng thực & chặng đường nghề nghiệp
   ============================================================ */
.aau-ab-fproofs { background: var(--ab-navy-2); padding: 62px 24px; }
.aau-ab-fproofs__wrap { max-width: 1140px; margin: 0 auto; }
.aau-ab-fproofs__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 8px;
}
.aau-ab-fproof {
  background: rgba(255,255,255,.05); border: 1px solid rgba(197,168,128,.28);
  border-radius: 14px; padding: 26px 24px;
}
.aau-ab-fproof b {
  display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 38px;
  line-height: 1; color: var(--ab-gold); margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.aau-ab-fproof strong { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 7px; }
.aau-ab-fproof p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.68); margin: 0; }

.aau-ab-ftrack { background: #fff; padding: 62px 24px; }
.aau-ab-ftrack__wrap { max-width: 1140px; margin: 0 auto; }
.aau-ab-ftrack__list { border-top: 1px solid var(--ab-line); margin-top: 8px; }
.aau-ab-ftrack__row {
  display: grid; grid-template-columns: 168px 1fr; gap: 24px;
  padding: 15px 0; border-bottom: 1px solid var(--ab-line); align-items: baseline;
}
.aau-ab-ftrack__y {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14.5px;
  color: var(--ab-gold-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aau-ab-ftrack__b b { font-weight: 600; color: var(--ab-navy); }
.aau-ab-ftrack__b span { display: block; font-size: 14.5px; color: var(--ab-mute); margin-top: 2px; }

@media (max-width: 640px) {
  .aau-ab-fproofs, .aau-ab-ftrack { padding: 44px 20px; }
  .aau-ab-fproof { padding: 22px 20px; }
  .aau-ab-fproof b { font-size: 32px; }
  .aau-ab-ftrack__row { grid-template-columns: 1fr; gap: 4px; }
}