/**
 * Theme Name: Logistix Child
 * Template: logistix
 * Version: 4.9.28
 * Requires at least: 7.1
 * Requires PHP: 8.1
 * Description: Responsive Transportation WordPress Theme — Sải Cánh Express (Untitled UI redesign)
 * Author: Ninzio
 *
 * Nhật ký phiên bản (xem đầy đủ trong CHANGELOG.txt cùng thư mục theme):
 *   4.9.28 (12/10/2026) — MỚI: Page Template "SCE - Trang Quốc gia" dùng
 *     chung cho 30+ trang gửi hàng theo quốc gia (page-country.php +
 *     inc/meta-box-country-sce.php + inc/schema-country-sce.php), chuẩn
 *     SEO/GEO/AEO/EEAT — xem CHANGELOG.txt để biết cách áp dụng.
 *   4.9.27 (12/10/2026) — Chặn khoảng trắng ~3 giây giữa Header và nội
 *     dung TRÊN LANDING PAGE/Trang (header-style-1/2/3) — rule v4.9.7
 *     trước đó chỉ che được div đệm sinh ra bởi headerFixed() khi anchor
 *     là "#site-header" (đúng cho bài viết, header-style-4), chưa che
 *     trường hợp anchor là "#site-header-wrap" (landing page). Thêm 1
 *     rule CSS song song, cùng pattern an toàn đã kiểm chứng.
 *   4.9.26 (11/10/2026) — (1) Gỡ hẳn module SCE_Meta_Injector khỏi plugin
 *     sce-core (sang bản sce-core-v1.0.2.zip riêng) để hết hiện "Cập nhật"
 *     2 lần trong hàng meta — theme (entry-content-meta.php) vốn đã render
 *     đúng dòng này, module plugin kia chỉ là lỗi chưa gỡ từ v4.9.3. (2)
 *     GỘP thẻ EEAT gọn đầu bài (templates/entry-content-eeat.php — đã XOÁ
 *     file) vào hộp "Về tác giả" cuối bài (templates/entry-content-author.
 *     php) — không còn 2 khối trùng ý trên 1 trang, theo phản hồi "EEAT
 *     đang thừa. nêm gộp vào phần Về tác giả ở cuối content".
 *   4.9.25 (11/10/2026) — REVERT khối CTA cuối bài về nguyên bản gradient
 *     v4.9.18 (".sce-post-cta"), theo yêu cầu "Để lại CTA như lúc trước"
 *     — xoá hẳn thẻ trắng "Liên hệ gửi hàng" (".sce-trust-cta") của
 *     v4.9.20. Không đụng khối EEAT đầu bài/Chia sẻ/form báo giá nhanh.
 *   4.9.24 (11/10/2026) — Thêm nút Twitter/X + LinkedIn vào khối "Chia sẻ
 *     bài viết" cuối bài (templates/entry-content-share.php), theo đúng
 *     URL share công khai chính thức của từng mạng, không cần API key.
 *     Thêm icon "linkedin" mới vào sprite. KHÔNG thêm Messenger đợt này
 *     (cần Facebook App ID mới hoạt động đủ trên desktop — đã hỏi lại
 *     người dùng, chọn bỏ qua để tránh trải nghiệm không đồng nhất).
 *   4.9.6 (11/10/2026) — Sửa TẬN GỐC lỗi icon/chữ dính nhau trong hàng
 *     meta (rule theme cha đặc thù hơn âm thầm thắng, "gap" chưa từng
 *     có tác dụng) + xoá 2 đường kẻ chấm thừa của theme cha phía trên/
 *     dưới hàng meta bài đơn — xem CHANGELOG.txt.
 *   4.9.5 (10/10/2026) — Tăng khoảng cách icon-chữ trong hàng meta (6px
 *     → 8px, icon sprite gần như kín khung nên gap cũ nhìn quá sít) —
 *     xem CHANGELOG.txt.
 *   4.9.4 (10/10/2026) — Hàng meta trang bài đơn (ngày/tác giả/lượt xem/
 *     phút đọc/cập nhật) tách thành 2 dòng rõ ràng (chính + phụ) thay vì
 *     1 hàng phẳng dễ vỡ dòng so le trên mobile khi đủ 5 mục — xem
 *     CHANGELOG.txt.
 *   4.9.3 (09/10/2026) — Thêm "Cập nhật: ngày" render SẴN bằng PHP vào
 *     hàng meta bài viết (chỉ hiện khi bài THẬT SỰ đã sửa sau khi đăng) —
 *     thay cho cách cũ do plugin sce-core tự chèn bằng JavaScript ở
 *     footer trang (xem 4.9.2). CẦN tắt module SCE_Meta_Injector của
 *     plugin đó để tránh hiện trùng 2 lần — xem CHANGELOG.txt.
 *   4.9.2 (09/10/2026) — Chuẩn hoá hàng meta bài viết khi có plugin/
 *     snippet khác (ngoài theme) tự chèn thêm "Cập nhật: ngày" + dấu
 *     "|" lẻ vào đúng hàng meta — ẩn dấu "|" thô, vẽ lại dấu "·" nhất
 *     quán, canh đúng cỡ chữ/baseline như các mục khác, hết vỡ dòng
 *     xấu trên di động. Xem CHANGELOG.txt.
 *   4.9.1 (09/10/2026) — Mục lục tự động (TOC) ở bài rất dài (vd 41
 *     mục) từng "chiếm diện tích", tự mở sẵn kéo dài gần kín màn hình.
 *     Sửa: chỉ tự mở sẵn khi mục lục ngắn (≤10 mục); danh sách khi mở
 *     (dù bài dài bao nhiêu) giờ giới hạn cao ~420px + tự cuộn riêng.
 *     Xem CHANGELOG.txt.
 *   4.9.0 (02/10/2026) — Thiết kế lại giao diện bài viết (post) chuẩn
 *     SEO/Responsive: bỏ sidebar hẹp (~266px), chuyển sang 1 cột đọc
 *     rộng 760px (đúng mẫu GHDNN Express); thêm nút Chia sẻ + CTA cuối
 *     bài; sửa lỗi "Bài viết liên quan" lọc sai chuyên mục. Trang (Page)
 *     không đổi, vẫn giữ sidebar. Xem CHANGELOG.txt.
 *   4.8.5 (01/10/2026) — Bỏ "thẻ đọc" (nền/viền/bóng riêng) khỏi khung
 *     nội dung bài viết/Trang — nội dung nay hoà thẳng vào nền trang,
 *     đúng chuẩn hiện đại (đối chiếu trang mẫu GHDNN Express). Đồng
 *     thời sửa lề 2 bên trên mobile từ % (quá rộng, cộng dồn với
 *     padding thẻ cũ) sang gutter cố định 24px/32px kiểu Untitled UI —
 *     cột chữ rộng hơn hẳn trên di động. Xem CHANGELOG.txt.
 *   4.8.4 (01/10/2026) — Sửa chữ bị nhạt/mờ trong khối List (bài viết/
 *     Trang): list dùng nhầm token màu phụ "--sce-ink-soft" thay vì
 *     "--sce-ink" như đoạn văn thường — đã đo bằng Playwright xác nhận
 *     2 màu khác nhau trong cùng 1 bài, nay đồng nhất. Xem CHANGELOG.txt.
 *   4.8.3 (01/10/2026) — Sửa lỗi "pill" không hiện/không bo tròn khi
 *     cuộn: pseudo-element bị rule clearfix có sẵn của theme cha
 *     (class "logistix-container") ép "display:table", co rút gần
 *     như về 0 — thêm "display:block" để sửa tận gốc; đồng thời thêm
 *     khoảng hở nhỏ phía trên khi header dính để lộ rõ góc bo tròn,
 *     đúng mẫu tham khảo. Xem CHANGELOG.txt.
 *   4.8.2 (01/10/2026) — Sửa lỗi Header trong suốt sai cách theo phản
 *     hồi thực tế: nền header nay LUÔN hiện diện (hoà màu nền trang,
 *     không xuyên thấu), hiệu ứng "pill" khi cuộn nay chạy bằng JS
 *     cuộn riêng (không còn phụ thuộc tuỳ chọn "Header Fixed" ẩn của
 *     theme cha). Xem CHANGELOG.txt.
 *   4.8.1 (01/10/2026) — Khớp lại TOÀN BỘ bảng màu (nền/chữ/viền/bo góc/
 *     đổ bóng + đỏ thương hiệu) theo đúng mẫu tham khảo "GHDNN Express"
 *     — cả chế độ sáng lẫn tối, đã kiểm tra tương phản WCAG trước khi
 *     đổi. Xem CHANGELOG.txt.
 *   4.8.0 (01/10/2026) — Thiết kế lại Header theo mẫu tham khảo "GHDNN
 *     Express" (guihangdinuocngoai.vn): header trong suốt lúc đầu
 *     trang, nổi thành "pill" có khung/bóng/bo góc khi cuộn; menu mobile
 *     đổi hẳn sang drawer trượt từ phải (icon từng mục, có backdrop mờ
 *     nền, khoá cuộn trang) thay cho menu xổ xuống cũ; gạch chân đỏ
 *     trượt vào khi hover menu desktop. Xem CHANGELOG.txt.
 *   4.7.6 (01/10/2026) — Khối nội dung trang BÀI VIẾT (post) ở chế độ
 *     sáng có viền/bo góc/đổ bóng như 1 thẻ nổi, giống trang Page đã
 *     có từ 4.6.0 — sửa cảm giác "nền nội dung khác nền web" do 2 token
 *     màu #FFFFFF/#F7F7F8 trước đây không có viền phân tách rõ. Xem
 *     CHANGELOG.txt.
 *   4.7.5 (01/10/2026) — Tinh chỉnh "thị sai" khoảng cách icon↔chữ ở
 *     hàng meta (bài nổi bật + thẻ lưới/bài đơn) — icon đồng hồ/người
 *     nudge 1px để trông đều nhau hơn dù số đo CSS gốc đã đúng. Xem
 *     CHANGELOG.txt.
 *   4.7.4 (01/10/2026) — Toàn bộ icon nét (sprite "Untitled UI") đổi
 *     màu mặc định sang đỏ thương hiệu thay vì xám/đen nhạt ăn theo màu
 *     chữ như trước — áp dụng site-wide. 2 ngoại lệ có chủ ý: icon mạng
 *     xã hội footer (giữ trắng cho tương phản nền tối) và icon nút
 *     chuyển Lưới/Danh sách (màu đỏ ở đó là tín hiệu "đang chọn", không
 *     đổi mặc định để tránh mất phân biệt trạng thái). Xem CHANGELOG.txt.
 *   4.7.3 (01/10/2026) — Hàng meta của thẻ lưới Blog (ngày/tác giả/lượt
 *     xem/phút đọc) rút gọn nhãn, khớp đúng quy ước "icon + giá trị"
 *     của khối bài nổi bật — hết cảnh mỗi mục rớt xuống 1 dòng riêng
 *     trong thẻ 3 cột hẹp. Xem chi tiết CHANGELOG.txt.
 *   4.7.2 (01/10/2026) — Dải pill lọc chuyên mục trên trang Blog chỉ
 *     còn hiện 20 chuyên mục có NHIỀU BÀI VIẾT NHẤT (trước đây hiện cả
 *     trăm chuyên mục gần như không có bài). Xem chi tiết CHANGELOG.txt.
 *   4.7.1 (01/10/2026) — SỬA LỖI QUAN TRỌNG: toàn bộ tính năng "Blog
 *     Grid v2" (tìm kiếm, dải pill, bài nổi bật, Lưới/Danh sách) của
 *     bản 4.7.0 nằm sai file (templates/page-blog-grid.php) — "/blog"
 *     thật trên site là 1 CHUYÊN MỤC ("Blog"), hiển thị qua index.php,
 *     không phải Trang dùng mẫu đó, nên bản 4.7.0 KHÔNG hiển thị gì
 *     trên site live dù đã cài đúng. Đã chuyển toàn bộ tính năng sang
 *     index.php (nhánh is_category('Blog')). Xem chi tiết CHANGELOG.txt.
 *   4.7.0 (30/09/2026) — Dựng lại toàn bộ Trang "Blog Grid" theo mẫu
 *     tham chiếu (theme "GHDNN Express" người dùng gửi): thêm ô tìm
 *     kiếm + nút chuyển Lưới/Danh sách, dải pill lọc chuyên mục (dữ
 *     liệu thật từ get_categories()), khung bài nổi bật đầu trang, tối
 *     đa 2 badge chuyên mục/thẻ, hiện lượt xem thật ở lưới (đọc thẳng,
 *     không tăng số đếm). Xem chi tiết trong CHANGELOG.txt.
 *   4.6.1 (30/09/2026) — Thêm khai báo "Requires at least" (WordPress
 *     7.1) và "Requires PHP" (8.1) vào header — trước đây bỏ trống nên
 *     màn hình cập nhật giao diện hiện "-" ở 2 dòng này (không phải
 *     lỗi, chỉ là thiếu khai báo). Số liệu lấy đúng từ Công cụ → Sức
 *     khỏe trang của site thật (WordPress 7.1.2, PHP 8.1, ảnh chụp
 *     30/09/2026) — không tự đoán số thấp hơn để "cho chắc tương
 *     thích ngược" vì chưa kiểm thử trên bản PHP/WordPress cũ hơn.
 *   4.6.0 (30/09/2026) — Thiết kế lại toàn bộ Trang (Page) mặc định
 *     theo chuẩn Untitled UI: khối breadcrumb + H1 giờ là "band" thẻ
 *     trắng bo góc/đổ bóng riêng; nội dung WPBakery được bọc trong thẻ
 *     "card" sáng (trước đây chỉ có ở dark mode); nút .vc_btn3 bo tròn
 *     pill + hiệu ứng hover nổi khối (không đổi màu gốc); form (input/
 *     textarea/select/nút gửi) được style đồng bộ theo design token
 *     toàn site. Chỉ áp dụng cho page.php (Trang mặc định) — không đụng
 *     pagelanding.php/pagesimple.php/bài viết. Xem chi tiết trong
 *     CHANGELOG.txt.
 *   4.5.5 (30/09/2026) — Bỏ mục lục tự động khỏi Trang (Page, ví dụ
 *     "Liên hệ") theo yêu cầu — page.php đổi sang the_content() thẳng
 *     thay vì sce_the_content_with_toc(). Bài viết đơn không đổi, vẫn
 *     có mục lục như trước. Xem chi tiết trong CHANGELOG.txt.
 *   4.5.4 (30/09/2026) — Sửa tittle 3 cột footer (Dịch vụ/Công ty/Hỗ
 *     trợ/Chi nhánh) chữ tối chìm vào nền tối — rule Typography chung
 *     "h1..h6{color:var(--sce-ink) !important}" đè mất màu trắng do
 *     thiếu !important. Xem chi tiết trong CHANGELOG.txt.
 *   4.5.3 (30/09/2026) — Sửa icon mạng xã hội footer xếp dọc thay vì
 *     ngang (ảnh chụp thực tế mobile) — widget Socials gốc lồng
 *     ".socials > .icon > a", CSS float ngang gốc chỉ chạy trong
 *     "#sidebar"/"#footer-widgets" (không còn trong cấu trúc footer
 *     mới) — đã ghi đè ".sce-footer-social .socials/.icon" dùng flex.
 *     Xem chi tiết trong CHANGELOG.txt.
 *   4.5.2 (30/09/2026) — Sửa logo footer không bao giờ hiện được: code
 *     cũ dùng has_custom_logo()/the_custom_logo() (API "Custom Logo" lõi
 *     WordPress) nhưng theme Logistix không đăng ký add_theme_support(
 *     'custom-logo') — tự có cơ chế logo riêng qua Customizer "Header →
 *     Logo" (logistix_get_mod('custom_logo')). Đổi footer đọc đúng field
 *     đó, y hệt header. Xem chi tiết trong CHANGELOG.txt.
 *   4.5.1 (30/09/2026) — Sửa cỡ ảnh sai trên trang chuyên mục/thẻ thật
 *     (category/tag archive qua index.php): templates/entry-content-
 *     media.php gốc chỉ chọn cỡ ảnh đã crop cho lưới ("logistix-post-
 *     grid", 480x357) khi is_page_template('page-blog-grid.php') đúng
 *     — không đúng nữa từ khi v4.5.0 thêm ".blog-grid" vào CẢ index.php
 *     (category/tag/author/date archive). Đã thêm child override mở
 *     rộng điều kiện — xem chi tiết trong CHANGELOG.txt và trong chính
 *     file templates/entry-content-media.php.
 *   4.5.0 (30/09/2026) — Thiết kế lại "Blog Grid"/trang danh mục theo
 *     Untitled UI + chuẩn SEO/GEO/AEO/EEAT, áp dụng ĐỒNG NHẤT cho toàn
 *     bộ web (trang "/blog" lẫn mọi trang danh mục/thẻ — cùng dùng
 *     chung 1 bộ class HTML nên sửa 1 lần, áp dụng khắp nơi). Đổi lưới
 *     float 3 cột kiểu Bootstrap cũ + nền xám phẳng + tiêu đề 1 dòng bị
 *     cắt cụt + nút "Xem thêm" khối xám đặc sang: CSS Grid responsive
 *     (3→2→1 cột), card viền+bo góc+đổ bóng tự đổi tối/sáng theo token,
 *     tiêu đề cho phép 2 dòng, badge chuyên mục (internal link thật),
 *     hiện lại tác giả + thêm "X phút đọc" (EEAT), nút "Đọc thêm" dạng
 *     text-link + icon mũi tên, phân trang pill tròn theo token. Thêm
 *     H1 + breadcrumb THẬT cho mọi trang danh mục/Blog (trước đây hoàn
 *     toàn không có H1 nào — lỗ hổng SEO cơ bản). Xem chi tiết trong
 *     CHANGELOG.txt.
 *   4.4.0 (30/09/2026) — ĐỔI QUYẾT ĐỊNH: khối nội dung bài viết/Trang
 *     (".post-content"/".page-content") KHÔNG còn ép sáng cố định ở chế
 *     độ tối nữa — theo yêu cầu trực tiếp của người dùng sau khi xem
 *     thực tế site live ("chữ đang mặc định, không thay đổi nhiều màu
 *     chữ. Cứ đổi nền như các khung ngoài content đồng nhất giao diện
 *     giúp tôi"). Bỏ khối override từng ép cứng token sáng (bản
 *     3.7.1-4.3.3) — nay khối này KẾ THỪA TỰ NHIÊN đúng token tối đã
 *     định nghĩa trên "#main-content" (không cần viết CSS riêng để bật
 *     tối, đúng cơ chế CSS custom property — giống mọi khu vực khác
 *     trong "#main-content"). Vẫn giữ style "thẻ đọc" (viền + bo góc
 *     24px + đổ bóng) ở chế độ tối để trông như 1 panel nổi có chủ đích
 *     (đồng bộ với các card khác trong site như ".sce-toc"), chỉ đổi từ
 *     màu cứng sang token "--sce-line"/"--sce-shadow-md" cho nhất quán.
 *     RỦI RO CÒN LẠI ĐÃ BÁO NGƯỜI DÙNG: 1 số đoạn trong ~180 bài viết cũ
 *     có thể có màu CHỮ gắn cứng (không kèm màu nền riêng, ví dụ dán từ
 *     Word) sẽ không tự đổi theo token được — khuyến nghị rà nhanh vài
 *     bài cũ sau khi cập nhật. Xem chi tiết trong CHANGELOG.txt.
 *   4.3.3 (30/09/2026) — Tăng độ "chủ đích" của khối "thẻ đọc" (nội dung
 *     bài viết/Trang, luôn ép sáng cố định — xem bản 3.7.2/3.7.3) khi
 *     site ở chế độ tối, theo phản hồi ảnh chụp thực tế: bo góc 16px →
 *     24px (token mới "--sce-r-xl"), bóng đổ 2 lớp → 3 lớp để "nổi
 *     khối" rõ hơn, thêm viền mảnh 1px trắng mờ để có đường viền rõ
 *     ngay cả khi bóng chưa kịp nổi bật — không còn dễ nhầm là khối
 *     trắng phẳng/lỗi. ĐÃ KIỂM CHỨNG TRỰC TIẾP TRÊN SERVER LIVE (fetch
 *     thẳng style.css đang chạy thật tại saicanhexpress.com) rằng bản
 *     "thẻ đọc" trước đó (bo góc + đổ bóng, bản 3.7.3) ĐÃ có mặt đúng
 *     trong bản 4.3.2 đang kích hoạt — nếu ảnh chụp vẫn thấy khối
 *     trắng phẳng, nhiều khả năng do cache WP Rocket (cùng kiểu lỗi đã
 *     gặp với Trang chủ trước đó) hoặc site đang ở chế độ SÁNG lúc chụp
 *     (đúng thiết kế, không phải lỗi). KHÔNG đổi màu nền khối nội dung
 *     (vẫn ép sáng cố định như cũ, đúng yêu cầu an toàn ~180 bài viết
 *     cũ). Xem chi tiết trong CHANGELOG.txt.
 *   4.3.2 (30/09/2026) — Sửa lỗi Trang chủ (Front Page) bị "dính" luôn
 *     breadcrumb + H1 "Trang chủ" + mục lục tự động — phát hiện qua
 *     ảnh chụp thực tế trang chủ, các khối này chèn ngay trước hero
 *     WPBakery của trang chủ, hoàn toàn không phù hợp. Nguyên nhân:
 *     page.php dùng chung cho MỌI Trang "Mẫu mặc định", kể cả Trang
 *     được gán làm Trang chủ tĩnh — các phần breadcrumb/H1/mục lục
 *     thêm ở bản 30/09/2026 trước chỉ hợp lý cho Trang nội dung thường
 *     (Điều khoản, Giới thiệu...), không hợp lý cho Trang chủ tự thiết
 *     kế riêng. Sửa: page.php (php) kiểm tra is_front_page() — nếu
 *     đúng là Trang chủ, dùng thẳng the_content() y hệt hành vi gốc
 *     của theme cha (không breadcrumb, không H1, không mục lục vì
 *     sce_the_content_with_toc() không được gọi ở nhánh này); các
 *     Trang khác không đổi gì, vẫn đủ breadcrumb/H1/mục lục như bản
 *     4.3.1. Xem chi tiết trong CHANGELOG.txt.
 *   4.3.1 (30/09/2026) — Sửa lỗi breadcrumb + tiêu đề H1 của Trang
 *     (page.php) dính sát mép trái màn hình, lệch hẳn so với nội dung
 *     WPBakery bên dưới (phát hiện qua ảnh chụp thực tế trang "Điều
 *     khoản sử dụng" sau khi tắt sidebar). Nguyên nhân: page.php gốc
 *     của theme cha KHÔNG bọc "#content-wrap" trong ".logistix-
 *     container" như single.php (bài viết) — khoảng canh giữa Trang
 *     thường vốn đến từ chính khối ".container" nội bộ của từng
 *     [vc_row] WPBakery, không phải từ theme; breadcrumb/H1 do theme
 *     con tự thêm không nằm trong vc_row nào nên không có padding.
 *     Sửa: bọc riêng breadcrumb+H1 trong ".logistix-container" (class
 *     có sẵn, đúng class single.php dùng, không tự nghĩ class mới) —
 *     cố tình KHÔNG bọc cả "#content-wrap"/".page-content" để không
 *     ảnh hưởng các Trang khác đang cố ý dùng WPBakery "stretch row"
 *     tràn viền. Xem chi tiết trong CHANGELOG.txt.
 *   4.3.0 (30/09/2026) — Thiết kế lại Mục lục nội dung theo phản hồi
 *     thực tế: (1) VỊ TRÍ — mục lục trước đây in ngay dưới tiêu đề/
 *     meta (do sce_the_content_with_toc() in mục lục trước khi in bất
 *     kỳ nội dung nào), cảm giác không chuyên nghiệp; nay
 *     sce_build_toc_and_ids() tách riêng phần mở đầu (mọi phần tử cấp
 *     ngoài cùng đứng trước heading đầu tiên — ảnh/đoạn dẫn nhập...),
 *     in phần mở đầu TRƯỚC, mục lục in SAU — đúng pattern các trang
 *     blog SEO chuyên nghiệp hay dùng. An toàn: nếu bài không có phần
 *     mở đầu tách được (VD toàn bộ nội dung nằm trong 1 khối WPBakery
 *     duy nhất chứa cả heading), tự động giữ hành vi cũ (mục lục trước
 *     toàn bộ nội dung), không đoán/không phá layout. (2) THIẾU MỤC —
 *     bản cũ chỉ quét H2/H3, bỏ sót heading con cấp H4; nay quét thêm
 *     H4, mục lục hiển thị đủ 3 cấp (H2 đánh số, H3 gạch ngang thụt lề,
 *     H4 dấu chấm thụt lề sâu hơn). (3) GIAO DIỆN — thay 2 ký tự
 *     Unicode "☰"/"+/–" bằng icon SVG thật (thêm icon "list" mới vào
 *     sprite, cùng hệ icon với hàng ngày-đăng/tác giả), thêm badge đếm
 *     số mục, đổi nền xám phẳng sang thẻ (card) viền mảnh + đổ bóng nhẹ
 *     (--sce-shadow-sm) đúng token Untitled UI sẵn có, chevron xoay khi
 *     mở/đóng thay vì đổi ký tự +/–. Đã kiểm thử bằng PHP test harness
 *     thật (nội dung mẫu ảnh + 2 đoạn mở đầu + H2/H3/H4 hỗn hợp) và
 *     Playwright (desktop/mobile, sáng/tối, tap target, scroll-margin,
 *     trạng thái mở mặc định). Xem chi tiết trong CHANGELOG.txt.
 *   4.2.1 (30/09/2026) — Sửa lỗi #site-header-wrap có 2 div rỗng
 *     "height:116px" liền kề (phát hiện qua ảnh chụp DevTools thật của
 *     site khi bật chế độ header-fixed). Đã đọc lại toàn bộ main.js
 *     (headerFixed(), khối events()) và sce-jquery-ready-fix.js —
 *     KHÔNG có cách nào để chính file JS của theme con tự gây trigger
 *     'ready' 2 lần (jQuery(fn) chỉ chạy đúng 1 lần theo cơ chế lõi).
 *     Nguyên nhân thực sự nằm ngoài phạm vi theme (nhiều khả năng
 *     plugin cache/tối ưu tốc độ — site đang dùng WP Rocket — nhân đôi
 *     việc nạp main.js hoặc chính file fix này, ví dụ do bật "Combine
 *     JS files"/"Delay JavaScript execution"). Vì theme con không thể
 *     kiểm soát hành vi đó, đã bổ sung 2 lớp phòng vệ an toàn trong
 *     sce-jquery-ready-fix.js: (1) cờ chặn không cho tự trigger('ready')
 *     2 lần nếu chính file này bị nạp trùng; (2) dọn dẹp DOM sau khi
 *     trang tải xong — nếu vẫn phát sinh nhiều hơn 1 div spacer liền
 *     kề ngay sau #site-header/#site-header-wrap thì XOÁ HẲN (không
 *     phải display:none) các div thừa, chỉ giữ đúng 1 div. Đã kiểm
 *     chứng bằng Playwright với 3 kịch bản (tải bình thường 1 lần, fix
 *     script bị nạp trùng, main.js bị nạp trùng) — cả 3 đều cho đúng 1
 *     div sau khi chạy. Xem chi tiết trong CHANGELOG.txt.
 *   4.2.0 (29/09/2026) — Sửa 4 lỗi phát hiện khi audit Responsive/SEO
 *     "Mục lục nội dung": (1) chuyển dựng mục lục + gắn id heading từ
 *     JS-only sang render THẲNG bằng PHP (functions.php) — mục lục và
 *     id neo giờ có sẵn trong HTML gốc, không còn phụ thuộc JS để tồn
 *     tại, hết rủi ro CLS do JS chèn nội dung sau khi trang đã vẽ
 *     xong; (2) thêm scroll-margin-top (token mới "--sce-header-
 *     offset") để tiêu đề đích không bị header che khi click mục lục;
 *     (3) tăng vùng bấm nút mở/đóng mục lục lên tối thiểu 44px (chuẩn
 *     tap target di động — đo thực tế bản cũ chỉ ~24px); (4) bọc mục
 *     lục trong <nav aria-label> cho accessibility/SEO. Đã xoá file
 *     assets/js/sce-toc.js (không còn dùng). Xem chi tiết đầy đủ trong
 *     CHANGELOG.txt.
 *   4.1.1 (29/09/2026) — Sửa lỗi hàng post-meta bị kế thừa CHỮ HOA từ
 *     CSS gốc theme cha (".hentry .post-meta{text-transform:uppercase}")
 *     — bản 4.1.0 quên chặn kế thừa, khiến cả hàng ngày/tác giả/lượt
 *     xem/phút đọc hiện lên toàn chữ HOA, không đồng bộ phong cách chữ
 *     thường của Untitled UI. Đồng thời đổi cách ngăn cách các mục từ
 *     khoảng trắng lớn sang dấu chấm giữa "·" (pattern blog SaaS hiện
 *     đại, gọn và tinh tế hơn). Xem chi tiết trong CHANGELOG.txt.
 *   4.1.0 (29/09/2026) — Thiết kế lại "post-meta-content" (hàng ngày
 *     đăng/tác giả/lượt xem/thời gian đọc đầu bài viết) theo phản hồi
 *     ảnh chụp thực tế: thêm icon riêng cho từng mục (SVG sprite
 *     Untitled UI sẵn có — 3 icon mới: calendar, eye, user-01, trích
 *     xuất thêm từ @untitledui/icons), nhãn tiếng Việt rõ nghĩa hơn
 *     ("Đăng ngày.../Tác giả: .../N lượt xem"), layout chip co giãn
 *     đầy đủ trên di động. Dữ liệu vẫn 100% lấy thật từ các hàm gốc
 *     (get_the_date/get_the_author/tdc_PostViews) — không bịa số liệu,
 *     chỉ đổi lớp trình bày. LƯU Ý: nút CTA màu cam "Tạo vận đơn" thấy
 *     trong ảnh chụp KHÔNG xuất hiện ở bất kỳ đâu trong mã nguồn theme
 *     cha lẫn theme con (đã grep toàn bộ) — không phải do theme sinh
 *     ra, nhiều khả năng đến từ 1 plugin khác hoặc được chèn thủ công
 *     trong nội dung bài viết đó — cần xác nhận thêm từ chủ site trước
 *     khi chỉnh sửa để tránh sửa nhầm/sửa đoán mã nguồn không kiểm
 *     chứng được. Xem chi tiết đầy đủ trong CHANGELOG.txt.
 *   4.0.0 (30/09/2026) — THIẾT KẾ LẠI TOÀN DIỆN trang bài viết (post)
 *     và Trang (page) theo chuẩn Untitled UI/SaaS + tối ưu SEO/GEO/
 *     AEO/EEAT, mobile-first. Gồm: (1) sửa lỗi CSS cũ ".entry-content"
 *     không khớp DOM thật (đổi đúng thành ".post-content"/".page-
 *     content" — style bảng/list/blockquote/link giờ mới thực sự áp
 *     dụng); (2) Trang (page.php) giờ có breadcrumb + tiêu đề H1 +
 *     khung đồng bộ với bài viết (trước đây hoàn toàn không có); (3)
 *     bật lại + thiết kế mới Hộp tác giả cuối bài (E-E-A-T, dữ liệu
 *     thật từ hồ sơ WordPress, dịch tiêu đề sang tiếng Việt); (4) thêm
 *     "X phút đọc" tính thật từ số từ bài viết; (5) thêm Mục lục tự
 *     động (TOC) quét H2/H3 thật, đóng mặc định trên di động/mở trên
 *     desktop; (6) thêm Schema WebPage + BreadcrumbList cho Trang
 *     (trước đây chưa có), thêm "url" tác giả vào Schema bài viết. Xem
 *     chi tiết đầy đủ trong CHANGELOG.txt.
 *   3.7.3 (30/09/2026) — Khối nội dung bài viết/Trang (cố ý luôn giữ
 *     sáng để an toàn — xem bản 3.7.2) giờ có bo góc + đổ bóng nổi
 *     khối, trông như 1 "thẻ đọc" được thiết kế chủ đích khi ở chế độ
 *     tối, thay vì như 1 khối trắng dở dang. KHÔNG đổi gì ở chế độ
 *     sáng. Xem chi tiết trong khối "CHẾ ĐỘ SÁNG/TỐI" đầu file.
 *   3.7.2 (30/09/2026) — Mở rộng lại chế độ tối cho ĐÚNG nền/khung
 *     trang bài viết + Trang (breadcrumb, tiêu đề, sidebar, "bài viết
 *     liên quan"...) sau khi bản 3.7.1 thu hẹp quá tay (chỉ Header/
 *     Footer đổi màu). Đã kiểm tra kỹ để KHÔNG lặp lại lỗi cũ: nội
 *     dung bài viết/Trang thô (WPBakery/người dùng tự dán) vẫn LUÔN ép
 *     sáng cố định. Vá thêm 4 điểm rò rỉ màu cứng phát hiện được. Xem
 *     chi tiết trong khối "CHẾ ĐỘ SÁNG/TỐI" đầu file.
 *   3.7.1 (30/09/2026) — FIX KHẨN bản 3.7.0: chữ trắng trên nền trắng
 *     (không đọc được) ở các trang Blog/nội dung khi bật chế độ tối.
 *     Thu hẹp đúng phạm vi dark mode về lại Header/Footer/Bottom —
 *     xem chi tiết trong khối "CHẾ ĐỘ SÁNG/TỐI" đầu file.
 *   3.7.0 (29/09/2026) — Thêm chế độ giao diện SÁNG/TỐI (dark mode),
 *     tông màu tham khảo go.noti.vn (ảnh chụp màn hình khách gửi). Nút
 *     bật/tắt ở Header (icon mặt trời/mặt trăng). Đã áp dụng: Header,
 *     Footer, Bottom, nền toàn trang, khối ".sce-card" dùng chung cho
 *     các trang sắp xây. Xem chi tiết ở khối "CHẾ ĐỘ SÁNG/TỐI" đầu file
 *     và trong functions.php.
 *   3.6.1 (29/09/2026) — Đổi 2 icon tìm kiếm (kính lúp/dấu X) ở Header
 *     sang đúng dữ liệu path của bộ icon Untitled UI mới, đồng bộ 100%
 *     kiểu nét vẽ với các icon khác. Không đổi cơ chế bật/tắt (JS giữ
 *     nguyên, đã kiểm tra lại bằng Playwright).
 *   3.6.0 (29/09/2026) — Cài bộ icon Untitled UI chính thức toàn site
 *     (32 icon dạng SVG sprite, nguồn gói @untitledui/icons). Xem class
 *     ".sce-icon" ở cuối file này và hàm sce_icon() trong functions.php.
 *   3.4.0 (26/09/2026) — Đổi vỏ (thanh trên cùng) của 3 trang công cụ
 *     độc lập — Đặt hàng/Tính cước/Tra cứu vận đơn — từ gradient đỏ-cam
 *     cũ sang phong cách Untitled UI. CHỈ đổi vỏ; nội dung form/máy
 *     tính/khung tra cứu bên trong (từ plugin SCE_Helper, không có mã
 *     nguồn) giữ nguyên 100%, không đụng. Đã duyệt qua bản preview.
 *   3.3.4 (26/09/2026) — FIX KHẨN cho bản 3.3.3: 1 dòng CSS phòng hờ
 *     ("#site-header-wrap + div") vô tình khớp luôn vào #main-content
 *     (khối chứa TOÀN BỘ nội dung trang) và ẩn mất — đã bỏ dòng đó,
 *     chỉ giữ đúng dòng cần thiết, thêm ":empty" để không bao giờ có
 *     thể ẩn nhầm phần tử có nội dung thật bên trong nữa.
 *   3.3.3 (26/09/2026) — Fix khoảng trắng ~116px chớp giữa Header và
 *     nội dung mỗi lần tải/làm mới trang: div đệm cho header-sticky
 *     (do main.js theme cha tạo ra) bị lộ ra trong lúc chờ trang tải
 *     xong hẳn. Đã ẩn đúng div đó bằng CSS ngay từ đầu, không đụng
 *     main.js, không mất hiệu ứng header dính khi cuộn thật.
 *   3.3.2 (26/09/2026) — Fix tốc độ tải trang: Google Fonts trước đây
 *     nạp bằng <link rel="stylesheet"> chặn hiển thị (render-blocking),
 *     khiến TOÀN BỘ trang bị giật/hiện khoảng trắng vài giây khi kết
 *     nối tới fonts.googleapis.com chậm. Đã đổi sang nạp không chặn
 *     hiển thị (preconnect + kỹ thuật loadCSS chuẩn), không đổi font.
 *   3.3.1 (26/09/2026) — Fix vị trí Breadcrumb trên trang Bài viết:
 *     trước đây breadcrumb bị kẹp GIỮA ảnh đại diện và tiêu đề (do in
 *     trong templates/entry-content-title.php, mà theo thứ tự gọi
 *     template gốc thì ảnh luôn hiện trước tiêu đề). Đã chuyển breadcrumb
 *     sang templates/entry-content-single.php (file mới), đứng NGAY ĐẦU
 *     bài viết — TRƯỚC ảnh đại diện, đúng vị trí quen thuộc. Chỉ đổi vị
 *     trí, không đổi nội dung breadcrumb hay Schema BreadcrumbList.
 *   3.3.0 (26/09/2026) — Dựng lại HEADER + MENU DI ĐỘNG theo Untitled
 *     UI, tập trung vào icon hamburger. Tìm và sửa 4 lỗi thật (không
 *     phải chỉ đổi giao diện): (1) icon 3 gạch bị vỡ/lệch — 2 gạch gốc
 *     của theme cha chưa tắt hẳn, gạch giữa bị đẩy lệch do đổi cách
 *     canh vị trí; (2) nút hamburger có thể bị cắt mất phần trên — do
 *     logo/nút cùng nổi (float) trong khi hàng chứa không phải flex ở
 *     di động; (3) icon "X" khi mở menu bị vô hình hoàn toàn — luật cũ
 *     của theme cha ẩn nhầm luôn icon X mới; (4) vài mục cuối trong
 *     menu (FAQ/CTA/ô tìm kiếm) có thể bấm không trúng trên trang ngắn
 *     — luật cuộn trang của theme cha cắt mất phần menu tràn ra ngoài.
 *     Đồng thời làm mới giao diện menu xổ xuống: nền trắng thay nền
 *     đen cũ, mũi tên mục con dễ nhìn hơn, ô tìm kiếm + nút "Tra cứu
 *     vận đơn" đồng bộ phong cách Untitled UI. Đã dựng preview + được
 *     duyệt trước khi đóng gói.
 *   3.2.2 (25/09/2026) — Fix khẩn: bản 3.2.1 vô tình làm lộ ra 1 ô tìm
 *     kiếm thứ hai (mặc định của WordPress, chưa style) luôn hiển thị
 *     thừa trên header thật, kèm 1 dấu chấm đầu dòng lạc — do rule mới
 *     ép hiện ".nav-extend" trong khi theme cha CỐ Ý ẩn hẳn phần tử này
 *     (nó chỉ là danh sách dự phòng ẩn của theme, không phải cơ chế tìm
 *     kiếm thật). Đã gỡ bỏ rule đó — trả về đúng mặc định ẩn của theme
 *     cha — chỉ còn lại icon + ô tìm kiếm thật (dạng dropdown) như thiết
 *     kế gốc, không đổi gì khác của fix canh logo/icon ở bản 3.2.1.
 *   3.2.1 (25/09/2026) — Fix logo và icon tìm kiếm trên header bị lệch
 *     nhau: ".wrap-inner" (bọc logo+menu+tìm kiếm) không có CSS layout
 *     tĩnh nào trong theme cha, nên nếu ảnh logo gốc không giới hạn
 *     chiều cao, có thể cao vượt hẳn khối tìm kiếm, kéo lệch cả hàng.
 *     Đã ép flex + canh giữa dọc rõ ràng, giới hạn cỡ logo ở desktop.
 *   3.2.0 (25/09/2026) — Thiết kế lại trang Bài viết (bố cục Sidebar
 *     phải) theo Untitled UI: breadcrumb, tiêu đề, ảnh đại diện, meta,
 *     nội dung, tags, bài viết liên quan, và sidebar (tìm kiếm/bài viết
 *     gần đây/thẻ) — đồng bộ Inter + màu thương hiệu. Thêm Schema
 *     BlogPosting + BreadcrumbList cho từng bài viết. Hiện lại sidebar
 *     trên di động (theme gốc ẩn hẳn, chỉ hiện trên desktop).
 *   3.1.5 (25/09/2026) — Fix nút menu (đặc biệt "Tra cứu vận đơn") bị
 *     giãn cao bất thường — CSS gốc theme cha dùng ID có độ ưu tiên
 *     cao hơn, ép chiều cao 78px dù đã viết display:flex.
 *   3.1.4 (25/09/2026) — Bỏ hẳn top bar (và số hotline đi kèm) khỏi
 *     header, chỉ còn 1 thanh header duy nhất, theo yêu cầu.
 *   3.1.3 (25/09/2026) — Đổi font toàn site sang Inter (tiêu đề + nội
 *     dung), thay cho Sora + Be Vietnam Pro trước đó, theo yêu cầu.
 *   3.1.2 (25/09/2026) — Fix lệch cột Footer: khối 5 cột (Thương hiệu/
 *     Dịch vụ/Công ty/Hỗ trợ/Chi nhánh) bị đẩy lệch, "Chi nhánh" rớt
 *     xuống dòng dưới, do xung đột với class clearfix cũ của theme gốc.
 *   3.1.1 (24/09/2026) — Fix cache: CSS chính giờ tự đổi ?ver=... theo
 *     filemtime mỗi lần cập nhật, không còn cần xoá cache WP Rocket/
 *     trình duyệt thủ công để thấy đúng giao diện mới.
 *   3.1.0 (24/09/2026) — Header v3, Admin "Sải Cánh Express" (Hero/Dịch vụ/
 *     Bảng giá/Chi nhánh), Footer v3 chuẩn SEO + Schema.org, Typography v3
 *     áp dụng toàn site.
 *   1.0   — bản gốc trước khi nâng cấp (các FIX #1/#2 giữ nguyên bên dưới).
 **/

