/* ============================================================================ TRANG /about-us/ — THIẾT KẾ 2026 Lớp phủ lên about/sections.php. Markup đó lấy nguyên inline style từ bản export Figma nên mọi thứ ghim ở khung 1440px: width:1440px, height cố định cho từng dải, và các cụm trang trí đặt absolute theo toạ độ tuyệt đối. File này làm hai việc: 1. Gỡ những kích thước cứng đó ra để trang co theo màn hình. 2. Dựng lại tấm ảnh nền mà bản export để ở đường dẫn tương đối ('assets/…', không giải được từ WordPress) — about/build.py đã đổi nó thành biến CSS --ab-story-photo đặt ngay trong style của thẻ. Inline style luôn thắng selector thường, nên gần như mọi khai báo ở đây phải có !important. Đó là cái giá của việc giữ nguyên bản export. Phần nút, link và thẻ dùng chung styles/ent-paypal.css (body có cả class .sr-paypal lẫn .sr-about — xem sr_is_about_page() trong functions.php). MỤC LỤC 1. Chuẩn hoá khung + cột nội dung 2. Ba tấm nền 3. Hero 4. Giá trị cốt lõi 5. Sứ mệnh & tầm nhìn 6. Câu chuyện 7. Pip 8. Hệ sinh thái 9. Con số 10. Mobile ========================================================================== */ /* --------------------------------------------------------------------------- 1. CHUẨN HOÁ KHUNG Cột nội dung 1120px giống trang chủ và bốn trang app. Bản export dùng padding 160px trên khung 1440 nên ra đúng 1120 — công thức max() dưới đây giữ nguyên con số đó ở 1440 và tự bóp lại ở màn hình hẹp. --------------------------------------------------------------------------- */ .ab-page { /* Vệt sáng sau lưng Pip đặt absolute ở left:-656px, nong trang rộng thêm 6px. clip cắt phần thừa mà không tạo vùng cuộn mới. */ overflow-x: clip; } .ab-page *, .ab-page *::before, .ab-page *::after { box-sizing: border-box; } .ab-section { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding-left: max(24px, (100% - 1120px) / 2) !important; padding-right: max(24px, (100% - 1120px) / 2) !important; } /* Bản export ghim bề ngang cho từng cụm chữ theo khung 1440. Dưới bề ngang đó chúng thò ra ngoài — quy về 100% và chỉ giữ mức trần. */ .ab-page span[style*="width:1000px"], .ab-page span[style*="width:760px"], .ab-page span[style*="width:720px"], .ab-page span[style*="width:640px"], .ab-page div[style*="width:1120px"], .ab-page div[style*="width:1000px"] { width: 100% !important; max-width: 100% !important; } /* Trang trí vẽ bằng div đặt absolute theo toạ độ khung 1440: ở bề ngang khác chúng lệch chỗ, nhưng đều nằm dưới nội dung nên để nguyên, chỉ chặn không cho bắt chuột. */ .ab-section div[style*="position:absolute"] { pointer-events: none; } .ab-page a, .ab-page button { text-decoration: none; } /* --------------------------------------------------------------------------- 2. NỀN CỦA KHỐI CÂU CHUYỆN VÀ RÁC CỦA BẢN EXPORT --------------------------------------------------------------------------- */ /* Lớp phủ tối cho chữ trắng đọc được trên ảnh. Bản export chồng HAI lớp cùng một tấm ảnh: lớp dưới là ảnh gốc, lớp trên là chính tấm đó đã bị làm tối sẵn, cộng thêm gradient đen 18%. Ghép lại thì hai lớp gần như triệt tiêu nhau và chữ trắng không đọc nổi. Bỏ lớp ảnh tối, thay bằng một dải gradient đậm dần xuống đáy — chữ nằm ở đáy. */ /* Bản thiết kế làm tối ảnh sẵn trong chính file PNG rồi mới phủ thêm đen 18%. Ở đây ảnh là bản gốc chưa xử lý nên phải tự phủ. Lớp phủ phải là ::after chứ không phải background của chính .ab-story__media: ảnh nằm ở một thẻ CON, mà nền của con luôn vẽ đè lên nền của cha. */ .ab-story__media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.78) 100%); } /* Khối .ab-pip__glow là RÁC CỦA BẢN EXPORT, không phải trang trí của dải Pip: nó là một tấm ảnh chụp người, Figma đặt ở left:-656px; top:1087px — tức nằm hẳn ngoài khung nhìn của dải. Bản export vẫn dựng ra. Ẩn hẳn; ảnh assets/ab-pip-bg.jpg cũng đã bỏ khỏi theme. */ .ab-pip__glow { display: none !important; } /* --------------------------------------------------------------------------- 3. HERO --------------------------------------------------------------------------- */ .ab-hero__bg { /* Hoạ tiết 826px neo góc phải theo khung 1440; ở màn hẹp nó tràn ra và nuốt cả phần chữ. Cho co lại và lùi ra sau. */ max-width: 60% !important; height: auto !important; z-index: 0; } .ab-hero__copy, .ab-hero__eyebrow { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- 4. GIÁ TRỊ CỐT LÕI --------------------------------------------------------------------------- */ .ab-values__grid { display: flex !important; flex-wrap: wrap !important; gap: 32px !important; } .ab-values__card { flex: 1 1 280px !important; min-width: 0 !important; } /* --------------------------------------------------------------------------- 5. SỨ MỆNH & TẦM NHÌN --------------------------------------------------------------------------- */ .ab-mission__grid { display: flex !important; flex-wrap: wrap !important; gap: 48px !important; align-items: stretch !important; } .ab-mission__card { flex: 1 1 320px !important; min-width: 0 !important; } /* Vạch ngăn giữa hai khối: export ghim height:300px. */ .ab-mission__grid > svg { height: auto !important; align-self: stretch !important; flex: 0 0 1px !important; } /* --------------------------------------------------------------------------- 6. CÂU CHUYỆN --------------------------------------------------------------------------- */ .ab-story__media { height: auto !important; min-height: 520px !important; justify-content: flex-end !important; padding: 48px !important; } /* Cụm chữ trong ảnh: export đặt absolute ở top:246px của khung 520px cao. Đưa về luồng và đẩy xuống đáy — chỗ lớp phủ đậm nhất, chữ trắng mới đọc được. Chữ dài hơn thiết kế cũng không còn tràn ra ngoài ảnh. */ .ab-story__media > div[style*="top:246px"] { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; margin-top: auto !important; z-index: 2 !important; } /* Lớp ảnh nền nằm dưới cùng, ghim 1120x520 theo khung 1440. */ .ab-story__media > div[style*="background-image"] { inset: 0 !important; width: 100% !important; height: 100% !important; } /* --------------------------------------------------------------------------- 7. PIP --------------------------------------------------------------------------- */ /* Export neo ảnh Pip bằng absolute right:-91px tính theo cột rộng 546px của khung 1440. Sau khi gỡ bề rộng cứng, cột rộng 671px nên ảnh trôi ra ngoài màn hình và bị overflow-x:clip cắt mất. Đưa về luồng, tự đẩy sang phải trong cột. aspect-ratio giữ chỗ sẵn: ảnh mang loading="lazy" nên trước khi tải xong chiều cao nội tại là 0, không có tỉ lệ thì cả dải giật một nhịp khi ảnh hiện ra. */ /* Cột phải là hộp 671x720 cố định; export neo ảnh trong đó bằng absolute top:58px — 720 trừ ảnh cao 604 còn 116, chia đôi đúng 58, tức là CANH GIỮA theo chiều dọc. Đưa ảnh về luồng thì mất luôn phép canh đó nên phải cho chính cột làm flex và canh giữa lại. Giữ nguyên height:720px của export để chiều cao dải không đổi. */ .ab-section--pip > div[style*="height:720px"] { display: flex !important; align-items: center !important; justify-content: flex-end !important; } .ab-pip__visual { position: relative !important; right: auto !important; top: auto !important; /* mặc định là inline, margin auto không đẩy được. */ display: block !important; width: 100% !important; max-width: 480px !important; height: auto !important; aspect-ratio: 583 / 604; } /* --------------------------------------------------------------------------- 8. HỆ SINH THÁI --------------------------------------------------------------------------- */ .ab-eco__grid { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; } .ab-eco__card { flex: 1 1 420px !important; min-width: 0 !important; height: auto !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) { .ab-eco__card:hover { transform: translateY(-6px); box-shadow: 0 40px 40px -24px rgba(0, 0, 0, 0.12); } } /* --------------------------------------------------------------------------- 9. CON SỐ --------------------------------------------------------------------------- */ .ab-scale__grid { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; } .ab-scale__card { flex: 1 1 260px !important; min-width: 0 !important; } /* --------------------------------------------------------------------------- 10. MOBILE --------------------------------------------------------------------------- */ @media (max-width: 900px) { .ab-section { padding-top: 56px !important; padding-bottom: 56px !important; flex-direction: column !important; gap: 32px !important; } /* Mọi cột của export đều ghim bề ngang theo khung 1440 (594px, 671px, 1120px...). Khi dải đổi sang xếp dọc, cột rộng hơn màn hình sẽ bị align-items:center đẩy tràn ra CẢ HAI bên và chữ mất một nửa. */ .ab-section > div { width: 100% !important; max-width: 100% !important; align-self: stretch !important; } /* flex-basis:0 của thẻ xếp ngang ăn vào CHIỀU CAO khi container đổi sang column — thẻ co về 0 và chồng lên nhau. */ .ab-values__card, .ab-mission__card, .ab-eco__card, .ab-scale__card { flex: 0 0 auto !important; width: 100% !important; } /* Vạch ngăn dọc thành ngang. */ .ab-mission__grid > svg { width: 100% !important; height: 1px !important; flex: 0 0 1px !important; } .ab-hero__bg { display: none !important; } .ab-story__media { min-height: 420px !important; padding: 24px !important; } /* Cột phải bỏ chiều cao 720px của export, nếu không dưới ảnh thừa ra một khoảng trống lớn. */ .ab-section--pip > div[style*="height:720px"] { height: auto !important; justify-content: center !important; } /* Ảnh Pip neo phải theo khung 1440; ở màn hẹp cho về luồng dưới phần chữ. */ .ab-pip__visual { position: relative !important; right: auto !important; top: auto !important; width: 100% !important; max-width: 320px !important; height: auto !important; } .ab-pip__glow { display: none !important; } .ab-page span[style*="font-size:64px"] { font-size: 34px !important; } .ab-page span[style*="font-size:48px"], .ab-page span[style*="font-size:40px"] { font-size: 28px !important; } }