/* ═══════════════════════════════════════════════════════════════
   TRANG "VỀ CHÚNG MÌNH" (#about) — prefix `ab-`
   Dùng lại token (css/tbq/) và các khối chung của trang chủ v3
   (.hp-wrap, .hp-head, .hp-line, .hp-rule, .hp-fact, .hp-shot,
   .hp-marquee, .hp-tile…). File này chỉ thêm phần riêng của trang.
   Nguyên tắc: mỗi khối 1 ý, chữ 1–2 dòng, hình làm chính.
   ═══════════════════════════════════════════════════════════════ */

#aboutPage section {
    --hp-y: clamp(56px, 7vw, 96px);
    padding: var(--hp-y) 0;
}
#aboutPage section + section:not([data-surface]):not(.ab-cafe) { border-top: var(--hairline) solid var(--border); }

/* Ảnh dùng chung: cắt khít khung, bo góc theo hệ thống, nền chờ khi ảnh chưa tải */
.ab-photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: var(--wash);
    border-radius: var(--radius);
}

/* ① Mở đầu */
#aboutPage section.ab-hero { padding: clamp(56px, 7vw, 104px) 0; overflow: hidden; }
.ab-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: center;
}
.ab-hero-title { margin-top: var(--space-6); }
.ab-hero .tbq-lead { max-width: 46ch; }
.ab-hero-cta { margin-top: var(--space-8); }
.ab-hero-media { position: relative; padding: 0 0 var(--space-12) var(--space-12); }
.ab-hero-main { aspect-ratio: 4 / 5; max-height: 560px; }
.ab-hero-side {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42%;
    aspect-ratio: 1;
    border: 6px solid var(--bg);
    box-sizing: content-box;
}

/* ② Chào khách từ quán */
.ab-cafe-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-6);
    background: var(--accent-bg);
    border: var(--hairline) solid var(--accent-line);
    border-radius: var(--radius);
}
.ab-cafe-photo { aspect-ratio: 4 / 3; }
.ab-cafe-body .tbq-title { margin: var(--space-2) 0 var(--space-4); }
.ab-cafe-body p:not(.tbq-kicker) { margin: 0 0 var(--space-6); max-width: 52ch; color: var(--ink-2); line-height: var(--leading-body); }

/* ③ Số liệu nổi bật: bảng nền tối cuối phần Câu chuyện, số cỡ lớn */
.ab-facts {
    margin-top: clamp(40px, 5vw, 72px);
    padding: clamp(32px, 4.5vw, 64px) clamp(24px, 4.5vw, 64px);
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--radius);
}
.ab-facts-list { margin-top: var(--space-6); }
.ab-facts-list .hp-fact { border-left-color: var(--accent-line); }
/* Cỡ số theo bề rộng cột (cqi), không theo màn hình: "06/2025" luôn vừa cột ở mọi khổ */
.ab-facts-list .hp-fact { container-type: inline-size; }
.ab-facts-list .hp-fact dd { font-size: clamp(32px, 29cqi, 80px); white-space: nowrap; }
.ab-facts-note { margin: var(--space-8) 0 0; }

/* ⑥ Dải logo */
#aboutPage section.ab-logos { padding-bottom: var(--space-12); }
.ab-logos .hp-head { margin-bottom: var(--space-6); }
.ab-marquee { --gap: var(--space-3); }

