/* ============================================================================ * CHUẨN HOÁ KHOẢNG CÁCH GIỮA CÁC SECTION = 80px — MỌI KÍCH THƯỚC MÀN HÌNH * ---------------------------------------------------------------------------- * Theo yêu cầu nghiệm thu của marketing: khoảng cách dọc giữa 2 section liền kề * luôn = 80px, CỐ ĐỊNH và không đổi theo màn hình (laptop 14" hay màn ngoài * 21" đều phải ra cùng 1 kết quả). * * NGUYÊN NHÂN GỐC của tình trạng "80px ở màn này, 120px ở màn khác": * Một vài section trước đây có thêm rule chỉ áp dụng TỪ MỘT MỐC breakpoint * desktop trở lên (`@media (min-width: 1280px)`), cộng dồn thêm padding * hoặc margin riêng cho section đó. Bất kỳ màn hình nào có bề rộng CSS px * nằm quanh mốc 1280px sẽ cho kết quả khác nhau tuỳ có vượt qua mốc đó hay * không (laptop 14" thường render ở ngưỡng 1280–1440px — sát mốc; màn 21" * luôn vượt xa mốc 1920px) => Nay bỏ hẳn kiểu override "cộng dồn theo * breakpoint" này, quy về MỘT giá trị áp dụng xuyên suốt mọi bề rộng. * * NGUYÊN TẮC ÁP DỤNG * --sec-pad = 40px : padding-top HOẶC padding-bottom của MỘT section * --sec-gap = 80px : khoảng cách nhìn thấy giữa 2 section liền kề * (= pb của section trên + pt của section dưới) * Section có background riêng phủ toàn bộ chiều rộng (vd nền xám của * .home-why-choose) không cần thêm padding phụ: padding 40px nội bộ của * chính nó CHÍNH LÀ khoảng "nội dung -> mép nền"; cộng với 40px của section * liền kề = đủ 80px và tự động thoả yêu cầu chia đều 40+40 khi section có * nền/khối riêng. * * File này nạp NGAY SAU tailwind.css và TRƯỚC mobile-section-spacing.css (xem * includes/func/css.conf.php) để thắng các utility py-[…] cùng độ đặc hiệu mà * không cần !important. KHÔNG bọc trong bất kỳ @media nào — áp dụng từ 0px * trở lên, đúng tinh thần "không phụ thuộc breakpoint" của yêu cầu. * ========================================================================== */ :root { --sec-pad: 40px; --sec-gap: 80px; } /* ===================== TRANG CHỦ (body.home) ===================== */ body.home .home-stats, body.home .home-solutions, body.home .home-payment-methods, body.home .home-dashboard, body.home .home-why-choose, body.home .partners-marquee-section, body.home .home-process, body.home .home-news, body.home .bottom-cta { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); } /* -------------------------------------------------------------------------- * NGOẠI LỆ 1 — Banner -> Stats (đầu trang) * Banner dùng layout absolute + ảnh minh hoạ animate nên gap không tính được * chỉ bằng padding cộng dồn thông thường; cần "kéo" section Stats lên bằng * margin-top âm để bù phần khoảng trắng dư của banner. * * Mốc đo: -60px ban đầu được tính theo "đáy ảnh điện thoại" trong banner. * Marketing đo lại theo mốc "chân dải màu" (mép dưới khối gradient mint chéo) * — một điểm neo KHÁC, thấp hơn/lệch so với ảnh điện thoại — nên cùng giá trị * -60px lại cho ra gap 40px thay vì 80px theo mốc mới này. * Vì margin-top là biến DUY NHẤT điều khiển khoảng cách (quan hệ tuyến tính * 1:1 theo px), chỉnh: -60 + (80 - 40) = -20px để bù đúng phần thiếu 40px. * Đã sửa: -20px (theo mốc "chân dải màu", xác nhận ở 1280–1919px). * QUAN TRỌNG: khoảng 768–1279px (tablet) HIỆN CHƯA CÓ giá trị bù riêng — * chiều cao banner ở khoảng này khác hẳn desktop nên KHÔNG suy diễn số liệu, * cần đo trực tiếp bằng DevTools rồi thêm 1 rule tương tự. * Xem includes/home/stats/index.mvs.php. * -------------------------------------------------------------------------- */ @media (min-width: 1280px) { body.home .home-stats { position: relative; z-index: 20; margin-top: -20px; /* mốc "chân dải màu" -> heading section = 80px, xác nhận ở 1280–1919px */ } } /* NGOẠI LỆ 1b — riêng ≥1920px (6xl, màn ngoài 21"): Canvas gradient trong banner có breakpoint RIÊNG ở 6xl (6xl:top-[-400px] so với top-[-250px], 6xl:mt-[0] so với mt-[-5rem]) — xem includes/home/banner/index.mvs.php — khiến dải màu dịch vị trí so với 14" mà KHÔNG liên quan tới margin-top của .home-stats. Cùng giá trị -20px ở trên chỉ còn cho ra 40px tại 21" (đo thực tế 2026-09-03), nên cần bù thêm +40px riêng cho khoảng này: -20 + 40 = +20px. Đặt SAU rule ở trên (cùng độ đặc hiệu) để thắng tại ≥1920px. */ @media (min-width: 1920px) { body.home .home-stats { margin-top: 20px; } } /* TODO (QA): đo lại gap banner -> stats ở 768–1279px và thêm 1 khối @media (min-width: 768px) and (max-width: 1279px) { body.home .home-stats { margin-top: ...px; } } với giá trị đo được trên trình duyệt thật — KHÔNG áng chừng từ số -60px. */ /* -------------------------------------------------------------------------- * NGOẠI LỆ 2 — CTA cuối trang -> Footer * Footer được kéo lên chồng lấn bằng margin âm rất lớn theo chủ đích (canvas * gradient + hiệu ứng kính mờ), KHÔNG phải khoảng cách 2 section thông thường * nên không nằm trong phạm vi chuẩn hoá 80px này. padding-bottom của * .bottom-cta ở trên chỉ chuẩn hoá phần "trước khi footer bắt đầu chồng lên". * -------------------------------------------------------------------------- */ /* ===================== TRANG CTT (body.page-template-page-ctt) ===================== * Chỉ chuẩn hoá các ranh giới KHÔNG liên quan overlap đồ hoạ (ảnh absolute, canvas * skew, margin âm dàn dựng theo hình). Các ranh giới đang được tinh chỉnh sống theo * feedback trực tiếp trên trình duyệt (banner->compatible, cụm optimize->banner-skew * ->options, faq->footer) KHÔNG nằm trong phạm vi patch này — xem comment gốc trong * includes/page/ctt/compatible/index.mvs.php và includes/page/ctt/faq/index.mvs.php, * không tự ý đổi các mốc đó. * ========================================================================== */ /* FIX 1 — options2 -> quytrinh * options2 > .pin-options vốn pb-0 (0px, MỌI breakpoint); quytrinh dùng * py-[2.5rem]/xl:py-[7.5rem] làm CẢ pt lẫn pb (40px dưới xl, 120px từ xl) -> * gap thực tế đang là 40px (dưới xl) hoặc 120px (từ xl), không đồng nhất. * Chuẩn hoá: options2 thêm pb 40px (áp dụng "40+40" vì quytrinh có nền/khối * riêng), quytrinh đổi py rời thành pt/pb 40px CỐ ĐỊNH mọi kích thước. */ body.page-template-page-ctt .options2 .pin-options { padding-bottom: 40px !important; } body.page-template-page-ctt .section-ctt-quytrinh { padding-top: 40px !important; padding-bottom: 40px !important; } /* FIX 2 — quytrinh -> partners-marquee * Không cần patch riêng: sau FIX 1, quytrinh pb=40px cố định; partners-marquee * đã có py-[2.5rem]=40px cố định (gỡ override 80px lúc chuẩn hoá trang chủ) -> * 40+40=80px tự động đúng ở mọi kích thước. */ /* FIX 3 — partners-marquee -> botcta * .bottom-cta dùng pt-[2.5rem]/md:pt-[5rem] (40px/80px theo breakpoint) trong * khi partners-marquee cố định pb=40px -> gap 80px (đúng, dưới md) nhưng 120px * (sai, từ md trở lên). Chuẩn hoá pt về 40px cố định mọi kích thước. */ body.page-template-page-ctt .bottom-cta { padding-top: 40px !important; } /* FIX 4 — botcta -> faq * Lúc đầu tính theo giả định margin-bottom:20px của .bottom-cta (đặt trong * includes/page/ctt/botcta/index.mvs.php) có hiệu lực, nên đặt pt của .ctt-faq * = 60px (60+20=80). Đo thực tế trên trình duyệt (DevTools, 2026-09-04): tổng * khoảng cách chỉ ra 60px, tức phần margin-bottom đó KHÔNG cộng thêm được (rất * có thể do .bottom-cta là class dùng chung ở nhiều trang, cascade bị rule khác * thắng — chưa truy hết nguồn). Sửa lại: không phụ thuộc vào phía botcta nữa, * gộp nguyên 80px vào pt của .ctt-faq (rule này có !important nên chắc chắn * thắng, không phụ thuộc cascade phía trên). PB giữ nguyên, KHÔNG đụng (đang * tune sống với footer, xem includes/page/ctt/faq/index.mvs.php). */ body.page-template-page-ctt .ctt-faq { padding-top: 80px !important; } /* FIX 5 — compatible -> optimize, CHỈ dải 768–1279px (md, trước xl) * .ctt-compatible > .container có pb 40px (base) / 80px (xl, do xl:pb-[5rem]) * nhưng KHÔNG có mốc md riêng nên giữ 40px suốt dải 768–1279px; .optimize > * .container có pt 40px (base) nhưng md:pt-0 zero hoá pt từ 768px -> gap ở * dải 768–1279px hiện chỉ 40px, trong khi <768px và ≥1280px đã ĐÚNG 80px sẵn * (không đụng 2 mốc đó để tránh làm lệch lại). Chỉ bù riêng dải giữa. */ @media (min-width: 768px) and (max-width: 1279px) { body.page-template-page-ctt .ctt-compatible > .container { padding-bottom: 80px !important; } } /* FIX 6 — banner -> compatible, PHẦN "chân dải màu canvas -> mép section kế" * (KHÁC với pt-280px của .ctt-compatible — cái đó chỉ lo khoảng cách từ ảnh * banner tới HEADING, đang tune sống riêng, KHÔNG đụng ở đây). * Đo pixel trực tiếp từ ảnh chụp thật (2026-09-04, viewport 1512px = dải 3xl): * điểm mỏng nhất (sát mép trái, do canvas skew -12deg nên bên trái luôn thấp * hơn bên phải) chỉ ~29px, điểm dày nhất đo được ~60px — chưa đạt 80px ở bất * kỳ điểm nào. #banner đang dùng 3xl:mb-[11rem] (176px); tăng thêm ~55-60px * để điểm mỏng nhất cũng đạt 80px. * CHỈ xác nhận được ở dải 3xl (1440–1919px) từ ảnh chụp thật ở 1512px — dải xl * (1280–1439px) và 6xl (≥1920px) CHƯA có số đo, để nguyên giá trị gốc, cần * bro test riêng (y hệt trang chủ từng phải thêm exception riêng cho 6xl). */ @media (min-width: 1440px) and (max-width: 1919px) { body.page-template-page-ctt #banner { margin-bottom: 230px !important; } } /* Dải 6xl (≥1920px): canvas dùng w-[100vw] nên độ lệch 2 mép do skew -12deg tỉ * lệ thuận bề rộng màn hình — màn 1920px rộng hơn 1512px (đã đo ở FIX 6 trên) * nên mép trái dải màu dịch xuống thấp hơn nữa (~43px, tính theo * tan(12°) × chênh lệch bề rộng/2). GIÁ TRỊ DƯỚI ĐÂY LÀ ƯỚC TÍNH theo lượng * giác, KHÔNG phải đo trực tiếp pixel như bản 3xl — cần bro chụp lại xác nhận, * có thể phải chỉnh thêm. */ @media (min-width: 1920px) { body.page-template-page-ctt #banner { margin-bottom: 270px !important; } } /* CHƯA FIX — cần bro đo trực tiếp trên trình duyệt trước khi động vào, KHÔNG * áng chừng số liệu (đúng nguyên tắc đã áp dụng cho banner->stats trang chủ): * - banner -> compatible, phần pt-280px (đẩy chữ heading, đang tune sống, * xem compatible/index.mvs.php) — KHÁC với FIX 6 ở trên * - banner -> compatible ở dải xl (1280-1439px) và 6xl (≥1920px) — FIX 6 * chỉ xác nhận được ở dải 3xl * - optimize -> banner-skew -> options2 (cụm skew -12deg + margin âm 2 lớp) * - faq -> footer (đang tune sống, xem faq/index.mvs.php) */ /* ===================== TRANG CROSSBORDER (body.page-template-page-crossborder) ===================== * Section order: banner -> model (Mô hình kết nối) -> dvcotloi (Dịch vụ cốt lõi) -> * worldmap (Mạng lưới QR) -> nangluc (Năng lực cốt lõi) -> partners-marquee (dùng * chung) -> botcta (Sẵn sàng để bắt đầu?) -> faq -> footer. * Mobile (<768px) ĐÃ chuẩn hoá đầy đủ ở mobile-section-spacing.css (40px rhythm + * 175px riêng cho faq->footer) — các rule dưới đây CHỈ áp dụng ≥768px, không đụng * lại phần mobile. Toàn bộ section liên quan đều nền trắng (bg-white) TRỪ faq * (bg-[#F7F8FA], xám) -> ranh giới botcta->faq áp dụng đúng quy tắc 40+40 của * marketing (khác nền); các ranh giới còn lại (cùng nền trắng) chỉ cần tổng = 80px, * chọn chia đều 40/40 cho đồng nhất với các trang khác. * ========================================================================== */ /* FIX 0 — chân dải màu gradient -> tiêu đề "Mô hình kết nối..." = 80px (2026-09-08) * * Khoảng cách này do HAI thứ cùng quyết định: * a) vị trí CHÂN DẢI MÀU -> xử lý ở crossborder/banner/index.mvs.php: * #banner được cho position:relative và canvas định vị bằng * bottom:10.6278vw (= 50vw x tan(12deg), đúng bằng phần bounding box * thò ra do skew) -> chân dải luôn trùng MÉP DƯỚI BANNER ở mọi bề rộng. * b) padding-top của .crossborder-model -> rule dưới đây. * Nhờ (a) mà (b) chính là khoảng cách cuối cùng, không co giãn theo bề rộng. * * ĐÍNH CHÍNH ghi chú cũ của FIX 0 (viết sáng 08/09): tôi từng ghi "canvas bị * overflow-hidden của #banner cắt nên chân dải = đáy banner". SAI. Lúc đó * #banner là position:static nên KHÔNG phải containing block của canvas * (offsetParent = BODY) -> overflow:hidden không cắt được, dải thò xuống dưới * banner 47-115px tuỳ bề rộng. Đo thật chân dải -> tiêu đề trước khi sửa * (số âm = dải ĐÈ lên tiêu đề): * 393px:+172 768px:-11 1024px:-13 1280px:+33 * 1512px:+8 1920px:-35 2560px:-103 * * Đồng thời gỡ khỏi modelhienketnoi/index.mvs.php 2 rule cộng dồn cũ: * @media (768-1279px) .crossborder-model { padding-top: 9rem } * .crossborder-model > .container { padding-top: 80px } * Rule 9rem là cách chữa cháy cho đúng hiện tượng "dải gradient tràn xuống che * tiêu đề" nói trên — nay xử lý tận gốc ở vị trí canvas nên không cần nữa. * * Mobile <768px giữ 40px theo chuẩn chung (mobile-section-spacing.css). */ @media (min-width: 768px) { body.page-template-page-crossborder .crossborder-model { padding-top: 80px !important; } } /* FIX 1 — model -> dvcotloi (cùng nền trắng) * model dùng py-[4rem]/xl:py-[5rem] (pb: 64px gap thực tế 128px ở dải * md (768-1279px), 120px ở ≥xl — không đồng nhất và đều vượt 80px. Ép cố định * mỗi bên 40px từ 768px trở lên (không có mốc 3xl/6xl riêng nào phá lại, nên một * rule duy nhất là đủ cho toàn dải desktop). */ @media (min-width: 768px) { body.page-template-page-crossborder .crossborder-model { padding-bottom: 40px !important; } body.page-template-page-crossborder .crossborder-dvcotloi { padding-top: 40px !important; } } /* FIX 2 — dvcotloi -> worldmap (cùng nền trắng) * dvcotloi dùng pb-0/xl:pb-[40px] (pb: 0px gap chỉ 48px ở dải md * (thiếu 32px), 120px ở ≥xl (dư 40px). Ép cố định mỗi bên 40px từ 768px, cùng * cách làm FIX 1. (worldmap -> nangluc phía sau ĐÃ đúng 80px sẵn — pb 64px/56px * của worldmap tự khớp với pt 16px/24px của nangluc theo comment gốc trong * worldmap/index.mvs.php, KHÔNG đụng vào.) */ @media (min-width: 768px) { /* 36px chứ không phải 40: .dvcotloi-slider__track có padding-bottom 4px để shadow của card không bị cắt khi cuộn ngang, nên đáy card cách đáy section 40 + 4 = 44px -> tổng 84px. Bù 4px ở đây để đáy CARD (mép nhìn thấy thật) cách đúng 40px. Đo lại 2026-09-08. */ body.page-template-page-crossborder .crossborder-dvcotloi { padding-bottom: 36px !important; } body.page-template-page-crossborder .crossborder-worldmap { padding-top: 40px !important; } } /* FIX 3 — botcta -> faq (nền trắng -> nền xám #F7F8FA, ÁP DỤNG ĐÚNG quy tắc 40+40) * botcta có pb-[120px] cố định mọi kích thước (không có ghi chú lý do); faq dùng * pt-[4rem]/xl:pt-[5rem] (64px gap hiện tại 184px ( partners-marquee VÀ partners-marquee -> botcta: * đã có sẵn override riêng ngay trong nangluc/index.mvs.php và botcta/index.mvs.php * (mỗi bên set cố định 40px cho pb/pt của chính section đó); marquee cố định * pt/pb 40px (dùng chung, chuẩn hoá lúc fix trang chủ) -> 40+40=80px tự động * đúng cho cả 2 ranh giới này. Không lặp lại ở đây để tránh 2 nguồn ghi đè cùng * 1 chỗ; xem comment chi tiết ngay trong 2 file đó (có ghi rõ lý do đổi 10px/20px * cũ thành 40px sau khi trang chủ chuẩn hoá marquee, 2026-09-05). */ /* CHƯA FIX (trang crossborder) — cần bro đo trực tiếp trên trình duyệt, KHÔNG * áng chừng, đúng nguyên tắc chung của file này: * - banner -> model: model có override sống padding-top:9rem riêng cho dải * 768-1279px (tránh dải gradient skew cuối banner đè lên tiêu đề) — CHƯA rõ * tổng khoảng cách nhìn thấy ở dải này có đúng 80px hay không (phụ thuộc vị * trí thực của dải màu, không tính được thuần bằng box-model); dải ≥1280px * (model pt cố định 64px, banner pb 0) cũng CHƯA đo — canvas gradient banner * có thể tràn ra ngoài box model giống banner trang chủ/CTT. * - faq -> footer: footer kéo âm rất lớn (mt -27rem ở md, calc(-18.5rem+120px) * ở xl/3xl) chồng lên phần pb-[19rem]/mb-[8rem] của faq — y hệt dạng "vùng * chồng lấn cố ý" đã gặp ở CTT/SmartPOS, cần đo trực tiếp theo cùng cách * (khoảng cách từ card FAQ cuối tới mép canvas gradient của footer). */ /* ===================== TRANG DVBANMATHE (body.page-template-page-dvbanmathe) ===================== * Section order: banner -> solutions (Giải pháp) -> partner (dải logo card xanh * #00612A, ẩn <768px, đổi sang mobile.php) -> simplesys (nền #F6F8FC, kéo âm * md:mt-[-8.75rem] để nền xám tràn lên phía sau card partner theo chủ đích) -> * botcta (Sẵn sàng để bắt đầu?, canvas gradient xoay -24deg NẰM TRONG luồng — * position:relative không absolute — nên tự chiếm không gian, không dùng được * cách tính padding thuần cho khoảng cách VÀO trong section này) -> footer (kéo * âm rất lớn, chồng lên botcta theo chủ đích). * Trang này CHƯA được đụng tới lần nào trước đây (không có rule nào trong file * này lẫn mobile-section-spacing.css) — pass này CHỈ xử lý ranh giới có thể tính * tin cậy bằng padding thuần (không dính margin-collapse hay phần tử chiếm * không gian ngoài dự kiến); mobile (<768px) CHƯA được rà, để pass sau. * ========================================================================== */ /* FIX 1 — simplesys -> botcta (nền xám #F6F8FC -> trắng, ÁP DỤNG quy tắc 40+40) * simplesys: khoảng cách dưới nằm ở PADDING-BOTTOM của .container con (không phải * margin nên không bị collapse) = 0 (base) / 48px (md, md:pb-12) / 0 (xl, xl:pb-0). * botcta (dùng chung class .bottom-cta, transparent (0 base/md, 112px xl) CỘNG padding-top của .container con (32px * base/md via pt-8, 0 xl via xl:pt-0) — cả 2 đều padding nên cộng được, không lo * collapse. Tổng hiện tại: 48+32=80px ở md (đúng TỔNG nhưng SAI tỉ lệ, không phải * 40/40 như marketing yêu cầu khi đổi màu nền); 0+112=112px ở xl (SAI cả tổng lẫn * tỉ lệ). Ép cố định mỗi bên đúng 40px xuyên suốt ≥768px — set section pt=40 và * triệt tiêu hẳn pt của .container (0) để không phải tính cộng dồn 2 nguồn nữa. * Phần tử canvas #gradient-canvas-bottom bên trong .bottom-cta > .container CÓ * chiếm không gian thật trong luồng (position:relative, không phải absolute) nên * làm .container rất cao (tới 871px ở xl) — không ảnh hưởng tới rule dưới đây * (chỉ chỉnh padding-top, không đụng canvas hay chiều cao tổng), nhưng nghĩa là * TỔNG CHIỀU CAO botcta phụ thuộc nhiều vào canvas này hơn là các padding ở đây. */ @media (min-width: 768px) { body.page-template-page-dvbanmathe .dvbanmathe-simplesys > .container { padding-bottom: 40px !important; } body.page-template-page-dvbanmathe .bottom-cta { padding-top: 40px !important; } body.page-template-page-dvbanmathe .bottom-cta > .container { padding-top: 0 !important; } } /* FIX 2 — banner -> solutions, dải màu banner -> đầu section "Giải pháp" * (đã đo trực tiếp bởi Dilo ở viewport 1440px / dải xl-3xl, khoảng cách nhìn * thấy giữa 2 vệt đỏ = margin-top của .container bên trong .solutions, hiện * đang là 214px do class `xl:mt-[214px]`). Ép về 120px cho dải ≥1280px (xl và * lên nữa, vì class gốc không có mốc 3xl/6xl riêng nên 1 rule là đủ). * (Ban đầu thử 80px theo đúng chuẩn 80px chung của trang — Dilo test trực tiếp * trên trình duyệt thấy 120px nhìn hợp lý hơn cho ranh giới banner->solutions * cụ thể này nên chốt theo số đo thực tế, không ép cứng theo 80px chung.) * CHƯA xác nhận cho dải <1280px (base dùng mt-[calc(2.5rem+55px)]=95px, lg * 1024-1279 dùng my-[4.5rem]=72px) — nếu cần cùng 120px ở dải đó, đo lại rồi * báo mình bổ sung rule riêng cho dải đó (KHÔNG suy diễn theo tỉ lệ vì banner * có canvas/ảnh absolute, quan hệ không tuyến tính như phần padding thường). */ @media (min-width: 1280px) { body.page-template-page-dvbanmathe .solutions > .container { margin-top: 120px !important; } } /* CHƯA FIX (trang dvbanmathe) — cần bro đo trực tiếp trên trình duyệt, KHÔNG * áng chừng, đúng nguyên tắc chung của file này (banner -> solutions ĐÃ fix ở * FIX 2 trên, chỉ xác nhận dải ≥1280px — dải <1280px vẫn nằm trong danh sách * chưa đo): * - banner -> solutions, dải <1280px (base/lg): xem ghi chú cuối FIX 2. * - solutions -> partner: khoảng cách hiện dùng MARGIN ở cả 2 phía (margin-bottom * của .container trong solutions, margin-top của section .partner) — margin * giữa 2 anchor kề nhau CÓ THỂ bị collapse (lấy giá trị lớn hơn thay vì cộng), * và codebase này từng ghi nhận trực tiếp có trường hợp margin không cộng * được như kỳ vọng do cascade (xem comment FIX 4 trong mục CTT phía trên) -> * cần đo thực tế bằng DevTools trước khi sửa, không suy diễn từ số class. * - partner -> simplesys: simplesys cố ý kéo âm (md:mt-[-8.75rem]) để nền xám * tràn lên phía sau card xanh của partner (thấy rõ ở .container bên trong có * md:pt-[calc(8.75rem)] triệt tiêu đúng bằng margin âm đó để giữ nguyên vị trí * nội dung) — đây là chồng lấn nền CÓ CHỦ ĐÍCH, không phải khoảng cách phẳng * thông thường, cần chụp ảnh/đo trực tiếp để biết khoảng "nhìn thấy" thực tế. * - botcta -> footer: footer kéo âm rất lớn (mt -17rem mobile, -36rem md, -32rem * xl/3xl) đè lên canvas gradient trong-luồng của botcta (xem ghi chú FIX 1) — * y hệt dạng "vùng chồng lấn cố ý" đã gặp ở CTT/SmartPOS/Crossborder, cần đo * trực tiếp khoảng cách tới mép canvas/footer thật. * - TOÀN BỘ trang ở <768px (mobile) — trang này chưa có rule nào trong * mobile-section-spacing.css, cần rà riêng ở pass sau. */ /* ===================== TRANG TOPUP (body.page-template-page-topup) ===================== * Section order: banner -> solutions (Giải pháp, y hệt cấu trúc dvbanmathe) -> * partner (nền XÁM #F6F8FC ngay trên
, chiều cao CỐ ĐỊNH qua h-[...], * luôn hiện ở mọi kích thước — KHÁC dvbanmathe: ở đó partner chỉ có card xanh * nổi trên nền trắng, còn ở đây cả section partner là 1 khối nền xám) -> * simplesys (KHÔNG có class bg -> trong suốt/trắng) -> botcta (dùng chung * .bottom-cta, canvas trong-luồng y hệt dvbanmathe/crossborder) -> footer (kéo * âm lớn, chồng lên botcta theo chủ đích). * Trang này CHƯA được đụng tới lần nào trước đây. Vì partner ở đây có NỀN XÁM * thật (không giống dvbanmathe), có 2 ranh giới đổi màu cần áp dụng 40+40: * solutions(trắng)->partner(xám) và partner(xám)->simplesys(trắng) — khác với * dvbanmathe. Pass này CHỈ xử lý ≥768px; mobile (<768px) CHƯA được rà. * ========================================================================== */ /* FIX 1 — banner -> solutions (mượn số đã chốt ở dvbanmathe: 120px) * Banner ở đây gần như GIỐNG HỆT banner dvbanmathe (cùng canvas skew, cùng * mb-[25rem]/md:mb-0/xl:mb-0, cùng chiều cao 850px ở xl — chỉ khác chiều cao * md: 600px ở đây so với 525px bên dvbanmathe). Do cấu trúc gần như giống hệt, * tạm dùng LẠI đúng số 120px Dilo đã tự đo/chốt bằng mắt bên dvbanmathe làm giá * trị khởi điểm — NHƯNG đây là banner riêng, chiều cao md khác nên CẦN Dilo * ngắm lại trực tiếp ở trang topup (đặc biệt dải md 768-1279px, nơi 2 banner * lệch nhau 75px chiều cao) trước khi chốt, không mặc định đúng 100%. */ @media (min-width: 1280px) { body.page-template-page-topup .solutions > .container { margin-top: 120px !important; } } /* FIX 2 — partner -> simplesys (xám #F6F8FC -> trắng, ÁP DỤNG 40+40) * partner có chiều cao CỐ ĐỊNH (h-[92px]/md:h-[280px]/xl:h-[280px]) và margin-bottom * = 0 xuyên suốt (không đổi theo breakpoint) -> gap phía dưới hoàn toàn phụ thuộc * simplesys. simplesys không có bg/margin ở
, chỉ có PADDING-TOP trên * .container con (py-[2.5rem]=40px base, md:py-[63px]=63px ≥768px, không đổi tiếp * ở xl/3xl/6xl) — đây là PADDING nên không lo bị collapse, tính được thẳng. * Hiện tại: gap = 0 (partner mb) + 63 (simplesys pt) = 63px mọi kích thước ≥768px, * thiếu 17px so với 80px VÀ lệch hẳn khỏi tỉ lệ 40/40 (dồn hết về 1 phía). * Ép: partner mb = 40px, simplesys container pt = 40px, cố định ≥768px. */ @media (min-width: 768px) { body.page-template-page-topup .topup-partner { margin-bottom: 40px !important; } body.page-template-page-topup .topup-simplesys > .container { padding-top: 40px !important; } } /* FIX 3 — simplesys -> botcta (trắng -> trắng, cùng cách làm FIX 1 của dvbanmathe) * simplesys pb (container, padding, không lo collapse): md:pb-[30px]=30px, không * đổi tiếp ở xl/3xl/6xl (không có override riêng). botcta pt = section (luôn 0, * kể cả bản gốc "xl:pt-[0]" cũng là 0) + container (32px base/md qua pt-8, 0 ở xl * qua xl:pt-0). Hiện tại: gap = 30+32=62px (md), 30+0=30px (xl+) — đều thiếu so * với 80px. Ép cố định mỗi bên 40px, xuyên suốt ≥768px, cùng cách dvbanmathe. */ @media (min-width: 768px) { body.page-template-page-topup .topup-simplesys > .container { padding-bottom: 40px !important; } body.page-template-page-topup .bottom-cta { padding-top: 40px !important; } body.page-template-page-topup .bottom-cta > .container { padding-top: 0 !important; } } /* CHƯA FIX (trang topup) — cần bro đo trực tiếp, KHÔNG áng chừng: * - solutions -> partner: giống hệt vấn đề đã gặp ở dvbanmathe — khoảng cách * nằm ở MARGIN cả 2 phía (margin-bottom của .container trong solutions, * margin-top của .topup-partner), có nguy cơ bị margin-collapse (lấy giá trị * lớn hơn thay vì cộng) thay vì cộng dồn như padding — cần đo thực tế bằng * DevTools trước khi sửa, không suy diễn từ số class. Đây CŨNG là ranh giới * đổi màu (trắng->xám) nên khi đo xong cần ép về đúng 40+40, không chỉ đủ * tổng 80px. * - botcta -> footer: footer kéo âm lớn (mt -17rem mobile, -36rem md, -32rem * xl/3xl) đè lên canvas trong-luồng của botcta — chồng lấn cố ý, y hệt các * trang khác, cần đo trực tiếp. * - banner -> solutions ở dải <1280px: chưa đo (xem ghi chú FIX 1). * - TOÀN BỘ trang ở <768px (mobile) — chưa có rule nào, cần rà riêng. */ /* ===================== TRANG CHARGING (body.page-template-page-charging) ===================== * Section order: banner -> solutions (trắng) -> khothe (xám #F6F8FC) -> games * (trắng) -> uudai (xám #F6F8FC) -> botcta (trắng) -> footer. * Trang này đổi màu LIÊN TỤC (trắng-xám-trắng-xám-trắng) nên có tới 3 ranh giới * cần áp dụng đúng 40+40: solutions->khothe, khothe->games, games->uudai, * uudai->botcta (4 ranh giới đổi màu, KHÔNG phải 3 — đếm lại đủ 4). * Khác với các trang trước, 3 trong 4 chỗ này (khothe->games, games->uudai, * uudai->botcta) TỪNG có sẵn override rải rác trong chính file section — nhưng * gần hết bị THIẾU @media (áp dụng nhầm cả mobile, y hệt lỗi gặp ở crossborder) * và số liệu không khớp 40+40 — đã dọn hết các rule cũ đó trong index.mvs.php * của khothe/games/botcta, gom về đây cho dễ theo dõi 1 chỗ. * ========================================================================== */ /* FIX -1 — chân dải màu gradient -> nội dung .solutions = 80px (2026-09-08) * Vị trí CHÂN DẢI đã được làm cho tất định ở charging/banner/index.mvs.php: * #banner chuyển sang position:relative, canvas neo bằng top theo đỉnh banner, * và CHIỀU CAO BANNER = top + cao canvas + 10.6278vw nên MÉP DƯỚI BANNER luôn * trùng chân dải ở mọi bề rộng. Vì vậy ở đây chỉ cần một margin-top 80px. * margin-top của .container collapse xuyên qua .solutions (section không có * padding/border-top) nên nó thành đúng khoảng hở 80px giữa 2 hộp. * Đo trước khi sửa (chân dải -> nội dung solutions): * 393:80 768:197 1024:59 1280:103 1512:78 1920:35 2560:-33 (âm = ĐÈ) */ body.page-template-page-charging .solutions > .container { margin-top: 80px !important; } /* FIX 0 — solutions -> khothe (trắng -> xám, ÁP DỤNG 40+40) * Ban đầu tưởng phía solutions dính rủi ro margin-collapse (giống trường hợp * dvbanmathe/topup) nên chỉ fix phần pt của khothe. Nhưng kiểm tra lại kỹ hơn: * .section-khothe KHÔNG có margin-top riêng (chỉ có bg-[#F6F8FC], không có * class mt-...) -> margin-bottom của .container bên trong solutions KHÔNG có * margin nào ở phía khothe để "collapse" cùng -> nó hiển thị NGUYÊN XI ra ngoài * (không bị rút gọn), nên tính trực tiếp được, không cần đo trực tiếp nữa. * Giá trị hiện tại: margin-bottom = 40px (base) / 72px (từ lg:my-[4.5rem], * KHÔNG có override riêng ở xl nên giữ nguyên 72px luôn tới 6xl) — sai cả ở * dải lg-6xl (72, dư so với 40) VÀ tổng với khothe's pt=40 (đã fix ở dưới) * ra 112px thay vì 80px. Ép cố định 40px xuyên suốt ≥768px. */ /* margin-bottom 28px chứ không phải 40: giữa đáy nội dung thật (thẻ

cuối * của solutions-item) và đáy .container còn 12px khoảng trong (line-height của * dòng cuối). 12 + 28 = 40px tính từ NỘI DUNG, đúng quy tắc. Đo lại 2026-09-08: * rule 40px cũ cho ra 12 + 40 + 40 = 92px thay vì 80px, ở MỌI bề rộng. * Bỏ @media để mobile (cũng đang 92px) được áp cùng giá trị — trang charging * KHÔNG nằm trong assets/css/mobile-section-spacing.css nên mobile dùng chung * chuẩn 80px như desktop. */ body.page-template-page-charging .solutions > .container { margin-bottom: 28px !important; } @media (min-width: 768px) { body.page-template-page-charging .section-khothe > .container { padding-top: 40px !important; } } /* FIX 1 — khothe -> games (xám -> trắng) * khothe container: py-[2.5rem]/xl:py-[79px] (pt riêng, không bị đụng bởi rule * cũ) + pb-[28px]/xl:pb-[120px] (pb, rule cũ ép thẳng 10px mọi kích thước). * games container: py-10/xl:py-[120px] (rule cũ ép pt=80/pb=10 mọi kích thước). * Ép lại cả 2 phía cố định 40px, xuyên suốt ≥768px. */ @media (min-width: 768px) { body.page-template-page-charging .section-khothe > .container { padding-bottom: 40px !important; } body.page-template-page-charging .charging-games > .container { padding-top: 40px !important; } } /* FIX 2 — games -> uudai (trắng -> xám) * games container pb: rule cũ ép 10px mọi kích thước (xem FIX 1). uudai * container: py-10/xl:py-[4.5rem] (pt riêng, CHƯA từng có override). Ép cả 2 * phía cố định 40px, xuyên suốt ≥768px. */ @media (min-width: 768px) { body.page-template-page-charging .charging-games > .container { padding-bottom: 40px !important; } body.page-template-page-charging .section-uudai > .container { padding-top: 40px !important; } } /* FIX 3 — uudai -> botcta (xám -> trắng) * uudai container pb: py-10/xl:py-[4.5rem] (40px base/md, 72px xl+, CHƯA có * override riêng cho pb). botcta: section pt (rule cũ ép 80px CHỈ từ ≥1280px, * dải 768-1279px vẫn dùng pt-0 gốc = 0) CỘNG container pt (pt-8=32px base/md, * xl:pt-0=0 xl+). Tổng cũ: 40+32=72 (md, thiếu 8 — gần đúng nhưng SAI tỉ lệ), * 72+80=152 (xl, DƯ 72 — sai nặng cả 2 mặt). Ép lại: uudai pb=40 cố định; botcta * pt gộp về đúng 40 bằng cách set section pt=40 VÀ triệt tiêu hẳn pt của * container (0), xuyên suốt ≥768px — không cần cộng dồn 2 nguồn nữa. */ @media (min-width: 768px) { body.page-template-page-charging .section-uudai > .container { padding-bottom: 40px !important; } body.page-template-page-charging .bottom-cta { padding-top: 40px !important; } body.page-template-page-charging .bottom-cta > .container { padding-top: 0 !important; } } /* FIX 4 — MOBILE (<768px) trang charging (2026-09-08) * Trang này KHÔNG có trong assets/css/mobile-section-spacing.css nên mobile * chưa từng được chuẩn hoá; áp cùng chuẩn 80px như desktop. * Đo trước khi sửa ở 393px: * solutions->khothe 12 + 40 = 92 (đã xử lý bằng FIX 0, chung mọi bề rộng) * khothe->games 28 + 40 = 68 (khothe container pb-[28px]) * games->uudai 40 + 40 = 80 (đã đúng) * uudai->botcta 40 + 32 = 72 (botcta: section pt-0 + container pt-8) */ @media (max-width: 767px) { body.page-template-page-charging .section-khothe > .container { padding-top: 40px !important; padding-bottom: 40px !important; } body.page-template-page-charging .bottom-cta { padding-top: 40px !important; } body.page-template-page-charging .bottom-cta > .container { padding-top: 0 !important; } } /* CHƯA FIX (trang charging) — cần bro đo trực tiếp, KHÔNG áng chừng: * - (ĐÃ XONG 2026-09-08) banner -> solutions: xem FIX -1 ở trên. * - botcta -> footer: footer kéo âm lớn, chồng lấn cố ý, y hệt mọi trang khác. * - (ĐÃ XONG 2026-09-08) toàn bộ trang ở <768px — xem FIX 4. */ /* ===================== ARCHIVE THƯ VIỆN (body.post-type-archive-thuvien) ===== * Cấu trúc trang rất ngắn: banner-skew -> .compatible (ảnh top + khối tab * .tab1) -> botcta (chỉ còn canvas gradient trang trí, h2/p đều bị "hidden") * -> footer (kéo âm mt-[-34rem]/xl:mt-[-50rem] để hoà vào canvas — chồng lấn * CỐ Ý, giống mọi trang khác, KHÔNG đụng). * Vì vậy ranh giới nội dung thật duy nhất của trang là: * chân ảnh ở đầu .compatible -> đỉnh .tab1 * * Đo trước khi sửa (2026-09-08): * 393:40 768:40 1024:120 1280:120 1512:120 1920:120 2560:120 * Nguồn: .container.pin-compatible dùng my-[2.5rem] lg:my-[7.5rem] -> 40px * dưới 1024px và 120px từ 1024px trở lên. Không mốc nào đúng 80px. * * Chỉ ép margin-top; GIỮ NGUYÊN margin-bottom vì phần dưới .tab1 là vùng chồng * lấn âm với canvas + footer, đổi vào đó sẽ xê dịch bố cục trang trí đó. * (.pin-compatible ở trang này chỉ là tên class trùng, KHÔNG có GSAP pin nào * gắn vào — đã kiểm tra, khác với .pin-compatible của trang chi-ho.) */ body.post-type-archive-thuvien .compatible > .container.pin-compatible { margin-top: 80px !important; } /* ===================== TRANG CHI HO (body.page-template-page-chiho) ========== * Thứ tự section: banner -> solutions (trắng) -> gridavt (xám #F6F8FC) -> * options/.compatible2 (trắng) -> compatible (xám #F6F8FC) -> botcta (trắng) * -> footer (kéo âm, chồng lấn cố ý — KHÔNG đụng). * 4/5 ranh giới đều là ĐỔI MÀU NỀN nên áp quy tắc 40 + 40. * * Đo thật TRƯỚC khi sửa (đáy nội dung section trên -> đỉnh nội dung section dưới): * 393 768 1024 1280 1512 1512(vh1300) 2560 * banner -> solutions 139 173 -37 62 64 274 277 * solutions -> gridavt 116 116 180 92 92 92 92 * gridavt -> options 80 80 48 112 112 112 112 * options -> compatible 80 80 - 80 80 80 80 * compatible -> botcta 104 - - 80 80 80 80 * (-37 = dải màu ĐÈ LÊN chữ section lợi ích; 274/277 = cửa sổ cao làm banner * phình theo vh — xem chiho/banner/index.mvs.php) * * Trang này KHÔNG có trong assets/css/mobile-section-spacing.css nên mobile * dùng chung chuẩn 80px như desktop (giống vidientumo/thuho/viappota). * ========================================================================== */ /* FIX 1 — banner -> solutions = 80px. * Chân dải màu đã được neo trùng mép dưới banner và min-height banner đã bỏ vh * (xem chiho/banner/index.mvs.php), nên chỉ cần MỘT padding-top ở đây. * Phải zero margin-top của .container: class my-[4rem] lg:my-[8rem] cộng thêm * 64px (mobile) / 128px (>=1024) lên trên padding của section -> chính là lý do * khoảng cách vọt lên 139/173/208px ở các dải nhỏ. */ body.page-template-page-chiho .solutions { padding-top: 80px !important; } body.page-template-page-chiho .solutions > .container { margin-top: 0 !important; } /* FIX 2 — solutions (trắng) -> gridavt (xám): 40 + 40. * margin-bottom 28px chứ không phải 40: giữa đáy nội dung thật và đáy * .container còn 12px khoảng trong (line-height dòng cuối của card), 12 + 28 = * 40px tính từ NỘI DUNG. Phía xám đã sẵn 40px (padding-top của .container * trong gridavt). */ body.page-template-page-chiho .solutions > .container { margin-bottom: 28px !important; } /* FIX 3 — gridavt (xám) -> options (trắng): 40 + 40. * Phía xám đang 80px = 40px (pb-8 -> đã nâng thành padding của * .gridavt-readmore) + 40px (padding-bottom của section) — CỘNG DỒN 2 nguồn. * Giữ 40px ở

, zero hoá ở khối con. */ body.page-template-page-chiho .chiho-gridavt { padding-bottom: 40px !important; } body.page-template-page-chiho .chiho-gridavt .gridavt-readmore { padding-bottom: 0 !important; } body.page-template-page-chiho .chiho-gridavt > .container { padding-top: 40px !important; padding-bottom: 0 !important; } /* FIX 4 — options (trắng) -> compatible (xám) -> botcta (trắng): 40 + 40. * QUY ƯỚC Ở TRANG NÀY: khoảng cách do .container BÊN TRONG quyết định, không * phải
— vì các rule 40px sẵn có đã nằm trong chính file section * (options/index.mvs.php, compatible/index.mvs.php) và chúng là