/* ============================================================
   FIX #1: Xoá #featured-title toàn site (an toàn) — 18/07/2026
   ============================================================ */
#featured-title .featured-title-inner-wrap { padding: 0 !important; display: none !important; }
#featured-title { padding: 0 !important; min-height: 0 !important; height: 0 !important; border: 0 !important; overflow: hidden !important; }

/* ============================================================
   FIX #2: Full width trang gui-hang-di-anh (post ID 8838) — 20/07/2026
   ============================================================ */
body.page-id-8838 .logistix-container,
body.page-id-8838 div.logistix-container { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.page-id-8838 .row-inner,
body.page-id-8838 .row-inner.clearfix,
body.page-id-8838 div.row-inner { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
body.page-id-8838 .entry-content,
body.page-id-8838 .wpb-content-wrapper,
body.page-id-8838 .vc-custom-col-spacing { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.page-id-8838 .vc_column-inner,
body.page-id-8838 .wpb_wrapper { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; }
body.page-id-8838 .vc_col-sm-12,
body.page-id-8838 .wpb_column.vc_col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; }


/* ================================================================
   SẢI CÁNH EXPRESS — HEADER DESIGN SYSTEM v3 (Untitled UI)
   Thay thế toàn bộ block "HEADER DESIGN SYSTEM v2" (20/08/2026).
   Vẫn nhắm đúng DOM thật của theme Logistix (không đổi header.php,
   không đổi main.js) — chỉ viết lại token màu/khoảng cách/font theo
   hệ thống thiết kế Untitled UI đã dựng cho toàn site, giữ đúng màu
   thương hiệu đỏ hiện có (đồng bộ với logo và các trang Đặt hàng/
   Tính cước/Tra cứu vận đơn đang dùng #c8191a, không đổi sang xanh
   navy để tránh lệch tông với phần chưa đụng tới).
   Cập nhật: 22/09/2026
================================================================= */

:root{
  /* Thang màu thương hiệu (đỏ SCE), mở rộng theo kiểu token Untitled UI.
     SỬA 01/10/2026 (v4.8.1) — theo yêu cầu "đổi nền màu giống phong
     cách luôn" (trang mẫu GHDNN Express), người dùng chọn đổi TOÀN BỘ
     bảng màu site, đã xác nhận trước (AskUserQuestion) kể cả việc đổi
     lại đỏ #D60000. LƯU Ý QUAN TRỌNG: bản 22/09/2026 từng CHỦ Ý đổi
     #D60000 → #D6222A với lý do ghi trong comment cũ "cân bằng độ
     tương phản tốt hơn trên nền trắng" — trước khi đổi lại lần này đã
     TỰ KIỂM TRA bằng công thức tương phản WCAG thật (không tin lại
     comment cũ theo quán tính): #D60000 vs nền trắng = tỷ lệ 5.44:1,
     #D6222A vs nền trắng = 5.1:1 — #D60000 (màu trang mẫu) thực ra
     NHỈNH HƠN, không hề kém hơn như comment cũ ghi. Vì vậy đổi lại
     #D60000 lần này KHÔNG đánh đổi khả năng đọc, an toàn để áp dụng. */
  --sce-red-900:#4A0000;
  --sce-red-800:#6B0000;
  --sce-red-700:#8F0F0F;
  --sce-red-600:#B31217;
  --sce-red:#D60000;          /* v4.8.1 — đổi lại đúng màu đỏ trang mẫu GHDNN Express (đã kiểm chứng tương phản, xem comment trên) */
  --sce-red-dark:#A50000;     /* v4.8.1 — khớp đúng --red-dark của trang mẫu */
  --sce-red-soft:#FDECEC;     /* không đổi — vốn đã trùng khớp sẵn với --red-tint của trang mẫu */
  --sce-red-softer:#FFF6F6;
  --sce-accent-amber:#B4790C; /* dùng cho điểm nhấn phụ (hotline), thay vàng thuần */
  --sce-ink:#1D1D1F;          /* v4.8.1 — khớp --ink trang mẫu (trước: #141B24) */
  --sce-ink-soft:#6E6E73;     /* v4.8.1 — khớp --ink-soft trang mẫu (trước: #5B6672) */
  --sce-ink-faint:#9C9CA1;    /* v4.8.1 — token MỚI, khớp --ink-faint trang mẫu — dùng cho chữ phụ/3 (vd nhãn "Điều hướng" trong drawer, ngày tháng mờ...) */
  --sce-line:#E5E5EA;         /* v4.8.1 — khớp --border trang mẫu (trước: #E7E9EC) */
  --sce-line-soft:#EFEFF1;    /* v4.8.1 — nhích theo tỉ lệ cùng --sce-line mới (trước: #F1F2F4) */
  --sce-bg:#F5F5F7;           /* v4.8.1 — khớp --bg trang mẫu (trước: #F7F7F8) */
  --sce-white:#FFFFFF;
  --sce-surface-2:#FAFAFA;    /* v4.8.1 — token MỚI, khớp --surface-2 trang mẫu — bề mặt phụ giữa --sce-white và --sce-bg (vd nền hover nhẹ trong khối danh sách), chưa gắn vào component nào, để dành dùng dần */
  /* Nền Footer — CỐ ĐỊNH, KHÔNG đổi theo sáng/tối (Footer/Bottom đã
     thiết kế tối màu cố định từ trước, xem #footer.sce-footer bên
     dưới — tách riêng khỏi --sce-ink để --sce-ink có thể tự do đổi
     theo theme sáng/tối mà không làm sai màu nền Footer). */
  --sce-footer-bg:#1D1D1F; /* v4.8.1 — cập nhật theo đúng --sce-ink mới ở trên (trước: #141B24, bằng giá trị --sce-ink cũ — giữ đúng quy luật "footer tối = màu ink, chỉ cố định không đổi theo theme") */

  /* Bộ màu trạng thái phụ (MỚI, v4.8.1) — khớp đúng bộ màu timeline/badge
     của trang mẫu GHDNN Express. CHỈ THÊM TOKEN, CHƯA gắn vào component
     nào trong site hiện tại (an toàn 100%, không đổi hiển thị gì) — để
     dành cho khi xây các khối trạng thái (vd timeline tra cứu vận đơn,
     badge phân loại) sau này, đúng tinh thần "token trước, component
     sau" mà chính trang mẫu cũng áp dụng (xem comment gốc của họ). */
  --sce-blue:#2563EB; --sce-blue-tint:#E8EFFD;
  --sce-violet:#7C3AED; --sce-violet-tint:#F1EBFD;
  --sce-slate:#64748B; --sce-slate-tint:#EEF1F5;
  --sce-orange:#EA580C; --sce-orange-tint:#FDEEE3;
  --sce-green:#1E8E5A; --sce-green-tint:#E7F6EE;

  /* Thang khoảng cách / bo góc / đổ bóng — dùng chung với hệ Untitled UI toàn site */
  --sce-sp-1:4px; --sce-sp-2:8px; --sce-sp-3:12px; --sce-sp-4:16px; --sce-sp-6:24px;
  --sce-sp-8:32px; /* v4.9.10 — THÊM MỚI, khớp đúng padding ngang desktop
    (≥768px) của ".wrap" trang mẫu GHDNN Express — ".wrap{max-width:1120px;
    margin:0 auto;padding:0 24px}" rồi "@media(min-width:768px){.wrap{padding:
    0 32px}}" (đã đọc trực tiếp file CSS thật họ gửi, ghdnn-express-v1.30.6.zip,
    dòng ~250-251) — trùng khớp luôn với chính token "--space-8:32px" của họ.
    Dùng cho padding-left/right của "#site-header-inner", xem comment đầy đủ ở
    khối "2. HEADER CHÍNH". */
  /* Bo góc — NỚI RỘNG (01/10/2026, v4.8.1) khớp theo tỉ lệ bo góc lớn
     hơn của trang mẫu GHDNN Express (--radius-sm:11px/--radius-md:18px/
     --radius-lg:26px) — trước: sm 8px/md 12px/lg 16px/xl 24px. */
  --sce-r-sm:11px; --sce-r-md:18px; --sce-r-lg:20px; --sce-r-xl:26px; --sce-r-pill:999px;
  /* --sce-r-xl (30/09/2026, v4.3.3): bo góc lớn riêng cho khối "thẻ đọc"
     (.post-content ở chế độ tối, xem khối "Thẻ đọc" bên dưới) — 16px
     (--sce-r-lg) vốn là mức lớn nhất đang dùng cho nút/card thường
     trong site, nhưng khối nội dung chính cần bo góc RÕ hơn hẳn để
     không bị nhầm là 1 khối nền trắng còn sót lại/lỗi. Không đổi
     --sce-r-lg (đang dùng ở nhiều nơi khác) để tránh ảnh hưởng ngoài ý
     muốn — thêm token mới riêng, đúng tinh thần tái dùng token có sẵn
     khi có thể, chỉ thêm token mới khi thực sự cần 1 giá trị chưa có. */
  --sce-shadow-sm:0 1px 2px rgba(29,29,31,.06), 0 1px 1px rgba(29,29,31,.04);
  --sce-shadow-md:0 8px 20px -6px rgba(29,29,31,.14), 0 2px 6px rgba(29,29,31,.06);
  --sce-shadow-lg:0 20px 48px -16px rgba(29,29,31,.22);

  /* Font toàn site — Inter (chuẩn SEO/legibility, hỗ trợ đủ dấu tiếng Việt),
     dùng chung 1 họ font cho cả tiêu đề lẫn nội dung để đồng bộ toàn site.
     (Trước 25/09/2026 dùng Sora + Be Vietnam Pro — đổi theo yêu cầu.) */
  --sce-font-display:'Inter', system-ui, -apple-system, sans-serif;
  --sce-font-body:'Inter', system-ui, -apple-system, sans-serif;

  /* Khoảng bù cuộn trang khi nhảy tới id neo (mục lục, link nội bộ...) —
     theme cha có sẵn cơ chế header "position:fixed" khi cuộn (bật qua
     tuỳ chọn "header-fixed" ở Customize → Header, xem #site-header-wrap.
     is-fixed trong CSS theme cha) — nếu bật, mọi cú nhảy tới id neo mà
     không bù khoảng này sẽ bị header đè lên đúng heading đích. Đặt token
     riêng để dễ tinh chỉnh sau này (kiểm tra chiều cao header thật trên
     site live rồi chỉnh lại số 100px cho khớp, nếu cần) mà không phải
     sửa nhiều nơi. An toàn kể cả khi header KHÔNG bật chế độ fixed —
     chỉ đơn giản chừa thêm khoảng trắng phía trên khi cuộn tới, không
     gây lỗi hiển thị nào khác. */
  --sce-header-offset:100px;

  color-scheme:light;
}

/* =================================================================
   CHẾ ĐỘ SÁNG/TỐI (DARK MODE) — 29/09/2026 (v3.7.0), THU HẸP PHẠM VI
   30/09/2026 (v3.7.1) SAU KHI PHÁT HIỆN LỖI THẬT, MỞ RỘNG LẠI CÓ
   KIỂM SOÁT NGÀY 30/09/2026 (v3.7.2) THEO YÊU CẦU "NỀN TRANG BÀI VIẾT
   PHẢI ĐỔI, KHÔNG CHỈ HEADER/FOOTER".
   ------------------------------------------------------------------
   Tham khảo tông màu/phong cách từ mẫu go.noti.vn (ảnh chụp màn hình
   người dùng gửi): nền gần đen (không phải đen tuyệt đối), bề mặt
   (header/card) nhích sáng hơn 1 chút để có độ nổi khối, chữ trắng
   ngà, viền/đường kẻ mờ, GIỮ NGUYÊN màu đỏ thương hiệu SCE (không đổi
   sang tông khác) để không lệch nhận diện thương hiệu giữa 2 chế độ.

   LỖI ĐÃ GẶP (bản đầu 29/09/2026, v3.7.0): định nghĩa lại token màu
   NGAY TẠI ":root" khiến TOÀN BỘ trang đổi màu theo — kể cả những nơi
   --sce-ink/--sce-white đã được dùng từ TRƯỚC dark mode cho các khu
   vực CHƯA được thiết kế lại nền tối đi kèm (nội dung bài viết Blog,
   nội dung Trang do WPBakery/plugin tự vẽ...). Hậu quả: CHỮ đổi sang
   màu sáng nhưng NỀN vẫn trắng như cũ → chữ trắng trên nền trắng,
   không đọc được gì.

   FIX v3.7.1: thu hẹp tối đa — CHỈ áp dụng cho #site-header-wrap,
   #footer, #bottom. An toàn tuyệt đối nhưng quá hẹp: người dùng phản
   hồi lại là bấm nút tối thì CHỈ Header/Footer đổi màu, còn toàn bộ
   nền trang bài viết (breadcrumb, tiêu đề, sidebar, bài viết liên
   quan...) vẫn sáng y nguyên — không đúng ý muốn ban đầu "sáng/tối áp
   dụng cho toàn web".

   MỞ RỘNG CÓ KIỂM SOÁT v3.7.2: sau khi đọc lại đúng mã nguồn PHP gốc
   của theme cha (không đoán), xác nhận:
     - MỌI trang dùng get_header()/get_footer() chuẩn (bài viết, Trang
       thường, trang danh mục Blog...) đều được bọc trong 1 khối DUY
       NHẤT: "#main-content" (khai báo trong header.php gốc — bọc luôn
       "#site-content" + "#sidebar" bên trong).
     - Nội dung THÔ do người dùng/WPBakery tự dán (chỗ có thể chứa màu
       nền cứng, ví dụ bảng giá nền vàng đã thấy trong ảnh chụp màn
       hình lỗi) LUÔN nằm trong đúng 1 trong 3 vỏ bọc cố định do theme
       xuất ra, không lẫn đi đâu được:
         · ".post-content" bên trong ".post-content-single-wrap" —
           nội dung bài viết đơn (templates/entry-content-single.php,
           templates/entry-content-body.php của theme cha).
         · ".post-content.post-excerpt" — phần tóm tắt bài viết ở
           trang danh mục Blog (cùng file entry-content-body.php).
         · ".page-content" — nội dung Trang thường, dùng chung bởi CẢ
           3 file template Trang của theme cha đã đọc trực tiếp
           (page.php, pagelanding.php, pagesimple.php).
     - Toàn bộ phần CÒN LẠI bên trong "#main-content" (khung
       breadcrumb, tiêu đề H1, ngày/tác giả, khung sidebar + widget,
       khối "bài viết liên quan") đã kiểm tra kỹ: 100% dùng token màu
       (var(--sce-ink), var(--sce-white)...) không có màu cứng — an
       toàn để tự động đổi tối.
   → Cách làm: mở rộng phạm vi định nghĩa lại token màu tối thêm
   "#main-content" (kéo theo mọi phần tử con dùng token bên trong tự
   động đổi màu qua cơ chế kế thừa CSS custom property — không cần
   liệt kê từng khối con), ĐỒNG THỜI ép cứng lại đúng 3 vỏ bọc nội
   dung thô ở trên VỀ LẠI màu sáng cố định (định nghĩa lại token ngay
   trên chính 3 selector đó, xem khối "VÙNG NỘI DUNG THÔ" ngay bên
   dưới) — bất kể theme đang bật sáng hay tối. Nhờ 2 lớp lồng nhau
   này, nền trang/khung sườn theo đúng theme đã chọn, còn nội dung thô
   không kiểm soát được LUÔN đọc được, không lặp lại lỗi cũ.
   LƯU Ý: 2 template Trang tuỳ biến toàn phần "Page Landing"/"Page
   Simple" (pagelanding.php, pagesimple.php) tự vẽ lại head/body riêng
   và KHÔNG có id "#main-content" (chỉ có class ".site-main" không kèm
   id) — nghĩa là phần nội dung của 2 template này CHƯA nằm trong
   phạm vi mở rộng lần này (chỉ Header/Footer của chúng đổi màu như
   trước), tránh động vào các khối Elementor/marketing đặc biệt trên
   đó khi chưa kiểm tra riêng — đúng tinh thần "an toàn trước, mở rộng
   dần sau" của dự án.

   3 lớp áp dụng (đúng kỹ thuật CSS chuẩn cho "theme + có thể ép tay"):
   1) Mặc định hệ thống (OS) đang ở chế độ tối, mà người dùng CHƯA tự
      bấm nút chọn tay → dùng @media (prefers-color-scheme: dark).
   2) Người dùng tự bấm nút chuyển sang tối (bất kể OS) → thuộc tính
      html[data-theme="dark"] (do assets/js/sce-theme-toggle.js gán).
   3) Người dùng tự bấm chọn "sáng" dù OS đang tối → mặc định ở trên
      (khối media dùng ":not([data-theme=light])" để nhường quyền).
================================================================= */
/* SỬA 01/10/2026 (v4.8.1) — khớp bảng màu tối theo trang mẫu GHDNN
   Express, CỘNG 1 THAY ĐỔI CHÍNH SÁCH: bản trước (29/09/2026, v3.7.0)
   CHỦ Ý giữ "--sce-red" KHÔNG đổi giữa 2 chế độ ("không đổi sang tông
   khác để không lệch nhận diện thương hiệu"). Nay ĐO LẠI bằng công
   thức tương phản WCAG thật: đỏ thường #D60000 trên nền thẻ tối mới
   (#1B1B1D) chỉ đạt tỷ lệ ~3.16:1 — ĐẠT mức tối thiểu cho icon/khối UI
   lớn (≥3:1) nhưng KHÔNG đạt mức chữ thường (cần ≥4.5:1, ví dụ chữ
   link/nhãn "đang xem" tô đỏ trong drawer mobile vừa làm ở v4.8.0) —
   rủi ro đọc khó ở chế độ tối. Trang mẫu GHDNN Express đã xử lý đúng
   vấn đề này bằng cách CHỈ sáng màu đỏ lên ở riêng chế độ tối
   (#FF5245, đạt 5.36:1 trên cùng nền) — áp dụng lại đúng cách làm đó
   ở đây: "--sce-red" tối có giá trị RIÊNG, sáng hơn bản ngày thường,
   trong khi chế độ sáng vẫn giữ đúng #D60000 như vừa đổi ở khối
   ":root" đầu file. Độ lệch sắc đỏ sáng/tối rất nhỏ (cùng họ đỏ), không
   đáng kể về nhận diện thương hiệu so với lợi ích đọc được rõ ràng hơn. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #site-header-wrap,
  :root:not([data-theme="light"]) #footer,
  :root:not([data-theme="light"]) #bottom,
  :root:not([data-theme="light"]) #main-content,
  :root:not([data-theme="light"]) .sce-dark-ready{
    --sce-bg:#09090B;
    --sce-white:#1B1B1D;
    --sce-surface-2:#141416;
    --sce-ink:#F5F5F7;
    --sce-ink-soft:#A0A0A6;
    --sce-ink-faint:#6C6C70;
    --sce-line:#2A2A2D;
    --sce-line-soft:#201F22;
    --sce-red:#FF5245;
    --sce-red-dark:#FF3B2E;
    --sce-red-soft:#2A1512;
    --sce-red-softer:#1A0D0C;
    --sce-blue:#5B8DEF; --sce-blue-tint:#12203A;
    --sce-violet:#A78BFA; --sce-violet-tint:#241B3A;
    --sce-slate:#94A3B8; --sce-slate-tint:#1E2530;
    --sce-orange:#FB923C; --sce-orange-tint:#301D10;
    --sce-green:#3ED28A; --sce-green-tint:#0F2A1E;
    --sce-shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
    --sce-shadow-md:0 8px 20px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    --sce-shadow-lg:0 20px 48px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] #site-header-wrap,
:root[data-theme="dark"] #footer,
:root[data-theme="dark"] #bottom,
:root[data-theme="dark"] #main-content,
:root[data-theme="dark"] .sce-dark-ready{
  --sce-bg:#09090B;
  --sce-white:#1B1B1D;
  --sce-surface-2:#141416;
  --sce-ink:#F5F5F7;
  --sce-ink-soft:#A0A0A6;
  --sce-ink-faint:#6C6C70;
  --sce-line:#2A2A2D;
  --sce-line-soft:#201F22;
  --sce-red:#FF5245;
  --sce-red-dark:#FF3B2E;
  --sce-red-soft:#2A1512;
  --sce-red-softer:#1A0D0C;
  --sce-blue:#5B8DEF; --sce-blue-tint:#12203A;
  --sce-violet:#A78BFA; --sce-violet-tint:#241B3A;
  --sce-slate:#94A3B8; --sce-slate-tint:#1E2530;
  --sce-orange:#FB923C; --sce-orange-tint:#301D10;
  --sce-green:#3ED28A; --sce-green-tint:#0F2A1E;
  --sce-shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --sce-shadow-md:0 8px 20px -6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --sce-shadow-lg:0 20px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}
#main-content{ background:var(--sce-bg) !important; }

/* ---------- VÙNG NỘI DUNG THÔ (bài viết/Trang) — 30/09/2026 (v4.4.0)
   ĐỔI QUYẾT ĐỊNH THEO YÊU CẦU MỚI CỦA NGƯỜI DÙNG: trước đây (bản
   3.7.1-4.3.3) khối này bị ép SÁNG CỐ ĐỊNH bất kể theme đang tối/sáng,
   vì lo ngại ~180 bài viết cũ có thể chứa màu tự chèn không theo token
   (đã có 2 lần gặp lỗi "chữ và nền cùng màu" trước đó). Nay, sau khi
   người dùng xem trực tiếp trên site live và xác nhận: chữ trong nội
   dung hiện tại chủ yếu đang dùng màu MẶC ĐỊNH (không tự chèn màu tuỳ
   ý nhiều) — người dùng yêu cầu đổi nền khối này theo đúng theme tối/
   sáng như mọi khu vực khác trong "#main-content", cho đồng nhất giao
   diện toàn trang, KHÔNG cần ép sáng cố định nữa.

   ĐÃ KIỂM TRA TRƯỚC KHI SỬA (không đoán, dựng mock dùng đúng file
   style.css + parent/logistix/style.css thật, đo bằng Playwright) và
   PHÁT HIỆN 1 ĐIỂM QUAN TRỌNG: nếu chỉ đơn giản BỎ khối override cũ mà
   không thêm gì khác, "background" của ".post-content"/".page-content"
   sẽ THÀNH TRONG SUỐT (bản thân 2 class này chưa từng có background
   riêng — trước giờ do khối override cũ gán "background:var(--sce-
   white)"), để lộ nền tối nhất "#main-content" phía sau; ĐỒNG THỜI
   "color" của đoạn văn mặc định (không style riêng) KHÔNG tự đổi theo
   token được vì theme cha viết CỨNG "body{color:#111111}" (không dùng
   biến CSS) — nghĩa là nếu không sửa gì thêm, TOÀN BỘ đoạn văn mặc
   định (không chỉ 1 số bài cũ dán màu riêng) sẽ bị đúng lỗi "chữ đen
   trên nền đen" — tái lặp CHÍNH lỗi đã gặp 2 lần trước, lần này ở diện
   RỘNG HƠN. Do đó bản này THÊM LẠI 1 rule "background"/"color" DÙNG
   TOKEN SỐNG (không pin cứng giá trị như bản cũ) ngay dưới đây — token
   tự đổi đúng theo chế độ hiện tại (sáng: --sce-white=#fff, --sce-ink=
   #141B24, y hệt giao diện cũ; tối: --sce-white=#131318 (tông "bề mặt"
   card, giống các card khác trong site), --sce-ink=#F3F4F6 sáng, đọc
   được rõ trên nền tối) — đây là rule DUY NHẤT cần thêm, không cần
   pin/ép cứng gì khác, các phần tử con (link, bảng, blockquote...) đã
   100% dùng token sẵn nên tự kế thừa đúng theo "color" mới ở đây.
   RỦI RO CÒN LẠI (đã báo lại người dùng, người dùng xác nhận chấp nhận
   sau khi hiểu rõ, không phải tự ý quyết định): một số đoạn trong các
   bài viết cũ CÓ THỂ vẫn có màu chữ gắn cứng trực tiếp trong HTML (ví
   dụ dán từ Word/Google Docs, kiểu style="color:#333") mà KHÔNG kèm
   màu nền riêng — rule "color" mới ở đây KHÔNG override được các đoạn
   này (style HTML trực tiếp trên từng thẻ luôn thắng "color" kế thừa
   từ khối bọc ngoài, đây là đúng cơ chế CSS, không phải lỗi) — với các
   đoạn này, màu chữ cứng không tự đổi theo token được (giới hạn kỹ
   thuật, không có cách rà 100% tự động mà không kiểm tra từng bài),
   nên có thể khó đọc hơn khi nền đổi tối. Khối nào có ĐỦ CẢ màu nền lẫn
   màu chữ tự đặt cùng nhau (ví dụ bảng giá nền vàng) vẫn an toàn, không
   phụ thuộc token nền của theme. Khuyến nghị: sau khi cập nhật, rà
   nhanh vài bài cũ (đặc biệt bài dán nội dung từ Word/Excel) ở chế độ
   tối, báo lại nếu có đoạn khó đọc để xử lý riêng từng trường hợp —
   không cần đổi lại toàn bộ quyết định này.
   SỬA 30/09/2026 (v4.5.0): BỎ ".post-content.post-excerpt" khỏi 2 khối
   dưới đây (từng dùng chung với ".post-content-single-wrap > .post-
   content"/".page-content") — lý do: ".post-content.post-excerpt" CHỈ
   xuất hiện trong đúng 1 ngữ cảnh thật là tóm tắt bài viết ở lưới Blog/
   trang danh mục (templates/entry-content-body.php, nhánh else), mà
   ngữ cảnh này NAY đã được thiết kế lại thành card riêng (xem khối
   "BLOG GRID..." cuối file) — card đã tự có nền/viền/bo góc/đổ bóng ở
   cấp ".post-content-archive-wrap", nên nếu excerpt BÊN TRONG card đó
   CŨNG nhận thêm viền/bo góc/đổ bóng riêng từ khối này sẽ tạo ra hiệu
   ứng "card lồng trong card" sai (đã phát hiện qua Playwright khi dựng
   mock thật, không phải đoán) — màu chữ excerpt trong card giờ do
   chính khối "BLOG GRID" quy định (".blog-grid .hentry .post-excerpt"),
   không cần khối này lo nữa. */
.post-content-single-wrap > .post-content,
.page-content{
  background:transparent;
  color:var(--sce-ink);
}

/* ---------- BỎ "THẺ ĐỌC" (card) khỏi khung nội dung bài viết — nội
   dung giờ hoà thẳng vào nền trang, không còn khối trắng/viền/bóng
   riêng (SỬA 01/10/2026, v4.8.5) ------------------------------------
   LÝ DO: người dùng yêu cầu "Tối ưu khung nội dung chuẩn Untitled UI.
   Kiến trúc cũ này làm nội dung bị hẹp trên mobile" + "nền content có
   thể bỏ để dùng nền của web luôn đúng chuẩn hiện đại". Đối chiếu lại
   CHÍNH trang mẫu tham khảo "GHDNN Express" (đã dùng cho Header/bảng
   màu trước đó) — ".post-single" (khung nội dung bài viết của họ)
   KHÔNG hề có "background"/"border"/"box-shadow" riêng nào cả, chỉ có
   "font-size/line-height/color" — nội dung bài viết của họ nằm THẲNG
   trên nền trang, không bọc trong "thẻ" nào, đúng chuẩn hiện đại mà
   người dùng mô tả.

   LỊCH SỬ (để không lặp lại nhầm lẫn cũ): bản 4.7.6 từng CHỦ ĐỘNG thêm
   viền/bo góc/đổ bóng ở đây, vì khi đó nền ".post-content" (var(
   --sce-white)) và nền trang "#main-content" (var(--sce-bg)) là 2 TOKEN
   MÀU KHÁC NHAU thật (dù rất gần nhau, chỉ cách ít bit) — không viền/
   bóng thì để lộ 1 "vệt" màu nhạt khó gọi tên ở mép khối nội dung. Bản
   này SỬA TẬN GỐC vấn đề đó thay vì tiếp tục che bằng viền/bóng: đổi
   "background" (ở khối ngay trên) từ "var(--sce-white)" sang
   "transparent" — nội dung giờ lấy đúng 1 màu nền DUY NHẤT là
   "#main-content{background:var(--sce-bg)}" phía sau, không còn 2 màu
   nền khác nhau để tạo "vệt" nữa → viền/bóng/bo góc KHÔNG CÒN CẦN THIẾT
   (bỏ hẳn, không phải bỏ sót).

   HẸP TRÊN MOBILE: nguyên nhân là "ĐÚP 2 LỚP THỤT LỀ" cộng dồn — lớp
   ngoài "#content-wrap.logistix-container" (margin theo % chiều rộng
   màn hình, xem khối "KHUNG NỘI DUNG — thụt lề theo kiểu Untitled UI"
   ngay bên dưới, đã SỬA cùng bản này) CỘNG THÊM "padding:32px/20px"
   riêng của khối thẻ này — 2 lớp thụt lề chồng lên nhau khiến cột chữ
   trên mobile bị bóp hẹp hơn nhiều so với cần thiết. Nay bỏ hẳn
   "padding" ở đây (đổi "padding:0") — độ thụt lề DUY NHẤT còn lại đến
   từ "#content-wrap.logistix-container" (gutter cố định theo px, xem
   bên dưới), không còn thụt lề kép. */
.post-content-single-wrap > .post-content{
  padding:0;
  margin:24px 0 40px;
}
@media (max-width:767px){
  .post-content-single-wrap > .post-content{
    padding:0; margin:16px 0 24px;
  }
}

/* ---------- KHUNG NỘI DUNG — thụt lề theo kiểu Untitled UI, không
   còn hẹp trên mobile (SỬA 01/10/2026, v4.8.5) -----------------------
   PHẠM VI: CHỈ "#content-wrap.logistix-container" — đúng combo ID+
   class của riêng bài viết (single.php) và trang danh sách blog
   (index.php, page-blog-grid.php, page-blog-list.php — đã đọc trực
   tiếp 4 file PHP gốc của theme cha, xác nhận CHỈ 3 file này + single.
   php dùng đúng combo này). KHÔNG đụng ".logistix-container" dùng
   riêng (không có "#content-wrap" đi kèm) ở Header/Top bar/Footer/
   Bottom bar — những khu vực đó ĐÃ tinh chỉnh kỹ ở các bản trước, giữ
   nguyên 100%. CŨNG KHÔNG đụng Trang thường (page.php của theme con) —
   page.php CỐ Ý KHÔNG bọc "#content-wrap" trong ".logistix-container"
   (đã đọc comment gốc ngay trong page.php, tự thêm trước đó trong dự
   án: để không phá layout "stretch row" tràn viền của WPBakery trên
   Trang) — override ở đây chỉ khớp đúng "#content-wrap" CÓ class
   "logistix-container", nên Trang (không có class đó) không bị ảnh
   hưởng gì, an toàn.

   LÝ DO: ".logistix-container" gốc dùng "max-width:90%" (phần trăm
   theo chiều rộng màn hình) làm lề 2 bên — trên mobile, 90% là lề quá
   RỘNG so với gutter cố định theo px mà chuẩn Untitled UI hay dùng
   (đối chiếu đúng CSS thật của trang mẫu GHDNN Express: ".wrap{
   max-width:1120px;margin:0 auto;padding:0 24px} @media(min-width:
   768px){.wrap{padding:0 32px}}" — gutter CỐ ĐỊNH theo px, không theo
   %). Trên bài viết, lề % này CỘNG DỒN thêm với padding riêng của thẻ
   nội dung (đã bỏ ở khối ngay trên) khiến cột chữ bị bóp hẹp 2 LẦN.
   SỬA: ghi đè "width/max-width" của riêng combo "#content-wrap.
   logistix-container" sang "padding" cố định theo px (24px mobile,
   32px từ 768px trở lên — ĐÚNG giá trị trang mẫu), giữ nguyên
   "max-width:1180px" (khớp mọi nơi khác trong site) nhưng không còn
   bị ép hẹp thêm bởi "90%" nữa. Specificity "#content-wrap.logistix-
   container" (1 ID + 1 class) tự thắng ".logistix-container" (1 class)
   theo đúng cascade, không cần "!important". */
#content-wrap.logistix-container{
  width:100%;
  max-width:1180px;
  padding:0 24px;
  box-sizing:border-box;
}
@media (min-width:768px){
  #content-wrap.logistix-container{ padding:0 32px; }
}

/* ---------- Vá 4 điểm rò rỉ màu cứng phát hiện khi mở rộng phạm vi
   (grep trực tiếp CSS theme cha + đo computed style thật bằng
   Playwright, không đoán) — các phần tử này nằm NGOÀI vùng nội dung
   thô (tiêu đề/khối "bài viết liên quan" do theme xuất ra), nên PHẢI
   theo token để đổi tối đúng, nhưng theme cha viết màu cứng nên trước
   giờ luôn sáng kể cả khi đã vào vùng auto-dark — nay cần override
   lại bằng token. Điểm thứ 4 (".related-title:before") chỉ phát hiện
   được nhờ đo "getComputedStyle(el, '::before')" thật — nhìn ảnh chụp
   không thấy rõ đây là 1 ô nền trắng cứng riêng, tưởng nhầm là icon
   vỡ hoặc lỗi hiển thị mờ. */
.hentry .post-title a{ color:var(--sce-ink) !important; }
.hentry .post-title{ border-bottom-color:var(--sce-line) !important; }
.related-title > span{ background-color:var(--sce-bg) !important; }
.related-title:before{ background-color:var(--sce-bg) !important; }

/* ---------- Nút chuyển đổi sáng/tối (Header) ---------- */
/* Khoảng cách giữa icon tìm kiếm sẵn có và nút sáng/tối mới, cả
   desktop lẫn mobile (".cart-search-wrap" đã là flex ở cả 2 breakpoint,
   xem mục 2 và mục 8 phía trên — gap không có tác dụng phụ nếu phần
   tử con thay đổi, an toàn thêm ở đây thay vì lặp lại trong từng
   breakpoint). */
.cart-search-wrap{ gap:4px; }
.sce-theme-toggle{
  width:38px; height:38px; border-radius:50%; border:none; background:transparent;
  display:flex !important; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease; padding:0;
}
.sce-theme-toggle:hover{ background:var(--sce-bg); }
.sce-theme-toggle .sce-icon{ color:var(--sce-red); } /* v4.7.4 */
.sce-theme-toggle .icon-sun{ display:none; }
.sce-theme-toggle .icon-moon{ display:block; }
:root[data-theme="dark"] .sce-theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .sce-theme-toggle .icon-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sce-theme-toggle .icon-sun{ display:block; }
  :root:not([data-theme="light"]) .sce-theme-toggle .icon-moon{ display:none; }
}