/* Lưới thẻ dùng chung */
.ab-grid { display: grid; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.ab-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-grid h3 { margin: 0; }
.ab-grid p { margin: 0; color: var(--ink-2); line-height: var(--leading-body); }

/* ④ Phục vụ ai: ảnh + tiêu đề + 1 dòng */
.ab-tile .ab-photo { aspect-ratio: 10 / 7; margin-bottom: var(--space-4); }
.ab-tile h3 { margin-bottom: var(--space-1); }
/* Câu chốt mỗi thẻ: in đậm chữ display, vàng đậm, nét vàng ngắn dẫn vào — nổi hơn dòng liệt kê công cụ */
.ab-grid p.ab-slogan {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font: var(--weight-semi) clamp(21px, 1.9vw, 25px)/1.25 var(--font-display);
    letter-spacing: -0.005em;
    color: var(--accent-text);
}
.ab-slogan::before { content: ""; flex: none; width: var(--space-6); border-top: 2px solid var(--accent-line); }
/* Dòng dẫn đầu mục: 2 loại gói in đậm cho dễ bắt mắt */
.ab-who .hp-head-note em { font-style: normal; font-weight: var(--weight-semi); color: var(--ink); }

/* ③ Câu chuyện + cột mốc */
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.ab-story-grid .tbq-title { margin: var(--space-2) 0 var(--space-5); }
.ab-prose { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: var(--text-lg); line-height: var(--leading-body); }
.ab-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--space-8); }
.ab-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 5px;
    border-left: var(--hairline) solid var(--accent-line);
}
.ab-timeline li { position: relative; padding-bottom: var(--space-6); }
.ab-timeline li:last-child { padding-bottom: 0; }
.ab-timeline li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(-1 * var(--space-8));
    width: 11px;
    height: 11px;
    background: var(--bg);
    border: var(--hairline) solid var(--accent-line);
    border-radius: var(--radius-round);
}
.ab-timeline li:last-child::before { background: var(--accent-line); }
.ab-timeline time {
    display: block;
    font: var(--weight-regular) 26px/1.1 var(--font-display);
    color: var(--accent-text);
    font-variant-numeric: lining-nums tabular-nums;
}
.ab-timeline p { margin: var(--space-1) 0 0; color: var(--ink-2); line-height: var(--leading-body); }
/* Mốc chưa tới (trang Đối tác còn tắt): nhãn "Coming soon", chấm rỗng nét đứt — không tô vàng như mốc đã qua */
.ab-soon { margin-left: var(--space-2); vertical-align: 2px; }
html:not(.partners-live) .ab-timeline li.ab-soon-step::before { background: var(--bg); border-style: dashed; box-shadow: none; transform: none; }
html:not(.partners-live) .ab-timeline li.ab-soon-step::after { display: none; }
/* Tên miền trong cột mốc: chữ vàng đậm + gạch chân vàng (vẽ ra khi mốc sáng lên, xem phần Chuyển động) */
.ab-site {
    font-weight: 600;
    color: var(--accent-text);
    text-decoration: none;
    font-size: 1.08em;
    background: linear-gradient(var(--accent-line), var(--accent-line)) no-repeat 0 100% / 100% 2px, var(--accent-bg);
    padding: 1px 6px 2px;
    border-radius: 3px;
    transition: background-size var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
}
.ab-site:hover { background-size: 100% 100%; color: var(--on-accent); }
.ab-site:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ⑤ Sứ mệnh · tầm nhìn (dải tối) */
.ab-mv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
/* Tầm nhìn cùng cỡ chữ với Sứ mệnh — hai ý ngang hàng nhau */
.ab-statement,
.ab-vision {
    margin: var(--space-3) 0 0;
    font: var(--weight-regular) clamp(28px, 3.4vw, 42px)/1.15 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}
.ab-vision-kicker { margin-top: var(--space-10); }
.ab-mv-photo { aspect-ratio: 9 / 7; }

/* Danh sách tích (dùng chung với #partners — xem partners.css) */
.ab-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8) var(--space-10);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ab-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ab-checks .hp-ico { width: 22px; height: 22px; margin-top: 2px; color: var(--accent-text); }
.ab-checks strong { display: block; font: var(--weight-medium) 20px/1.25 var(--font-display); color: var(--ink); }
.ab-checks span { display: block; margin-top: var(--space-1); color: var(--ink-2); line-height: var(--leading-body); }

/* ⑧ Cam kết: nền --wash; tiêu đề + con dấu tròn ở trên, lưới bento 3 cột bên dưới.
   Thẻ to/nhỏ xen kẽ, mỗi thẻ một hình minh hoạ (.ab-pr-art) nói đúng ý cam kết đó.
   Hình minh hoạ chạy hiệu ứng khi thẻ vào cảnh (xem phần Chuyển động); không có .ab-motion thì đứng ở trạng thái cuối. */
#aboutPage section.ab-diff { background: var(--wash); border-top: 0; }
#aboutPage section.ab-diff + section { border-top: 0; }

