/* ============================================================ KQT — TRANG GIỚI THIỆU (/gioi-thieu/) Nguồn: about.html + kqt-about.css (bản thiết kế trong website KQT.COM (6).zip, Đợt 1 — 2026-09-09). Mọi selector SCOPE dưới body.kqt-about (giống quy ước body.kqt-svc của trang /dich-vu-lap-dat/) — chỉ nạp CSS này khi is_page('gioi-thieu') nên không cần !important, nhưng vẫn cần scope để không rò ra trang khác nếu class `.ab-*` trùng tên với theme khác trong tương lai. .wrap / .btn / .btn--gold / các biến --serif/--gold/--navy/ --cream/--radius-lg… đã có sẵn TOÀN CỤC ở kqt-chrome.css (nạp mọi trang không phải trang chủ) — KHÔNG định nghĩa lại ở đây, chỉ định nghĩa phần riêng .ab-*. ⚠️ NGOẠI LỆ: .btn--ghost / .btn--ghost-light KHÔNG có trong kqt-chrome.css (chỉ có .btn/.btn--gold — đã kiểm lại 2026-09-09, xem assets/css/kqt-chrome.css thật, đừng tin dòng comment cũ ở trên). assets/css/kqt.css có định nghĩa 2 class này nhưng file đó KHÔNG BAO GIỜ được enqueue trên site thật (đã ghi trong bộ nhớ dự án) — dùng .btn--ghost hay .btn--ghost-light mà không tự định nghĩa ở đây thì nút render vô hình (không viền, không nền, chữ chìm vào nền tối) — ĐÚNG lỗi Quyết chụp màn hình báo ngày 2026-09-09 ở nút "Nhận tư vấn miễn phí". Cùng gốc bệnh đã từng vá ở kqt-service.css cho /dich-vu-lap-dat/ (dòng 41-57 file đó) — copy đúng pattern: biến thể mặc định (nền sáng, viền/chữ navy) + biến thể trên nền navy (viền/chữ kem nhạt). ⚠️ LỖI THỨ 2 — 2026-09-09, Quyết báo "nền tối đây này, nhiều section nền này" (chụp Section B, không phải riêng section nào — TOÀN TRANG). Đã xác minh bằng Claude-in-Chrome + getComputedStyle() thật (không đoán qua CSS tĩnh): mọi ancestor (.ab-sec, .wrap, .ab-head, #content, BODY) đều background:rgba(0,0,0,0) — TRONG SUỐT, đúng thiết kế (section B/D/F2 cố ý không có modifier màu). Thủ phạm là — getComputedStyle trả background-color:rgb(77,77,77) (#4D4D4D, xám) dù KHÔNG selector nào trong theme khai nền cho html/body trang này. Cùng NGUYÊN mẫu bệnh đã vá ở kqt-service.css dòng 25-33 cho /dich-vu-lap-dat/ ("Sương xám sau tiêu đề S9"): trình duyệt/OS ở chế độ Dark tự tô xám mọi vùng KHÔNG có nền khai rõ — color-scheme:light chặn heuristic đó, background:var(--white) là lưới an toàn thứ hai. Copy nguyên pattern đó sang đây. */ body.kqt-about{ background:var(--white); color-scheme:light; } html:has(body.kqt-about){ background:var(--white); color-scheme:light; } /* ---------- .btn--ghost / .btn--ghost-light — ĐỊNH NGHĨA RIÊNG ---------- */ body.kqt-about .btn--ghost{ background:transparent; border:1px solid var(--navy); color:var(--navy); } body.kqt-about .btn--ghost:hover{ background:var(--navy); color:var(--on-navy); } /* .btn--ghost-light VÀ .btn--ghost trong .ab-hero/.ab-cta (nền navy/ảnh tối): viền + chữ màu kem nhạt trong suốt, không phải navy đặc — đọc được trên nền tối. */ body.kqt-about .btn--ghost-light, body.kqt-about .ab-hero .btn--ghost, body.kqt-about .ab-cta .btn--ghost, body.kqt-about .ab-sec--navy .btn--ghost{ background:transparent; border:1px solid rgba(244,241,233,.4); color:var(--on-navy); } body.kqt-about .btn--ghost-light:hover, body.kqt-about .ab-hero .btn--ghost:hover, body.kqt-about .ab-cta .btn--ghost:hover, body.kqt-about .ab-sec--navy .btn--ghost:hover{ background:rgba(244,241,233,.12); border-color:var(--gold-light); color:var(--on-navy); } /* SỬA 2026-09-10 (chuẩn hóa cỡ chữ toàn site): eyebrow vốn 12px/đậm 700, lệch với Trang chủ + Dịch vụ (đều 14px/đậm 600) — đổi về var(--fs-eyebrow) + weight 600 cho khớp, xem kqt-typography.css. */ /* SỬA 2026-09-10 (Quyết yêu cầu bỏ vạch trang trí): đã gỡ ::before/::after (vạch vàng 26px trước/quanh chữ eyebrow) + gap:10px đi kèm nó. */ body.kqt-about .ab-eyebrow{ font-family:var(--sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dark); display:inline-flex; align-items:center; } body.kqt-about .ab-eyebrow--c{ justify-content:center; } body.kqt-about .ab-eyebrow--light{ color:var(--gold-light); } /* ---------- A · HERO ---------- */ body.kqt-about .ab-hero{ position:relative; min-height:640px; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy); } body.kqt-about .ab-hero__bg{ position:absolute; inset:0; } body.kqt-about .ab-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; } body.kqt-about .ab-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,27,45,.55) 0%, rgba(15,27,45,.35) 40%, rgba(15,27,45,.92) 100%); } body.kqt-about .ab-hero__in{ position:relative; z-index:2; width:100%; padding-block:70px; } /* SỬA 2026-09-10 (chuẩn hóa cỡ chữ toàn site): H1 hero vốn clamp(38,5vw,68px) — trần 68px LỚN HƠN CẢ Trang chủ (64px), trong khi About là trang nội dung phụ chứ không phải hero chính của site. Đổi về var(--fs-h1-page) = clamp(30,3.6vw,44px), đúng mốc đã được Quyết duyệt cho trang Dịch vụ lắp đặt (2026-09-09) — xem kqt-typography.css. */ body.kqt-about .ab-hero h1{ font-family:var(--serif); font-size:var(--fs-h1-page); line-height:1.1; color:var(--on-navy); font-weight:800; max-width:18ch; margin-top:20px; } body.kqt-about .ab-hero h1 .g{ color:var(--gold-light); font-style:italic; } body.kqt-about .ab-hero__lead{ font-size:var(--fs-lead); color:rgba(244,241,233,.82); max-width:56ch; line-height:1.7; margin-top:22px; } body.kqt-about .ab-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } /* ---------- section scaffold ---------- */ body.kqt-about .ab-sec{ padding:84px 0; } body.kqt-about .ab-sec--cream{ background:var(--cream); } body.kqt-about .ab-sec--navy{ background:var(--navy); color:var(--on-navy); } body.kqt-about .ab-sec--taupe{ background:var(--cream-2); } body.kqt-about .ab-head{ max-width:62ch; } body.kqt-about .ab-head--c{ margin:0 auto; text-align:center; } /* SỬA 2026-09-10 (chuẩn hóa cỡ chữ toàn site): H2 vốn clamp(28,3.4vw,44px) — trần 44px cao hơn hẳn Dịch vụ (34px), Sản phẩm (30px), Danh mục (22-28px). Đổi về var(--fs-h2) dùng chung mọi trang. .ab-head p (lead dưới H2) đổi từ 16.5px cố định sang var(--fs-lead) cho đồng bộ luôn. */ body.kqt-about .ab-head h2{ font-family:var(--serif); font-size:var(--fs-h2); line-height:1.18; color:var(--navy); margin-top:14px; } body.kqt-about .ab-sec--navy .ab-head h2{ color:var(--on-navy); } body.kqt-about .ab-head p{ font-size:var(--fs-lead); line-height:1.75; color:var(--ink-2); margin-top:18px; } body.kqt-about .ab-sec--navy .ab-head p{ color:rgba(244,241,233,.78); } /* ---------- B · PROBLEM / PROMISE ---------- */ body.kqt-about .ab-pp{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; } body.kqt-about .ab-pp__col{ border-radius:var(--radius-lg); padding:34px; } body.kqt-about .ab-pp__col--problem{ background:var(--cream-2); border:1px solid var(--taupe-15); } body.kqt-about .ab-pp__col--promise{ background:var(--navy); color:var(--on-navy); } body.kqt-about .ab-pp__tag{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); margin-bottom:20px; } body.kqt-about .ab-pp__col--promise .ab-pp__tag{ color:var(--gold-light); } body.kqt-about .ab-pp__item{ display:flex; gap:15px; padding:15px 0; border-top:1px solid var(--taupe-15); } body.kqt-about .ab-pp__col--promise .ab-pp__item{ border-top-color:rgba(244,241,233,.14); } body.kqt-about .ab-pp__item:first-of-type{ border-top:0; padding-top:0; } body.kqt-about .ab-pp__ic{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; } body.kqt-about .ab-pp__col--problem .ab-pp__ic{ background:var(--white); border:1px solid var(--taupe-20); color:var(--taupe); } body.kqt-about .ab-pp__col--promise .ab-pp__ic{ background:var(--gold-grad); color:#0F1B2D; } body.kqt-about .ab-pp__ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; } body.kqt-about .ab-pp__item b{ font-family:var(--sans); font-size:15.5px; display:block; margin-bottom:4px; } body.kqt-about .ab-pp__col--problem .ab-pp__item b{ color:var(--navy); } body.kqt-about .ab-pp__item p{ font-size:14px; line-height:1.6; } body.kqt-about .ab-pp__col--problem .ab-pp__item p{ color:var(--ink-3); } body.kqt-about .ab-pp__col--promise .ab-pp__item p{ color:rgba(244,241,233,.72); } /* ---------- C · BENEFITS ---------- */ body.kqt-about .ab-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:50px; } body.kqt-about .ab-benefit{ padding:30px 26px; border:1px solid var(--taupe-15); border-radius:var(--radius-lg); background:var(--white); transition:box-shadow .3s, transform .3s var(--ease); } body.kqt-about .ab-benefit:hover{ box-shadow:var(--shadow-2); transform:translateY(-4px); } body.kqt-about .ab-benefit__ic{ width:54px; height:54px; border-radius:50%; background:var(--cream); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold-dark); margin-bottom:20px; } body.kqt-about .ab-benefit__ic svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.6; } body.kqt-about .ab-benefit h3{ font-family:var(--serif); font-size:var(--fs-h3); color:var(--navy); margin-bottom:10px; } body.kqt-about .ab-benefit p{ font-size:14px; line-height:1.65; color:var(--ink-3); } /* ---------- D · STORY ---------- */ body.kqt-about .ab-story{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } /* SỬA 2026-09-09 (Đợt 3): bỏ kiểu chồng lệch (.ab-story__media > .ph + .ph2 absolute, 1 ảnh đè góc ảnh kia) — Quyết báo 2 lần "trình bày dạng này xấu quá, muốn show nhiều ảnh hơn". Đổi sang LƯỚI 2x2 ĐỀU NHAU (bento), 4 ảnh tách bạch không ảnh nào đè ảnh nào. Markup mới: .ab-story__grid (4 ô) > .ab-story__tile (mỗi ô 1 ảnh vuông, bo góc, cắt gọn theo khung). */ body.kqt-about .ab-story__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } body.kqt-about .ab-story__tile{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1; box-shadow:var(--shadow-2); } body.kqt-about .ab-story__tile img{ display:block; width:100%; height:100%; object-fit:cover; } body.kqt-about .ab-story__quote{ font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--navy); font-style:italic; border-left:3px solid var(--gold); padding-left:22px; margin-top:24px; } body.kqt-about .ab-story__sign{ margin-top:20px; font-size:14px; color:var(--ink-3); } body.kqt-about .ab-story__sign b{ color:var(--navy); font-family:var(--sans); } /* ---------- TEAM (đội ngũ chuyên gia) ---------- */ body.kqt-about .ab-team{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:50px; } body.kqt-about .ab-member{ text-align:left; } body.kqt-about .ab-member__ph{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--paper); margin-bottom:16px; } body.kqt-about .ab-member__ph .ph{ position:absolute; inset:0; } body.kqt-about .ab-member__ph .ph__img{ transition:transform .7s var(--ease); } body.kqt-about .ab-member:hover .ab-member__ph .ph__img{ transform:scale(1.05); } body.kqt-about .ab-member__ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,27,45,0) 60%, rgba(15,27,45,.4) 100%); } body.kqt-about .ab-member h3{ font-family:var(--serif); font-size:var(--fs-h3); color:var(--navy); } body.kqt-about .ab-member .role{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dark); margin-top:5px; } body.kqt-about .ab-member p{ font-size:13.5px; line-height:1.6; color:var(--ink-3); margin-top:10px; } /* ---------- E · VALUES ---------- */ body.kqt-about .ab-values{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:50px; } /* SỬA 2026-09-10: Quyết báo "section này trình bày xấu quá". Đo ra: 4 ô Giá trị vốn KHÔNG có khung thẻ nào cả — icon+chữ nổi trần trên nền navy, không nền/không viền/không hover — trong khi MỌI lưới icon+chữ khác trên trang (section C .ab-benefit, .ab-showroom) đều là THẺ thật (nền, viền, đổ bóng khi hover). Đây là chỗ duy nhất lệch ngôn ngữ thiết kế → thêm khung thẻ kính mờ (glass card) nhất quán với .ab-benefit, đồng thời viền icon đổi sang vàng gold đặc (giống .ab-benefit__ic) để nổi bật trên nền tối. */ body.kqt-about .ab-value{ padding:32px 26px; border-radius:var(--radius-lg); background:rgba(244,241,233,.04); border:1px solid rgba(244,241,233,.14); transition:box-shadow .3s, transform .3s var(--ease), border-color .3s, background .3s; } body.kqt-about .ab-value:hover{ box-shadow:var(--shadow-2); transform:translateY(-4px); border-color:var(--gold); background:rgba(244,241,233,.07); } body.kqt-about .ab-value__ic{ width:54px; height:54px; border-radius:12px; background:rgba(244,241,233,.06); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold); margin-bottom:20px; } body.kqt-about .ab-value__ic svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.6; } body.kqt-about .ab-value h3{ font-family:var(--serif); font-size:var(--fs-h3); color:var(--on-navy); margin-bottom:10px; } body.kqt-about .ab-value p{ font-size:14px; line-height:1.65; color:rgba(244,241,233,.7); } /* ---------- F · PROOF ---------- */ body.kqt-about .ab-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } /* SỬA 2026-09-10 (cùng đợt sửa "xấu quá" với section E): 4 số liệu độ dài rất lệch nhau ("2" so với "18.000+") trôi nổi tự do trên nền navy trông rời rạc. Thêm vạch dọc mảnh giữa các ô (không đụng markup PHP) để tách bạch thành 4 khối dữ liệu rõ ràng, cùng tông màu hairline đã dùng ở border-top phía trên khối này (rgba(244,241,233,.14)). */ body.kqt-about .ab-stat{ text-align:center; padding:14px; position:relative; } body.kqt-about .ab-stat:not(:last-child)::after{ content:""; position:absolute; right:calc(-12px - 1px); top:6px; bottom:6px; width:1px; background:rgba(244,241,233,.14); } body.kqt-about .ab-stat b{ font-family:var(--serif); font-size:clamp(40px,5vw,62px); font-weight:800; color:var(--gold-light); line-height:1; display:block; } body.kqt-about .ab-stat span{ display:block; margin-top:12px; font-size:14px; letter-spacing:.04em; color:rgba(244,241,233,.74); } body.kqt-about .ab-brands{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:54px; } body.kqt-about .ab-brand{ height:56px; min-width:130px; padding:0 24px; border:1px solid rgba(244,241,233,.16); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:.04em; color:rgba(244,241,233,.92); background:rgba(244,241,233,.03); } body.kqt-about .ab-proof-quote{ max-width:70ch; margin:54px auto 0; text-align:center; } body.kqt-about .ab-proof-quote .stars{ display:inline-flex; gap:3px; color:var(--gold); margin-bottom:18px; } body.kqt-about .ab-proof-quote .stars svg{ width:18px; height:18px; fill:currentColor; } body.kqt-about .ab-proof-quote p{ font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); line-height:1.5; color:var(--on-navy); font-style:italic; } body.kqt-about .ab-proof-quote .who{ margin-top:18px; font-size:14px; color:rgba(244,241,233,.7); } body.kqt-about .ab-proof-quote .who b{ color:var(--gold-light); } /* ---------- DEALER / CREDENTIALS ---------- */ /* ⚠️ SỬA 2026-09-09 — trước chỉ 4 thẻ CHỮ cứng (TOTO/INAX/KOHLER/GROHE) nên grid cố định repeat(4,1fr) vừa khít. Nay danh sách LẤY TỪ CATALOG THẬT (xem gt-dealers.php) nên có thể là 36 hãng — đổi sang auto-fill để tự xuống dòng theo bề rộng màn hình, không cần khai cứng số cột theo breakpoint nữa (đã bỏ 2 override responsive cũ cho .ab-dealers). */ body.kqt-about .ab-dealers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; margin-top:48px; } body.kqt-about .ab-dealer{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-decoration:none; border:1px solid var(--taupe-15); border-radius:var(--radius-lg); background:var(--white); padding:20px 16px; text-align:center; transition:box-shadow .3s, transform .3s var(--ease), border-color .3s; } body.kqt-about .ab-dealer:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); border-color:var(--gold); } /* Ô thẻ hãng nay là bọc LOGO THẬT (webp), link nội bộ về đúng danh mục sản phẩm của hãng đó — xem gt-dealers.php. .ab-dealer__name chỉ còn là fallback hiếm khi 1 hãng chưa có file logo. */ body.kqt-about .ab-dealer__logo{ display:block; width:100%; max-width:120px; height:40px; object-fit:contain; } body.kqt-about .ab-dealer__name{ font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:.02em; color:var(--navy); } body.kqt-about .ab-dealer__cert{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--gold-dark); } body.kqt-about .ab-dealer__cert svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; } body.kqt-about .ab-awards{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:46px; padding-top:40px; border-top:1px solid var(--taupe-10); } body.kqt-about .ab-award{ display:flex; align-items:center; gap:14px; padding:16px 22px; border:1px solid var(--taupe-15); border-radius:var(--radius-lg); background:var(--white); min-width:230px; } body.kqt-about .ab-award__seal{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--cream); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold-dark); } body.kqt-about .ab-award__seal svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; } body.kqt-about .ab-award b{ display:block; font-family:var(--sans); font-size:14px; color:var(--navy); } /* ⚠️ LỖI ICON — 2026-09-09, Quyết báo icon huy hiệu (Top Retailer/ISO 9001/Đối tác chiến lược) lệch góc trên-trái thay vì nằm giữa vòng tròn. Nguyên nhân: selector "body.kqt-about .ab-award span" bên dưới vốn định style cho mô tả (chữ nhỏ dưới tiêu đề) nhưng viết kiểu descendant chung nên VÔ TÌNH khớp luôn (khối bọc SVG, cũng là span con của .ab-award) — do có thêm token kiểu phần tử "span" nên specificity CAO HƠN rule .ab-award__seal (dòng 183), đè mất "display:grid; place-items:center" làm SVG rớt về góc trên-trái theo flow block mặc định. Xác minh bằng getComputedStyle() thật trên Claude-in-Chrome: seal có display:block dù rule .ab-award__seal khai grid — soát toàn bộ stylesheet mới lộ ra rule span phía dưới đè lên. Sửa: thu hẹp selector chỉ trúng đúng span mô tả (nằm trong
con, không phải span icon là con trực tiếp của .ab-award) — không đụng HTML. */ body.kqt-about .ab-award > div > span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; } /* ---------- G · SHOWROOMS ---------- Bản thiết kế gốc (about.html) có 3 thẻ (grid 3 cột) — Hải Phòng đã đóng cửa, dữ liệu thật của KQT chỉ còn 2 showroom (TP.HCM · Hà Tĩnh) theo PROMPT_CLAUDECODE_ABOUT.md. Đổi lưới sang 2 cột, giới hạn max-width để 2 thẻ không bị kéo quá rộng/mất cân đối trên màn hình lớn — CỐ Ý lệch bản gốc vì lý do dữ liệu, không phải lỗi. */ body.kqt-about .ab-showrooms{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:48px; max-width:900px; margin-inline:auto; } body.kqt-about .ab-showroom{ border:1px solid var(--taupe-15); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); transition:box-shadow .3s, transform .3s var(--ease); } body.kqt-about .ab-showroom:hover{ box-shadow:var(--shadow-2); transform:translateY(-4px); } body.kqt-about .ab-showroom__media{ position:relative; aspect-ratio:16/10; } body.kqt-about .ab-showroom__media .ph{ position:absolute; inset:0; } /* SỬA 2026-09-10: thiếu rule cho — ảnh thật KQT (#42706/#42707) có tỷ lệ khác ảnh Unsplash cũ (vốn crop sẵn qua URL param ?fit=crop), sẽ bị lệch/méo nếu không ép object-fit:cover khớp khung .ph (cùng bẫy đã gặp ở section D). */ body.kqt-about .ab-showroom__media .ph img{ display:block; width:100%; height:100%; object-fit:cover; } body.kqt-about .ab-showroom__media .city{ position:absolute; left:14px; bottom:14px; z-index:3; } body.kqt-about .ab-showroom__b{ padding:22px; } body.kqt-about .ab-showroom__b h3{ font-family:var(--serif); font-size:var(--fs-h3); color:var(--navy); } body.kqt-about .ab-showroom__addr{ display:flex; gap:9px; font-size:13.5px; color:var(--ink-3); line-height:1.5; margin:12px 0; } body.kqt-about .ab-showroom__addr svg{ width:16px; height:16px; stroke:var(--gold-dark); fill:none; stroke-width:1.7; flex:none; margin-top:2px; } body.kqt-about .ab-showroom__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--taupe-10); } body.kqt-about .ab-showroom__hours{ font-size:12.5px; color:var(--ink-3); } body.kqt-about .ab-showroom__dir{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gold-dark); } body.kqt-about .ab-showroom__dir svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; } /* ---------- I · CTA ---------- */ body.kqt-about .ab-cta{ position:relative; overflow:hidden; background:var(--navy); } body.kqt-about .ab-cta__bg{ position:absolute; inset:0; } body.kqt-about .ab-cta__bg img{ width:100%; height:100%; object-fit:cover; opacity:.22; } body.kqt-about .ab-cta__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,27,45,.95), rgba(15,27,45,.7)); } body.kqt-about .ab-cta__in{ position:relative; z-index:2; text-align:center; padding:88px 0; } /* SỬA 2026-09-10: H2 khối CTA cuối trang vốn tự khai riêng clamp(30,3.6vw,46px) — trần còn cao hơn cả .ab-head h2 (44px) — gộp chung var(--fs-h2). */ body.kqt-about .ab-cta h2{ font-family:var(--serif); font-size:var(--fs-h2); color:var(--on-navy); line-height:1.2; max-width:24ch; margin:14px auto 0; } body.kqt-about .ab-cta p{ font-size:17px; color:rgba(244,241,233,.8); margin-top:18px; } body.kqt-about .ab-cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px; } body.kqt-about .ab-cta__phone{ margin-top:24px; font-size:14px; color:rgba(244,241,233,.7); } body.kqt-about .ab-cta__phone b{ font-family:var(--serif); font-size:22px; color:var(--gold-light); } /* ---------- responsive ---------- */ @media (max-width:1000px){ body.kqt-about .ab-benefits{ grid-template-columns:repeat(2,1fr); } body.kqt-about .ab-values{ grid-template-columns:repeat(2,1fr); } body.kqt-about .ab-stats{ grid-template-columns:repeat(2,1fr); gap:32px 20px; } body.kqt-about .ab-story{ grid-template-columns:1fr; gap:40px; } body.kqt-about .ab-story__grid{ max-width:460px; } body.kqt-about .ab-team{ grid-template-columns:repeat(2,1fr); } } @media (max-width:760px){ body.kqt-about .ab-sec{ padding:60px 0; } body.kqt-about .ab-pp{ grid-template-columns:1fr; } body.kqt-about .ab-benefits{ grid-template-columns:1fr; } body.kqt-about .ab-values{ grid-template-columns:1fr; } body.kqt-about .ab-showrooms{ grid-template-columns:1fr; } body.kqt-about .ab-hero{ min-height:520px; } } @media (max-width:560px){ body.kqt-about .ab-team{ grid-template-columns:1fr 1fr; gap:14px; } body.kqt-about .ab-dealers{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; } body.kqt-about .ab-dealer{ padding:14px 10px; } body.kqt-about .ab-dealer__logo{ max-width:90px; height:32px; } }