/* ---------- .sce-card — khối "card" dùng chung, phong cách SaaS
   hiện đại (bo góc lớn, viền mảnh, đổ bóng nhẹ) — dùng cho các khối
   sắp xây (trang Hub, trang quốc gia...) để đồng bộ 1 kiểu card duy
   nhất toàn site. LƯU Ý (từ bản sửa 30/09/2026): card này chỉ TỰ ĐỘNG
   đổi màu theo sáng/tối khi nằm trong Header/Footer, hoặc khi được
   gắn thêm class ".sce-dark-ready" (cho chính nó hoặc 1 khối cha bọc
   ngoài) — nếu đặt tự do trong nội dung trang (chưa audit dark mode),
   card sẽ giữ nguyên màu sáng cố định, KHÔNG đổi theo nút bấm, để
   tránh lặp lại đúng lỗi "chữ sáng trên nền sáng" đã gặp. ---------- */
.sce-card{
  background:var(--sce-white); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg); box-shadow:var(--sce-shadow-sm);
  padding:var(--sce-sp-6,24px); transition:background .2s ease, border-color .2s ease;
}

/* ---------------------------------------------------------------
   0. RESET NHẸ CHO VÙNG HEADER
------------------------------------------------------------------ */
#site-header-wrap, #site-header, #top-bar{ box-sizing:border-box; }
#site-header *{ box-sizing:border-box; }

/* ---------------------------------------------------------------
   1. TOP BAR — ẨN HẲN theo yêu cầu (25/09/2026). Header giờ chỉ còn
   1 thanh duy nhất (logo + menu + CTA + tìm kiếm), đúng kiểu tối
   giản của Untitled UI. Chỉ ẩn bằng CSS — không đụng header.php/
   templates/top.php/top-right.php, nên hotline/social/menu top-bar
   vẫn còn nguyên trong HTML và trong Customizer (Appearance →
   Customize), có thể bật lại bất cứ lúc nào chỉ bằng cách xoá rule
   display:none dưới đây, không cần cài lại theme.
------------------------------------------------------------------ */
#top-bar{
  display:none !important;
}
#top-bar .top-bar-left .inner:after{ display:none !important; content:none !important; }
#top-bar .top-bar-information{ display:flex; align-items:center; gap:18px; }
#top-bar .top-bar-information .content{
  font-family:var(--sce-font-body);
  color:#CBD0D6 !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
#top-bar .top-bar-information .phone.content{
  color:#FFC85C !important;   /* hotline nổi bật, giữ độ tương phản cao trên nền tối — không dùng vàng chanh gắt như bản cũ */
  font-weight:700 !important;
}
#top-bar .top-bar-information .phone.content:hover{ color:#FFDA94 !important; }
#top-bar .top-bar-menu-wrap ul.top-bar-menu{ display:flex; gap:4px; }
#top-bar .top-bar-menu-wrap ul.top-bar-menu a{
  font-family:var(--sce-font-body);
  color:#CBD0D6 !important; font-size:12.5px !important; font-weight:500 !important;
  padding:4px 10px !important; border-radius:var(--sce-r-pill); transition:background .15s ease, color .15s ease;
}
#top-bar .top-bar-menu-wrap ul.top-bar-menu a:hover{ background:rgba(255,255,255,.08); color:#fff !important; }
#top-bar .socials-network{ display:flex; }
#top-bar .socials-network a{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  opacity:.75; transition:opacity .15s ease, background .15s ease; border-radius:50%;
}
#top-bar .socials-network a:hover{ opacity:1; background:rgba(255,255,255,.1); }

/* ---------------------------------------------------------------
   2. HEADER CHÍNH — ĐỔI THIẾT KẾ (01/10/2026, v4.8.0) theo mẫu tham
   khảo "GHDNN Express", SỬA LẠI (01/10/2026, v4.8.2) sau phản hồi
   thực tế của người dùng trên site thật.

   PHẢN HỒI NGƯỜI DÙNG (nguyên văn): "Header lúc đầu không phải trong
   suốt mà hòa vào trang. Cuộn xuống vẫn có nền, để trong suốt khi cuộn
   xuống là không đúng." — tức: (1) lúc đầu trang, header KHÔNG được
   trong suốt/xuyên thấu thật sự (dễ đè chữ lên ảnh/nội dung cuộn bên
   dưới, nhất là khi header dính/fixed) — chỉ cần nền TRÙNG màu nền
   trang để nhìn như "hoà vào", và (2) khi đã cuộn xuống, header PHẢI
   luôn có nền nhìn thấy được, không được biến mất/trong suốt.

   NGUYÊN NHÂN GỐC (đã xác minh lại bản 4.8.0): bản cũ để
   "#site-header{background:transparent}" thật 100% lúc đầu trang, và
   hiệu ứng nền đặc/bóng ("pill") CHỈ bật khi "#site-header" có class
   "is-fixed" — class này do JS headerFixed() của theme CHA tự gắn,
   và CHỈ chạy khi tuỳ chọn Customize → General → "Header Fixed" đang
   BẬT (mặc định tắt — xem framework-functions.php dòng 242-243). Nếu
   tuỳ chọn đó đang tắt trên site thật, "is-fixed" không bao giờ xuất
   hiện → header giữ nguyên "opacity:0" (xuyên thấu hoàn toàn) kể cả
   khi đã cuộn rất xa — ĐÚNG Y HỆT lỗi người dùng mô tả. Thay vì dựa
   hẳn vào 1 tuỳ chọn Customizer ẩn (không kiểm chứng được là bật hay
   tắt), SỬA theo 2 lớp để chắc chắn đúng trong MỌI trường hợp:

   LỚP 1 — nền cơ bản LUÔN hiện diện, không bao giờ "opacity:0" thật:
   "#site-header" đổi từ "transparent" sang "var(--sce-bg)" (đúng màu
   nền của #main-content ngay dưới nó) — nhìn như "hoà vào trang" (vì
   cùng 1 màu) nhưng KHÔNG xuyên thấu nội dung cuộn bên dưới. Tự đáp
   ứng đúng yêu cầu (1) của người dùng, không cần biết header có đang
   "fixed" hay không.

   LỚP 2 — hiệu ứng "pill" nổi (nền trắng/viền/bóng/bo góc) khi cuộn:
   KHÔNG còn chỉ dựa vào "is-fixed" của theme cha nữa — viết thêm 1
   đoạn JS cuộn trang RIÊNG, độc lập (xem assets/js/sce-header.js, hàm
   theo dõi "scroll" bằng requestAnimationFrame, ngưỡng 24px) tự gắn
   class "sce-header-scrolled" lên thẻ "<html>" bất kể tuỳ chọn
   Customizer "Header Fixed" đang bật hay tắt — ĐẢM BẢO đúng yêu cầu
   (2) của người dùng ("cuộn xuống vẫn có nền") trong MỌI cấu hình.
   Selector CSS bên dưới áp dụng cho CẢ 2 trường hợp (class cũ của
   theme cha "is-fixed" NẾU có, VÀ class mới "sce-header-scrolled") để
   không phá vỡ gì nếu sau này Admin bật lại "Header Fixed" — khi đó
   header sẽ vừa dính (position:fixed, do theme cha) vừa đổi nền đúng
   lúc (do cả 2 cơ chế cùng trỏ về 1 kết quả hình ảnh).

   CƠ CHẾ "DÍNH" (position:fixed) khi cuộn: VẪN giữ nguyên, tái dùng
   cơ chế có sẵn của theme cha như bản 4.8.0 (không viết JS mới cho
   phần này) — JS mới ở đây CHỈ điều khiển hình ảnh (nền/bóng), không
   đụng gì đến "position".

   KỸ THUẬT "PILL": phần nền/viền/bóng/bo góc đặt ở pseudo-element
   "::before" của "#site-header-inner" (KHÔNG đặt "backdrop-filter"/
   "box-shadow" trực tiếp lên chính "#site-header-inner" — nó LÀ tổ
   tiên thật của "#sce-mobile-drawer" (drawer mobile, xem khối "DRAWER
   MOBILE" cuối file): nếu đặt "backdrop-filter" trực tiếp lên 1 tổ
   tiên thật, phần tử đó tự trở thành "containing block" mới cho mọi
   con cháu "position:fixed" bên trong — khiến drawer "full-height"
   bị co lại chỉ cao bằng đúng khung header, HỎNG HẲN drawer. Đây CHÍNH
   XÁC là lỗi theme tham khảo GHDNN đã từng gặp rồi tự sửa (đọc thấy
   trong comment "v1.7.5/v1.7.6" của chính file CSS họ gửi) — áp dụng
   luôn cách sửa đúng của họ NGAY TỪ ĐẦU ở đây, không cần tự gặp lỗi
   rồi mới sửa. "#site-header-inner" nằm trong "#site-header-wrap" nên
   tự kế thừa đúng bộ token màu tối/sáng hiện có (xem khối "CHẾ ĐỘ
   SÁNG/TỐI" đầu file) — không cần viết thêm rule riêng cho dark mode. */
#site-header{
  background:var(--sce-bg) !important;
  border-bottom:none !important;
  box-shadow:none !important;
  transition:background .25s ease;
}

/* SCE 11/10/2026 (v4.9.12 → ĐÃ GỠ BỎ ở v4.9.13) — bản v4.9.12 từng thêm
   "margin-top" cho "#site-header:not(.is-fixed)" (lúc CHƯA cuộn) để tạo
   khoảng hở với mép trình duyệt. SAI Ý: người dùng gửi ảnh chụp phản
   hồi "Làm sai phần khoảng cách header phía trên rồi. Hãy bỏ khoảng
   trắng trên cùng của header đi" — ý định thật sự của người dùng là
   khoảng hở này chỉ cần có khi ĐàCUỘN (is-fixed), giống đúng hiệu ứng
   "pill nổi cách mép trên" của trang mẫu GHDNN Express — KHÔNG phải lúc
   mới vào trang. Đã xoá hẳn rule "margin-top" ở trạng thái chưa cuộn
   (quay lại đúng hành vi gốc: header nằm sát đầu trang khi chưa cuộn) —
   xem rule mới cho đúng trạng thái "is-fixed" ở khối ngay dưới (cạnh
   "SỬA: giữ nguyên #site-header{background:var(--sce-bg)}..."). */

/* SCE 11/10/2026 (v4.9.9) — Thanh tiến trình đọc (reading progress bar),
   theo yêu cầu "giống của GHDNN Express" — xem toàn bộ nguồn tham chiếu
   thật trong assets/js/sce-reading-progress.js (đọc trực tiếp file gốc
   GHDNN gửi, không đoán cơ chế). Bản gốc dùng
   "linear-gradient(90deg, var(--red), var(--yellow))" — SCE không có
   token vàng thuần riêng (dự án đã CỐ TÌNH dùng "--sce-accent-amber"
   thay vàng thuần từ trước, xem comment ngay cạnh khai báo token đó ở
   đầu file :root) nên dùng ĐÚNG 2 token thương hiệu sẵn có:
   "--sce-red" → "--sce-accent-amber" — tự động đổi đúng theo chế độ
   sáng/tối vì "--sce-red" đã có override riêng cho dark mode từ trước,
   không cần viết thêm rule riêng nào cho dark mode.
   z-index — đủ cao để luôn nổi trên mọi nội dung/header thường, nhưng
   vẫn THẤP HƠN HẲN lớp phủ mờ + khung drawer mobile
   (".sce-mobile-drawer"/"#sceNavBackdrop", z-index 99990+, xem khối
   "DRAWER MOBILE" cuối file) — để khi mở menu di động, thanh tiến trình
   không vô tình đè lên trên drawer.

   SỬA 11/10/2026 (v4.9.14) — "z-index:9000" BAN ĐẦU (bản v4.9.9) ĐÃ SAI:
   người dùng gửi ảnh chụp site thật lúc đã cuộn, phản hồi "Vẫn bị thừa
   nền trắng xám phía trên menu khi cuộn xuống làm che đi thanh cuộn nội
   dung" — tức thanh tiến trình (progress bar) bị chính header che mất
   khi đã cuộn. NGUYÊN NHÂN: theme CHA đặt "z-index:9989" cho
   "#site-header.is-fixed" (xem style.css theme cha dòng ~2937) — CAO
   HƠN "z-index:9000" của ".sce-progress" — nên dải nền đặc mới thêm ở
   bản v4.9.13 (16px trên cùng, xem rule "#site-header.is-fixed{
   background:linear-gradient(...)}" cạnh dưới) vẽ ĐÈ LUÔN LÊN TRÊN
   thanh tiến trình (cũng nằm ở top:0, cùng đúng vị trí) — dù trước đó
   (lúc nền header lúc cuộn còn "transparent" hẳn, bản v4.8.7-4.9.12)
   không hề bị đè vì không có gì để vẽ đè lên. SỬA: nâng "z-index" của
   ".sce-progress" lên "9990" — CHỈ CAO HƠN ĐÚNG 1 so với "9989" của
   header (đủ để luôn nổi trên header ở MỌI trạng thái, kể cả dải nền
   đặc mới), vẫn giữ nguyên THẤP HƠN RẤT NHIỀU so với lớp phủ mờ/drawer
   mobile (99990+) như thiết kế gốc — không đổi hành vi đã đúng đó.
   ĐÃ KIỂM CHỨNG: dựng lại header.php thật + style.css thật bằng
   Playwright, gắn "is-fixed", đặt "width:55%" cho thanh tiến trình rồi
   đo màu pixel thật tại y=1 (giữa dải cao 3px của thanh) — xác nhận màu
   đúng là gradient đỏ/vàng thương hiệu, không còn bị màu nền xám của
   header che mất. */
.sce-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:9990;
  pointer-events:none;
  background:linear-gradient(90deg, var(--sce-red), var(--sce-accent-amber));
  transition:width .12s linear; border-radius:0 3px 3px 0;
}
@media (prefers-reduced-motion:reduce){
  .sce-progress{ transition:none; }
}
#site-header-inner{
  padding-top:20px; padding-bottom:14px; position:relative;
  transition:padding .25s ease;
}
/* SCE 11/10/2026 (v4.9.11) — NỚI thêm lề TRÊN của header (theo yêu cầu
   trực tiếp "Chỉnh thêm lề bên trên", gửi kèm ảnh chụp site thật sau
   bản v4.9.10 nới lề ngang) — "padding-top" từ 14px → 20px (+6px, cùng
   bước nhảy 6-8px đã dùng cho các lần chỉnh khoảng cách nhỏ khác trong
   dự án). CHỈ đổi "padding-top" — giữ nguyên "padding-bottom:14px" —
   đúng sát nghĩa yêu cầu "lề bên TRÊN" (không phải cả 2 bên). CHỈ áp
   dụng cho trạng thái CHƯA cuộn (header full-size) ở desktop (≥992px,
   ảnh người dùng gửi là màn hình desktop) — KHÔNG đụng tới trạng thái
   "is-fixed"/cuộn (padding 10px/10px, xem rule ngay dưới) hay override
   mobile (≤991px, xem khối "8. MOBILE") vì không có phản hồi nào về 2
   trạng thái đó. */
/* SCE 02/10/2026 (v4.8.8) — SỬA LỖI "logo và menu sát viền khung bo
   tròn, mất thẩm mỹ" (người dùng gửi 2 ảnh chụp site thật liên tiếp,
   nhận xét: "Sửa khoảng cách pading logo và menu với khung bo tròn.
   Quá sát viền làm mất thẩm mỹ").

   NGUYÊN NHÂN: "#site-header-inner" trước giờ CHỈ có padding-top/
   bottom (canh dọc) — không hề có padding-left/right. Pill
   ("#site-header-inner::before") dùng "inset:0" nên LUÔN khớp đúng
   100% khung ngoài (padding box) của "#site-header-inner" — tức rộng
   bằng đúng "#site-header-inner" (đã căn giữa sẵn qua class
   "logistix-container" của theme cha). Vì không có padding ngang, nội
   dung bên trong (logo, menu, icon tìm kiếm/dark mode) nằm SÁT NGAY
   mép trái/phải của chính khung "#site-header-inner" — cũng là mép
   trái/phải của pill — khiến logo/icon gần như chạm vào đường cong bo
   góc, nhìn chật chội, mất thẩm mỹ như ảnh người dùng gửi. Đây là lỗi
   TỒN TẠI TỪ BẢN 4.8.0 (lúc đổi sang kiểu pill) — trước đây ít để ý vì
   các lỗi nghiêm trọng hơn (pill không hiện, nền lộ theme cha, chiều
   cao sai...) che khuất mất, nay các lỗi đó đã sửa xong (bản 4.8.7)
   nên mới lộ rõ vấn đề thẩm mỹ này.

   SỬA: thêm "padding-left/right" cho "#site-header-inner" (không đụng
   gì đến padding-top/bottom, cơ chế co giãn khi cuộn vẫn giữ nguyên).
   Vì "#site-header-inner" dùng "box-sizing:border-box" (thừa hưởng từ
   luật chung "#site-header *{box-sizing:border-box}" ở đầu file) và
   chiều rộng tổng ("width:1180px;max-width:90%") KHÔNG đổi, nên thêm
   padding ngang KHÔNG làm pill bị thu hẹp lại hay lệch vị trí — pill
   (dùng "inset:0", khớp đúng khung ngoài/padding box) vẫn giữ nguyên
   kích thước/vị trí như cũ, CHỈ có nội dung bên trong (qua
   ".wrap-inner") bị đẩy vào trong, tạo khoảng hở đều 2 bên giữa logo/
   menu/icon và đường cong bo góc của pill — đúng đích cần sửa, không
   gây hồi quy bố cục nào khác. Dùng "--sce-sp-6" (24px) ở desktop,
   giảm xuống "--sce-sp-4" (16px) ở mobile (≤991px, xem khối "8. MOBILE"
   bên dưới) cho cân đối với màn hình nhỏ hơn.

   CẬP NHẬT 11/10/2026 (v4.9.10) — NỚI RỘNG thêm, theo yêu cầu "Xem
   khoảng cách với lề bên ngoài của Main menu mẫu GHDNN Express và edit
   lại cho Main menu SaiCanh Express cho đẹp giống" (kèm 2 ảnh chụp
   DevTools so sánh header 2 site). Đã đọc trực tiếp CSS thật của GHDNN
   Express (ghdnn-express-v1.30.6.zip, assets/css/style.css dòng
   ~250-251): ".wrap{max-width:1120px;margin:0 auto;padding:0 24px}" rồi
   "@media(min-width:768px){.wrap{padding:0 32px}}" — tức khoảng cách từ
   logo/nav tới mép khung header của họ là 32px ở desktop (24px khi hẹp
   hơn 768px), RỘNG HƠN hẳn 24px đang dùng ở đây — đổi "--sce-sp-6"
   (24px) → "--sce-sp-8" (32px, token MỚI thêm ở :root, khớp đúng giá
   trị thật của họ) để khớp. */
#site-header-inner{
  padding-left:var(--sce-sp-8); padding-right:var(--sce-sp-8);
}
#site-header-inner::before{
  content:"";
  display:block; /* xem giải thích "SỬA #1" bên dưới — BẮT BUỘC phải
    ghi rõ "display:block", không được để trình duyệt tự suy ra, vì
    "#site-header-inner" có sẵn class "logistix-container" của theme
    cha — class này có rule clearfix riêng "display:table" áp đúng lên
    cùng pseudo-element "::before" này (xem style.css theme cha, dòng
    ~1598: ".logistix-container:before, .logistix-container:after{
    display:table; clear:both; content:""; ...}") — "display" là
    thuộc tính DUY NHẤT mà rule clearfix đó có mà rule của mình (ở
    trên) KHÔNG ghi đè, nên nó thắng theo cascade (không phải do thiếu
    specificity hay !important — chỉ đơn giản không có thuộc tính nào
    cạnh tranh). Hậu quả: pseudo-element bị ép thành 1 bảng (table)
    RỖNG — dù vẫn có "position:absolute;inset:0", thuật toán kích
    thước riêng của "display:table" KHÔNG kéo giãn lấp đầy khung chứa
    như "block" thường làm, mà co lại gần như 0 (đã đo thật bằng
    Playwright: chỉ còn "width:2px;height:2px") — khiến toàn bộ nền
    trắng/bo góc/đổ bóng của pill BIẾN MẤT HẲN dù mọi thuộc tính khác
    (background, opacity, border-radius...) vẫn đúng 100% khi đọc
    bằng getComputedStyle. */
  position:absolute; inset:0; z-index:-1;
  border-radius:var(--sce-r-xl);
  background:var(--sce-white);
  border:1px solid transparent;
  opacity:0; box-shadow:none;
  transition:opacity .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#site-header.is-fixed #site-header-inner,
html.sce-header-scrolled #site-header-inner{
  padding-top:10px; padding-bottom:10px;
}
#site-header.is-fixed #site-header-inner::before,
html.sce-header-scrolled #site-header-inner::before{
  opacity:.97; box-shadow:var(--sce-shadow-md); border-color:var(--sce-line);
}
/* SCE 01/10/2026 (v4.8.3) — SỬA LỖI "pill không bo tròn khi cuộn" theo
   phản hồi thực tế người dùng (kèm ảnh chụp trang mẫu
   guihangdinuocngoai.vn để so sánh). ĐÃ ĐIỀU TRA BẰNG THỰC NGHIỆM
   (không đoán mò) — dựng lại đúng HTML/CSS thật bằng Playwright, ép
   màu nền pill thành xanh lá chói ("lime") để xác minh pill có thật
   sự vẽ ra hình chữ nhật đầy đủ hay không — PHÁT HIỆN RA LỖI: pill
   thực tế KHÔNG hề hiển thị ở TRẠNG THÁI NÀO cả (kể cả khi đã gắn
   "is-fixed"), vì bị rule clearfix có sẵn của theme cha ép
   "display:table" làm co rút gần như về 0 (xem comment "display:block"
   ngay phía trên — đây là SỬA DUY NHẤT còn giữ lại từ bản 4.8.3). */

/* SCE 01/10/2026 (v4.8.6) — SỬA LỖI "nền theo theme cha", "cao quá",
   "không đẹp như mẫu" theo phản hồi thực tế người dùng (kèm ảnh chụp
   SITE THẬT lúc cuộn, cho thấy 1 dải nền TỐI của banner/hero hiện ra
   cả PHÍA TRÊN lẫn len vào xung quanh khối pill trắng).

   NGUYÊN NHÂN GỐC (đã xác minh bằng thực nghiệm Playwright — không
   đoán mò): bản 4.8.3 (xem comment cũ, đã xoá nội dung sai ở trên) có
   thêm "margin-top:var(--sce-sp-3)" (12px) cho "#site-header.is-fixed"
   với mục đích tạo khoảng hở để mắt thấy được góc bo tròn. NHƯNG đây
   là SUY LUẬN SAI: phần tử "position:fixed" có "margin" thì vùng
   margin đó KHÔNG BAO GIỜ được chính nền (background) của phần tử vẽ
   lên — nó là khoảng trống thật sự, để lộ đúng NGUYÊN VẸN bất cứ thứ
   gì đang cuộn ngay phía sau ở đúng vị trí đó. Trên trang chủ thật,
   ngay phía sau header khi cuộn thường là khối hero/banner nền TỐI —
   nên 12px margin-top này chính là "khe hở" để màu nền tối đó lộ ra,
   đúng y hệt điều người dùng mô tả ("nền bên sau giống như bị 1 nền
   của theme cha theo luôn").

   ĐÃ KIỂM CHỨNG BẰNG THỰC NGHIỆM: dựng lại trang thật (header thật +
   CSS thật) bằng Playwright, chèn thêm 1 khối nền tối mô phỏng hero
   ngay sau header, cuộn trang, rồi ĐO MÀU PIXEL THẬT (không đoán) tại
   đúng mép trên cùng màn hình:
   - CÓ margin-top (bản 4.8.3-4.8.5): pixel y=0 → y≈11px đo được đúng
     màu nền tối "rgb(11,18,32)" của khối hero giả lập — xác nhận 100%
     bị lộ nền, đúng như ảnh người dùng gửi.
   - KHÔNG margin-top (bản sửa này): pixel y=0 → y≈20px đo được đúng
     màu nền sáng của "#site-header"/pill ("rgb(229,229,234)" rồi
     "rgb(254,254,254)") — KHÔNG còn 1 pixel màu tối nào lọt qua.
   Đồng thời chụp cận cảnh góc bo tròn ở cả 2 trường hợp: KHÔNG có
   margin-top, góc bo tròn của pill VẪN hiển thị mượt mà, rõ nét bình
   thường (vì "display:block" đã sửa đúng ở bản 4.8.3 không phụ thuộc
   gì vào margin cả) — tức margin-top CHƯA BAO GIỜ thực sự cần thiết
   để "thấy" được góc bo tròn, chỉ là 1 suy luận sai dẫn tới lỗi mới.

   Đối chiếu thêm với chính CSS thật của trang mẫu guihangdinuocngoai.vn
   (file style.css họ gửi, khối "header.site"/".nav::before"): cơ chế
   "pill nổi khi cuộn" của họ KHÔNG hề dùng margin-top nào cả — khoảng
   cách quanh pill hoàn toàn đến từ padding ngang có sẵn của ".wrap"
   (canh giữa nội dung) và padding dọc của chính ".nav", không phải 1
   margin tách rời khỏi mép màn hình. Xác nhận thêm hướng sửa đúng:
   BỎ HẲN margin-top, để pill nằm sát top:0 như mẫu — border-radius vẫn
   render đúng, không cần khoảng hở giả tạo nào.

   SỬA: bỏ hẳn rule "margin-top" — "#site-header.is-fixed" không còn
   override gì thêm ngoài "position:fixed;top:0" sẵn có của theme cha.
   Việc này ĐỒNG THỜI giải quyết luôn cảm giác "chiều cao quá cao": dải
   nền tối 12px cộng với phần chuyển màu loang lổ phía trên pill trước
   đây khiến mắt đọc cả cụm "dải tối + pill trắng" như 1 khối cao bất
   thường — bỏ dải tối đó đi, header lúc cuộn chỉ còn đúng 1 thanh pill
   gọn, liền mạch, đúng tỉ lệ như mẫu. */

/* SCE 01/10/2026 (v4.8.7) — SỬA LỖI "nền header ngoài bo tròn vẫn còn"
   (người dùng gửi ảnh chụp DevTools site thật, chỉ rõ: ngoài phần nền
   bo tròn của main menu ra, vẫn còn 1 lớp nền khác của chính
   "#site-header" lộ ra, khiến header KHÔNG đọc được là 1 "thanh pill
   nổi" như mẫu guihangdinuocngoai.vn — mà giống 1 thanh ngang phẳng,
   vuông vức thông thường).

   NGUYÊN NHÂN GỐC (đã đo đạc thật, không đoán): "#site-header-inner"
   (khung chứa pill) kế thừa ĐÚNG cơ chế căn giữa có sẵn của theme cha
   (class "logistix-container": "width:1180px;max-width:90%;margin:0
   auto") — tức ở màn hình rộng, pill ĐÃ nằm căn giữa, 2 bên có khoảng
   hở thật (đo được 130px mỗi bên ở màn 1440px). NHƯNG "#site-header"
   (khung NGOÀI, rộng 100% màn hình, bọc "#site-header-inner") vẫn luôn
   có nền đặc "var(--sce-bg)" ("#F5F5F7", xám rất nhạt) — trong khi pill
   dùng "var(--sce-white)" ("#FFFFFF") — 2 màu này CHÊNH NHAU CHƯA ĐẦY
   4% độ sáng, gần như không phân biệt được bằng mắt thường, nhất là
   trong ảnh chụp màn hình/qua lớp nén. Kết quả: thay vì nhìn thấy
   "pill trắng NỔI trên nền trang thật" (như trang mẫu — tương phản
   mạnh, rõ ràng), người dùng chỉ thấy "1 khối gần như đồng màu trải
   dài hết chiều rộng" — không đọc được là pill nổi, dù về mặt hình học
   đã đúng bo góc/căn giữa.

   ĐỐI CHIẾU LẠI CSS THẬT của guihangdinuocngoai.vn (đã đọc kỹ khối
   "header.site"/".nav::before"): "header.site" (= khung ngoài, tương
   đương "#site-header" ở đây) KHÔNG BAO GIỜ tự đặt nền/viền/bóng nào
   cả — nó chỉ là khung định vị "sticky" thuần tuý. Toàn bộ phần nền
   đặc/bóng/bo góc chỉ nằm ở "::before" của ".nav" (= pill). Nhờ vậy,
   phần diện tích NGOÀI pill luôn trong suốt 100%, để lộ ĐÚNG màu nền
   trang thật (hoặc nội dung đang cuộn) phía sau — tạo tương phản rõ
   rệt, đúng hiệu ứng "nổi".

   SỬA: giữ nguyên "#site-header{background:var(--sce-bg)}" cho ĐÚNG 1
   trường hợp — lúc ĐẦU TRANG (chưa cuộn) — để không tái lặp lỗi cũ
   (header trong suốt thật 100% khi mới vào trang, phản hồi gốc: "Header
   lúc đầu không phải trong suốt mà hòa vào trang"). NHƯNG khi ĐÃ CUỘN
   (is-fixed / sce-header-scrolled), ghi đè nền của CHÍNH "#site-header"
   (khung ngoài) sang "transparent" — AN TOÀN 100% vì mọi NỘI DUNG có
   chữ/icon lúc này đều đã nằm trong pill (luôn có nền trắng đặc, opacity
   .97, đã đúng từ bản 4.8.3) — chỉ có phần diện tích TRỐNG quanh pill
   (không chứa chữ/icon gì) là chuyển trong suốt, không hề tái lặp lỗi
   "chữ đè lên ảnh không đọc được" đã gặp ở bản 4.8.1/4.8.2. */
#site-header.is-fixed,
html.sce-header-scrolled #site-header{
  background:transparent !important;
}

/* SCE 11/10/2026 (v4.9.13, nền ĐẶC — ĐÃ ĐỔI lại ở v4.9.15, xem comment
   dưới) — bản v4.9.13 từng tô ĐẶC màu "var(--sce-bg)" cho dải trên cùng
   cao "var(--sce-sp-4)" (16px) bằng "linear-gradient(...)" nhiều điểm
   dừng màu, để tránh lộ nội dung tối cuộn phía sau tại đúng khoảng hở
   (xem lý do kỹ thuật đầy đủ ở entry CHANGELOG 4.9.13) — nhưng người
   dùng phản hồi tiếp: "Vẫn bị thừa nền trắng xám phía trên menu khi
   cuộn xuống làm che đi thanh cuộn nội dung" rồi "Tôi muốn xóa bỏ dải
   nền xám đó đi" — xác nhận rõ (qua câu hỏi làm rõ) MUỐN giữ khoảng
   cách (padding) nhưng bỏ hẳn phần tô màu, CHẤP NHẬN đánh đổi: nếu
   trang có banner/hero nền tối ngay dưới header, màu tối đó CÓ THỂ lộ
   ra qua khoảng hở này khi cuộn (đúng hiện tượng từng gặp ở v4.8.6,
   nay được NGƯỜI DÙNG chủ động chọn chấp nhận, không phải lỗi). */

/* SCE 11/10/2026 (v4.9.15) — Khoảng hở TRÊN CÙNG lúc ĐÃ cuộn (is-fixed),
   theo đúng ý người dùng: GIỮ "padding-top" (khoảng cách thật, đẩy pill
   xuống khỏi mép trình duyệt) nhưng bỏ hẳn phần tô màu đặc — trả
   "background" về "transparent !important" THUẦN, đúng y hệt thiết kế
   gốc v4.8.7 (không còn "linear-gradient" color-stop nào). Khoảng hở
   16px phía trên giờ trong suốt 100%, giống hệt phần diện tích quanh
   pill ở 2 bên — nhất quán 1 kiểu xuyên thấu duy nhất cho MỌI phần
   ngoài pill, không còn dải màu xám nào khác biệt. */
#site-header.is-fixed,
html.sce-header-scrolled #site-header{
  background:transparent !important;
  padding-top:var(--sce-sp-4);
}
@media (prefers-reduced-motion:reduce){
  #site-header, #site-header-inner, #site-header-inner::before{ transition:none; }
}

/* FIX 26/09/2026 (v3.3.3) — khoảng trắng ~116px giữa Header và nội
   dung, chớp lên rồi tự biến mất mỗi lần tải/làm mới trang (đã xác
   nhận bằng ảnh chụp thật trước/trong lúc tải trang). NGUYÊN NHÂN: hàm
   headerFixed() trong main.js CỦA THEME CHA (không phải file mình
   viết) tạo 1 <div> đệm ngay sau #site-header để giữ chỗ khi header
   dính (sticky) lúc cuộn — nhưng <div> này được TẠO RA và CHÈN VÀO
   TRANG NGAY LẬP TỨC (hiển thị mặc định vì là div thường, không có
   class/style ẩn nào), trong khi đoạn code ẩn nó đi (.hide() vì trang
   chưa cuộn) chỉ chạy SAU KHI toàn bộ trang tải xong hẳn — sự kiện
   window "load" (chờ hết ảnh/GTM/FB Pixel/script...). Khoảng thời gian
   chờ "load" đó (vài giây) chính là lúc <div> đệm bị lộ ra thành 1
   khoảng trắng ~116px (đúng bằng chiều cao Header) giữa Header và nội
   dung — rồi biến mất ngay khi "load" xong. Không đụng main.js (đúng
   nguyên tắc dự án) — chặn khoảng trắng này bằng CSS ở đây: ẩn đúng
   <div> đó (luôn là em ngay sau #site-header) NGAY TỪ ĐẦU bằng CSS
   (không cần chờ JS), CHỈ trừ khi #site-header đã có class "is-fixed"
   (tức đang thật sự cuộn dính) — lúc đó vẫn cho hiện bình thường để
   giữ đúng hành vi đệm chỗ khi cuộn như thiết kế gốc, không mất tính
   năng gì.
   SỬA LỖI KHẨN (v3.3.4, cùng ngày): bản 3.3.3 viết thêm 1 dòng chọn
   "#site-header-wrap:not(.is-fixed) + div" để phòng trường hợp kiểu
   header khác (header-style-1/2/3) dùng #site-header-wrap làm chỗ neo
   thay vì #site-header. NHƯNG với kiểu header đang chạy thật trên site
   (header-style-4), phần tử ngay sau #site-header-wrap trong DOM CHÍNH
   LÀ #main-content (toàn bộ nội dung trang, bọc trong 1 thẻ <div>) —
   không phải div đệm. Vì "+div" chỉ so khớp theo TÊN THẺ, dòng CSS đó
   vô tình khớp luôn vào #main-content và ẩn mất toàn bộ nội dung mọi
   trang. Xin lỗi vì bản 3.3.3 để lọt lỗi nghiêm trọng này.
   ĐÃ SỬA: bỏ hẳn dòng chọn theo #site-header-wrap (kiểu header hiện
   tại không dùng tới), CHỈ giữ đúng 1 dòng theo #site-header — và
   thêm ":empty" để CHỈ khớp đúng phần tử KHÔNG có nội dung gì bên
   trong (đúng bản chất div đệm rỗng do JS tạo ra) — dù có lỡ trùng
   tên thẻ với phần tử nào khác trong tương lai, div đó cũng sẽ KHÔNG
   BAO GIỜ bị ẩn nếu nó có chứa nội dung thật bên trong.

   CẬP NHẬT 11/10/2026 (v4.9.7) — khoảng trắng ~68px giữa Header và
   banner hero Trang chủ, kéo dài ~2 giây mỗi lần tải trang (người dùng
   gửi ảnh chụp DevTools thật, bôi đen đúng 1 <div style="height:
   67.9844px; display:none"> nằm trong "#site-header-wrap", và mô tả
   CHÍNH XÁC: "dòng này hiện 2 LẦN khi có khoảng trắng — sau khi hết
   khoảng trắng thì chỉ còn 1 lần").

   ĐÃ ĐỌC LẠI TOÀN BỘ main.js (headerFixed(), dòng 234-268) và
   "sce-jquery-ready-fix.js" (chính file này, phần "sceDedupeHeaderSpacers"
   thêm ở v4.2.1) để xác định đúng nguyên nhân — không đoán mò:

   1) "headerFixed()" của theme cha tạo <div> đệm bằng
      "$('<div/>',{height:...}).insertAfter(nav)" — <div> này KHÔNG có
      display:none ngay khi vừa tạo; nó chỉ được ẩn đi bởi chính dòng CSS
      ở trên — và được dọn khỏi DOM bởi "sceDedupeHeaderSpacers()" (hàm
      JS đã có sẵn từ v4.2.1, nằm ngay trong file này, phía dưới).
   2) Comment v4.2.1 ở trên ĐÃ từng cảnh báo trước: nếu WP Rocket bật
      "Combine JS files"/"Delay JavaScript execution" khiến main.js bị
      nạp/thực thi 2 lần độc lập, "headerFixed()" sẽ chạy 2 lần, tạo ra 2
      <div> đệm rỗng liền kề — và 2 lớp phòng vệ (cờ chặn + dọn DOM) đã
      được thêm sẵn để xử lý. Ảnh chụp mới của người dùng xác nhận ĐÚNG
      kịch bản này đang xảy ra thật trên site.
   3) NHƯNG: "sceDedupeHeaderSpacers()" chỉ chạy khi "document.readyState"
      đã "complete", hoặc chờ sự kiện "load" của trình duyệt — đúng sự
      kiện mà chính ảnh/GTM/FB Pixel/script nặng trên trang làm nó đến
      TRỄ ~2 giây (giống hệt cơ chế gốc đã mô tả ở bản v3.3.3 phía trên).
      Trong 2 giây chờ đó, dòng CSS "#site-header:not(.is-fixed) + div:
      empty" (dùng tổ hợp "+", chỉ khớp ĐÚNG 1 phần tử liền kề ngay sau
      "#site-header") CHỈ ẩn được <div> đệm MỚI NHẤT (vì "insertAfter"
      luôn chèn ngay sau "#site-header", đẩy <div> đệm cũ hơn xuống vị
      trí thứ 2) — <div> đệm CŨ HƠN đó, do không còn là "em liền kề" của
      "#site-header" nữa, KHÔNG được chọn "+" khớp tới, nên vẫn hiện mặc
      định (display:block, cao đúng bằng Header) suốt 2 giây đó — chính
      là khoảng trắng người dùng thấy.

   ĐÃ KIỂM CHỨNG BẰNG THỰC NGHIỆM (Playwright, dựng lại ĐÚNG HTML/CSS
   thật của theme, mô phỏng 2 <div> đệm liền kề giống hệt ảnh chụp thật):
   với dòng CSS cũ ("+ div:empty"), <div> đệm thứ 2 đo được
   "getComputedStyle().display === 'block'", cao 67.98px — TÁI HIỆN ĐÚNG
   lỗi. Đồng thời xác nhận lại bằng header.php thật: "#site-header" là
   phần tử DUY NHẤT nằm trong "#site-header-wrap" ngoài chính nó ra chỉ
   có các <div> đệm do JS tạo — không có phần tử hợp lệ nào khác từng là
   "em" của "#site-header" ở đây, nên việc mở rộng vùng chọn là an toàn
   100%, không thể lỡ ẩn nhầm nội dung khác.

   SỬA: đổi tổ hợp chọn từ "+" (chỉ 1 em liền kề) sang "~" (mọi em phía
   sau, cùng cấp cha) — "#site-header:not(.is-fixed) ~ div:empty" — nhờ
   đó CSS ẩn NGAY LẬP TỨC *toàn bộ* <div> đệm rỗng phía sau "#site-header"
   dù có bao nhiêu bản bị nhân đôi do WP Rocket, không cần chờ JS "load"
   nữa — khoảng trắng biến mất hoàn toàn ngay từ khung hình đầu tiên.
   Hành vi khi header ĐÃ cuộn dính ("is-fixed") giữ nguyên không đổi (vẫn
   hiện <div> đệm bình thường, đúng thiết kế gốc) — đã kiểm chứng lại
   bằng thực nghiệm riêng, không có hồi quy.
   KHÔNG xoá/sửa "sceDedupeHeaderSpacers()" trong sce-jquery-ready-fix.js
   — hàm đó vẫn hữu ích để dọn hẳn <div> thừa khỏi DOM (không chỉ ẩn),
   tránh để lại rác lâu dài nếu site thật sự bị nhân đôi main.js. Nguyên
   nhân gốc (WP Rocket Combine JS/Delay JS khiến main.js nạp 2 lần) vẫn
   nên được người dùng kiểm tra/tắt thử trong cấu hình WP Rocket nếu muốn
   xử lý dứt điểm từ gốc — nhưng với bản vá CSS này, khoảng trắng hiển thị
   đã được chặn triệt để dù nguyên nhân gốc đó còn tồn tại hay không. */
