/* =========================================================================
VOLTIC — CSS TRANG "VỀ VOLTIC"
(chỉ nạp đúng mẫu trang page-templates/about.php — xem inc/enqueue.php)
Mọi class prefix `about-` và bọc trong `.about-page` để KHÔNG đụng main.css
(main.css có sẵn .sh / .stats / .hero / .brand… nghĩa khác).
Nguồn chuẩn đã được anh duyệt: preview-vevoltic/index.html.
⚠️ ĐỪNG gộp margin/line-height vào rule `.about-page h1,h2` — nó mạnh hơn class
riêng và sẽ đè mất khoảng cách (bẫy #2 của trang So sánh).
====================================================================== */
.about-page{
--about-navy:#011F40; --about-navy2:#0A2A55;
--about-red:#D21F25; --about-blue:#1B4E8F;
--about-muted:#5A6672; --about-line:#E3E8EF; --about-band:#ECF2FB; --about-bg2:#F7F9FC;
--about-font-heading:'Plus Jakarta Sans',system-ui,sans-serif;
--about-radius:16px; --about-shadow:0 10px 30px rgba(11,31,53,.10);
}
.about-sec{padding:clamp(48px,6vw,84px) 0}
.about-page img{max-width:100%;height:auto;display:block} /* height:auto — bẫy #0 CLAUDE.md */
.about-eyebrow{font-family:var(--about-font-heading);font-weight:800;font-size:13px;letter-spacing:.12em;
text-transform:uppercase;color:var(--about-red)}
.about-h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;text-transform:uppercase;margin-top:14px}
.about-lead{color:var(--about-muted);font-size:15.5px}
.about-lead+.about-lead{margin-top:14px}
.about-center{text-align:center}
/* ---------- nút ---------- */
.about-page .about-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--about-font-heading);font-weight:800;
font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border-radius:10px;border:0;
cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.about-page .about-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.about-btn--red{background:var(--about-red);color:#fff;box-shadow:0 8px 22px rgba(210,31,37,.28)}
.about-btn--red:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(210,31,37,.36)}
.about-btn--white{background:#fff;color:var(--about-red)}
.about-btn--white:hover{transform:translateY(-2px)}
/* ---------- 1. HERO ---------- */
.about-hero{position:relative;color:#fff;background:#0B1F35 url(../img/about/hero.jpg) center/cover no-repeat;overflow:hidden}
.about-hero::before{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(6,18,34,.92) 0%,rgba(6,18,34,.78) 38%,rgba(6,18,34,.18) 68%,rgba(6,18,34,.05) 100%)}
.about-hero .wrap{position:relative;z-index:2;padding-block:clamp(56px,7vw,96px)}
.about-hero-tag{font-family:var(--about-font-heading);font-weight:700;font-size:clamp(15px,1.6vw,19px);letter-spacing:.18em;
text-transform:uppercase;opacity:.9}
.about-page .about-hero h1{font-size:clamp(40px,6.6vw,86px);font-weight:800;text-transform:uppercase;margin:14px 0 0;
letter-spacing:-.03em;color:#fff;line-height:1.08}
.about-hero p{margin:20px 0 0;max-width:520px;font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.86)}
.about-hero-pts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(34px,4.4vw,58px);max-width:940px}
.about-point{display:flex;gap:12px;align-items:flex-start}
.about-point-ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center}
.about-point-ic svg{width:21px;height:21px;stroke:#fff;fill:none}
.about-point b{display:block;font-family:var(--about-font-heading);font-size:13.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.about-point span{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.78);margin-top:3px}
/* 📱 Ảnh hero bản màn hẹp — mặc định ẨN, chỉ bật trong @media ≤768px bên dưới.
Ở desktop ảnh vẫn là background của .about-hero như cũ. */
/* ⚠️ PHẢI dùng 2 class: `.about-page img{display:block}` ở cuối file này là (0,1,1),
mạnh hơn `.about-hero-img` (0,1,0) nên nó ĐÈ MẤT display:none ⇒ ảnh hiện cả ở desktop,
nằm chình ình dưới hero. Đúng bẫy đã ghi cho `.fhot` ở footer: trong phạm vi có rule
thẻ-trần, class đơn luôn thua. */
.about-page .about-hero-img{display:none}
/* ---------- 2. CÂU CHUYỆN ---------- */
.about-story{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
.about-story .about-btn{margin-top:26px}
.about-grid-img{display:grid;grid-template-columns:1.62fr 1fr;gap:14px}
.about-grid-img>div:first-child{display:grid;grid-template-rows:auto 1fr}
.about-img-big{border-radius:var(--about-radius) var(--about-radius) 0 0;overflow:hidden;position:relative}
.about-img-big img{width:100%;aspect-ratio:16/10;object-fit:cover}
.about-quote{background:var(--about-navy);color:#fff;padding:26px 28px 24px;border-radius:0 0 var(--about-radius) var(--about-radius);
position:relative;margin:0}
.about-quote-mark{font-family:var(--about-font-heading);font-size:34px;font-weight:800;line-height:1;color:rgba(255,255,255,.55)}
.about-quote p{font-size:14.5px;line-height:1.7;margin:6px 0 0}
.about-quote cite{display:block;margin-top:12px;font-style:normal;font-size:13px;color:rgba(255,255,255,.72)}
.about-quote-mark--end{position:absolute;right:26px;bottom:16px}
.about-col-small{display:grid;grid-template-rows:repeat(3,1fr);gap:14px}
.about-col-small>div{border-radius:var(--about-radius);overflow:hidden;position:relative}
/* 🚫 ĐỪNG viết `height:100%` KÈM `aspect-ratio` trên cùng thẻ ![]()
: hai thứ này mâu
thuẫn (một cái bảo "cao bằng ô", cái kia bảo "cao bằng rộng/1.5"). Trình duyệt phải
chọn một — Chromium bỏ aspect-ratio nên ảnh lấp đầy ô, nhưng đó là hành vi ngầm,
không có gì bảo đảm mọi trình duyệt làm giống. Ô nào ảnh không lấp đầy là LỘ KHOẢNG
TRỐNG dưới đáy, ba ô lệch nhau ⇒ đúng hiện tượng "chưa đồng nhất" anh báo 05/08/2026.
Nay neo TUYỆT ĐỐI vào thẻ bọc (đã có position:relative) — ảnh luôn phủ kín ô, không
còn phụ thuộc cách trình duyệt hoà giải. */
.about-col-small img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ---------- 3. DẢI SỐ LIỆU ---------- */
.about-stats-out{padding-bottom:clamp(48px,6vw,84px)}
.about-stats{background:linear-gradient(180deg,var(--about-navy2),#071B38);border-radius:20px;color:#fff;
display:grid;grid-template-columns:repeat(4,1fr);padding:clamp(26px,3.2vw,40px) clamp(20px,2.6vw,34px)}
.about-stat{display:flex;gap:16px;align-items:flex-start;padding-inline:clamp(10px,1.6vw,22px)}
.about-stat+.about-stat{border-left:1px solid rgba(255,255,255,.16)}
.about-stat-ic{flex:0 0 auto;width:50px;height:50px;border-radius:50%;border:1.5px solid rgba(255,255,255,.42);display:grid;place-items:center}
.about-stat-ic svg{width:24px;height:24px;stroke:#fff;fill:none}
.about-stat b{display:block;font-family:var(--about-font-heading);font-size:clamp(24px,2.8vw,33px);font-weight:800;line-height:1.05}
.about-stat i{display:block;font-style:normal;font-family:var(--about-font-heading);font-size:13px;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;margin-top:6px}
.about-stat span{display:block;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72);margin-top:6px}
/* ---------- 4. GIÁ TRỊ CỐT LÕI ---------- */
.about-values{background:var(--about-bg2)}
.about-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:clamp(30px,3.6vw,46px)}
.about-card{background:#fff;border:1px solid var(--about-line);border-radius:var(--about-radius);overflow:hidden;
display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.about-card:hover{transform:translateY(-5px);box-shadow:var(--about-shadow)}
.about-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--about-band);position:relative}
.about-card-img img{width:100%;height:100%;object-fit:cover}
.about-card-bd{padding:0 20px 22px}
.about-card-ic{width:46px;height:46px;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(11,31,53,.12);
display:grid;place-items:center;margin-top:-23px;position:relative;z-index:2}
.about-card-ic svg{width:23px;height:23px;stroke:var(--about-blue);fill:none}
.about-page .about-card h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-top:16px}
.about-card p{color:var(--about-muted);font-size:13.5px;line-height:1.6;margin-top:8px}
/* ---------- 5. NGƯỜI BẠN TIN CẬY ---------- */
.about-friend{position:relative;border-radius:20px;overflow:hidden;color:#fff;
background:#0B1F35 url(../img/about/partners.jpg) center right/cover no-repeat;
min-height:clamp(240px,25vw,330px);display:flex;align-items:center}
.about-friend::before{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(5,18,38,.95) 0%,rgba(5,18,38,.82) 30%,rgba(5,18,38,.12) 60%,transparent 100%)}
.about-friend-tx{position:relative;z-index:2;padding:clamp(26px,3.4vw,46px);max-width:520px}
.about-page .about-friend h2{font-size:clamp(21px,2.7vw,33px);font-weight:800;text-transform:uppercase;margin-top:12px;color:#fff}
.about-friend p{margin:16px 0 0;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.85)}
/* ---------- 6. ĐỐI TÁC ---------- */
.about-partners{border:1px solid var(--about-line);border-radius:var(--about-radius);padding:clamp(24px,3vw,36px);
text-align:center;background:#fff;position:relative}
/* Tiêu đề khối — class RIÊNG, KHÔNG sửa .about-eyebrow (dùng chung 4 khối khác).
⚠️ letter-spacing phải giảm .12em → .05em: giãn chữ hợp cỡ 13px, giữ nguyên ở
cỡ 26px thì các từ rời rạc, đọc như biển hiệu. */
.about-page .about-partners-h{font-family:var(--about-font-heading);font-size:clamp(19px,2.3vw,27px);font-weight:800;
letter-spacing:.05em;text-transform:uppercase;color:var(--about-red);margin:0;line-height:1.3}
/* Mỗi logo là MỘT file riêng (trước là một ảnh gộp). Flex wrap canh giữa để
thêm/bớt hãng không phải sửa CSS — lưới cố định sẽ hụt ô khi số logo lẻ. */
.about-logos{list-style:none;margin:clamp(24px,3vw,34px) auto 0;padding:0;max-width:1100px;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,3.4vw,46px)}
.about-logo{margin:0}
/* Khoá CHIỀU CAO, width:auto — logo mỗi hãng một bề ngang khác nhau, khoá cả hai
là méo (bẫy #0). ⚠️ Trần 78px gắn với ảnh nguồn cao 157px (= 2.01× retina).
Muốn to hơn nữa thì phải dựng lại ảnh từ nguồn nét hơn, không chỉ sửa số này.
🚫 ĐỪNG đặt `max-width:none`: 7 logo của theme đều hẹp nên không thấy gì, nhưng
admin upload một logo khổ ngang (vd 1000×100) là nó rộng 780px ⇒ TRÀN NGANG ở
điện thoại. `max-width:100%` + `object-fit:contain` bóp lại mà không méo. */
.about-logo img{display:block;height:clamp(52px,6.1vw,78px);width:auto;max-width:100%;
object-fit:contain;opacity:.72;filter:grayscale(1);transition:opacity .25s ease,filter .25s ease}
.about-logo:hover img,.about-logo:focus-within img{opacity:1;filter:grayscale(0)}
/* Ô giữ chỗ để thêm hãng mới — CHỈ hiện khi đang bật Live Edit (template không
in ô này ở bản khách). Rộng 140px < ngưỡng 200px nên nút thu về hình tròn ＋. */
.about-logo--add{width:140px;height:clamp(52px,6.1vw,78px);display:grid;place-items:center;
border:1px dashed var(--about-line);border-radius:10px;background:var(--about-bg2)}
.about-logo--add i{display:block;width:100%;height:100%}
.about-logo--add.vt-changed{width:auto;border:0;background:none} /* vừa chọn ảnh xong thì bỏ khung */
/* ---------- 7. TRỞ THÀNH ĐẠI LÝ ---------- */
.about-dealer{position:relative;border-radius:20px;overflow:hidden;color:#fff;background:#04162E}
.about-dealer::before{content:"";position:absolute;inset:0;
background:url(../img/about/dealer-bg.jpg) center top/cover no-repeat;opacity:.55}
.about-dealer::after{content:"";position:absolute;inset:0;
background:linear-gradient(120deg,rgba(4,18,42,.96) 0%,rgba(4,18,42,.82) 46%,rgba(4,18,42,.72) 100%)}
.about-dealer-in{position:relative;z-index:2;padding:clamp(28px,3.6vw,48px)}
.about-dealer-tag{font-family:var(--about-font-heading);font-weight:800;font-size:13px;letter-spacing:.12em;
text-transform:uppercase;color:rgba(255,255,255,.9)}
.about-page .about-dealer h2{font-size:clamp(24px,3.3vw,40px);font-weight:800;text-transform:uppercase;margin-top:14px;color:#fff}
.about-rule{width:70px;height:3px;background:var(--about-red);margin-top:18px;border-radius:2px}
.about-dealer-lead{margin:16px 0 0;max-width:620px;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.84)}
.about-dealer-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:clamp(24px,3vw,34px);align-items:stretch}
.about-reasons{display:grid;grid-template-columns:150px repeat(5,1fr);background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.16);border-radius:var(--about-radius);overflow:hidden}
.about-reasons-num{background:linear-gradient(180deg,#E01F26,#9E0F16);padding:22px 16px;text-align:center;
display:flex;flex-direction:column;justify-content:center;gap:2px}
.about-reasons-num b{font-family:var(--about-font-heading);font-size:46px;font-weight:800;line-height:1}
.about-reasons-num span{font-family:var(--about-font-heading);font-size:13px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;line-height:1.4}
.about-reason{padding:20px 14px;text-align:center}
.about-reason+.about-reason{border-left:1px solid rgba(255,255,255,.14)}
.about-reason-ic{width:44px;height:44px;margin:0 auto;display:grid;place-items:center;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:12px}
.about-reason-ic svg{width:22px;height:22px;stroke:#BBD3F2;fill:none}
.about-reason b{display:block;font-family:var(--about-font-heading);font-size:12.5px;font-weight:800;text-transform:uppercase;
letter-spacing:.03em;line-height:1.45;margin-top:12px}
.about-reason em{display:block;width:26px;height:2px;background:var(--about-red);margin:9px auto}
.about-reason span{display:block;font-size:13px;line-height:1.55;color:rgba(255,255,255,.78)}
.about-signup{background:linear-gradient(180deg,#D8202A,#8E0D14);border-radius:var(--about-radius);padding:24px 22px;
text-align:center;display:flex;flex-direction:column;gap:14px;justify-content:center}
.about-page .about-signup h3{font-size:16px;font-weight:800;text-transform:uppercase;line-height:1.45;color:#fff}
.about-signup .about-btn{justify-content:center;width:100%}
/* ⚠️ .about-hot là thẻ : dùng bộ chọn 2 class kẻo rule `a{display:inline-block}`
ở nơi khác đè mất display:flex (đúng bẫy đã gặp với .fhot ở footer). */
.about-signup .about-hot{display:flex;align-items:center;gap:12px;justify-content:center;color:#fff;
border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25);padding:14px 0}
.about-signup .about-hot svg{width:32px;height:32px;stroke:#fff;fill:none;flex:0 0 auto}
.about-signup .about-hot small{display:block;font-size:12.5px;opacity:.95;text-align:left}
.about-signup .about-hot b{display:block;font-family:var(--about-font-heading);font-size:23px;font-weight:800;white-space:nowrap}
.about-signup p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.9);margin:0}
/* =========================================================================
RESPONSIVE — đo thật 16 khổ 320→1920px trên bản demo, không tràn ngang.
====================================================================== */
@media (max-width:1100px){
.about-cards{grid-template-columns:repeat(3,1fr)}
.about-dealer-grid{grid-template-columns:1fr}
.about-reasons{grid-template-columns:1fr}
.about-reasons-num{flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:16px}
.about-reasons-num b{font-size:34px}
.about-reason+.about-reason{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:980px){
.about-story{grid-template-columns:1fr}
.about-stats{grid-template-columns:repeat(2,1fr);gap:22px 0}
.about-stat:nth-child(2n+1){border-left:0}
.about-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);padding-top:22px}
.about-hero-pts{grid-template-columns:repeat(2,1fr);gap:22px}
.about-friend{background-position:center bottom;min-height:0}
.about-friend::before{background:linear-gradient(180deg,rgba(5,18,38,.95) 0%,rgba(5,18,38,.86) 55%,rgba(5,18,38,.55) 100%)}
.about-friend-tx{max-width:none}
}
/* ⚡ Ảnh nền hero bản NHỎ cho màn hẹp (thêm 08/08/2026).
Ảnh gốc 1600×892 / 136 KB là ảnh LCP, hiển thị ở MỌI khổ màn — điện thoại 375px tải
nguyên bản là thừa 4,3 lần. Bản 768px chỉ 42 KB (giảm 69%).
⚠️ Ngưỡng 768px phải KHỚP với thuộc tính `media` của thẻ preload trong inc/enqueue.php —
lệch nhau là trình duyệt tải CẢ HAI ảnh, tệ hơn lúc chưa tối ưu.
🚫 Đừng dùng `image-set()`: Safari cũ và một số trình duyệt Android bỏ qua, rơi về ảnh gốc. */
@media (max-width:768px){
/* 🖼️ TÁCH ẢNH XUỐNG DƯỚI (anh yêu cầu 14/08/2026 — "ở điện thoại bị mất hình").
Đo ở 375px: hero cao 700px mà rộng 360px ⇒ `cover` phóng ảnh tỉ lệ 1,79 lên rộng
~1253px, XÉN MẤT 71% bề ngang; lớp phủ gradient NGANG (92% đậm ở mép trái) thì vẫn
nằm nguyên đó nên phần còn thấy được cũng bị nhuộm tối ⇒ nhìn như không có ảnh.
Nay: nền chỉ còn màu navy đặc, ảnh thành thẻ ![]()
đầy đủ nằm dưới phần chữ.
⚠️ PHẢI dùng bộ chọn 2 class `.about-page .about-hero` (0,2,0): khi admin thay ảnh
riêng, template in `` ở CUỐI BODY
— cùng độ đặc hiệu (0,1,0) mà đứng sau nên nó THẮNG. Viết 1 class ở đây là ảnh nền
của admin vẫn hiện, chồng lên cả ![]()
mới ⇒ hỏng đúng trường hợp anh đã thay ảnh. */
.about-page .about-hero{background-image:none}
.about-page .about-hero::before{background:none}
/* Chữ thôi cần chừa chỗ cho ảnh bên phải ⇒ thu padding đáy, ảnh nằm sát ngay dưới. */
.about-hero .wrap{padding-bottom:clamp(26px,4vw,36px)}
.about-page .about-hero-img{display:block;width:100%;height:auto}
}
@media (max-width:760px){
.about-cards{grid-template-columns:repeat(2,1fr)}
.about-grid-img{grid-template-columns:1fr}
.about-col-small{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
/* ⚠️ BẮT BUỘC khi ảnh neo tuyệt đối: ở đây lưới xếp 3 ô NGANG nên hàng cao `auto`,
thẻ bọc không còn chiều cao nào để bám ⇒ thiếu dòng này là ô cao 0, ẢNH BIẾN MẤT. */
.about-col-small>div{aspect-ratio:3/2}
}
@media (max-width:560px){
.about-hero-pts{grid-template-columns:1fr}
.about-stats{grid-template-columns:1fr}
.about-stat:nth-child(n+2){border-top:1px solid rgba(255,255,255,.16);padding-top:20px;border-left:0}
.about-cards{grid-template-columns:1fr}
}