.ab-diff-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: end;
    margin-bottom: var(--space-12);
}
.ab-diff-title { margin: var(--space-2) 0 0; font-size: clamp(34px, 4.4vw, 56px); line-height: var(--leading-tight); }
.ab-diff-aside { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.ab-diff-lead {
    margin: 0;
    max-width: 28ch;
    padding-left: var(--space-5);
    border-left: 2px solid var(--accent-line);
    color: var(--ink-2);
    font-size: var(--text-lg);
    line-height: var(--leading-body);
}

/* Con dấu tròn: chữ chạy vòng quanh chữ lồng TBQ */
.ab-seal { flex: none; width: 124px; height: 124px; overflow: visible; }
.ab-seal-ring { fill: none; stroke: var(--accent-line); stroke-width: 1; }
.ab-seal text { fill: var(--accent-text); font: var(--weight-medium) 9.5px var(--font-body); }
.ab-seal .ab-seal-mark { fill: var(--ink); font: var(--weight-regular) 26px var(--font-display); letter-spacing: .04em; }
.ab-seal-spin { transform-box: view-box; transform-origin: 50% 50%; animation: ab-spin 48s linear infinite; }
@keyframes ab-spin { to { transform: rotate(1turn); } }

.ab-promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ab-pr {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 300px;
    padding: var(--space-8);
    background: var(--surface);
    color: var(--ink);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.ab-pr:hover { border-color: color-mix(in srgb, var(--accent-line) 60%, var(--border)); box-shadow: 0 26px 48px -34px rgb(0 0 0 / .45); }
/* Thẻ rộng (2 cột): chữ bên trái, hình bên phải */
.ab-pr--wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: end;
    gap: var(--space-10);
}
.ab-pr--dark { background: var(--bg); border-color: var(--bg); }
.ab-pr--dark:hover { border-color: var(--accent-line); }
.ab-pr--tint { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent-line) 35%, transparent); }

/* Số thứ tự kiểu nhãn: "01 ——" */
.ab-num {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font: var(--weight-medium) var(--text-xs)/1 var(--font-body);
    letter-spacing: var(--tracking-kicker);
    color: var(--accent-text);
    font-variant-numeric: lining-nums tabular-nums;
}
.ab-num::after { content: ""; width: var(--space-6); border-top: var(--hairline) solid var(--accent-line); }
.ab-pr h3 {
    margin: 0;
    font: var(--weight-regular) clamp(24px, 2.3vw, 30px)/var(--leading-snug) var(--font-display);
    letter-spacing: -0.01em;
    color: var(--ink);
}
.ab-pr p { margin: var(--space-2) 0 0; max-width: 34ch; color: var(--ink-2); line-height: var(--leading-body); }
.ab-pr-art { transition: transform var(--dur-slow) var(--ease); }
.ab-pr:hover .ab-pr-art { transform: translateY(-4px); }

/* 01 — Bàn giao: số lớn + 3 bước nối bằng nét vàng */
.ab-steps { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); }
.ab-steps-big {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font: var(--weight-regular) clamp(76px, 8.4vw, 116px)/.9 var(--font-display);
    letter-spacing: -0.03em;
    color: var(--accent-text);
}
.ab-steps-big small { font: italic var(--weight-regular) var(--text-2xl)/1 var(--font-display); letter-spacing: 0; color: var(--ink-2); }
.ab-steps ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.ab-steps ol::before,
.ab-steps ol::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: calc(100% / 3 - 4px);
    border-top: var(--hairline) solid var(--border-strong);
}
.ab-steps ol::after { border-top: 2px solid var(--accent-line); top: 3px; transform-origin: left; }
.ab-steps li { position: relative; padding: var(--space-6) var(--space-2) 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.ab-steps li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-round);
    background: var(--bg);
    border: 2px solid var(--accent-line);
    z-index: 1;
}
.ab-steps li:last-child { color: var(--ink); }
.ab-steps li:last-child::before { background: var(--accent-line); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-line) 25%, transparent); }

/* 02 — 24/7: số lớn + bảy ngày đều "mở" */
.ab-week-big { display: block; font: var(--weight-regular) clamp(64px, 6.4vw, 88px)/.9 var(--font-display); letter-spacing: -0.03em; color: var(--accent-text); }
.ab-week-days { display: flex; gap: 6px; margin-top: var(--space-5); }
.ab-week-days i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-round);
    border: var(--hairline) solid var(--accent-line);
    background: var(--surface);
    font: normal var(--weight-medium) 10px/1 var(--font-body);
    color: var(--accent-text);
}