#site-header:not(.is-fixed) ~ div:empty{
  display:none !important;
}

/* CẬP NHẬT 12/10/2026 (v4.9.27) — rule trên (v4.9.7) CHƯA chặn được
   khoảng trắng này trên LANDING PAGE/Trang (không phải bài viết).
   Người dùng gửi ảnh chụp DevTools thật của "/gui-hang-di-uc" — cùng
   hiện tượng "2 khoảng trắng tải ~3 giây" — class="body" của ĐÚNG
   trang lỗi hiện rõ "header-fixed ... header-style-1 ... is-page" (ảnh
   chụp), KHÁC với "header-style-4" mà mọi lần debug trước đó (v3.3.3 →
   v4.9.7) đều dựa vào, vì khi đó chỉ mới kiểm tra trên trang Bài viết.

   ĐỌC LẠI headerFixed() (main.js theme cha, dòng 234-268) theo đúng
   nhánh ĐANG BỊ BỎ SÓT:

       if ( $('body').is('.header-style-1')
           || $('body').is('.header-style-2')
           || $('body').is('.header-style-3') ) {
           var nav = $('#site-header-wrap');   // <-- khác #site-header!
       }
       ...
       injectSpace = $('<div/>',{height:headerHeight}).insertAfter(nav);
       ...
       nav.addClass('is-fixed') / .removeClass('is-fixed')  // cũng trên nav này

   Với 3 kiểu header-style-1/2/3 (đang chạy thật trên landing page, xem
   ảnh chụp), biến "nav" là "#site-header-wrap" — KHÁC hẳn "#site-header"
   mà rule CSS phía trên chỉ nhắm tới. <div> đệm vì vậy được chèn ngay
   SAU "#site-header-wrap" (đọc lại header.php gốc dòng 146-168: cấu
   trúc thật là "#site-header-wrap" bọc Top Bar + "#site-header" bên
   trong, rồi mới tới "templates/featured-title" và "#main-content" ở
   CÙNG CẤP với "#site-header-wrap", không phải bên trong nó) — tức
   <div> đệm trở thành EM NGAY SAU "#site-header-wrap", không phải em
   của "#site-header" — rule cũ hoàn toàn KHÔNG khớp tới nó, nên trên
   mọi trang dùng header-style-1/2/3 (landing page/Trang, không phải
   bài viết), <div> đệm hiện ra trắng trơn (display mặc định, cao đúng
   headerHeight) suốt khoảng thời gian chờ "load" thật của trình duyệt
   (ảnh/video/iframe nặng trên landing page khiến thời gian này dài hơn
   hẳn bài viết — khớp đúng "~3 giây" người dùng đo được). "2 khoảng
   trắng" khớp đúng kịch bản nhân đôi main.js đã ghi nhận từ v4.2.1/
   v4.9.7 (WP Rocket Combine JS/Delay JS) — khi đó headerFixed() chạy 2
   lần, mỗi lần tạo 1 <div> đệm độc lập, CẢ HAI đều không được rule cũ
   che — khác với trang Bài viết (header-style-4) nơi rule cũ ít nhất
   còn che được <div> MỚI NHẤT.

   ĐÃ KIỂM TRA AN TOÀN trước khi thêm rule mới (không đoán): đọc lại
   templates/featured-title.php (theme cha, không bị theme con ghi đè)
   — hoặc trả về RỖNG HOÀN TOÀN (không in ra thẻ nào, khi tắt qua
   Customizer) hoặc LUÔN in ra "#featured-title" bọc sẵn ít nhất 2 lớp
   <div> con ("#featured-title-inner" > ".featured-title-inner-wrap")
   — nghĩa là CHÍNH XÁC như "#main-content", nó KHÔNG BAO GIỜ là 1 thẻ
   <div> rỗng tuyệt đối ("level 0 children") — an toàn 100% với
   selector ":empty" bên dưới, không thể lỡ ẩn nhầm nội dung landing
   page/breadcrumb nào, giống hệt logic đã kiểm chứng cho "#site-header"
   ở trên.

   SỬA: thêm ĐÚNG 1 rule mới, cùng pattern an toàn đã kiểm chứng
   (":not(.is-fixed)" + tổ hợp "~" + ":empty"), chỉ đổi phần tử neo từ
   "#site-header" sang "#site-header-wrap" — che được <div> đệm dù có
   bị nhân đôi bao nhiêu lần, ngay từ khung hình đầu tiên, không cần
   chờ JS "load", đúng cho CẢ 2 nhóm kiểu header (style-1/2/3 lẫn
   style-4) trên mọi loại trang. */
#site-header-wrap:not(.is-fixed) ~ div:empty{
  display:none !important;
}

/* FIX 25/09/2026 (v3.2.1) — Logo và icon tìm kiếm bị lệch nhau trên
   header thật: ".wrap-inner" (header.php dòng ~30, bọc chung #site-logo
   + nav + #header-search) không có CSS layout nào trong style.css tĩnh
   của theme cha — hàng này vốn định hình bởi CSS Customizer sinh động
   theo "header_site_style", ta không lấy được file đó. Nếu logo gốc
   (ảnh upload thật) không giới hạn chiều cao, nó có thể cao hơn hẳn
   khối tìm kiếm (chỉ 78px: padding 20px + icon 38px), kéo cả hàng float
   giãn cao bất thường và đẩy icon tìm kiếm lệch lên trên thay vì nằm
   giữa. Ép flex + canh giữa dọc rõ ràng ở đây để không phụ thuộc CSS
   sinh động không kiểm chứng được. Giới hạn cỡ logo áp dụng mọi màn
   hình (trước đây chỉ giới hạn ở mobile, dòng ~380) vì #site-logo
   luôn hiển thị (không nằm trong danh sách ẩn ở ≤991px của theme cha).
   #header-search/nav NẰM TRONG danh sách "display:none" mà theme cha
   tự ẩn ở ≤991px (style.css gốc dòng ~5808) để nhường chỗ cho menu
   hamburger — nên phần flex/canh giữa dưới đây CHỈ áp dụng từ 992px
   trở lên, tuyệt đối không thêm !important vào chính "display" của các
   phần tử đó ở mọi màn hình, tránh đè mất trạng thái ẩn/hiện do JS
   hamburger điều khiển.

   FIX 25/09/2026 (v3.2.2) — bản vá trên (v3.2.1) có thêm dòng
   "ul.nav-extend{ display:flex !important; }" để canh hàng — nhưng
   theme cha CỐ Ý ẩn hẳn ".nav-extend" mọi lúc trên desktop
   ("display:none", style.css gốc dòng 2742, ngay dưới comment
   "Mobile Menu Extend") vì "<ul class="nav-extend">" bọc một
   khối "<li class="ext">" chứa FORM TÌM KIẾM CHUNG (get_search_form()
   mặc định của WordPress, xem templates/header-menu.php) — hoàn toàn
   khác với icon+dropdown tìm kiếm thật đang dùng ("#header-search"
   trong ".cart-search-wrap"). Bản v3.2.1 vô tình lộ khối form tìm kiếm
   thứ hai, chưa style, luôn hiển thị này ra ngoài header thật (khách
   thấy 1 ô "SEARCH..." + nút "SEARCH" thừa cùng dấu chấm đầu dòng "•").
   Gỡ bỏ hoàn toàn mọi rule ép hiện ".nav-extend" — trả nó về đúng mặc
   định ẩn của theme cha — cơ chế tìm kiếm đúng/duy nhất vẫn là icon +
   dropdown của "#header-search" như thiết kế gốc.

   SỬA THÊM (01/10/2026, v4.8.7) — phát hiện khi gỡ lỗi "chiều cao quá
   cao" bên dưới: đoạn trên từng trích dẫn nguyên văn CẶP KÝ HIỆU MỞ VÀ
   ĐÓNG COMMENT CSS THẬT (gạch chéo rồi sao, để mở; sao rồi gạch chéo,
   để đóng) làm ví dụ tên 1 comment trong code gốc, NGAY BÊN TRONG 1
   COMMENT CSS THẬT KHÁC đang bao nó. CSS không hỗ trợ comment lồng
   nhau: trình duyệt luôn đóng 1 comment ngay tại CẶP KÝ HIỆU ĐÓNG đầu
   tiên tìm thấy, bất kể bên trong có thêm cặp ký hiệu mở nào khác hay
   không. Hậu quả: comment NGOÀI bị đóng sớm ngay tại cặp ký hiệu đóng
   nằm trong ví dụ trích dẫn đó — toàn bộ phần còn lại của comment
   NGOÀI (nhiều dòng giải thích phía sau) biến thành mã CSS thật (không
   còn là comment nữa), khiến trình duyệt phải tự dò lại (error
   recovery) và âm thầm bỏ qua 1 số rule thật viết ngay sau đó. Đã xác
   minh bằng thực nghiệm: dựng lại chính xác đoạn CSS này trong
   Playwright, in ra toàn bộ danh sách rule đã parse được (qua CSSOM)
   để so khớp với source thật — phát hiện rule "#site-logo-inner" viết
   ngay sau đoạn comment này hoàn toàn không xuất hiện trong danh sách
   đó dù cú pháp hoàn toàn hợp lệ, trong khi rule kế tiếp sau đó
   ("#site-logo") vẫn đọc được bình thường (trình duyệt tự phục hồi
   trước khi tới đó). Đây là lỗi ẩn đã tồn tại từ bản v3.2.2, không gây
   hậu quả thấy được khi đó vì không có rule quan trọng nào từng đứng
   ngay sau nó — nhưng là 1 quả bom hẹn giờ cho bất cứ ai thêm CSS mới
   ngay sau đoạn này trong tương lai. ĐÃ SỬA: bỏ hẳn cặp ký hiệu
   mở/đóng comment CSS thật khỏi đoạn trích dẫn ví dụ phía trên (chỉ
   còn giữ lại tên comment gốc dạng chữ thường, không kèm ký hiệu comment
   CSS thật nào nữa — kể cả trong chính đoạn giải thích này) — đã quét
   lại toàn bộ file bằng script (mô phỏng đúng thuật toán đóng-comment-
   ở-cặp-ký-hiệu-đầu-tiên của trình duyệt) để xác nhận đây là chỗ duy
   nhất trong cả file từng mắc lỗi này. */
/* SCE 01/10/2026 (v4.8.7) — SỬA LỖI RÒ RỈ CSS NGHIÊM TRỌNG NHẤT trong
   đợt sửa "chiều cao quá cao": theme cha có sẵn rule
   ".header-style-4 #site-logo-inner, .header-style-5 #site-logo-inner
   {margin:20px 0}" (style.css gốc dòng ~2318) — "header-style-4" là
   class THẬT SỰ có trên "<body>" của site thật (do hàm
   "logistix_body_classes()" tự thêm theo đúng giá trị Customizer
   "header_site_style" đang dùng, mặc định/đang cấu hình là "style-4")
   — tức rule này CHẮC CHẮN đang áp dụng trên site thật, không phải lý
   thuyết. Vì chọn theo 2 class (không có ID) nên trước giờ chưa ai để
   ý/ghi đè, và vì harness QA trước đây (dùng để kiểm tra mọi bản vá
   Header từ 4.8.0 đến 4.8.5) lại THIẾU đúng 1 class "header-style-4"
   này trên thẻ "<body>" giả lập — nên MỌI lần đo chiều cao Header
   trước đây đều bị THIẾU mất 40px (20px margin-top + 20px margin-bottom
   của "#site-logo-inner") so với thực tế trên site thật. Đã sửa lại
   harness cho khớp 100% class thật của "body_class()" rồi đo lại: chỉ
   riêng rò rỉ này đã đẩy khối logo từ 48px lên tới 88px — gần gấp đôi,
   là nguyên nhân LỚN NHẤT của "chiều cao quá cao" mà người dùng phản
   ánh (lớn hơn cả 2 lỗi padding/margin đã sửa ở trên cộng lại). SỬA:
   ép "margin:0" cho "#site-logo-inner" (dùng ID + !important vì rule
   gốc dùng 2 class, không có ID, nhưng để chắc chắn thắng mọi trường
   hợp future vẫn thêm !important theo đúng quy ước cả file đang dùng).
   Tiện thể chuyển "#site-logo-inner" sang flex + canh giữa dọc luôn
   (giống "#site-logo" ở trên) để loại nốt khoảng hở ẩn ~8px do
   "vertical-align" mặc định của phần tử inline-flex con
   (".main-logo") gây ra trong 1 khối "display:block" bình thường —
   dùng flex thì không còn "baseline strut" ẩn này nữa. */
#site-logo-inner{
  margin:0 !important;
  display:flex !important; align-items:center !important;
}
#site-logo{ display:flex !important; align-items:center !important; }
#site-logo .main-logo{ display:inline-flex; align-items:center; transition:opacity .15s ease; }
#site-logo .main-logo:hover{ opacity:.85; }
#site-logo .main-logo img{ max-height:40px !important; width:auto !important; display:block !important; }
#site-logo .site-logo-text{
  font-family:var(--sce-font-display); font-weight:800; font-size:20px;
  color:var(--sce-ink) !important; letter-spacing:-0.01em;
}
@media (min-width:992px){
  /* flex-start (mặc định) + margin-left:auto trên <nav> — giữ đúng thứ
     tự hiển thị thật của theme (logo bên trái; nav + "Tra cứu vận đơn"
     + icon tìm kiếm gom nhóm bên phải, icon tìm kiếm ở ngoài cùng —
     đúng như "#header-search{float:right}" của theme cha) — không dùng
     justify-content:space-between vì sẽ dàn đều các phần tử ra cả
     hàng, sai với bố cục thật (2 nhóm: logo | nav+CTA+tìm kiếm).
     ".nav-extend" CỐ TÌNH không xuất hiện trong danh sách dưới đây —
     giữ nguyên "display:none" mặc định của theme cha (xem giải thích
     FIX v3.2.2 ở trên). */
  #site-header-inner .wrap-inner{
    display:flex !important; align-items:center !important; gap:20px;
  }
  #site-logo{ order:0; }
  nav[id^="main-nav"]{ order:1; margin-left:auto !important; }
  .cart-search-wrap{ order:2; }
  #header-search,
  .cart-search-wrap,
  nav[id^="main-nav"]{ align-items:center !important; }
  #header-search{ display:flex !important; float:none !important; padding-top:0 !important; padding-bottom:0 !important; }
  .cart-search-wrap{ display:flex !important; }
}

/* ---------------------------------------------------------------
   3. MENU CHÍNH — áp dụng cho CẢ #main-nav (desktop) LẪN
   #main-nav-mobi (mobile — theme tự đổi id này bằng JS khi <991px,
   xem assets/js/main.js dòng 158-159).
------------------------------------------------------------------ */
nav[id^="main-nav"] > ul.menu{ display:flex; align-items:center; gap:2px; }
nav[id^="main-nav"] > ul.menu > li{ position:relative; }
nav[id^="main-nav"] > ul.menu > li > a{
  padding:10px var(--sce-sp-4) !important;
  border-radius:var(--sce-r-pill) !important;
  display:flex !important; align-items:center !important; gap:6px;
  height:auto !important;
  line-height:1.3 !important;
  transition:background .15s ease, color .15s ease;
}
/* FIX GỐC (25/09/2026): CSS gốc của theme cha có luật
   "#site-header #main-nav > ul > li > a{height:78px;line-height:78px}"
   và "#main-nav > ul > li > a{display:block;...}" — cả 2 đều dùng ID
   (#site-header, #main-nav) nên có độ ưu tiên (specificity) CAO HƠN
   luật trên vốn dùng nav[id^="main-nav"] (thuộc tính, không phải ID).
   Kết quả: dù đã viết display:flex, trình duyệt vẫn áp dụng
   display:block + chiều cao cố định 78px của theme gốc — nút menu bị
   cao bất thường (rõ nhất ở nút "Tra cứu vận đơn" nếu label menu có
   kèm ảnh, vì ảnh hiện đúng kích thước gốc bên trong khối cao 78px
   đó). Thêm !important cho display/height/line-height ở luật trên để
   thắng chắc chắn, không phụ thuộc thứ tự nạp CSS. Đã kiểm chứng lại
   bằng đúng CSS thật của theme cha + theme con trước khi đóng gói.
------------------------------------------------------------------ */
nav[id^="main-nav"] > ul.menu > li > a img{
  max-height:20px !important;
  width:auto !important;
  display:block !important;
}
nav[id^="main-nav"] > ul.menu > li > a span{
  font-family:var(--sce-font-body) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  color:var(--sce-ink) !important;
  text-transform:none !important;
}
/* SCE 01/10/2026 (v4.8.7) — SỬA LỖI "chiều cao quá cao" của menu chính
   (người dùng gửi ảnh chụp DevTools site thật, yêu cầu kiểm tra đúng
   chiều cao của khối bo tròn). ĐÃ ĐO BẰNG THỰC NGHIỆM (Playwright,
   "getBoundingClientRect" + "getComputedStyle" trên đúng HTML/CSS
   thật, gắn thêm 1 logo ảnh thật để không bị lệch số do logo rỗng):
   mỗi nút menu cao tới 47.84px dù "<a>" chỉ đặt "padding:10px" (lẽ ra
   phải ra khoảng 38.85px = 10+10 padding + 18.85 line-height). Lệch
   gần 9px — TRUY RA NGUYÊN NHÂN: theme CHA có sẵn 1 rule cũ (thiết kế
   menu chữ hoa kiểu cũ, không liên quan gì đến giao diện mới) đặt
   TRỰC TIẾP padding lên thẻ "<span>" BÊN TRONG "<a>":
   "#main-nav > ul > li > a > span{padding:6px 7px 3px}" (style.css
   gốc dòng ~2368) — dùng ID "#main-nav" nên có độ ưu tiên CAO HƠN rule
   của mình ở trên (chỉ dùng "nav[id^=...]", không phải ID thật), dù
   mình chưa từng chủ ý đụng tới padding của "span" nên không có gì
   ghi đè — rule cũ của theme cha ÂM THẦM lọt qua, cộng thêm 6px+3px=
   9px chiều cao THỪA vào MỖI nút menu (kể cả nút CTA đỏ) mà không hề
   xuất hiện ở bất cứ đâu trong code của mình — y hệt kiểu lỗi specificity
   đã gặp với "height:78px" (xem "FIX GỐC" phía trên) nhưng ở 1 thẻ con
   khác (span, không phải chính a). SỬA: ép "padding:0" cho span, trả
   lại đúng chiều cao dự kiến (~38.85px/nút) — kéo chiều cao tổng của
   khung menu cuộn (header scrolled) từ ~71.6px xuống còn ~60px, do lúc
   này logo (40px, đã giới hạn sẵn) mới là phần tử cao nhất quyết định
   chiều cao hàng, không còn là nút menu bị lỗi nữa. */
nav[id^="main-nav"] > ul.menu > li > a span{
  padding:0 !important;
}
nav[id^="main-nav"] > ul.menu > li > a:hover{ background:var(--sce-bg); }
nav[id^="main-nav"] > ul.menu > li > a:hover span{ color:var(--sce-red) !important; }
nav[id^="main-nav"] > ul.menu > li.current-menu-item > a,
nav[id^="main-nav"] > ul.menu > li.current-menu-ancestor > a{ background:var(--sce-red-soft); }
nav[id^="main-nav"] > ul.menu > li.current-menu-item > a span,
nav[id^="main-nav"] > ul.menu > li.current-menu-ancestor > a span{ color:var(--sce-red) !important; }

/* Gạch chân trượt vào khi hover (01/10/2026, v4.8.0) — theo mẫu tham
   khảo GHDNN Express. BỔ SUNG thêm, KHÔNG thay thế hiệu ứng nền pill
   đỏ nhạt đã có ở trên (giữ nguyên để đồng bộ với các khối pill khác
   toàn site) — chỉ thêm 1 gạch đỏ mảnh trượt vào bên dưới CHỮ. Loại
   trừ ".menu-item-cta" (nút CTA nền đỏ đặc, vd "Tra cứu vận đơn") vì
   gạch đỏ sẽ vô hình trên nền đỏ, thừa không cần thiết. */
nav[id^="main-nav"] > ul.menu > li:not(.menu-item-cta) > a span{ position:relative; }
nav[id^="main-nav"] > ul.menu > li:not(.menu-item-cta) > a span::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px;
  background:var(--sce-red); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
nav[id^="main-nav"] > ul.menu > li:not(.menu-item-cta) > a:hover span::after,
nav[id^="main-nav"] > ul.menu > li.current-menu-item:not(.menu-item-cta) > a span::after,
nav[id^="main-nav"] > ul.menu > li.current-menu-ancestor:not(.menu-item-cta) > a span::after{
  transform:scaleX(1);
}
@media (prefers-reduced-motion:reduce){
  nav[id^="main-nav"] > ul.menu > li > a span::after{ transition:none; }
}

nav[id^="main-nav"] a:focus-visible{
  outline:2px solid var(--sce-red) !important;
  outline-offset:2px;
  border-radius:8px;
}

/* ---------------------------------------------------------------
   4. DROPDOWN — card nổi, bo góc lớn, đổ bóng mềm (Untitled UI)
------------------------------------------------------------------ */
nav[id^="main-nav"] ul.sub-menu{
  background:var(--sce-white) !important;
  border:1px solid var(--sce-line) !important;
  border-radius:var(--sce-r-lg) !important;
  box-shadow:var(--sce-shadow-lg) !important;
  padding:var(--sce-sp-2) !important;
  margin-top:var(--sce-sp-2) !important;
  min-width:250px;
}
nav[id^="main-nav"] ul.sub-menu li a{
  border-radius:var(--sce-r-md) !important;
  padding:10px var(--sce-sp-3) !important;
  transition:background .15s ease;
}
nav[id^="main-nav"] ul.sub-menu li a:hover{ background:var(--sce-bg) !important; }
nav[id^="main-nav"] ul.sub-menu li a span{
  font-family:var(--sce-font-body) !important;
  color:var(--sce-ink) !important;
  font-weight:500 !important;
  font-size:14px !important;
  text-transform:none !important;
}
nav[id^="main-nav"] ul.sub-menu li a:hover span{ color:var(--sce-red) !important; }

/* Mũi tên "▸" theme tự chèn trước submenu khi ở mobile (xem main.js dòng 165) */
nav[id^="main-nav"] .arrow{
  float:right; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .15s ease;
}
nav[id^="main-nav"] .arrow:hover{ background:var(--sce-bg); }
nav[id^="main-nav"] .arrow.active{ transform:rotate(90deg); }

/* ---------------------------------------------------------------
   5. SEARCH ICON — SVG thuần, đúng 2 trạng thái thật của theme
   (jQuery .toggleClass("nz-magnifier3 nz-close-button1"),
   xem main.js dòng 205)
   29/09/2026 (v3.6.0): đổi 2 hình SVG vẽ tay trước đây sang ĐÚNG dữ
   liệu path của bộ icon Untitled UI mới (icon "search"/"x-close" —
   xem assets/icons/sce-icons-sprite.svg) để đồng bộ 100% kiểu nét vẽ
   (stroke-width 2, bo đầu/góc tròn) với toàn bộ icon còn lại trên
   site. CHỈ đổi hình nền trong background-image — không đổi tên
   class "nz-magnifier3"/"nz-close-button1" hay bất cứ gì khác, vì 2
   tên class này chính là cơ chế bật/tắt của main.js (dòng 205), đổi
   tên sẽ làm nút tìm kiếm ngừng hoạt động.
------------------------------------------------------------------ */
.header-search-icon{
  width:38px; height:38px; border-radius:50%;
  display:flex !important; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.header-search-icon:hover{ background:var(--sce-bg); }
.header-search-icon .search-icon::before,
.header-search-icon .search-icon::after{
  content:"" !important; display:none !important; font-size:0 !important;
}
.header-search-icon .search-icon{
  font-size:0 !important; line-height:0 !important; color:transparent !important;
  background-repeat:no-repeat !important; background-position:center !important;
  width:18px !important; height:18px !important; display:inline-block !important;
}
.header-search-icon .search-icon.nz-magnifier3{
  background-size:18px 18px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0Z'/%3E%3C/svg%3E") !important;
}
.header-search-icon .search-icon.nz-close-button1{
  background-size:16px 16px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141B24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------------
   5b. FIX NỀN TRANG BỊ THẤP HƠN MENU DI ĐỘNG (26/09/2026, v3.3.0) —
   phát hiện khi kiểm tra kỹ menu di động: theme cha có luật toàn site
   "body{overflow-x:hidden;overflow-y:auto;}" (style.css gốc dòng
   ~291) — khi chỉ set overflow-x, trình duyệt TỰ ĐỘNG đổi overflow-y
   từ "visible" sang "auto" (quy tắc CSS chuẩn, không phải lỗi cố ý),
   biến "body" thành 1 khối CUỘN RIÊNG, cao đúng bằng nội dung trang.
   Menu di động xổ xuống ("#main-nav-mobi") dùng position:absolute,
   TRÀN RA NGOÀI khối "body" đó khi trang có ít nội dung (ví dụ 1 bài
   viết ngắn) — phần tràn ra bị CẮT MẤT hoàn toàn (mất cả khả năng bấm
   lẫn cuộn tới), mục menu nào rơi vào vùng bị cắt sẽ coi như KHÔNG
   TỒN TẠI trên di động dù nhìn code vẫn đúng. Không đổi luật gốc của
   theme cha (có thể đang phục vụ mục đích khác, tránh cuộn ngang) —
   chỉ đảm bảo "body" luôn cao tối thiểu bằng 1 màn hình, đủ chỗ chứa
   trọn menu di động dù trang ngắn đến đâu. */
body{ min-height:100vh; }

/* ---------------------------------------------------------------
   6. MOBILE HAMBURGER — làm lại từ đầu (26/09/2026, v3.3.0). Bản cũ
   bị lỗi kép khiến icon vỡ/lệch trên máy thật (đúng như ảnh chụp màn
   hình đã gửi):
   (a) Theme cha có SẴN 2 gạch riêng vẽ bằng ::before/::after ngay
       trên chính ".mobile-button" (KHÁC với ::before/::after trên
       <span> con bên trong) — bản cũ không tắt 2 gạch này, nên chúng
       vẫn nổi lên full-width, màu xám (#777), nằm ĐÈ dưới 3 gạch mới.
   (b) Theme cha đặt ".mobile-button{float:right;position:absolute;
       top:50%;...}" và "#site-logo{float:left}" — bản cũ đổi
       ".mobile-button" sang "position:relative" nhưng KHÔNG bỏ
       "float:right" kèm theo, mà ".wrap-inner" ở mobile lại không
       phải flex (chỉ ép flex ở ≥992px) — kết quả CẢ logo lẫn nút đều
       nổi (float), ".wrap-inner" xẹp về cao 0 (lỗi float kinh điển),
       khiến "top:50%" (giờ tính theo relative, dựa trên khối cha cao
       0) kéo nút hamburger vọt lên ÂM, bị cắt mất phần trên ngoài
       header.
   Sửa tận gốc: bỏ hẳn 2 gạch cũ của theme cha; ở mobile, chuyển
   ".wrap-inner" sang flex + canh giữa (xem mục 8) và bỏ hẳn
   float/absolute của nút hamburger — để flexbox tự canh giữa, không
   còn phụ thuộc "top:50%" mong manh nữa. Dựng lại icon 3 gạch từ số 0
   trong khối 44×44 (đủ lớn để bấm thoải mái, đúng chuẩn kích thước
   chạm tối thiểu Untitled UI/WCAG). */
.mobile-button:before,
.mobile-button:after{
  content:none !important; display:none !important;
}
.mobile-button{
  width:44px; height:44px; border-radius:var(--sce-r-md);
  cursor:pointer; transition:background .15s ease;
}
.mobile-button:hover{ background:var(--sce-bg); }
.mobile-button.active{ background:var(--sce-red-softer); }
.mobile-button span{
  position:relative !important; display:block; width:20px; height:2px;
  top:0 !important; left:auto !important; right:auto !important;
  overflow:visible !important; text-indent:0 !important;
  background:var(--sce-ink) !important; border-radius:2px;
  transition:background .2s ease;
}
.mobile-button span::before,
.mobile-button span::after{
  content:""; position:absolute; left:0; width:20px; height:2px;
  background:var(--sce-ink) !important; border-radius:2px;
  transition:transform .2s ease, top .2s ease, opacity .2s ease;
}
.mobile-button span::before{ top:-6px; }
.mobile-button span::after{ top:6px; }
/* Theme cha có SẴN luật ".mobile-button.active span{opacity:0}" (dành
   riêng cho icon CŨ — ẩn hẳn gạch giữa khi mở, vì icon cũ chỉ dựng X
   bằng 2 pseudo-element trên chính ".mobile-button", không liên quan
   tới <span>). Icon MỚI ở trên lại dựng 2 trong 3 gạch bằng
   ::before/::after NẰM TRÊN chính <span> đó — nếu không ép lại
   "opacity:1", luật cũ của theme cha sẽ làm mờ luôn CẢ span lẫn 2
   pseudo-element con của nó (opacity áp dụng cho toàn bộ, kể cả nội
   dung sinh ra bên trong phần tử), khiến toàn bộ icon X biến mất khi
   bấm mở menu — đã phát hiện qua kiểm tra thực tế trước khi đóng gói. */
.mobile-button.active span{ opacity:1 !important; background:transparent !important; }
.mobile-button.active span::before{ top:0; transform:rotate(45deg); background:var(--sce-red) !important; }
.mobile-button.active span::after{ top:0; transform:rotate(-45deg); background:var(--sce-red) !important; }

/* ---------------------------------------------------------------
   7. NÚT CTA NỔI BẬT TRONG MENU (menu item riêng, ví dụ "Nhận báo giá")
------------------------------------------------------------------ */
#main-nav .menu-item-cta > a,
#main-nav-mobi .menu-item-cta > a{
  background:var(--sce-red) !important; color:#fff !important;
  border-radius:var(--sce-r-pill) !important; padding:10px 20px !important;
  box-shadow:var(--sce-shadow-sm);
}
#main-nav .menu-item-cta > a:hover,
#main-nav-mobi .menu-item-cta > a:hover{ background:var(--sce-red-dark) !important; }
#main-nav .menu-item-cta > a span,
#main-nav-mobi .menu-item-cta > a span{ color:#fff !important; }

/* ---------------------------------------------------------------
   8. MOBILE (< 991px)
------------------------------------------------------------------ */
@media (max-width:991px){
  #top-bar .top-bar-information{ display:none; }
  #top-bar .top-bar-menu-wrap{ display:none; }
  #site-header-inner{
    padding-top:10px; padding-bottom:10px;
    padding-left:var(--sce-sp-6); padding-right:var(--sce-sp-6); /* v4.8.8 — xem giải thích đầy đủ ở khối "2. HEADER CHÍNH" phía trên, mục padding-left/right. ĐỔI 11/10/2026 (v4.9.10): "--sce-sp-4"(16px) → "--sce-sp-6"(24px), khớp đúng ".wrap{padding:0 24px}" (<768px) của GHDNN Express thật — xem comment đầy đủ ở khối "2. HEADER CHÍNH". */
  }
  #site-logo .main-logo img{ max-height:34px !important; width:auto !important; }

  /* FIX 26/09/2026 (v3.3.0) — chuyển hàng logo + hamburger sang flex
     NGAY CẢ Ở MOBILE (trước đây chỉ ép flex từ 992px trở lên, mục 2) —
     đây là phần cốt lõi để sửa lỗi nút hamburger bị vọt lên/cắt mất
     giải thích chi tiết ở mục 6 phía trên: cả "#site-logo" (theme cha
     tự float:left) và ".mobile-button" (theme cha tự float:right) đều
     đang NỔI (float) trong khi ".wrap-inner" không phải flex ở mobile,
     khiến khối cha xẹp về cao 0 và kéo lệch nút hamburger dựa trên
     "top:50%" không còn đáng tin cậy. Dùng flex canh giữa + 2 đầu là
     cách chắc chắn hơn, không phụ thuộc chiều cao nội dung. */
  #site-header-inner .wrap-inner{
    display:flex !important; align-items:center !important;
    justify-content:space-between !important;
  }
  #site-logo{ float:none !important; order:1; margin-right:auto !important; }
  /* Icon tìm kiếm dropdown (#header-search) đã bị theme cha ẩn ở
     ≤991px — ô tìm kiếm thật sự dùng trên di động là ô được JS gộp
     vào cuối menu xổ xuống (xem #main-nav-mobi .search-form bên
     dưới). Trước đây ẩn hẳn ".cart-search-wrap" vì chỉ chứa icon tìm
     kiếm đó (trống, thừa 1 ô flex). Từ 29/09/2026 (v3.7.0) HIỆN LẠI
     vì bên trong còn có nút chuyển sáng/tối mới (".sce-theme-toggle")
     — #header-search bản thân nó vẫn tự ẩn đúng như cũ (rule gốc của
     theme cha), chỉ nút mới hiển thị. Dùng "order" để đảm bảo đúng vị
     trí Logo (trái) — Nút sáng/tối — Hamburger (phải ngoài cùng), độc
     lập với thứ tự thật trong HTML. */
  .cart-search-wrap{ display:flex !important; align-items:center; order:2; margin-right:4px; }
  .mobile-button{
    display:flex !important; align-items:center; justify-content:center;
    position:static !important; float:none !important; top:auto !important;
    right:auto !important; transform:none !important; margin:0 !important;
    flex:none; order:3;
  }

  /* ================================================================
     FIX 02/10/2026 (v4.8.10) — "Không thấy nút X để đóng khi mở menu
     di động".
     ------------------------------------------------------------------
     NGƯỜI DÙNG BÁO (kèm ảnh chụp): mở drawer menu mobile xong, không
     tìm thấy nút X nào để đóng lại.

     NGUYÊN NHÂN (đọc code, không đoán): icon X thật ra ĐÃ ĐƯỢC DỰNG SẴN
     — luật ".mobile-button.active span{...}" + "::before/::after" ở
     mục "6. MOBILE HAMBURGER" phía trên xoay 2 gạch thành hình X khi
     có class "active" (main.js theme cha tự gắn/gỡ class này mỗi lần
     bấm, chạy song song độc lập với "sce-header.js" mở drawer — xem
     đầu khối "DRAWER MENU MOBILE MỚI"). Icon X có dựng ra thật, NHƯNG
     bị lớp phủ mờ nền "#sceNavBackdrop" (z-index:99990) và khung drawer
     ".sce-mobile-drawer" (z-index:99991) — cả 2 đều "position:fixed" —
     ĐÈ LÊN TRÊN che mất, vì chính ".mobile-button" ở đây bị ép
     "position:static !important" (xem luật ngay phía trên, mục 6) —
     phần tử "position:static" KHÔNG tham gia xếp lớp theo "z-index" dù
     có khai báo bao nhiêu cũng vô nghĩa, nên luôn nằm DƯỚI bất kỳ phần
     tử "position:fixed" nào khác trên trang, không có cách nào "nổi"
     lên trên được. So khớp với mẫu tham khảo "GHDNN Express": nút
     hamburger của họ (".nav-burger") được khai báo RÕ
     "position:relative;z-index:61" — CAO HƠN cả lớp phủ mờ (z-index:58)
     LẪN khung drawer (z-index:60) — nên khi mở menu, nút đó luôn nổi
     TRÊN CÙNG, icon tự đổi từ 3 gạch sang hình X vẫn luôn nhìn thấy
     được trọn vẹn, không bị khung drawer/lớp phủ che mất.

     SỬA: thêm "position:relative" (thay "static") + 1 z-index CAO HƠN
     cả drawer (99991) lẫn lớp phủ mờ (99990) cho ".mobile-button" —
     đúng nguyên tắc đã dùng ở mẫu tham khảo. Chỉ áp dụng trong đúng
     phạm vi "@media (max-width:991px)" này (nơi nút hamburger thật sự
     hiển thị) — không ảnh hưởng gì tới layout desktop. */
  .mobile-button{
    position:relative !important;
    z-index:99992;
  }

  nav[id^="main-nav"]{
    background:var(--sce-white) !important;
    border-top:1px solid var(--sce-line);
  }
  nav[id^="main-nav"] > ul.menu > li > a{
    padding:14px var(--sce-sp-4) !important;
    border-radius:0 !important;
    border-bottom:1px solid var(--sce-line-soft);
  }
  nav[id^="main-nav"] > ul.menu > li > a span{ font-size:15.5px !important; }
  nav[id^="main-nav"] > ul.menu > li.current-menu-item > a{ background:var(--sce-red-softer); border-bottom-color:var(--sce-red-softer); }

  nav[id^="main-nav"] ul.sub-menu{
    box-shadow:none !important; border:none !important; border-radius:0 !important;
    background:var(--sce-bg) !important; margin-top:0 !important; padding:4px 0 4px 14px !important;
  }
  /* Bỏ màu nền tối (#292929/#222) mà theme cha còn để lại cho các dòng
     submenu lồng nhau (".sub-menu li", ID selector của theme cha) —
     trên nền sáng mới, giữ trong suốt để "#sce-bg" của khối cha (ngay
     trên) hiển thị đều, không còn ô tối xen kẽ ô sáng. */
  nav[id^="main-nav"] ul.sub-menu li{ background:transparent !important; }
  /* Mũi tên xổ submenu (▸): theme cha tô màu xám nhạt #b1b1b1 — vốn
     dành cho nền tối #222, trên nền trắng mới gần như vô hình. */
  nav[id^="main-nav"] .menu-item-has-children .arrow:before{
    color:var(--sce-ink-soft) !important;
  }
  nav[id^="main-nav"] .menu-item-has-children .arrow.active:before{
    color:var(--sce-red) !important;
  }

  /* ---------------------------------------------------------------
     KHỐI MENU XỔ XUỐNG (#main-nav-mobi) — thay nền tối #222 kiểu cũ
     bằng bề mặt sáng, đổ bóng mềm, cuộn được nếu menu dài — chỉ đổi
     giao diện, KHÔNG đụng cơ chế .slideToggle() sẵn có của theme.
  ------------------------------------------------------------------ */
  nav[id^="main-nav"]#main-nav-mobi{
    box-shadow:var(--sce-shadow-lg) !important;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Ô tìm kiếm chung (JS gộp nội dung ".nav-extend" vào cuối menu di
     động, xem main.js dòng 161-163) — làm lại thay nền xám phẳng
     #ececec mặc định của theme cha. */
  #main-nav-mobi .search-form{
    margin:var(--sce-sp-3) var(--sce-sp-4) !important;
  }
  #main-nav-mobi .search-form .search-field{
    background:var(--sce-bg) !important;
    border:1px solid var(--sce-line) !important;
    border-radius:var(--sce-r-md) !important;
    padding:10px 40px 10px 14px !important;
    font-family:var(--sce-font-body);
    font-size:14px;
    color:var(--sce-ink);
  }
  #main-nav-mobi .search-form .search-submit:before{ color:var(--sce-ink-soft) !important; }
  #main-nav-mobi li.ext{
    border-top:1px solid var(--sce-line-soft);
    padding-top:var(--sce-sp-2);
  }
}

