/* CSS toàn site — nạp KHÔNG điều kiện trên mọi trang (khác các file dlb-*.css khác trong thư mục này, vốn chỉ nạp theo is_xxx() riêng từng trang). Chỗ để các luật reset/an toàn chung, không dành riêng 1 trang nào. Thêm 2026-09-01. */ /* Đoạn văn rỗng (sót lại lúc soạn nội dung, không có chữ) vẫn ăn margin mặc định của core/paragraph dù không có gì hiển thị — tạo khoảng trắng lạ giữa 2 khối liền kề. Phát hiện: khoảng trắng giữa dải CTA vàng và footer xanh ở Trang chủ do đúng 1

rỗng còn sót lại sau khối CTA. Ẩn LUÔN mọi đoạn văn rỗng toàn site thay vì chỉ xoá case này — an toàn (không đoạn văn có chữ nào bị ảnh hưởng) và chặn trước các trường hợp tương tự ở trang khác. */ p.wp-block-paragraph:empty { display: none; } /* --- Toast "đã thêm vào giỏ hàng" gọn (thêm 2026-09-01) --- Theo yêu cầu người dùng: banner mặc định của WooCommerce Blocks (".wc-block-components-notice-banner.is-success", xem dlb-global.js) nằm CHÌM trong luồng trang (đẩy nội dung xuống), không tự ẩn, ghi nguyên tên sản phẩm dài. Muốn thay bằng 1 dòng ngắn gọn chung chung, góc phải, tự ẩn sau ~2s. Banner gốc bị ẩn qua class ".dlb-hide-default-notice" — JS chỉ gắn class này cho ĐÚNG banner thêm-giỏ-hàng (nhận diện qua link "Xem giỏ hàng" bên trong), KHÔNG ẩn mọi ".is-success" vì lớp đó dùng chung cho các thông báo thành công KHÁC không liên quan (áp mã giảm giá, cập nhật địa chỉ ở trang giỏ hàng/thanh toán...) — ẩn nhầm sẽ mất phản hồi hợp lệ ở nơi khác. */ .dlb-hide-default-notice { display: none !important; } .dlb-addtocart-toast { position: fixed; top: 90px; right: 16px; z-index: 100000; display: flex; align-items: center; gap: 8px; background: #16a34a; color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1.3; padding: 10px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; white-space: nowrap; } .dlb-addtocart-toast.is-visible { opacity: 1; transform: translateY(0); } /* Biến thể "bỏ khỏi giỏ hàng" (thêm 2026-09-01, theo yêu cầu người dùng "bấm thêm lần nữa để bỏ hãy cũng hiện thị thông báo màu khác") — cam thay vì xanh lá, đủ khác biệt để phân biệt 2 hành động ngược nhau nhưng không dùng đỏ (dễ hiểu lầm thành lỗi/nguy hiểm trong khi đây là thao tác bình thường người dùng chủ động). */ .dlb-addtocart-toast.is-removed { background: #ea580c; } @media (max-width: 782px) { .dlb-addtocart-toast { top: 72px; right: 10px; font-size: 12px; padding: 8px 12px; } } /* --- Hiệu ứng chuyển trang nhẹ nhàng (thêm 2026-09-01) --- Theo yêu cầu người dùng "thêm hiệu ứng khi chuyển trang từ link này sang link khác nhẹ nhàng hơn". Site này là site nhiều trang (postback/reload thật mỗi lần điều hướng — xem bài học ở phần toast thêm giỏ hàng bên trên), KHÔNG phải SPA, nên không dùng View Transitions API (chỉ Chromium mới hỗ trợ qua trình duyệt, Safari/iOS — trình duyệt nhiều khách hàng Việt hay dùng — chưa hỗ trợ) — dùng kỹ thuật cross-fade kinh điển, thuần CSS+JS, chạy được mọi trình duyệt: 1) TRANG MỚI TẢI XONG: "animation" (không phải "transition") tự chạy ngay khi phần tử được vẽ lần đầu, không cần JS bật cờ gì — tránh hẳn kiểu "chớp" (trang hiện đầy đủ rồi mới ẩn đi để hiện lại) nếu dùng transition kèm JS. 2) TRƯỚC KHI RỜI TRANG: JS (xem dlb-global.js) chặn đúng các link điều hướng nội bộ thật sự (bỏ qua target=_blank, tải file, link ngoài, link neo #...), thêm class ẩn dần rồi mới điều hướng thật sau ~180ms — đủ thời gian thấy hiệu ứng nhưng không làm chậm cảm giác duyệt web rõ rệt. */ @keyframes dlb-page-fade-in { from { opacity: 0; } to { opacity: 1; } } body { animation: dlb-page-fade-in 0.28s ease; } body.dlb-page-leaving { animation: none; opacity: 0; transition: opacity 0.18s ease; } /* Người dùng chọn "giảm chuyển động" ở hệ điều hành/trình duyệt — tôn trọng, bỏ hẳn hiệu ứng thay vì ép chớp tắt gây khó chịu/chóng mặt cho nhóm này. */ @media (prefers-reduced-motion: reduce) { body { animation: none; } body.dlb-page-leaving { transition: none; opacity: 1; } } /* --- Gạch chân khi CHẠM/BẤM link trên di động (thêm 2026-09-03) --- Theo yêu cầu người dùng "Khi nhấp vào vị trí có hyperlink không hiển thị gạch chân dưới". Gốc rễ: theme.json chỉ đặt gạch chân cho link ở ":hover" ("elements.link.:hover.typography.textDecoration") -- trên di động (chạm/tap) KHÔNG hề có trạng thái ":hover" thật (chuột mới có), nên MỌI link dùng màu/kiểu mặc định toàn site (menu chính/footer đã có luật hover riêng, xem dlb-main-menu-rz84.css/dlb-footer-info-sg48.css) — còn lại link trong nội dung bài viết/trang thường, breadcrumb... không hề có phản hồi thị giác nào khi chạm. Sửa bằng ":active" (CÓ kích hoạt thật khi chạm, khác ":hover"). THỬ ban đầu dùng chung toàn site "a:active" (không giới hạn khu vực) rồi phát hiện qua "document.styleSheets" tự kiểm: nút "Mua ngay" (".dlb-main-menu__buy-now", nền vàng) là thẻ thật nhưng KHÔNG hề có "text-decoration:none" riêng (chỉ dựa vào mặc định "a{text-decoration:none}" của theme.json) — "a:active" (độ đặc hiệu cao hơn "a" thường vì có thêm pseudo-class) sẽ THẮNG và làm nút bị gạch chân xấu khi bấm. Sửa lại bằng cách KHOANH VÙNG đúng nơi có link nội dung thật (không đụng nút CTA nào) thay vì áp toàn site + loại trừ từng class nút (dễ sót nút mới sau này) — an toàn hơn. ".entry-content"/".wp-block-post-content" = nội dung bài viết/ trang thường; ".wc-block-breadcrumbs"/".woocommerce-breadcrumb" = link breadcrumb (xác nhận link "Trang chủ" không có class riêng, dựa 100% mặc định theme.json). Vẫn giữ loại trừ nút bấm cho chắc (phòng khối nội dung bài viết có chèn nút). */ .entry-content a:not(.wp-block-button__link):not(.wp-element-button):active, .entry-content a:not(.wp-block-button__link):not(.wp-element-button):focus-visible, .wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):active, .wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):focus-visible, .wc-block-breadcrumbs a:active, .wc-block-breadcrumbs a:focus-visible, .woocommerce-breadcrumb a:active, .woocommerce-breadcrumb a:focus-visible { text-decoration: underline; }