/* 03 — Giá minh bạch: "Giá trên web = Giá bạn trả" */
.ab-equal { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.ab-equal span {
    padding: var(--space-4) var(--space-2);
    border: var(--hairline) dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    text-align: center;
    font: italic var(--weight-regular) var(--text-lg)/1.2 var(--font-display);
    color: var(--ink);
}
.ab-equal b { font: var(--weight-regular) 52px/1 var(--font-display); color: var(--accent-text); }

/* 04 — Bảo hành: thanh vàng phủ trọn từ ngày nhận tới ngày hết hạn */
.ab-pr--wide .ab-cover { align-self: center; }
.ab-cover { display: block; }
.ab-cover-label { display: block; margin-bottom: var(--space-4); font: italic var(--weight-regular) var(--text-xl)/1.2 var(--font-display); color: var(--ink); }
.ab-cover-bar {
    position: relative;
    display: block;
    height: 12px;
    border-radius: var(--radius-pill);
    background: repeating-linear-gradient(90deg, var(--border) 0 2px, transparent 2px 14px), var(--wash);
}
.ab-cover-bar i {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--palette-gold-light), var(--accent-line));
    transform-origin: left;
}
.ab-cover-ends {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-3);
    font: var(--weight-medium) var(--text-2xs)/1 var(--font-body);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--ink-3);
}

/* 05 — Hướng dẫn: bong bóng chat của tiệm */
.ab-bubble { display: flex; align-items: flex-end; gap: var(--space-3); }
.ab-bubble::before {
    content: "T";
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-round);
    border: var(--hairline) solid var(--accent-line);
    font: var(--weight-regular) 18px/1 var(--font-display);
    color: var(--accent-text);
}
.ab-bubble span {
    padding: var(--space-3) var(--space-4);
    border-radius: 16px 16px 16px 4px;
    background: var(--wash);
    font: italic var(--weight-regular) var(--text-lg)/1.3 var(--font-display);
    color: var(--ink);
}

/* 06 — Nhắc gia hạn: thông báo nhỏ, nghiêng nhẹ, thẳng lại khi rê chuột */
.ab-notice {
    display: block;
    padding: var(--space-3) var(--space-4);
    border: var(--hairline) solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--ink);
    transform: rotate(-2deg);
}
.ab-pr:hover .ab-notice { transform: rotate(0deg) translateY(-4px); }
.ab-notice-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font: var(--weight-medium) var(--text-2xs)/1 var(--font-body);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--ink-3);
}
.ab-notice-head .hp-ico { width: 14px; height: 14px; color: var(--accent-icon); }

/* Ô cuối: lối nhắn Zalo, viền nét đứt — cả ô bấm được */
.ab-pr--ask { padding: 0; background: transparent; border-style: dashed; border-color: var(--border-strong); }
.ab-pr--ask a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8);
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease);
}
.ab-pr--ask a:hover { background: var(--surface); }
.ab-pr--ask a:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.ab-pr-ask-q { font: var(--weight-regular) clamp(26px, 2.6vw, 34px)/1.15 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.ab-pr--ask strong { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); color: var(--accent-text); }
.ab-pr--ask .hp-ico { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease); }
.ab-pr--ask a:hover .hp-ico { transform: translateX(4px); }

/* ⑨ Đội ngũ: ô chữ lồng (monogram) trên nền tối, tên + vai trò bên dưới */
.ab-member {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.ab-member-mark {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    isolation: isolate;
}
/* Quầng vàng mờ + vạch kẻ mảnh ở đáy ô — gợi chất "giấy & mực" của bộ nhận diện */
.ab-member-mark::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    background: radial-gradient(closest-side at 70% 30%, color-mix(in srgb, var(--accent-line) 26%, transparent), transparent);
    transition: transform 900ms var(--ease);
}
.ab-member-mark::after {
    content: "";
    position: absolute;
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-5);
    border-top: var(--hairline) solid var(--border);
}
.ab-avatar {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    font: var(--weight-regular) 56px/1 var(--font-display);
    letter-spacing: 0.04em;
    color: var(--accent-text);
    border: var(--hairline) solid var(--accent-line);
    border-radius: var(--radius-round);
    box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px color-mix(in srgb, var(--accent-line) 40%, transparent);
    transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
.ab-member-body { padding: var(--space-6) var(--space-6) var(--space-8); }
.ab-member h3 { font-size: 26px; }
.ab-grid .ab-role {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--accent-text);
}
.ab-member:hover { border-color: color-mix(in srgb, var(--accent-line) 55%, var(--border)); box-shadow: 0 22px 40px -30px rgb(0 0 0 / .4); }
.ab-member:hover .ab-member-mark::before { transform: translate(-12%, 14%); }
.ab-member:hover .ab-avatar { transform: scale(1.05); box-shadow: 0 0 0 12px var(--bg), 0 0 0 13px color-mix(in srgb, var(--accent-line) 60%, transparent); }