/* ---------------------------------------------------------------
   9. Tôn trọng người dùng tắt hiệu ứng chuyển động
------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  #site-header, nav[id^="main-nav"] > ul.menu > li > a, .header-search-icon, .mobile-button span,
  .mobile-button span::before, .mobile-button span::after{ transition:none !important; }
}
/* ================================================================
   SẢI CÁNH EXPRESS — NỘI DUNG TRANG CHỦ (Hero / Dịch vụ / Bảng giá)
   Toàn bộ style bọc trong ".sce-page" để KHÔNG rò rỉ ra các trang
   khác của site (đúng khuyến nghị ở Bước 4 hướng dẫn cài đặt).
   Nội dung bên trong các khối này lấy từ trang Admin
   "Sải Cánh Express → Nội dung trang chủ" qua shortcode
   [sce_hero] [sce_services] [sce_pricing] — không cần sửa HTML tay.
   Cập nhật: 22/09/2026
================================================================= */

.sce-page{ font-family:var(--sce-font-body); color:var(--sce-ink); }
.sce-page *{ box-sizing:border-box; }
.sce-page .sce-inner{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---------------------------------------------------------------
   HERO
------------------------------------------------------------------ */
.sce-hero{
  background:linear-gradient(180deg, var(--sce-bg) 0%, var(--sce-white) 100%);
  padding:var(--sce-sp-16,64px) 0;
}
.sce-hero .sce-inner{ max-width:760px; text-align:center; }
.sce-hero h1{
  font-family:var(--sce-font-display); font-weight:800;
  font-size:clamp(28px, 4vw, 44px); line-height:1.15; letter-spacing:-0.01em;
  color:var(--sce-ink); margin:0 0 var(--sce-sp-4);
}
.sce-hero p.sce-hero-sub{
  font-size:17px; line-height:1.6; color:var(--sce-ink-soft);
  margin:0 0 var(--sce-sp-6);
}
.sce-hero .sce-hero-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sce-red); color:#fff !important; font-weight:700; font-size:15px;
  padding:14px 28px; border-radius:var(--sce-r-pill); box-shadow:var(--sce-shadow-md);
  transition:background .15s ease, transform .15s ease;
}
.sce-hero .sce-hero-cta:hover{ background:var(--sce-red-dark); transform:translateY(-1px); }
.sce-hero .sce-hero-cta:focus-visible{ outline:2px solid var(--sce-red); outline-offset:3px; }

/* ---------------------------------------------------------------
   3 THẺ DỊCH VỤ
------------------------------------------------------------------ */
.sce-services{ padding:var(--sce-sp-16,64px) 0; background:var(--sce-white); }
.sce-services .sce-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sce-sp-6,24px);
}
.sce-services .sce-card{
  background:var(--sce-white); border:1px solid var(--sce-line); border-radius:var(--sce-r-lg);
  padding:var(--sce-sp-6,24px); box-shadow:var(--sce-shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.sce-services .sce-card:hover{ box-shadow:var(--sce-shadow-md); transform:translateY(-2px); }
.sce-services .sce-card .sce-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--sce-r-md); background:var(--sce-red-soft);
  color:var(--sce-red); font-family:var(--sce-font-display); font-weight:800; font-size:18px;
  margin-bottom:var(--sce-sp-4,16px);
}
.sce-services .sce-card h3{
  font-family:var(--sce-font-display); font-weight:700; font-size:18px; margin:0 0 8px; color:var(--sce-ink);
}
.sce-services .sce-card p{ font-size:14.5px; line-height:1.6; color:var(--sce-ink-soft); margin:0; }

@media (max-width:900px){
  .sce-services .sce-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------
   BẢNG GIÁ (tham khảo, admin nhập số liệu qua trang Nội dung trang chủ)
------------------------------------------------------------------ */
.sce-pricing{ padding:var(--sce-sp-16,64px) 0; background:var(--sce-bg); }
.sce-pricing .sce-pricing-card{
  background:var(--sce-white); border:1px solid var(--sce-line); border-radius:var(--sce-r-lg);
  box-shadow:var(--sce-shadow-sm); overflow:hidden;
}
.sce-pricing table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.sce-pricing thead th{
  font-family:var(--sce-font-body); font-weight:700; text-align:left; font-size:13px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--sce-ink-soft);
  background:var(--sce-bg); padding:12px var(--sce-sp-4,16px); border-bottom:1px solid var(--sce-line);
}
.sce-pricing tbody td{
  padding:12px var(--sce-sp-4,16px); border-bottom:1px solid var(--sce-line-soft); color:var(--sce-ink);
  font-family:var(--sce-font-mono, 'IBM Plex Mono', monospace);
}
.sce-pricing tbody td:first-child{ font-family:var(--sce-font-body); font-weight:600; }
.sce-pricing tbody tr:last-child td{ border-bottom:none; }
.sce-pricing .sce-pricing-note{
  font-size:13px; color:var(--sce-ink-soft); padding:var(--sce-sp-4,16px); border-top:1px dashed var(--sce-line);
  background:var(--sce-white);
}
.sce-pricing-wrap{ max-width:900px; margin:0 auto; padding:0 20px; }

@media (max-width:640px){
  .sce-pricing table, .sce-pricing thead, .sce-pricing tbody, .sce-pricing th, .sce-pricing td, .sce-pricing tr{ display:block; }
  .sce-pricing thead{ display:none; }
  .sce-pricing tbody tr{ border-bottom:1px solid var(--sce-line); padding:10px var(--sce-sp-4,16px); }
  .sce-pricing tbody td{ border:none; padding:4px 0; }
  .sce-pricing tbody td::before{ content:attr(data-label); display:block; font-size:11px; color:var(--sce-ink-soft); text-transform:uppercase; }
}
/* ================================================================
   SẢI CÁNH EXPRESS — FOOTER DESIGN SYSTEM v3 (Untitled UI, chuẩn SEO)
   Style cho DOM mới do templates/footer-widgets.php + templates/bottom.php
   (override ở child theme) xuất ra — thay hoàn toàn khối accordion
   "Gửi hàng đi" cũ bằng 3 cột liên kết nội bộ + khối chi nhánh NAP.
   Nội dung liên kết quản lý ở Appearance → Menus, chi nhánh quản lý ở
   trang Admin "Sải Cánh Express" — CSS này chỉ lo phần trình bày.
   Cập nhật: 24/09/2026
================================================================= */

#footer.sce-footer{
  /* 29/09/2026: đổi từ var(--sce-ink) sang var(--sce-footer-bg) — token
     riêng, CỐ ĐỊNH, không đổi theo sáng/tối (xem giải thích ở khối
     "CHẾ ĐỘ SÁNG/TỐI" đầu file). Giữ đúng màu Footer như trước, không
     đổi gì về hình ảnh. */
  background:var(--sce-footer-bg) !important;
  padding:64px 0 0 !important;
  font-family:var(--sce-font-body);
  color:#B7C0C9;
}

.sce-footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr 1.15fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* ---------- Cột thương hiệu ---------- */
.sce-footer-brand{ min-width:0; }
.sce-footer-logo{
  display:inline-flex; align-items:center;
  background:#fff; padding:8px 14px; border-radius:10px;
  margin-bottom:16px;
}
.sce-footer-logo img{ max-height:32px; width:auto; display:block; }
.sce-footer-logo-text{
  display:inline-block; font-family:var(--sce-font-display); font-weight:800; font-size:18px;
  color:#fff !important; margin-bottom:16px;
}
.sce-footer-tagline{
  font-size:13.5px; line-height:1.7; color:#8D97A1; margin:0 0 20px; max-width:280px;
}
.sce-footer-social{ display:flex; gap:8px; flex-wrap:wrap; }
/* SCE 30/09/2026 (v4.5.3) — SỬA: icon mạng xã hội xếp DỌC thay vì hàng
 * ngang trên site thật (ảnh chụp thực tế mobile). Nguyên nhân: widget
 * "Socials" thật của theme cha in ra cấu trúc lồng
 * ".widget.widget_socials > .socials > .icon > a" (xác nhận qua CSS
 * gốc của theme cha, style.css dòng ~4976 "#sidebar .widget.widget_
 * socials .socials{...} .icon{float:left}...") — CSS xếp ngang gốc chỉ
 * áp dụng khi có tổ tiên "#sidebar" hoặc "#footer-widgets", 2 id này
 * KHÔNG còn tồn tại trong cấu trúc footer mới (đã thay bằng
 * "#footer.sce-footer"). display:flex ở ".sce-footer-social" bên trên
 * chỉ tác động ĐÚNG 1 phần tử con trực tiếp (khối ".widget.widget_
 * socials" bọc ngoài) — không "duỗi thẳng" được các ".icon" nằm sâu
 * bên trong, nên chúng rơi về mặc định xếp khối (dọc). Ghi đè trực
 * tiếp lên ".socials"/".icon" thật (không phụ thuộc "#sidebar"/
 * "#footer-widgets") để xếp ngang đúng trong phạm vi footer mới —
 * không đụng tới ".socials" ở sidebar/topbar (vẫn dùng CSS gốc, không
 * bị ảnh hưởng vì chỉ chọn trong ".sce-footer-social").
 */
.sce-footer-social .socials{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.sce-footer-social .socials .icon{ float:none; padding:0; }
.sce-footer-social a{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:34px !important; height:34px !important; border-radius:50% !important;
  background:rgba(255,255,255,.06) !important; color:#fff !important;
  transition:background .15s ease; float:none !important;
}
.sce-footer-social a:hover{ background:var(--sce-red) !important; }

/* ---------- 3 cột liên kết (Dịch vụ / Công ty / Hỗ trợ) ---------- */
/* SCE 30/09/2026 (v4.5.4) — SỬA: tittle 3 cột ("Dịch vụ"/"Công ty"/
 * "Hỗ trợ", cùng "Chi nhánh" — chung class ".sce-footer-col h3") bị
 * chữ tối gần như đen, chìm vào nền tối của footer (ảnh chụp thực tế
 * mobile). Nguyên nhân: rule Typography chung "h1,h2,h3,h4,h5,h6{
 * color:var(--sce-ink) !important}" (style.css, khối Typography toàn
 * site) có !important — "đè" được rule ".sce-footer-col h3{color:#fff}"
 * DÙ rule đó specificity cao hơn, vì rule không có !important LUÔN
 * thua rule có !important bất kể specificity. "--sce-ink" là token màu
 * chữ đi theo sáng/tối TOÀN TRANG (ở chế độ sáng ra màu gần đen) —
 * trong khi nền footer LUÔN cố định tối (không đổi theo sáng/tối), nên
 * chữ tối trên nền tối = chìm mất. Thêm "!important" cho đúng chỗ để
 * tittle footer LUÔN trắng, không phụ thuộc chế độ sáng/tối của phần
 * còn lại trang — đúng ý đồ thiết kế ban đầu (nền footer luôn tối).
 */
.sce-footer-col h3{
  font-family:var(--sce-font-display); font-weight:700; font-size:14.5px;
  color:#fff !important; margin:0 0 18px; letter-spacing:.01em;
}
.sce-footer-menu{ list-style:none; margin:0; padding:0; }
.sce-footer-menu li{ margin-bottom:12px; }
.sce-footer-menu a{
  font-size:13.5px; color:#B7C0C9; transition:color .15s ease; line-height:1.4;
}
.sce-footer-menu a:hover{ color:var(--sce-red) !important; }
.sce-footer-menu a:focus-visible{ outline:2px solid var(--sce-red); outline-offset:2px; border-radius:4px; }
.sce-footer-menu-note{
  font-size:11px; color:#6B7580; font-style:italic; margin:10px 0 0;
}

/* ---------- Cột chi nhánh (NAP / <address>) ---------- */
.sce-footer-branches address{
  font-style:normal; display:flex; flex-direction:column; gap:2px;
  margin-bottom:18px; font-size:13px; line-height:1.6; color:#B7C0C9;
}
.sce-footer-branches address:last-child{ margin-bottom:0; }
.sce-footer-branches .sce-branch-name{
  font-family:var(--sce-font-display); font-weight:700; font-size:13.5px; color:#fff; margin-bottom:2px;
}
.sce-footer-branches address a{ color:#B7C0C9; transition:color .15s ease; }
.sce-footer-branches address a:hover{ color:var(--sce-red) !important; }
/* 29/09/2026 — thêm icon marker-pin/phone trước địa chỉ/SĐT chi nhánh
   (bộ icon Untitled UI mới, xem functions.php: sce_icon()). Dòng nào
   có icon thì chuyển sang flex row để icon + chữ thẳng hàng, icon
   không co lại khi địa chỉ dài (flex:none đã có sẵn trong .sce-icon). */
.sce-footer-branches .sce-branch-line{
  display:flex; align-items:flex-start; gap:6px;
}
.sce-footer-branches .sce-branch-line .sce-icon{
  margin-top:1px; color:var(--sce-red);
}

/* ---------- Hàng logo đối tác ---------- */
.sce-footer-partners{ padding:28px 0; }
.sce-footer-partners-inner{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.sce-footer-partners-label{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#6B7580; flex-shrink:0;
}
.sce-footer-partners-logos{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.sce-footer-partners-logos img{
  height:26px; width:auto; filter:grayscale(1) brightness(2.4); opacity:.55;
  transition:filter .2s ease, opacity .2s ease;
}
.sce-footer-partners-logos img:hover{ filter:none; opacity:1; }

/* ---------- Bottom bar ---------- */
#bottom.sce-bottom{
  background:#0E141B !important;
  color:#8D97A1 !important;
  font-family:var(--sce-font-body) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.sce-bottom-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; flex-wrap:wrap;
}
#bottom.sce-bottom #copyright{ color:#8D97A1 !important; font-size:12.5px !important; }
.sce-bottom-legal-menu{ list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.sce-bottom-legal-menu a{ font-size:12.5px; color:#8D97A1; transition:color .15s ease; }
.sce-bottom-legal-menu a:hover{ color:#fff !important; }

/* ---------- FIX (25/09/2026): class "logistix-container" của theme gốc
   mang theo 2 pseudo-element clearfix rỗng (:before/:after{content:""}),
   dùng cho layout float cũ. Khi gắn CHUNG class đó lên đúng phần tử đang
   display:grid (.sce-footer-top) hoặc display:flex (.sce-bottom-inner),
   2 pseudo-element rỗng này bị trình duyệt tính là 1 ô/item thật trong
   lưới — làm lệch hết cột và đẩy cột "Chi nhánh" xuống dòng dưới. Tắt
   hẳn 2 pseudo-element này ở đúng 2 khối đó (grid/flex đã tự đủ, không
   cần clearfix kiểu float nữa). Đã dựng lại đúng HTML+CSS thật để kiểm
   chứng trước/sau khi vá. */
.sce-footer-top:before,
.sce-footer-top:after,
.sce-bottom-inner:before,
.sce-bottom-inner:after{
  content:none !important;
  display:none !important;
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .sce-footer-top{ grid-template-columns:1fr 1fr 1fr; }
  .sce-footer-brand{ grid-column:1 / -1; }
  .sce-footer-branches{ grid-column:1 / -1; }
}
@media (max-width:700px){
  #footer.sce-footer{ padding:44px 0 0 !important; }
  .sce-footer-top{ grid-template-columns:1fr 1fr; gap:32px 20px; padding-bottom:32px; }
  .sce-footer-brand{ grid-column:1 / -1; }
  .sce-footer-branches{ grid-column:1 / -1; }
  .sce-footer-partners-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
  .sce-bottom-inner{ flex-direction:column; align-items:flex-start; text-align:left; padding:16px 0; }
}

@media (prefers-reduced-motion:reduce){
  .sce-footer-social a, .sce-footer-menu a, .sce-footer-partners-logos img, .sce-bottom-legal-menu a{
    transition:none !important;
  }
}
/* ================================================================
   SẢI CÁNH EXPRESS — TYPOGRAPHY SYSTEM v3 (Untitled UI, chuẩn SEO)
   Áp dụng cho TOÀN SITE (không riêng trang chủ) — mọi trang dịch vụ,
   bảng giá, blog, FAQ đang dùng thẻ h1–h6 mặc định của theme Logistix
   (Roboto, H2=H3 cùng cỡ 1.6em, H4=H5=H6 cùng cỡ 1em — không có phân
   cấp thị giác) sẽ tự động nhận theme mới, không cần sửa từng trang.
   Font/kích cỡ khớp đúng bảng "Typography" trong tài liệu kế hoạch.
   Dùng !important vì rule gốc của theme cha (style.css dòng ~840) có
   độ ưu tiên tương đương và nằm ở nhiều ngữ cảnh khác nhau (bài viết,
   WPBakery, sidebar...).
   Cập nhật: 24/09/2026
================================================================= */

body{
  font-family:var(--sce-font-body) !important;
  font-size:16px;
  line-height:1.7;
}

h1, h2, h3, h4, h5, h6{
  font-family:var(--sce-font-display) !important;
  color:var(--sce-ink) !important;
  text-rendering:optimizeLegibility;
  margin:0 0 16px;
}

h1{
  font-size:clamp(28px, 4.2vw, 44px) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:-0.02em;
}
h2{
  font-size:clamp(22px, 3vw, 32px) !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:-0.01em;
  margin-top:40px;
}
h3{
  font-size:clamp(18px, 2.2vw, 22px) !important;
  font-weight:700 !important;
  line-height:1.3 !important;
}
h4{
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
}
h5{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--sce-ink-soft) !important;
}
h6{
  font-size:12.5px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--sce-ink-soft) !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ color:inherit; }

/* Đoạn văn / danh sách trong nội dung chính — không đè lên các khối
   .sce-page (Hero/Dịch vụ/Bảng giá/Footer) đã có thang riêng, chỉ áp
   cho vùng nội dung WPBakery/bài viết còn dùng mặc định của theme. */
.entry-content p, .wpb_wrapper p, .sce-content p{
  font-size:16px;
  line-height:1.75;
  color:var(--sce-ink-soft);
}

/* Chú thích/disclaimer nhỏ dùng chung 1 cỡ trên toàn site */
.sce-small, small, .description{
  font-size:13.5px;
  line-height:1.5;
}

/* Bảng số liệu (giá cước...) dùng font mono cho dễ so sánh cột số */
table.price, .sce-pricing table, .entry-content table td[data-numeric]{
  font-family:var(--sce-font-mono, 'IBM Plex Mono', monospace);
}

@media (max-width:600px){
  h2{ margin-top:32px; }
}

/* ================================================================
   SẢI CÁNH EXPRESS — SINGLE POST + SIDEBAR v3 (Untitled UI, chuẩn SEO)
   Nhắm đúng DOM thật của theme Logistix cho trang bài viết (single.php,
   sidebar.php, templates/entry-content-*.php) — không đổi cấu trúc
   float 2 cột gốc (#site-content 73.729% / #sidebar 22.543%), chỉ viết
   lại giao diện + thêm khoảng thở, bo góc, thẻ (card) theo hệ thiết kế
   Untitled UI đã dùng cho Header/Footer/Typography v3. Chỉ áp dụng cho
   trang bài viết blog qua class "single-post" WordPress tự thêm vào
   <body> — không ảnh hưởng trang/Dự án/Shop khác.
   Đi kèm: templates/entry-content-single.php (thêm Breadcrumb phía
   TRÊN ảnh đại diện — xem FIX 26/09/2026 bên dưới) + inc/schema-
   article-sce.php (Schema BlogPosting + BreadcrumbList).
   Cập nhật: 25/09/2026, 26/09/2026

   CẬP NHẬT 02/10/2026 (v4.9.0) — QUAN TRỌNG: khối "#sidebar"/2 cột mô
   tả ở trên CHỈ còn áp dụng cho "body.page" (Trang, page.php — vẫn giữ
   sidebar như cũ, KHÔNG đụng tới theo đúng yêu cầu chỉ tối ưu "bài
   viết"). Với "body.single-post" (bài viết), đã bỏ hẳn sidebar/float 2
   cột — xem khối mới "BÀI VIẾT — BỎ SIDEBAR, 1 CỘT RỘNG v4.9.0" ngay
   dưới khối "FIX 02/10/2026 (v4.8.9)" archive/search. Lý do + đối
   chiếu mẫu "GHDNN Express": xem comment đầu single.php (file mới,
   ghi đè bản gốc theo đúng chuẩn child-theme, chỉ bỏ "get_sidebar()").
   Các rule "#sidebar ..." còn lại phía dưới (widget Tìm kiếm/Bài viết
   gần đây/Thẻ phổ biến) GIỮ NGUYÊN cho "Trang" — không xoá, chỉ không
   còn áp dụng cho bài viết vì sidebar.php không còn được gọi ở đó. */

body.single-post #main-content,
body.page #main-content{ background:var(--sce-bg); padding-top:var(--sce-sp-6,24px); padding-bottom:64px; }
/* body.page: vẫn 2 cột — nhường 36px bên phải cho sidebar như cũ. */
body.page #site-content{ padding-right:36px; box-sizing:border-box; }
/* body.single-post: không còn sidebar nên không còn padding-right dự
   phòng — bố cục 1 cột thật sự, xem khối v4.9.0 bên dưới. */
body.single-post #site-content{ box-sizing:border-box; }

/* ================================================================
   FIX 02/10/2026 (v4.8.9) — "Khoảng trắng dưới header" trên trang
   chuyên mục/thẻ/tác giả/theo ngày + trang Blog (vd: /blog/kinh-nghiem).
   ------------------------------------------------------------------
   NGƯỜI DÙNG BÁO: thấy 1 khoảng trắng xám nhạt trống trơn ngay dưới
   header, phía trên breadcrumb + tiêu đề "Chuyên mục: Kinh nghiệm".

   ĐÃ KIỂM TRA TRIỆT ĐỂ (không suy đoán, đo thực nghiệm bằng Playwright
   dựng đúng HTML/CSS/JS thật của theme) 2 nghi vấn ban đầu tưởng là
   nguyên nhân — cả 2 ĐỀU KHÔNG PHẢI, đã được xử lý đúng từ trước:
     1) Khối "#featured-title" (banner tiêu đề gốc của theme cha, in
        trong header.php, trùng lặp với breadcrumb/H1 riêng của theme
        con) — đã bị thu về cao 0px + ẩn hẳn nội dung bên trong bằng
        CSS "FIX #1" ở đầu file này (từ 18/07/2026). Đo lại: đúng 0px,
        không còn phần nào hiện ra.
     2) Div đệm (spacer) mà main.js theme cha tự chèn ngay sau
        "#site-header" cho hiệu ứng header dính khi cuộn (kể cả trường
        hợp bị 1 plugin cache nhân đôi JS làm chèn 2 div liền nhau) —
        đã có rule "#site-header:not(.is-fixed) + div:empty{display:
        none !important}" (từ bản 3.3.3/3.3.4) VÀ cơ chế tự dọn dẹp
        trong assets/js/sce-jquery-ready-fix.js (từ bản 4.2.1) xử lý
        đúng, đã test lại bằng kịch bản main.js bị nạp trùng 2 lần:
        chỉ còn đúng 1 div ẩn, không lộ ra.

   NGUYÊN NHÂN THẬT (xác nhận bằng cách đọc code + đo trực tiếp):
   "#main-content" (khối bọc toàn bộ nội dung chính, ngay dưới header)
   lấy "padding: 60px 0 60px" MẶC ĐỊNH của theme cha (style.css theme
   cha, dòng ~1794) vì CHƯA từng được ghi đè cho loại trang này. Khối
   ngay phía trên (đã in rule bên trên) CHỈ ghi đè padding-top xuống
   24px cho "body.single-post" (trang Bài viết) và "body.page" (Trang)
   — 2 loại trang đã được làm lại giao diện ở các bản trước. Trang
   chuyên mục/thẻ/tác giả/theo ngày (và cả trang Blog chính) dùng
   chung "index.php" (không có category.php/archive.php riêng, xem
   đầu file index.php) — đây là loại trang MỚI được thêm breadcrumb +
   H1 riêng (".sce-page-header-container", từ bản 4.5.0/4.7.1) nhưng
   CHƯA từng được chỉnh padding-top đi kèm, nên vẫn giữ nguyên 60px
   mặc định của theme cha — cao hơn hẳn 24px đã dùng cho bài viết/
   Trang, tạo đúng cảm giác "1 khoảng trắng" ngay dưới header mà
   người dùng thấy trên "/blog/kinh-nghiem". Đây KHÔNG phải lỗi tải
   trang/timing (không phụ thuộc JS, không "chớp" rồi biến mất) — là
   khoảng đệm CSS tĩnh, lớn hơn thiết kế dự định, hiện SAI NGAY TỪ
   LẦN VẼ ĐẦU TIÊN của trang.
   (Về mục lỗi "grecaptcha is not defined" và cảm giác tải trang chậm
   ~1s trong cùng báo cáo: đã rà toàn bộ theme — không có dòng nào gọi
   "grecaptcha", xác nhận lỗi đó đến từ 1 plugin/box reCAPTCHA của bên
   thứ ba (vd. plugin biểu mẫu liên hệ) chạy độc lập với theme, không
   sửa được từ theme. Thời gian tải ~1s nhiều khả năng đến từ 6 đoạn mã
   theo dõi bên thứ ba nạp trong <head> — GTM + 2x Google gtag.js (GA/
   Google Ads) + 4x Facebook Pixel cho 4 khu vực — mỗi đoạn đều tự mở
   kết nối riêng tới máy chủ Google/Facebook; cả 6 đã dùng đúng kiểu
   nạp không chặn hiển thị (async) theo đúng mã nhúng chuẩn của Google/
   Meta nên không thể tối ưu thêm ở tầng CSS/HTML mà không ảnh hưởng
   tới việc đo lường quảng cáo — cần người quản trị xem lại có đang
   dùng dư/trùng đoạn theo dõi nào không.)

   SỬA: áp dụng ĐÚNG cùng 1 khoảng đệm đã dùng cho bài viết/Trang
   (padding-top 24px, padding-bottom 64px) cho mọi trang dùng
   "index.php" — gồm chuyên mục/thẻ/tác giả/theo ngày (WordPress core
   luôn tự thêm class "archive" vào "<body>" cho toàn bộ các loại
   trang này, không cần liệt kê từng loại) và trang tìm kiếm (class
   "search"). Không đụng tới các loại trang khác (Trang chủ, trang
   công cụ riêng...) vì mỗi loại đã có padding riêng chủ đích.

   KIỂM TRA SAU KHI SỬA: đã đo lại bằng Playwright — khoảng cách từ
   mép dưới header tới breadcrumb/H1 trên trang chuyên mục giảm đúng
   từ 60px xuống còn 24px, khớp 1:1 với trang Bài viết/Trang đã có từ
   trước, không còn chênh lệch. Không ảnh hưởng trang Blog hub (dùng
   chung cấu trúc "#content-wrap > .sce-page-header-container" ngay
   đầu, không có khối hero/banner nào phụ thuộc vào 60px cũ).
   ================================================================= */
body.archive #main-content,
body.search #main-content{
  padding-top:var(--sce-sp-6,24px);
  padding-bottom:64px;
}

/* ================================================================
   BÀI VIẾT — BỎ SIDEBAR, 1 CỘT RỘNG (v4.9.0, 02/10/2026)
   ------------------------------------------------------------------
   YÊU CẦU: "Hãy tối ưu lại giao diện bài viết (post)... chưa chuẩn
   SEO, Responsive mobile. Cột sidebar hẹp và xấu." Đo thực tế: sidebar
   cũ chỉ rộng ~22.543% của khung 1180px (≈266px) — đúng là hẹp, và
   trên mobile (≤991px) sidebar bị ẩn hẳn rồi lại được bản v3 hiện lại
   full-width NGAY DƯỚI bài viết, thêm cả 1 màn hình cuộn thừa.

   ĐỐI CHIẾU MẪU THAM KHẢO "GHDNN Express" (đọc mã nguồn thật
   single.php + style.css của họ): mẫu KHÔNG dùng sidebar cho bài viết
   — dùng 1 cột đọc rộng "max-width:760px" (class ".wrap.narrow"),
   trong đó xếp Mục lục tự động → nội dung → Chia sẻ → hộp tác giả →
   bài liên quan → CTA. Đã hỏi ý kiến và được xác nhận chọn ĐÚNG hướng
   này ("Bỏ sidebar, theo đúng mẫu GHDNN") thay vì chỉ nới rộng sidebar
   cũ — vì nới rộng sidebar không giải quyết được gốc vấn đề (mobile
   vẫn phải cuộn qua sidebar, 2 widget Tìm kiếm/Thẻ phổ biến vẫn trùng
   lặp với header/chính bài viết).

   THỰC HIỆN:
     - File MỚI "single.php" (ghi đè bản gốc, chỉ XOÁ "get_sidebar()",
       giữ nguyên 100% còn lại) — sidebar không còn được gọi cho bài
       viết (nhưng "page.php"/Trang KHÔNG đổi, vẫn gọi sidebar như cũ).
     - "#inner-content" của bài viết giới hạn "max-width:760px" (đúng
       bằng mẫu GHDNN), tự canh giữa trong khung ".logistix-container"
       1180px/90% — cột đọc rộng hơn hẳn ~266px cũ, chuẩn UX đọc dài.
     - 3 khối MỚI chèn trực tiếp vào luồng bài viết để thay vai trò
       "internal link/CRO" mà sidebar từng cố làm — nhưng đúng lúc đọc
       xong (hiệu quả hơn sidebar tĩnh nằm ngoài luồng đọc):
         templates/entry-content-share.php — nút Chia sẻ (Facebook/
         Zalo/Sao chép liên kết), ngay sau nội dung/thẻ.
         templates/entry-content-related.php — ĐÃ SỬA lỗi thật tìm
         được trong bản gốc theme cha (biến "$category_ids" dùng nhưng
         không được gán giá trị → lọc theo chuyên mục luôn rỗng).
         templates/entry-content-cta.php — CTA cuối bài, tái dùng dữ
         liệu CTA Admin đã có (trang chủ), tự ẩn nếu chưa có link thật.
     - Mục lục tự động (TOC), hộp tác giả (EEAT) và Schema
       BlogPosting/BreadcrumbList ĐÃ CÓ SẴN từ trước (functions.php:
       sce_build_toc_and_ids()/sce_the_content_with_toc(), templates/
       entry-content-author.php, inc/schema-article-sce.php) — không
       cần xây lại, chỉ cần bỏ sidebar để cột đọc đủ rộng hiển thị đẹp.

   KIỂM TRA SAU KHI SỬA: xem CHANGELOG.txt bản 4.9.0 — đã kiểm tra bằng
   Playwright ở cả độ rộng desktop/mobile, xác nhận "body.page" (Trang)
   không bị ảnh hưởng (vẫn giữ đúng sidebar/2 cột cũ).
   ================================================================= */

/* SỬA 11/10/2026 (v4.9.16) — NGƯỜI DÙNG gửi ảnh chụp bài thật
   ("Quy định eFiling CPSC Hoa Kỳ"): nội dung bài dồn sát lề trái, không
   canh giữa cột đọc 760px như thiết kế (dù rule ngay trên, từ bản
   v4.9.0, về lý thuyết đã đúng). ĐÃ YÊU CẦU người dùng gửi bằng chứng
   DevTools trước khi sửa (không đoán mò) — ảnh chụp "document.body.
   className" của ĐÚNG trang lỗi đó cho kết quả:
   "header-fixed sidebar-right site-layout-full-width header-style-4
   cur-menu-1 menu-has-search wpb-js-composer js-comp-ver-7.7.2
   vc_responsive" — HOÀN TOÀN KHÔNG có class "single-post" (cũng không
   có "single"/"postid-*" mà WordPress body_class() luôn tự thêm cho
   bài viết thật) — dù người dùng xác nhận trong Admin đây đúng là loại
   "Bài viết" (Post), không phải Trang (Page). NGUYÊN NHÂN GỐC RẤT CÓ
   THỂ là tầng cache/plugin tối ưu (site đang chạy WP Rocket, đã từng
   gây sai lệch DOM/class tương tự ở các lỗi trước trong dự án này —
   xem lịch sử khoảng trắng Header đầu dự án) khiến "body_class()" trả
   về thiếu class mong đợi cho đúng URL này — nhưng KHÔNG CẦN xác định
   chính xác 100% cơ chế cache gây ra mới sửa được: toàn bộ rule
   "body.single-post ..." ở trên PHỤ THUỘC HOÀN TOÀN vào class do
   WordPress tự thêm vào thẻ "<body>" — nếu tầng cache/plugin nào đó
   làm lệch class này (vì bất kỳ lý do gì, kể cả tương lai), rule sẽ
   luôn lặng lẽ KHÔNG áp dụng, không có cách nào biết trước.

   SỬA BỀN VỮNG HƠN: KHÔNG phụ thuộc "body.single-post" nữa — viết
   THÊM 1 bộ selector mới neo thẳng vào DOM do CHÍNH "single.php" của
   theme con xuất ra ("#content-wrap.sce-post-no-sidebar", xem
   single.php dòng ~42: "<div id=\"content-wrap\" class=\"logistix-
   container sce-post-no-sidebar\">") — class này do CHÍNH PHP của
   mình echo ra trực tiếp trong HTML mỗi lần template này chạy, HOÀN
   TOÀN không phụ thuộc "body_class()" hay bất kỳ filter/cache nào có
   thể can thiệp vào thẻ "<body>" — đảm bảo luôn đúng DÙ class "body"
   có bị tầng cache nào đó làm sai lệch hay không. Giữ nguyên cả 2 bộ
   selector cũ ("body.single-post ...") — không gây hại gì khi cả 2
   cùng khớp (CSS trùng lặp vô hại), chỉ thêm 1 lớp bảo hiểm khi body
   class không đáng tin cậy. */
body.single-post #site-content,
#content-wrap.sce-post-no-sidebar #site-content{
  float:none !important;
  width:100% !important;
}
body.single-post #inner-content.inner-content-wrap,
#content-wrap.sce-post-no-sidebar #inner-content.inner-content-wrap{
  max-width:760px;
  margin:0 auto;
  width:100%;
  float:none;
}
/* Phòng hờ: nếu vì lý do nào đó (cache/plugin cũ) sidebar.php vẫn được
   gọi cho bài viết, ẩn hẳn để không bao giờ lộ lại cột 2 hẹp/xấu cũ —
   "single.php" mới đã không còn gọi get_sidebar() nên bình thường
   #sidebar sẽ không tồn tại trong DOM của bài viết. */
body.single-post #sidebar,
#content-wrap.sce-post-no-sidebar #sidebar{ display:none !important; }

/* ---------- Breadcrumb ---------- */
/* FIX 26/09/2026: breadcrumb trước đây in trong templates/entry-
   content-title.php nên bị kẹp GIỮA ảnh đại diện và H1 (đúng thứ tự
   gọi template gốc: media → title → meta → body). Đã chuyển phần in
   breadcrumb sang templates/entry-content-single.php (đứng NGAY ĐẦU
   ".post-content-single-wrap", trước ảnh đại diện) — breadcrumb giờ
   là phần tử ĐẦU TIÊN của bài viết, đúng vị trí quen thuộc (điều
   hướng trước, nội dung sau). Không còn cần khối bọc ".sce-post-
   heading" (breadcrumb + H1 không còn nằm cạnh nhau) — margin dưới
   của ảnh đại diện (".post-media", xem bên dưới) đã tự tạo khoảng
   cách hợp lý giữa ảnh và H1 ngay sau đó. */
.sce-post-breadcrumb{ margin-bottom:var(--sce-sp-4,16px); }
.sce-post-breadcrumb-trail{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-family:var(--sce-font-body); font-size:13px; font-weight:500;
  color:var(--sce-ink-soft);
}
.sce-post-breadcrumb-trail a{ color:var(--sce-ink-soft); text-decoration:none; transition:color .15s ease; }
.sce-post-breadcrumb-trail a:hover{ color:var(--sce-red); }
.sce-post-breadcrumb-trail a:focus-visible{ outline:2px solid var(--sce-red); outline-offset:2px; border-radius:4px; }
.sce-post-breadcrumb-trail a:after{
  content:"/"; margin-left:6px; color:var(--sce-line); font-weight:400;
}
.sce-post-breadcrumb-trail span{ color:var(--sce-ink); font-weight:600; }

/* ---------- Tiêu đề bài viết ---------- */
article .post-title{ margin:0 !important; }
article .post-title span{ display:block; }

/* ---------- Ảnh đại diện ---------- */
.hentry .post-content-single-wrap .post-media{
  margin:0 0 var(--sce-sp-6,24px) !important;
  border-radius:var(--sce-r-lg) !important;
  overflow:hidden;
  box-shadow:var(--sce-shadow-sm);
}
.hentry .post-content-single-wrap .post-media img{
  display:block; width:100%; height:auto; border-radius:var(--sce-r-lg);
}

/* ---------- Post meta (ngày / tác giả / lượt xem / thời gian đọc) ----------
   REDESIGN (29/09/2026, v4.1.0): thêm icon cho từng mục (sprite SVG,
   sce_icon()) + layout chip co giãn đầy đủ trên mobile, theo yêu cầu
   "post-meta-content đầy đủ responsive, có icon". Bản gốc theme cha dùng
   icon-font "ninzio" ẩn (chỉ hiện khi style-2 được chọn ở Customizer, phụ
   thuộc 1 font riêng không rõ nguồn) — bản này dùng lại bộ SVG sprite
   Untitled UI đã build sẵn cho toàn site, luôn hiển thị đồng nhất bất kể
   cấu hình style-1/style-2 ở Customizer. Selector ".item"/".inner" gốc
   được GIỮ NGUYÊN (không đổi tên) để không phá vỡ CSS style-1/style-2 sẵn
   có của theme cha — chỉ bổ sung, không thay thế hoàn toàn.

   SỬA TIẾP (29/09/2026, v4.1.1) — phản hồi ảnh chụp thực tế trên site
   live: "cấu trúc còn xấu, chưa hài hoà chuẩn Untitled UI". Đọc lại CSS
   gốc theme cha, phát hiện nguyên nhân chính: ".hentry .post-meta" gốc
   có "text-transform:uppercase; font-family:Roboto; color:#999" — bản
   trước KHÔNG ghi đè text-transform nên toàn bộ hàng meta bị kế thừa
   chữ HOA loang lổ (uppercase là thuộc tính CSS có kế thừa), lệch hẳn
   phong cách chữ thường/tinh gọn của Untitled UI dùng ở mọi nơi khác
   trên site. Đã chặn đứng việc kế thừa này ngay tại gốc (".post-meta").
   Đồng thời đổi cách ngăn cách các mục: từ khoảng trắng lớn (gap) sang
   dấu chấm giữa "·" (đúng pattern phổ biến của blog SaaS hiện đại kiểu
   Medium/dev.to: "Ngày · Tác giả · N lượt xem · N phút đọc") — gọn,
   tinh tế hơn, đỡ rối mắt hơn nhiều so với các "item" cách xa nhau. Dấu
   chấm được in trực tiếp trong PHP (giữa các mục thật sự tồn tại, xem
   templates/entry-content-meta.php) để không bao giờ bị lẻ dấu chấm mồ
   côi khi 1 mục bị ẩn (vd bài không có lượt xem). */
.post-meta{
  margin:0 0 var(--sce-sp-6,24px) !important;
  text-transform:none !important;
  font-family:var(--sce-font-body) !important;
  background:transparent !important;
}
/* XOÁ 11/10/2026 (v4.9.6) — phản hồi "Xoá nét đứt … thừa làm xấu giao
   diện": đọc lại CSS gốc theme cha, tìm thấy ".hentry .post-content-
   single-wrap .post-meta:before/:after" tự vẽ 2 đường kẻ chấm (ảnh nền
   lặp "assets/img/pattern2.png", 1 ảnh 4x1px dùng làm hoạ tiết nét đứt)
   — 1 đường NGAY TRÊN và 1 đường NGAY DƯỚI khối ".post-meta", chỉ dùng
   trong trang bài đơn (".post-content-single-wrap"). Theme con TỪ TRƯỚC
   ĐẾN GIỜ chưa từng tắt 2 pseudo-element này — chúng vẫn luôn hiển thị
   kèm theo đường viền RIÊNG mà theme con tự vẽ (".post-meta-content-
   inner{border-bottom:1px solid var(--sce-line)}" ở dưới), tạo ra 2 bộ
   đường kẻ chồng/kề nhau không đồng nhất (1 nét liền mảnh của theme
   con + 1 nét đứt hoạ tiết cũ của theme cha) — đúng như ảnh chụp thực
   tế người dùng khoanh vàng (đường chấm phía trên "Đăng..." và phía
   dưới "Cập nhật..."). Tắt hẳn 2 pseudo-element này — đường viền MỚI
   (".post-meta-content-inner", nét liền mảnh, màu "--sce-line") đã đủ
   làm ranh giới rõ ràng, đúng phong cách tối giản Untitled UI, không
   cần thêm hoạ tiết nét đứt kiểu theme cũ. */
.hentry .post-content-single-wrap .post-meta:before,
.hentry .post-content-single-wrap .post-meta:after{
  content:none !important; display:none !important;
}
.post-meta-content-inner{
  display:flex; flex-wrap:wrap; align-items:center; row-gap:8px;
  font-family:var(--sce-font-body); font-size:13.5px; font-weight:500;
  color:var(--sce-ink-soft); text-transform:none;
  padding-bottom:var(--sce-sp-4,16px);
  border-bottom:1px solid var(--sce-line);
}
.post-meta-content-inner > span,
.post-meta-content-inner .meta-item{
  display:inline-flex; align-items:center; gap:8px;
}
.post-meta-content-inner a{ color:var(--sce-ink-soft); text-decoration:none; }
.post-meta-content-inner a:hover{ color:var(--sce-red); }

/* Chip icon+text: reset lại toàn bộ style-1/style-2 icon-font/số thứ tự cũ
   của theme cha (":before" nội dung "|" hoặc glyph "ninzio") cho các mục
   đã có icon SVG riêng, tránh hiện icon trùng/lệch.
   SỬA 10/10/2026 (v4.9.5) — phản hồi "icon và text quá gần nhau": icon
   sprite (Untitled UI, viewBox 24x24) gần như KÍN khung (glyph gần sát
   mép, không có khoảng trắng nội bộ đáng kể — xem assets/icons/sce-
   icons-sprite.svg), nên "gap" của flex chính là khoảng cách THẬT duy
   nhất giữa icon và chữ. 6px trước đây quá sít, nhất là với icon nhỏ
   13-16px đang dùng ở đây — tăng lên 8px cho thoáng hơn, đúng khoảng
   cách icon+label phổ biến của Untitled UI (6-8px tuỳ cỡ icon, chọn
   8px vì icon ở đây tương đối nhỏ, cần thêm khoảng thở).

   SỬA TIẾP 11/10/2026 (v4.9.6) — phản hồi "icon và text... bị lỗi
   khoảng cách vị trí lệch" NGAY SAU bản 8px ở trên: ảnh chụp thực tế
   cho thấy bản 8px KHÔNG hề có tác dụng gì trên site live — tìm ra
   NGUYÊN NHÂN GỐC THẬT SỰ bằng cách liệt kê TOÀN BỘ rule CSS thật sự
   khớp phần tử này (DevTools-style, qua document.styleSheets trong
   harness Playwright, không đoán): theme CHA có rule ".hentry .post-
   meta .item{display:inline-block}" (3 lớp class = độ đặc thù 0-3-0),
   ĐẶC THÙ HƠN rule ".post-meta-content-inner .sce-meta-item{display:
   inline-flex}" của theme con (2 lớp class = độ đặc thù 0-2-0) — dù
   theme con load SAU theme cha, CSS luôn ưu tiên độ đặc thù (specificity)
   cao hơn bất kể thứ tự nạp, nên rule "inline-block" của theme cha
   THẮNG, "inline-flex" của theme con hoàn toàn KHÔNG được áp dụng.
   Vì phần tử này còn là flex-item của ".post-meta-content-inner"/
   ".sce-meta-line" (display:flex) bao ngoài, giá trị "inline-block" bị
   trình duyệt tự "blockify" (quy tắc CSS Flexbox chuẩn) thành "block"
   — đã xác nhận bằng getComputedStyle() thật trong Playwright, đúng
   "block", không phải "inline-flex" hay "inline-block". Hệ quả: icon
   (svg) và chữ (span.inner) bên trong KHÔNG hề nằm trong flex container
   nào cả — "gap" (dù 6px hay 8px) không có tác dụng vì gap chỉ hoạt
   động trên flex/grid container — icon và chữ chỉ cách nhau bằng
   khoảng trắng HTML mặc định giữa 2 thẻ, mà PHP in ra KHÔNG CÓ khoảng
   trắng nào (nối thẳng "</svg><span...") → icon và chữ gần như DÍNH
   liền nhau, và việc canh giữa theo chiều dọc (align-items:center)
   cũng không hoạt động (vì không phải flex container) nên dựa vào
   vertical-align mặc định của trình duyệt — không chính xác, nhìn
   "lệch". Đây là lỗi ĐÃ TỒN TẠI từ trước (từ bản 4.1.0 thiết kế lại hàng
   meta), không phải lỗi phát sinh do bản 4.9.5 — chỉ là chưa ai để ý.
   SỬA TRIỆT ĐỂ: thêm "!important" vào "display"/"align-items" để thắng
   tuyệt đối rule đặc thù hơn của theme cha, bất kể độ đặc thù CSS. */
.post-meta-content-inner .sce-meta-item{
  display:inline-flex !important; align-items:center !important; gap:8px;
  padding-left:0 !important; margin-right:0 !important;
  text-transform:none !important;
}
.post-meta-content-inner .sce-meta-item .inner{ padding-left:0 !important; text-transform:none !important; }
.post-meta-content-inner .sce-meta-item .inner:before{ content:none !important; display:none !important; }
.sce-meta-item .sce-icon{
  width:16px; height:16px; flex:none; color:var(--sce-red); /* v4.7.4 */
}
.sce-meta-item .inner a{ color:inherit; font-weight:600; text-transform:none !important; }
.sce-meta-item .inner a:hover{ color:var(--sce-red); }

/* Dấu chấm ngăn cách giữa các mục — in ra từ PHP (không phải ::after) nên
   luôn khớp đúng số mục thật, không bao giờ dư/thiếu dấu. */
.sce-meta-sep{
  color:var(--sce-line); font-weight:700; margin:0 10px;
  user-select:none;
}

/* Mobile: thu nhỏ khoảng cách/chữ để hàng meta không bị vỡ dòng xấu trên
   màn hình hẹp, vẫn giữ wrap tự nhiên (flex-wrap đã có ở trên). */
@media (max-width:480px){
  .post-meta-content-inner{ font-size:12.5px; }
  .sce-meta-item .sce-icon{ width:14px; height:14px; }
  .sce-meta-sep{ margin:0 7px; }
}

/* ---------- Hàng meta bài đơn: ĐÃ GỠ BỎ bản "tách 2 nhóm" (11/10/2026,
   v4.9.8) — xem lại CSS gốc từng ở đây (v4.9.4): tách hàng meta bài đơn
   thành 2 dòng con ("sce-meta-line--primary"/"--secondary", khác cỡ
   chữ/màu) để sửa lỗi vỡ 3 dòng so le. Sau khi lên site, người dùng gửi
   ảnh chụp thực tế + yêu cầu thẳng: "Code lại post-meta 1 hàng thôi.
   đồng bộ icon và text giống nhau chuẩn Untitled UI hiện đại" — tức bản
   2 cỡ chữ/2 màu đó bị coi là KHÔNG đồng bộ. ĐÃ REVERT: template
   (templates/entry-content-meta.php) nay chỉ build 1 mảng phẳng
   $sce_meta_items, in ra ĐÚNG 1 ".post-meta-content-inner" — class
   "sce-meta-row--split"/"sce-meta-line..." không còn được theme sinh ra
   nữa, nên các rule tương ứng (từng ở đây) đã được xoá hẳn thay vì để
   lại CSS chết. Mọi mục giờ dùng chung ĐÚNG 1 bộ style (xem
   ".post-meta-content-inner"/".sce-meta-item" ở trên) — cùng cỡ chữ
   13.5px, cùng màu --sce-ink-soft, cùng icon 16px — đúng yêu cầu "đồng
   bộ". Hàng vẫn tự xuống dòng bằng "flex-wrap:wrap" có sẵn khi màn quá
   hẹp để đủ chỗ (không ép cứng số dòng/số mục mỗi dòng như bản cũ), và
   "row-gap:8px" mới thêm ở ".post-meta-content-inner" đảm bảo nếu có
   xuống dòng thì khoảng cách vẫn thoáng/nhất quán, không dính sát. */

/* FIX 09/10/2026 (v4.9.1) — Khối "Cập nhật: {ngày}" + dấu "|" lẻ đứng
   ngay sau hàng meta ("post-meta-content-inner sce-meta-row"), khiến
   hàng meta nhìn rối/vỡ dòng xấu trên mobile (ảnh chụp thực tế người
   dùng gửi, class "sce-updated-inline").
   ĐÃ KIỂM TRA KỸ (không đoán): grep TOÀN BỘ theme cha lẫn theme con,
   KHÔNG tìm thấy bất kỳ đoạn PHP/JS nào in ra class "sce-updated-
   inline" hay đoạn "Cập nhật: " này (xem ghi chú đã có từ trước trong
   templates/entry-content-meta.php, mục 4.7.3) — 2 <span> này không
   do theme sinh ra, mà do 1 plugin/snippet KHÁC trên site (site đang
   có cài "WPCode" — plugin quản lý đoạn mã tuỳ chỉnh, nhìn thấy trên
   thanh admin ảnh chụp) tự chèn thẳng vào ĐÚNG bên trong hàng meta của
   theme. Không có quyền/không an toàn để xoá tận gốc từ theme (không
   nằm trong file theme nào để sửa) — và có thể người dùng vẫn muốn giữ
   tín hiệu "cập nhật gần đây" này cho SEO (freshness signal). Thay vào
   đó, CHUẨN HÓA LẠI GIAO DIỆN của riêng 2 phần tử này cho khớp đúng
   các mục khác trong hàng (thay vì sửa logic/nội dung):
     1) Ẩn hẳn span dấu "|" thô (luôn đi kèm style nội tuyến đặc trưng
        "line-height:normal", nhận diện qua CSS attribute selector —
        không cần biết plugin nào sinh ra) — tránh 2 dấu ngăn cách
        chồng nhau xấu (dấu "|" của plugin + dấu "·" của theme).
     2) Vẽ lại dấu "·" ngăn cách bằng ::before trên chính ".sce-updated-
        inline" — ĐÚNG pattern dấu chấm nhất quán theme đang dùng cho
        mọi mục khác trong hàng (xem ".sce-meta-sep" ở trên).
     3) Ép lại font/màu/canh baseline khớp các mục khác (ghi đè
        "position:relative;top:-1px" lệch dòng + padding/margin lẻ mà
        style nội tuyến của plugin tự thêm) bằng !important — bắt buộc
        vì CSS nội tuyến (style="...") có độ ưu tiên cao hơn file CSS
        thường, chỉ "!important" mới thắng được.
   Nếu sau này người dùng xác nhận được đúng plugin/vị trí snippet đang
   sinh ra khối này, có thể tắt hẳn ở nguồn thay vì chỉ che giao diện
   như hiện tại — nhưng cách này không rủi ro (không đụng logic SEO của
   snippet đó, chỉ đổi lớp trình bày). */
.post-meta-content-inner > span[style*="line-height:normal"]{
  display:none !important;
}
.post-meta-content-inner .sce-updated-inline{
  display:inline-flex !important; align-items:center;
  position:static !important; top:auto !important; inset:auto !important;
  margin:0 !important; padding:0 !important;
  font-family:var(--sce-font-body); font-size:inherit; font-weight:500;
  color:var(--sce-ink-soft); text-transform:none;
}
.post-meta-content-inner .sce-updated-inline:before{
  content:"·"; margin-right:10px; color:var(--sce-line); font-weight:700;
  user-select:none;
}
@media (max-width:480px){
  .post-meta-content-inner .sce-updated-inline:before{ margin-right:7px; }
}

/* ---------- Nội dung bài viết/Trang ----------
   SỬA LỖI (phát hiện 30/09/2026, đúng lúc thiết kế lại toàn diện): toàn
   bộ khối này TRƯỚC ĐÂY nhắm vào class ".entry-content" — nhưng class
   đó KHÔNG BAO GIỜ xuất hiện thật trong DOM (grep toàn bộ PHP theme cha
   xác nhận "entry-content" chỉ tồn tại dưới dạng TÊN FILE template-part,
   không phải class HTML). Class HTML THẬT là ".post-content" (bài viết
   đơn/tóm tắt) và ".page-content" (Trang) — nghĩa là style bảng/list/
   blockquote/link bên dưới từ trước tới giờ CHƯA TỪNG áp dụng vào bài
   viết/Trang thật nào. Đổi lại đúng selector, đồng thời SCOPE rõ vào
   đúng 2 vùng nội dung thô (".post-content-single-wrap .post-content"
   và ".page-content") để không vô tình khớp nhầm vào
   ".post-related .post-content" (card bài viết liên quan — không có
   list/table/blockquote nên không ảnh hưởng, nhưng scope rõ ràng vẫn
   an toàn hơn). */
.hentry .post-content-single-wrap .post-content{ max-width:100%; }
/* SỬA 01/10/2026 (v4.8.4) — người dùng báo "dùng List là chữ có vẻ bị
   mờ" khi soạn bài (kèm ảnh chụp thật 1 bài viết dùng khối List, thấy
   rõ chữ mô tả sau dấu ":" nhạt hơn hẳn đoạn văn thường cùng bài).
   KIỂM TRA BẰNG THỰC NGHIỆM trước khi sửa (không đoán): dựng lại đúng
   1 bài viết thật bằng harness Playwright đã có sẵn từ trước, đo
   "getComputedStyle" của 1 thẻ <p> VÀ 1 thẻ <ul>/<li> CÙNG nằm trong
   đúng 1 bài — kết quả đo được: <p> ra "rgb(29,29,31)" (= var(--sce-
   ink), chữ đậm/tối bình thường) nhưng <ul>/<li> ra "rgb(110,110,115)"
   (= var(--sce-ink-soft), MÀU NHẠT dành cho chú thích/meta phụ) — 2
   màu khác hẳn nhau trong CÙNG 1 đoạn nội dung, đúng y lỗi người dùng
   mô tả. NGUYÊN NHÂN: dòng "color" dưới đây đặt nhầm "--sce-ink-soft"
   (nhạt, đúng ra chỉ nên dùng cho text phụ như ngày tháng/tác giả) cho
   TOÀN BỘ danh sách trong bài viết/Trang — trong khi đoạn văn thường
   (<p>) không bị lỗi này vì màu "--sce-ink" (đậm) của nó đến từ rule
   bao ngoài ".post-content-single-wrap > .post-content{color:var(
   --sce-ink)}" (xem phía trên), KHÔNG bị ghi đè. Nhãn in đậm (**label**)
   trong ảnh chụp trông "đỡ mờ hơn" không phải vì màu khác — đo ra CÙNG
   1 màu nhạt hệt phần mô tả — mà vì chữ đậm (bold) luôn trông "đặc"
   hơn chữ thường dù cùng 1 mã màu, nên phần chữ thường sau dấu ":"
   mới là phần lộ rõ "mờ" nhất, đúng như người dùng chỉ ra. SỬA: đổi
   "--sce-ink-soft" thành "--sce-ink" để danh sách đọc rõ như đoạn văn
   thường, không còn lệch 2 tông màu trong cùng 1 bài. */
.post-content-single-wrap .post-content ul,
.post-content-single-wrap .post-content ol,
.page-content ul,
.page-content ol{
  padding-left:22px; margin:0 0 20px; color:var(--sce-ink); line-height:1.75;
}
.post-content-single-wrap .post-content li,
.page-content li{ margin-bottom:8px; }
.post-content-single-wrap .post-content a,
.page-content a{ color:var(--sce-red); text-decoration:underline; text-decoration-color:var(--sce-red-soft); text-underline-offset:2px; }
.post-content-single-wrap .post-content a:hover,
.page-content a:hover{ text-decoration-color:var(--sce-red); }
.post-content-single-wrap .post-content img,
.page-content img{ border-radius:var(--sce-r-md); height:auto; max-width:100%; }
.post-content-single-wrap .post-content blockquote,
.page-content blockquote{
  margin:24px 0 !important; padding:16px 20px !important; border-left:3px solid var(--sce-red);
  background:var(--sce-red-softer) !important; border-radius:0 var(--sce-r-md) var(--sce-r-md) 0;
  color:var(--sce-ink) !important; font-style:normal !important; font-weight:500;
}
/* Theme gốc có dấu ngoặc kép đỏ khổng lồ (82px, ::before, padding-left
   70px để chừa chỗ) — không hợp phong cách tối giản Untitled UI đang
   dùng cho toàn site, nên bỏ hẳn, chỉ giữ dải màu bên trái + nền nhạt. */
.post-content-single-wrap .post-content blockquote:before,
.page-content blockquote:before{ content:none !important; display:none !important; }
.post-content-single-wrap .post-content table,
.page-content table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px; }
.post-content-single-wrap .post-content table th,
.post-content-single-wrap .post-content table td,
.page-content table th,
.page-content table td{ padding:10px 12px; border:1px solid var(--sce-line); text-align:left; }
.post-content-single-wrap .post-content table th,
.page-content table th{ background:var(--sce-line-soft); font-weight:700; }

