Công Cụ Tạo Hình Ảnh SVG Miễn Phí Online – Xuất Code Vector

Tạo Ảnh SVG bằng AI

Nhập mô tả hình ảnh bạn muốn, mô hình AI cao cấp nhất sẽ thiết kế và lập trình mã SVG cho bạn.

Mục lục

Trong thiết kế giao diện web hiện đại (Modern UI/UX), đồ họa Vector định dạng SVG (Scalable Vector Graphics) đã trở thành tiêu chuẩn vàng để hiển thị biểu tượng (Icon), logo thương hiệu, hình minh họa và các đường lượn phân tách bố cục (Section Divider). Khác với ảnh điểm ảnh (Bitmap như JPG, PNG) dễ bị vỡ hạt khi phóng to trên màn hình Retina 2K/4K, ảnh SVG được cấu tạo từ các phương trình toán học XML nên luôn sắc nét tuyệt đối ở mọi kích thước mà dung lượng chỉ nặng vài Kilobyte. Công cụ tạo hình ảnh SVG miễn phí tại ABCwebsite giúp bạn sáng tạo và xuất mã SVG trực tiếp trên trình duyệt mà không cần mở Adobe Illustrator.

1. Tổng quan về công cụ tạo hình ảnh svg miễn phí tại ABCwebsite

Công cụ tạo hình ảnh SVG miễn phí là trình thiết kế và sinh mã đồ họa Vector trực quan dành cho Web Designer, Frontend Developer và người làm nội dung số. Tiện ích cho phép bạn vẽ các khối hình học, đường cong Bézier, hiệu ứng chuyển màu (Linear/Radial Gradient), tùy chỉnh kích thước khung nhìn (viewBox), màu viền (stroke), màu nền (fill) và sao chép trực tiếp đoạn mã <svg>...</svg> sạch để nhúng ngay vào HTML/CSS.

2. Các tính năng nổi bật của công cụ tạo hình ảnh svg miễn phí

Được thiết kế tối ưu cho trải nghiệm người dùng hiện đại, công cụ tạo hình ảnh svg miễn phí sở hữu những ưu điểm kỹ thuật vượt trội:

Khởi tạo và chỉnh sửa đối tượng Vector trực quan: Hỗ trợ tạo nhanh các hình khối cơ bản, đường lượn sóng (Wave), hình Blob hữu cơ, biểu tượng trang trí và văn bản nghệ thuật với thông số tọa độ chính xác.
Tùy biến màu sắc & Dải màu Gradient hiện đại: Dễ dàng phối màu đơn sắc hoặc dải màu chuyển sắc (Gradient), điều chỉnh độ trong suốt (Opacity) và độ dày nét vẽ theo đúng bộ nhận diện thương hiệu.
Xuất mã nguồn HTML/SVG sạch (Inline SVG Code): Cho phép xem và copy ngay mã XML/SVG đã được tối ưu hóa (minified), loại bỏ các thẻ rác để nhúng trực tiếp vào mã nguồn website mà không phát sinh thêm HTTP Request.
Tải xuống tệp .SVG gốc hoặc xuất sang ảnh .PNG: Linh hoạt lưu về máy dưới định dạng tệp Vector .svg chuẩn hoặc kết xuất (Render) thành hình ảnh .png nền trong suốt độ phân giải cao.

3. Bảng thông số kỹ thuật của công cụ tạo hình ảnh svg miễn phí

Tiêu chí kỹ thuật	Thông số chi tiết trên hệ thống ABCwebsite
Chuẩn đồ họa đầu ra	W3C Scalable Vector Graphics (SVG 1.1 / SVG 2.0) & PNG
Tính năng hỗ trợ	Chỉnh sửa Path, Shape, Gradient, ViewBox, Stroke, Fill
Tương thích mã nguồn	HTML5, CSS3 Background URI, React JSX, Vue, WordPress
Độ sắc nét hiển thị	Vô cực (Không bị vỡ nét trên màn hình 4K/8K/Retina)
Chi phí bản quyền	Miễn phí 100% cho cả dự án cá nhân và thương mại

4. Lợi ích thực tế khi sử dụng công cụ tạo hình ảnh svg miễn phí

Tối ưu hóa tốc độ tải trang tuyệt đối: Nhúng mã SVG trực tiếp từ công cụ giúp giảm số lượng yêu cầu tải ảnh lên máy chủ, giúp trang web đạt 100 điểm Google PageSpeed.
Dễ dàng tạo hiệu ứng động với CSS & JavaScript: Mỗi thành phần trong bức ảnh SVG xuất ra đều có thể đổi màu khi di chuột (:hover) hoặc tạo hiệu ứng vẽ nét chuyển động mượt mà.
Tiết kiệm thời gian cho lập trình viên Frontend: Không cần cài đặt phần mềm thiết kế chuyên nghiệp vẫn có thể tự tạo icon, nút bấm hay họa tiết trang trí nền cho Landing Page.

5. Hướng dẫn sử dụng công cụ tạo hình ảnh svg miễn phí nhanh chóng

Bước 1 – Thiết lập khung vẽ (Canvas / ViewBox): Chọn kích thước chiều rộng, chiều cao hoặc mẫu hình dạng Vector trên giao diện công cụ.
Bước 2 – Tùy chỉnh hình dáng và màu sắc: Thêm các lớp hình học, điều chỉnh điểm neo, màu sắc fill, đường viền stroke và hiệu ứng Gradient theo ý muốn.
Bước 3 – Sao chép mã SVG hoặc Tải tệp: Nhấn nút Copy Code SVG để dán thẳng vào file HTML của bạn, hoặc nhấn Tải xuống .SVG để lưu thành tệp tin.

6. Khám phá thêm hệ sinh thái công cụ & mẫu website miễn phí tại ABCwebsite

Bên cạnh công cụ tạo hình ảnh svg miễn phí, bạn có thể kết hợp sử dụng thêm các tiện ích trực tuyến và kho giao diện miễn phí tại ABCwebsite để tối ưu hóa hiệu suất công việc:

Trải nghiệm ngay: Công cụ chuyển đổi định dạng hình ảnh miễn phí.
Trải nghiệm ngay: Công cụ chỉnh sửa hình ảnh miễn phí.
Trải nghiệm ngay: Kho mẫu website miễn phí.
Xem trọn bộ hàng trăm giao diện HTML5/CSS3/JS chuẩn SEO tại: Kho mẫu website miễn phí ABCwebsite và Kho công cụ tiện ích miễn phí.

Hình ảnh SVG khác gì so với ảnh PNG và JPG thông thường?

Ảnh PNG và JPG được tạo thành từ lưới các điểm ảnh (Pixel) cố định nên khi phóng to sẽ bị nhòe và răng cưa. Ngược lại, ảnh SVG lưu trữ dưới dạng công thức toán học Vector (đường thẳng, đường cong, tọa độ) nên có thể phóng to vô hạn lên màn hình khổng lồ mà vẫn sắc nét tuyệt đối và dung lượng cực nhẹ.

Làm thế nào để nhúng mã SVG từ công cụ vào website WordPress?

Bạn chỉ cần nhấn nút Copy mã SVG trên công cụ, sau đó mở bài viết hoặc giao diện WordPress, thêm khối Mã HTML tùy chỉnh (Custom HTML) và dán đoạn mã … vào là hình ảnh sẽ hiển thị ngay lập tức.

Câu hỏi thường gặp FAQ

Công cụ tạo hình ảnh SVG miễn phí có hỗ trợ xuất ra ảnh PNG không?

Có. Ngoài việc tải tệp .svg gốc và sao chép mã XML, công cụ còn hỗ trợ kết xuất hình vẽ Vector của bạn sang định dạng ảnh PNG nền trong suốt để sử dụng trên các nền tảng mạng xã hội không hỗ trợ tải file SVG.

Sử dụng ảnh SVG có giúp ích cho SEO website không?