/* ⑦ Phản hồi: thẻ <a> mở ảnh gốc thay cho lightbox của trang chủ */
.ab-shots .hp-shot { cursor: pointer; }

/* ⑩ Bước tiếp theo: mỗi người đọc một dòng */
.ab-next .hp-close-title { margin-bottom: var(--space-8); }
.ab-paths { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--border); }
.ab-paths a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    min-height: 64px;
    padding: var(--space-5) 0;
    border-bottom: var(--hairline) solid var(--border);
    color: var(--ink-2);
    text-decoration: none;
    font-size: var(--text-lg);
    transition: color var(--dur-fast) var(--ease);
}
.ab-paths strong {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--weight-regular) 22px/1.2 var(--font-display);
    color: var(--accent-text);
}
.ab-paths .hp-ico { transition: transform var(--dur-fast) var(--ease); }
.ab-paths a:hover { color: var(--ink); }
.ab-paths a:hover .hp-ico { transform: translateX(4px); }
.ab-paths a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ab-contact { margin: var(--space-8) 0 0; }
.ab-contact a { color: var(--accent-text); text-underline-offset: 3px; }

/* ─────────────────────────── Chuyển động ───────────────────── */
/* .ab-motion do about.js gắn khi được phép chuyển động — thiếu JS hoặc
   "Giảm chuyển động" thì trang giữ nguyên dạng tĩnh ở trên. */

/* Hiện dần khi cuộn tới; cùng nhóm nối đuôi nhau theo --i */
.ab-motion [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 800ms var(--ease) calc(var(--i, 0) * 110ms),
                transform 1000ms var(--ease) calc(var(--i, 0) * 110ms);
}
.ab-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Ảnh mở từ dưới lên như kéo rèm */
.ab-motion [data-reveal] .ab-photo,
.ab-motion .ab-photo[data-reveal] {
    clip-path: inset(22% 0 0 0 round var(--radius));
    transition: clip-path 1200ms var(--ease) calc(var(--i, 0) * 110ms + 150ms),
                transform 450ms var(--ease);
}
.ab-motion .ab-photo[data-reveal] {
    transition: opacity 800ms var(--ease) calc(var(--i, 0) * 110ms),
                transform 1000ms var(--ease) calc(var(--i, 0) * 110ms),
                clip-path 1200ms var(--ease) calc(var(--i, 0) * 110ms + 150ms);
}
.ab-motion .is-in .ab-photo,
.ab-motion .ab-photo.is-in { clip-path: inset(0 0 0 0 round var(--radius)); }

/* Thẻ cam kết / đội ngũ: giữ hiệu ứng rê chuột (viền, bóng) bên cạnh hiệu ứng vào cảnh */
.ab-motion .ab-promises > li[data-reveal],
.ab-motion .ab-team-grid > li[data-reveal] {
    transition: opacity 800ms var(--ease) calc(var(--i, 0) * 110ms),
                transform 1000ms var(--ease) calc(var(--i, 0) * 110ms),
                border-color var(--dur-base) var(--ease),
                box-shadow var(--dur-slow) var(--ease);
}
/* Hình minh hoạ cam kết: nét bàn giao + thanh bảo hành chạy ra, bảy ngày sáng lần lượt */
.ab-motion .ab-pr .ab-steps ol::after,
.ab-motion .ab-pr .ab-cover-bar i { transform: scaleX(0); transition: transform 1400ms var(--ease) calc(var(--i, 0) * 110ms + 450ms); }
.ab-motion .ab-pr.is-in .ab-steps ol::after,
.ab-motion .ab-pr.is-in .ab-cover-bar i { transform: scaleX(1); }
.ab-motion .ab-pr .ab-week-days i { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease) calc(var(--d) * 80ms + 500ms), transform 500ms var(--ease) calc(var(--d) * 80ms + 500ms); }
.ab-motion .ab-pr.is-in .ab-week-days i { opacity: 1; transform: none; }
.ab-week-days i:nth-child(2) { --d: 1; } .ab-week-days i:nth-child(3) { --d: 2; } .ab-week-days i:nth-child(4) { --d: 3; }
.ab-week-days i:nth-child(5) { --d: 4; } .ab-week-days i:nth-child(6) { --d: 5; } .ab-week-days i:nth-child(7) { --d: 6; }
.ab-week-days i { --d: 0; }