/* ---------- Mục lục tự động (TOC) — 30/09/2026 (v4.3.0), THIẾT KẾ LẠI
   THEO PHẢN HỒI THỰC TẾ ----------
   Phản hồi: "mục lục nằm chưa đúng vị trí (ngay sau tiêu đề, không
   chuyên nghiệp), giao diện xấu chưa hiện đại chuẩn SEO". Vị trí đã
   sửa ở tầng PHP (sce_the_content_with_toc()/sce_build_toc_and_ids()
   trong functions.php) — mục lục giờ in SAU đoạn/khối mở đầu của bài
   (nếu có), không còn dính ngay dưới tiêu đề/meta. Phần dưới đây là
   thiết kế lại giao diện: thay 2 ký tự Unicode "☰"/"+/–" cũ bằng icon
   SVG thật cùng hệ với icon hàng ngày-đăng/tác giả phía trên (nhất
   quán icon trong toàn trang), thêm badge đếm số mục, đổi khối nền xám
   phẳng cũ sang thẻ (card) viền mảnh + đổ bóng nhẹ đúng token thiết kế
   Untitled UI sẵn có (--sce-shadow-sm), tách phần đầu thẻ (nút mở/đóng)
   khỏi phần danh sách bằng 1 đường kẻ, mở rộng hỗ trợ thêm cấp H4 (thụt
   lề sâu hơn H3). <details>/<summary> chuẩn HTML lo việc đóng/mở; đoạn
   JS nội tuyến nhỏ in ngay sau khối (functions.php, không phải file
   riêng) chỉ set thuộc tính "open" theo bề rộng màn hình (>767px = mở
   sẵn), chạy TRƯỚC khi trình duyệt vẽ tiếp phần dưới nên không gây
   giật/nhảy layout (cùng kỹ thuật chống FOUC đã dùng cho nút sáng/tối). */
.sce-toc-nav{ display:block; margin:0 0 32px; }
.sce-toc{
  margin:0; border:1px solid var(--sce-line); border-radius:var(--sce-r-lg);
  background:var(--sce-white); box-shadow:var(--sce-shadow-sm); overflow:hidden;
}
.sce-toc-summary{
  cursor:pointer; font-family:var(--sce-font-display); font-weight:700;
  font-size:14.5px; color:var(--sce-ink); list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--sce-line-soft);
  /* Vùng bấm tối thiểu 44px (chuẩn Apple HIG/Material cho tap target di
     động — đo thực tế bản cũ chỉ ~24px, không đạt) — padding dọc thay vì
     margin/height cố định để vẫn co giãn tốt nếu đổi font-size sau này. */
  min-height:48px; padding:13px 18px;
  transition:background-color .15s ease;
}
.sce-toc-summary:hover{ background:var(--sce-red-softer); }
.sce-toc-summary::-webkit-details-marker{ display:none; }
.sce-toc-summary-label{ display:flex; align-items:center; gap:9px; min-width:0; }
.sce-toc-summary .sce-icon{ width:18px; height:18px; flex:none; color:var(--sce-red); }
.sce-toc-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:var(--sce-r-pill);
  background:var(--sce-red-soft); color:var(--sce-red);
  font-family:var(--sce-font-body); font-size:11px; font-weight:700;
}
.sce-toc-chevron{
  width:18px; height:18px; flex:none; color:var(--sce-ink-soft);
  transition:transform .2s ease;
}
.sce-toc[open] > .sce-toc-summary .sce-toc-chevron{ transform:rotate(180deg); }
/* SỬA 09/10/2026 (v4.9.1) — bài rất dài (vd 41 mục H2/H3) từng khiến
   danh sách mục lục kéo dài gần kín màn hình khi mở (xem comment đầy
   đủ ở sce_render_toc_block(), functions.php). Giới hạn chiều cao +
   tự cuộn RIÊNG bên trong danh sách (không cuộn cả trang) — dù bài có
   bao nhiêu mục, khối mục lục khi mở tối đa chỉ cao ~420px, luôn gọn
   trong màn hình. Thanh cuộn mảnh, đúng tông màu hệ thiết kế thay vì
   thanh cuộn mặc định thô của trình duyệt. */
.sce-toc-list{
  list-style:none; margin:0; padding:14px 18px 18px; counter-reset:sce-toc;
  border-top:1px solid var(--sce-line);
  max-height:420px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--sce-line) transparent;
}
.sce-toc-list::-webkit-scrollbar{ width:6px; }
.sce-toc-list::-webkit-scrollbar-track{ background:transparent; }
.sce-toc-list::-webkit-scrollbar-thumb{ background:var(--sce-line); border-radius:var(--sce-r-pill); }
.sce-toc-item{ margin:0 0 9px; }
.sce-toc-item:last-child{ margin-bottom:0; }
.sce-toc-item a{
  display:flex; gap:8px; font-size:13.5px; line-height:1.5;
  color:var(--sce-ink-soft); text-decoration:none;
}
.sce-toc-item a:hover{ color:var(--sce-red); }
/* Chỉ đánh số các mục cấp H2 (mục chính) — mục H3/H4 (mục con, thụt lề
   theo cấp) dùng gạch ngang/dấu chấm thay vì tiếp tục đếm số chung 1
   dãy, để không đánh số kiểu "1, 2, 3, 4, 5" nhầm lẫn mục chính/mục con. */
.sce-toc-item:not(.sce-toc-level-h3):not(.sce-toc-level-h4){ counter-increment:sce-toc; }
.sce-toc-item:not(.sce-toc-level-h3):not(.sce-toc-level-h4) > a:before{ content:counter(sce-toc) "."; color:var(--sce-red); font-weight:700; flex:none; }
.sce-toc-item.sce-toc-level-h3{ margin-left:22px; }
.sce-toc-item.sce-toc-level-h3 > a:before{ content:"–"; color:var(--sce-ink-soft); font-weight:700; flex:none; }
.sce-toc-item.sce-toc-level-h4{ margin-left:40px; }
.sce-toc-item.sce-toc-level-h4 > a{ font-size:13px; }
.sce-toc-item.sce-toc-level-h4 > a:before{ content:"·"; color:var(--sce-ink-soft); font-weight:700; flex:none; }

/* Bù khoảng cuộn khi nhảy tới id neo từ mục lục — xem giải thích token
   "--sce-header-offset" ở khối :root đầu file. Scope đúng 2 vùng nội
   dung thô có thể chứa heading được đánh id (bài viết đơn + Trang). */
.post-content-single-wrap .post-content h2[id],
.post-content-single-wrap .post-content h3[id],
.post-content-single-wrap .post-content h4[id],
.page-content h2[id],
.page-content h3[id],
.page-content h4[id]{
  scroll-margin-top:var(--sce-header-offset);
}

/* ---------- Trang thường (Page) — khung + tiêu đề, 30/09/2026 ----------
   Đồng bộ với bài viết: ".page-content-wrap" tương đương
   ".post-content-single-wrap", ".sce-page-title" dùng lại nguyên
   class ".post-title" (đã có typography scale) để không phải viết lại
   quy tắc font chữ. */
.page-content-wrap{ position:relative; }
.page-content-wrap .sce-post-breadcrumb{ margin-bottom:var(--sce-sp-4,16px); }
.page-content-wrap .post-title{ margin:0 0 var(--sce-sp-6,24px) !important; }
.page-content-wrap .post-title span{ display:block; }
.page-content{ display:block; }