Rất tốt cho SEO. Vì tệp SVG thực chất là văn bản XML nên Googlebot có thể đọc hiểu nội dung thẻ và bên trong SVG, đồng thời dung lượng siêu nhẹ của SVG giúp tăng tốc độ tải trang đáng kể.</p> <h3>Tôi có thể chỉnh sửa lại màu sắc của file SVG bằng CSS sau khi tải về không?</h3> <p>Hoàn toàn được. Bạn có thể gán thuộc tính fill=”currentColor” hoặc dùng bộ chọn CSS tác động trực tiếp vào thẻ path, circle, rect của mã SVG để đổi màu linh hoạt theo chế độ Sáng/Tối (Light/Dark Mode) của website.</p> </div> </div> <div class="post-meta"> <div class="entry-meta"> <span class="category-link">Danh mục: <a href="https://abcwebsite.com.vn/cong-cu-tien-ich-mien-phi/">Công cụ tiện ích miễn phí</a>, <a href="https://abcwebsite.com.vn/cong-cu-tien-ich-mien-phi/cong-cu-ai-mien-phi/">Công cụ AI miễn phí</a>, <a href="https://abcwebsite.com.vn/cong-cu-tien-ich-mien-phi/cong-cu-chuyen-doi-hinh-anh-mien-phi/">Công cụ chuyển đổi hình ảnh miễn phí</a> </span> </div> <div id="fb-id" class="single-share-box"> <div class="share-link-description">Nếu bạn thấy hữu ích, hãy chia sẻ cho mọi người và đừng quên <a href="/donate">ỦNG HỘ</a> để giúp website ngày càng phát triển hơn nhé!</div> <div class="social-share"> <ul class="essb_links_list">  <a rel="noopener noreferrer" target="_blank" href="https://www.facebook.com/sharer?u=https://abcwebsite.com.vn/cong-cu-tao-hinh-anh-svg-mien-phi/&t=Công cụ tạo hình ảnh SVG miễn phí" id="fb-share" class="tz_social"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0866ff" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/> </svg> <span></span> </a> <a title="Share on LinkedIn" href="//www.linkedin.com/shareArticle?mini=true&url=https://abcwebsite.com.vn/cong-cu-tao-hinh-anh-svg-mien-phi/&title=Công cụ tạo hình ảnh SVG miễn phí" onclick="window.open(this.href, this.title, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=500,height=500,top=300px,left=300px'); return false;"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0a66c2" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/> </svg> </a> <a title="Share on Telegram" href="https://telegram.me/share/url?url='https://abcwebsite.com.vn/cong-cu-tao-hinh-anh-svg-mien-phi/" onclick="window.open(this.href, this.title, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=500,height=500,top=300px,left=300px'); return false;"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#3b9fe5" class="bi bi-telegram" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"/> </svg> </a> <a href="javascript: void(0)" onclick="window.open('http://x.com/share?text=Công cụ tạo hình ảnh SVG miễn phí&url=https://abcwebsite.com.vn/cong-cu-tao-hinh-anh-svg-mien-phi/', 'sharer', 'toolbar=0,status=0,width=580,height=325');" class="tz_social" id="tw-share"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#000" class="bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg> <span></span> </a> </ul> </div> </div> </div> <section class="abc-related-posts-section" aria-label="Công Cụ Tiện Ích Liên Quan"> <div class="abc-related-header"> <h2 class="abc-related-title">Công Cụ Tiện Ích Liên Quan</h2> <a href="https://abcwebsite.com.vn/cong-cu-tien-ich-mien-phi/" class="abc-related-more-link"> <span>Xem tất cả công cụ</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> </a> </div> <div class="post-grid abc-related-grid"> <article class="article-item" id="post-3840"> <div class="article-img"> <a href="https://abcwebsite.com.vn/cong-cu-nen-hinh-anh-mien-phi/" title="Công cụ nén hình ảnh miễn phí"> <img class="w-100" src="https://abcwebsite.com.vn/wp-content/uploads/2026/11/cong-cu-nen-hinh-anh-mien-phi-768x432.webp" alt="Công cụ nén hình ảnh miễn phí" loading="lazy" /> </a> <span class="type-web-badge type-web-tool"> Công cụ </span> </div> <div class="article-body"> <h3 class="article-title text-center"> <a href="https://abcwebsite.com.vn/cong-cu-nen-hinh-anh-mien-phi/" title="Công cụ nén hình ảnh miễn phí"> Công cụ nén hình ảnh miễn phí </a> </h3> </div> </article> <article class="article-item" id="post-3829"> <div class="article-img"> <a href="https://abcwebsite.com.vn/cong-cu-chuyen-doi-dinh-dang-hinh-anh-mien-phi/" title="Công cụ chuyển đổi định dạng hình ảnh miễn phí"> <img class="w-100" src="https://abcwebsite.com.vn/wp-content/uploads/2026/11/cong-cu-chuyen-doi-dinh-dang-hinh-anh-mien-phi-768x432.webp" alt="Công cụ chuyển đổi định dạng hình ảnh miễn phí" loading="lazy" /> </a> <span class="type-web-badge type-web-tool"> Công cụ </span> </div> <div class="article-body"> <h3 class="article-title text-center"> <a href="https://abcwebsite.com.vn/cong-cu-chuyen-doi-dinh-dang-hinh-anh-mien-phi/" title="Công cụ chuyển đổi định dạng hình ảnh miễn phí"> Công cụ chuyển đổi định dạng hình ảnh miễn phí </a> </h3> </div> </article> <article class="article-item" id="post-3569"> <div class="article-img"> <a href="https://abcwebsite.com.vn/cong-cu-cham-diem-ats-cv-mien-phi/" title="Công cụ chấm điểm ATS CV miễn phí"> <img class="w-100" src="https://abcwebsite.com.vn/wp-content/uploads/2026/11/cong-cu-cham-diem-ats-cv-mien-phi-768x432.webp" alt="Công cụ chấm điểm ATS CV miễn phí" loading="lazy" /> </a> <span class="type-web-badge type-web-tool"> Công cụ </span> </div> <div class="article-body"> <h3 class="article-title text-center"> <a href="https://abcwebsite.com.vn/cong-cu-cham-diem-ats-cv-mien-phi/" title="Công cụ chấm điểm ATS CV miễn phí"> Công cụ chấm điểm ATS CV miễn phí </a> </h3> </div> </article> <article class="article-item" id="post-3379"> <div class="article-img"> <a href="https://abcwebsite.com.vn/cong-cu-chinh-sua-hinh-anh-mien-phi/" title="Công cụ chỉnh sửa hình ảnh miễn phí"> <img class="w-100" src="https://abcwebsite.com.vn/wp-content/uploads/2026/11/cong-cu-chinh-sua-hinh-anh-mien-phi-768x432.webp" alt="Công cụ chỉnh sửa hình ảnh miễn phí" loading="lazy" /> </a> <span class="type-web-badge type-web-tool"> Công cụ </span> </div> <div class="article-body"> <h3 class="article-title text-center"> <a href="https://abcwebsite.com.vn/cong-cu-chinh-sua-hinh-anh-mien-phi/" title="Công cụ chỉnh sửa hình ảnh miễn phí"> Công cụ chỉnh sửa hình ảnh miễn phí </a> </h3> </div> </article> <article class="article-item" id="post-3740"> <div class="article-img"> <a href="https://abcwebsite.com.vn/cong-cu-xem-youtube-khong-quang-cao/" title="Công cụ xem youtube không quảng cáo"> <img class="w-100" src="https://abcwebsite.com.vn/wp-content/uploads/2026/11/cong-cu-xem-video-youtube-khong-quang-cao-768x432.webp" alt="Công cụ xem youtube không quảng cáo" loading="lazy" /> </a> <span class="type-web-badge type-web-tool"> Công cụ </span> </div> <div class="article-body"> <h3 class="article-title text-center"> <a href="https://abcwebsite.com.vn/cong-cu-xem-youtube-khong-quang-cao/" title="Công cụ xem youtube không quảng cáo"> Công cụ xem youtube không quảng cáo </a> </h3> </div> </article> <article class="article-item" id="post-3602"> <div class="article-img"> <a href="https://abcwebsite.com.vn/cong-cu-tao-thiep-mien-phi/" title="Công cụ tạo thiệp miễn phí"> <img class="w-100" src="https://abcwebsite.com.vn/wp-content/uploads/2026/11/cong-cu-tao-thiep-mien-phi-768x432.webp" alt="Công cụ tạo thiệp miễn phí" loading="lazy" /> </a> <span class="type-web-badge type-web-tool"> Công cụ </span> </div> <div class="article-body"> <h3 class="article-title text-center"> <a href="https://abcwebsite.com.vn/cong-cu-tao-thiep-mien-phi/" title="Công cụ tạo thiệp miễn phí"> Công cụ tạo thiệp miễn phí </a> </h3> </div> </article> </div> </section>     </div> </div> </main> <footer> <div class="footer-top-wrapper"> <div class="container"> <div class="footer-content-minimal">  <div class="footer-nav"> <nav class="footer-menu-container"><ul id="menu-thong-tin-lien-he" class="footer-menu-list"><li id="menu-item-3406" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3406"><a href="https://abcwebsite.com.vn/dieu-khoan-su-dung/">Điều khoản sử dụng</a></li> <li id="menu-item-3405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3405"><a href="https://abcwebsite.com.vn/lien-he/">Liên hệ</a></li> <li id="menu-item-3407" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3407"><a href="https://abcwebsite.com.vn/chinh-sach-quyen-rieng-tu/">Chính sách quyền riêng tư</a></li> </ul></nav> </div>  <div class="footer-social-list"> <a href="https://www.youtube.com/@abcwebsite" target="_blank" rel="noopener noreferrer" class="social-btn youtube" aria-label="Xem kênh YouTube của abcwebsite"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16"> <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" /> </svg> </a> <a href="https://www.facebook.com/abcwebsite.com.vn" target="_blank" rel="noopener noreferrer" class="social-btn facebook" aria-label="Xem kênh Facebook của ABCwebsite"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" /> </svg> </a> <a href="mailto:abcwebsitevn@gmail.com" class="social-btn email" aria-label="Email hỗ trợ của ABCwebsite"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16"> <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z" /> </svg> </a>  </div>  <div class="footer-divider-minimal"></div>  <div class="footer-copyright-minimal"> <p>© Copyright 2018 - 2026 <a href="https://abcwebsite.com.vn">ABCwebsite</a> - All Rights Reserved</p> </div> </div> </div> </div>  <div class="header-utilities">  <div class="nav-menu mobile-only-utility"> <a href="javascript:void(0)" class="navbar-toggle" role="button" aria-label="Danh mục"> <span class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/> </svg> </span> <span class="menu-text">Danh mục</span> </a> </div>  <div class="nav-login"> <a class="btn-modal btn-login-custom" data-target="loginModal" role="button" href="javascript:void(0)" aria-label="Tài khoản"> <span class="login-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/> </svg> </span> <span class="login-text">Tài khoản</span> </a> </div>  <div class="nav-home mobile-only-utility"> <a href="https://abcwebsite.com.vn/" role="button" aria-label="Trang chủ"> <span class="home-icon"> <img src="https://abcwebsite.com.vn/wp-content/uploads/2025/10/cropped-ABC-small-100x100.png" alt="Trang chủ" class="favicon-home-icon" width="22" height="22"> </span> <span class="home-text">Trang chủ</span> </a> </div>  <div class="nav-search"> <a class="btn-modal" data-target="searchModal" role="button" href="javascript:void(0)" aria-label="Mở tìm kiếm"> <span class="search-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" /> </svg> </span> <span class="search-text">Tìm kiếm</span> </a> </div>  <div class="nav-support mobile-only-utility"> <a class="btn-modal" data-target="mobileSupportModal" role="button" href="javascript:void(0)" aria-label="Mở hỗ trợ"> <span class="support-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5" /> </svg> </span> <span class="support-text">Hỗ trợ</span> </a> </div> </div> </footer> </div> <style id="abc-dark-mode-styles"> /* --- CSS VARIABLES & DEFAULTS --- */ :root { --dm-bg: #0f172a; --dm-surface: #1e293b; --dm-surface-light: #334155; --dm-text: #f1f5f9; --dm-text-muted: #a2aec0; --dm-border: #334155; --dm-accent: #38bdf8; --dm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* --- TOGGLE BUTTON STYLE --- */ .abc-dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; transition: var(--dm-transition); padding: 0; outline: none; position: relative; z-index: 10; /* Khoảng cách với nút seasonal */ } .abc-dark-mode-toggle:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .abc-dark-mode-toggle svg { width: 18px; height: 18px; fill: none; stroke: #475569; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: var(--dm-transition); } /* --- DARK MODE OVERRIDES --- */ body.dark-mode { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } body.dark-mode ul.main-navigation>li>a { color: var(--dm-text); } body.dark-mode .header-utilities span[class$="-text"]{ color: var(--dm-text); } body.dark-mode .navbar-toggle { color: var(--dm-text); } body.dark-mode .mobile-menu-wrapper{ background-color: var(--dm-bg); } body.dark-mode .template-gen-container{ background-color: var(--dm-surface); } body.dark-mode .search-select-trigger, body.dark-mode .search-select-dropdown, body.dark-mode .search-select-search-box, body.dark-mode .search-select-option.parent-level, body.dark-mode .custom-color-input-wrap{ background: var(--dm-bg); } body.dark-mode .search-select-trigger, body.dark-mode .custom-color-input-wrap{ border-color: var(--dm-border); } body.dark-mode .search-select-option:hover, body.dark-mode .search-select-option.selected{ background-color: transparent; color: #0f75bd !important; } body.dark-mode .template-form-group label, body.dark-mode .search-select-option.parent-level, body.dark-mode .search-select-option, body.dark-mode .search-select-trigger{ color: var(--dm-text); } body.dark-mode ul.main-navigation>li>a:hover { color: #0f75bd !important; } body.dark-mode .color-preset-btn{ border-color: var(--dm-border); } body.dark-mode ul.main-navigation>li.menu-item-has-children>a:after { border-color: var(--dm-text); } body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu li > a{ color: var(--dm-text); } body.dark-mode .pagination .page-link{ color: var(--dm-text); } body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu li.menu-item-has-children > .menu-toggle, body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu li.menu-item-has-children > .menu-toggle:after{ color: var(--dm-text); border-color: var(--dm-text); } body.dark-mode ul.main-navigation .sub-menu { background-color: var(--dm-bg); color: var(--dm-text); } body.dark-mode .article-item { background-color: var(--dm-surface); border-color: var(--dm-border); } body.dark-mode .article-item .article-title { background: transparent !important; text-align: center !important; } body.dark-mode .article-item .article-title>a { color: var(--dm-text); text-align: center !important; } body.dark-mode ul.main-navigation .sub-menu li { border-color: var(--dm-border); } body.dark-mode ul.main-navigation .sub-menu li a { color: var(--dm-text); } body.dark-mode .post-meta a, body.dark-mode .share-link-description { color: var(--dm-text); } body.dark-mode .post-meta a:hover { color: #0f75bd !important; } body.dark-mode .post-meta .share-link-description a { color: #e70000; } body.dark-mode span.livechat-contact-label { color: var(--dm-bg) !important; } body.dark-mode span.livechat-icon { color: var(--dm-text) !important; } body.dark-mode ul.main-navigation .sub-menu li.menu-item-has-children >a:after{ border-right-color: var(--dm-text); border-bottom-color: var(--dm-text); } body.dark-mode .abcwebsite-donate-form label, body.dark-mode .livechat-field label, body.dark-mode .seo-form-group label, body.dark-mode .robots-gen-row label, body.dark-mode .sitemap-gen-row label { color: var(--dm-text) !important } body.dark-mode small { color: var(--dm-text-muted) !important; } body.dark-mode .ip-checker-container{ background-color: var(--dm-surface); border-color: var(--dm-border) !important; } body.dark-mode .seo-form-container, body.dark-mode .robots-gen, body.dark-mode .sitemap-gen { background-color: var(--dm-surface); } body.dark-mode .ip-result-grid{ background-color: var(--dm-surface); } body.dark-mode #ip-result{ border-color: var(--dm-border) !important; } body.dark-mode .ip-info-item{ background: var(--dm-surface-light); border-color: var(--dm-border) !important; } body.dark-mode .pdf-upload-container{ background-color: var(--dm-bg) !important; } body.dark-mode .cv-result-content, body.dark-mode .pdf-upload-box{ background: var(--dm-surface); border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .pdf-toolbar{ background: var(--dm-surface); border-color: var(--dm-border) !important; } body.dark-mode .generatorTool{ background: var(--dm-surface); } body.dark-mode .cv-form-group label{ color: var(--dm-text) !important; } body.dark-mode #result-container-ats ul li, body.dark-mode #result-container-jd ul li, body.dark-mode .cv-result-content strong, body.dark-mode .cv-result-content p{ color: var(--dm-text) !important; } body.dark-mode .cv-tabs{ border-color: var(--dm-border) !important; } body.dark-mode .cv-tool-container, body.dark-mode .cv-file-upload{ background-color: var(--dm-surface); border-color: var(--dm-border) !important; } body.dark-mode .ip-info-label, body.dark-mode .ip-info-value{ color: var(--dm-text) !important; } body.dark-mode .sitemap-tip, body.dark-mode .robots-tip, body.dark-mode .pdf-guide-tip{ background-color: var(--dm-surface-light); } body.dark-mode .pdf-guide-tip li{ color: var(--dm-text); } body.dark-mode .article-item { border-color: var(--dm-border); } body.dark-mode .language-site .lang-dropdown-wrapper, body.dark-mode #customTranslateSelect, body.dark-mode .abc-seasonal-toggle { background-color: var(--dm-bg); border-color: var(--dm-border); } body.dark-mode #mobile-language-container { border-color: var(--dm-border); } body.dark-mode ul.main-navigation .sub-menu li>a:hover { color: #0f75bd; } body.dark-mode .nav-search:hover .search-icon { color: #0f75bd !important; } body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu li>a { /*color: var(--dm-text);*/ } body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu li.menu-item-has-children>.menu-toggle:after { /*border-color: var(--dm-text);*/ } body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu>li, body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu ul li { border-color: var(--dm-border); } body.dark-mode .abc-filter-trigger { background: var(--dm-bg) !important; } body.dark-mode .filter-cat-item.active { background-color: #0f75bd !important; } body.dark-mode .filter-cat-item.active span, body.dark-mode .filter-cat-child, body.dark-mode .abc-filter-trigger, body.dark-mode .abc-filter-trigger-wrap .abc-filter-label { color: var(--dm-text) !important; } body.dark-mode .filter-cat-item:hover { background-color: #0f75bd !important; } body.dark-mode .filter-cat-item:hover span { color: var(--dm-text) !important; } body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu li>a:hover, body.dark-mode .mobile-menu-wrapper ul.mobile-main-menu li.current-menu-item>a, body.dark-mode ul.main-navigation>li.current-menu-item>a { color: #0f75bd; } body.dark-mode .mobile-menu-wrapper .mobile-menu-wrapper { background-color: var(--dm-surface) !important; } body.dark-mode .banner-header { background: var(--dm-surface) !important; border-bottom: 1px solid var(--dm-border) !important; } body.dark-mode .rank-math-breadcrumb { color: var(--dm-text-muted) !important; } body.dark-mode .rank-math-breadcrumb a { color: var(--dm-accent) !important; } body.dark-mode .rank-math-breadcrumb a:hover { color: #ffffff !important; } body.dark-mode .category-description, body.dark-mode .post-description { color: var(--dm-text-muted) !important; } body.dark-mode .abc-dark-mode-toggle { background: var(--dm-bg); border-color: var(--dm-border); } body.dark-mode .abc-dark-mode-toggle svg { stroke: #fbbf24; /* Màu vàng mặt trời */ } body.dark-mode .sitemap-url-celly { background: var(--dm-bg); } body.dark-mode .sitemap-url-table .sitemap-url-cell { color: var(--dm-text); background-color: var(--dm-bg); } body.dark-mode .pdf-dropdown-menu, body.dark-mode .pdf-dropdown-search-wrapper, body.dark-mode .pdf-dropdown-trigger, body.dark-mode .pdf-tool-btn{ background: var(--dm-surface-light); color: var(--dm-text); border-color: var(--dm-border) !important; } body.dark-mode .sitemap-url-table tr:hover td, body.dark-mode .robots-rules-table tr:hover td { background: var(--dm-surface-light); } body.dark-mode .pdf-tool-btn:hover, body.dark-mode .pdf-tool-btn.active{ background: var(--pdf-primary); } body.dark-mode .sitemap-lastmod { color-scheme: dark; } /* Header & Navigation */ body.dark-mode .header-navigation, body.dark-mode .header-utilities { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } body.dark-mode .nav-login a, body.dark-mode .nav-search a, body.dark-mode .nav-support a, body.dark-mode .header-utilities a{ color: var(--dm-text); } /* Main Content & Sections */ body.dark-mode .site-main, body.dark-mode .background-page, body.dark-mode .banner-home, body.dark-mode .websites-section, body.dark-mode .knowledge-section, body.dark-mode .donate-section, body.dark-mode .convert-text-section, body.dark-mode .convert-image-section, body.dark-mode .special-commitment { background: var(--dm-bg) !important; } /* Cards & Surfaces */ body.dark-mode .service-box .box-green-border, body.dark-mode .typing, body.dark-mode .wp-block-rank-math-toc-block, body.dark-mode .box-content-modal { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; } /* Typography */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode .page-title, body.dark-mode .donate-modal-title, body.dark-mode .livechat-form-title, body.dark-mode .support-modal-title, body.dark-mode .login-modal-title, body.dark-mode .search-modal-title, body.dark-mode .box-green-border .service-title, body.dark-mode .box-green-border .service-title h3, body.dark-mode .box-green-border .service-title h3 a { color: var(--dm-text) !important; } body.dark-mode p, body.dark-mode li, body.dark-mode .box-green-border .service-title p { color: var(--dm-text); } body.dark-mode .abc-dropzone, body.dark-mode .abc-tool-tip { background-color: var(--dm-surface) !important; } body.dark-mode .current-menu-item>a { color: #0f75bd !important; } body.dark-mode .abc-tool-tip, body.dark-mode .abc-dropzone-text, body.dark-mode .abc-dropzone-hint, body.dark-mode .robots-tip, body.dark-mode .sitemap-tip { color: var(--dm-text) !important; } body.dark-mode .banner-home .banner-content .looking-for { color: var(--dm-text) !important; } body.dark-mode .detail-article-single a { color: var(--dm-text) !important; } body.dark-mode .blog-single .entry-meta>span, body.dark-mode .blog-single .entry-meta>a { color: var(--dm-text) !important; } body.dark-mode .social-share .essb_links_list a { background-color: var(--dm-text-muted) } /* Specific element adjustments */ body.dark-mode .section-title h2:before { background: var(--dm-border) !important; } body.dark-mode .banner-home .typing { background: rgba(30, 41, 59, 0.8) !important; backdrop-filter: blur(10px); } /* Footer */ body.dark-mode .footer-top-wrapper { background: var(--dm-surface) !important; } body.dark-mode .copyright { border-color: var(--dm-border) !important; } body.dark-mode .footer-top-wrapper a { color: var(--dm-text); border-color: var(--dm-border) !important; } /* Inputs & Forms */ body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: var(--dm-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Transition smooth */ body, .header-navigation, .typing, .footer-top-wrapper { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important; } /* Mobile adjustment */ @media (max-width: 768px) { } </style> <script id="abc-dark-mode-js"> (function () { const storageKey = 'abc_theme_mode'; const body = document.body; // 1. Tạo nút toggle const createToggle = () => { const btn = document.createElement('button'); btn.id = 'abc-dark-mode-toggle'; btn.className = 'abc-dark-mode-toggle'; btn.setAttribute('aria-label', 'Chuyển chế độ Sáng/Tối'); btn.innerHTML = ` <svg class="icon-moon" viewBox="0 0 24 24" style="display: ${body.classList.contains('dark-mode') ? 'none' : 'block'}"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> <svg class="icon-sun" viewBox="0 0 24 24" style="display: ${body.classList.contains('dark-mode') ? 'block' : 'none'}"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> `; btn.addEventListener('click', () => { const isDark = body.classList.toggle('dark-mode'); localStorage.setItem(storageKey, isDark ? 'dark' : 'light'); // Update icons btn.querySelector('.icon-moon').style.display = isDark ? 'none' : 'block'; btn.querySelector('.icon-sun').style.display = isDark ? 'block' : 'none'; }); return btn; }; // 2. Khởi tạo nút toggle (Ưu tiên nút đã có sẵn trong #loginModal) const initToggle = () => { let btn = document.getElementById('abc-dark-mode-toggle'); if (!btn) { const copyrightDiv = document.querySelector('.copyright p'); if (copyrightDiv) { btn = createToggle(); copyrightDiv.appendChild(btn); } return; } const isDark = body.classList.contains('dark-mode'); const iconMoon = btn.querySelector('.icon-moon'); const iconSun = btn.querySelector('.icon-sun'); if (iconMoon) iconMoon.style.display = isDark ? 'none' : 'block'; if (iconSun) iconSun.style.display = isDark ? 'block' : 'none'; btn.addEventListener('click', () => { const isNowDark = body.classList.toggle('dark-mode'); localStorage.setItem(storageKey, isNowDark ? 'dark' : 'light'); // Update icons if (iconMoon) iconMoon.style.display = isNowDark ? 'none' : 'block'; if (iconSun) iconSun.style.display = isNowDark ? 'block' : 'none'; }); }; // 3. Khởi tạo trạng thái ngay lập tức const savedMode = localStorage.getItem(storageKey); // Chỉ bật Dark Mode nếu người dùng đã chủ động chọn trước đó if (savedMode === 'dark') { body.classList.add('dark-mode'); } // Đợi DOM để gán sự kiện cho nút if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initToggle); } else { initToggle(); } })(); </script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/abcwebsite/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <style> .abc-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .abc-modal-overlay.active { opacity: 1; visibility: visible; } .abc-modal-box { background: #fff; border-radius: 8px; padding: 24px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-20px); transition: transform 0.3s ease; } .abc-modal-overlay.active .abc-modal-box { transform: translateY(0); } .abc-modal-icon { font-size: 48px; margin-bottom: 15px; } .abc-modal-message { font-size: 16px; color: #333; margin-bottom: 24px; line-height: 1.5; } .abc-modal-buttons { display: flex; justify-content: center; gap: 12px; } .abc-modal-btn { padding: 10px 20px; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .abc-modal-btn-primary { background: #0f75bd; color: #fff; } .abc-modal-btn-primary:hover { background: #0b5a92; } .abc-modal-btn-secondary { background: #e0e0e0; color: #333; } .abc-modal-btn-secondary:hover { background: #c8c8c8; } </style> <div class="abc-modal-overlay" id="abcGlobalModal"> <div class="abc-modal-box"> <div class="abc-modal-icon" id="abcModalIcon">✅</div> <div class="abc-modal-message" id="abcModalMessage">Message goes here</div> <div class="abc-modal-buttons" id="abcModalButtons"> <button class="abc-modal-btn abc-modal-btn-primary" id="abcModalOkBtn">OK</button> <button class="abc-modal-btn abc-modal-btn-secondary" id="abcModalCancelBtn" style="display:none;">Hủy</button> </div> </div> </div> <script> window.abcModal = { overlay: document.getElementById('abcGlobalModal'), icon: document.getElementById('abcModalIcon'), message: document.getElementById('abcModalMessage'), okBtn: document.getElementById('abcModalOkBtn'), cancelBtn: document.getElementById('abcModalCancelBtn'), confirmCallback: null, open: function() { this.overlay.classList.add('active'); }, close: function() { this.overlay.classList.remove('active'); }, alert: function(msg, type = 'info') { this.message.innerHTML = msg; this.cancelBtn.style.display = 'none'; this.okBtn.textContent = 'OK'; if (type === 'success') { this.icon.innerHTML = '✅'; this.icon.style.color = '#4caf50'; } else if (type === 'error') { this.icon.innerHTML = '❌'; this.icon.style.color = '#f44336'; } else if (type === 'warning') { this.icon.innerHTML = '⚠️'; this.icon.style.color = '#ff9800'; } else { this.icon.innerHTML = 'ℹ️'; this.icon.style.color = '#2196f3'; } this.confirmCallback = null; this.open(); }, confirm: function(msg, callback) { this.message.innerHTML = msg; this.icon.innerHTML = '❓'; this.icon.style.color = '#ff9800'; this.cancelBtn.style.display = 'inline-block'; this.okBtn.textContent = 'Đồng ý'; this.confirmCallback = callback; this.open(); } }; if (document.getElementById('abcModalOkBtn')) { document.getElementById('abcModalOkBtn').addEventListener('click', function() { abcModal.close(); if (abcModal.confirmCallback) { abcModal.confirmCallback(); abcModal.confirmCallback = null; } }); } if (document.getElementById('abcModalCancelBtn')) { document.getElementById('abcModalCancelBtn').addEventListener('click', function() { abcModal.close(); abcModal.confirmCallback = null; }); } </script> <style> @keyframes abc-coin-spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .abc-coin-icon { display: inline-block; animation: abc-coin-spin 3.5s infinite linear; vertical-align: middle; width: 14px; height: 14px; } .login-user-credits{ display: inline-flex; justify-content: center; align-items: center; gap: 6px; color: rgb(217, 119, 6); border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; margin: 0px auto 15px; width: fit-content; } </style> <style> /* === MODAL GOOGLE LOGIN & USER PANEL === */ #loginModal { display: none; z-index: 99999; transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.3s ease; } #loginModal .modal-content { margin: auto; position: relative; max-width: 400px; width: calc(100% - 32px); opacity: 0; transform: translateY(20px) scale(0.96); transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } #loginModal.show .modal-content { opacity: 1; transform: translateY(0) scale(1); } #loginModal .box-content-modal { background-color: #ffffff; padding: 30px 24px 22px 24px; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.03); margin: 0; position: relative; overflow: hidden; text-align: center; } #loginModal .close.login-close { position: absolute; top: 18px; right: 15px; width: 25px; height: 25px; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 32px; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #e2e8f0; z-index: 10; padding: 0; margin: 0; opacity: 1; text-decoration: none; user-select: none; } #loginModal .close.login-close svg { width: 15px; height: 15px; display: block; pointer-events: none; } #loginModal .close.login-close:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; transform: rotate(90deg); } #loginModal .login-modal-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 6px 0; letter-spacing: -0.015em; line-height: 30px !important; } /* --- LOGGED OUT STATE --- */ #loginModal .login-subtext { font-size: 13.5px; color: #64748b; line-height: 1.5; margin: 0 auto 16px; max-width: 300px; } #loginModal .login-flex-center { display: flex; justify-content: center; align-items: center; min-height: 44px; margin: 14px 0 12px; } #loginModal .g_id_signin { display: flex; justify-content: center; transition: transform 0.2s ease; } #loginModal .g_id_signin:hover { transform: scale(1.02); } #loginModal .login-security-note { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; padding: 4px 12px; border-radius: 9999px; margin-top: 4px; font-weight: 500; } #loginModal .login-security-note svg { color: #10b981; flex-shrink: 0; } /* --- LOGGED IN STATE --- */ #loginModal #login-state-logged-in { padding-top: 4px; } #loginModal .login-user-profile-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 14px; margin: 0 auto 12px; display: flex; align-items: center; gap: 12px; text-align: left; transition: all 0.2s ease; } #loginModal .login-avatar-badge { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); color: #0284c7; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.18); } #loginModal .login-avatar-badge svg { width: 22px; height: 22px; } #loginModal .login-user-info { flex: 1; min-width: 0; } #loginModal .login-user-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #10b981; margin-bottom: 2px; } #loginModal .status-indicator { width: 6px; height: 6px; border-radius: 50%; background-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } #loginModal .login-username-val { font-size: 14.5px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Credits Badge */ #loginModal .login-user-credits { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #fde68a; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12); padding: 6px 16px; border-radius: 9999px; font-weight: 700; font-size: 13px; color: #b45309; margin: 0 auto 12px; width: fit-content; transition: transform 0.2s ease, box-shadow 0.2s ease; } #loginModal .login-user-credits:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); } #loginModal .abc-coin-icon { display: inline-block; animation: abc-coin-spin 3.5s infinite linear; vertical-align: middle; width: 16px; height: 16px; } @keyframes abc-coin-spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* Nút Đăng xuất */ #loginModal .login-logout-container { margin-top: 4px; } #loginModal #btn-logout-modal { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px 18px; background: #ffffff; color: #ef4444; border: 1.5px solid #fee2e2; border-radius: 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } #loginModal #btn-logout-modal:hover { background: #ef4444; border-color: #ef4444; color: #ffffff; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25); transform: translateY(-1px); } #loginModal #btn-logout-modal:active { transform: translateY(0); } #loginModal #btn-logout-modal svg { transition: transform 0.2s ease; } #loginModal #btn-logout-modal:hover svg { transform: translateX(2px); } /* Loading Spinner */ #loginModal .login-spinner-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; } #loginModal .login-spinner { width: 44px; height: 44px; border: 3.5px solid #e2e8f0; border-top-color: #0f75bd; border-radius: 50%; animation: login-spin 0.8s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite; box-shadow: 0 4px 12px rgba(15, 117, 189, 0.12); } #loginModal #login-loading-text { margin-top: 15px; color: #475569; font-size: 14px; font-weight: 600; } /* --- SECTION DIVIDER --- */ #loginModal .modal-section-divider { display: flex; align-items: center; text-align: center; margin: 20px 0 14px; color: #94a3b8; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } #loginModal .modal-section-divider::before, #loginModal .modal-section-divider::after { content: ""; flex: 1; border-bottom: 1px solid #e2e8f0; } #loginModal .modal-section-divider span { padding: 0 12px; } /* --- UTILITIES BOX (#mobile-language-container) --- */ #mobile-language-container { display: flex !important; flex-direction: column; gap: 12px; margin-top: 0; padding-top: 0; border-top: none; } /* Language Site Dropdown Card */ #mobile-language-container .language-site { width: 100%; } #mobile-language-container .lang-dropdown-wrapper { position: relative; display: flex; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 0 12px; height: 40px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); max-width: 100%; margin: 0; box-sizing: border-box; } #mobile-language-container .lang-dropdown-wrapper:hover { background: #ffffff; border-color: #0f75bd; box-shadow: 0 2px 8px rgba(15, 117, 189, 0.08); } #mobile-language-container .lang-dropdown-wrapper:focus-within { border-color: #0f75bd; box-shadow: 0 0 0 3px rgba(15, 117, 189, 0.12); background: #ffffff; } #mobile-language-container .lang-icon { display: inline-flex; align-items: center; color: #0f75bd; margin-right: 10px; flex-shrink: 0; } #mobile-language-container .lang-icon svg { width: 17px; height: 17px; stroke-width: 2; } #mobile-language-container .lang-dropdown-wrapper select { appearance: none; -webkit-appearance: none; background: transparent; border: none; padding: 0 24px 0 0; font-size: 13.5px; font-weight: 600; cursor: pointer; color: #1e293b; width: 100%; height: 100%; line-height: 40px; } #mobile-language-container .lang-dropdown-wrapper select:focus { outline: none; box-shadow: none; } #mobile-language-container .lang-chevron { position: absolute; right: 12px; pointer-events: none; display: inline-flex; align-items: center; color: #64748b; transition: transform 0.2s ease; } #mobile-language-container .lang-dropdown-wrapper:hover .lang-chevron { color: #0f75bd; } /* Quick Action Tool Buttons Row */ #mobile-language-container .modal-utility-buttons-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } /* Unified Tool Button Style */ #mobile-language-container .modal-tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; outline: none; text-decoration: none; position: relative; line-height: 1; box-sizing: border-box; } #mobile-language-container .modal-tool-btn:hover { transform: translateY(-2px); background: #ffffff; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); } /* Specific Button Accents */ /* 1. Donate */ #mobile-language-container .donate { display: inline-flex; } #mobile-language-container .donate .modal-tool-btn:hover { border-color: #f59e0b; background: #fffbeb; } #mobile-language-container .donate .donate-icon { font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; animation: wiggle 2.5s infinite ease-in-out; } /* 2. Dark/Light Mode */ #mobile-language-container .abc-dark-mode-toggle { color: #475569; } #mobile-language-container .abc-dark-mode-toggle:hover { border-color: #38bdf8; background: #f0f9ff; } #mobile-language-container .abc-dark-mode-toggle svg { width: 19px; height: 19px; fill: none; stroke: #475569; stroke-width: 2; stroke-linecap: round; stroke-linejoin="round"; transition: all 0.25s ease; } #mobile-language-container .abc-dark-mode-toggle:hover svg { stroke: #0284c7; } /* 3. Seasonal */ #mobile-language-container .abc-seasonal-toggle { position: relative; } #mobile-language-container .abc-seasonal-toggle:hover { border-color: #10b981; background: #ecfdf5; } #mobile-language-container .abc-seasonal-toggle .seasonal-icon { font-size: 18px; line-height: 1; transition: all 0.2s ease; } #mobile-language-container .abc-seasonal-toggle .seasonal-off-mark { position: absolute; width: 20px; height: 20px; color: #ef4444; opacity: 0; transform: scale(0.5); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #mobile-language-container .abc-seasonal-toggle.is-off .seasonal-icon { opacity: 0.55; filter: grayscale(100%); } #mobile-language-container .abc-seasonal-toggle.is-off .seasonal-off-mark { opacity: 1; transform: scale(1); } /* 4. Entertainment Station */ #mobile-language-container .abc-tram-giai-tri-toggle:hover { border-color: #8b5cf6; background: #f5f3ff; } #mobile-language-container .abc-tram-giai-tri-toggle svg { width: 19px; height: 19px; fill: #475569; transition: all 0.25s ease; } #mobile-language-container .abc-tram-giai-tri-toggle:hover svg { fill: #7c3aed; } /* --- DARK MODE OVERRIDES --- */ body.dark-mode #loginModal.show { background-color: rgba(0, 0, 0, 0.75); } body.dark-mode #loginModal .box-content-modal { background-color: #1e293b; border-color: #334155; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); } body.dark-mode #loginModal .close.login-close { background: var(--dm-bg); color: #94a3b8; border-color: #475569; } body.dark-mode #loginModal .close.login-close:hover { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; } body.dark-mode #loginModal .login-modal-title { color: #f8fafc; } body.dark-mode #loginModal .login-subtext { color: #94a3b8; } body.dark-mode #loginModal .login-security-note { background: #0f172a; border-color: #334155; color: #94a3b8; } body.dark-mode #loginModal .login-user-profile-card { background: var(--dm-bg); border-color: #334155; } body.dark-mode #loginModal .login-avatar-badge { background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(2, 132, 199, 0.3) 100%); color: #38bdf8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.dark-mode #loginModal .login-username-val { color: #f8fafc; } body.dark-mode #loginModal .login-user-credits { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.25) 100%); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; } body.dark-mode #loginModal #btn-logout-modal { background: var(--dm-bg); border-color: rgba(239, 68, 68, 0.3); color: #f87171; } body.dark-mode #loginModal #btn-logout-modal:hover { background: #ef4444; border-color: #ef4444; color: #ffffff; } body.dark-mode #loginModal .login-spinner { border-color: #334155; border-top-color: #38bdf8; } body.dark-mode #loginModal #login-loading-text { color: #cbd5e1; } body.dark-mode #loginModal .modal-section-divider { color: #64748b; } body.dark-mode #loginModal .modal-section-divider::before, body.dark-mode #loginModal .modal-section-divider::after { border-bottom-color: #334155; } /* Dark mode utilities */ body.dark-mode #mobile-language-container .lang-dropdown-wrapper { background: var(--dm-bg); border-color: #334155; } body.dark-mode #mobile-language-container .lang-dropdown-wrapper:hover, body.dark-mode #mobile-language-container .lang-dropdown-wrapper:focus-within { background: #1e293b; border-color: #38bdf8; } body.dark-mode #mobile-language-container .lang-icon { color: #38bdf8; } body.dark-mode #mobile-language-container .lang-dropdown-wrapper select { color: #f8fafc; } body.dark-mode #mobile-language-container .lang-dropdown-wrapper select option { background-color: #0f172a; color: #f8fafc; } body.dark-mode #mobile-language-container .lang-chevron { color: #94a3b8; } body.dark-mode #mobile-language-container .modal-tool-btn { background: var(--dm-bg); border-color: #334155; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } body.dark-mode #mobile-language-container .modal-tool-btn:hover { background: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } body.dark-mode #mobile-language-container .donate .modal-tool-btn:hover { border-color: #f59e0b; background: rgba(245, 158, 11, 0.15); } body.dark-mode #mobile-language-container .abc-dark-mode-toggle:hover { border-color: #fbbf24; background: rgba(251, 191, 36, 0.15); } body.dark-mode #mobile-language-container .abc-dark-mode-toggle svg { stroke: #fbbf24; } body.dark-mode #mobile-language-container .abc-seasonal-toggle:hover { border-color: #34d399; background: rgba(52, 211, 153, 0.15); } body.dark-mode #mobile-language-container .abc-tram-giai-tri-toggle svg { fill: #a78bfa; } body.dark-mode #mobile-language-container .abc-tram-giai-tri-toggle:hover { border-color: #a78bfa; background: rgba(167, 139, 250, 0.15); } /* Styles cho nút login trên header */ .nav-login { display: inline-flex; align-items: center; } .btn-login-custom { display: flex; align-items: center; gap: 4px; color: #333; font-weight: 600; text-decoration: none; } .login-icon { display: flex; align-items: center; transition: color 0.2s ease; } .login-text { font-size: 14px; } .header-utilities a:hover .login-icon { color: #0f75bd !important; } /* Ẩn text trên desktop để header gọn hơn */ .header-utilities .login-text { display: none; } </style>  <div id="loginModal" class="modal"> <div class="modal-content"> <span class="close login-close" title="Đóng" aria-label="Đóng" role="button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </span> <div class="box-content-modal login-modal-content-inner"> <div class="box-content"> <div class="login-modal-title" id="login-modal-title">Đăng nhập hệ thống</div>  <div id="login-state-loading" style="display: none;"> <div class="login-spinner-container"> <div class="login-spinner"></div> <p id="login-loading-text">Đang xử lý, vui lòng đợi...</p> </div> </div>  <div id="login-state-logged-out" style=""> <p class="login-subtext">Đăng nhập bằng Google để đồng bộ tiện ích & lưu trữ dữ liệu cá nhân.</p> <div class="login-flex-center">  <div id="g_id_onload" data-client_id="1030196986476-2765bn7r654dtl2v4gjalj9q8fbnpc8m.apps.googleusercontent.com" data-context="signin" data-ux_mode="popup" data-callback="handleGoogleLogin" data-auto_prompt="false"> </div> <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin_with" data-size="large" data-logo_alignment="left"> </div> </div> <div class="login-security-note"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect> <path d="M7 11V7a5 5 0 0 1 10 0v4"></path> </svg> <span>Xác thực an toàn & bảo mật qua Google</span> </div> </div>  <div id="login-state-logged-in" style="display: none;"> <div class="login-user-profile-card login-user-greeting"> <div class="login-avatar-badge"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <div class="login-user-info"> <div class="login-user-status"> <span class="status-indicator"></span> <span>Đang đăng nhập</span> </div> <div class="login-username-val" id="login-username-span">Đăng nhập</div> </div> </div> <div class="login-logout-container"> <button id="btn-logout-modal" type="button"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> <polyline points="16 17 21 12 16 7"></polyline> <line x1="21" y1="12" x2="9" y2="12"></line> </svg> <span>Đăng xuất</span> </button> </div> </div>  <div class="modal-section-divider"> <span>Cài đặt & Tiện ích</span> </div>  <div id="mobile-language-container" class="modal-utilities-box">  <div class="modal-utility-lang-wrapper"> <div class="language-site"> <div class="lang-dropdown-wrapper"> <span class="lang-icon" aria-hidden="true"> <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="2" y1="12" x2="22" y2="12"></line> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> </svg> </span> <select id="customTranslateSelect" class="notranslate" aria-label="Chọn ngôn ngữ"> <option value="vi" selected>Tiếng Việt</option> <option value="en">English</option> <option value="ja">日本語</option> </select> <span class="lang-chevron" aria-hidden="true"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </span> </div> <div id="google_translate_element" style="display:none;"></div> </div> </div>  <div class="modal-utility-buttons-row">  <div class="donate"> <a class="btn-modal modal-tool-btn" data-target="donateModal" role="button" href="javascript:void(0)" aria-label="Ủng hộ website" title="Ủng hộ website"> <span class="donate-icon">🎁</span> </a> </div>  <button id="abc-dark-mode-toggle" class="abc-dark-mode-toggle modal-tool-btn" type="button" aria-label="Chuyển chế độ Sáng/Tối" title="Chuyển chế độ Sáng/Tối"> <svg class="icon-moon" viewBox="0 0 24 24"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> <svg class="icon-sun" viewBox="0 0 24 24" style="display: none;"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> </button>  <a id="mobile-tram-giai-tri-btn" href="https://abcwebsite.com.vn/tram-giai-tri/" title="Trạm giải trí" class="abc-tram-giai-tri-toggle modal-tool-btn" aria-label="Trạm giải trí"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" style="vertical-align:-0.25em"><path d="M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2z"/><path fill-rule="evenodd" d="M9 3v10H8V3h1z"/><path d="M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5V2.82z"/></svg> </a> </div> </div> </div> </div> </div> </div>  <script src="https://accounts.google.com/gsi/client" async defer></script> <script> document.addEventListener("DOMContentLoaded", function () { // Hàm helper đọc Cookie function getCookie(name) { var value = "; " + document.cookie; var parts = value.split("; " + name + "="); if (parts.length === 2) return decodeURIComponent(parts.pop().split(";").shift()); return null; } // Đọc trạng thái đăng nhập từ cookie phụ var hasLoginCookie = getCookie('abc_logged_in') === '1'; var cachedUserDisplay = getCookie('abc_user_display') || 'Tài khoản'; // Cập nhật nhanh text nút Tài khoản nếu có Cookie if (hasLoginCookie) { document.querySelectorAll('.nav-login .login-text').forEach(function (el) { el.textContent = cachedUserDisplay; }); } // 2. Cập nhật nhanh trạng thái Modal dựa trên Cookie var loginModal = document.getElementById('loginModal'); var loggedOutDiv = document.getElementById('login-state-logged-out'); var loggedInDiv = document.getElementById('login-state-logged-in'); var usernameSpan = document.getElementById('login-username-span'); var modalTitleEl = document.getElementById('login-modal-title'); if (hasLoginCookie) { if (loggedOutDiv) loggedOutDiv.style.display = 'none'; if (loggedInDiv) loggedInDiv.style.display = 'block'; if (usernameSpan) usernameSpan.textContent = cachedUserDisplay; if (modalTitleEl) modalTitleEl.textContent = 'Tài khoản'; } else { if (loggedOutDiv) loggedOutDiv.style.display = 'block'; if (loggedInDiv) loggedInDiv.style.display = 'none'; if (modalTitleEl) modalTitleEl.textContent = 'Đăng nhập hệ thống'; } // 3. Gọi REST API kiểm tra phiên thực tế & lấy Credits (Không dùng Nonce REST) fetch('/wp-json/abc/v1/user-state') .then(res => res.json()) .then(data => { if (data && data.logged_in) { // Đồng bộ lại giao diện nếu có thay đổi từ máy chủ if (loggedOutDiv) loggedOutDiv.style.display = 'none'; if (loggedInDiv) loggedInDiv.style.display = 'block'; if (usernameSpan) usernameSpan.textContent = data.user_display; if (modalTitleEl) modalTitleEl.textContent = 'Tài khoản'; document.querySelectorAll('.nav-login .login-text').forEach(function (el) { el.textContent = data.user_display; }); // Tự động hiển thị Credits nếu là Subscriber if (data.is_subscriber) { var greeting = loggedInDiv.querySelector('.login-user-greeting'); var creditsWrapper = document.getElementById('login-user-credits-wrapper'); if (greeting && !creditsWrapper) { var creditsDiv = document.createElement('div'); creditsDiv.className = 'login-user-credits'; creditsDiv.id = 'login-user-credits-wrapper'; creditsDiv.innerHTML = ` <img draggable="false" role="img" class="emoji abc-coin-icon" alt="🪙" src="https://s.w.org/images/core/emoji/17.0.2/svg/1fa99.svg" /> <span>Credits: <span id="login-user-credits-val">${data.credits}</span></span> `; greeting.parentNode.insertBefore(creditsDiv, greeting.nextSibling); } else if (document.getElementById('login-user-credits-val')) { document.getElementById('login-user-credits-val').textContent = data.credits; } } } else { // Nếu session server đã hết hạn nhưng cookie vẫn còn, chuyển về trạng thái logout if (loggedOutDiv) loggedOutDiv.style.display = 'block'; if (loggedInDiv) loggedInDiv.style.display = 'none'; if (modalTitleEl) modalTitleEl.textContent = 'Đăng nhập hệ thống'; document.querySelectorAll('.nav-login .login-text').forEach(function (el) { el.textContent = 'Tài khoản'; }); var creditsWrapper = document.getElementById('login-user-credits-wrapper'); if (creditsWrapper) creditsWrapper.remove(); } }) .catch(err => console.error("Error loading user state:", err)); // Đóng Modal var closeBtn = loginModal ? loginModal.querySelector('.login-close') : null; if (closeBtn) { closeBtn.addEventListener('click', function () { if (typeof window.closeModal === 'function') { window.closeModal(loginModal); } else { loginModal.style.display = 'none'; document.body.classList.remove("body-no-scroll"); } }); } // 4. Logic Đăng xuất var btnLogout = document.getElementById('btn-logout-modal'); if (btnLogout) { btnLogout.addEventListener('click', function (e) { e.preventDefault(); if (window.abcModal) { abcModal.confirm('Bạn có muốn đăng xuất không?', async function () { var loadingText = document.getElementById('login-loading-text'); if (loadingText) loadingText.textContent = 'Đang đăng xuất...'; var modalTitleEl = document.getElementById('login-modal-title'); if (modalTitleEl) modalTitleEl.textContent = 'Đang xử lý...'; var loading = document.getElementById('login-state-loading'); var loggedOut = document.getElementById('login-state-logged-out'); var loggedIn = document.getElementById('login-state-logged-in'); if (loading) loading.style.display = 'block'; if (loggedOut) loggedOut.style.display = 'none'; if (loggedIn) loggedIn.style.display = 'none'; try { var res = await fetch('/wp-json/abc/v1/google-logout', { method: 'POST' }); var data = await res.json(); if (data.success) { document.querySelectorAll('.nav-login .login-text').forEach(function (el) { el.textContent = 'Tài khoản'; }); if (modalTitleEl) modalTitleEl.textContent = 'Đăng nhập hệ thống'; if (loading) loading.style.display = 'none'; if (loggedOut) loggedOut.style.display = 'block'; abcModal.alert('Đăng xuất thành công! Đang tải lại trang...', 'success'); abcModal.confirmCallback = function() { window.location.reload(); }; // Tải lại trang sau 1.5s setTimeout(function() { window.location.reload(); }, 1500); } else { if (modalTitleEl) modalTitleEl.textContent = 'Tài khoản'; if (loading) loading.style.display = 'none'; if (loggedIn) loggedIn.style.display = 'block'; abcModal.alert('Đăng xuất thất bại: ' + (data.message || 'Lỗi không xác định'), 'error'); } } catch (error) { console.error('Error:', error); if (modalTitleEl) modalTitleEl.textContent = 'Tài khoản'; if (loading) loading.style.display = 'none'; if (loggedIn) loggedIn.style.display = 'block'; abcModal.alert('Có lỗi xảy ra trong quá trình kết nối.', 'error'); } }); } else { if (confirm('Bạn có muốn đăng xuất không?')) { try { fetch('/wp-json/abc/v1/google-logout', { method: 'POST' }).then(res => res.json()).then(data => { if (data.success) { window.location.reload(); } else { alert('Đăng xuất thất bại: ' + (data.message || 'Lỗi không xác định')); } }).catch(error => { console.error('Error:', error); alert('Có lỗi xảy ra trong quá trình kết nối.'); }); } catch (error) { console.error('Error:', error); alert('Có lỗi xảy ra trong quá trình kết nối.'); } } } }); } }); // 4. Xử lý Callback Google Login trả về async function handleGoogleLogin(response) { if (response.credential) { var loadingText = document.getElementById('login-loading-text'); if (loadingText) loadingText.textContent = 'Đang đăng nhập bằng Google...'; var modalTitleEl = document.getElementById('login-modal-title'); if (modalTitleEl) modalTitleEl.textContent = 'Đang xử lý...'; var loading = document.getElementById('login-state-loading'); var loggedOut = document.getElementById('login-state-logged-out'); var loggedIn = document.getElementById('login-state-logged-in'); if (loading) loading.style.display = 'block'; if (loggedOut) loggedOut.style.display = 'none'; if (loggedIn) loggedIn.style.display = 'none'; var formData = new FormData(); formData.append('credential', response.credential); formData.append('current_page', window.location.href); formData.append('screen_width', screen.width); formData.append('screen_height', screen.height); try { var res = await fetch('/wp-json/abc/v1/google-login', { method: 'POST', body: formData }); var data = await res.json(); if (data.success) { var userDisplay = data.user_display || 'Tài khoản'; var usernameSpan = document.getElementById('login-username-span'); if (usernameSpan) { usernameSpan.textContent = userDisplay; } if (modalTitleEl) modalTitleEl.textContent = 'Tài khoản'; if (loading) loading.style.display = 'none'; if (loggedIn) loggedIn.style.display = 'block'; if (window.abcModal) { abcModal.alert('Đăng nhập thành công! Hệ thống đang làm mới trang...', 'success'); abcModal.confirmCallback = function() { window.location.reload(); }; // Tải lại trang sau 1.5s setTimeout(function() { window.location.reload(); }, 1500); } else { alert('Đăng nhập thành công!'); window.location.reload(); } } else { if (modalTitleEl) modalTitleEl.textContent = 'Đăng nhập hệ thống'; if (loading) loading.style.display = 'none'; if (loggedOut) loggedOut.style.display = 'block'; if (window.abcModal) { abcModal.alert('Đăng nhập thất bại: ' + (data.message || 'Vui lòng thử lại.'), 'error'); } else { alert('Đăng nhập thất bại: ' + (data.message || 'Vui lòng thử lại.')); } } } catch (error) { console.error('Error:', error); if (modalTitleEl) modalTitleEl.textContent = 'Đăng nhập hệ thống'; if (loading) loading.style.display = 'none'; if (loggedOut) loggedOut.style.display = 'block'; if (window.abcModal) { abcModal.alert('Có lỗi xảy ra trong quá trình kết nối.', 'error'); } else { alert('Có lỗi xảy ra trong quá trình kết nối.'); } } } } </script>  <div id="donateModal" class="modal"> <div class="modal-content donate-modal-content"> <span class="close">×</span> <div class="box-content-modal donate-modal-body"> <div class="box-content"> <div class="donate-modal-title">🎁 Ủng hộ website 🎁</div>  <div class="desktop-donate-view"> <div class="qr-wrapper">  <div class="qr-item"> <p class="qr-label">Quét mã Vietcombank</p> <img src="https://abcwebsite.com.vn/wp-content/uploads/2025/11/qr-vcb-tln.jpg" alt="QR VCB" class="qr-image"> </div> </div> <p class="donate-footer-text">Cảm ơn bạn đã luôn đồng hành và ủng hộ ABCwebsite!</p> </div>  <div class="mobile-donate-view"> <div class="mobile-btn-wrapper">  <a href="https://dl.vietqr.io/pay?app=vcb&ba=0381000551561&bn=NGUYEN%20THE%20LOC&tn=%E1%BB%A7ng%20h%E1%BB%99%20website" target="_blank" class="donate-btn-mobile btn-vcb" data-copy="0381000551561" data-type="Vietcombank"> Mở ứng dụng Ngân hàng (VCB) </a> </div> <p class="donate-footer-text">Bấm vào nút trên để mở ứng dụng thanh toán</p> </div> </div> </div> </div> </div> <style> /* Modal Structure */ .donate-modal-content { max-width: 600px; border-radius: 20px; } .donate-modal-body { padding: 20px; } .donate-modal-title { text-align: center; margin-bottom: 20px; font-size: 20px; line-height: 30px !important; color: #000; font-weight: normal; } body.dark-mode .donate-modal-title { color: var(--dm-text) !important; } /* Desktop View Styles */ .qr-wrapper { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .qr-item { text-align: center; flex: 1; min-width: 200px; } .qr-label { font-weight: 600; margin-bottom: 10px; } .qr-image { width: 100%; max-width: 240px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid #eee; } .donate-footer-text { text-align: center; margin-top: 20px; color: #666; font-size: 13px; } /* Mobile View Styles */ .mobile-btn-wrapper { display: flex; flex-direction: column; gap: 15px; } .donate-btn-mobile { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: #fff; border-radius: 14px; text-decoration: none; font-weight: 600; font-size: 15px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .donate-btn-mobile:active { transform: scale(0.98); } .btn-momo { background: #ae2070; box-shadow: 0 4px 10px rgba(174, 32, 112, 0.3); } .btn-vcb { background: #006838; box-shadow: 0 4px 10px rgba(0, 104, 56, 0.3); } /* View Toggling */ .mobile-donate-view { display: none; } .desktop-donate-view { display: block; } .donate-text{ } @media (max-width: 768px) { .mobile-donate-view { display: block; } .desktop-donate-view { display: none; } .donate-modal-content { max-width: 90%; margin: 20px auto; } } /* Keyframes for donate icon wiggle */ @keyframes wiggle { 0% { transform: rotate(0deg); } 10% { transform: rotate(-10deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } /* Donate Button inside #mobile-language-container */ #mobile-language-container .donate { display: inline-flex; align-items: center; justify-content: center; } #mobile-language-container .donate a { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; outline: none; text-decoration: none; position: relative; z-index: 10; line-height: 1; } #mobile-language-container .donate a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } #mobile-language-container .donate .donate-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; animation: wiggle 2s infinite ease-in-out; } /* Dark mode support */ body.dark-mode #mobile-language-container .donate a { background: var(--dm-bg); border-color: #334155; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } @media (max-width: 1200px) { .mobile-donate-view { display: block; } .desktop-donate-view { display: none; } } @media (max-width: 768px) { .donate-modal-content { max-width: 90%; margin: 20px auto; } } </style> <script> document.addEventListener('DOMContentLoaded', function () { // Xử lý Copy & Thông báo khi bấm nút Donate trên Mobile const copyButtons = document.querySelectorAll('.donate-btn-mobile[data-copy]'); copyButtons.forEach(btn => { btn.addEventListener('click', function (e) { e.preventDefault(); const copyText = this.getAttribute('data-copy'); const type = this.getAttribute('data-type'); const url = this.getAttribute('href'); // Copy vào clipboard navigator.clipboard.writeText(copyText).then(() => { // Hiện thông báo xác nhận const isConfirmed = confirm('✅ Đã sao chép số ' + (type === 'Momo' ? 'điện thoại' : 'tài khoản') + ' ' + type + ': ' + copyText + '\n\nBấm OK để mở ứng dụng hoặc Cancel để hủy.'); // Mở link nếu user bấm OK if (isConfirmed) { window.open(url, '_blank'); } }).catch(err => { console.error('Lỗi copy:', err); window.open(url, '_blank'); }); }); }); }); </script> <style> .abc-tram-giai-tri-toggle { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; outline: none; position: relative; z-index: 10; text-decoration: none; } .abc-tram-giai-tri-toggle:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background: #ffffff; } .abc-tram-giai-tri-toggle svg { width: 18px; height: 18px; fill: #475569; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body.dark-mode .abc-tram-giai-tri-toggle { background: var(--dm-bg); border-color: var(--dm-border); } body.dark-mode .abc-tram-giai-tri-toggle svg { fill: #2563eb; } @media (max-width: 768px) { } </style> <style> .nav-search .btn-modal { display: flex; align-items: center; gap: 4px; color: #333; font-weight: 600; text-decoration: none; } .nav-search .search-icon { display: flex; align-items: center; transition: color 0.2s ease; } .nav-search:hover .search-icon { color: #0f75bd; } .nav-search .search-text { font-size: 14px; } /* Desktop specific */ .header-utilities .nav-search .search-text { display: none; } /* Mobile specific */ @media (max-width: 1200px) { .header-utilities .nav-search .search-text { display: block; font-size: 11px !important; font-weight: 500 !important; } } /* =================================================== CSS CÁC THÀNH PHẦN BÊN TRONG KHUNG MODAL SEARCH (Giữ nguyên hiển thị, vị trí và hiệu ứng mặc định của modal) =================================================== */ #searchModal .box-content-modal { background: #ffffff; padding: 25px; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); position: relative; overflow: hidden; } /* Nút Close */ #searchModal .close { position: absolute; top: 18px; right: 20px; width: 25px; height: 25px; border-radius: 50%; background-color: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #e2e8f0; transition: all 0.2s ease; z-index: 10; text-decoration: none; padding: 0; } body.dark-mode #searchModal .close{ background: var(--dm-bg); color: #94a3b8; border-color: #475569; } body.dark-mode #searchModal .close:hover { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; } #searchModal .close svg { width: 16px; height: 16px; display: block; pointer-events: none; } #searchModal .close:hover { background-color: #fee2e2; color: #ef4444; border-color: #fecaca; transform: scale(1.08) rotate(90deg); } /* Header bên trong modal */ #searchModal .search-modal-header { margin-bottom: 18px; } #searchModal .search-modal-header-text { text-align: center; } #searchModal .search-modal-title { margin: 0 0 3px 0; font-size: 18px; font-weight: 700; color: #0f172a; line-height: 30px !important; } body.dark-mode #searchModal .search-modal-title { color: var(--dm-text) !important; } /* Khung Search Form */ #searchModal .box-content { margin-bottom: 16px; } #searchModal .search-form { display: flex; gap: 10px; align-items: stretch; width: 100%; margin: 0; } #searchModal .search-form label { width: 100%; margin-bottom: 0; position: relative; display: block; flex: 1; } /* Biểu tượng kính lúp bên trong ô input */ #searchModal .search-form label::before { content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; transition: opacity 0.2s ease; z-index: 2; } #searchModal .search-form:focus-within label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f75bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); } #searchModal .search-form input[type="search"], #searchModal .search-form input[name="s"], #searchModal .search-form .search-field { width: 100% !important; padding: 10px 14px 10px 44px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; background-color: #f8fafc !important; font-size: 15px !important; color: #1e293b !important; box-shadow: none !important; box-sizing: border-box !important; transition: all 0.25s ease !important; } body.dark-mode #searchModal .search-form input[type="search"], body.dark-mode #searchModal .search-form input[name="s"], body.dark-mode #searchModal .search-form .search-field{ background-color: var(--dm-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } #searchModal .search-form input[type="search"]:focus, #searchModal .search-form input[name="s"]:focus, #searchModal .search-form .search-field:focus { outline: none !important; border-color: #0f75bd !important; background-color: #ffffff !important; box-shadow: 0 0 0 4px rgba(15, 117, 189, 0.14) !important; } #searchModal .search-form input[type="search"]::placeholder, #searchModal .search-form input[name="s"]::placeholder, #searchModal .search-form .search-field::placeholder { color: #94a3b8; font-weight: 400; } /* Nút Submit */ #searchModal .search-form input[type="submit"], #searchModal .search-form button[type="submit"], #searchModal .search-form .search-submit { min-width: 100px; padding: 0 20px; background: linear-gradient(135deg, #0f75bd 0%, #008ccb 100%) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(15, 117, 189, 0.25) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } #searchModal .search-form input[type="submit"]:hover, #searchModal .search-form button[type="submit"]:hover, #searchModal .search-form .search-submit:hover { background: linear-gradient(135deg, #0a5a94 0%, #0f75bd 100%) !important; box-shadow: 0 6px 16px rgba(15, 117, 189, 0.35) !important; transform: translateY(-1px); } #searchModal .search-form input[type="submit"]:active, #searchModal .search-form button[type="submit"]:active, #searchModal .search-form .search-submit:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(15, 117, 189, 0.2) !important; } /* Gợi ý từ khóa tìm kiếm */ #searchModal .search-modal-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid #f1f5f9; } #searchModal .suggestions-label { font-size: 13px; font-weight: 600; color: #64748b; margin-right: 4px; display: inline-flex; align-items: center; gap: 4px; } body.dark-mode #searchModal .suggestions-label{ color: var(--dm-text); } #searchModal .search-tag-chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; color: #475569; background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 5px 12px; border-radius: 20px; cursor: pointer; text-decoration: none; transition: all 0.2s ease; user-select: none; line-height: normal; } body.dark-mode #searchModal .search-tag-chip{ background-color: var(--dm-bg); border-color: var(--dm-border); color: var(--dm-text); } #searchModal .search-tag-chip:hover { color: #0f75bd; background-color: #e0f2fe; border-color: #bae6fd; transform: translateY(-1px); } body.dark-mode #searchModal .search-tag-chip:hover{ color: var(--dm-text); background-color: #0f75bd; border-color: #bae6fd; transform: translateY(-1px); } /* Responsive cho các thành phần bên trong khi màn hình nhỏ */ @media (max-width: 480px) { #searchModal .search-modal-header { margin-bottom: 14px; } #searchModal .search-modal-title { font-size: 16px; } #searchModal .search-form { flex-direction: column; gap: 8px; } #searchModal .search-form input[type="submit"], #searchModal .search-form button[type="submit"], #searchModal .search-form .search-submit { width: 100% !important; height: 44px; } } </style>  <div id="searchModal" class="modal"> <div class="modal-content"> <span class="close" role="button" aria-label="Đóng" title="Đóng"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </span> <div class="box-content-modal"> <div class="search-modal-header"> <div class="search-modal-header-text"> <div class="search-modal-title">Tìm kiếm</div> </div> </div> <div class="box-content"> <form role="search" method="get" class="search-form" action="https://abcwebsite.com.vn/"> <label> <span class="screen-reader-text">Tìm kiếm cho:</span> <input type="search" class="search-field" placeholder="Tìm kiếm …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Tìm kiếm" /> </form> </div> <div class="search-modal-suggestions"> <span class="suggestions-label">Gợi ý:</span> <button type="button" class="search-tag-chip" data-search="Mẫu Website">Mẫu Website</button> <button type="button" class="search-tag-chip" data-search="Trò chơi">Trò chơi</button> <button type="button" class="search-tag-chip" data-search="Công cụ">Công cụ</button> <button type="button" class="search-tag-chip" data-search="SEO">SEO</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function () { // Tự động focus vào ô input khi mở modal tìm kiếm document.addEventListener('click', function (e) { const btn = e.target.closest('.btn-modal[data-target="searchModal"]'); if (btn) { setTimeout(function () { const input = document.querySelector('#searchModal input[type="search"], #searchModal input[name="s"], #searchModal .search-field'); if (input) { input.focus(); input.select(); } }, 180); } }); // Xử lý click vào các thẻ tag gợi ý tìm kiếm document.querySelectorAll('#searchModal .search-tag-chip').forEach(function (chip) { chip.addEventListener('click', function (e) { e.preventDefault(); const kw = this.getAttribute('data-search') || this.textContent.trim(); const form = document.querySelector('#searchModal form.search-form') || document.querySelector('#searchModal form'); const input = document.querySelector('#searchModal input[type="search"], #searchModal input[name="s"], #searchModal .search-field'); if (input) { input.value = kw; if (form) { form.submit(); } } }); }); }); </script> <script id="menu-custom-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/menu.js?ver=1.0.0"></script> <script id="modal-custom-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/modal.js?ver=1.0.0"></script> <script id="form-download-free-js-extra"> var abc_ajax = {"ajax_url":"https://abcwebsite.com.vn/wp-admin/admin-ajax.php","nonce":"10062674af","site_key":"6LeL-QcsAAAAAKLsd0ynvgC2WKUimqGqL2aDuyCp"}; //# sourceURL=form-download-free-js-extra </script> <script id="form-download-free-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/form-download-free.js?ver=1511102291882b809b7414a3fe68125f"></script> <script id="google-recaptcha-js-before"> var livechat_ajax = {"nonce":"10062674af","site_key":"6LeL-QcsAAAAAKLsd0ynvgC2WKUimqGqL2aDuyCp"}; //# sourceURL=google-recaptcha-js-before </script> <script id="google-recaptcha-js" async defer src="https://www.google.com/recaptcha/api.js?render=6LeL-QcsAAAAAKLsd0ynvgC2WKUimqGqL2aDuyCp"></script> <script id="main-custom-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/main.js?ver=1.0.0"></script> <script id="convert-case-custom-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/convert-case.js?ver=1.0.0"></script> <script id="encode-decode-tools-js-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/encode-decode-tools.js?ver=1.0.0"></script> <script id="utm-builder-js-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/utm-builder.js?ver=1.0.0"></script> <script id="generator-tools-js-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/generator-tools.js?ver=1.0.0"></script> <script id="crypto-js-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/crypto-js.min.js?ver=1.0.0"></script> <script id="easy-qrcode-js-js" src="https://abcwebsite.com.vn/wp-content/themes/abcwebsite/js/easy.qrcode.min.js?ver=1.0.0"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://abcwebsite.com.vn/wp-includes/js/wp-emoji-release.min.js?ver=1511102291882b809b7414a3fe68125f"}} </script> <script type="module"> /*! This file is auto-generated */ var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))}); //# sourceURL=https://abcwebsite.com.vn/wp-includes/js/wp-emoji-loader.min.js </script>  <div id="livechat-support-btn" class="livechat-float-btn" title="Liên hệ hỗ trợ"> <span class="livechat-icon livechat-icon-default"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5"/> </svg> </span> <span class="livechat-icon livechat-icon-close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"> <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/> </svg> </span> <span class="livechat-pulse"></span> </div>  <div id="livechat-contact-menu" class="livechat-contact-menu"> <a href="https://m.me/abcwebsite.com.vn/" target="_blank" rel="noopener" class="livechat-contact-item livechat-opt-messenger" title="Chat qua Messenger"> <span class="livechat-contact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#0084FF" viewBox="0 0 16 16"> <path d="M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.6-.107-2.348-.307a.64.64 0 0 0-.427.03l-1.615.734a.64.64 0 0 1-.9-.542l-.03-1.39a.64.64 0 0 0-.21-.46C.842 12.073 0 10.063 0 7.76m5.546-1.459-2.35 3.728c-.225.358.214.761.551.495l2.525-1.995a.48.48 0 0 1 .575-.014l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.495L9.724 7.37a.48.48 0 0 1-.575.014l-1.869-1.402a1.2 1.2 0 0 0-1.735.32z"/> </svg> </span> <span class="livechat-contact-label">Messenger</span> </a>  <div id="livechat-open-form" class="livechat-contact-item livechat-opt-form" title="Gửi form hỗ trợ"> <span class="livechat-contact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#0f75bd" viewBox="0 0 16 16"> <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"/> </svg> </span> <span class="livechat-contact-label">Form hỗ trợ</span> </div> </div>   <div id="livechatModal" class="modal"> <div class="modal-content"> <span class="close" role="button" aria-label="Đóng" title="Đóng"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </span> <div class="box-content-modal"> <div class="box-content"> <div class="livechat-form-wrapper"> <div class="livechat-form-header"> <div class="livechat-form-header-text"> <div class="livechat-form-title">Yêu cầu hỗ trợ</div> </div> </div> <form id="livechat-support-form" method="post"> <div class="livechat-field"> <label for="livechat-email">Email <span class="required">*</span></label> <div class="livechat-input-wrapper"> <svg class="livechat-input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect width="20" height="16" x="2" y="4" rx="2"></rect> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path> </svg> <input type="email" id="livechat-email" name="support_email" required autocomplete="email" placeholder="Nhập email của bạn (ví dụ: contact@gmail.com)"> </div> </div> <div class="livechat-field"> <label for="livechat-phone">Số điện thoại (Zalo)</label> <div class="livechat-input-wrapper"> <svg class="livechat-input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path> </svg> <input type="tel" id="livechat-phone" name="support_phone" autocomplete="tel" placeholder="Nhập số điện thoại (không bắt buộc)"> </div> </div> <div class="livechat-field"> <label for="livechat-message">Nội dung yêu cầu <span class="required">*</span></label> <textarea id="livechat-message" name="support_message" rows="4" required maxlength="1000" placeholder="Mô tả chi tiết vấn đề hoặc yêu cầu bạn cần hỗ trợ..."></textarea> </div>  <div class="livechat-field livechat-consent-field"> <label class="livechat-consent-label" for="livechat-consent"> <input type="checkbox" id="livechat-consent" name="support_consent" value="1" required class="livechat-consent-checkbox"> <span class="livechat-consent-text"> Tôi đồng ý cho phép website thu thập & xử lý thông tin cá nhân (Email, SĐT, IP) để giải quyết yêu cầu hỗ trợ theo <a href="https://abcwebsite.com.vn/chinh-sach-bao-mat/" target="_blank" rel="noopener noreferrer">Chính sách bảo mật</a>. <span class="required">*</span> </span> </label> <div class="livechat-privacy-notice"> <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> <span>Cam kết bảo mật dữ liệu theo Nghị định 13/2023/NĐ-CP & không chia sẻ cho bên thứ ba.</span> </div> </div>  <input type="text" name="support_hp" style="display:none;" tabindex="-1" autocomplete="off"> <button id="btn-livechat-submit" type="submit"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"> <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z" /> </svg> <span>Gửi yêu cầu</span> </button> </form> </div> </div> </div> </div> </div>  <div id="mobileSupportModal" class="modal"> <div class="modal-content support-modal-content"> <span class="close" role="button" aria-label="Đóng" title="Đóng"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </span> <div class="box-content-modal support-modal-body"> <div class="box-content"> <div class="support-modal-title">Hỗ trợ</div> <div class="support-channel-list"> <a href="https://www.facebook.com/abcwebsite.com.vn/" target="_blank" rel="noopener" class="support-channel-item channel-messenger"> <span class="channel-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16"> <path d="M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.6-.107-2.348-.307a.64.64 0 0 0-.427.03l-1.615.734a.64.64 0 0 1-.9-.542l-.03-1.39a.64.64 0 0 0-.21-.46C.842 12.073 0 10.063 0 7.76m5.546-1.459-2.35 3.728c-.225.358.214.761.551.495l2.525-1.995a.48.48 0 0 1 .575-.014l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.495L9.724 7.37a.48.48 0 0 1-.575.014l-1.869-1.402a1.2 1.2 0 0 0-1.735.32z" /> </svg> </span> Messenger </a>  <a href="javascript:void(0)" class="btn-modal support-channel-item channel-form" data-target="livechatModal"> <span class="channel-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16"> <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z" /> </svg> </span> Gửi Form hỗ trợ </a> </div> </div> </div> </div> </div>  <script> document.addEventListener("DOMContentLoaded", function () { // ---- Toggle contact menu khi click floating button ---- var livechatBtn = document.getElementById("livechat-support-btn"); var contactMenu = document.getElementById("livechat-contact-menu"); if (livechatBtn && contactMenu) { livechatBtn.addEventListener("click", function (e) { e.stopPropagation(); contactMenu.classList.toggle("active"); livechatBtn.classList.toggle("active"); }); // Click "Form hỗ trợ" → đóng menu, mở modal var openFormBtn = document.getElementById("livechat-open-form"); if (openFormBtn) { openFormBtn.addEventListener("click", function () { contactMenu.classList.remove("active"); livechatBtn.classList.remove("active"); var modal = document.getElementById("livechatModal"); if (modal) { modal.style.display = "flex"; document.body.classList.add("body-no-scroll"); requestAnimationFrame(function () { requestAnimationFrame(function () { modal.classList.add("show"); }); }); } }); } // Click bên ngoài → đóng menu document.addEventListener("click", function (e) { if (!contactMenu.contains(e.target) && !livechatBtn.contains(e.target)) { contactMenu.classList.remove("active"); livechatBtn.classList.remove("active"); } }); } // ---- Form submit ---- var form = document.getElementById("livechat-support-form"); if (!form) return; var submitBtn = document.getElementById("btn-livechat-submit"); var originalBtnHTML = submitBtn.innerHTML; form.addEventListener("submit", async function (e) { e.preventDefault(); // Frontend validation var email = form.querySelector('[name="support_email"]').value.trim(); var message = form.querySelector('[name="support_message"]').value.trim(); if (!email || !message) { abcModal.alert("Vui lòng điền đầy đủ Email và Nội dung.", "error"); return; } // Email format validation var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { abcModal.alert("Email không đúng định dạng.", "error"); return; } // Consent validation (Nghị định 13/2023/NĐ-CP) var consentCheckbox = form.querySelector('[name="support_consent"]'); if (consentCheckbox && !consentCheckbox.checked) { abcModal.alert("Vui lòng đồng ý với Chính sách bảo mật và điều khoản xử lý dữ liệu trước khi gửi yêu cầu.", "error"); return; } // Disable button submitBtn.disabled = true; submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right:6px;vertical-align:middle;animation:spin 1s linear infinite;"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/></svg> Đang gửi...'; try { // Lấy token reCAPTCHA (dùng chung site_key đã có) var token = ""; if (typeof grecaptcha !== "undefined" && typeof livechat_ajax !== "undefined" && livechat_ajax.site_key) { token = await grecaptcha.execute(livechat_ajax.site_key, {action: "livechat_support"}); } var formData = new FormData(form); formData.append("g-recaptcha-response", token); formData.append("page_url", window.location.href); var response = await fetch("/wp-json/abc/v1/livechat-support", { method: "POST", headers: { "X-WP-Nonce": livechat_ajax.nonce }, body: formData }); var data = await response.json(); if (data.success) { form.reset(); // Đóng modal livechat ngay lập tức var modal = document.getElementById("livechatModal"); if (modal) { modal.classList.remove("show"); document.body.classList.remove("body-no-scroll"); setTimeout(function () { modal.style.display = "none"; }, 300); } abcModal.alert(data.message, "success"); } else { abcModal.alert(data.message, "error"); } } catch (err) { console.error(err); abcModal.alert("Lỗi gửi form, vui lòng thử lại sau.", "error"); } // Bật lại nút submitBtn.disabled = false; submitBtn.innerHTML = originalBtnHTML; }); }); </script>  <style> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* === CONTACT MENU === */ .livechat-contact-menu { position: fixed; bottom: 85px; left: 25px; z-index: 98; display: flex; flex-direction: column; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(15px) scale(0.95); transition: opacity 0.3s ease, transform 0.3s ease; } .livechat-contact-menu.active { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .livechat-contact-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; color: #333; font-size: 14px; font-weight: 600; white-space: nowrap; min-width: 160px; } .livechat-contact-item:hover { transform: translateX(4px); box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1); } .livechat-contact-item:active { transform: translateX(2px) scale(0.98); } /* Brand hover colors */ .livechat-opt-messenger:hover { background: #e7f3ff; } .livechat-opt-zalo:hover { background: #e6f0ff; } .livechat-opt-form:hover { background: #e8f4fc; } .livechat-contact-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; pointer-events: none; } .livechat-contact-label { flex: 1; pointer-events: none; } /* Zalo "Z" icon */ .livechat-zalo-icon { background: #0068FF; color: #fff; font-weight: 800; font-size: 14px; border-radius: 50%; font-family: Arial, sans-serif; } /* Floating button toggle states */ .livechat-icon-close { display: none; } .livechat-float-btn.active .livechat-icon-default { display: none; } .livechat-float-btn.active .livechat-icon-close { display: flex; align-items: center; justify-content: center; } .livechat-float-btn.active .livechat-pulse { display: none; } .livechat-float-btn.active { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #ffffff !important; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4), 0 2px 6px rgba(0,0,0,0.15); } .livechat-float-btn.active:hover { box-shadow: 0 6px 25px rgba(231, 76, 60, 0.5), 0 4px 10px rgba(0,0,0,0.2); } /* Stagger animation for menu items */ .livechat-contact-menu.active .livechat-contact-item:nth-child(1) { animation: lcMenuSlideIn 0.3s ease forwards; animation-delay: 0.05s; } .livechat-contact-menu.active .livechat-contact-item:nth-child(2) { animation: lcMenuSlideIn 0.3s ease forwards; animation-delay: 0.1s; } .livechat-contact-menu.active .livechat-contact-item:nth-child(3) { animation: lcMenuSlideIn 0.3s ease forwards; animation-delay: 0.15s; } @keyframes lcMenuSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } /* Responsive */ @media (max-width: 768px) { .livechat-contact-menu { bottom: 80px; left: 25px; } .livechat-contact-item { padding: 9px 14px; font-size: 13px; min-width: 148px; border-radius: 10px; } } /* === LIVECHAT SUPPORT MODAL & FORM === */ #livechatModal .box-content-modal { background: #ffffff; border-radius: 20px; border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); padding: 28px 24px 24px 24px; margin: 0 15px; position: relative; overflow: hidden; } #livechatModal .box-content-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #0f75bd, #38bdf8, #0ea5e9); } /* Nút đóng modal cho livechatModal & mobileSupportModal */ #livechatModal .close, #mobileSupportModal .close { position: absolute; top: 20px; right: 29px; width: 25px; height: 25px; border-radius: 50%; background-color: #f1f5f9; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #e2e8f0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; text-decoration: none; padding: 0; margin: 0; user-select: none; } body.dark-mode #livechatModal .close, body.dark-mode #mobileSupportModal .close{ background: var(--dm-bg); color: var(--dm-text); border-color: var(--dm-border); } #livechatModal .close:hover, #mobileSupportModal .close:hover{ background-color: #fee2e2; color: #ef4444; border-color: #fecaca; transform: scale(1.08) rotate(90deg); } body.dark-mode #livechatModal .close:hover, body.dark-mode #mobileSupportModal .close:hover{ background: #7f1d1d; color: #fca5a5; border-color: #991b1b; } #livechatModal .close svg, #mobileSupportModal .close svg { width: 16px; height: 16px; display: block; pointer-events: none; } #livechatModal .close:hover, #mobileSupportModal .close:hover { transform: scale(1.08) rotate(90deg); } /* Livechat Form Header */ .livechat-form-wrapper { position: relative; } .livechat-form-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; padding-bottom: 5px; border-bottom: 1px solid #e6e6e6; } body.dark-mode .livechat-form-header{ border-color: var(--dm-border); } .livechat-form-header-text { flex: 1; min-width: 0; } .livechat-form-title { font-size: 18px !important; font-weight: 700 !important; color: #0f172a; margin: 0 0 5px 0 !important; line-height: 30px !important; } body.dark-mode .livechat-form-title { color: var(--dm-text) !important; } /* Livechat Fields */ #livechat-support-form { display: flex; flex-direction: column; gap: 15px; } .livechat-field { display: flex; flex-direction: column; text-align: left; } .livechat-field label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; display: flex; align-items: center; } .livechat-field .required { color: #ef4444; margin-left: 3px; font-weight: 700; } .livechat-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .livechat-input-wrapper .livechat-input-icon { position: absolute; left: 12px; color: #94a3b8; pointer-events: none; transition: color 0.2s ease; flex-shrink: 0; } .livechat-input-wrapper input { padding-left: 38px !important; } .livechat-input-wrapper:focus-within .livechat-input-icon { color: #0f75bd; } .livechat-field input[type="email"], .livechat-field input[type="tel"], .livechat-field textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 13.5px; color: #0f172a; background-color: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; outline: none; transition: all 0.2s ease; font-family: inherit; line-height: 1.5; } .livechat-field input[type="email"]:focus, .livechat-field input[type="tel"]:focus, .livechat-field textarea:focus { background-color: #ffffff; border-color: #0f75bd; box-shadow: 0 0 0 3px rgba(15, 117, 189, 0.12); } .livechat-field input[type="email"]::placeholder, .livechat-field input[type="tel"]::placeholder, .livechat-field textarea::placeholder { color: #94a3b8; font-size: 13px; } .livechat-field textarea { resize: vertical; min-height: 90px; } /* Livechat Consent & Privacy Field (Nghị định 13/2023/NĐ-CP) */ .livechat-consent-field { margin-top: -2px; padding: 10px 12px; background-color: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; transition: border-color 0.2s ease, background-color 0.2s ease; } body.dark-mode .livechat-consent-field{ background-color: var(--dm-bg); } .livechat-consent-label { display: flex !important; align-items: flex-start !important; gap: 8px; cursor: pointer; user-select: none; margin-bottom: 0 !important; } .livechat-consent-checkbox { margin: 3px 0 0 0 !important; width: 16px !important; height: 16px !important; flex-shrink: 0; accent-color: #0f75bd; cursor: pointer; } .livechat-consent-text { font-size: 12.5px; font-weight: 500; color: #475569; line-height: 1.45; } body.dark-mode .livechat-consent-text, body.dark-mode .livechat-privacy-notice{ color: var(--dm-text); } .livechat-consent-text a { color: #0f75bd; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } .livechat-consent-text a:hover { color: #0284c7; } .livechat-privacy-notice { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e2e8f0; font-size: 11.5px; color: #212121; line-height: 1.35; } .livechat-privacy-notice svg { flex-shrink: 0; color: #10b981; } /* Submit Button */ #btn-livechat-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 20px; margin-top: 4px; font-size: 14.5px; font-weight: 600; color: #ffffff; background: linear-gradient(135deg, #0f75bd 0%, #0284c7 100%); border: none; border-radius: 10px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 14px rgba(15, 117, 189, 0.25); outline: none; user-select: none; } #btn-livechat-submit svg { flex-shrink: 0; } #btn-livechat-submit:hover { background: linear-gradient(135deg, #0d65a3 0%, #0369a1 100%); box-shadow: 0 6px 20px rgba(15, 117, 189, 0.35); transform: translateY(-1px); } #btn-livechat-submit:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(15, 117, 189, 0.2); } #btn-livechat-submit:disabled { opacity: 0.75; cursor: not-allowed; transform: none; box-shadow: none; } @media (max-width: 480px) { #livechatModal .box-content-modal { padding: 22px 16px 18px 16px; border-radius: 16px; margin: 0 10px; } #livechatModal .close, #mobileSupportModal .close { top: 10px; right: 16px; } .livechat-form-header { margin-bottom: 16px; } .livechat-form-title { font-size: 16px; } } /* === MOBILE SUPPORT MODAL === */ .support-modal-content { max-width: 380px; border-radius: 20px; } .support-modal-body { padding: 30px; } .support-modal-title { text-align: center; margin-bottom: 20px; font-size: 18px; font-weight: 700; line-height: 30px !important; color: #000; } body.dark-mode .support-modal-title { color: var(--dm-text) !important; } .support-channel-list { display: flex; flex-direction: column; gap: 12px; } .support-channel-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 12px; text-decoration: none; font-weight: 600; transition: transform 0.2s ease; } .support-channel-item:active { transform: scale(0.98); } .channel-icon { display: flex; align-items: center; justify-content: center; width: 24px; } .channel-messenger { background: #0084FF; color: #fff; } .channel-zalo { background: #e6f0ff; color: #0068FF; } .channel-form { background: #17bbbe; color: #fff; } .zalo-icon-circle { height: 24px; background: #0068FF; color: #fff; border-radius: 50%; font-size: 14px; font-weight: 800; } /* --- CSS copied from header.css for Header Support Button --- */ .header-utilities .support-icon { display: flex; transition: color 0.2s ease; } .header-utilities .support-text { font-size: 14px; display: none; } .header-utilities a:hover .support-icon { color: #0f75bd !important; } .mobile-only-utility { display: none; } @media (max-width: 1200px) { .mobile-only-utility { display: block !important; } } </style> <style> /* Custom Language Dropdown */ .lang-dropdown-wrapper { position: relative; display: flex; align-items: center; background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 20px; padding: 0px 5px; transition: all 0.2s ease; } .lang-dropdown-wrapper:hover { border-color: #0f75bd; background: #ffffff; } .lang-dropdown-wrapper select { appearance: none; background: transparent; border: none; padding: 5px 20px 5px 5px; font-size: 14px; font-weight: 600; cursor: pointer; color: #333; width: auto; } .lang-dropdown-wrapper select:focus { outline: none; box-shadow: none; } .lang-dropdown-wrapper::after { content: "▼"; font-size: 10px; position: absolute; right: 10px; pointer-events: none; color: #666; } /* Modal specific styles */ .language-site .lang-dropdown-wrapper { border: 1px solid #ddd; border-radius: 20px; padding: 5px 10px; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto; max-width: 200px; } #hidden-language-site, #google_translate_element { display: none; } .translated-ltr body { top: 0 !important; } .skiptranslate { display: none !important; } </style> <script> (function() { let translateLoaded = false; // 1. Logic Google Translate window.googleTranslateElementInit = function() { new google.translate.TranslateElement({ pageLanguage: 'vi', includedLanguages: 'vi,en,ja' }, 'google_translate_element'); }; function loadTranslateScript(callback) { if (!translateLoaded) { const script = document.createElement("script"); script.id = "googleTranslateScript"; script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; document.body.appendChild(script); script.onload = () => { translateLoaded = true; if (callback) callback(); }; } else if (callback) { callback(); } } // 2. Khởi tạo khi DOM sẵn sàng document.addEventListener('DOMContentLoaded', function() { const select = document.getElementById("customTranslateSelect"); if (select) { // Set giá trị hiện tại từ cookie const cookies = document.cookie.split(';'); const transCookie = cookies.find(c => c.trim().startsWith('googtrans=')); if (transCookie) { const lang = transCookie.split('=')[1].split('/').pop(); if (['vi', 'en', 'ja'].includes(lang)) { select.value = lang; } } select.addEventListener("change", function() { const lang = this.value; if (!lang) return; const domain = window.location.hostname; if (lang === 'vi') { document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + domain; document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=." + domain; location.reload(); return; } const cookieValue = "/vi/" + lang; document.cookie = "googtrans=" + cookieValue + "; path=/;"; document.cookie = "googtrans=" + cookieValue + "; path=/; domain=" + domain; document.cookie = "googtrans=" + cookieValue + "; path=/; domain=." + domain; loadTranslateScript(() => { let attempts = 0; const checkExist = setInterval(() => { const googleSelect = document.querySelector('select.goog-te-combo'); if (googleSelect && googleSelect.options) { const optionExists = Array.from(googleSelect.options).some(opt => opt.value === lang); if (optionExists) { googleSelect.value = lang; googleSelect.dispatchEvent(new Event('change')); clearInterval(checkExist); return; } } if (++attempts > 50) clearInterval(checkExist); }, 100); }); }); } }); })(); </script>  <span id="return-to-top" class="back-to-top" style="display: none;"></span> <style> /* Nâng nút Back to top lên để tránh đè và style đồng dạng với nút donate (Áp dụng Global) */ #return-to-top, .back-to-top { position: fixed; bottom: 85px !important; right: 25px !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; background-color: #ffffff !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; opacity: 0.6 !important; transition: opacity 0.3s ease !important; padding: 0 !important; z-index: 999; cursor: pointer; } /* Chỉ ép kiểu flex khi JS set display block (khi đã cuộn xuống) */ #return-to-top[style*="block"], .back-to-top[style*="block"] { display: flex !important; align-items: center !important; justify-content: center !important; } #return-to-top:hover, .back-to-top:hover { opacity: 1 !important; } #return-to-top::before, .back-to-top::before { content: ''; display: block; width: 10px; height: 10px; border-top: 2px solid #0f75bd; border-right: 2px solid #0f75bd; transform: rotate(-45deg); margin-top: 4px; } @media (max-width: 1200px) { #return-to-top, .back-to-top { display: none !important; /* Ẩn trên mobile vì đã có Bottom Bar */ } } @media (max-width: 768px) { #return-to-top::before, .back-to-top::before { width: 8px; height: 8px; } #return-to-top, .back-to-top { bottom: 70px !important; right: 15px !important; width: 30px !important; height: 30px !important; } } </style> <script> document.addEventListener("DOMContentLoaded", function () { const btn = document.getElementById("return-to-top"); if (btn) { // Hiện / Ẩn nút khi scroll window.addEventListener("scroll", function () { if (window.scrollY > 200) { btn.style.display = "block"; } else { btn.style.display = "none"; } }); // Cuộn lên đầu trang btn.addEventListener("click", function () { window.scrollTo({ top: 0, behavior: "smooth" }); }); } }); </script> </body> </html>