/* ============================================================================ * MOBILE (≤767px) — chuẩn hoá khoảng cách DỌC giữa các section = 40px * ---------------------------------------------------------------------------- * Trước đây mỗi trang tự đặt py-[4rem] / py-[3rem] / py-[2.5rem]... nên khoảng * trắng giữa 2 section liền kề = pb(section trên) + pt(section dưới) và rơi vào * 80–184px, không đồng nhất. Ở đây ép mỗi section 20px trên + 20px dưới để mọi * khoảng cách giữa hai section = 40px. * * Quy ước: * --sec-pad : padding dọc của một section (nửa khoảng cách) = 20px * --sec-gap : khoảng cách mong muốn giữa 2 section = 40px * Section ĐẦU TIÊN ngay sau hero/banner giữ padding-top = 40px, vì phía trên * nó là vùng hero (thường có ảnh/nội dung absolute) chứ không phải một section * có padding để cộng vào. * * KHÔNG đụng tới: * - Chiều NGANG (lề trái–phải) — do .container quản lý. * - Các vùng chồng lấn có margin âm lớn: banner overlap của CTT/SmartPOS và * cặp FAQ ↔ footer ở CTT (footer mt -417px, faq pb 592px) và SmartPOS * (footer mt -272px, faq pb 320px). Ở 2 trang đó footer được kéo lên nằm * ĐÈ vào phần padding-bottom của FAQ; giảm padding sẽ khiến footer phủ lên * nội dung FAQ. Các trang còn lại footer không kéo âm đáng kể nên chuẩn hoá * được bình thường. * * File này nạp NGAY SAU tailwind.css (xem includes/func/css.conf.php) nên thắng * các utility .py-[4rem]… ở cùng độ đặc hiệu mà không cần !important, trừ vài * chỗ ghi đè utility có tiền tố "!" của Tailwind. * ========================================================================== */ @media (max-width: 767px) { :root { --sec-pad: 20px; --sec-gap: 40px; } /* ---------- Dải logo đối tác (partial dùng chung cho 6 trang) ---------- */ .partners-marquee-section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); } /* TRANG CHỦ: đã chuyển sang assets/css/section-spacing.css (áp dụng mọi kích thước màn hình, không riêng mobile) — xem file đó để tránh 2 rule giẫm lên nhau. Dải logo đối tác trên trang chủ vẫn được bọc thêm 1 div mt-[60px] cần triệt tiêu trên mobile: */ body.home main > .mt-\[60px\] { margin-top: 0; } /* ================== CỔNG THANH TOÁN (CTT) ================== */ body.page-template-page-ctt .ctt-compatible > .container { padding-bottom: var(--sec-pad); } body.page-template-page-ctt .optimize > .container { padding-top: var(--sec-pad); /* KHÔNG dùng --sec-pad cho đáy: .optimize là một trong các vùng chồng lấn margin âm nói ở đầu file. Sau nó là (mt -200px, h 300px) rồi .options2 (mt -150px, bg-white, z-20), tổng lại .options2 bắt đầu ở (đáy .optimize − 50px) và trùm nền trắng lên 50px cuối của section này. Với pb 20px, khối ảnh block 2 kết ở (đáy − 20px) → 30px đáy ảnh điện thoại "Chi tiết doanh thu sản phẩm" bị nền trắng che (thấy rõ sau khi dựng lại cặp ảnh theo Figma, ảnh cao hơn ảnh ghép cũ). 58px = 50px vùng bị trùm + 8px, để khoảng cách NHÌN THẤY từ đáy ảnh tới tiêu đề của .options2 (container pt 32px) đúng 40px = --sec-gap của file này. */ padding-bottom: 58px; } /* .section-ctt-quytrinh giữ padding-top 40px: phía trên nó là .options2 có padding-bottom 0 (pb-0) nên 40px này chính là khoảng cách. */ body.page-template-page-ctt .section-ctt-quytrinh { padding-bottom: var(--sec-pad); } body.page-template-page-ctt .bottom-cta { padding-top: var(--sec-pad); /* 60px thay vì --sec-pad (20px): theo yêu cầu nới thêm 40px khoảng cách xuống phần FAQ bên dưới. Khoảng cách NHÌN THẤY = mb này + padding-top 20px của .ctt-faq, nên 20+20=40px trước đây -> 60+20=80px. */ margin-bottom: 60px; } body.page-template-page-ctt .ctt-faq { padding-top: var(--sec-pad); } /* ================== LINK THANH TOÁN ================== */ /* Hero: bỏ mb 2rem để khoảng cách xuống section đầu do chính section đó quyết định (utility max-md:!mb-[2rem] có !important nên cần !important để thắng). */ body.page-template-page-linktt #banner { margin-bottom: 0 !important; } /* Bỏ hẳn padding-top (utility pt-[4rem] cũng bị đè): khối "Lý do khách hàng nên chọn AppotaPay" nằm sát ngay dưới hero, hero đã có khoảng trống ở đáy nên thêm --sec-gap làm phần này bị tụt xuống quá thấp. */ body.page-template-page-linktt .linktt-solutions { padding-top: 0; } body.page-template-page-linktt .linktt-solutions, body.page-template-page-linktt .linktt-sendlink, body.page-template-page-linktt .linktt-process, body.page-template-page-linktt .linktt-industries, body.page-template-page-linktt .linktt-botcta, body.page-template-page-linktt .linktt-faq { padding-bottom: var(--sec-pad); } body.page-template-page-linktt .linktt-sendlink, body.page-template-page-linktt .linktt-process, body.page-template-page-linktt .linktt-industries, body.page-template-page-linktt .linktt-botcta, body.page-template-page-linktt .linktt-faq { padding-top: var(--sec-pad); } /* FAQ → footer: footer của trang này không kéo âm (mt 0) nên chỉnh thẳng. */ body.page-template-page-linktt .linktt-faq { margin-bottom: var(--sec-pad); } /* ================== LINK THANH TOÁN OTA ================== */ body.page-template-page-linkttota .ota-hoatdong { padding-top: var(--sec-gap); } body.page-template-page-linkttota .ota-hoatdong, body.page-template-page-linkttota .ota-loiich, body.page-template-page-linkttota .ota-doituong, body.page-template-page-linkttota .ota-botcta, body.page-template-page-linkttota .ota-faq { padding-bottom: var(--sec-pad); } body.page-template-page-linkttota .ota-loiich, body.page-template-page-linkttota .ota-doituong, body.page-template-page-linkttota .ota-botcta, body.page-template-page-linkttota .ota-faq { padding-top: var(--sec-pad); } /* FAQ → footer: footer chỉ kéo lên -3rem trên mobile (không phải vùng chồng lấn thực sự như CTT/SmartPOS) nên đưa về đúng 40px. */ body.page-template-page-linkttota .ota-faq { margin-bottom: 0; } body.page-template-page-linkttota .footer { margin-top: var(--sec-pad); } /* ================== SMARTPOS ================== */ /* .section-solutions-smartpos ("Lợi ích khi dùng SmartPos AppotaPay") là section đầu tiên dưới hero, nên khoảng cách 40px phải đo từ đáy ẢNH THIẾT BỊ POS của hero — đúng như Figma (node 2139-12378: đáy ảnh POS y=918, frame "Lợi ích" y=958). Ảnh POS định vị absolute và tràn xuống DƯỚI hộp section này: mép trên hộp section nằm thấp hơn đáy ảnh đúng 6.2px, và giá trị này KHÔNG đổi trong cả dải 375–767px (đã đo tại 375/390/430/540/767) vì cả chuỗi banner mb + .banner-skew đều là px cố định. Nên padding-top = 40 − 6.2 để mép trên chữ "Lợi ích…" cách đáy ảnh đúng 40px. */ body.page-template-page-smartpos .section-solutions-smartpos { padding-top: calc(var(--sec-gap) - 6.2px); padding-bottom: var(--sec-gap); } /* payment / thietbi / quytrinh vốn đã pt 0 + pb 40 → khoảng cách 40px, giữ nguyên. */ body.page-template-page-smartpos .section-smartpos-doituong { padding-bottom: var(--sec-pad); } body.page-template-page-smartpos .linktt-botcta { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); } body.page-template-page-smartpos .smartpos-faq { padding-top: var(--sec-pad); } /* ================== CROSS BORDER ================== */ body.page-template-page-crossborder .crossborder-banner { padding-bottom: 0; } body.page-template-page-crossborder .crossborder-model { padding-top: var(--sec-gap); } body.page-template-page-crossborder .crossborder-model, body.page-template-page-crossborder .crossborder-dvcotloi, body.page-template-page-crossborder .crossborder-worldmap, body.page-template-page-crossborder .crossborder-nangluc, body.page-template-page-crossborder .crossborder-botcta, body.page-template-page-crossborder .crossborder-faq { padding-bottom: var(--sec-pad); } body.page-template-page-crossborder .crossborder-dvcotloi, body.page-template-page-crossborder .crossborder-worldmap, body.page-template-page-crossborder .crossborder-nangluc, body.page-template-page-crossborder .crossborder-botcta, body.page-template-page-crossborder .crossborder-faq { padding-top: var(--sec-pad); } /* .crossborder-worldmap có thêm .container mb-[1.5rem] bên trong */ body.page-template-page-crossborder .crossborder-worldmap > .container { margin-bottom: 0; } /* FAQ → footer: tương tự OTA, footer chỉ -3rem nên chuẩn hoá được. */ body.page-template-page-crossborder .crossborder-faq { margin-bottom: 0; } body.page-template-page-crossborder .footer { margin-top: var(--sec-pad); } /* ============ FAQ → footer: chừa chỗ cho nêm gradient (chuẩn theo CTT) ============ * #gradient-canvas-footer (JS chèn vào .footer) tràn lên PHÍA TRÊN mép .footer * đúng 169px — top:-66px cộng phần hộp bao nở ra do rotate(-18deg). Nếu khoảng * cách từ card FAQ cuối tới mép .footer nhỏ hơn 169px thì nêm gradient cắt chéo * ngang qua các card. Trang CTT chừa 175px nên nêm nằm trọn bên dưới card; lấy * con số đó làm chuẩn cho 4 trang còn lại. * * Khoảng cách = padding-bottom(section) + margin-bottom(section) + margin-top(.footer). * Cả 4 trang đều còn đúng 20px ở hai thành phần sau (mb 20 + footer mt 0, hoặc * mb 0 + footer mt 20) nên padding-bottom = 175 - 20 = 155px. * * Đặt ở CUỐI media query để thắng các rule padding-bottom: var(--sec-pad) phía * trên (cùng độ đặc hiệu 0,2,0 → ăn theo thứ tự khai báo). * ================================================================================ */ :root { --faq-footer-gap: 175px; } body.page-template-page-linktt .linktt-faq, body.page-template-page-linkttota .ota-faq, body.page-template-page-smartpos .smartpos-faq, body.page-template-page-crossborder .crossborder-faq { padding-bottom: calc(var(--faq-footer-gap) - var(--sec-pad)); } /* SmartPOS trước đây dùng cặp chồng lấn (section pb 320px + mb 80px, footer mt -272px) → chỉ còn 128px. Bỏ cặp đó, đưa về cùng quy ước với OTA/crossborder. An toàn: footer bị đẩy XUỐNG so với hiện tại (128px → 175px) nên không có nguy cơ phủ lên nội dung FAQ như cảnh báo ở đầu file. */ body.page-template-page-smartpos .smartpos-faq { margin-bottom: 0; } body.page-template-page-smartpos .footer { margin-top: var(--sec-pad); } }