/* ============================================================
about.css — trang "Về Hữu Tín" (ve-huu-tin.html)
NHỊP LAYOUT ĐO TỪ REF manubens.es/en/business/ (2026-08-03):
trang là một chuỗi LUÂN PHIÊN chỉ gồm hai loại khối —
(A) khối chữ HẸP, CANH GIỮA, đệm dọc rất rộng (ref: 96px section
+ 60px trong, đo ra ~150px giữa hai khối chữ liền nhau);
(B) khối ẢNH TRÀN VIỀN, cao thật (ref: 508 / 1035 / 495px), hoặc
lưới ảnh sát nhau (ref: 4×2 và 2×2 tràn hết bề ngang).
Không thẻ, không viền, không nút nằm giữa dòng đọc — mọi nhấn mạnh
dồn vào cỡ ảnh và khoảng thở. Bản trước của trang này nhét tất cả
vào .container nên đọc ra như một trang tài liệu, không phải trang
giới thiệu nhà máy.
GIỮ BẢN SẮC NHÀ (không bê nguyên ref): ref nhấn nửa câu bằng cách đổi
nét chữ; site này đã CHỐT tiêu đề MỘT màu MỘT nét (xem .h-hl trong
common.css — span đó nay tàng hình, chỉ còn để đánh dấu vế nhấn trong
markup) nên ở đây tiêu đề cũng IN HOA một nét, không hai tông.
Khe lưới 3px như .m-markets__grid, token màu/chữ/motion từ common.css.
============================================================ */
/* ---- (A) Khối chữ hẹp canh giữa ------------------------------------ */
/* Đệm dọc theo ref (~150px giữa hai khối chữ) chứ không phải nhịp 84px
của bản cũ: chính khoảng thở này làm trang đọc ra "rộng" như ref. */
.m-story{padding-block:clamp(56px,8.5vw,128px);background:var(--bg);}
.m-story--tint{background:var(--gray-100);}
.m-story--cream{background:var(--cream);}
/* Khách 2026-08-05: "giảm spacing giữa các khoảng text" ở khối đầu trang.
Khoảng hở h1 → đoạn văn ĐO ĐƯỢC là 73px tại 1440 (page-hero padding-bottom 36
+ padding-top 37.4 ở đây). Siết cả hai đầu còn ~40px. Nửa kia của phép cộng
nằm ở .page-hero trong common.css — sửa một mình chỗ này chỉ đi được nửa
đường. */
.m-story--intro{padding-top:clamp(12px,1.4vw,20px);} /* nối liền page-hero */
/* Anchor (#lich-su/#cong-nghe/#chat-luong): chừa chỗ cho header sticky khi
nhảy tới từ trang khác (link cross-page đi bằng cơ chế trình duyệt,
không qua Lenis offset -80 của effects.js). */
.m-story[id]{scroll-margin-top:90px;}
/* 780px ≈ 70 ký tự ở cỡ chữ 17px — đúng khuôn hẹp của ref (họ 630-880px).
Rộng hơn nữa là dòng dài quá, mất chất "khối chữ đứng giữa khoảng trắng". */
/* +18% (khách 2026-09-07: "tăng width những cụm text khoảng 15-20%") */
.m-story__narrow{max-width:920px;margin-inline:auto;text-align:center;}
.m-story__narrow h2{
/* To hơn bậc h2 trang chủ một nấc: trên trang con, heading là mỏ neo duy
nhất giữa các dải ảnh lớn nên phải đủ sức giữ khoảng trắng quanh nó. */
font-size:var(--fs-h2);
line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
color:var(--heading);margin-bottom:clamp(16px,1.8vw,26px);
}
.m-story__narrow p{
font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--gray-700);
margin:0 0 clamp(14px,1.6vw,22px);
}
.m-story__narrow p:last-child{margin-bottom:0;}
/* Chỉ khối DẪN NHẬP siết chặt hơn (22px → 16px). CỐ Ý không hạ thẳng
.m-story__narrow p ở trên: rule đó chi phối MỌI khối chữ của trang, mà khách
chỉ nói về khoảng hở ở đầu trang. Hai đoạn dẫn nhập lại là cặp câu liền mạch
về cùng một chuyện nên đứng gần nhau là đúng; các đoạn còn lại đứng một mình
giữa hai dải ảnh, cần giữ nguyên khoảng thở. */
.m-story--intro .m-story__narrow p{margin-bottom:clamp(10px,1.1vw,16px);}
/* .m-story__lead KHÔNG còn kiểu dáng riêng (khách chốt 2026-08-04): hai đoạn
nằm sát nhau trong cùng một khối chữ canh giữa, để lệch cỡ thì đọc ra như
lỗi chứ không ra "đoạn dẫn". Trước đây đoạn này to hơn một nấc (--fs-lead).
Đã cân nhắc giữ lại màu đậm hơn làm dấu hiệu — nhưng ĐO RA LÀ VÔ NGHĨA:
--ink và --gray-700 luôn được đặt CÙNG một giá trị (xem :root common.css),
nên rule color đó không đổi một pixel nào. Xoá hẳn thay vì để lại CSS chết.
Class vẫn còn trong ve-huu-tin.html: nó là móc cho i18n/data-reveal, và giữ
sẵn chỗ nếu sau này khách muốn phân biệt đoạn dẫn thật. */
/* ---- (B) Ảnh tràn viền -------------------------------------------- */
/* Bộ .fb / .fb--* / .fb__caption ĐÃ DỜI SANG common.css (2026-08-05).
Lý do: trang Liên hệ cũng cần đúng vốn từ này, mà nó chỉ nạp common.css +
contact-page.css. Cùng lý do đã đưa .page-hero và .cta-band lên common.css.
Phần responsive của chúng cũng dời theo — đừng khai lại ở đây. */
/* ---- DÒNG THỜI GIAN (khách chốt 2026-08-19; chỉnh lần 2 cùng ngày) --------
Cấu trúc dọc của MỘT mốc, từ trên xuống:
khung tròn chứa logo --tl-mark
khe --tl-gap
ĐƯỜNG KẺ + chấm ← chấm canh đúng tâm kẻ
khe --tl-gap
năm
Cả ba con số trên là biến, nên muốn nới/siết chỉ sửa một chỗ; vị trí đường
kẻ và chấm đều TÍNH RA từ chúng chứ không gõ tay.
ĐƯỜNG KẺ CHẠY HẾT MÀN HÌNH: nó là ::before của .m-story__tlwrap — tầng
full-width bọc ngoài .container. KHÔNG dùng width:100vw: 100vw tính CẢ thanh
cuộn dọc nên trang bị kéo ngang vài px trên Windows/Chrome. Tầng bọc vốn đã
rộng đúng bằng màn nên left:0/right:0 là đủ và không có tác dụng phụ.
Đường kẻ neo theo TOP (không phải bottom như bản trước): nay phía trên kẻ có
khung tròn cao cố định, nên mốc tính ổn định nhất là từ đỉnh khối xuống. */
.m-story__tlwrap{
/* Đệm TRÊN của dải mốc, khai ở tầng này vì ĐƯỜNG KẺ (::before của chính tầng
này) phải cộng đúng con số đó vào toạ độ của nó. Hai chỗ dùng chung một
biến thì không thể lệch. */
/* Đệm TRÊN của dải mốc. PHẢI CO THEO --tl-mark: mốc đang chọn phóng to 1.5
lần với gốc ở đáy, tức đỉnh vòng nhô lên thêm 0.5 × chiều cao mốc. Số cứng
34px chỉ đủ cho điện thoại; ở tablet mốc cao 65-86px nên đỉnh bị hộp cuộn
cắt mất (khách báo 2026-09-08, cả tablet dọc lẫn ngang).
0.55 = 0.5 (phần nhô) + 0.05 dư cho bóng đổ; +8px cho cú translateY(-3px)
và viền. */
--tl-padtop:calc(var(--tl-mark) * .55 + 8px);
/* Chỗ cho popup dùng chung bung xuống dưới hàng năm. Popup nằm ở TẦNG NÀY
(absolute) chứ không trong dải cuộn, nên chỗ của nó phải chừa ở đây.
SIẾT LẠI 2026-09-07: 124px để dư 52px trống dưới đáy popup hai dòng. Số
vừa đủ = khe --tl-popgap (26) + popup hai dòng (66) − đệm dưới của chính
dải (26) = 66px; lấy 84px cho dư một chút phòng popup ba dòng. */
padding-bottom:clamp(70px,6.6vw,84px);
/* TO HƠN (khách chốt 2026-08-19): trần 92 → 116px, hệ số 6.2 → 7.6vw.
SÀN GIỮ 44px: ở 390px một cột chỉ rộng 50px, nâng sàn là vòng tròn tràn
khỏi cột và các mốc dính vào nhau. Trần 116 < 169 (bề rộng cột @1440). */
/* TO hơn nữa (khách 2026-08-19, lượt 5): trần 116 → 128px. Sàn vẫn 44px vì
ở 390px một cột chỉ rộng 50px. */
--tl-mark:clamp(44px,8.4vw,128px); /* đường kính khung tròn */
--tl-gap:clamp(14px,1.5vw,22px); /* khe tròn↔kẻ và kẻ↔năm */
--tl-dot:13px;
--tl-line:var(--gray-200);
/* Path chép từ project-icon.svg của trang mẫu. fill ở đây vô nghĩa (mask chỉ
đọc hình), giữ đen cho rõ ý. Sửa đường cong thì sửa đúng chuỗi này. */
--tl-tab-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='13' viewBox='0 0 62 13'%3E%3Cpath d='M62 13L0 13C0 13 11.0018 12.8453 17.2432 8.34218C23.4846 3.83904 23.2747 0.636813 30.997 0C38.7193 0.636816 38.5094 3.84814 44.7508 8.34219C50.9922 12.8362 62 13 62 13Z' fill='%23000'/%3E%3C/svg%3E");
position:relative;
margin-top:clamp(36px,4.4vw,68px);
}
/* THƯA hơn: dải mốc lấy trọn nhịp rộng của header (--maxw-wide + --pad-wide),
thay vì nhịp .container 1280. Ở khổ 1440 khuôn nới 1184 → 1282px, tức mỗi
cột rộng thêm 14px.
⚠️ ĐÂY LÀ GIỚI HẠN THẬT: 7 mốc trên một hàng thì "to hơn" và "thưa hơn" kéo
ngược nhau — nới khuôn chỉ mua thêm được 98px chia cho 7 cột. Muốn thưa rõ
rệt thì phải BỚT MỐC, hoặc cho dải rộng hơn màn rồi cuộn ngang (xem ghi chú
cuối assets/js/timeline.js). */
.m-story__tlwrap > .container{max-width:var(--maxw-wide);padding-inline:var(--pad-wide);}
/* Nền section này là --gray-100 (#EFF0F1) chứ không phải trắng, nên CÙNG một
token kẻ lại mờ hơn hẳn: --gray-200 cho 1.31:1 trên trắng nhưng chỉ 1.15:1 ở
đây. Đè bằng #D2D4D6 để đạt lại đúng 1.30:1 — mục tiêu là kẻ TRÔNG BẰNG mọi
đường kẻ khác của site, không phải bằng MÃ MÀU với chúng. */
.m-story--tint .m-story__tlwrap{--tl-line:#D2D4D6;}
/* ĐỆM DƯỚI RIÊNG cho section dòng thời gian (khách 2026-09-07: "từ cuối cụm
màu vàng đến hết section quá rộng"). Nhịp .m-story chung là ~122px, nhưng
section này đã có sẵn quãng chừa popup ở .m-story__tlwrap ngay phía trên —
cộng cả hai thành một khoảng trống dài gấp đôi mọi section khác.
Chỉ đè ĐÚNG section này, không đụng nhịp chung. */
#lich-su{padding-bottom:clamp(28px,3vw,44px);}
.m-story__tlwrap::before{
content:"";position:absolute;left:0;right:0;
/* ⚠️ PHẢI CỘNG --tl-padtop. Đường kẻ neo vào WRAP, còn hàng mốc thì nằm
trong dải cuộn và bị đệm trên của dải đẩy xuống — thiếu số hạng này là
chấm rơi hẳn xuống dưới kẻ (khách báo 2026-09-08 "chấm tròn không nằm trên
line", xuất hiện đúng lúc thêm đệm trên cho mốc phóng to). */
/* --tl-line-y do about-count.js đo THẲNG từ tâm chấm rồi ghi vào (xem
datDuongKe). calc bên dưới chỉ là giá trị dự phòng cho lúc JS chưa chạy —
đừng tin nó là con số đúng, nó không biết gì về transform của hiệu ứng
hiện ra hay về đệm trên của dải. */
top:var(--tl-line-y, calc(var(--tl-padtop) + var(--tl-mark) + var(--tl-gap)));
height:1px;background:var(--tl-line);
}
/* Số cột = SỐ MỐC. Thêm/bớt mốc thì sửa đúng con số này (grid không tự đếm
con được). 7 mốc ở khuôn 1184px cho cột ~169px — vừa cho khung tròn 92px;
ở 390px cột còn 50px nên khung tròn tự co xuống 44px theo clamp. */
/* RAIL CUỘN NGANG thay cho lưới 7 cột cố định (khách 2026-09-07 thêm 5 mốc DEMO
→ 12 mốc; lưới cố định thì mỗi ô còn ~95px, vòng tròn 128px tràn ra ngoài).
Bề rộng ô giữ đúng nhịp cũ (ô của lưới 7 cột ở khổ 1440 ≈ 180px) nên hàng mốc
nhìn y như trước, chỉ khác là kéo được sang ngang.
scroll-snap để mỗi lần bấm mũi tên dừng đúng một mốc; scrollbar ẩn vì đã có
cặp nút điều hướng ngay dưới. */
.m-story__timeline{
display:flex;gap:0;
padding:0;margin:0;list-style:none;
overflow-x:auto;scroll-snap-type:x proximity;
scrollbar-width:none;-ms-overflow-style:none;
/* CHỪA CHỖ CHO POPUP: overflow-x:auto biến trục Y thành `auto` theo spec, nên
.tl__pop (bung xuống dưới năm) bị cắt cụt và còn sinh thanh cuộn dọc. Đệm
dưới đủ cao thì popup nằm trọn trong hộp cuộn.
SIẾT LẠI 2026-09-07 (khách: "dư khoảng trắng ở dưới quá nhiều"): 132px là
số đo hồi popup còn ở CẢ 12 mốc; nay chỉ 4 mốc thật còn popup nên đệm chỉ
cần vừa đúng một popup. Cụm mũi tên đã tách khỏi dòng chảy (position:
absolute) từ cùng đợt nên KHÔNG còn phải bù margin âm ở .m-story__tlnav —
ghi chú cũ về việc "đổi hai số cùng nhau" đã hết hiệu lực. */
/* Đệm dưới nay chỉ đủ cho cái bướu .tl__tab. Popup ĐÃ RA NGOÀI dải (xem
.m-story__pop) nên không còn phải chừa chỗ cho nó ở đây nữa. */
/* Đệm TRÊN 26px: mốc tự chọn phóng to 1.3 lần với gốc ở đáy, tức đỉnh vòng
tròn nhô lên thêm ~0.3 × chiều cao mark. overflow-x:auto biến trục Y thành
`auto` theo spec nên phần nhô ra đó bị cắt nếu không chừa chỗ (khách báo
2026-09-08 "ở giữa đang bị cắt hình"). */
padding-block:var(--tl-padtop) 26px;
/* (mask mờ hai mép ĐÃ GỠ 2026-09-07: nó liếm mất phần mô tả của mốc ngoài
rìa — popup bung ra tới đâu cũng bị làm mờ tới đó. Mốc rìa nay hiện đủ
nét; mũi tên hai bên đã đủ nói rằng dải còn kéo được.) */
}
.m-story__timeline::-webkit-scrollbar{display:none;}
/* ĐÚNG 7 MỐC mỗi khung nhìn (khách 2026-09-07: "1 cho hiển thị 7 mốc thôi,
khoảng cách thưa ra"): chia đều bề ngang khung cho 7 thay vì khoá theo px —
mốc tự giãn ra khi khung rộng, và số mốc thấy được không đổi theo khổ màn.
Dưới 900px chuyển về 3 mốc (xem media query cuối file). */
.m-story__timeline .tl{flex:0 0 calc(100% / 7);scroll-snap-align:center;}
/* TABLET: 5 mốc mỗi khung thay vì 7 (khách chốt 2026-09-08). Ở 768px, 7 mốc
cho mỗi cột ~105px — vòng tròn co xuống 65px và mốc ở giữa phóng to lên thì
chạm hai mốc bên cạnh. 5 mốc cho cột ~150px, đủ chỗ thở.
Dưới 640 rơi tiếp về 3 mốc (media query cuối file). */
@media (max-width:1024px){
.m-story__timeline .tl{flex:0 0 calc(100% / 5);}
}
/* Cặp mũi tên — cùng khuôn .m-news__nav button của trang chủ. about-count.js
gỡ [hidden] khi dải thật sự dài hơn khung nhìn. */
/* HAI BÊN TRÁI/PHẢI, KHÔNG CÒN Ở GIỮA DƯỚI (khách chốt 2026-09-07). Cụm nút
tách khỏi dòng chảy và neo vào .m-story__tlwrap — tầng full-width cũng là
tầng vẽ đường kẻ ngang, nên dùng ĐÚNG một công thức top với ::before của nó
thì mũi tên luôn nằm chính giữa đường kẻ dù --tl-mark co giãn theo khổ màn.
⚠️ Sửa `top` ở đây thì sửa luôn `top` của .m-story__tlwrap::before.
pointer-events:none trên hộp bao để dải mốc phía dưới vẫn kéo/chạm được ở
khoảng trống giữa hai nút; riêng hai nút bật lại. */
.m-story__tlnav{
position:absolute;z-index:3;
left:0;right:0;
top:calc(var(--tl-mark) + var(--tl-gap));
transform:translateY(-50%);
display:flex;justify-content:space-between;align-items:center;
padding-inline:clamp(12px,2.4vw,40px);
pointer-events:none;
}
.m-story__tlnav button{
width:var(--btn-icon);height:var(--btn-icon);border-radius:var(--radius);box-sizing:border-box;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--border-strong);background:transparent;color:var(--gold-deep);
transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.m-story__tlnav button{pointer-events:auto;}
/* NỀN ĐẶC chứ không `transparent`: nút nay nằm ĐÈ lên đường kẻ ngang, để trong
suốt thì kẻ chạy xuyên qua giữa mũi tên. Lấy theo nền section (hai biến thể
dưới đây) chứ không ghim mã màu. Phải đứng SAU rule .m-story__tlnav button ở
trên — rule đó khai background:transparent. */
.m-story__tlnav button{background:var(--bg);}
.m-story--tint .m-story__tlnav button{background:var(--gray-100);}
.m-story__tlnav button:hover{background:var(--gold);border-color:var(--gold);color:var(--btn-ink);}
.m-story__tlnav .icon{width:var(--icon-nav);height:var(--icon-nav);}
/* z-index:1 để khung tròn và chấm nằm TRÊN đường kẻ full-width. */
.m-story__timeline .tl{
position:relative;z-index:1;text-align:center;min-width:0;
outline:none; /* vòng focus riêng ở dưới, không dùng outline mặc định */
}
/* ---- khung tròn chứa logo (ở TRÊN kẻ) ---- */
.m-story__timeline .tl__mark{
display:flex;align-items:center;justify-content:center;
width:var(--tl-mark);height:var(--tl-mark);margin:0 auto;
border-radius:50%;background:var(--bg);
border:1px solid var(--tl-line);
/* Bóng nhẹ ngay ở trạng thái NGHỈ: nền section là xám tint, vòng tròn trắng
không viền bóng thì gần như phẳng dính vào nền. */
box-shadow:0 4px 14px -10px rgba(0,0,0,.5);
transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
/* Logo bên trong: contain trong 56% đường kính. Bốn file có tỉ lệ khác nhau
hẳn (99×170 tới 266×170) nên PHẢI giới hạn CẢ hai chiều — chỉ khoá chiều cao
thì bản 2025 rộng gấp 2,7 lần bản 2008 và tràn khỏi vòng tròn. */
.m-story__timeline .tl__mark img{
max-width:56%;max-height:56%;width:auto;height:auto;object-fit:contain;
}
/* Mốc dùng ẢNH CHỤP thay logo: ảnh LẤP ĐẦY vòng tròn. Logo là hình có nét mảnh
trên nền trong suốt nên phải chừa lề (56%); ảnh chụp mà chừa lề thì thành một
con tem vuông nằm giữa vòng tròn, đọc ra là lỗi. */
.m-story__timeline .tl__mark--img{overflow:hidden;background:var(--gray-100);}
.m-story__timeline .tl__mark--img img{
max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;
}
/* ---- chấm, canh ĐÚNG tâm đường kẻ ---- */
.m-story__timeline .tl::after{
content:"";position:absolute;left:50%;
top:calc(var(--tl-mark) + var(--tl-gap));
width:var(--tl-dot);height:var(--tl-dot);
/* Lề âm nửa đường kính ở CẢ HAI trục = tâm chấm rơi đúng lên đường kẻ.
Dùng margin chứ không translate(-50%,-50%): khối mang data-reveal-group nên
effects.js ghi transform lên chính các này — xem ghi chú data-aos
trong common.css. */
margin:calc(var(--tl-dot) / -2) 0 0 calc(var(--tl-dot) / -2);
border-radius:50%;background:var(--gold);
transition:transform .3s var(--ease);
}
.m-story__timeline .tl:hover::after,
.m-story__timeline .tl.is-auto::after,
.m-story__timeline .tl:focus-visible::after{transform:scale(1.35);}
/* .is-auto = mốc TỰ ĐƯỢC CHỌN ở máy cảm ứng / khổ hẹp, do about-count.js gắn
cho mốc gần giữa dải nhất. Nó mượn nguyên trạng thái hover để người dùng
thấy ngay là dải này có nội dung và kéo qua lại được (khách chốt 2026-09-08:
"luôn hover 1 cái ở giữa… để user biết mà scroll"). */
.m-story__timeline .tl:hover .tl__mark,
.m-story__timeline .tl.is-auto .tl__mark,
.m-story__timeline .tl:focus-visible .tl__mark{
border-color:var(--gold);box-shadow:0 10px 24px -10px rgba(0,0,0,.45);
transform:translateY(-3px);
}
/* Mốc TỰ CHỌN được phóng to hẳn (khách 2026-09-08: "cho hình của năm được
select to rõ ra"). Chỉ .is-auto — không áp cho :hover, vì trên desktop chuột
lướt qua mà ô phình 1.18 lần thì cả hàng nhún nhảy theo con trỏ.
transform-origin đặt ở ĐÁY: ô phóng lên trên, chân vẫn dính đúng đường kẻ. */
.m-story__timeline .tl.is-auto .tl__mark{
transform:translateY(-3px) scale(1.5);
transform-origin:50% 100%;
z-index:2;
}
.m-story__timeline .tl.is-auto .tl__year{color:var(--heading);font-weight:var(--fw-bold);}
/* ---- năm (ở DƯỚI kẻ) ---- */
.m-story__timeline .tl__year{
display:block;
/* gap×2: một nửa cho khe tròn↔kẻ, một nửa cho kẻ↔năm. Không tách làm hai
margin trên hai phần tử anh em — margin liền kề sẽ GỘP lại còn một. */
margin-top:calc(var(--tl-gap) * 2);
/* Năm lên một bậc thang chữ (--fs-lead → --fs-h4) cùng đợt phóng to vòng
tròn: vòng 128px mà năm vẫn cỡ chữ dẫn thì nhãn đọc ra như chú thích nhỏ
dưới một khối lớn, không phải một mốc. */
/* Bold — cùng khuôn .era__year của dải logo trang chủ (khách 2026-09-07). */
font-family:var(--font-body);font-size:var(--fs-h4);
font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--ink);
font-variant-numeric:lining-nums tabular-nums; /* lining: SVN-Georgia mặc định số kiểu cũ (2026-09-22) */
}
/* ---- popup vàng nằm ngang -------------------------------------------------
HÌNH DẠNG BÁM ĐÚNG REF: hộp bo góc + một BƯỚU nhô lên ở giữa, nối vào chấm,
và hai bên bướu là GÓC LÕM chứ không phải góc gãy.
Ba mảnh, không phải một:
.tl__tab bướu — hộp con bo hai góc trên
.tl__tab::before fillet TRÁI — góc lõm
.tl__tab::after fillet PHẢI — góc lõm
Góc lõm làm bằng radial-gradient: một ô vuông cạnh R, khoét đi đúng một phần
tư đĩa bán kính R ở góc PHÍA NGOÀI. Phần vàng còn lại ôm vào chân bướu, nối
liền mạch với mép trên của hộp. Không có cách nào làm góc lõm bằng
border-radius — border-radius chỉ bo LỒI.
VÌ SAO BƯỚU LÀ CON CỦA CHỨ KHÔNG PHẢI CỦA POPUP: ở khổ hẹp, popup của
mốc đầu/cuối phải neo mép trái/phải để khỏi tràn màn (xem media query dưới).
Nếu bướu nằm trong popup, nó trôi theo popup và trỏ chệch khỏi chấm. Neo vào
thì nó luôn nằm đúng trục chấm dù popup lệch đi đâu.
Cái giá: vị trí dọc của bướu phải TỰ TÍNH lại đúng bằng mép trên popup —
cả hai cùng đọc --tl-popgap nên không thể lệch. */
/* --tl-popgap PHẢI đủ lớn để BƯỚU không chen vào chữ năm: bướu cao
--tl-tab-h và mọc ngược lên từ mép trên popup, nên khe thật giữa năm và
đỉnh bướu = --tl-popgap − --tl-tab-h. Ở 18px thì còn đúng 2px, chữ năm và
bướu gần như chạm nhau. 26px cho khe thật 10px. */
/* ⚠️ KHAI TRÊN .m-story__tlwrap, KHÔNG phải .m-story__timeline. Từ 2026-09-07
popup là con của TẦNG WRAP chứ không còn nằm trong dải cuộn, nên nếu bộ token
này vẫn ở .m-story__timeline thì popup không thừa kế được: `border-radius:
var(--tl-r)` thành giá trị rỗng và popup MẤT BO GÓC (khách báo ngay). Khai ở
tầng cha thì cả dải lẫn popup cùng đọc được. */
.m-story__tlwrap{
--tl-popgap:clamp(20px,2.1vw,26px);
/* ĐẦU POPUP — ĐO TỪ CHÍNH TRANG MẪU khách chỉ (bmbsteel.com.vn/vi/ve-chung-toi,
2026-08-19). Ở đó nó KHÔNG dựng bằng CSS mà là một file SVG 62×13
(themes/bmb/assets/images/project-icon.svg) đặt làm background của dải
::after ngay trên hộp mô tả.
Vì sao ba bản CSS trước không giống: bướu của họ là MỘT ĐƯỜNG CONG LIÊN TỤC
— không có cạnh đứng, không có đỉnh phẳng. Ghép hộp-bo-góc + hai góc lõm thì
luôn lộ ra hai đoạn thẳng ở sườn và một đỉnh phẳng ở giữa, nên nhìn "mềm"
và không dứt khoát. Nay dùng thẳng đường cong đó.
Bán kính hộp cũng lấy theo họ: 8px (bản trước 14px — bo quá tròn). */
--tl-tab-w:62px;
--tl-tab-h:13px;
--tl-r:8px;
}
/* Nguồn chữ: mỗi mốc vẫn giữ một có data-i18n để i18n.js dịch như cũ,
nhưng nó KHÔNG hiện. about-count.js chép textContent của nó sang popup dùng
chung. Nhờ vậy đổi VI/EN không cần một dòng JS nào thêm. */
.m-story__timeline .tl__popsrc{display:none;}
/* POPUP DÙNG CHUNG — con của .m-story__tlwrap, KHÔNG phải của dải cuộn.
Vì sao phải ra ngoài: dải có overflow-x:auto nên mọi thứ rộng hơn ô mốc đều
bị cắt ở hai mép. Bản trước chữa bằng padding-inline 72px trên chính dải,
nhưng đệm đó lại phơi ra một phần mốc thứ 8 ở hai đầu — khách chốt hàng chỉ
được thấy ĐÚNG 7 mốc. Ra ngoài thì hết cả hai vấn đề cùng lúc.
`top` do JS đặt (đáy hàng năm), `left` do JS đặt (tâm mốc đang rê chuột). */
.m-story__pop{
position:absolute;z-index:4;pointer-events:none;
width:max-content;max-width:min(380px,80vw);
padding:13px 18px 13px 32px;
border-radius:var(--tl-r);
background:var(--gold);color:var(--btn-ink); /* chữ ĐEN trên vàng — 8.67:1 */
font-size:var(--fs-sm);line-height:var(--lh-tight);text-align:left;
box-shadow:0 6px 16px -10px rgba(0,0,0,.22);
opacity:0;transform:translate(-50%,-6px);
transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.m-story__pop.is-on{opacity:1;transform:translate(-50%,0);}
/* BƯỚU LÀ MỘT PHẦN CỦA CHÍNH POPUP (đổi 2026-09-08, sau ba lượt khách báo
"phần màu vàng bị rời làm 2").
Trước đây bướu là .tl__tab — con của , còn popup là phần tử riêng ở tầng
wrap; hai thứ ở hai hệ toạ độ nên mối nối phụ thuộc vào một phép tính, và
phép tính nào cũng có đường sai: đọc --tl-popgap thì gặp clamp(), đo bằng
rect thì dính transform của hiệu ứng hiện ra.
Nay bướu mọc từ mép trên popup bằng ::after, nên khoảng cách giữa chúng
LUÔN BẰNG 0 — không còn con số nào để sai. Vị trí ngang do JS ghi vào
--pop-nub-x (tâm mốc, tính so với mép trái popup), nhờ vậy bướu vẫn chỉ
đúng mốc kể cả khi popup bị kẹp lại ở mép màn. */
.m-story__pop::after{
content:"";position:absolute;bottom:100%;
left:var(--pop-nub-x,50%);transform:translateX(-50%);
width:var(--tl-tab-w);height:var(--tl-tab-h);
background:var(--gold);
-webkit-mask:var(--tl-tab-svg) center/100% 100% no-repeat;
mask:var(--tl-tab-svg) center/100% 100% no-repeat;
}
/* Dấu chấm đầu dòng như ảnh mẫu. */
.m-story__pop::before{
content:"";position:absolute;left:15px;top:calc(50% - 2.5px);
width:5px;height:5px;border-radius:50%;background:var(--btn-ink);
}
/* ---- bướu: một đường cong liền, vẽ bằng SVG ------------------------------
Đường cong CHÉP ĐÚNG path của trang mẫu (62×13). Dùng MASK chứ không dùng
background-image có màu sẵn: mask thì màu lấy từ background-color, tức vẫn
là var(--gold) — đổi token màu là bướu đổi theo. Nhúng SVG có fill cứng thì
mã màu bị chôn trong data-URI và sẽ lệch khỏi bảng màu lúc nào không hay.
Cùng kỹ thuật với .icon trong common.css (mask + currentColor).
background-size:100% 100% (không phải 62px 13px): ở 390px một cột chỉ rộng
50px nên bướu co lại theo cột thay vì thò ra hai bên — xem --tl-tab-w dưới. */
/* ⚠️ .tl__tab GIỮ TRONG DOM nhưng KHÔNG VẼ RA NỮA: JS vẫn đọc offsetTop/
offsetHeight của nó để biết khe --tl-popgap là bao nhiêu (token dùng clamp,
không parse được từ JS). visibility:hidden chứ không display:none — display
none thì nó mất luôn kích thước và JS hết chỗ để đo.
Phần bướu NHÌN THẤY nay do .m-story__pop::after vẽ. */
.m-story__timeline .tl__tab{
visibility:hidden !important;
position:absolute;left:50%;z-index:4;
/* mép trên popup = 100% + --tl-popgap; bướu cao --tl-tab-h nên lùi lên bấy nhiêu */
top:calc(100% + var(--tl-popgap) - var(--tl-tab-h));
margin-left:calc(min(var(--tl-tab-w),100%) / -2);
width:min(var(--tl-tab-w),100%);height:var(--tl-tab-h);
background-color:var(--gold);
-webkit-mask:var(--tl-tab-svg) center/100% 100% no-repeat;
mask:var(--tl-tab-svg) center/100% 100% no-repeat;
opacity:0;visibility:hidden;
transform:translateY(-6px);
transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
/* Hiện bằng hover HOẶC focus: chỉ :hover thì máy cảm ứng và người dùng bàn phím
không đọc được nội dung (li có tabindex="0" trong HTML).
visibility đi kèm opacity — thiếu nó thì popup tàng hình vẫn chặn chuột và
vẫn được screen reader đọc như đang hiện. */
/* CHỈ hover/focus (khách chốt 2026-08-19: bỏ auto slider — assets/js/timeline.js
đã xoá cùng lượt, đừng đi tìm). Không còn trạng thái .is-active nào. */
/* (Popup hiện/ẩn nay do about-count.js gắn/gỡ .is-on trên .m-story__pop — nó
không còn là con của nên không có selector CSS nào bắt được hover.) */
.m-story__timeline .tl:hover .tl__tab,
.m-story__timeline .tl.is-auto .tl__tab,
.m-story__timeline .tl:focus-within .tl__tab{
opacity:1;visibility:visible;transform:translateY(0);
}
/* BƯỚU KHÔNG ĐƯỢC RỘNG HƠN MỘT CỘT: --tl-tab-w là min(74px,100%) — 100% ở đây
là bề ngang , tức đúng một cột. Ở 390px cột chỉ còn 50px; để bướu 74px
thì nó thò ra hai bên cột, và ở mốc CUỐI phần thò cùng fillet đẩy trang ra
quá mép phải 6px (đo được scrollWidth 396 / màn 390). Trang cuộn ngang vì một
cái bướu là lỗi rất khó truy. */
/* ---- KHỔ HẸP: popup TRẢI HẾT HÀNG, không canh giữa từng ô -----------------
Ở 390px mỗi cột chỉ còn ~50px trong khi popup rộng tới 80vw. Canh giữa một
hộp 300px trên một cột 50px thì:
· popup của các mốc giữa thò hẳn ra ngoài màn → TRANG BỊ CUỘN NGANG (kể cả
lúc popup đang ẩn: visibility:hidden VẪN tính vào vùng cuộn);
· nếu chữa bằng cách neo mép trái/phải cho hai mốc đầu-cuối thì BƯỚU (neo
theo , luôn nằm trên chấm) rơi ra NGOÀI hộp popup — bướu lơ lửng.
Cách chữa đúng cho cả hai: popup rộng bằng CẢ HÀNG và trượt sang trái đúng
số cột đứng trước nó. Mọi cột rộng bằng nhau nên 100% (của ) chính là
một cột — do đó left = -100% × (số thứ tự − 1) là CHÍNH XÁC, không phải ước
lượng. Bướu luôn nằm trong hộp vì hộp phủ trọn hàng.
⚠️ Bảy dòng nth-child dưới đây BÁM SỐ MỐC. Thêm/bớt mốc thì sửa cả
grid-template-columns, width ở đây, và danh sách này. */
@media (max-width:900px){
/* Popup dùng chung nay neo vào tầng full-width nên KHÔNG còn bị bó trong một
cột — bảy dòng nth-child kê tay của bản cũ đã gỡ. JS chỉ cần kẹp toạ độ
`left` cho popup nằm trọn trong màn. */
/* Mốc đầu/cuối: bướu nằm sát mép hàng nên fillet PHÍA NGOÀI không còn mép
popup nào để nối vào — để lại thì nó thành một mảng vàng lơ lửng ngoài
hộp. Bo góc sẵn có của popup lo phần chuyển tiếp ở đúng hai góc đó. */
.m-story__timeline .tl:first-child .tl__tab::before,
.m-story__timeline .tl:last-child .tl__tab::after{display:none;}
}
}
@media (prefers-reduced-motion:reduce){
.m-story__pop{transition:opacity .25s var(--ease);transform:translate(-50%,0);}
.m-story__timeline .tl__tab{transition:opacity .25s var(--ease),visibility .25s;transform:none;}
.m-story__timeline .tl:hover::after,
.m-story__timeline .tl:focus-visible::after{transform:none;}
}
/* ---- Quy trình 6 bước --------------------------------------------- */
.m-story__steps{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(34px,4vw,60px) clamp(28px,3.4vw,56px);
margin:clamp(36px,4.4vw,68px) auto 0;padding:0;
list-style:none;text-align:left;
max-width:1120px;
}
/* Số thứ tự to, xám nhạt + gạch ngang trên đầu: bộ sáu cần cấu trúc thị
giác vì nằm giữa hai dải ảnh lớn, chỉ mỗi con số nhạt là trôi mất.
Cỡ chữ là NGOẠI LỆ CÓ CHỦ Ý của thang --fs-* (common.css): đây là CHỮ SỐ
đóng vai đồ hoạ nền, không phải tiêu đề — cột mốc của nó là chiều cao ô
trong lưới 6 bước, không phải thứ bậc tiêu đề. --fs-display thì quá to cho
vai này, --fs-h2 lại kéo nó lên ngang tiêu đề section.
TỪNG LÀ `li::before` + counter(step). Đã đổi sang phần tử THẬT 2026-08-05 vì
hiệu ứng ghim+scrub phải tween riêng con số và riêng đường kẻ — GSAP không
chạm được vào pseudo-element. Số gõ thẳng trong HTML, kèm aria-hidden: nó là
đồ hoạ thứ tự, trình đọc màn hình đã có để biết thứ tự rồi. */
.m-story__step-num{
display:block;font-family:var(--font-display);font-weight:var(--fw-bold);
/* VÀNG (khách chốt 2026-08-19). Đây là màu NGHỈ, tức cũng là màu khi JS
không chạy hoặc người dùng bật giảm chuyển động — bản trước để --gray-200
nên hai đường đó cho ra sáu con số gần như tàng hình.
Lúc có scrub thì .js-steps-scrub hạ nó về xám nhạt rồi effects.js tween
ngược lên vàng — xem mục 13 trong effects.js. */
font-size:clamp(30px,2.9vw,46px);line-height:1;color:var(--gold);
margin-bottom:12px;
/* KHÔNG padding-top ở đây: bản cũ có, vì hồi đó border-top nằm trên chính hộp
này nên padding đẩy CON SỐ xuống khỏi đường kẻ. Giờ đường kẻ là ::before
nằm trong hộp, padding-top sẽ đẩy ĐƯỜNG KẺ xuống và mở một khe trống phía
trên nó. Khoảng hở kẻ→số nay do margin-bottom của ::before lo.
CỐ Ý KHÔNG có transition:color. Màu do GSAP scrub ghi lại mỗi khung hình;
thêm transition thì trình duyệt lại làm mượt CHỒNG lên từng khung GSAP vừa
ghi — đúng kiểu xung đột mà Lenis phải tắt scroll-behavior để tránh (mục 1
effects.js). Kết quả là con số trễ pha so với cú cuộn. */
}
/* Gạch ngang tách khỏi border-top để VẼ ĐƯỢC từ trái sang: scaleX cần một hộp
riêng, border không co giãn theo chiều dài.
Đi qua BIẾN --rule chứ không phải giá trị cứng: GSAP không chạm được vào
pseudo-element, nên nó tween biến trên phần tử cha còn ::before đọc vào. */
.m-story__step-num::before{
content:"";display:block;height:1px;background:var(--gray-200);
margin-bottom:clamp(12px,1.4vw,20px);
transform:scaleX(var(--rule,1));transform-origin:left;
}
/* Trạng thái BẮT ĐẦU của hiệu ứng chỉ tồn tại khi JS thật sự tiếp quản
(effects.js mục 13 gắn class này). Viết thẳng vào CSS thì lúc GSAP vắng mặt
— CDN hỏng, hoặc prefers-reduced-motion — sáu bước sẽ nằm im ở trạng thái mờ
với gạch dài 0, tức là hiệu ứng hỏng biến thành nội dung hỏng. */
/* Điểm XUẤT PHÁT của cú scrub: gạch dài 0 và số còn xám nhạt. Chỉ áp khi JS
thật sự dựng được hiệu ứng (class do effects.js gắn) — nếu viết thẳng vào
rule gốc thì mọi đường hỏng đều để lại sáu con số mờ. */
.js-steps-scrub .m-story__step-num{--rule:0;color:var(--gray-200);}
.m-story__steps h3{
font-size:var(--fs-h4);
color:var(--heading);margin:0 0 8px;letter-spacing:var(--ls-heading);
}
.m-story__steps p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--gray-700);margin:0;}
/* ---- Gạch đầu dòng dịch vụ ---------------------------------------- */
/* BỐN Ô CÓ ICON (khách chốt 2026-09-07, thay danh sách gạch đầu dòng): nền kem,
icon trên, chữ dưới, tất cả canh giữa. Dấu ✓ vẽ bằng border ở bản trước đã
bỏ — icon thay đúng vai đó. */
/* PHÁ KHUNG HẸP: 4 ô chạy hết bề ngang container chứ không bó trong 920px của
.m-story__narrow (khách 2026-09-07: "width của cụm 4 mục quá ngắn, cho rộng
ra tới lề luôn"). margin âm bằng đúng nửa phần dôi ra giữa container và khối
hẹp — cách duy nhất để một khối con tràn ra ngoài cha mà không phải đổi
markup. --maxw-wide/--pad-wide là nhịp lề dùng chung với header và footer. */
.m-story__ticks{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
/* KHE 3px — cùng con số với .fb--trio, .m-markets__grid, .pband__frame và
.m-plist__grid (đo từ ref manubens.es). Khách chốt 2026-09-07: "khoảng cách
4 card nhỏ như những chỗ hình". Đổi thì đổi cả bộ cho khỏi lệch nhịp. */
gap:3px;
margin:clamp(24px,3vw,40px) auto 0;padding:0;list-style:none;
/* ⚠️ PHẢI TRỪ LỀ: --maxw-wide là bề rộng NGOÀI của .header .container, mà
container đó còn padding-inline:--pad-wide. Bản trước lấy thẳng --maxw-wide
nên bốn ô rộng hơn khung header đúng 2×--pad-wide và thò ra ngoài lề
(khách báo 2026-09-07). Nay khớp đúng hộp NỘI DUNG của header. */
width:min(var(--maxw-wide) - var(--pad-wide) * 2, 100vw - var(--pad-wide) * 2);
max-width:none;
margin-inline:calc((100% - min(var(--maxw-wide) - var(--pad-wide) * 2, 100vw - var(--pad-wide) * 2)) / 2);
}
.m-story__ticks li{
display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.4vw,18px);
padding:clamp(20px,2.4vw,30px) clamp(10px,1.1vw,14px);
/* NỀN TRẮNG chứ không --gray-100: từ 2026-09-07 chính section này đã là nền
kem, ô cùng màu thì biến mất. Hai bên phải luôn khác nhau. */
background:var(--bg);border-radius:var(--radius);
text-align:center;
/* +4px SO VỚI --fs-sm và nét đậm (khách chốt 2026-09-07). Viết bằng calc chứ
không ghim px để ô vẫn co theo thang chữ chung khi --fs-sm đổi. */
/* +4px → +2px và bỏ nét đậm (khách chỉnh dần trong ngày 2026-09-07). */
font-size:calc(var(--fs-sm) + 2px);line-height:var(--lh-body);color:var(--ink);
}
/* 36px × 1.25 = 45px (khách 2026-09-07: "icon to hơn khoảng 25%"). */
.m-story__ticks .icon{width:45px;height:45px;color:var(--ink);}
/* ⚠️ SELECTOR PHẢI GIỮ NGUYÊN ĐỘ ĐẶC HIỆU NÀY (0-2-1). Bản trước viết
`.m-story__cta{margin-top:…}` (0-1-0) và rule đó CHƯA BAO GIỜ chạy: rule
`.m-story__narrow p` ở trên là 0-1-1 — cao hơn — và nó dùng shorthand
`margin:0 0 …`, tức là khai luôn margin-top:0. Nút báo giá vì thế dính sát
danh sách gạch đầu dòng suốt từ đầu (khách báo 2026-08-05).
Thêm `p` vào selector là thứ duy nhất giữ rule này sống. Đừng "dọn cho gọn"
thành .m-story__cta. */
.m-story__narrow p.m-story__cta{margin-top:clamp(28px,3.4vw,46px);}
/* ---- Khối chất lượng / ISO ---------------------------------------- */
/* DẢI CHỨNG NHẬN — mỗi slide là MỘT KHỐI HAI CỘT đầy đủ (ảnh + tên dưới ảnh |
tiêu đề + mô tả), nên trượt là đổi trọn nội dung (khách 2026-09-07). Cùng cơ
chế rail với dải mốc lịch sử; JS trong about-count.js cuộn theo clientWidth.
.m-story__quality nay chỉ còn là hộp chứa, KHÔNG còn là lưới hai cột — lưới
chuyển xuống từng slide. */
/* LƯỚI HAI CỘT Ở TẦNG NGOÀI, chỉ để đặt cụm mũi tên vào ĐÚNG cột chữ (khách
2026-09-07, ảnh đính kèm: mũi tên nằm dưới đoạn văn, canh trái theo mép chữ,
không còn ở giữa dưới ảnh). Dải trượt vẫn chiếm trọn hai cột nên cách trượt
không đổi; cụm nút nằm CÙNG HÀNG với dải và tự dán xuống đáy hàng.
⚠️ grid-template-columns và column-gap phải TRÙNG với .m-story__certslide —
đó là thứ duy nhất giữ mũi tên thẳng hàng với mép trái đoạn văn. */
.m-story__quality{
display:grid;max-width:1120px;
grid-template-columns:.42fr .58fr;
column-gap:clamp(28px,4vw,72px);
}
.m-story__certrail{
grid-area:1 / 1 / 2 / -1;
/* ⚠️ TUYỆT ĐỐI KHÔNG dùng clip-path ở đây để chặn tờ sau ló ra. Đã thử và
hỏng: chính phần tử này mang data-reveal="wipe", mà hiệu ứng wipe chạy
BẰNG clip-path — khai thêm một clip-path nữa là đè lên trạng thái động của
nó, dải kẹt ở inset(0 100% 0 0) và biến mất hoàn toàn.
Cách đang dùng nằm ở cặp margin-left/padding-left dưới đây. */
/* CHỐNG TỜ SAU LÓ RA (khách báo hai lượt 2026-09-08 — "tưởng là line dọc").
Bề rộng dải là số THỰC (vd 729.61px) trong khi mỗi tờ rộng đúng 100%, nên
tờ kế bắt đầu NGAY TẠI mép cắt và phần lẻ pixel của nó lọt ra ngoài.
Cặp số dưới đây đẩy NỘI DUNG mỗi tờ vào trong 3px rồi kéo cả dải ra ngoài
đúng 3px: tờ đang xem nằm y chỗ cũ, còn nội dung tờ kế bị đẩy sang phải
3px — tức hẳn ra ngoài vùng thấy. Hai số PHẢI BẰNG NHAU. */
margin-left:-3px;
display:flex;gap:0;
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
}
.m-story__certrail::-webkit-scrollbar{display:none;}
/* MỖI MÀN ĐÚNG MỘT TỜ, không dính mẩu tờ kế (khách 2026-09-08).
· scroll-snap-align:start chứ không center: với slide rộng đúng 100% khung,
"center" và "start" trùng nhau về lý thuyết, nhưng bề rộng khung là số
thực nên điểm đỗ tính theo tâm bị lệch nửa pixel và mép tờ sau ló ra.
· min-width:0 để nội dung dài không thổi slide rộng hơn 100%.
· overflow:hidden chặn nốt mọi thứ thò khỏi phạm vi slide. */
.m-story__certslide{
flex:0 0 100%;min-width:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;
/* 3px — bằng ĐÚNG margin-left âm của .m-story__certrail, xem chú thích ở đó. */
padding-left:3px;box-sizing:border-box;
display:grid;grid-template-columns:.42fr .58fr;gap:clamp(28px,4vw,72px);
/* CANH TRÊN chứ không center: khách chốt 2026-09-07 theo ảnh — tiêu đề khối
chữ phải bắt đầu ngang mép trên tờ chứng nhận. */
align-items:start;
}
.m-story__cert{margin:0;}
.m-story__certname{
margin-top:clamp(12px,1.4vw,18px);text-align:center;
font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-bold);
line-height:var(--lh-tight);color:var(--ink);
}
.m-story__certnav{
grid-area:1 / 2 / 2 / 3;align-self:end;justify-self:start;z-index:2;
display:flex;gap:12px;margin:0;
}
.m-story__certnav button{
width:var(--btn-icon);height:var(--btn-icon);border-radius:var(--radius);box-sizing:border-box;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--border-strong);background:transparent;color:var(--gold-deep);
transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.m-story__certnav button:hover{background:var(--gold);border-color:var(--gold);color:var(--btn-ink);}
.m-story__certnav .icon{width:var(--icon-nav);height:var(--icon-nav);}
/* KHÔNG VIỀN (khách 2026-09-08: "bỏ cái line dọc bên góc phải").
Vạch đó không thuộc khối bên phải mà là VIỀN TRÁI của tấm chứng nhận ở SLIDE
KẾ TIẾP: mỗi slide rộng đúng 100% dải nên tấm sau bắt đầu ngay tại mép cắt
của hộp cuộn (đo được: mép phải dải 1232, viền trái ảnh slide 2 cũng 1232).
Bề rộng dải là số thực, nên phần lẻ của pixel đó lọt ra ngoài mép cắt và hiện
thành một vạch xám chạy dọc suốt chiều cao.
Bỏ viền là dứt điểm; tấm scan vốn đã có nền và dải màu riêng, không cần viền
để tách khỏi nền trắng. */
.m-story__cert img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);}
.m-story__quality-txt h2{
font-size:var(--fs-h2);
line-height:var(--lh-heading);color:var(--heading);margin-bottom:clamp(12px,1.4vw,20px);
}
.m-story__quality-txt p{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--gray-700);margin:0 0 18px;}
/* .m-story__iso: ảnh huy hiệu nhỏ ĐÃ GỠ khỏi markup 2026-09-07 (khách yêu cầu). */
/* ---- Responsive ---------------------------------------------------- */
@media (max-width:640px){
.m-story__steps{grid-template-columns:repeat(2,1fr);}
.m-story__quality{grid-template-columns:1fr;max-width:640px;}
/* Một cột thì không còn "cột chữ" để neo mũi tên vào — trả cụm nút về dòng
chảy, nằm giữa dưới dải như cũ. Không reset thì grid-area:1/2 tự đẻ ra một
cột ngầm bên phải và cả khối lệch hẳn sang trái. */
.m-story__certrail{grid-area:auto;}
.m-story__certnav{grid-area:auto;justify-self:center;margin-top:clamp(20px,2.4vw,32px);}
}
@media (max-width:640px){
/* .m-story__steps GIỮ 2 CỘT (khách chốt 2026-09-08: "xếp layout 2x3").
Sáu bước xếp một cột thì section dài gấp đôi và người đọc mất cảm giác
"đây là một quy trình sáu bước". Rule 1 cột cũ đã gỡ. */
.m-story__ticks{grid-template-columns:repeat(2,minmax(0,1fr));}
/* Dưới 900px: 7 mốc thành quá chật, về 3 mốc mỗi khung. */
.m-story__timeline .tl{flex:0 0 calc(100% / 3);}
.m-story__certslide{grid-template-columns:1fr;}
/* Dòng thời gian GIỮ NGUYÊN 4 cột ở mọi khổ: ở 390px mỗi cột vẫn còn ~87px
trong khi chuỗi "2002" chỉ chiếm ~40px. Xuống 2 cột thì đường kẻ gãy làm
hai đoạn và không còn đọc ra là một dòng thời gian.
(Rule cũ .m-story__eras{2×2} đã gỡ cùng bộ logo era.) */
}
/* ===== Số liệu chạy đầu trang (spec §4) =====
DESKTOP MỘT HÀNG 6 Ô, điện thoại 3×2 (khách chốt 2026-08-19, lần chỉnh thứ
hai trong ngày; trước đó là 3×2 ở mọi khổ). Cấu trúc mỗi ô giữ nguyên:
số → ĐƯỜNG KẺ → mô tả, canh trái.
Chỉ có MỘT mốc gãy: 6 cột ⇄ 3 cột. Không cần nấc 2 cột — 6 và 3 đều chia hết
nên hàng luôn đầy, thêm nấc 2 chỉ đẻ ra một khổ có hàng cuối lẻ ô.
CỠ SỐ HẠ TỪ --fs-display (78px) XUỐNG --fs-h1 (46px). Không phải quyết định
thẩm mỹ mà là RÀNG BUỘC HÌNH HỌC: 6 ô trên khuôn 1184px cho mỗi ô ~174px, mà
"1.000+" ở 78px chiếm ~245px — tràn đè ô bên. Ở 46px nó còn ~145px, vừa khuôn.
(Yêu cầu "cho số to lên" hồi 2026-08-05 là cho bố cục 3 ô/hàng; bố cục 6 ô
không cùng lúc chứa được cả hai.)
Số cỡ lớn dùng chữ số bảng (tabular-nums) nên bề rộng CHỈ phụ thuộc SỐ CHỮ SỐ:
ô dài nhất luôn là "1.000+" (6 ký tự). Thêm số 7 ký tự thì đo lại chỗ này. */
/* Bề ngang khối = ĐÚNG bề ngang header (khách chốt 2026-08-19): cùng cặp
--maxw-wide + --pad-wide mà .header .container dùng. Nhờ vậy số đầu tiên
thẳng cột với logo trên header, số cuối thẳng với cụm nút bên phải — đây là
nhịp rộng mà footer, tin tức và liên hệ cũng đang theo.
Hai dòng này PHẢI đi cùng nhau: đổi max-width mà quên padding là mép lệch
header đúng bằng chênh lệch padding, rất khó nhận ra bằng mắt. */
.m-story__statsbar{max-width:var(--maxw-wide);padding-inline:var(--pad-wide);}
.m-story__stats{
display:grid;grid-template-columns:repeat(6,1fr);
/* Khe NỚI (khách chốt 2026-08-19): cột 28 → 48px, hàng 34 → 44px. Chỗ để nới
đến từ chính việc khối rộng ra bằng header (+98px ở khổ 1440). */
gap:clamp(28px,3vw,44px) clamp(20px,3vw,48px);
margin:clamp(24px,2.6vw,38px) auto 0;list-style:none;padding:0;
}
.m-story__stats > li{min-width:0;text-align:left;}
.m-story__stat-num{
display:block;font-family:var(--font-display);
/* NGOẠI LỆ CÓ CHỦ Ý của thang chữ (cái thứ 6 — xem danh sách trong
common.css). Cỡ ở đây bị RÀNG BUỘC BỞI SỐ CỘT chứ không phải bởi thang:
6 ô phải nằm vừa một hàng, mà ô dài nhất là "1.000+" — 6 ký tự chữ số
bảng, đo được ≈ 3.14 × cỡ chữ.
ĐO BẰNG Range.getBoundingClientRect() trên chính chuỗi chữ, KHÔNG đo bề
rộng thẻ: .stat-num là block nên thẻ luôn rộng bằng ô, đo thẻ thì không bao
giờ thấy tràn (bản đầu suýt lọt vì đo nhầm chỗ này).
"1.000+" đo được ≈ 3.32 × cỡ chữ. Khoảng thở còn lại ở ba khổ mốc:
1101px (mốc cuối 6 cột) ô 136 · chữ 122 → 14px
1440px ô 180 · chữ 160 → 20px
≥1600px (khuôn kịch trần) ô 200 · chữ 179 → 21px
CẢ HAI VẾ đều bị chặn: hệ số vw bởi khổ 1101, và trần 54px bởi khổ ≥1600
(ở đó khuôn ngừng rộng ra vì --maxw-wide, nên trần 58px sẽ chỉ còn 7px thở).
Không token nào phủ được dải này: --fs-h1 (46px) thì khách chê nhỏ, còn
--fs-display (clamp 40-78) cho 49px ở khổ 1000 → tràn ô ngay.
⚠️ Đổi số cột, đổi khe, hay thêm một con số 7 ký tự thì tính lại vế vw. */
font-size:clamp(26px,3.35vw,54px);font-weight:var(--fw-bold);
line-height:1.1;letter-spacing:-.02em;
/* VÀNG — KHÁCH CHỐT SAU KHI ĐÃ ĐƯỢC BÁO SỐ ĐO, ĐỪNG "SỬA LẠI CHO ĐÚNG CHUẨN".
Bản trước để xám nhạt --gray-400 vì đo được #D3AF37 trên trắng chỉ 2.11:1,
dưới sàn 3:1 của CHỮ CỠ LỚN. Khách nghe rồi vẫn chọn vàng (2026-08-19:
"đổi lại thành số màu vàng"). Đây là quyết định có thông tin của khách, ghi
lại đây để phiên sau không tự đổi về xám rồi tưởng mình đang sửa lỗi.
Giảm thiểu thiệt hại: CHÚ THÍCH bên dưới giữ --gray-500 (5.27:1) nên nội
dung thật sự của mỗi ô vẫn đọc được thoải mái; con số đóng vai đồ hoạ dẫn
mắt.
CHỐT LẠI 2026-09-07: khách đưa hai ảnh và yêu cầu "chỉnh ở trang giới thiệu
về giống style ở home". Con dấu trang chủ (.seal__num) là SỐ MỰC ĐEN nét
700 + dấu "+" nhỏ dạng số mũ MÀU VÀNG. Nay khối này theo đúng khuôn đó, nên
phần vàng chỉ còn nằm ở dấu "+". Tình cờ cũng gỡ luôn vấn đề tương phản nêu
ở trên: --ink trên nền trắng đạt 10.4:1. Hai khối phải đổi CÙNG NHAU —
.seal__num/.seal__plus (home.css) và .m-story__stat-num/-plus (đây). */
color:var(--ink);
/* Số đang đếm đổi bề rộng từng khung → cả hàng rung. tabular-nums khoá mọi
chữ số về cùng một bề ngang nên con số đứng yên tại chỗ khi chạy. */
font-variant-numeric:lining-nums tabular-nums; /* lining: SVN-Georgia mặc định số kiểu cũ (2026-09-22) */
}
/* KẺ VÀNG NGẮN giữa số và chú thích (khách 2026-09-07: "như kiểu line ở section
3 cột dưới banner trang home") — cùng khuôn .market-card p::before: dày 3px,
ngắn hơn hẳn bề ngang ô, vàng.
::after thay cho border-bottom cũ: border chạy hết bề ngang ô (số là block),
không cắt ngắn được. Bản trước còn bị hỏng cú pháp nên trình duyệt bỏ qua —
đó là lý do khách không thấy kẻ nào. */
.m-story__stat-num::after{
/* 36 → 72px (khách 2026-09-07: "gạch quá ngắn cho dài lên x2"). */
content:"";display:block;width:72px;height:3px;background:var(--gold);
margin-top:clamp(10px,1.1vw,16px);
}
/* Dấu "+" — BẢN SAO của .seal__plus (home.css), xem ghi chú đầy đủ ở đó:
position/top thay cho vertical-align:super để không nong hộp dòng ra và đẩy
đường kẻ + chú thích xuống; letter-spacing trả về 0 vì -.02em của con số tính
theo cỡ chữ LỚN, ở cỡ nhỏ này thành khe hở quá rộng. */
.m-story__stat-plus{
font-size:.5em;position:relative;top:-.52em;
vertical-align:baseline;letter-spacing:0;color:var(--gold);
}
/* Khe trên và dưới đường kẻ BẰNG NHAU: phía trên do margin-top của
.m-story__stat-num::after lo, phía dưới là dòng này — hai bên phải dùng CÙNG
một clamp, lệch một bên là kẻ đọc ra như thuộc về một trong hai khối chứ
không phải ngăn cách hai khối. */
.m-story__stat-cap{
display:block;margin-top:clamp(10px,1.1vw,16px);
font-size:var(--fs-sm);line-height:var(--lh-tight);color:var(--gray-500);
}
/* ---- 3×2 từ tablet trở xuống ------------------------------------------
Mốc 1100px: dưới mức này ô 6 cột co xuống dưới ~136px và chữ "1.000+" hết
khoảng thở an toàn (xem tính toán ở .m-story__stat-num). */
@media (max-width:1100px){
.m-story__stats{grid-template-columns:repeat(3,1fr);max-width:1040px;}
}
/* Điện thoại VẪN 3×2 (khách chốt), nên cỡ chữ phải nhường: ở 390px mỗi ô chỉ
còn ~108px. --fs-h1 tự clamp xuống 26px, nhưng "1.000+" ở 26px vẫn ~86px nên
phải siết cả CHÚ THÍCH xuống --fs-micro, nếu không "khách hàng trong nước &
xuất khẩu" gãy 6 dòng và hai hàng cao lệch hẳn nhau. */
@media (max-width:560px){
.m-story__stats{gap:22px 12px;}
.m-story__stat-cap{font-size:var(--fs-micro);}
}