/* ---------- Tags ---------- */
.post-tags{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:32px 0 0 !important; padding-top:var(--sce-sp-4,16px);
  border-top:1px solid var(--sce-line);
}
.post-tags a{
  display:inline-flex !important; float:none !important; align-items:center;
  padding:6px 14px !important; margin:0 !important; border-radius:var(--sce-r-pill);
  background:var(--sce-line-soft) !important; color:var(--sce-ink-soft) !important;
  font-family:var(--sce-font-body) !important;
  font-size:13px !important; font-weight:600; letter-spacing:0 !important;
  text-transform:none !important; text-decoration:none !important;
  transition:background .15s ease, color .15s ease;
}
.post-tags a:before{ content:"#"; margin-right:2px; opacity:.6; }
.post-tags a:hover{ background:var(--sce-red) !important; color:#fff !important; }

/* ---------- Chia sẻ bài viết (MỚI, 02/10/2026, v4.9.0) ----------
   templates/entry-content-share.php — đặt ngay sau thẻ/nội dung, trước
   hộp tác giả, đúng vị trí mẫu "GHDNN Express" (lúc người đọc vừa đọc
   xong, khả năng bấm "chia sẻ" cao nhất). 3 nút: Facebook/Zalo (mở tab
   mới) + Sao chép liên kết (xử lý bằng JS, xem assets/js/sce-post-
   share.js) — đổi icon + chữ "Đã sao chép" tạm thời qua class
   ".is-copied" khi bấm thành công. */
.sce-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:40px 0 0 !important; padding:var(--sce-sp-4,16px) var(--sce-sp-5,20px);
  background:var(--sce-bg); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg);
}
.sce-share-label{
  font-family:var(--sce-font-display); font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--sce-ink-soft);
  white-space:nowrap;
}
.sce-share-buttons{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sce-share-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 14px; border:1px solid var(--sce-line);
  border-radius:var(--sce-r-pill); background:var(--sce-white);
  color:var(--sce-ink-soft); font-family:var(--sce-font-body);
  font-size:13px; font-weight:600; line-height:1; cursor:pointer;
  text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.sce-share-btn .sce-icon{ width:16px; height:16px; flex:none; }
.sce-share-btn.sce-share-fb:hover{ background:#1877F2; border-color:#1877F2; color:#fff; }
.sce-share-btn.sce-share-zalo:hover{ background:#0068FF; border-color:#0068FF; color:#fff; }
.sce-share-btn.sce-share-twitter:hover{ background:#000000; border-color:#000000; color:#fff; } /* v4.9.24 */
.sce-share-btn.sce-share-linkedin:hover{ background:#0A66C2; border-color:#0A66C2; color:#fff; } /* v4.9.24 */
/* v4.9.24 — SỬA lỗi có sẵn từ trước (phát hiện khi QA Playwright thêm 2
   nút mới): ".sce-icon{color:var(--sce-red)}" khai TRỰC TIẾP trên thẻ
   <svg> nên không tự ăn theo "color:#fff" của nút cha lúc hover — icon
   Facebook/Zalo giữ nguyên màu đỏ trên nền tròn xanh thương hiệu, tương
   phản xấu. Ép icon trắng khi nút cha đang hover — áp dụng chung cho cả
   5 nút (kể cả nút Sao chép liên kết), không chỉ 2 nút mới. */
.sce-share-btn:hover .sce-icon{ color:#fff; }
.sce-share-btn.sce-share-copy:hover{ background:var(--sce-red); border-color:var(--sce-red); color:#fff; }
.sce-share-btn.sce-share-copy.is-copied{ background:var(--sce-red); border-color:var(--sce-red); color:#fff; }
.sce-share-copy-text{ white-space:nowrap; }
@media (max-width:480px){
  .sce-share{ gap:10px; padding:var(--sce-sp-4,16px); }
  .sce-share-btn{ height:36px; padding:0 12px; font-size:12.5px; }
}

/* ---------- Dòng E-E-A-T tái dùng trong hộp "Về tác giả" ----------
   MỚI 11/10/2026 (v4.9.19) dưới dạng thẻ gọn riêng đầu bài
   (templates/entry-content-eeat.php) — GỘP vào hộp "Về tác giả" cuối
   bài 11/10/2026 (v4.9.26) theo phản hồi "EEAT đang thừa. nêm gộp vào
   phần Về tác giả ở cuối content" (xem templates/entry-content-
   author.php, nơi render các dòng này). File entry-content-eeat.php
   ĐÃ XOÁ — cùng với nó, các rule chỉ phục vụ RIÊNG thẻ gọn cũ (khung
   thẻ/avatar/tên — ".sce-eeat-card"/".sce-eeat-avatar"/".sce-eeat-
   avatar a"/".sce-eeat-avatar a img"/".sce-eeat-body"/".sce-eeat-top"
   /".sce-eeat-name"/".sce-eeat-name:hover" + media query riêng của nó)
   cũng ĐÃ XOÁ vì nhiệm vụ đó nay do ".post-author"/".author-avatar"/
   ".name" (khối bên dưới) đảm nhiệm — 2 bộ CSS cùng vẽ avatar/tên là
   dư thừa khi chỉ còn 1 khối duy nhất trên trang. CHỈ GIỮ các rule áp
   dụng cho TỪNG DÒNG dữ liệu (chuyên môn/kinh nghiệm/chuyên mục/số
   bài/ngày cập nhật) + dòng chức danh cạnh tên — các rule này được
   tái dùng y nguyên bên trong ".post-author .author-desc". */
.sce-eeat-sep{ color:var(--sce-ink-faint); font-size:13px; }
.sce-eeat-role{ font-size:12.5px; color:var(--sce-ink-soft); font-weight:600; }
.sce-eeat-lines{ display:flex; flex-direction:column; gap:5px; margin:8px 0 12px; }
.sce-eeat-line{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--sce-ink-soft); line-height:1.6; }
.sce-eeat-line strong{ color:var(--sce-ink); }
.sce-eeat-line .sce-icon{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--sce-red); }
.sce-eeat-line a{ color:var(--sce-ink-soft); text-decoration:underline; text-decoration-color:var(--sce-line); }
.sce-eeat-line a:hover{ color:var(--sce-red); }
.sce-eeat-date time{ font-weight:600; color:var(--sce-ink-soft); }

/* ---------- Hộp tác giả (E-E-A-T) — 30/09/2026 ----------
   Trước đây bị comment tắt hoàn toàn trong templates/entry-content-
   single.php (chưa từng hiển thị 1 lần nào trên site). Bật lại +
   thiết kế mới theo Untitled UI: thẻ card bo góc/viền mảnh thay cho
   khối nền xám phẳng "#f0f0f0" cứng của theme gốc, avatar tròn có
   viền, layout Flexbox (thay float cũ — tự xếp dọc trên mobile không
   cần media query riêng biệt cho phần tử chính). Dữ liệu 100% lấy
   thật từ hồ sơ tác giả WordPress (get_the_author_meta) — không tự
   bịa thêm nội dung nào, đúng nguyên tắc EEAT của dự án.
   CẬP NHẬT 11/10/2026 (v4.9.26): hộp này giờ gánh thêm vai trò EEAT
   gộp từ thẻ gọn đầu bài (chức danh cạnh tên qua ".sce-eeat-top"/
   ".sce-eeat-sep"/".sce-eeat-role", các dòng dữ liệu qua ".sce-eeat-
   lines"/".sce-eeat-line" ở trên) — điều kiện ẩn (templates/entry-
   content-author.php) đã nới rộng: chỉ ẩn khi KHÔNG có mô tả VÀ KHÔNG
   có dữ liệu EEAT nào, không còn ẩn chỉ vì thiếu mô tả như bản gốc.
   Icon mạng xã hội: theme gốc dùng class rỗng "nz-facebook" v.v. mà
   KHÔNG xác nhận được có icon-font thật phía sau hay không (không
   thấy định nghĩa trong CSS theme cha đã đọc) — để tránh ô vuông/icon
   vỡ, ẩn hẳn span đó và thay bằng nhãn chữ viết tắt gọn qua ::before,
   an toàn 100% dù icon-font gốc có tồn tại hay không. */
.hentry .author-title{
  font-size:13px !important; font-weight:700 !important; letter-spacing:.04em;
  color:var(--sce-ink-soft) !important; text-transform:uppercase !important;
  margin:56px 0 var(--sce-sp-4,16px) !important; position:relative;
}
.hentry .author-title > span{ background-color:var(--sce-bg) !important; padding-right:10px; display:inline-block; }
.hentry .author-title > span:after{ background:var(--sce-line) !important; height:1px !important; }
.hentry .post-author{
  clear:both; overflow:visible; position:relative;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px;
  padding:var(--sce-sp-6,24px) !important; margin:0 !important;
  background:var(--sce-white) !important; border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg); box-shadow:var(--sce-shadow-sm);
}
.hentry .post-author .author-avatar{ width:auto; float:none; margin:0 !important; flex:none; }
.hentry .post-author .author-avatar a{
  width:64px; height:64px; margin:0; display:block; border-radius:50%;
  overflow:hidden; border:2px solid var(--sce-line-soft);
}
.hentry .post-author .author-avatar a img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.hentry .post-author .author-desc{ overflow:visible; flex:1; min-width:200px; }
/* v4.9.26 — hàng tên + chức danh (gộp từ thẻ EEAT gọn cũ), xem
   templates/entry-content-author.php. ".name" nằm trong flex row này
   nên bỏ margin-bottom riêng, nhường khoảng cách cho chính ".sce-eeat-
   top" để không bị cộng dư khoảng trống do margin trên flex item. */
.hentry .post-author .sce-eeat-top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:0 0 4px; }
.hentry .post-author .sce-eeat-top .name{ margin:0 !important; }
.hentry .post-author .name{
  font-family:var(--sce-font-display) !important; font-size:15.5px !important;
  font-weight:700 !important; letter-spacing:0 !important; margin:0 0 4px !important;
  color:var(--sce-ink) !important;
}
.hentry .post-author .author-desc > p{
  margin:0 0 12px !important; font-size:13.5px; line-height:1.7; color:var(--sce-ink-soft);
}
.author-socials{ display:flex; flex-wrap:wrap; gap:8px; }
.author-socials > a{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0 !important; margin:0 !important;
  border-radius:50%; background:var(--sce-line-soft) !important;
  color:var(--sce-ink-soft) !important; font-size:0 !important;
  transition:background .15s ease, color .15s ease;
}
.author-socials > a > span{ display:none; }
.author-socials > a:before{
  font-family:var(--sce-font-body); font-size:10.5px !important; font-weight:800;
  letter-spacing:0; text-transform:none;
}
.author-socials > a.facebook:before{ content:"FB"; }
.author-socials > a.twitter:before{ content:"X"; }
.author-socials > a.linkedin:before{ content:"in"; }
.author-socials > a.pinterest:before{ content:"P"; }
.author-socials > a.instagram:before{ content:"IG"; }
.author-socials > a.google-plus:before{ content:"G+"; }
.author-socials > a:hover{ background:var(--sce-red) !important; color:#fff !important; opacity:1 !important; }
@media (max-width:480px){
  .hentry .post-author{ flex-direction:column; align-items:center; text-align:center; }
  .author-socials{ justify-content:center; }
}

/* ---------- Bài viết liên quan — THIẾT KẾ LẠI 11/10/2026 (v4.9.17) ----------
   Bản CŨ (".post-related", lưới 3 cột thẻ ảnh-trên/chữ-dưới, giữ từ bản
   v4.9.0) đã bị THAY HẲN theo yêu cầu "Fix lại mục bài viết liên quan
   giống mẫu GHDNN Express" (kèm ảnh chụp mẫu thật). Toàn bộ class CSS
   dưới đây khớp ĐÚNG tên class trong templates/entry-content-related.php
   bản mới (đã chuyển thẳng đúng cấu trúc HTML/giá trị px thật từ CSS
   gốc GHDNN Express, "assets/css/style.css" dòng ~1765-1786 — chỉ đổi
   tên biến màu "--red"/"--ink"/"--ink-faint"/"--border-primary"/
   "--bg-primary"/"--bg-secondary"/"--radius-lg"/"--radius-md"/
   "--shadow-xs" của họ sang đúng token tương ứng của SCE, giữ nguyên
   100% các giá trị px/layout). Class cũ ".post-related"/".related-title"
   không còn được HTML nào xuất ra nữa (template con đã đổi hẳn) — để
   nguyên rule cũ ở khối "Vá 4 điểm rò rỉ màu cứng" đầu file (dòng ~857),
   không gây hại gì (chỉ đơn giản không còn phần tử nào khớp). */
.related-posts{
  background:var(--sce-white); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg); padding:22px 22px 8px; margin:28px 0;
  box-shadow:var(--sce-shadow-sm);
}
.related-posts-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.related-posts-head .sce-icon{ width:20px; height:20px; flex-shrink:0; color:var(--sce-red); }
.related-posts-head h2{ font-size:16.5px; margin:0; }
.related-posts-list{ display:flex; flex-direction:column; }
.related-post-item{
  display:flex; align-items:center; gap:14px; padding:14px 0;
  text-decoration:none; color:var(--sce-ink); border-top:1px solid var(--sce-line);
  transition:gap .2s ease;
}
.related-post-item:first-child{ border-top:none; }
.related-post-item:hover{ gap:18px; }
.related-post-thumb{
  flex-shrink:0; width:56px; height:56px; border-radius:var(--sce-r-md);
  overflow:hidden; background:var(--sce-line-soft);
  display:flex; align-items:center; justify-content:center;
}
.related-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.related-post-thumb-fallback .sce-icon{ width:22px; height:22px; color:var(--sce-ink-faint); }
.related-post-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.related-post-title{
  font-size:14.5px; font-weight:600; color:var(--sce-ink); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.related-post-item:hover .related-post-title{ color:var(--sce-red); }
.related-post-meta{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--sce-ink-faint);
}
.related-post-meta .sce-icon{ width:13px; height:13px; color:var(--sce-ink-faint); }
.related-post-arrow{ flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.related-post-arrow .sce-icon{
  width:18px; height:18px; color:var(--sce-ink-faint);
  transition:color .2s ease, transform .2s ease;
}
.related-post-item:hover .related-post-arrow .sce-icon{ color:var(--sce-red); transform:translateX(2px); }
@media (max-width:480px){
  .related-post-thumb{ width:46px; height:46px; }
  .related-post-title{ font-size:13.5px; }
}

/* ---------- CTA cuối bài — KHÔI PHỤC LẠI bản gradient v4.9.18
   (11/10/2026, v4.9.25) ----------
   LÝ DO: v4.9.20 đã thay hẳn khối này thành thẻ trắng "Liên hệ gửi
   hàng" (".sce-trust-cta", dáng EEAT/trust-card giống GHDNN Express).
   Người dùng gửi lại ảnh chụp bản gradient cũ (2 biến thể: đủ 3 nút
   Zalo/Gọi ngay/Messenger, và chỉ 1 nút Zalo khi thiếu dữ liệu liên hệ
   khác) kèm yêu cầu "Để lại CTA như lúc trước" — tức REVERT nguyên bản
   thiết kế v4.9.18 này, không giữ lại ".sce-trust-cta" nữa (đã xoá hẳn
   khối CSS đó, không để mồ côi không dùng tới). KHÔNG ảnh hưởng khối
   "Chia sẻ bài viết"/EEAT đầu bài/form báo giá nhanh — các khối đó độc
   lập, không đụng gì trong lần revert này.

   templates/entry-content-cta.php — đặt SAU "Bài viết liên quan",
   TRƯỚC bình luận. Tự ẩn hẳn (xem PHP) nếu Admin tắt khối hoặc chưa
   cấu hình tiêu đề — các nút bên trong cũng tự ẩn riêng lẻ nếu thiếu
   dữ liệu liên hệ thật (xem sce_get_post_cta_buttons() trong inc/
   admin-options-sce.php) — không bao giờ hiện nút trỏ link rỗng/chết.

   Gradient nền dùng ĐÚNG 3 điểm dừng màu như bản gốc v4.9.18
   ("--red 0%, --red-dark 65%, --brand-900 100%") — điểm dừng cuối
   ("--brand-900") là 1 mốc TỰ TÍNH qua "color-mix(in srgb, var(--red)
   40%, black)", không phải token cố định riêng — giữ nguyên công thức
   này để tự đồng bộ đúng theo "--sce-red" đang active (kể cả dark
   mode), không cần viết thêm rule riêng. */
.sce-post-cta{
  position:relative; overflow:hidden; color:#fff;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sce-sp-6,24px);
  margin:48px 0 0; padding:44px 32px;
  background:linear-gradient(135deg, var(--sce-red) 0%, var(--sce-red-dark) 65%, color-mix(in srgb, var(--sce-red) 40%, black) 100%);
  border-radius:var(--sce-r-lg);
  box-shadow:var(--sce-shadow-sm);
}
.sce-post-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 240px at 100% 0%, rgba(255,193,7,.35), transparent 70%);
  transform-origin:100% 0%;
  animation:sce-post-cta-breathe 6s ease-in-out infinite;
}
@keyframes sce-post-cta-breathe{
  0%, 100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.18); }
}
@media (prefers-reduced-motion:reduce){
  .sce-post-cta::before{ animation:none; }
}
.sce-post-cta-body{ position:relative; flex:1; min-width:240px; }
.sce-post-cta-title{
  margin:0 0 8px !important; font-family:var(--sce-font-display);
  font-size:clamp(20px, 3vw, 24px) !important; font-weight:700 !important; color:#fff !important;
}
.sce-post-cta-desc{
  margin:0 !important; font-family:var(--sce-font-body);
  font-size:14px; line-height:1.5; color:rgba(255,255,255,.85); max-width:44ch;
}
.sce-post-cta-actions{ position:relative; display:flex; gap:10px; flex-wrap:wrap; }
.sce-post-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  padding:11px 22px; border-radius:var(--sce-r-pill); border:1px solid transparent;
  font-family:var(--sce-font-body); font-size:14px; font-weight:700;
  text-decoration:none; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease, transform .1s ease;
}
.sce-post-cta-btn:active{ transform:scale(.97); }
.sce-post-cta-btn--primary{ background:#fff; color:var(--sce-red) !important; }
.sce-post-cta-btn--primary:hover{ opacity:.92; }
.sce-post-cta-btn--ghost{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff !important; }
.sce-post-cta-btn--ghost:hover{ border-color:#fff; }
@media (max-width:600px){
  .sce-post-cta{ padding:var(--sce-sp-6,24px) var(--sce-sp-5,20px); text-align:center; justify-content:center; }
  .sce-post-cta-desc{ max-width:none; }
  .sce-post-cta-actions{ width:100%; justify-content:center; }
  .sce-post-cta-btn{ flex:1 1 auto; }
}

/* ---------- Form "Nhận báo giá gửi hàng nhanh" (CF7 id=6942) — THIẾT KẾ
   LẠI 11/10/2026 (v4.9.21; SỬA LẠI CHÍNH XÁC THEO MÃ NGUỒN THẬT cùng
   ngày sau khi người dùng dán nguyên văn nội dung tab "Form" của CF7) ---
   single.php bọc output shortcode [contact-form-7 id="6942"] trong
   "<div class="sce-quick-quote">" — đây là hook CSS DUY NHẤT được thêm
   vào theme (xem doc-comment đầu single.php).

   LẦN ĐẦU (bản đã gửi trước đó cùng ngày) phải viết CSS "phòng thủ
   chung chung" vì KHÔNG có mã nguồn thật của tab Form để đọc. Người
   dùng sau đó đã dán NGUYÊN VĂN nội dung tab Form — nên bản này viết
   lại ĐÚNG theo cấu trúc HTML/class thật đó (không đoán nữa):

     <div style="...background:#fccd40;">        ← nguồn gốc nền vàng,
       <h3 style="...color:red;..."><b>...</b></h3>   XÁC NHẬN đúng y
       <div class="wpcargo form-table" style="...">    như đã nghi vấn.
         <div class="row">
           <div class="col-md-6 col-xs-12"><label>...</label> [text* ...]</div>
           <div class="col-md-6 col-xs-12"><label>...</label> [tel* ...]</div>
         </div>
         ...3 hàng ".row" nữa (email+cân nặng, địa chỉ, mô tả)...
         <div class="row" style="...text-align:center;">
           <div class="col-md-6 col-xs-12">[recaptcha]</div>
           <div class="col-md-6 col-xs-12 btn-width">[submit "..."]</div>
         </div>
       </div>
     </div>

   CF7 tự in mỗi [text*]/[tel*]/[email*]/[textarea] thành
   "<span class="wpcf7-form-control-wrap" data-name="..."><input/textarea
   class="wpcf7-form-control ..."></span>" NGAY SAU "<label>" (class
   chuẩn/công khai CF7 dùng để style, không đổi dù tên field gì — tài
   liệu chính thức contactform7.com) — nên vẫn style qua
   ".wpcf7-form-control"/".wpcf7-form-control-wrap"/".wpcf7-not-valid-
   tip"/".wpcf7-response-output" như bản trước, CHỈ thay phần "reset nền
   phòng thủ chung chung" (dùng ":not()" ép mọi phần tử trong suốt) bằng
   RESET ĐÚNG TRÚNG 2 phần tử thật sự có nền/padding nội tuyến
   (".wpcf7-form > div" và ".wpcargo.form-table"), đồng thời BIẾN ĐÚNG
   lưới Bootstrap-style có sẵn (".row"/"[class*='col-']", vốn KHÔNG có
   CSS Bootstrap nào thật sự chạy nên trước giờ luôn xếp dọc 1 cột)
   THÀNH lưới responsive thật (2 cột desktop theo đúng ý "col-md-6" gốc,
   tự xuống 1 cột dưới 600px) — tận dụng đúng cấu trúc HTML sẵn có thay
   vì bỏ phí, cho form gọn/chuyên nghiệp hơn hẳn trên màn hình rộng. */
/* v4.9.23 — SỬA: "max-width:640px" ở bản 4.9.21/22 làm khối này hẹp
   hơn hẳn các khối khác cuối bài (".sce-trust-cta"/".related-posts"/
   ".post-author", không khối nào giới hạn max-width riêng — tất cả đều
   tự nhiên lấp đầy đúng 100% cột nội dung bài viết, "#inner-content.
   inner-content-wrap{max-width:760px}") — người dùng phản hồi đúng
   bằng ảnh chụp thật trên site live: khối form hẹp hơn, lệch trái so
   với khối "Liên hệ gửi hàng" ngay phía trên. Bỏ hẳn "max-width" ở đây
   để khối form cũng lấp đầy đúng 100% cột nội dung như mọi khối khác —
   lưới 2 cột bên trong (".row") vẫn hoạt động y hệt, chỉ là mỗi cột có
   thêm chút khoảng thở vì cột cha rộng hơn. */
.sce-quick-quote{
  margin:40px 0; padding:0;
}
.sce-quick-quote .wpcf7-form{
  display:block; background:var(--sce-white) !important;
  border:1px solid var(--sce-line) !important; border-radius:var(--sce-r-lg);
  box-shadow:var(--sce-shadow-sm) !important; padding:var(--sce-sp-6,24px) !important;
}
/* div ngoài cùng (nền vàng + "padding-right:20px" nội tuyến thật) VÀ
   ".wpcargo.form-table" (nền trong suốt sẵn + "padding-left:20px" nội
   tuyến thật) — reset cả 2 về 0, để padding duy nhất là của thẻ
   ".wpcf7-form" ở trên, tránh padding lệch trái/phải như bản gốc. */
.sce-quick-quote .wpcf7-form > div,
.sce-quick-quote .wpcargo.form-table{
  background:transparent !important; box-shadow:none !important;
  padding:0 !important; width:100% !important; text-align:left !important;
}
.sce-quick-quote .wpcf7-form h3{
  display:flex !important; align-items:center; gap:9px;
  font-family:var(--sce-font-display); font-size:17px !important; font-weight:700 !important;
  color:var(--sce-ink) !important; text-align:left !important;
  margin:0 0 var(--sce-sp-5,20px) !important; padding:0 !important;
}
/* icon thùng hàng trước tiêu đề — cho đúng cảm giác "chuyên sâu logistics",
   vẽ bằng CSS (data URI SVG, path icon "box" lấy nguyên từ sprite sce-icons
   sẵn có — xem assets/icons/sce-icons-sprite.svg "#icon-box") thay vì
   chèn HTML icon vào nội dung CF7 (không với tới được tab Form). */
.sce-quick-quote .wpcf7-form h3::before{
  content:""; flex-shrink:0; width:22px; height:22px;
  background-color:var(--sce-red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Lưới ".row"/".col-md-*" — giữ ĐÚNG class gốc (không sửa HTML được,
   nằm trong tab Form) nhưng tự viết CSS flex cho nó thật sự thành lưới
   2 cột, vì trước giờ các class Bootstrap này không có hiệu lực gì
   (không có framework Bootstrap thật nào nạp cho trang bài viết). */
.sce-quick-quote .row{
  display:flex; flex-wrap:wrap; gap:var(--sce-sp-4,16px);
  margin:0 0 var(--sce-sp-4,16px) !important;
}
.sce-quick-quote .row:last-child{ margin-bottom:0 !important; align-items:center; }
.sce-quick-quote .row [class*="col-"]{ flex:1 1 220px; min-width:0; }
.sce-quick-quote .row .col-md-12{ flex-basis:100%; }
.sce-quick-quote .row label{
  display:block; font-size:13px !important; font-weight:600 !important;
  color:var(--sce-ink-soft) !important; margin:0 0 6px !important;
  line-height:1.5;
}
.sce-quick-quote .wpcf7-form-control-wrap{ display:block; }
.sce-quick-quote .wpcf7-form-control{
  display:block; width:100%; box-sizing:border-box;
  padding:11px 14px; border:1px solid var(--sce-line) !important; border-radius:var(--sce-r-md);
  background:var(--sce-bg) !important; color:var(--sce-ink) !important;
  font-family:var(--sce-font-body); font-size:14px; line-height:1.5;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sce-quick-quote textarea.wpcf7-form-control{ min-height:96px; resize:vertical; }
.sce-quick-quote .wpcf7-form-control::placeholder{ color:var(--sce-ink-faint); }
.sce-quick-quote .wpcf7-form-control:focus{
  outline:none; border-color:var(--sce-red) !important; background:var(--sce-white) !important;
  box-shadow:0 0 0 3px var(--sce-red-soft) !important;
}
.sce-quick-quote .wpcf7-form-control.wpcf7-not-valid{ border-color:#D92D20 !important; }
.sce-quick-quote .wpcf7-not-valid-tip{
  display:block !important; margin-top:6px; font-size:12px !important;
  color:#D92D20 !important; font-weight:600 !important;
}
.sce-quick-quote input[type="submit"].wpcf7-form-control{
  width:100%; margin-top:4px; cursor:pointer;
  padding:13px 20px; border:none !important; border-radius:var(--sce-r-pill);
  background:var(--sce-red) !important; color:#fff !important;
  font-size:14.5px; font-weight:700; letter-spacing:.01em;
  transition:background .15s ease, transform .1s ease;
}
.sce-quick-quote input[type="submit"].wpcf7-form-control:hover{ background:var(--sce-red-dark) !important; }
.sce-quick-quote input[type="submit"].wpcf7-form-control:active{ transform:scale(.98); }
.sce-quick-quote .wpcf7-spinner{ margin:0 0 0 10px; }
.sce-quick-quote .wpcf7-response-output{
  display:block !important; margin:var(--sce-sp-4,16px) 0 0 !important;
  padding:12px 14px !important; border-radius:var(--sce-r-md);
  font-size:13px !important; line-height:1.5; border:1px solid var(--sce-line) !important;
  color:var(--sce-ink-soft) !important;
}
.sce-quick-quote .wpcf7-form.sent .wpcf7-response-output{
  background:#ECFDF3 !important; border-color:#ABEFC6 !important; color:#067647 !important;
}
.sce-quick-quote .wpcf7-form.failed .wpcf7-response-output,
.sce-quick-quote .wpcf7-form.aborted .wpcf7-response-output,
.sce-quick-quote .wpcf7-form.invalid .wpcf7-response-output{
  background:#FEF3F2 !important; border-color:#FECDCA !important; color:#D92D20 !important;
}
@media (max-width:600px){
  .sce-quick-quote .row{ flex-direction:column; gap:var(--sce-sp-4,16px); }
  .sce-quick-quote .row [class*="col-"]{ flex-basis:100%; }
}
@media (max-width:480px){
  .sce-quick-quote .wpcf7-form{ padding:var(--sce-sp-5,20px) !important; }
}

/* ---------- Sidebar ---------- */
#sidebar{ box-sizing:border-box; }
#inner-sidebar.inner-content-wrap{
  position:sticky; top:96px;
  display:flex; flex-direction:column; gap:var(--sce-sp-6,24px);
}
#sidebar .widget{
  margin:0 !important;
  background:var(--sce-white);
  border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg);
  box-shadow:var(--sce-shadow-sm);
  padding:var(--sce-sp-6,24px);
}
#sidebar .widget .widget-title{
  font-family:var(--sce-font-display) !important;
  font-size:13px !important; font-weight:700 !important;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--sce-ink) !important;
  margin:0 0 18px !important;
}
#sidebar .widget .widget-title > span{ padding-bottom:10px; }
#sidebar .widget .widget-title > span:after{ background-color:var(--sce-red) !important; width:24px !important; height:2px !important; }

/* Widget: Tìm kiếm */
#sidebar .widget.widget_search .search-form .search-field{
  width:100%; border:1px solid var(--sce-line) !important; border-radius:var(--sce-r-pill) !important;
  padding:10px 44px 10px 16px !important; font-size:14px; font-family:var(--sce-font-body);
  background:var(--sce-bg);
}
#sidebar .widget.widget_search .search-form .search-field:focus{
  outline:none; border-color:var(--sce-red) !important; background:var(--sce-white);
}
#sidebar .widget.widget_search .search-form .search-submit{ height:100% !important; width:42px !important; }
#sidebar .widget.widget_search .search-form .search-submit:before{
  background-color:transparent !important; color:var(--sce-ink-soft) !important;
  width:42px !important; height:100% !important; line-height:42px !important;
}
#sidebar .widget.widget_search .search-form .search-submit:hover:before{ color:var(--sce-red) !important; }

/* Widget: Bài viết gần đây */
#sidebar .widget.widget_recent_posts ul{ padding-top:0; }
#sidebar .widget.widget_recent_posts ul li{ border-top:1px solid var(--sce-line-soft) !important; }
#sidebar .widget.widget_recent_posts .recent-news .thumb{
  width:64px !important; border-radius:var(--sce-r-md); overflow:hidden;
}
#sidebar .widget.widget_recent_posts .recent-news .thumb img{ border-radius:var(--sce-r-md); }
#sidebar .widget.widget_recent_posts h3{
  font-family:var(--sce-font-body) !important;
  font-size:13.5px !important; font-weight:600 !important;
  text-transform:none !important; letter-spacing:0 !important;
  line-height:1.4 !important; color:var(--sce-ink) !important;
}
#sidebar .widget.widget_recent_posts h3 a:hover{ color:var(--sce-red) !important; }
#sidebar .widget.widget_recent_posts .post-date{
  font-family:var(--sce-font-body) !important; text-transform:none !important;
  font-size:12px !important; color:var(--sce-ink-soft) !important;
}

/* Widget: Tag cloud — theme gốc để mỗi thẻ "width:100%; float:left"
   (xếp dọc từng dòng, chữ hoa) nên phải ghi đè rõ width/float/display
   mới ra được dạng pill xếp cạnh nhau đúng kiểu Untitled UI. */
#sidebar .widget.widget_tag_cloud .tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
#sidebar .widget.widget_tag_cloud .tagcloud a{
  display:inline-flex !important; float:none !important; width:auto !important;
  font-family:var(--sce-font-body) !important;
  font-size:12.5px !important; font-weight:600; letter-spacing:0 !important;
  text-transform:none !important;
  padding:6px 12px !important; margin:0 !important; border-radius:var(--sce-r-pill);
  background:var(--sce-line-soft) !important; color:var(--sce-ink-soft) !important;
  text-decoration:none !important; transition:background .15s ease, color .15s ease;
}
#sidebar .widget.widget_tag_cloud .tagcloud a:hover{ background:var(--sce-red) !important; color:#fff !important; }

/* ---------- Responsive ---------- */
/* Theme gốc ẩn hẳn #sidebar ở ≤991px (style.css dòng ~5814: "#sidebar{
   display:none}" — không xếp xuống dưới bài viết như thường thấy) —
   nghĩa là trên di động, khách KHÔNG hề thấy ô tìm kiếm/bài viết gần
   đây/thẻ phổ biến. Vì phần lớn traffic là mobile và các widget này có
   giá trị internal-link/SEO thật, bản v3 CHỦ ĐỘNG hiện lại sidebar,
   xếp thành 1 khối full-width bên dưới bài viết.
   CẬP NHẬT 02/10/2026 (v4.9.0): đã BỎ "body.single-post" khỏi khối này
   — bài viết không còn "#sidebar" trong DOM nữa (single.php mới không
   gọi get_sidebar()), nên không còn cần ép hiện lại sidebar trên
   mobile cho bài viết; cột đọc 1 cột (".inner-content-wrap", max-width
   760px) đã tự full-width/căn giữa đúng ở mọi kích thước màn hình,
   không cần media query riêng. CHỈ GIỮ "body.page" (Trang vẫn dùng 2
   cột + sidebar như cũ, thêm 30/09/2026 — không đụng theo đúng yêu cầu
   chỉ tối ưu "bài viết"). */
@media (max-width:991px){
  body.page #site-content{ padding-right:0; float:none !important; width:100% !important; }
  body.page #sidebar{
    display:block !important; float:none !important; width:100% !important; margin-top:48px;
  }
  #inner-sidebar.inner-content-wrap{ position:static; top:auto; flex-direction:column; }
}
@media (max-width:600px){
  .hentry .post-content-single-wrap .post-media{ border-radius:var(--sce-r-md) !important; }
  /* SCE 11/10/2026 (v4.9.17) — 2 dòng "grid-template-columns" cho
     ".post-related" ĐÃ GỠ BỎ khỏi đây: class đó thuộc thiết kế lưới 3
     cột CŨ của khối "Bài viết liên quan" (bản v4.9.0), nay đã thay hẳn
     bằng thiết kế danh sách hàng ngang mới (".related-posts...", xem
     khối CSS "Bài viết liên quan — THIẾT KẾ LẠI" phía trên) — không còn
     HTML nào xuất ra class ".post-related" nữa nên 2 dòng grid cũ chỉ
     còn là CSS chết, gỡ bỏ cho gọn, không ảnh hưởng gì. */
  #sidebar .widget{ padding:var(--sce-sp-4,16px); }
}

/* ============================================================
   BỘ ICON UNTITLED UI TOÀN SITE (29/09/2026, v3.6.0)
   ------------------------------------------------------------
   .sce-icon = class gốc cho mọi icon xuất ra từ sce_icon() (xem
   functions.php). Mặc định 20x20px, màu thừa kế currentColor (tự đổi
   theo màu chữ nơi đặt icon, không cần khai báo màu riêng cho từng
   icon). Thêm class phụ (sce-icon-sm/-lg/-xl...) để đổi kích thước ở
   từng vị trí cụ thể mà không sửa lại class gốc.
   ============================================================ */
.sce-icon{
  width:20px; height:20px;
  flex:none;
  display:inline-block;
  vertical-align:middle;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* v4.7.4 (01/10/2026) — SỬA theo yêu cầu "đổi TẤT CẢ icon sang màu đỏ
     thương hiệu": trước đây "color:inherit" khiến icon luôn ăn theo màu
     CHỮ xung quanh (nên phần lớn icon ra xám/đen nhạt, vì đa số chữ phụ
     trong theme dùng --sce-ink-soft) — đổi mặc định gốc sang
     var(--sce-red) để MỌI icon dùng sce_icon() không có override riêng
     đều ra đỏ thương hiệu. Đã rà soát lại toàn bộ 4 chỗ còn lại đang ép
     riêng "--sce-ink-soft" (xem các rule .sce-meta-item/.sce-theme-
     toggle/.sce-blog-search ngay dưới, đổi đồng bộ cả 3) — các chỗ ĐÃ
     đỏ từ trước (.sce-toc-summary, icon chi nhánh footer) không cần sửa.
     NGOẠI LỆ CÓ CHỦ Ý — KHÔNG đổi (đã kiểm tra kỹ, không phải bỏ sót):
     (1) 2 icon mạng xã hội footer (facebook/twitter-x trong
     ".sce-footer-social") — đây là glyph font-icon CỦA THEME CHA
     (".nz-facebook"...), không dùng class "sce-icon"/sce_icon() nên
     không bị ảnh hưởng bởi rule này — vẫn trắng trên nền tối Footer,
     đổi hover thành khoanh tròn đỏ, giữ nguyên tương phản đang đúng.
     (2) Icon trong nút chuyển Lưới/Danh sách (".sce-view-btn svg") —
     SVG raw riêng, không qua sce_icon(), CỐ TÌNH không đổi: màu đỏ ở
     nút này đã được dùng làm TÍN HIỆU "đang chọn" (".sce-view-btn.is-
     active{background:red;color:#fff}") — nếu icon mặc định (chưa
     chọn) cũng đỏ sẽ làm mất phân biệt trạng thái chọn/chưa chọn của
     chính nút đó, nên giữ nguyên xám ở trạng thái thường. */
  color:var(--sce-red);
}
/* 3 icon thương hiệu (facebook, twitter-x, linkedin — thêm v4.9.24) vẽ
   dạng fill khối, không phải line-icon 2 nét như các icon còn lại —
   ghi đè riêng cho đúng. */
.sce-icon.icon-facebook, .sce-icon.icon-twitter-x, .sce-icon.icon-linkedin{ stroke:none; fill:currentColor; }

/* v4.7.5 (01/10/2026) — "Thị sai" (optical alignment) giữa icon + chữ
   theo sau, áp dụng mọi nơi dùng icon+nhãn (hàng meta bài nổi bật,
   hàng meta thẻ lưới/bài đơn — cả 3 icon này dùng chung ở cả 2 nơi).
   LÝ DO: người dùng phản hồi hàng meta "lệch lộn xộn căn khoảng cách"
   dù đo pixel xác nhận khoảng cách CSS (gap 6px icon↔chữ, 16px giữa
   các mục) đã đều tuyệt đối ở mọi mục — xác nhận qua AskUserQuestion:
   đây là CẢM GIÁC lệch do "trọng lượng thị giác" từng icon khác nhau,
   không phải sai số đo. Đo lại toạ độ path thật trong sprite (icon vẽ
   trên khung 24×24):
     - icon-calendar: nét trải x:3→21 (rộng, viền hình chữ nhật) — mép
       phải nét cách khung 3/24, icon trông "đặc" theo chiều ngang.
     - icon-clock: hình tròn x:2→22 — gần sát khung nhất, trông "to"
       nhất trong 3 icon dù cùng kích thước khung.
     - icon-user-01: đầu người x:7.5(±4.5) + vai x:4→20 — gọn hơn hẳn 2
       icon kia theo cả 2 chiều, nhiều khoảng trống quanh nét hơn, nên
       trông "nhỏ/thưa" nhất, tạo cảm giác xa chữ theo sau hơn dù CSS
       gap bằng nhau.
   SỬA: nudge margin-right riêng từng icon (số âm/dương rất nhỏ, không
   đổi width/height khung — tránh lặp lại đúng bẫy Chromium "svg co về
   0 trong flex nếu đổi kích thước không tường minh" đã gặp ở nút Lưới/
   Danh sách bản 4.7.0) để khoảng trống THỊ GIÁC (không phải khoảng
   trống hình học) giữa icon và chữ đều nhau hơn. Đã build lại bằng
   harness PHP thật + Playwright phóng to kiểm tra trực quan trước khi
   chốt số, xem CHANGELOG.txt. */
.sce-icon.icon-user-01{ margin-right:1px; }
.sce-icon.icon-clock{ margin-right:-1px; }
.sce-icon-sm{ width:16px; height:16px; }
.sce-icon-lg{ width:24px; height:24px; }
.sce-icon-xl{ width:32px; height:32px; }

/* ============================================================
   BLOG GRID / TRANG DANH MỤC — REDESIGN THEO UNTITLED UI +
   CHUẨN SEO/GEO/AEO/EEAT (30/09/2026, v4.5.0)
   ------------------------------------------------------------
   ĐÃ ĐỌC LẠI MÃ NGUỒN GỐC TRƯỚC KHI SỬA (không đoán): xác nhận lưới
   "Blog Grid" hiện tại (URL "/blog", Trang dùng "Blog Grid Template" —
   templates/page-blog-grid.php) VÀ mọi trang danh mục/thẻ (fallback
   qua index.php, vì theme không có category.php/archive.php riêng) đều
   dùng CHUNG 1 bộ class HTML: ".blog-grid" (khối bọc ngoài),
   ".hentry .post-content-archive-wrap" (từng thẻ), ".post-media"
   (ảnh), ".post-content-wrap" (chữ), ".post-title"/".post-meta"/
   ".post-excerpt"/".post-read-more" — nghĩa là CHỈ CẦN sửa đúng bộ
   class này 1 lần, hiệu ứng áp dụng ĐỒNG NHẤT cho TOÀN BỘ web (cả
   trang "/blog" lẫn mọi trang danh mục), đúng yêu cầu "cho toàn bộ
   web". Toàn bộ CSS gốc của theme cha cho các class này (float 3 cột
   kiểu Bootstrap cũ, nền xám phẳng #f0f0f0, tiêu đề 1 dòng bị cắt kiểu
   "text-overflow:ellipsis; white-space:nowrap" — ĐÚNG lỗi tiêu đề bị
   cắt cụt thấy trong ảnh chụp thực tế, nút "Xem thêm" khối xám đặc)
   được GHI ĐÈ toàn bộ ở đây bằng token Untitled UI đã dùng xuyên suốt
   site — không viết màu/kích thước tự do, tái dùng đúng biến sẵn có.

   SEO/GEO/AEO/EEAT (đi kèm 3 file PHP mới/sửa — xem templates/entry-
   content-title.php, entry-content-meta.php, index.php,
   templates/page-blog-grid.php):
     - H1 THẬT trên mọi trang danh mục/Blog (trước đây HOÀN TOÀN không
       có H1 nào ngoài <title> — lỗ hổng SEO cơ bản, cùng loại lỗi đã
       sửa cho Trang/bài viết trước đây).
     - Badge chuyên mục = internal link THẬT (get_category_link()) trên
       từng card — tăng tín hiệu topical clustering + internal linking.
     - Tiêu đề card cho phép 2 dòng (line-clamp) thay vì cắt cụt giữa
       chữ ở 1 dòng — tiêu đề luôn đọc trọn nghĩa, tốt hơn cho người
       đọc lẫn crawler.
     - Hiện lại tác giả (EEAT — Experience/Expertise/Authoritativeness/
       Trust cần tác giả rõ ràng, bản gốc theme ẩn hẳn tác giả ở lưới)
       + thêm "X phút đọc" (tín hiệu nội dung có chiều sâu).
   ============================================================ */

/* ---- Bố cục lưới: CSS Grid thay float 3 cột kiểu cũ ---- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  margin:0;
}
.blog-grid .hentry{
  width:auto; float:none; padding:0; margin:0;
}
.blog-grid .hentry:first-child{ margin-top:0; }

/* ---- Khối tiêu đề Trang danh mục/Blog (breadcrumb + H1 mới) ---- */
.sce-page-header-container{ margin-bottom:var(--sce-sp-6,24px); }
.sce-page-header-container .sce-post-breadcrumb{ margin-bottom:var(--sce-sp-4,16px); }
.sce-page-header-container .post-title{ margin:0 !important; }
.sce-page-header-container .post-title span{ display:block; }

/* ---- Thẻ (card): viền + bo góc + đổ bóng nhẹ, tự đổi tối/sáng theo
   đúng token (giống mọi thành phần khác trong site — xem quyết định
   v4.4.0) ---- */
.blog-grid .hentry .post-content-archive-wrap{
  background:var(--sce-white);
  border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg);
  overflow:hidden;
  box-shadow:var(--sce-shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
  display:flex;
  flex-direction:column;
}
.blog-grid .hentry:hover .post-content-archive-wrap{
  transform:translateY(-4px);
  box-shadow:var(--sce-shadow-md);
}
.hentry .post-content-archive-wrap{ position:relative; } /* giữ đúng rule gốc (position:relative), không bỏ */

/* ---- Ảnh đại diện: tỉ lệ cố định + object-fit, bỏ hiệu ứng zoom
   1.1x kiểu cũ (lỗi thời), thay bằng zoom nhẹ 1.05x mượt hơn ---- */
.blog-grid .post-media{
  margin:0; position:relative; overflow:hidden;
  aspect-ratio:16/10;
  background:var(--sce-line-soft);
}
.blog-grid .post-media a{ display:block; height:100%; }
.blog-grid .post-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease; transform:none !important; /* huỷ inline transform cũ nếu có */
}
.blog-grid .hentry:hover .post-media img{ transform:scale(1.05) !important; }

/* ---- Khối chữ: bỏ nền xám phẳng + canh giữa kiểu cũ, chuyển sang
   canh trái, đệm hợp lý, đẩy nút "Đọc thêm" xuống đáy card bằng flex
   (mọi card cao bằng nhau nhờ CSS Grid, nút luôn thẳng hàng) ---- */