/* Chữ lồng của đội ngũ: vòng tròn vẽ dần khi thẻ vào cảnh */
.ab-motion .ab-team-grid > li .ab-avatar { opacity: 0; transform: scale(.82); }
.ab-motion .ab-team-grid > li.is-in .ab-avatar {
    opacity: 1;
    transform: none;
    transition: opacity 900ms var(--ease) calc(var(--i, 0) * 110ms + 300ms),
                transform 1100ms var(--ease) calc(var(--i, 0) * 110ms + 300ms),
                box-shadow 700ms var(--ease);
}
.ab-motion .ab-team-grid > li.is-in:hover .ab-avatar { transform: scale(1.05); transition-delay: 0s; }

/* Thẻ "phục vụ ai": rê chuột thì ảnh nhấc lên */
.ab-motion .ab-tile.is-in:hover .ab-photo { transform: translateY(-6px); box-shadow: 0 18px 32px -18px rgb(0 0 0 / .45); }

/* Parallax: --sy (px cuộn) và --mx/--my (chuột, -1…1) do about.js đặt.
   Dùng thuộc tính `translate` riêng để không đè transform của hiệu ứng vào cảnh. */
.ab-motion .ab-hero-main {
    translate: calc(var(--mx, 0) * -8px) calc(var(--sy, 0) * -0.06px + var(--my, 0) * -8px);
    transition: translate 500ms var(--ease);
}
.ab-motion .ab-hero-side {
    translate: calc(var(--mx, 0) * 18px) calc(var(--sy, 0) * -0.16px + var(--my, 0) * 14px);
    transition: translate 500ms var(--ease);
}
.ab-motion .ab-mv-photo { translate: 0 calc(var(--sy, 0) * -0.08px); }

/* Dòng thời gian: vạch vàng chạy theo nhịp cuộn (--p 0…1), mốc sáng lên khi tới */
.ab-motion .ab-timeline::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(var(--accent-line), var(--accent-text));
    transform: scaleY(var(--p, 0));
    transform-origin: top;
    transition: transform 160ms linear;
}
.ab-motion .ab-timeline li {
    opacity: .38;
    transform: translateY(10px);
    transition: opacity 600ms var(--ease), transform 700ms var(--ease);
}
.ab-motion .ab-timeline li.is-on { opacity: 1; transform: none; }
.ab-motion .ab-timeline li::before {
    z-index: 1;
    transition: background-color 400ms var(--ease), box-shadow 600ms var(--ease), transform 600ms var(--ease);
}
.ab-motion .ab-timeline li:last-child::before { background: var(--bg); }
.ab-motion .ab-timeline li.is-on::before {
    background: var(--accent-line);
    transform: scale(1.3);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-line) 22%, transparent);
}
.ab-motion .ab-timeline time { transform-origin: left center; transition: transform 700ms var(--ease); }
.ab-motion .ab-timeline li.is-on time { transform: scale(1.08); }
.ab-motion .ab-timeline li .ab-site { background-size: 0 2px; transition: background-size 900ms var(--ease) 300ms, color var(--dur-fast) var(--ease); }
.ab-motion .ab-timeline li.is-on .ab-site { background-size: 100% 2px; }
.ab-motion .ab-timeline li.is-on .ab-site:hover { background-size: 100% 100%; transition-delay: 0s; }
/* Mốc hiện tại nhịp sáng liên tục */
.ab-motion .ab-timeline li:last-child.is-on::after {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(-1 * var(--space-8));
    width: 11px;
    height: 11px;
    border-radius: var(--radius-round);
    background: var(--accent-line);
    animation: ab-pulse 2.4s var(--ease) infinite;
}
@keyframes ab-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }

