/* ========================================================= Font tự host (v1.5) — thay Google Fonts CDN để loại bỏ round-trip chặn hiển thị (render-blocking request) tới domain ngoài. 2 subset latin + vietnamese cho MỖI khối lượng chữ — vietnamese chỉ chứa ký tự có dấu đặc thù, KHÔNG thay thế được latin (chữ không dấu/số/dấu câu). ========================================================= */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-vn.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-vn.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600-vn.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700-vn.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800-vn.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-400-vn.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plexmono-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plexmono-700-vn.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} /* ========================================================= GHDNN Express — Design tokens & shared components Palette: đỏ #D60000 · vàng #FFC107 · trắng · xám nhạt Type: Inter (nội dung) + IBM Plex Mono (mã vận đơn/số liệu) ========================================================= */ :root{ --bg:#F5F5F7; --surface:#FFFFFF; --surface-2:#FAFAFA; --border:#E5E5EA; --ink:#1D1D1F; --ink-soft:#6E6E73; --ink-faint:#9C9CA1; --red:#D60000; --red-dark:#A50000; --red-tint:#FDECEC; --yellow:#FFC107; --yellow-ink:#8A6200; --yellow-tint:#FFF6DC; --green:#1E8E5A; --green-tint:#E7F6EE; /* v1.2 — thêm bộ màu riêng theo từng nhóm trạng thái timeline (trước đây gần như mọi trạng thái đều dùng chung --yellow, khiến timeline "phẳng", khó phân biệt tiến trình bằng mắt) */ --blue:#2563EB; --blue-tint:#E8EFFD; --violet:#7C3AED; --violet-tint:#F1EBFD; --slate:#64748B; --slate-tint:#EEF1F5; --orange:#EA580C; --orange-tint:#FDEEE3; --radius-lg:26px; --radius-md:18px; --radius-sm:11px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.14); --dur:.18s; } html[data-theme="dark"]{ --bg:#09090B; --surface:#1B1B1D; --surface-2:#141416; --border:#2A2A2D; --ink:#F5F5F7; --ink-soft:#A0A0A6; --ink-faint:#6C6C70; --red:#FF5245; --red-dark:#FF3B2E; --red-tint:#2A1512; --yellow:#FFC107; --yellow-ink:#FFD866; --yellow-tint:#2A2110; --green:#3ED28A; --green-tint:#0F2A1E; --blue:#5B8DEF; --blue-tint:#12203A; --violet:#A78BFA; --violet-tint:#241B3A; --slate:#94A3B8; --slate-tint:#1E2530; --orange:#FB923C; --orange-tint:#301D10; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.6); } *{box-sizing:border-box;} /* v1.7.9 HOTFIX GỐC — lỗi thật gây ra "cuộn xuống là mất luôn header" (ảnh chụp bạn gửi): đặt "overflow-x:hidden" TRÊN CẢ 2 PHẦN TỬ "html" VÀ "body" CÙNG LÚC khiến trình duyệt tự suy ra "overflow-y:auto" cho CẢ HAI (theo chuẩn CSS: 1 trục không phải "visible" thì trục còn lại không được giữ "visible", tự chuyển "auto") — kết quả là "html" VÀ "body" cùng lúc trở thành 2 khung cuộn (scroll container) riêng biệt, chồng lên nhau. "header.site{position:sticky}" chỉ dính đúng vào khung viewport thật khi CHỈ CÓ 1 khung cuộn duy nhất — có 2 khung cuộn lồng nhau khiến trình duyệt "mất dấu" viewport thật, sticky coi như vô hiệu, header cuộn trôi mất luôn như phần tử thường (đã xác minh lại bằng cách dựng lại đúng HTML/CSS/JS của theme, chạy thử trong trình duyệt thật ở môi trường cô lập — không phải do cache hay bản CSS cũ). SỬA: đổi "overflow-x:hidden" → "overflow-x:clip" (khai báo "hidden" giữ lại TRƯỚC làm lớp dự phòng cho trình duyệt rất cũ chưa hỗ trợ "clip" — xem đúng pattern "khai báo cũ trước, khai báo mới sau" đã dùng ở nhiều chỗ khác trong file này). "overflow-x:clip" vẫn chặn tràn ngang y hệt "hidden" (mục tiêu ban đầu của rule này — xem HOTFIX ngay bên dưới), nhưng KHÔNG kéo theo tác dụng phụ biến "overflow-y" thành "auto" — html/body không còn bị biến thành khung cuộn riêng, "position:sticky" của header hoạt động đúng như thiết kế trở lại. Đã kiểm chứng bằng Playwright: với "overflow-x:hidden" trên cả html+body, header cuộn mất; đổi sang "overflow-x:clip", header dính đúng ở top:0 xuyên suốt khi cuộn cả trang dài. */ html,body{margin:0;padding:0;overflow-x:hidden;overflow-x:clip;} /* v1.10.3 HOTFIX NGHIÊM TRỌNG — xác nhận qua ảnh chụp thực tế: trang /tracking/ trên mobile bị tràn ngang, tự động cuộn/lệch sang phải làm mất chữ đầu dòng ("Tra cứu hành trình đơn hàng" → "ứu hành trình đơn hàng", "SC26000084" → "C26000084"...). NGUYÊN NHÂN: label ẩn cho ô nhập mã vận đơn (kỹ thuật "ẩn nhưng vẫn đọc được bằng trình đọc màn hình") dùng position:absolute;left:-9999px — đẩy hẳn 1 khối DOM ra XA bên ngoài viewport gần 10.000px. overflow-x:hidden ở body VỀ LÝ THUYẾT chặn được việc NHÌN THẤY vùng đó, nhưng trên iOS Safari có quirk đã biết: cử chỉ vuốt/rubber-band vẫn có thể dịch chuyển visual viewport theo vùng layout khổng lồ đó, gây đúng hiện tượng "tự động lệch màn hình" như ảnh chụp. Thay bằng pattern chuẩn "visually-hidden" — hộp CHỈ 1×1px (không mở rộng layout ra xa) thay vì đẩy ra xa toạ độ âm — vẫn ẩn với mắt thường, vẫn đọc được bằng trình đọc màn hình, KHÔNG có rủi ro tràn ngang. Áp dụng cho MỌI label ẩn tương tự trong tương lai — không dùng lại left:-9999px nữa. */ .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* v1.7.17 HOTFIX — phát hiện khi rà lại phân trang: WordPress TỰ IN thêm 1 tiêu đề "Điều hướng bài viết" với class="screen-reader-text" ngay phía trên mọi khối the_posts_pagination() (chuẩn accessibility cốt lõi của WordPress — chỉ dành cho trình đọc màn hình, không phải lỗi của WordPress). Theme này CHƯA TỪNG khai báo CSS cho class "screen-reader-text" (chỉ có ".visually-hidden" ở trên, tên khác nên không áp dụng được) — nghĩa là dòng tiêu đề đó hiện RÕ RA ngay phía trên số trang ở MỌI trang danh sách dùng the_posts_pagination() (archive.php/ index.php/archive-route.php/archive-carrier.php), y hệt như đã kiểm chứng bằng công cụ dựng lại trang thật. Khai báo class chuẩn của WordPress (đúng tên "screen-reader-text" — bắt buộc phải đúng tên này, không đổi được) theo đúng kỹ thuật ẩn an toàn giống ".visually-hidden" ở trên. */ .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } body{ background: radial-gradient(900px 500px at 15% 0%, rgba(214,0,0,.05), transparent 55%), radial-gradient(700px 460px at 100% 8%, rgba(255,193,7,.07), transparent 55%), var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; transition:background var(--dur),color var(--dur); } html[data-theme="dark"] body{ background: radial-gradient(900px 500px at 15% 0%, rgba(255,82,69,.06), transparent 55%), radial-gradient(700px 460px at 100% 8%, rgba(255,193,7,.04), transparent 55%), var(--bg); } .mono{font-family:'IBM Plex Mono',monospace;} a{color:inherit;} button{font-family:inherit;} img{max-width:100%;display:block;} :focus-visible{outline:2px solid var(--red);outline-offset:2px;} @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;} } .wrap{max-width:1120px;margin:0 auto;padding:0 24px;} @media(min-width:768px){ .wrap{padding:0 32px;} } .narrow{max-width:760px;} /* ================= HEADER ================= */ /* v1.7.3 — z-index header từng là 40, thấp hơn ".mobile-sticky-bar" (45)/"#backToTop" (44) — tăng lên để header (và mọi thứ lồng bên trong) luôn nổi trên 2 khối cố định đáy màn hình. v1.7.5 — thử sửa lỗi khung menu mobile chỉ hiện thành hộp nhỏ bằng cách chuyển ".nav-backdrop"/ ".nav-links" RA NGOÀI
— fix được mobile nhưng LÀM HỎNG DESKTOP: ".nav-links" cần là CON TRỰC TIẾP của ".nav" (flex container) mới nằm đúng hàng ngang cùng logo/nút phải; chuyển ra ngoài khiến nó rớt xuống 1 dòng riêng, đè lên đầu nội dung trang (xác nhận qua ảnh chụp desktop bạn gửi). Đã ĐẢO LẠI — header.php để 2 khối này BÊN TRONG
như nguyên bản. v1.7.6 — SỬA ĐÚNG TẬN GỐC: nguyên nhân thật không phải VỊ TRÍ trong DOM, mà là ".backdrop-filter" đặt TRỰC TIẾP trên header.site — theo chuẩn CSS, phần tử có "backdrop-filter"/"filter"/ "transform" sẽ tự trở thành "containing block" cho MỌI con "position:fixed" bên trong nó (khiến ".nav-links" full-screen-drawer bị co lại chỉ cao bằng đúng header). Thay vì di chuyển vị trí (gây lỗi desktop ở v1.7.5), nay chuyển "backdrop-filter" sang 1 lớp "::before" RIÊNG (xem ngay dưới) — header.site KHÔNG còn tự đặt backdrop-filter nữa nên không tạo containing block cho con "position:fixed", trong khi ".nav-links" vẫn ở ĐÚNG vị trí lồng bên trong
như thiết kế gốc, giữ nguyên layout desktop. */ /* v1.7.8 — header đổi từ "luôn có nền/viền cố định" sang kiểu "ẩn vào đầu trang, nổi thành thanh khi cuộn xuống" (tham khảo noti.vn — nghiên cứu qua ảnh chụp thực tế người dùng gửi: ban đầu header trong suốt/không thấy khung, cuộn xuống thì hiện thành thanh nổi có nền/bóng đổ). header.site CHÍNH NÓ luôn trong suốt (không nền/viền/bóng) — chỉ đóng vai trò khung định vị "sticky" + khung tham chiếu z-index cho các phần tử con (drawer mobile, backdrop...). Lớp nền "thanh nổi" thật sự nằm ở "::before" của ".nav" (xem ngay dưới), được BẬT/TẮT bằng class ".is-scrolled" do JS gắn vào header.site khi window.scrollY vượt ngưỡng nhỏ (main.js). Cách làm này AN TOÀN với lỗi "containing block" từng gặp ở v1.7.5/1.7.6: "background-filter" vẫn chỉ nằm trên 1 pseudo-element (không có phần tử con "position:fixed" nào bên trong nó), không đặt trực tiếp lên header.site hay .nav — nên không biến bất kỳ phần tử thật nào thành containing block sai cho ".nav-links" (drawer mobile). */ header.site{ position:sticky;top:0;z-index:50; padding-top:0; padding-bottom:0; transition:padding .25s ease; } header.site.is-scrolled{ padding-top:10px; padding-bottom:10px; } .nav{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;gap:12px;position:relative;} /* Thanh nổi khi cuộn — bám theo đúng khung ".nav" (đã được ".wrap" canh giữa + có padding ngang sẵn), nên tự nhiên "thu nhỏ" cách rìa màn hình một khoảng, đúng hiệu ứng "pill nổi" thay vì tràn sát mép như thanh cố định kiểu cũ. Mặc định ẩn (opacity:0) — chỉ hiện khi header.site có class "is-scrolled". */ .nav::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:var(--radius-lg); background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid transparent; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; box-shadow:none; pointer-events:none; transition:opacity .25s ease, box-shadow .25s ease, border-color .25s ease; } header.site.is-scrolled .nav::before{ opacity:1; box-shadow:var(--shadow); border-color:var(--border); } @media(prefers-reduced-motion:reduce){ header.site{transition:none;} .nav::before{transition:none;} } .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;} .brand-mark{width:34px;height:34px;border-radius:9px;object-fit:contain;flex-shrink:0;display:block;} .brand-name{font-weight:700;font-size:16px;letter-spacing:-.01em;} .nav-burger{ display:flex; align-items:center; justify-content:center; position:relative; width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface); color:var(--ink); cursor:pointer; margin-left:auto; flex-shrink:0; z-index:61; } @media(min-width:860px){ .nav-burger{display:none;} } .nav-burger svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .15s ease,transform .2s ease;} .nav-burger .icon-close{opacity:0;transform:translate(-50%,-50%) rotate(-90deg);} .nav-burger[aria-expanded="true"] .icon-burger{opacity:0;transform:translate(-50%,-50%) rotate(90deg);} .nav-burger[aria-expanded="true"] .icon-close{opacity:1;transform:translate(-50%,-50%) rotate(0);} /* Mobile: bố cục 3 cột đều — hamburger trái, logo THẬT SỰ ở giữa màn hình, action phải. Trên desktop giữ nguyên flex cũ (space-between: logo trái, menu ngang giữa, action phải). */ @media(max-width:859px){ .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;} .nav-burger{order:-1;margin-left:0;justify-self:start;} .brand{justify-self:center;min-width:0;} .nav-right{justify-self:end;min-width:0;} } /* v1.9.3 — phòng ngừa tái diễn lỗi tràn/đè (xem thêm giải thích ở rule ".nav-right .btn-primary" phía dưới): thêm min-width:0 cho 2 cột 2 đầu grid header — mặc định track "1fr"/"auto" trong CSS Grid có min-width:auto (không tự co dưới kích thước nội dung), khiến nội dung "nowrap" (nút, logo) có thể tràn đè sang cột bên cạnh thay vì co lại đúng như kỳ vọng. Màn cực hẹp (≤374px, VD iPhone SE): thu gọn thêm nút CTA chính trong header để chắc chắn vừa 1 dòng. */ @media(max-width:374px){ .nav-right .btn-primary{padding:9px 12px;font-size:12.5px;} .brand-name{font-size:14px;} } /* v1.7.17 HOTFIX — đổi selector ".nav-links" (class) sang "#navLinks" (id): phát hiện lỗi thật khi rà lại phân trang (paginate_links()/the_posts_pagination()) — WordPress core TỰ SINH RA
...
bên trong khối phân trang (không cách nào đổi tên qua tham số), TRÙNG Y HỆT tên class ".nav-links" của menu chính/drawer mobile ở header.php. Vì các rule dưới đây vốn không giới hạn phạm vi (chỉ dùng class, không có class/id cha bao ngoài), CSS drawer mobile (position:fixed, transform:translateX(100%) khi đóng, cao hết màn hình...) ÁP DỤNG NHẦM luôn vào khối phân trang ở MỌI trang danh sách (archive.php/index.php/archive-route.php/ archive-carrier.php — nơi dùng the_posts_pagination()) — khiến toàn bộ số trang bị đẩy ra NGOÀI MÀN HÌNH (translateX(100%), giống hệt trạng thái "đóng" của drawer) trên mọi thiết bị < 860px, tức là ẩn mất trên di động — đa số lượt truy cập. header.php đã có sẵn "id="navLinks"" trên ĐÚNG 1 phần tử duy nhất (khối menu chính) — đổi sang id vừa loại bỏ hoàn toàn nguy cơ trùng tên với bất kỳ class "nav-links" nào WordPress/plugin khác tự sinh ra sau này, vừa không cần sửa gì ở HTML/JS (main.js vốn đã dùng "$('navLinks')" theo id, không dùng class, nên đổi an toàn). */ #navLinks{display:none;gap:28px;font-size:14px;color:var(--ink-soft);} #navLinks li{list-style:none;margin:0;} #navLinks a{text-decoration:none;transition:color var(--dur);} #navLinks a:hover,#navLinks a[aria-current="page"]{color:var(--ink);} @media(min-width:860px){ #navLinks{display:flex;} } .nav-links-footer{display:none;} /* chỉ hiện trong drawer mobile — xem bên dưới */ /* v1.9.5 — redesign menu mobile theo phản hồi "chưa chuyên nghiệp": đổi từ hộp dropdown nhỏ nổi lên nội dung → drawer trượt từ mép phải (pattern app cao cấp quen thuộc), có backdrop làm mờ nền, khối CTA cố định ở đáy panel (luôn hiện Đăng nhập + Tra cứu, không phụ thuộc menu WP admin đã cấu hình gì — xem giải thích trong header.php). */ /* v1.7.4 — thêm khai báo "top/right/bottom/left" TRUYỀN THỐNG đứng TRƯỚC "inset:0" (và tương tự, 1 giá trị width/padding cố định đứng trước bản dùng min()/max()/env()) làm LỚP DỰ PHÒNG: nếu máy khách/hệ thống cache nào đó (VD plugin cache tối ưu & gộp CSS) xử lý sai 1 dòng CSS hiện đại (inset/min()/max()/env()) khiến trình duyệt bỏ qua dòng đó, layout vẫn còn giá trị cố định phía trước để dùng — tránh tình trạng khung/lớp phủ menu bị co lại sai kích thước hoàn toàn. */ .nav-backdrop{ position:fixed; top:0; right:0; bottom:0; left:0; inset:0; background:rgba(0,0,0,.42); z-index:58; opacity:0; pointer-events:none; transition:opacity .25s ease; } .nav-backdrop.open{opacity:1; pointer-events:auto;} @media(min-width:860px){ .nav-backdrop{display:none !important;} } html.nav-open-lock,html.nav-open-lock body{overflow:hidden;} @media(max-width:859px){ #navLinks{ display:flex; flex-direction:column; gap:2px; position:fixed; top:0; right:0; bottom:0; width:340px; width:min(86vw,360px); background:var(--surface); z-index:60; padding:92px 18px 20px; padding-bottom:max(20px, env(safe-area-inset-bottom)); box-shadow:-12px 0 40px -16px rgba(0,0,0,.28); transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1); overflow-y:auto; -webkit-overflow-scrolling:touch; } #navLinks.open{transform:translateX(0);} #navLinks a{padding:13px 14px;border-radius:10px;font-size:15px;color:var(--ink);font-weight:500;} #navLinks a:hover,#navLinks a[aria-current="page"]{background:var(--surface-2);} /* v1.7.7 — "margin-top:auto" trước đây ép khối Đăng nhập/Tra cứu xuống SÁT ĐÁY drawer bằng mọi giá — với menu chỉ 6 mục ngắn trên 1 khung cao hết màn hình, khoảng trống ở giữa bị kéo dãn quá lớn, nhìn như bị lỗi/thiếu nội dung (đúng như ảnh chụp bạn gửi). Đổi sang khoảng cách CỐ ĐỊNH — khối Đăng nhập/Tra cứu nay nằm ngay sau danh sách menu với khoảng cách hợp lý, phần dư (nếu màn hình cao hơn nội dung) dồn xuống ĐÁY khung thay vì lơ lửng giữa 2 khối — bố cục luôn giữ đúng tỉ lệ dù menu có bao nhiêu mục hay khung cao thấp ra sao. */ .nav-links-footer{ display:flex; flex-direction:column; gap:10px; margin-top:40px; padding-top:16px; border-top:1px solid var(--border); } .nav-links-footer-link{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; } .nav-links-footer-link:hover{background:var(--surface-2);} .nav-links-footer .btn-block{width:100%;} } .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;} .theme-toggle{ width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface); display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);flex-shrink:0; } .theme-toggle:hover{color:var(--ink);} .nav-login{ width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface); display:flex;align-items:center;justify-content:center;color:var(--ink-soft);flex-shrink:0;text-decoration:none; transition:color var(--dur),border-color var(--dur); } .nav-login:hover{color:var(--ink);border-color:var(--ink-faint);} /* Mobile: header chỉ giữ ĐÚNG 1 CTA nổi bật (Tra cứu vận đơn) — theo spec §7 "Mobile: Logo, Menu icon, CTA Tracking nổi bật". v1.9.4 HOTFIX — xác nhận qua ảnh chụp thực tế: nút "Tra cứu vận đơn" từng đè lên logo trên mobile — vì cột phải (nav-right) có quá nhiều nội dung không co được: nút CTA dài (nowrap) + icon đăng nhập, cộng dồn rộng hơn khoảng trống thực tế giữa hamburger và logo trên màn 375-430px. min-width:0 (bản trước) chỉ cho phép TRACK co lại, không cho phép NỘI DUNG bên trong (text nowrap) co theo — nội dung vẫn tràn ra ngoài track, đè lên cột logo bên cạnh (Grid mặc định overflow:visible, không tự cắt). Sửa tận gốc bằng cách GIẢM THẬT nội dung trên mobile thay vì chỉ ép layout co: (1) Ẩn hẳn icon đăng nhập khỏi header trên mobile — không mất chức năng vì đã thêm "Đăng nhập" vào menu hamburger (xem ghdnn_default_nav() trong functions.php). (2) Rút gọn chữ nút CTA chính: "Tra cứu vận đơn" → chỉ "Tra cứu" trên màn hẹp (<640px), giữ đủ chữ ở tablet/desktop nơi thừa chỗ. v1.7.3 — bỏ hẳn nút "Nhận báo giá" khỏi header (trước đây đã ẩn trên mobile bằng ".btn.nav-cta-secondary{display:none}" ở đây, nay bỏ theo yêu cầu nên rule đó không còn cần nữa — đã xoá cùng phần tử trong header.php). */ @media(max-width:480px){ .theme-toggle{display:none;} } @media(max-width:859px){ .nav-login{display:none;} } @media(max-width:639px){ .nav-cta-full{display:none;} } /* ================= BACK TO TOP + READING TIME (v1.13) ================= */ .back-to-top{ position:fixed; right:20px; bottom:20px; z-index:44; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease,transform .2s ease,color .2s ease,border-color .2s ease; } .back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); } .back-to-top:hover{ color:var(--red); border-color:var(--red); } @media(max-width:859px){ .back-to-top{ bottom:76px; right:16px; width:40px; height:40px; } } .read-time{ display:inline-block; margin-top:14px; font-size:12.5px; color:var(--ink-faint); } /* ================= QUICK CONTACT WIDGET — hợp nhất Desktop + Mobile (v1.9.6) ================= v1.9.3: cụm nút liên hệ nổi CHỈ hiện Desktop (di động dùng riêng ".mobile-sticky-bar" ở header.php). v1.9.4: theo yêu cầu Admin ("làm lại cấu trúc đẹp hơn — Desktop dọc, Mobile ngang") và lựa chọn "thay thế hoàn toàn bằng thanh mới" khi được hỏi — đã XOÁ ".mobile-sticky-bar" khỏi header.php, gộp làm 1 component DUY NHẤT ở đây: - Desktop (>859px, mặc định bên dưới): cụm nút tròn nổi xếp DỌC, bên TRÁI. - Mobile (≤859px, override bên dưới): chuyển thành 1 thanh NGANG cố định full-width cuối màn hình, dùng lại đúng pattern "grid-auto-flow:column; grid-auto-columns:1fr" đã ổn định từ ".mobile-sticky-bar" cũ — tự chia đều cột theo ĐÚNG số nút đang hiện thực tế (không vỡ layout khi 1 kênh nào đó chưa cấu hình/bị ẩn), mỗi nút hiện thêm nhãn chữ (.gqc-label) như thanh cũ. v1.9.5 — icon đổi từ SVG vẽ tay sang ảnh PNG thật (Admin yêu cầu "thay link bộ icon", xem inc/floating-contact.php) — thêm ".gqc-btn img" để canh ảnh gọn trong nút tròn (Desktop) lẫn phía trên nhãn chữ (Mobile); border-color vẫn đổi màu thương hiệu riêng từng kênh khi hover (icon ảnh không đổi màu theo được vì không dùng currentColor như SVG trước đây, nhưng viền vẫn nổi bật). v1.9.6 — Admin xem ảnh chụp thật trên site, phản hồi 2 điểm cụ thể: (1) "Dịch lên cho nằm Giữa mém bên trái" — cụm nút Desktop trước đây neo ở GÓC DƯỚI-trái (bottom:20px, lý do ban đầu: né ".back-to-top" đang chiếm góc dưới-phải) — nay đổi sang CĂN GIỮA theo chiều dọc màn hình (top:50%; transform:translateY(-50%)) thay vì neo đáy — vẫn không chạm ".back-to-top" vì 2 khối nằm 2 bên trái/phải khác nhau, không phụ thuộc vị trí theo chiều dọc. Chỉ áp dụng ở Desktop — Mobile giữ nguyên dạng thanh ngang cố định đáy màn hình (reset lại top/transform trong khối @media bên dưới, tránh 1 phần tử vừa có top vừa có bottom làm nó tự giãn hết chiều cao — lỗi CSS position:fixed kinh điển khi thiếu bước reset này). (2) "Hình icon đang có nền trắng nhiều" — icon ảnh PNG thật (v1.9.5) nhỏ hơn nhiều so với vòng tròn nút 46px nên khoảng trắng viền quanh lộ rõ — tăng kích thước icon trong nút (Desktop 22px → 32px, Mobile 24px → 28px) để ảnh lấp gần kín nút, giảm mạnh phần nền trắng còn hở. */ .ghdnn-quick-contact{ position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:column; gap:10px; } .gqc-btn{ position:relative; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; background:var(--surface); color:var(--ink-soft); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform var(--dur),color var(--dur),border-color var(--dur),background var(--dur); } .gqc-btn img{ width:32px; height:32px; object-fit:contain; display:block; pointer-events:none; } .gqc-btn:hover{ transform:translateY(-3px); border-color:var(--red); } .gqc-btn.gqc-zalo:hover{ border-color:#0068FF; } /* xanh Zalo, đúng màu thương hiệu */ .gqc-btn.gqc-whatsapp:hover{ border-color:#25D366; } /* xanh WhatsApp */ .gqc-btn.gqc-viber:hover{ border-color:#7360F2; } /* tím Viber */ .gqc-btn.gqc-phone{ background:var(--red); border-color:var(--red); } .gqc-btn.gqc-phone:hover{ background:var(--red-dark); border-color:var(--red-dark); } .gqc-pulse{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(214,0,0,.45); animation:gqc-pulse-anim 2.2s infinite; pointer-events:none; } @keyframes gqc-pulse-anim{ 0%{ box-shadow:0 0 0 0 rgba(214,0,0,.45); } 100%{ box-shadow:0 0 0 16px rgba(214,0,0,0); } } @media (prefers-reduced-motion: reduce){ .gqc-pulse{ animation:none; } } .gqc-label{ display:none; } /* chỉ hiện ở thanh ngang Mobile bên dưới, Desktop giữ icon tròn gọn */ @media(max-width:859px){ .ghdnn-quick-contact{ left:0; right:0; top:auto; bottom:0; transform:none; z-index:45; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; background:var(--surface); border-top:1px solid var(--border); border-radius:0; padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); box-shadow:0 -4px 20px -8px rgba(0,0,0,.12); } .gqc-btn{ position:relative; width:auto; height:auto; min-height:48px; border-radius:var(--radius-sm); flex-direction:column; gap:3px; background:none; border:none; box-shadow:none; color:var(--ink-soft); font-size:11.5px; font-weight:600; transition:background var(--dur),color var(--dur); } .gqc-btn img{ width:28px; height:28px; } .gqc-btn:hover{ transform:none; } .gqc-btn:active{ background:var(--surface-2); } .gqc-btn.gqc-phone{ background:none; color:var(--red); } /* Gọi ngay — hành động chính giữa thanh, luôn nổi bật màu thương hiệu như "Tra cứu" ở thanh cũ */ .gqc-btn.gqc-phone:hover{ background:var(--surface-2); color:var(--red); } .gqc-pulse{ display:none; } /* hiệu ứng pulse hình tròn chỉ hợp khi nút là hình tròn (Desktop) */ .gqc-label{ display:block; } } /* Đẩy nội dung cuối trang lên khỏi thanh liên hệ cố định trên Mobile, tránh bị che */ @media(max-width:859px){ body{padding-bottom:64px;} } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; border-radius:999px;font-size:13.5px;font-weight:600;padding:9px 18px; cursor:pointer;border:1px solid transparent;transition:transform var(--dur),background var(--dur),box-shadow var(--dur); text-decoration:none;white-space:nowrap; } .btn:active{transform:scale(.97);} .btn-primary{background:var(--red);color:#fff;} .btn-primary:hover{background:var(--red-dark);} .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border);} .btn-ghost:hover{border-color:var(--ink-faint);} /* v1.20 — Hiệu ứng "ánh sáng quét chéo" (shine sweep) CHO NÚT CTA CHÍNH, CSS THUẦN, CHỈ CHẠY KHI HOVER (không phải animation lặp vô hạn — dùng transition trên vị trí ::before, đứng yên hoàn toàn lúc không hover, không tốn CPU/GPU khi khách không rê chuột vào nút). Áp dụng cho .btn-primary (nút chính toàn site, VD "Tra cứu vận đơn") VÀ .ghdnn-cta-primary (nút chèn qua shortcode [ghdnn_cta] trong nội dung dài) — cả 2 đều là "CTA chính". Không áp cho .btn-ghost/.ghdnn-cta-outline (nút phụ) theo đúng yêu cầu "chỉ nút CTA chính". */ .btn-primary,.ghdnn-cta-primary{position:relative;overflow:hidden;} .btn-primary::before,.ghdnn-cta-primary::before{ content:"";position:absolute;top:0;left:-75%;width:50%;height:100%; background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%); transform:skewX(-25deg);transition:left .65s ease;pointer-events:none; } .btn-primary:hover::before,.ghdnn-cta-primary:hover::before{left:125%;} @media(prefers-reduced-motion:reduce){ .btn-primary::before,.ghdnn-cta-primary::before{transition:none;display:none;} } /* ================= BREADCRUMB ================= */ .breadcrumb{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-soft);padding:16px 0 10px;flex-wrap:wrap;} .breadcrumb a{text-decoration:none;flex-shrink:0;} .breadcrumb a:hover{color:var(--ink);} .breadcrumb .sep{color:var(--ink-faint);flex-shrink:0;} /* v1.9.6 HOTFIX — xác nhận qua ảnh chụp thực tế: mục cuối breadcrumb (trang hiện tại) lấy nguyên tiêu đề SEO dài (VD "Dịch Vụ Gửi Hàng Đi Mỹ Uy Tín, Giá Rẻ, Nhận Tận Nơi 2026") — bị wrap 2-3 dòng, tràn sát xuống section ngay bên dưới trông như bị cắt/vỡ layout. Breadcrumb chỉ cần cho biết "đang ở đâu", không phải chỗ để hiện lại nguyên H1 — giới hạn 1 dòng + "..." khi quá dài, chi tiết đầy đủ đã có sẵn ở chính H1 ngay bên dưới rồi. flex-basis:100% buộc mục cuối luôn xuống dòng riêng (nếu các mục trước đã chiếm chỗ) để có chiều rộng rõ ràng cho text-overflow:ellipsis hoạt động đúng — flex item mặc định không tự co dưới kích thước nội dung (min-width:auto) nên ellipsis sẽ không ăn nếu thiếu dòng này. */ /* v1.10.1 HOTFIX — bản trước dùng flex-basis:100% để ellipsis hoạt động, nhưng ép mục cuối LUÔN xuống dòng riêng — kể cả tiêu đề NGẮN (VD "Liên hệ") — khiến breadcrumb cao bất thường (đo thực tế 62.4px thay vì ~44px như bình thường), trông như bị lỗi/lệch trên mọi trang. Đổi sang flex:1 1 0% + min-width:0 — mục cuối tự CO GỌN trong ĐÚNG hàng hiện tại trước (không ép xuống dòng), chỉ cắt "..." khi thật sự không đủ chỗ. Tiêu đề ngắn → 1 dòng gọn như cũ; tiêu đề dài (VD tiêu đề SEO đầy đủ) → vẫn cắt "..." đúng như mong muốn ban đầu. */ .breadcrumb > span:last-child{ flex:1 1 0%; min-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ================= HERO / PAGE HEAD ================= */ /* v1.7.10 HOTFIX — xác nhận qua ảnh chụp thực tế (điện thoại): tiêu đề/nội dung hero chạm SÁT 2 mép màn hình, không có khoảng đệm ngang nào, trong khi nội dung các section bên dưới (dùng chung class ".wrap") vẫn có khoảng đệm ngang bình thường. NGUYÊN NHÂN: phần tử hero dùng CHUNG 1 thẻ với 2 class `class="hero wrap"` — ".wrap" quy định "padding:0 24px" (khoảng đệm ngang), nhưng ".hero" lại khai báo "padding:40px 0 40px" — đây là khai báo TẮT (shorthand) ấn định CẢ 4 CẠNH cùng lúc (trên/phải/dưới/trái), nên "phải:0" và "trái:0" của ".hero" GHI ĐÈ mất "trái/phải:24px" của ".wrap" (2 class cùng mức độ ưu tiên/specificity, class khai báo SAU trong file CSS thắng — ".hero" nằm sau ".wrap" trong file). Trên desktop lỗi này bị che khuất vì ".wrap" còn có "max-width:1120px;margin:0 auto" tự tạo khoảng trống 2 bên do canh giữa màn hình rộng — nhưng trên mobile (màn hẹp hơn 1120px, max-width không có tác dụng canh giữa) thì KHÔNG còn gì bù lại khoảng đệm ngang bị mất, lộ rõ hero dán sát mép như ảnh chụp. SỬA: đổi khai báo tắt "padding:Npx 0" → 2 khai báo riêng "padding-top"/"padding-bottom" — CHỈ ấn định 2 cạnh trên/dưới, không đụng tới trái/phải nữa, để đúng "padding:0 24px" của ".wrap" được giữ nguyên. Áp dụng cùng cách sửa cho ".nav" ngay bên dưới (lỗi giống hệt, khiến khung header/logo/nút cũng dán sát mép ngang y hệt hero). */ .hero{padding-top:40px;padding-bottom:40px;position:relative;isolation:isolate;} .hero::before{ /* v1.10.2 HOTFIX — theo phản hồi thực tế: nền gradient trước đây chỉ trải lên trên ĐÚNG 24px, không đủ phủ hết vùng breadcrumb (~44-60px) ngay phía trên — tạo 1 đường RANH GIỚI MÀU rõ rệt giữa vùng breadcrumb (nền phẳng, không gradient) và vùng hero (có gradient), trông như lỗi "màu khác hẳn". Kéo dài vùng phủ lên trên (top:-90px thay vì -24px) để gradient lan mượt qua LUÔN cả breadcrumb — không còn ranh giới cứng giữa 2 vùng. Gradient vốn đã fade dần về transparent (65-72%) nên kéo dài thêm không làm màu đậm hơn ở khu vực hero, chỉ lan toả mượt hơn lên phía trên. v1.10.4 — sau sự cố tràn ngang trên /tracking/ (xem .visually-hidden), rà soát phòng ngừa toàn site: đổi kỹ thuật "tràn full màn hình" từ width:100vw + translateX(-50%) sang left/right:calc(-50vw + 50%) — width:100vw có quirk ĐÃ GHI NHẬN trên một số phiên bản Safari (có thể tính rộng hơn viewport thực tế 1 chút do cách trình duyệt đo 100vw khác nhau), còn calc(-50vw + 50%) không phụ thuộc đơn vị vw cho WIDTH — an toàn hơn cho đúng mục đích "tràn full màn hình" này, vẫn giữ nguyên hiệu ứng hình ảnh. v1.7.11 HOTFIX — xác nhận qua ảnh chụp thực tế + đo màu từng pixel: xuất hiện 1 VỆT NGANG MÀU KHÁC RÕ RỆT (~2-3px) ngay sát mép trên cùng trang. NGUYÊN NHÂN: lớp "linear-gradient(180deg, var(--red-tint) 0%, ...)" bắt đầu ở MÀU ĐẶC NGAY TẠI MÉP TRÊN CÙNG (0%) của chính khối "::before" này (khối này neo ở "top:-90px" tính từ ".hero" — một con số cố định được canh đúng cho thời điểm header LUÔN CÓ NỀN ĐẶC (trước v1.7.8), nên phần mép trên đó từng nằm ẩn sau lưng header, không ai thấy). Từ v1.7.8, header mặc định trong suốt — phần mép trên cùng của gradient (vốn có màu ĐẶC ngay từ điểm bắt đầu, không hề fade) lộ hẳn ra thành 1 đường ranh giới cứng với nền trang phía trên nó. Việc chỉnh lại số "-90px" cho khớp riêng trang này rất DỄ VỠ (mỗi trang/breakpoint có chiều cao header+breadcrumb khác nhau, sẽ lại lệch). SỬA TẬN GỐC, không phụ thuộc số đo: đổi lớp linear-gradient để tự FADE TỪ TRONG SUỐT ngay tại mép trên cùng của chính nó ("transparent 0%" thay vì đặc luôn từ 0%), rồi mới lên tới màu đặc ở mốc giữa (22%) trước khi fade tiếp về trong suốt (72%, giữ nguyên như cũ). Nhờ vậy dù mép trên của khối này rơi đúng vào đâu (trang nào, header cao bao nhiêu) cũng không bao giờ tạo đường ranh giới cứng nữa — tự triệt tiêu ngay từ gốc thay vì phải canh số theo từng trường hợp. Đo lại bằng công cụ sau khi sửa: riêng phần "linear-gradient" đã hết đột ngột, nhưng 2 lớp "radial-gradient" còn lại vẫn có tâm nằm rất gần mép trên của khối ("at 12% -8%"/"at 92% 18%") nên VẪN còn 1 bước nhảy màu nhỏ ngay tại mép — vì bản chất vấn đề không nằm ở TỪNG lớp gradient fade nhanh hay chậm, mà ở chỗ CHÍNH KHỐI "::before" này là 1 hình chữ nhật có MÉP CỨNG: phía ngoài mép hoàn toàn không có nó, phía trong mép (dù chỉ 1px) đã có đủ 3 lớp nền — luôn tạo bước nhảy tại đúng mép bất kể gradient bên trong mượt cỡ nào. SỬA TRIỆT ĐỂ bằng "mask-image" — làm mờ dần chính ĐỘ TRONG SUỐT của CẢ KHỐI (cả 3 lớp nền cùng lúc) ngay từ mép trên, thay vì chỉ mượt màu bên trong từng gradient — nhờ vậy mép trên của khối luôn bắt đầu ở 0% hiện diện (giống hệt như không có gì), không thể tạo ranh giới cứng dù rơi vào vị trí nào. */ content:"";position:absolute;top:-90px;left:calc(-50vw + 50%);right:calc(-50vw + 50%);width:auto;height:calc(100% + 114px); z-index:-1;pointer-events:none; mask-image:linear-gradient(180deg, transparent 0, transparent 30px, #000 110px); -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent 30px, #000 110px); background: radial-gradient(560px 420px at 12% -8%, rgba(214,0,0,.10), transparent 65%), radial-gradient(480px 380px at 92% 18%, rgba(255,193,7,.15), transparent 60%), linear-gradient(180deg, transparent 0%, var(--red-tint) 22%, transparent 72%); } html[data-theme="dark"] .hero::before{ background: radial-gradient(560px 420px at 12% -8%, rgba(255,82,69,.12), transparent 65%), radial-gradient(480px 380px at 92% 18%, rgba(255,193,7,.09), transparent 60%), linear-gradient(180deg, transparent 0%, rgba(255,82,69,.06) 22%, transparent 72%); } @media(min-width:860px){ .hero{padding-top:56px;padding-bottom:60px;} } .eyebrow{ display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace; font-size:11.5px;letter-spacing:.06em;color:var(--red);background:var(--red-tint); border-radius:999px;padding:6px 12px;margin-bottom:18px;font-weight:500; } .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;} /* v1.7.18 — RÀ SOÁT KHÁCH QUAN theo yêu cầu: h1{} TRƯỚC ĐÂY dùng chung 1 cỡ chữ khổng lồ clamp(36px,7vw,72px) — vốn được canh riêng cho headline trang chủ (".hero#track") — cho TẤT CẢ thẻ H1 toàn site, vì hầu hết template (trang nội dung, trang chính sách, bài viết, trang chi tiết Tuyến/Đối tác, câu hỏi FAQ...) đều dùng chung 1 trong 2 cách: bọc H1 trong section class="hero" (page.php, page-blog.php, archive.php, single-faq.php, page-cau-hoi-thuong-gap.php, page-dich-vu.php, page-dai-ly.php, page-cong-cu.php, page-tracking.php, page-lien-he.php, page-ve-chung-toi.php, archive-route.php, archive-carrier.php...) — cùng class với trang chủ dù không phải headline quảng cáo; HOẶC không có override riêng nào cả (single.php: tiêu đề bài viết, single-route.php/single-carrier.php: ".route-hero", inc/tool-widgets.php) nên vẫn rơi thẳng vào rule chung này. Kết quả: tiêu đề bài viết, tên trang Chính sách/Điều khoản, tên tuyến ("Gửi hàng đi Nga"), câu hỏi FAQ... tất cả hiện to ngang headline quảng cáo trang chủ — đúng như phản ánh "cỡ chữ hơi lớn, không cân đối". Đổi cỡ CHUNG về mức cân đối cho tiêu đề trang/bài viết (vẫn rõ ràng là H1 — vẫn lớn hơn H2 ở MỌI kích thước màn hình, xem clamp bên dưới), CHỈ headline trang chủ thật sự (".hero#track" — nơi DUY NHẤT cần sức nặng quảng cáo tối đa) giữ nguyên cỡ to như cũ qua rule riêng ngay dưới đây. */ h1{font-size:clamp(30px,4.8vw,50px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 16px;} .hero#track h1{font-size:clamp(36px,7vw,72px);letter-spacing:-.03em;line-height:1.06;} @media(min-width:640px){ .hero h1{max-width:16ch;} } p.lead{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:52ch;line-height:1.55;margin:0 0 28px;} h2{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.02em;} h3{font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:-.01em;} /* ── Hero: bố cục 2 cột — nội dung + minh hoạ hành trình chuyển động ── */ .hero#track{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;} /* v1.7.10 — cột minh hoạ hành trình (".hero-route") rộng ĐÚNG 420px thay vì 360px: bản thân ".hero-route" vẫn giữ nguyên "max-width:360px" (không đổi — các mốc ".route-stop" định vị bằng toạ độ px cố định khớp đúng khung 360×460 gốc, đổi kích thước khung sẽ làm lệch mốc so với đường SVG). Cột grid RỘNG HƠN khung minh hoạ 60px, kết hợp "margin:0 auto" sẵn có của ".hero-route" tự canh giữa trong cột → tạo khoảng đệm ~30px đều 2 bên. Trước đây cột grid bằng khít 360px = khung minh hoạ, khiến nhãn "Hải quan / Đang thông quan" (mốc nằm gần rìa phải nhất trong toạ độ gốc) gần như chạm thẳng vào mép phải khung ".wrap" — đúng phần người dùng phản ánh "sát mép" trên màn hình rộng. */ @media(min-width:960px){ .hero#track{grid-template-columns:minmax(0,1fr) 420px;gap:32px;} } .hero-copy{min-width:0;} .hero-route{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:360/460;display:none;} @media(min-width:640px){ .hero-route{display:block;} } .route-svg{width:100%;height:100%;overflow:visible;} .route-line{fill:none;stroke:var(--border);stroke-width:2.5;stroke-dasharray:1 9;stroke-linecap:round;} .route-pkg{fill:var(--red);filter:drop-shadow(0 0 8px rgba(214,0,0,.55));} .route-stop{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;} .route-dot{width:11px;height:11px;border-radius:50%;background:var(--surface);border:2.5px solid var(--ink-faint);flex-shrink:0;box-shadow:0 0 0 4px var(--bg);animation:stopPulse 9s ease infinite;animation-delay:var(--delay);} .route-label{font-size:11px;line-height:1.4;color:var(--ink-soft);white-space:nowrap;font-weight:600;} .route-label em{display:block;font-style:normal;font-weight:400;color:var(--ink-faint);font-size:10px;} @keyframes stopPulse{ 0%,20%{border-color:var(--ink-faint);box-shadow:0 0 0 4px var(--bg);} 4%,10%{border-color:var(--red);box-shadow:0 0 0 4px var(--red-tint);} 100%{border-color:var(--ink-faint);box-shadow:0 0 0 4px var(--bg);} } @media(prefers-reduced-motion:reduce){ .route-pkg{ display:none; } .route-dot{ animation:none !important; } } /* ================= SEARCH / TRACKING ================= */ .segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;margin-bottom:14px;} .segmented button{border:none;background:none;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;} .segmented button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);} .search-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md); padding:8px;display:flex;gap:8px;max-width:520px;box-shadow:var(--shadow); } .search-card input{flex:1;border:none;background:none;padding:12px 14px;font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--ink);min-width:0;width:100%;} .search-card input:focus{outline:none;} .search-card input::placeholder{color:var(--ink-faint);} .search-card button{border:none;border-radius:12px;background:var(--red);color:#fff;padding:0 20px;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0;} .search-card button:hover{background:var(--red-dark);} .search-card button:disabled{opacity:.5;cursor:default;} @media(max-width:420px){ .search-card{flex-direction:column;} .search-card button{padding:12px 20px;} } .demo-link{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;} .demo-link:hover{color:var(--ink);} .hero-cta-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center;} .hero-cta-row .demo-link{margin-top:12px;} /* ================= QUICK ACTIONS (spec §10) ================= */ .quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:8px 0 8px;} @media(min-width:768px){ .quick-actions{grid-template-columns:repeat(4,1fr);gap:16px;} } .quick-action{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:20px;text-decoration:none;display:block;transition:transform var(--dur),border-color var(--dur); } .quick-action:hover{transform:translateY(-2px);border-color:var(--ink-faint);} .quick-action .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;} .quick-action h3{margin:0 0 4px;font-size:15.5px;} .quick-action p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.5;} /* ================= TRUST BAR (spec §11) — badge định tính, không số liệu bịa ================= */ .trust-bar{ display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;align-items:center; padding:20px 24px;border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border); } .trust-bar span{font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap;} /* ================= COUNTRY / DESTINATION HUB (spec §13) ================= */ .country-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} @media(min-width:640px){ .country-grid{grid-template-columns:repeat(3,1fr);} } @media(min-width:960px){ .country-grid{grid-template-columns:repeat(4,1fr);} } .country-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md); padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:6px; transition:transform var(--dur),border-color var(--dur); } .country-card:hover{transform:translateY(-2px);border-color:var(--ink-faint);} .country-card-flag{font-size:11px;font-weight:700;color:var(--red);background:var(--red-tint);border-radius:6px;padding:3px 7px;align-self:flex-start;} .country-card h3{margin:2px 0 0;font-size:15px;} .country-card-time{font-size:12px;color:var(--ink-soft);} /* ================= SMART TRACKING MOCKUP (spec §15) — SaaS dashboard style, dữ liệu minh hoạ ================= */ .tracking-mockup{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);} .tracking-mockup-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border);} .tracking-mockup-head .mono{font-size:18px;font-weight:700;} .status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;} .status-transit{background:var(--yellow-tint);color:var(--yellow-ink);} .tracking-mockup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;} @media(min-width:640px){ .tracking-mockup-grid{grid-template-columns:repeat(4,1fr);} } .tracking-mockup-grid .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px;} .tracking-mockup-grid .val{display:block;font-size:14px;font-weight:600;} .tracking-mockup-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;} .tracking-mockup-timeline li{display:flex;gap:14px;padding:10px 0;position:relative;} .tracking-mockup-timeline li::before{content:"";position:absolute;left:5px;top:26px;bottom:-4px;width:2px;background:var(--border);} .tracking-mockup-timeline li:last-child::before{display:none;} .tracking-mockup-timeline .dot{width:12px;height:12px;border-radius:50%;background:var(--surface-2);border:2px solid var(--ink-faint);flex-shrink:0;margin-top:3px;} .tracking-mockup-timeline li.done .dot{background:var(--green);border-color:var(--green);} .tracking-mockup-timeline li.active .dot{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 4px var(--yellow-tint);} .tracking-mockup-timeline li div{display:flex;flex-direction:column;gap:1px;} .tracking-mockup-timeline li strong{font-size:14px;font-weight:600;} .tracking-mockup-timeline li.active strong{color:var(--ink);} .tracking-mockup-timeline li:not(.done):not(.active) strong{color:var(--ink-faint);} .tracking-mockup-timeline li span{font-size:12px;color:var(--ink-soft);} /* ================= SHIPPING PROCESS — 7 bước (spec §14) ================= */ .process-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px;} @media(min-width:640px){ .process-flow{grid-template-columns:1fr 1fr;} } @media(min-width:1024px){ .process-flow{grid-template-columns:repeat(4,1fr);} } .process-flow li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;} .process-flow .step-no{display:inline-block;font-size:11px;font-weight:700;color:var(--red);background:var(--red-tint);border-radius:6px;padding:3px 8px;margin-bottom:10px;} .process-flow h3{margin:0 0 6px;font-size:15px;} .process-flow p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.5;} /* ================= PRICING PREVIEW (spec §18) ================= */ .pricing-preview{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);} .pricing-preview-row{display:grid;grid-template-columns:1fr;gap:14px;align-items:end;} @media(min-width:768px){ .pricing-preview-row{grid-template-columns:1fr auto 1fr 140px;} } .pricing-preview-fld{display:flex;flex-direction:column;gap:6px;} .pricing-preview-fld label{font-size:11.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;} .pricing-preview-fld input{border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;background:var(--surface-2);color:var(--ink);} .pricing-preview-fld input:focus{outline:none;border-color:var(--red);} .pricing-preview-fld input[readonly]{color:var(--ink-soft);cursor:default;} .pricing-preview-arrow{display:none;font-size:18px;color:var(--ink-faint);padding-bottom:11px;} @media(min-width:768px){ .pricing-preview-arrow{display:block;} } .pricing-preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;} /* ================= TESTIMONIALS (spec §19) ================= */ .testimonial-grid{display:grid;grid-template-columns:1fr;gap:14px;} @media(min-width:768px){ .testimonial-grid{grid-template-columns:repeat(3,1fr);} } .testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:14px;} .testimonial-stars{color:var(--border);font-size:14px;letter-spacing:2px;} .testimonial-stars .on{color:var(--yellow);} .testimonial-text{font-size:13.5px;line-height:1.65;color:var(--ink);margin:0;flex:1;} .testimonial-who{display:flex;align-items:center;gap:10px;} .testimonial-who img{border-radius:50%;object-fit:cover;width:40px;height:40px;flex-shrink:0;} .testimonial-avatar-fallback{width:40px;height:40px;border-radius:50%;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;} .testimonial-who strong{display:block;font-size:13.5px;} .testimonial-who span{display:block;font-size:12px;color:var(--ink-soft);} /* ================= EEAT GRID (spec §20) ================= */ .eeat-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;} @media(min-width:640px){ .eeat-grid{grid-template-columns:1fr 1fr;} } .eeat-item{background:var(--surface);padding:16px 20px;} .eeat-item .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;} .eeat-item .val{display:block;font-size:14px;font-weight:600;} .eeat-item .val a{text-decoration:none;color:var(--ink);} .eeat-item .val a:hover{color:var(--red);} .preview{margin-top:40px;} .preview-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow);animation:riseIn .5s ease both;} @keyframes riseIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} .preview-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;} .preview-head .id{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:14px;} .status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--yellow-tint);color:var(--yellow-ink);} .status-pill.delivered{background:var(--green-tint);color:var(--green);} .status-pill.exception{background:var(--red-tint);color:var(--red);} .steps{display:flex;flex-direction:column;gap:0;} .step{display:flex;gap:14px;position:relative;padding-bottom:24px;} .step:last-child{padding-bottom:0;} .step-dot-col{display:flex;flex-direction:column;align-items:center;} .step-icon{ width:36px;height:36px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--yellow); color:#fff; box-shadow:0 3px 8px -2px rgba(0,0,0,.25), 0 0 0 4px var(--surface); } .step-icon svg{width:17px;height:17px;stroke-width:2.4;} .step-icon.delivered{background:var(--green);} .step-icon.exception{background:var(--red);} /* v1.2 — màu RIÊNG theo từng nhóm trạng thái (trước đây gần như mọi trạng thái dùng chung màu vàng --yellow mặc định, khiến timeline "phẳng" — giờ mỗi giai đoạn có màu sắc thị giác riêng, lướt mắt qua là hiểu ngay tiến trình mà không cần đọc kỹ chữ). */ .step-icon.order_created{background:var(--slate); --glow:var(--slate);} .step-icon.pending_pickup{background:var(--yellow); --glow:var(--yellow);} .step-icon.picked_up{background:var(--orange); --glow:var(--orange);} .step-icon.customs_hold{background:var(--violet); --glow:var(--violet);} .step-icon.in_transit{background:var(--blue); --glow:var(--blue);} .step-icon.out_for_delivery{background:var(--blue); --glow:var(--blue);} .step-icon.failed_delivery{background:var(--red); --glow:var(--red);} .step-icon.returned{background:var(--slate); --glow:var(--slate);} /* Bước MỚI NHẤT (đang diễn ra) — viền phát sáng nhẹ, thu hút mắt vào đúng trạng thái hiện tại của đơn hàng, giống các trang tracking lớn (DHL/FedEx). Chỉ áp dụng khi đơn CHƯA giao xong — đơn đã "delivered" không cần hiệu ứng này (đã kết thúc hành trình, không còn gì "đang diễn ra"). Dùng biến --glow cục bộ (khai báo riêng ở mỗi rule màu phía trên) thay vì currentColor — vì currentColor ở đây sẽ luôn ra màu chữ trắng của icon (đã set sẵn), không phải đúng màu nền riêng từng trạng thái. */ .step.active .step-icon:not(.delivered):not(.exception){ animation: step-pulse 2.2s ease-in-out infinite; } @keyframes step-pulse{ 0%,100%{ box-shadow: 0 3px 8px -2px rgba(0,0,0,.25), 0 0 0 4px var(--surface), 0 0 0 7px color-mix(in srgb, var(--glow, var(--yellow)) 35%, transparent); } 50%{ box-shadow: 0 3px 8px -2px rgba(0,0,0,.25), 0 0 0 4px var(--surface), 0 0 0 9px color-mix(in srgb, var(--glow, var(--yellow)) 12%, transparent); } } .step-line{flex:1;width:2px;background:linear-gradient(var(--border),var(--border));margin:4px 0;min-height:16px;} .step:last-child .step-line{display:none;} .step-body{padding-top:6px;} .step-body .cat{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;} .step-body .title{font-size:13.5px;font-weight:600;line-height:1.4;} .step-body .meta{font-size:12px;color:var(--ink-soft);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .step-body .meta .loc{color:var(--ink-faint);} .step-body .carrier-tag{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 9px;font-size:10.5px;color:var(--ink-soft);font-weight:600;} .msg-box{padding:20px;text-align:center;font-size:13.5px;color:var(--ink-soft);} .msg-box.error{color:var(--red);} /* ================= BENTO / CARDS ================= */ .section-head{margin:64px 0 22px;} .section-head .eyebrow{margin-bottom:10px;} .section-head p{color:var(--ink-soft);font-size:14.5px;max-width:56ch;margin:8px 0 0;} .bento{display:grid;grid-template-columns:1fr;gap:14px;padding-bottom:64px;} @media(min-width:640px){ .bento{grid-template-columns:repeat(2,1fr);} } @media(min-width:768px){ .bento{grid-template-columns:repeat(4,1fr);gap:16px;} } .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;transition:transform var(--dur),border-color var(--dur);display:flex;flex-direction:column;text-decoration:none;color:inherit;} .card:hover{transform:translateY(-3px);border-color:var(--ink-faint);} .card .icon,.trust-card .icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0;} .card h3{margin:0 0 8px;} .card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0;} .card .cta{margin-top:16px;font-size:13px;font-weight:600;color:var(--red);text-decoration:none;display:inline-flex;align-items:center;gap:4px;} .span-2{grid-column:span 1;} .span-4{grid-column:span 1;} @media(min-width:768px){ .span-2{grid-column:span 2;} .span-4{grid-column:span 4;} } .icon-red{background:var(--red-tint);color:var(--red);} .icon-yellow{background:var(--yellow-tint);color:var(--yellow-ink);} .icon-green{background:var(--green-tint);color:var(--green);} .mini-route{display:flex;align-items:center;gap:10px;margin-top:18px;} .mini-route .pt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-soft);} .mini-route .ln{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--ink-faint) 0 4px,transparent 4px 8px);} .card.teaser{border-style:dashed;background:var(--surface-2);} /* v1.24 — .bento ép cứng 4 cột, đúng cho lưới tính năng ngắn ở trang chủ nhưng SAI khi tái dùng cho "Vì sao chọn GHDNN Express" (chỉ 2-4 thẻ, mỗi thẻ có đoạn văn dài) — 4 cột cứng làm thẻ hẹp dồn chữ dày đặc, khó đọc (đã thấy rõ trên ảnh chụp thật). Dùng auto-fit để thẻ tự co giãn theo số lượng thật, không bao giờ hẹp hơn 260px dù chỉ có 2 thẻ. */ .why-us-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:16px 0;} .badge-soon{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--yellow-ink);background:var(--yellow-tint);padding:4px 10px;border-radius:999px;margin-bottom:14px;align-self:flex-start;} /* ================= TRUST / EEAT GRID ================= */ .trust-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:28px 0 56px;} @media(min-width:640px){ .trust-grid{grid-template-columns:repeat(2,1fr);} } @media(min-width:960px){ .trust-grid{grid-template-columns:repeat(3,1fr);} } .trust-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;} .trust-card .num{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;display:inline-block;padding:5px 10px;border-radius:8px;margin-bottom:12px;} .trust-card:nth-child(1) .num{background:var(--red-tint);color:var(--red);} .trust-card:nth-child(2) .num{background:var(--yellow-tint);color:var(--yellow-ink);} .trust-card:nth-child(3) .num{background:var(--green-tint);color:var(--green);} /* v1.38 — Shortcode thương hiệu cho Bài viết/Trang thường ([ghdnn_stat]/[ghdnn_steps]/ [ghdnn_badge]) — TÁI DÙNG đúng token màu (--red/--yellow/--green + các -tint tương ứng) đã dùng cho .trust-card/.process-step ở trên, không tự tạo màu mới, giữ 1 bản sắc GHDNN Express xuyên suốt mọi loại nội dung. Tự đổi màu đúng theo sáng/tối vì dùng biến CSS, không hardcode hex. */ .ghdnn-stat-badge{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 18px;border-radius:var(--radius-md);margin:6px 10px 6px 0;min-width:120px;} .ghdnn-stat-badge strong{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:700;line-height:1.1;} .ghdnn-stat-badge small{font-size:11.5px;color:var(--ink-soft);} .ghdnn-stat-red{background:var(--red-tint);}.ghdnn-stat-red strong{color:var(--red);} .ghdnn-stat-yellow{background:var(--yellow-tint);}.ghdnn-stat-yellow strong{color:var(--yellow-ink);} .ghdnn-stat-green{background:var(--green-tint);}.ghdnn-stat-green strong{color:var(--green);} .ghdnn-pill-badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:999px;vertical-align:middle;} .ghdnn-pill-red{background:var(--red-tint);color:var(--red);} .ghdnn-pill-yellow{background:var(--yellow-tint);color:var(--yellow-ink);} .ghdnn-pill-green{background:var(--green-tint);color:var(--green);} .ghdnn-steps-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:20px 0;} @media(min-width:640px){ .ghdnn-steps-grid{grid-template-columns:1fr 1fr;} } @media(min-width:960px){ .ghdnn-steps-grid{grid-template-columns:repeat(4,1fr);} } .ghdnn-step-card{position:relative;padding:22px 18px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;} .ghdnn-step-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;} .ghdnn-step-card:nth-child(odd)::before{background:var(--red);} .ghdnn-step-card:nth-child(even)::before{background:var(--yellow);} .ghdnn-step-card h3{margin:0 0 6px;font-size:15px;} .ghdnn-step-card .step-no{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--red);font-weight:700;letter-spacing:.04em;margin-bottom:12px;display:block;} .ghdnn-step-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0;} .fill-note{background:var(--yellow-tint);color:var(--yellow-ink);border:1px dashed var(--yellow);border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;margin:6px 0 22px;} /* ================= Trang "Về chúng tôi" — bảng thông tin pháp lý (v1.7.2) ================= Thay cho 1 đoạn văn dày đặc dùng
ngăn dòng — tách thành từng hàng nhãn/giá trị rõ ràng, dễ quét mắt hơn, đồng thời email/hotline giờ là link bấm được thay vì chữ thường. */ .legal-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:6px 20px;margin-top:14px;} .legal-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;font-size:13.5px;flex-wrap:wrap;} .legal-row:not(:last-child){border-bottom:1px solid var(--border);} .legal-row span{color:var(--ink-soft);flex-shrink:0;} .legal-row strong{font-weight:600;text-align:right;margin-left:auto;} .legal-row strong a{color:var(--red);text-decoration:none;} .legal-row strong a:hover{text-decoration:underline;} /* Màn hình rất hẹp: xếp nhãn/giá trị thành 2 dòng riêng thay vì ép nằm ngang — tránh giá trị dài (địa chỉ, tên pháp nhân) bị dồn lệch phải trông rối mắt. */ @media(max-width:420px){ .legal-row{flex-direction:column;gap:3px;} .legal-row strong{text-align:left;margin-left:0;} } .office-code{font-size:11px;font-weight:700;color:var(--ink-faint);margin-left:4px;} /* ================= FAQ / AEO ================= */ .faq-list{display:flex;flex-direction:column;gap:10px;margin:24px 0 56px;} .faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;} .faq-q{padding:16px 18px;font-size:14.5px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;} .faq-q::-webkit-details-marker{display:none;} .faq-q .plus{transition:transform var(--dur);color:var(--ink-soft);flex-shrink:0;} details[open] .faq-q .plus{transform:rotate(45deg);} .faq-a{padding:0 18px 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;} /* ================= FORMS ================= */ .form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow);max-width:520px;} .field{margin-bottom:16px;} .field label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;font-weight:500;} .field input,.field textarea,.field select{ width:100%;border:1px solid var(--border);border-radius:10px;padding:11px 13px; font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface-2); } .field textarea{min-height:100px;resize:vertical;} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);} .form-result{font-size:13px;color:var(--green);margin-top:10px;min-height:1em;} /* v1.9.0 — trang Liên hệ: bố cục 2 cột (form + sidebar giờ làm việc/văn phòng) */ .consent-field{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:4px 0 20px;cursor:pointer;} .consent-field input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--red);cursor:pointer;} .consent-field a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;} .contact-form-actions{display:flex;gap:12px;flex-wrap:wrap;} .contact-form-actions .btn{flex:1;min-width:160px;text-align:center;} .contact-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;} @media(min-width:900px){ .contact-grid{grid-template-columns:1.2fr .8fr;} } .contact-sidebar{display:flex;flex-direction:column;gap:18px;} .contact-office-list{display:flex;flex-direction:column;gap:14px;} .contact-office-item{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-soft);padding-top:12px;border-top:1px solid var(--border);} .contact-office-item:first-child{padding-top:0;border-top:none;} .contact-office-item strong{color:var(--ink);font-size:13.5px;} .contact-office-item a{color:var(--red);text-decoration:none;font-weight:600;} .contact-office-item a:hover{text-decoration:underline;text-underline-offset:3px;} /* ================= SETTINGS DRAWER ================= */ .settings-panel{max-width:1120px;margin:0 auto;padding:0 20px;overflow:hidden;max-height:0;transition:max-height .25s ease;} .settings-panel.open{max-height:200px;} .settings-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;margin:14px 0;} .settings-inner label{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:6px;} .settings-row{display:flex;gap:10px;} .settings-row input{flex:1;border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);background:var(--surface-2);} .settings-row button{border:none;background:var(--ink);color:var(--bg);border-radius:9px;padding:0 16px;font-size:13px;cursor:pointer;font-weight:600;} .settings-hint{font-size:11.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;} /* ================= FOOTER ================= */ /* v1.9.2 — THIẾT KẾ LẠI phong cách Footer theo hướng "chuyên nghiệp, chuẩn SEO, tạo tin cậy": trước đây Footer dùng chung nền trắng/xám nhạt với phần nội dung phía trên, chỉ tách bằng 1 viền mảnh — không tạo được ranh giới rõ ràng, nhìn "phẳng", thiếu điểm nhấn thương hiệu, không khác gì phần thân trang. Các site logistics/vận tải lớn (DHL, FedEx, Maersk...) đều dùng Footer nền tối, tương phản mạnh với nội dung — tạo cảm giác "kết thúc trang nghiêm túc", dễ đọc về đêm, và là quy ước UX quen thuộc khiến khách hàng tin tưởng ngay khi cuộn tới cuối trang. Đổi sang nền xanh than đậm (#0F172A/#1E293B — cặp màu "slate-900/slate-800" đã được kiểm chứng rộng rãi về độ tương phản chữ/nền cho giao diện tối), CỐ ĐỊNH không đổi theo chế độ sáng/tối của site (html[data-theme]) — đúng như nhiều site lớn vẫn giữ Footer tối ngay cả khi trang đang ở chế độ sáng, giúp bản sắc thương hiệu nhất quán dù người dùng đang xem ở theme nào. Định nghĩa biến CSS riêng NGAY TRÊN "footer.site" (không đụng biến :root toàn site) để cascade chỉ ảnh hưởng bên trong Footer — trang Liên hệ vẫn dùng đúng các class dùng chung (.footer-hours-row, .footer-hours-note...) với giao diện SÁNG nguyên bản vì nó nằm ngoài phạm vi "footer.site". Về chuẩn SEO/accessibility: tỉ lệ tương phản chữ/nền ở đây đều đạt tối thiểu AA (4.5:1) trở lên, không ảnh hưởng gì tới HTML semantic/schema đã có — chỉ đổi màu sắc & khoảng cách hiển thị. */ footer.site{ --f-bg:#0F172A; --f-bg-2:#1E293B; --f-bg-3:#16223A; --f-border:rgba(148,163,184,.16); --f-border-strong:rgba(148,163,184,.32); --f-ink:#F8FAFC; --f-ink-soft:#9AA7BD; --f-ink-faint:#7A8699; --f-yellow:#FFC107; --f-yellow-tint:rgba(255,193,7,.14); --f-red:#FF5245; --f-red-tint:rgba(255,82,69,.14); position:relative;background:var(--f-bg);color:var(--f-ink-soft); padding:0 0 32px;margin-top:20px; } /* Vạch nhấn thương hiệu trên cùng Footer — đỏ/vàng, đồng bộ ngôn ngữ thương hiệu đã dùng ở hero/CTA toàn site, đánh dấu rõ ràng "đây là điểm kết trang" trước khi vào vùng tối. */ footer.site::before{content:'';display:block;height:3px;background:linear-gradient(90deg,var(--f-red),var(--f-yellow));} footer.site .wrap{padding-top:36px;} footer.site a{color:inherit;} .footer-grid{display:grid;grid-template-columns:1fr;gap:28px;padding-bottom:28px;} @media(min-width:768px){ .footer-grid{grid-template-columns:2fr 1fr 1fr;} } .footer-grid-5{} @media(min-width:640px){ .footer-grid-5{grid-template-columns:1fr 1fr;} } @media(min-width:960px){ .footer-grid-5{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;} } footer.site .footer-grid h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--f-ink);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--f-border);} footer.site .footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;} footer.site .footer-grid a{text-decoration:none;font-size:13.5px;color:var(--f-ink-soft);transition:color var(--dur);} footer.site .footer-grid a:hover{color:var(--f-yellow);} footer.site .footer-brand-desc{font-size:13.5px;color:var(--f-ink-soft);max-width:36ch;line-height:1.6;margin:0;} footer.site .footer-legal-line{color:var(--f-ink-faint);font-size:13px;} footer.site .footer-social{display:flex;gap:10px;margin-top:18px;} footer.site .footer-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--f-border);display:flex;align-items:center;justify-content:center;color:var(--f-ink-soft);transition:color var(--dur),border-color var(--dur),background var(--dur);} footer.site .footer-social a:hover{color:var(--f-bg);background:var(--f-yellow);border-color:var(--f-yellow);} footer.site .footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 20px;font-size:12.5px;color:var(--f-ink-faint);border-top:1px solid var(--f-border);padding-top:22px;margin-top:4px;} footer.site .footer-row button{background:none;border:none;color:var(--f-ink-faint);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:12.5px;padding:0;} footer.site .footer-row button:hover{color:var(--f-ink);} footer.site .footer-policies{display:flex;gap:16px;flex-wrap:wrap;} footer.site .footer-policies a{font-size:12.5px;color:var(--f-ink-faint);text-decoration:none;} footer.site .footer-policies a:hover{color:var(--f-ink);text-decoration:underline;text-underline-offset:3px;} /* v1.9.0 — Dải "Văn phòng & giờ làm việc" ở đầu Footer (spec: 3 chi nhánh + giờ làm việc, nội dung lấy từ theme_mod do Admin nhập ở Customize > Cài đặt GHDNN Express). Đặt phía trên footer-grid-5 vì đây là tín hiệu tin cậy (trust signal) quan trọng nhất của Footer. Các class .footer-hours-card/.footer-hours-row/.footer-hours-note dùng CHUNG với sidebar trang Liên hệ (page-lien-he.php, đặt trong .trust-card nền sáng) — bộ quy tắc GỐC dưới đây vẫn giữ nguyên màu sáng cho đúng ngữ cảnh đó; bản Footer nền tối override riêng ở khối "footer.site .footer-hours-*" phía dưới (v1.9.2) — không đụng tới giao diện trang Liên hệ. */ .footer-offices{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 28px;margin-bottom:32px;} .footer-offices-hd{margin-bottom:18px;} .footer-offices-hd h4{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 4px;} .footer-offices-hd p{font-size:13px;color:var(--ink-soft);margin:0;max-width:56ch;line-height:1.5;} .footer-offices-grid{display:grid;grid-template-columns:1fr;gap:14px;} @media(min-width:640px){ .footer-offices-grid{grid-template-columns:1fr 1fr;} } @media(min-width:960px){ .footer-offices-grid{grid-template-columns:repeat(4,1fr);} } .footer-office-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 18px 16px;transition:border-color var(--dur),transform var(--dur);} .footer-office-card:hover{border-color:var(--ink-faint);transform:translateY(-2px);} .footer-office-card.is-hq{border-color:var(--red-tint);} .footer-office-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--red);background:var(--red-tint);border-radius:999px;padding:3px 9px;margin-bottom:9px;} .footer-office-card h5{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 8px;} .footer-office-addr{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 10px;} .footer-office-phone{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--red);text-decoration:none;} .footer-office-phone:hover{color:var(--red-dark);text-decoration:underline;text-underline-offset:3px;} .footer-hours-card h5{display:flex;align-items:center;gap:7px;} .footer-hours-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-soft);padding:6px 0;border-top:1px solid var(--border);} .footer-hours-row:first-of-type{border-top:none;padding-top:0;} .footer-hours-row strong{color:var(--ink);font-weight:700;} .footer-hours-note{font-size:11.5px;font-style:italic;color:var(--ink-faint);line-height:1.5;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--border);} /* v1.9.2 — override riêng cho ngữ cảnh Footer nền tối (không ảnh hưởng trang Liên hệ vì mọi rule ở đây đều bắt đầu bằng "footer.site", chỉ khớp phần tử NẰM TRONG thẻ