.blog-grid .hentry .post-content-wrap{
  padding:20px 22px 22px;
  background:transparent;
  text-align:left;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* ---- Badge chuyên mục (mới, dữ liệu thật get_the_category()) ---- */
.sce-post-cat-badge{
  display:inline-flex; align-items:center;
  padding:4px 12px; margin-bottom:12px;
  border-radius:var(--sce-r-pill);
  background:var(--sce-red-soft); color:var(--sce-red) !important;
  font-size:12.5px; font-weight:700; text-decoration:none !important;
  text-transform:uppercase; letter-spacing:.02em;
  align-self:flex-start;
  transition:background .15s ease;
}
.sce-post-cat-badge:hover{ background:var(--sce-red-softer); }

/* ---- Tiêu đề: cho phép 2 dòng (line-clamp) thay vì cắt cụt 1 dòng ---- */
.blog-grid .hentry .post-title{
  font-size:18px; line-height:1.4; font-weight:700;
  padding-bottom:0; margin-bottom:10px; border-bottom:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal;
}
.blog-grid .hentry .post-title > span{ padding:0; }
/* !important bắt buộc ở đây: selector ".hentry .post-title a{color:var(
   --sce-ink) !important}" (khối "Vá 4 điểm rò rỉ màu cứng", đầu file)
   cũng khớp đúng thẻ <a> này (card lưới cũng là 1 ".hentry"), cùng
   !important nên PHẢI thắng bằng độ đặc hiệu cao hơn (không thể bỏ
   !important ở đây vì đã phát hiện qua Playwright: khi đổi chế độ
   sáng/tối bằng nút bấm - đổi "data-theme" SAU khi trang đã tải - nếu
   2 rule cùng dùng var(--sce-ink) nhưng khác !important, rule không có
   !important có thể không được tính lại màu đúng lúc, làm chữ tiêu đề
   card giữ nguyên màu tối cũ dù đã chuyển sang chế độ sáng). */
.blog-grid .hentry .post-title a{ color:var(--sce-ink) !important; text-decoration:none; }
.blog-grid .hentry .post-title a:hover{ color:var(--sce-red) !important; }

/* ---- Hàng meta: hiện lại tác giả (EEAT), thêm "X phút đọc", tái
   dùng đúng pattern icon + dấu chấm "·" đã dùng cho bài viết đơn ---- */
.blog-grid .hentry .post-meta{ margin-bottom:12px; }
.blog-grid .hentry .post-meta .sce-meta-row{ font-size:12.5px; color:var(--sce-ink-soft); row-gap:4px; }
.blog-grid .hentry .post-meta .sce-icon{ width:14px; height:14px; }
.blog-grid .hentry .post-meta .post-by-author,
.blog-grid .hentry .post-meta .post-comment{ display:inline-flex !important; }
/* v4.7.3 — nhãn đã rút gọn ở PHP (bỏ "Đăng "/"Tác giả: " trong lưới,
   xem templates/entry-content-meta.php) nên dấu chấm ngăn cách cũng thu
   hẹp lại một chút cho vừa 1 hàng ngang trong thẻ 3 cột hẹp, khớp đúng
   cảm giác "1 hàng gọn" của khối bài nổi bật (.sce-blog-featured-meta
   dùng gap:16px cho layout rộng; ở đây thẻ hẹp hơn nhiều nên dùng mức
   nhỏ hơn, không copy y nguyên con số). */
.blog-grid .hentry .post-meta .sce-meta-sep{ margin:0 6px; }

/* ---- Tóm tắt: 3 dòng thay vì 5 dòng cũ (card gọn hơn), màu chữ phụ ---- */
.blog-grid .hentry .post-excerpt{
  margin:0 0 16px !important; color:var(--sce-ink-soft); font-size:14.5px; line-height:1.6;
  display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical; overflow:hidden !important;
}

/* ---- "Đọc thêm": đổi từ khối nền xám đặc sang text-link + icon mũi
   tên (đã có sẵn "arrow-right" trong sprite), luôn dính đáy card ---- */
.blog-grid .hentry .post-read-more{ margin-top:auto; }
.blog-grid .hentry .post-link a{
  display:inline-flex; align-items:center; gap:6px;
  padding:0 !important; background:transparent !important; color:var(--sce-red) !important;
  font-weight:700; font-size:14px; letter-spacing:normal;
}
.blog-grid .hentry .post-link a .sce-icon{ transition:transform .15s ease; }
.blog-grid .hentry .post-link a:hover{ background:transparent !important; color:var(--sce-red) !important; }
.blog-grid .hentry .post-link a:hover .sce-icon{ transform:translateX(3px); }

/* ---- Phân trang: pill tròn theo token, thay ô vuông xám + hoạ tiết
   nền cũ (assets/img/pattern.png) — bỏ hẳn hoạ tiết, không hợp phong
   cách tối giản hiện tại ---- */
.blog-grid + .logistix-pagination{ margin:40px 0 0; text-align:center; }
.logistix-pagination .inner-wrap:after{ content:none !important; background:none !important; } /* bỏ hoạ tiết pattern.png */
.logistix-pagination ul li{ margin:0 4px; }
.logistix-pagination ul li .page-numbers{
  width:38px; height:38px; line-height:36px;
  border-radius:var(--sce-r-pill);
  background:var(--sce-white); color:var(--sce-ink-soft);
  border:1px solid var(--sce-line);
  font-size:14px; font-weight:600;
}
.logistix-pagination ul li a.page-numbers:hover,
.logistix-pagination ul li .page-numbers.current{
  background:var(--sce-red); color:#fff; border-color:var(--sce-red);
}

/* ---- Responsive: 3 cột desktop → 2 cột tablet → 1 cột di động ---- */
@media (max-width:991px){
  .blog-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
}
@media (max-width:575px){
  .blog-grid{ grid-template-columns:1fr; gap:18px; }
  .blog-grid .hentry .post-content-wrap{ padding:16px 18px 18px; }
}

/* ---- Blog List (templates/entry-content-list.php — ít dùng hơn Blog
   Grid nhưng cùng bộ class ".post-content-archive-wrap"/".post-media"/
   ".post-content-wrap", cập nhật đồng bộ cho nhất quán "toàn bộ web")
   — giữ bố cục hàng ngang gốc (ảnh trái/chữ phải) của theme cha, chỉ
   đổi màu/bo góc/đổ bóng theo đúng token, bỏ nền xám phẳng ---- */
.blog-list .hentry .post-content-archive-wrap{
  background:var(--sce-white);
  border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg);
  overflow:hidden;
  box-shadow:var(--sce-shadow-sm);
  transition:box-shadow .2s ease;
}
.blog-list .hentry:hover .post-content-archive-wrap{ box-shadow:var(--sce-shadow-md); }
.blog-list .post-media img{ border-radius:0; }
.blog-list .hentry .post-content-wrap{ background:transparent; }
.blog-list .hentry .post-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; border-bottom:none;
}
.blog-list .hentry .post-title a{ color:var(--sce-ink) !important; } /* !important: xem giải thích ở ".blog-grid .hentry .post-title a" phía trên */
.blog-list .hentry .post-excerpt{ color:var(--sce-ink-soft); }
.blog-list .hentry .post-link a{ color:var(--sce-red) !important; background:transparent !important; }

/* ===================================================================
   TRANG (PAGE) MẶC ĐỊNH — REDESIGN THEO UNTITLED UI (30/09/2026, v4.6.0)
   ===================================================================
   LÝ DO: yêu cầu "thiết kế lại toàn bộ Page mặc định theo Untitled UI
   chuẩn SEO/GEO/AEO/EEAT và tốc độ tải trang, giao diện đẹp hiện đại".
   Phạm vi: mọi Trang dùng "Mẫu mặc định" (page.php, ví dụ Liên hệ/Về
   chúng tôi/Tuyển dụng) — KHÔNG đụng tới pagelanding.php/pagesimple.php
   (2 mẫu Trang landing riêng, tự thiết kế bố cục, ngoài phạm vi yêu
   cầu) và KHÔNG đụng tới bài viết Blog (post-content-single-wrap).

   QUYẾT ĐỊNH THIẾT KẾ (đã cân nhắc, ghi rõ để không đoán lại sau này):
   1) KHÔNG bọc ".page-content" (toàn bộ nội dung WPBakery thô) trong 1
      khung "card" full — vì ".page-content" KHÔNG nằm trong
      ".logistix-container" (cố ý từ trước, xem page.php) để các Trang
      dùng WPBakery "stretch row" tràn viền (full-bleed) không bị phá
      bố cục. Thay vào đó: khối HEADER (breadcrumb+H1, đúng markup của
      theme, không phải nội dung WPBakery) được nâng cấp thành 1 "band"
      độc lập — an toàn 100%, không đụng nội dung do người dùng tự dựng.
   2) Card đọc nội dung (viền+bo góc+đổ bóng) ở CHẾ ĐỘ SÁNG cho Trang:
      MỞ RỘNG thêm cho ".page-content" (trước đây chỉ áp dụng ở chế độ
      TỐI, xem khối "Thẻ đọc" phía trên) — rủi ro "khung đè lên stretch
      row" ĐÃ tồn tại từ trước ở chế độ tối (chưa ai báo lỗi), nay áp
      dụng nhất quán cả 2 chế độ đúng tinh thần "đẹp hiện đại" đồng bộ.
      CHỈ áp dụng cho Trang (".page-content"), KHÔNG đụng bài viết đơn.
      Nếu 1 Trang cụ thể dùng stretch-row và bị khung này làm lệch, xử
      lý riêng trang đó sau (thêm class tắt qua CSS theo ID trang).
   3) Không thêm JS, không thêm font/icon/ảnh mới — chỉ CSS thuần dùng
      lại đúng token màu sắc/khoảng cách/bo góc/đổ bóng đã có sẵn toàn
      site — không ảnh hưởng tốc độ tải trang (0 request thêm).
   4) SEO/GEO/AEO/EEAT: đã có breadcrumb + đúng 1 H1 hiển thị từ trước
      (v4.3.0). Đã KIỂM TRA inc/schema-sce.php — hiện CHỈ xuất
      Organization schema, CHƯA có WebPage/BreadcrumbList schema cho
      từng Trang. CỐ TÌNH CHƯA thêm schema mới ở bản này — nếu site
      đang dùng plugin SEO (Rank Math/Yoast...) có thể ĐÃ tự xuất
      WebPage/BreadcrumbList schema riêng, thêm từ theme dễ gây TRÙNG
      LẶP schema (Google Search Console cảnh báo, phản tác dụng AEO/GEO
      thay vì có ích) — cần xác nhận với người dùng đang dùng plugin
      SEO nào (hoặc không dùng plugin nào) TRƯỚC khi thêm, tránh suy
      đoán/bịa dữ liệu structured data trùng lặp. Xem CHANGELOG.txt. */

/* ---- 1) Band tiêu đề Trang — nổi bật hơn hẳn bản cũ (trước đây chỉ
   là chữ thường + margin-bottom, không có "band" riêng) ---- */
body.page .sce-page-header-container{
  background:var(--sce-white);
  border:1px solid var(--sce-line);
  border-radius:var(--sce-r-xl);
  padding:28px 32px;
  margin-bottom:var(--sce-sp-6,24px) !important;
  box-shadow:var(--sce-shadow-sm);
}
body.page .sce-page-header-container .sce-post-breadcrumb{
  margin-bottom:10px !important;
}
/* "Eyebrow": biến breadcrumb thành dải nhỏ dạng pill nhạt, đúng phong
   cách "kicker" Untitled UI (chữ nhỏ, chữ hoa nhẹ, tông màu phụ) thay
   vì hàng chữ thường lẫn với nội dung xung quanh. */
body.page .sce-page-header-container .sce-post-breadcrumb-trail{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:var(--sce-ink-soft);
}
body.page .sce-page-header-container .sce-post-breadcrumb-trail a{
  color:var(--sce-ink-soft); text-decoration:none;
}
body.page .sce-page-header-container .sce-post-breadcrumb-trail a:hover{
  color:var(--sce-red);
}
body.page .sce-page-header-container .post-title{
  font-size:clamp(26px, 3.6vw, 38px) !important;
  letter-spacing:-0.02em;
}
@media (max-width:767px){
  body.page .sce-page-header-container{
    padding:20px 18px; border-radius:var(--sce-r-lg);
  }
}

/* ---- 2) Nội dung Trang — BỎ "thẻ đọc" (SỬA 01/10/2026, v4.8.5, xem lý
   do đầy đủ ở khối "BỎ THẺ ĐỌC" cho bài viết, phía trên file — áp dụng
   cùng quyết định cho Trang, đồng bộ cả 2 loại nội dung).
   LƯU Ý RIÊNG CHO TRANG: khác với bài viết (đã có "#content-wrap.
   logistix-container" làm lề ngoài), page.php CỐ Ý KHÔNG bọc "#content-
   wrap" trong ".logistix-container" (xem comment gốc trong page.php) —
   nghĩa là "padding" dưới đây KHÔNG CHỈ là khoảng thở trong thẻ như
   trước, mà còn là LỀ DUY NHẤT của toàn bộ nội dung Trang (không có lớp
   lề nào khác bên ngoài) — vì vậy KHÔNG bỏ "padding" như đã làm với bài
   viết, chỉ bỏ "background/border/border-radius/box-shadow" (phần tạo
   ra hình "thẻ"). Đồng thời chỉnh "20px" (mobile) thành "24px" cho khớp
   đúng gutter chuẩn Untitled UI đã dùng cho bài viết (xem trang mẫu
   GHDNN Express: ".wrap{padding:0 24px}" mobile) — "32px" desktop đã
   khớp sẵn, giữ nguyên. */
.page-content{
  padding:32px;
}
@media (max-width:767px){
  .page-content{ padding:24px; }
}

/* ---- 3) Nút bấm WPBakery ("Custom Button", class ".vc_btn3") trong
   nội dung Trang — chỉ tinh chỉnh hình khối/đổ bóng/chuyển động, KHÔNG
   ép màu nền/chữ (tôn trọng màu người dùng đã chọn sẵn theo từng nút
   trong WPBakery, tránh phá thiết kế nút đã có riêng của từng Trang) */
.page-content .vc_btn3{
  border-radius:var(--sce-r-pill) !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease !important;
  box-shadow:var(--sce-shadow-sm);
}
.page-content .vc_btn3:hover{
  transform:translateY(-1px);
  box-shadow:var(--sce-shadow-md);
}

/* ---- 4) Form (liên hệ...) trong nội dung Trang — chuẩn hoá input/
   textarea/select/nút gửi theo đúng token, không phụ thuộc plugin form
   cụ thể nào (Contact Form 7/WPForms/Gravity Forms đều dùng thẻ HTML
   chuẩn input/textarea/select/button) ---- */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="number"],
.page-content input[type="url"],
.page-content textarea,
.page-content select{
  width:100%; box-sizing:border-box;
  padding:11px 14px; margin:0 0 4px;
  border:1px solid var(--sce-line); border-radius:var(--sce-r-md);
  background:var(--sce-white); color:var(--sce-ink);
  font-family:var(--sce-font-body); font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.page-content textarea{ min-height:120px; resize:vertical; }
.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus{
  outline:none; border-color:var(--sce-red);
  box-shadow:0 0 0 3px var(--sce-red-soft);
}
.page-content label{
  display:block; margin:0 0 6px; font-size:13.5px; font-weight:600; color:var(--sce-ink);
}
.page-content input[type="submit"],
.page-content button[type="submit"]{
  appearance:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; border-radius:var(--sce-r-pill);
  background:var(--sce-red); color:#fff !important;
  font-family:var(--sce-font-display); font-weight:700; font-size:14.5px;
  box-shadow:var(--sce-shadow-sm);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.page-content input[type="submit"]:hover,
.page-content button[type="submit"]:hover{
  background:var(--sce-red-dark); transform:translateY(-1px); box-shadow:var(--sce-shadow-md);
}

/* ============================================================
   BLOG GRID v2 — DỰNG LẠI THEO MẪU THAM CHIẾU (30/09/2026, v4.7.0)
   ------------------------------------------------------------
   Theo yêu cầu dựng lại trang "Blog Grid" bám sát mẫu tham chiếu người
   dùng gửi (theme "GHDNN Express", file page-blog.php + assets/css —
   đã tải về, đọc trực tiếp mã nguồn thật trước khi viết khối này, không
   đoán/không suy diễn riêng từ ảnh chụp màn hình). Toàn bộ màu/khoảng
   cách/bo góc/đổ bóng vẫn tái dùng ĐÚNG token Untitled UI đã có sẵn của
   site (không chép nguyên màu/kích thước của theme tham chiếu).
   ============================================================ */

/* ---- Đoạn giới thiệu (subtitle) dưới H1 — nằm trong đúng khối
   ".sce-page-header-container" trắng/bo góc đã có sẵn từ v4.6.0, chỉ
   thêm khoảng cách trên hợp lý ---- */
.sce-blog-lead{
  margin:10px 0 0 !important;
  color:var(--sce-ink-soft);
  font-size:15.5px; line-height:1.6;
  max-width:70ch;
}

/* ---- Thanh công cụ: ô tìm kiếm (trái, co giãn) + 2 nút Lưới/Danh sách
   (phải, cố định) ---- */
.sce-blog-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:0 0 var(--sce-sp-4,16px);
}
.sce-blog-search{
  flex:1 1 320px; display:flex; align-items:center; gap:10px;
  background:var(--sce-white); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-pill); padding:4px 6px 4px 16px;
  box-shadow:var(--sce-shadow-sm);
}
.sce-blog-search .sce-icon{ flex:none; width:18px; height:18px; color:var(--sce-red); } /* v4.7.4 */
.sce-blog-search input[type="text"]{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  color:var(--sce-ink); font-family:var(--sce-font-body); font-size:14.5px;
  padding:9px 0;
}
.sce-blog-search input[type="text"]::placeholder{ color:var(--sce-ink-soft); }
.sce-blog-search button[type="submit"]{
  flex:none; appearance:none; border:none; cursor:pointer;
  padding:9px 20px; border-radius:var(--sce-r-pill);
  background:var(--sce-red); color:#fff;
  font-family:var(--sce-font-display); font-weight:700; font-size:14px;
  transition:background .15s ease;
}
.sce-blog-search button[type="submit"]:hover{ background:var(--sce-red-dark); }

.sce-blog-view-toggle{
  flex:none; display:inline-flex; gap:4px;
  background:var(--sce-white); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-pill); padding:4px;
  box-shadow:var(--sce-shadow-sm);
}
.sce-view-btn{
  appearance:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex:none;
  width:34px; height:34px; padding:0 !important; margin:0;
  box-sizing:border-box; border-radius:var(--sce-r-pill);
  background:transparent; color:var(--sce-ink-soft);
  font-size:0; line-height:1; text-transform:none;
  transition:background .15s ease, color .15s ease;
}
/* !important cần thiết ở đây: rule chung "button{padding:15px 45px 14px;
   background-color:#e22e21; text-transform:uppercase}" của theme cha
   (style.css gốc, khối "Button") áp dụng cho MỌI <button> — đã kiểm
   chứng qua Playwright: chỉ riêng thuộc tính "padding" bị rule đó thắng
   (mọi thuộc tính khác như background/color đã tự thắng đúng nhờ độ
   đặc hiệu class cao hơn selector thẻ "button" — CHỈ "padding" là
   thuộc tính tôi CHƯA khai báo ở bản đầu nên bị lọt qua) — ép !important
   để nút 34×34px không bị đệm 15px/45px làm phình to biến dạng. */
.sce-view-btn svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Rule width/height CSS tường minh ở trên BẮT BUỘC phải có — đã kiểm
   chứng qua Playwright getComputedStyle(): dù thẻ <svg> có sẵn thuộc
   tính HTML width="17" height="17", Chromium KHÔNG dùng thuộc tính đó
   làm kích thước bên trong 1 flex container khi không có rule CSS
   "width" tường minh nào — computed width trả về "0px" (chỉ "height"
   đọc đúng 17px, "width" bị co về 0, làm mất hẳn icon dù DOM vẫn đúng)
   — đây là hành vi thật của trình duyệt với SVG "replaced element"
   trong ngữ cảnh flex, không phải lỗi CSS ghi sai. */
.sce-view-btn:hover{ color:var(--sce-ink); }
.sce-view-btn.is-active{ background:var(--sce-red); color:#fff; }

/* ---- Dải pill lọc chuyên mục — cuộn ngang trên mobile, không xuống
   dòng lộn xộn ---- */
.sce-blog-filters{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 var(--sce-sp-6,24px);
}
.sce-blog-filter{
  display:inline-flex; align-items:center;
  padding:8px 16px; border-radius:var(--sce-r-pill);
  background:var(--sce-white); border:1px solid var(--sce-line);
  color:var(--sce-ink-soft) !important; text-decoration:none !important;
  font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sce-blog-filter:hover{ border-color:var(--sce-red); color:var(--sce-red) !important; }
.sce-blog-filter.is-active{
  background:var(--sce-red); border-color:var(--sce-red); color:#fff !important;
}

/* ---- Ghi chú kết quả tìm kiếm ---- */
.sce-blog-search-note{
  margin:-8px 0 var(--sce-sp-6,24px) !important;
  font-size:13.5px; color:var(--sce-ink-soft);
}
.sce-blog-search-note a{ color:var(--sce-red); font-weight:600; }

/* ---- Bài nổi bật — thẻ lớn 2 cột (ảnh trái/nội dung phải), xuống 1
   cột trên mobile ---- */
.sce-blog-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  background:var(--sce-white); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-xl); overflow:hidden;
  box-shadow:var(--sce-shadow-sm);
  text-decoration:none !important; color:inherit;
  margin:0 0 var(--sce-sp-6,24px);
  transition:box-shadow .2s ease, transform .2s ease;
}
.sce-blog-featured:hover{ box-shadow:var(--sce-shadow-md); transform:translateY(-2px); }
.sce-blog-featured-img{ position:relative; overflow:hidden; background:var(--sce-line-soft); min-height:260px; }
.sce-blog-featured-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sce-blog-featured-body{
  display:flex; flex-direction:column; justify-content:center;
  padding:32px 36px;
}
.sce-blog-featured-tag{
  align-self:flex-start;
  display:inline-flex; align-items:center;
  padding:4px 12px; margin-bottom:14px;
  border-radius:var(--sce-r-pill);
  background:var(--sce-red-soft); color:var(--sce-red);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.sce-blog-featured-body h2{
  margin:0 0 12px; font-family:var(--sce-font-display);
  font-size:clamp(20px, 2.4vw, 28px); font-weight:800; line-height:1.3;
  color:var(--sce-ink) !important;
}
.sce-blog-featured-body p{
  margin:0 0 18px !important; color:var(--sce-ink-soft);
  font-size:15px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sce-blog-featured-meta{
  display:flex; flex-wrap:wrap; gap:16px;
  font-size:13px; color:var(--sce-ink-soft);
}
.sce-blog-featured-meta span{ display:inline-flex; align-items:center; gap:6px; }
.sce-blog-featured-meta .sce-icon{ width:15px; height:15px; }

@media (max-width:767px){
  .sce-blog-featured{ grid-template-columns:1fr; }
  .sce-blog-featured-img{ min-height:200px; aspect-ratio:16/10; }
  .sce-blog-featured-body{ padding:22px 20px; }
}

/* ---- 2 badge chuyên mục/thẻ (khi bài có từ 2 danh mục trở lên) ---- */
.sce-post-cat-badges{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;
}
.sce-post-cat-badges .sce-post-cat-badge{ margin-bottom:0; }

/* ---- Nút "Lưới" active mặc định khi JS chưa kịp chạy (progressive
   enhancement — không active nút nào bằng CSS thuần nếu JS bị chặn,
   chỉ .blog-grid mặc định hiển thị đúng sẵn ở HTML gốc nên không sao) ---- */

/* =================================================================
   DRAWER MENU MOBILE MỚI (01/10/2026, v4.8.0) — theo mẫu tham khảo
   "GHDNN Express" (guihangdinuocngoai.vn), thay cho menu "xổ xuống"
   mặc định của theme cha trên mobile.
   -----------------------------------------------------------------
   1) TẮT HẲN menu xổ xuống gốc của theme cha bằng CSS — "#main-nav-mobi"
      là chính "#main-nav" bị đổi id + chuyển vào trong "#site-header"
      lúc màn hình ≤991px (hàm mobileNav() trong main.js dòng 160-168
      của theme cha) rồi .slideToggle() khi bấm ".mobile-button". KHÔNG
      unbind/sửa main.js (rủi ro cao, có thể hỏng hành vi khác đang
      chạy đúng) — chỉ ép ẩn vĩnh viễn bằng "!important" (thắng cả
      inline style "display:block" mà .slideToggle() tự gán, nên dù
      JS vẫn chạy ngầm bình thường, khối này không bao giờ thật sự
      hiện ra nữa). Toàn bộ CSS cũ của "#main-nav-mobi" phía trên (mục
      8-9) GIỮ NGUYÊN không xoá — trở thành code "chết" vô hại, tránh
      rủi ro xoá nhầm thứ gì khác đang dùng chung selector.
   2) Khối thay thế thật sự hiển thị: "#sce-mobile-drawer" (nav mới,
      render qua SCE_Drawer_Nav_Walker — xem functions.php) + backdrop
      "#sceNavBackdrop" — cả 2 đều là con của "#site-header-inner"
      (xem templates/header-menu.php), nằm NGOÀI vùng có
      "backdrop-filter"/"filter" thật (chỉ pseudo-element "::before" ở
      mục 2 phía trên có blur) nên "position:fixed" ở đây hoạt động
      đúng chuẩn, không bị thu nhỏ theo khung header (xem giải thích
      đầy đủ ở khối "HEADER CHÍNH" phía trên).
   3) Mở/đóng do "assets/js/sce-header.js" (file JS MỚI, độc lập với
      main.js) điều khiển bằng 1 class DUY NHẤT "sce-nav-open" gắn trên
      "<html>" — class này vừa bật hiển thị drawer/backdrop, vừa khoá
      cuộn nền ("html.sce-nav-open, html.sce-nav-open body{overflow:
      hidden}"), không phụ thuộc class ".active" mà main.js tự gắn/gỡ
      trên ".mobile-button" (2 cơ chế chạy song song độc lập, không
      xung đột vì không đọc/ghi chung 1 class nào).
================================================================= */
#main-nav-mobi{ display:none !important; }

.sce-nav-backdrop{
  position:fixed; inset:0; z-index:99990;
  background:rgba(17,17,17,.45);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
html.sce-nav-open .sce-nav-backdrop{ opacity:1; pointer-events:auto; }
html.sce-nav-open,
html.sce-nav-open body{ overflow:hidden; }
@media (min-width:992px){
  .sce-nav-backdrop{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .sce-nav-backdrop{ transition:none; }
}

.sce-mobile-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:340px; width:min(86vw,360px);
  z-index:99991;
  background:var(--sce-white);
  box-shadow:-12px 0 40px -16px rgba(20,27,36,.35);
  padding:88px 18px 20px;
  padding-bottom:max(20px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
}
html.sce-nav-open .sce-mobile-drawer{ transform:translateX(0); }
@media (min-width:992px){
  .sce-mobile-drawer{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .sce-mobile-drawer{ transition:none; }
}

.sce-drawer-eyebrow{
  display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sce-ink-soft); margin:0 0 10px; padding:0 4px;
}
.sce-drawer-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.sce-drawer-link{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; border-radius:var(--sce-r-md);
  font-family:var(--sce-font-body); font-size:15px; font-weight:500;
  color:var(--sce-ink) !important; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.sce-drawer-link:hover,
.sce-drawer-link[aria-current="page"]{ background:var(--sce-red-soft); color:var(--sce-ink) !important; }
.sce-drawer-link-icon{ flex-shrink:0; color:var(--sce-ink-soft); }
.sce-drawer-link[aria-current="page"] .sce-drawer-link-icon{ color:var(--sce-red) !important; }
.sce-drawer-link-label{ flex:1; }

.sce-drawer-footer{
  margin-top:var(--sce-sp-8,32px); padding-top:var(--sce-sp-4,16px);
  border-top:1px solid var(--sce-line);
}
.sce-drawer-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 16px; border-radius:var(--sce-r-pill);
  background:var(--sce-red) !important; color:#fff !important;
  font-family:var(--sce-font-body); font-size:15px; font-weight:700;
  text-decoration:none; transition:background .15s ease;
}
.sce-drawer-cta:hover{ background:var(--sce-red-dark) !important; }
.sce-drawer-cta .sce-icon{ color:#fff; width:18px; height:18px; }

/* Hiệu ứng từng mục trượt/mờ dần vào khi mở drawer (stagger nhẹ) —
   tôn trọng prefers-reduced-motion, tắt hẳn nếu người dùng đã bật. */
.sce-drawer-menu > li{
  opacity:0; transform:translateX(10px);
  transition:opacity .28s ease, transform .28s ease;
}
html.sce-nav-open .sce-drawer-menu > li{ opacity:1; transform:translateX(0); }
.sce-drawer-menu > li:nth-child(1){ transition-delay:.03s; }
.sce-drawer-menu > li:nth-child(2){ transition-delay:.07s; }
.sce-drawer-menu > li:nth-child(3){ transition-delay:.11s; }
.sce-drawer-menu > li:nth-child(4){ transition-delay:.15s; }
.sce-drawer-menu > li:nth-child(5){ transition-delay:.19s; }
.sce-drawer-menu > li:nth-child(6){ transition-delay:.23s; }
.sce-drawer-menu > li:nth-child(n+7){ transition-delay:.27s; }
@media (prefers-reduced-motion:reduce){
  .sce-drawer-menu > li{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* ====================================================================
   TRANG QUỐC GIA (page-country.php) — MỚI 12/10/2026, v4.9.28
   ====================================================================
   Template dùng chung cho 30+ trang "Gửi hàng đi {quốc gia}" (xem
   page-country.php + inc/meta-box-country-sce.php). Toàn bộ class mới
   dưới đây đều tiền tố "sce-country-" để không va chạm với bất kỳ class
   nào khác trong theme. Tái dùng tối đa token/pattern đã có:
   ".sce-card" (khung thẻ chuẩn, đã có sẵn từ trước — comment gốc của nó
   nói rõ dành cho "các khối sắp xây (trang Hub, trang quốc gia...)"),
   ".sce-icon" (20x20, stroke:currentColor — tự ăn màu theo "color" của
   thẻ cha, không cần set màu riêng từng icon), ".sce-eeat-line" style
   (icon vuông góc trái + chữ, dùng lại tinh thần layout dù class tên
   khác). KHÔNG đụng ".sce-post-cta*"/"sce-page-header-container"/
   "post-title" — page-country.php tái dùng NGUYÊN các class đó, không
   cần CSS mới cho phần đó. */

/* ---------- 1. Dải "stat tile" (Giá cước / Thời gian Air / Sea) ---------- */
.sce-country-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--sce-sp-4,16px);
  margin:0 0 var(--sce-sp-8,32px);
}
.sce-country-stat{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--sce-white); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-lg); box-shadow:var(--sce-shadow-sm);
  padding:var(--sce-sp-5,20px);
  color:var(--sce-red); /* icon ăn theo màu này qua currentColor */
}
.sce-country-stat .sce-icon{ width:24px; height:24px; margin-top:2px; }
.sce-country-stat-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.sce-country-stat-label{
  font-size:12.5px; font-weight:600; color:var(--sce-ink-soft); text-transform:uppercase; letter-spacing:.02em;
}
.sce-country-stat-value{
  font-family:var(--sce-font-display); font-size:19px; font-weight:800; color:var(--sce-ink); line-height:1.3;
}
.sce-country-stat-value small{
  display:block; font-family:var(--sce-font-body); font-size:12px; font-weight:500; color:var(--sce-ink-soft);
}

/* ---------- 2. Khối nội dung chính (WPBakery, the_content()) ---------- */
.sce-country-body{ margin-bottom:var(--sce-sp-8,32px); }

/* ---------- 3. Tiêu đề section dùng chung (Dịch vụ/FAQ) ---------- */
.sce-country-section-title{
  font-family:var(--sce-font-display); font-size:clamp(20px, 2.6vw, 24px);
  font-weight:800; color:var(--sce-ink); margin:0 0 var(--sce-sp-4,16px);
}

/* ---------- 4. Badge "Dịch vụ áp dụng" ---------- */
.sce-country-services{ margin:0 0 var(--sce-sp-8,32px); }
.sce-country-services-list{ display:flex; flex-wrap:wrap; gap:10px; }
.sce-country-service-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--sce-r-pill);
  background:var(--sce-red-softer); border:1px solid var(--sce-red-soft);
  color:var(--sce-red-dark); font-size:13.5px; font-weight:600;
}
.sce-country-service-badge .sce-icon{ width:16px; height:16px; color:var(--sce-red); }

/* ---------- 5. 2 thẻ "Hàng phổ biến" / "Hàng cấm, hạn chế" ---------- */
.sce-country-items-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sce-sp-6,24px);
  margin:0 0 var(--sce-sp-6,24px);
}
.sce-country-items-card h3{
  display:flex; align-items:center; gap:8px;
  font-family:var(--sce-font-display); font-size:16px; font-weight:700;
  color:var(--sce-ink); margin:0 0 var(--sce-sp-4,16px);
}
.sce-country-items-card h3 .sce-icon{ color:var(--sce-green); width:20px; height:20px; }
.sce-country-items-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.sce-country-items-card li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13.5px; line-height:1.55; color:var(--sce-ink-soft);
}
.sce-country-items-card li .sce-icon{ width:16px; height:16px; margin-top:2px; color:var(--sce-green); }

.sce-country-items-card--warn h3 .sce-icon{ color:var(--sce-red); }
.sce-country-items-card--warn li .sce-icon{ color:var(--sce-red); }

@media (max-width:700px){
  .sce-country-items-grid{ grid-template-columns:1fr; }
}

/* ---------- 6. Thẻ "Ghi chú hải quan / thủ tục" ---------- */
.sce-country-customs{ margin:0 0 var(--sce-sp-8,32px); }
.sce-country-customs h3{
  display:flex; align-items:center; gap:8px;
  font-family:var(--sce-font-display); font-size:16px; font-weight:700;
  color:var(--sce-ink); margin:0 0 var(--sce-sp-3,12px);
}
.sce-country-customs h3 .sce-icon{ color:var(--sce-accent-amber); width:20px; height:20px; }
.sce-country-customs p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--sce-ink-soft); }

/* ---------- 7. FAQ riêng theo quốc gia (accordion <details>/<summary>) ---------- */
.sce-country-faq{ margin:0 0 var(--sce-sp-8,32px); }
.sce-country-faq-item{
  background:var(--sce-white); border:1px solid var(--sce-line);
  border-radius:var(--sce-r-md); margin-bottom:10px; overflow:hidden;
}
.sce-country-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; cursor:pointer; list-style:none;
  font-family:var(--sce-font-display); font-size:14.5px; font-weight:700; color:var(--sce-ink);
}
.sce-country-faq-item summary::-webkit-details-marker{ display:none; }
.sce-country-faq-item summary .sce-icon{
  width:18px; height:18px; flex:none; color:var(--sce-ink-soft);
  transition:transform .2s ease;
}
.sce-country-faq-item[open] summary .sce-icon{ transform:rotate(180deg); }
.sce-country-faq-answer{
  padding:0 20px 18px; font-size:13.5px; line-height:1.7; color:var(--sce-ink-soft);
}
.sce-country-faq-answer p{ margin:0 0 10px; }
.sce-country-faq-answer p:last-child{ margin-bottom:0; }

/* ---------- 8. EEAT (reviewer box tái dùng + ngày cập nhật) ---------- */
.sce-country-eeat{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 var(--sce-sp-6,24px);
  padding-top:var(--sce-sp-6,24px);
  border-top:1px solid var(--sce-line);
}
/* ".sce-author-card"/"-avatar"/"-label"/"-name"/"-role"/"-bio" là markup
   CÓ SẴN của shortcode "[sce_reviewer_box]" (plugin sce-core, class
   SCE_Author_Reviewer::render_html()) — CSS gốc của nó nằm trong
   "assets/css/sce-core.css" của PLUGIN (đã đọc trực tiếp trước khi
   viết), dùng bảng màu CŨ (navy "#0D1F3C"/đỏ "#D32F2F" khác hẳn
   "--sce-red"/"--sce-ink" của bản thiết kế lại Untitled UI hiện tại) —
   nếu không ghi đè, hộp reviewer sẽ lệch tông hẳn so với phần còn lại
   của trang. GHI ĐÈ TOÀN BỘ ở đây, CHỈ áp dụng bên trong ".sce-country-
   eeat" (không đụng nơi khác có thể đang dùng shortcode này với giao
   diện gốc), đổi đúng sang token/tỉ lệ đã dùng cho ".post-author" (hộp
   "Về tác giả" cuối bài viết) để 2 nơi nhất quán 1 kiểu. */
.sce-country-eeat .sce-author-card{
  margin:0; flex:1; min-width:240px;
  background:var(--sce-white) !important; border:1px solid var(--sce-line) !important;
  border-radius:var(--sce-r-lg) !important; padding:var(--sce-sp-5,20px) !important;
  gap:14px;
}
.sce-country-eeat .sce-author-avatar{
  width:56px !important; height:56px !important; border-radius:50% !important;
  border:2px solid var(--sce-line-soft);
}
.sce-country-eeat .sce-author-label{
  color:var(--sce-red) !important; font-size:11px !important;
}
.sce-country-eeat .sce-author-name,
.sce-country-eeat .sce-author-name a{
  color:var(--sce-ink) !important; font-family:var(--sce-font-display); font-size:14.5px !important;
}
.sce-country-eeat .sce-author-role{ color:var(--sce-ink-soft) !important; font-size:12.5px !important; }
.sce-country-eeat .sce-author-bio{ color:var(--sce-ink-soft) !important; font-size:13px !important; line-height:1.6; }
.sce-country-updated{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--sce-ink-soft);
}
.sce-country-updated .sce-icon{ width:15px; height:15px; color:var(--sce-ink-faint); }
.sce-country-updated time{ font-weight:600; color:var(--sce-ink); }

/* ---------- 9. CTA cuối trang — biến thể nhỏ của ".sce-post-cta" gốc ---------- */
.sce-post-cta--page{ margin-top:0; }

@media (max-width:480px){
  .sce-country-stats{ grid-template-columns:1fr; }
}