/* Bảng số liệu: quầng sáng vàng — trôi chậm khi đứng yên, theo con trỏ khi rê chuột */
.ab-motion .ab-facts { position: relative; overflow: hidden; isolation: isolate; }
.ab-motion .ab-facts::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--gx, 85%);
    top: var(--gy, 10%);
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-line) 30%, transparent), transparent);
    opacity: .7;
    pointer-events: none;
    transition: left 600ms var(--ease), top 600ms var(--ease), opacity 400ms var(--ease);
    animation: ab-drift 12s ease-in-out infinite alternate;
}
.ab-motion .ab-facts.is-lit::before { opacity: 1; animation: none; }
@keyframes ab-drift { to { translate: -38vw 160px; } }
.ab-motion .ab-facts .hp-fact { opacity: 0; transform: translateY(18px); }
.ab-motion .ab-facts.is-in .hp-fact {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--ease), transform 800ms var(--ease);
    transition-delay: calc(var(--n, 0) * 120ms + 250ms);
}
.ab-motion .ab-facts .hp-fact:nth-child(2) { --n: 1; }
.ab-motion .ab-facts .hp-fact:nth-child(3) { --n: 2; }
.ab-motion .ab-facts .hp-fact:nth-child(4) { --n: 3; }

/* ─────────────────────────── Responsive ────────────────────── */

@media (max-width: 1024px) {
    .ab-hero-grid, .ab-story-grid, .ab-mv { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
    .ab-hero-media { max-width: 560px; }
    .ab-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-diff-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-10); }
    .ab-diff-aside { justify-content: flex-start; }
    .ab-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-pr--ask { grid-column: span 2; }
}

@media (max-width: 768px) {
    .ab-grid--3, .ab-checks, .ab-cafe-card { grid-template-columns: minmax(0, 1fr); }
    /* ④ Một cột: mỗi mục thành 1 thẻ có khung, không thì câu chốt mục trên dính sát ảnh mục dưới, khó biết ảnh nào đi với chữ nào */
    .ab-who .ab-grid--3 { gap: var(--space-5); }
    .ab-tile { padding: var(--space-3) var(--space-3) var(--space-6); background: var(--surface); border: var(--hairline) solid var(--border); border-radius: var(--radius); }
    .ab-tile > :not(.ab-photo) { padding-inline: var(--space-2); }
    .ab-member-mark { aspect-ratio: 16 / 8; }
    .ab-avatar { width: 104px; height: 104px; font-size: 44px; }
    .ab-cafe-card { gap: var(--space-6); padding: var(--space-4); }
    .ab-hero-media { padding: 0 0 var(--space-8) var(--space-8); }
    .ab-hero-main { aspect-ratio: 4 / 4.2; }
    .ab-shots { grid-auto-columns: 62%; }
    .ab-paths a { font-size: var(--text-md); }
}

@media (max-width: 560px) {
    .ab-promises { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    /* Một cột: hình luôn ở trên, chữ ở dưới (thẻ rộng có chữ đứng trước trong HTML nên đảo chiều) */
    .ab-pr, .ab-pr--wide { grid-column: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-6); min-height: 0; padding: var(--space-6); }
    .ab-pr--wide { flex-direction: column-reverse; justify-content: flex-end; align-items: stretch; }
    .ab-pr--ask { padding: 0; }
    .ab-pr--ask a { padding: var(--space-6); gap: var(--space-4); }
    .ab-pr--wide .ab-cover { align-self: stretch; }
    .ab-steps { gap: var(--space-6); }
    .ab-seal { width: 96px; height: 96px; }
}

@media (max-width: 480px) {
    .ab-hero-cta .tbq-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-paths a:hover .hp-ico { transform: none; }
    .ab-seal-spin { animation: none; }
    .ab-pr-art, .ab-notice, .ab-pr--ask .hp-ico { transition: none; }
    .ab-pr:hover .ab-pr-art { transform: none; }
    .ab-pr:hover .ab-notice { transform: rotate(-2deg); }
    .ab-member, .ab-member-mark::before, .ab-avatar { transition: none; }
    .ab-member:hover .ab-member-mark::before, .ab-member:hover .ab-avatar { transform: none; }
    /* about.js không gắn .ab-motion khi giảm chuyển động — đây là lớp chặn thứ hai */
    .ab-motion [data-reveal], .ab-motion .ab-facts .hp-fact, .ab-motion .ab-timeline li { opacity: 1; transform: none; transition: none; }
    .ab-motion .ab-photo { clip-path: none; translate: none; transition: none; }
    .ab-motion .ab-timeline::after, .ab-motion .ab-facts::before, .ab-motion .ab-timeline li::after { display: none; }
}