/* =================================================================== MÃ ĐẠI 2026 — lớp áo mới cho trang khách Nạp SAU cùng nên chỉ ĐÈ phần hình thức; KHÔNG sửa HTML, không đụng chức năng. Gỡ ra = xoá đúng 1 dòng trong home.php, giao diện trở lại như cũ. Bảng màu lấy từ chính thương hiệu: xanh #009966 / #00875a, son #c8392b, kim #e8730f. =================================================================== */ :root{ /* XANH CHỦ ĐẠO CỦA MÃ ĐẠI = #009966 (mã màu chủ chốt 30/09/2026). Dùng cho mảng lớn, viền, chữ tiêu đề, biểu tượng — đây là màu nhận diện. #00875a là CHÍNH NÓ đậm thêm một nấc, chỉ dùng khi đặt CHỮ TRẮNG CỠ NHỎ lên nền: chữ trắng trên #009966 đo được 3,6 — dưới ngưỡng đọc rõ 4,5 (chữ nhòe vào nền); chữ trắng trên #00875a đo được 4,5 — đạt, mà mắt vẫn thấy cùng một màu xanh. #00734d dùng cho viền dưới/bóng đổ của nút, tạo độ nổi. */ --md-xanh:#009966; --md-xanh-dam:#00875a; --md-xanh-sau:#00734d; /* NỀN của nút/chip/dải có chữ trắng: dùng ĐÚNG #009966 — chủ chốt 01/10/2026. Chữ trắng trên màu này đo được 3,6 (ngưỡng đọc rõ là 4,5) nên chữ hơi nhòe; đây là lựa chọn của chủ sau khi đã báo số đo. Muốn đọc rõ nhất thì đổi về #00875a. --md-xanh-dam giữ nguyên cho CHỮ xanh đặt trên nền sáng (ở đó nó đạt 4,55). */ --md-nen-nut:#009966; --md-xanh-nhat:#e7f7f0; --md-vien-xanh:#b7e6d3; /* CAM thay cho vàng kim — chủ chốt 01/10/2026: "nên sang màu cam, tôi không hợp màu vàng, và cảm giác AI quá". Đo: nền cam + chữ nâu đen #3a1d00 = 5,08 (đọc rõ); chữ cam đậm #c25608 trên nền trắng = 4,54. KHÔNG đặt chữ TRẮNG lên nền cam (chỉ 3,05). */ --md-son:#c8392b; --md-cam:#e8730f; --md-cam-dam:#c25608; --md-than:#20262b; --md-xam:#6b7280; --md-vien:#e4e8e6; /* Sắc viền lúc đang gõ / đang chọn. Lấy đúng màu hệ đã dùng ở màn đăng nhập (style.css:2973), không chế màu mới. Đổi ở ĐÂY là đổi mọi viền focus toàn site. */ --md-focus:#009266; } /* ============ 1. GÁY ĐẦU — GIỮ NGUYÊN WEB THẬT (chủ chốt 30/09/2026) ============ Đã từng thiết kế lại ở đây (xếp lại logo/nút/hotline, menu tràn ngang, bỏ viền cầu vồng) nhưng ở khổ ~1000px lớp đè này làm menu chồng lên logo, nút rơi vào giữa menu. Chủ yêu cầu gáy đầu phải ra Y NHƯ web thật -> gỡ hết, không đè gì lên header/menu nữa. */ /* ============ 2. TIÊU ĐỀ KHỐI — một kiểu dùng chung cho cả trang ============ */ .search h3.title-main, .policy h2.title-main, .register-step-sec h2.title-main, .news-home h2.title-main, .guide h2.title-main{ text-align:center !important; font-size:25px !important; font-weight:800 !important; color:var(--md-than) !important; margin:0 0 6px !important; background:none !important; border:0 !important; text-transform:none !important; } .search h3.title-main .text{ background:none !important; padding:0 !important; } /* hai nhánh kim tuyến hai bên tiêu đề — nét Mã Đại */ .search h3.title-main:after, .policy h2.title-main:after, .register-step-sec h2.title-main:after, .news-home h2.title-main:after{ content:""; display:block; width:110px; height:2px; margin:10px auto 0; background:linear-gradient(90deg,transparent,var(--md-cam),transparent); } /* ============ 3. Ô TÌM KIẾM ============ */ .search{ background:#fff; border:1px solid var(--md-vien); border-radius:18px; padding:26px 24px 22px !important; box-shadow:0 2px 14px rgba(0,0,0,.04); } .search .nav-tabs.selectWeb{ border:0 !important; display:flex; justify-content:center; gap:8px; margin:14px 0 16px; } .search .nav-tabs.selectWeb > li{ float:none !important; margin:0 !important; } .search .nav-tabs.selectWeb > li > a{ border:1px solid var(--md-vien) !important; border-radius:20px !important; background:#fff !important; color:#4a5158 !important; font-weight:700; font-size:13.5px; padding:8px 18px !important; margin:0 !important; } .search .nav-tabs.selectWeb > li.active > a, .search .nav-tabs.selectWeb > li > a:hover{ background:var(--md-nen-nut) !important; border-color:var(--md-nen-nut) !important; color:#fff !important; } .search .frm_search{ display:flex; gap:10px; max-width:760px; margin:0 auto 14px; } .search .frm_search input.text{ flex:1; height:52px !important; border:2px solid var(--md-xanh) !important; border-radius:12px !important; padding:0 18px !important; font-size:15.5px !important; box-shadow:none !important; width:auto !important; } .search .frm_search input.button{ height:52px !important; border:0 !important; border-radius:12px !important; background:var(--md-son) !important; color:#fff !important; font-weight:800 !important; font-size:15px !important; padding:0 30px !important; box-shadow:0 3px 0 #96271c !important; } .search .hotwords{ text-align:center; font-size:13px; } .search .hotwords strong{ color:var(--md-xam); font-weight:600; } .search .hotwords a.key{ display:inline-block; margin:4px 3px; padding:5px 13px; border-radius:16px; background:var(--md-xanh-nhat); border:1px solid var(--md-vien-xanh); color:var(--md-xanh-sau) !important; font-size:12.5px; font-weight:600; } .search .hotwords a.key:hover{ background:var(--md-nen-nut); color:#fff !important; } .search .ghichu-timkiem{ max-width:820px; margin:10px auto 0 !important; text-align:center; line-height:1.6; } .search .download_document{ margin-top:16px; } .search .download_document .btn_user{ border-radius:24px !important; font-weight:800 !important; padding:12px 26px !important; border:0 !important; font-size:14.5px !important; } .search .download_document .down3{ background:var(--md-nen-nut) !important; color:#fff !important; box-shadow:0 3px 0 #00734d; } .search .download_document .down1{ background:var(--md-cam) !important; color:#3a1d00 !important; box-shadow:0 3px 0 #b35409; } /* ============ 4. KHU DỊCH VỤ CUNG CẤP ============ */ .policy{ background:#fff; padding:34px 0 30px !important; } .policy ul.list{ display:flex; flex-wrap:wrap; gap:16px; margin:18px 0 0 !important; padding:0 !important; } .policy ul.list > li{ float:none !important; width:calc(33.333% - 11px) !important; padding:0 !important; list-style:none; } .policy ul.list > li .item{ height:100%; background:#fff; border:1px solid var(--md-vien) !important; border-radius:16px; padding:20px 18px 18px !important; position:relative; overflow:hidden; transition:box-shadow .18s, transform .18s; } .policy ul.list > li .item:before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--md-xanh),var(--md-cam)); } .policy ul.list > li .item:hover{ box-shadow:0 10px 26px rgba(0,0,0,.09); transform:translateY(-2px); } .policy ul.list .item h3, .policy ul.list .item h4, .policy ul.list .item .title{ font-size:16px !important; font-weight:800 !important; color:var(--md-xanh-dam) !important; margin:0 0 8px !important; line-height:1.35; } .policy ul.list .item p, .policy ul.list .item .desc{ font-size:13.5px !important; color:var(--md-xam) !important; line-height:1.55; } .policy ul.list .item img{ max-height:46px; width:auto; margin-bottom:10px; } /* ============ 5. KHU HƯỚNG DẪN ĐĂNG KÝ ============ */ .register-step-sec{ background:var(--md-xanh-nhat) !important; padding:32px 0 !important; } .register-step-sec .step-list, .register-step-sec .steps{ margin-top:18px; } .register-step-sec .item-step .icon, .register-step-sec .step-item .icon{ background:#fff !important; border:2px solid var(--md-vien-xanh) !important; box-shadow:0 0 0 6px rgba(255,255,255,.65); } .register-step-sec .item-step.active .icon, .register-step-sec .step-item.active .icon{ border-color:var(--md-xanh) !important; } .register-step-sec .txt h3, .register-step-sec .txt h4{ font-size:17px !important; font-weight:800 !important; color:var(--md-xanh-dam) !important; } .register-step-sec .txt p{ font-size:13.5px !important; color:#4a5158 !important; line-height:1.6; } /* ============ 6. KHU HƯỚNG DẪN (video + danh sách) ============ */ .guide .box-guide{ align-items:center; } .guide .txt .sec-title{ font-size:22px !important; font-weight:800 !important; line-height:1.3; } .guide .content .desc1{ font-size:14px; line-height:1.9; } .guide .btn, .guide .find-now{ border-radius:24px !important; font-weight:800 !important; border:0 !important; background:var(--md-cam) !important; color:#3a1d00 !important; box-shadow:0 3px 0 #b35409; } /* ============ 7. TIN TỨC ============ */ .news-home .item, .news-home .news-item{ border:1px solid var(--md-vien) !important; border-radius:16px; overflow:hidden; background:#fff; } .news-home .item .img img, .news-home .news-item img{ border-radius:0 !important; } .news-home .item .title a, .news-home .news-item .title a{ font-size:14.5px !important; font-weight:700 !important; color:var(--md-than) !important; } /* ============ 8. ĐIỆN THOẠI ============ */ @media(max-width:991px){ .policy ul.list > li{ width:calc(50% - 8px) !important; } } @media(max-width:767px){ .search{ padding:18px 14px 16px !important; border-radius:14px; } .search .frm_search{ flex-direction:column; gap:8px; } .search .frm_search input.text, .search .frm_search input.button{ width:100% !important; height:48px !important; } .search .nav-tabs.selectWeb{ flex-wrap:wrap; } .search h3.title-main, .policy h2.title-main, .register-step-sec h2.title-main, .news-home h2.title-main{ font-size:19px !important; } .policy ul.list > li{ width:100% !important; } } /* ============ 9. VÁ CHỮ KHÓ ĐỌC (máy đo ra, không phải cảm tính) ============ Công cụ tools/soi-bo-cuc/soi.mjs đo tương phản theo chuẩn WCAG và chỉ ra: · chữ trắng trên xanh #009966 = 3,96 — dưới mức cần 4,5 -> đổi nền sang #00875a (≈6,9) · "Cốc Cốc" chữ #222 trên nền xanh = 2,66 -> chữ trắng · "Chrome" chữ #222 trên nền đỏ = 4,21 -> chữ trắng · "Xem thêm" chữ #999 trên nền trắng = 2,85 -> xanh đậm Chạy lại lệnh đó sau khi sửa để xác nhận về 0. */ .search .nav-tabs.selectWeb > li.active > a, .search .nav-tabs.selectWeb > li > a:hover{ background:var(--md-nen-nut) !important; border-color:var(--md-nen-nut) !important; } .search .download_document .down3{ background:var(--md-nen-nut) !important; box-shadow:0 3px 0 #00734d !important; } .setup-tool .btn-tool a.chrome, .setup-tool .btn-tool a.coccoc, .action-btns .btn-tool a.chrome, .action-btns .btn-tool a.coccoc{ color:#fff !important; font-weight:700 !important; } .setup-tool .btn-tool a.coccoc, .action-btns .btn-tool a.coccoc{ background:var(--md-nen-nut) !important; } /* Chỉ nhuộm chữ "Xem thêm" trong khối từ khoá. Trước đây viết thêm vế trần `a.txtbold` (không giới hạn khu nào) nên nó nhuộm cả liên kết cùng tên ở trang tin tức và trang nguồn hàng — hai trang không nằm trong diện nghiệm thu. Đã siết lại đúng phạm vi. */ .search .hotwords a.txtbold{ color:var(--md-xanh-dam) !important; font-weight:700 !important; } .mdnh .o .nhan{ font-size:11px !important; } .mdnh .nut a{ background:var(--md-nen-nut) !important; box-shadow:0 4px 0 #00734d !important; } /* còn 3 chỗ máy bắt ở khổ điện thoại: nút Chrome nền đỏ nhạt, chip "Tất cả", nút đổi sáng/tối */ .setup-tool .btn-tool a.chrome, .action-btns .btn-tool a.chrome{ background:var(--md-son) !important; } .mdnh .chip a.on{ background:var(--md-nen-nut) !important; border-color:var(--md-nen-nut) !important; box-shadow:0 3px 0 #00734d !important; } #md_theme_fab{ background:var(--md-nen-nut) !important; } /* vạch trắng mảnh còn sót dưới dải menu (viền của ul.nav trong theme cũ) */ /* ============ 10. CHỐNG ĐÈ NHAU LÚC TẢI TRANG ============ Đo 30/09 bằng tools/soi-bo-cuc/soi.mjs (soi theo từng mốc lúc trang đang tải): · #md-ngua-khung — mảnh gương bay ra ngoài khung ảnh, phủ xuống dải logo sàn -> nhốt trong khung, mảnh chỉ chạy trong đúng phạm vi bức ảnh gốc. · .slider-cont / .module — cao 0 vì con để float mà cha không bao được -> display:flow-root bao lại (chỉ bao float, không đổi gì khác). */ #md-ngua-khung{ overflow:hidden; } .slider-cont, .wrapper > .module, .footer .module{ display:flow-root; } /* ============ 11. (đã LÙI 30/09) — thử chỉnh màu popup thông báo md_tb bằng CSS đè nhưng selector đè nhầm lên tiêu đề từng dòng -> chữ tối trên nền xanh (1,09), tệ hơn cũ. Popup là của web cũ, ngoài phạm vi trang chủ; muốn sửa phải làm trong home.php (khối JS md_tb_*). */ /* ============ 13. NHỊP CHUNG GIỮA CÁC KHU — cho cả trang thở đều ============ Đo 30/09 bằng computed style: khoảng cách trên/dưới mỗi khu đang mỗi nơi một kiểu (26/30 · 44/40 · 32/32 · 60/60 · 52/52 px) nên cuộn trang thấy chỗ chật chỗ rỗng. Chuẩn hoá về 1 nhịp: máy tính 44px · máy tính bảng 34px · điện thoại 26px. Chỉ đụng khoảng cách ngoài, không đổi nội dung bên trong từng khu. */ .mdnh, .policy, .register-step-sec, .news-home, .guide{ padding-top:44px !important; padding-bottom:44px !important; } @media(max-width:991px){ .mdnh, .policy, .register-step-sec, .news-home, .guide{ padding-top:34px !important; padding-bottom:34px !important; } } @media(max-width:767px){ .mdnh, .policy, .register-step-sec, .news-home, .guide{ padding-top:26px !important; padding-bottom:26px !important; } } /* hai khu liền nhau cùng nền trắng thì gộp nhịp, khỏi hở gấp đôi */ .mdnh + .policy{ padding-top:0 !important; } /* ============ 14. Ô TÌM KIẾM: dòng "Từ khóa nổi bật" bị CẮT ĐÔI ============ Đo 30/09: .hotwords cao 18px trong khi nội dung thật cao 38px, lại overflow:hidden (theme cũ tính chiều cao cho chữ trơn; nay chip có nền + padding nên cao hơn) -> các chip bị xén mất nửa dưới, nhìn như chữ đè nhau. Cho nó tự cao theo nội dung. */ .search .hotwords{ height:auto !important; min-height:0 !important; overflow:visible !important; line-height:1.9 !important; padding-bottom:2px; } .search .hotwords a.key{ vertical-align:middle; } /* ============ 15. Ô TÌM KIẾM: KHUNG CAO CỨNG LÀM NÚT ĐÈ Ô NHẬP ============ Đo 30/09 ở khổ 390px: .frm_search bị theme cũ đặt height:36px + overflow:hidden (style.css) nên khi xếp DỌC trên điện thoại, ô nhập và nút không đủ chỗ: trình duyệt co hai con flex xuống 22px/21px rồi cắt cụt -> nhìn như nút đè lên ô. Chữa ở GỐC: cho khung tự cao theo nội dung, cấm co, và bỏ luôn dải nền đỏ cũ. */ .search .frm_search{ height:auto !important; min-height:0 !important; overflow:visible !important; background:transparent !important; padding:0 !important; margin-top:0 !important; align-items:stretch; } .search .frm_search input.text, .search .frm_search input.button{ flex:0 0 auto; min-height:0; } .search .frm_search input.text{ flex:1 1 auto; } /* Nền dịu lại: bỏ viền xanh dày 2px quanh ô nhập, thay bằng khung xám mảnh + nền trắng ngà; chỉ khi bấm vào mới sáng viền xanh (chủ 30/09: "nền để hơi thô"). */ .search{ background:linear-gradient(180deg,#fbfdfc 0%,#fff 58%) !important; } .search .frm_search input.text{ border:1px solid var(--md-vien) !important; background:#fbfcfc !important; transition:border-color .16s, box-shadow .16s, background .16s; } .search .frm_search input.text:focus{ border-color:var(--md-xanh) !important; background:#fff !important; box-shadow:0 0 0 3px rgba(0,144,104,.13) !important; } .search .frm_search input.button{ background:var(--md-nen-nut) !important; box-shadow:0 2px 0 var(--md-xanh-sau) !important; letter-spacing:.2px; } .search .frm_search input.button:hover{ background:var(--md-nen-nut) !important; } /* ---- Bảng gợi ý hiện khi BẤM vào ô tìm kiếm (js/madai-timkiem.js) ---- */ .search .frm_search{ position:relative; } .md-goiy{ position:absolute; left:0; right:0; top:100%; margin-top:6px; z-index:60; background:#fff; border:1px solid var(--md-vien); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.12); padding:10px 12px 12px; display:none; text-align:left; max-height:320px; overflow-y:auto; } .md-goiy.mo{ display:block; } .md-goiy .nhan{ font-size:12px; font-weight:700; color:var(--md-xam); text-transform:uppercase; letter-spacing:.4px; margin:2px 0 8px; } .md-goiy a{ display:inline-block; margin:0 6px 6px 0; padding:6px 13px; border-radius:16px; background:var(--md-xanh-nhat); border:1px solid var(--md-vien-xanh); color:var(--md-xanh-sau) !important; font-size:13px; font-weight:600; } .md-goiy a:hover, .md-goiy a.chon{ background:var(--md-nen-nut); color:#fff !important; border-color:var(--md-xanh); } .md-goiy .trong{ font-size:13px; color:var(--md-xam); padding:4px 2px 2px; } @media(max-width:767px){ .search .frm_search input.text, .search .frm_search input.button{ height:46px !important; } .md-goiy{ max-height:260px; } } /* ---- 15b. Ba lỗi còn lại của khối tìm kiếm ở khổ điện thoại (đo 30/09) ---- */ /* Chip tên sàn bị CẮT CHỮ: "TAOBAO.COM" cần 104px mà ô chỉ được 90px rồi co lại. Cho mỗi chip giữ đúng bề ngang chữ, không co, thiếu chỗ thì xuống hàng. */ .search .nav-tabs.selectWeb > li{ flex:0 0 auto; } .search .nav-tabs.selectWeb > li > a{ white-space:nowrap; } /* Bảng gợi ý phải nổi hơn cụm nút liên hệ bay bên phải (z-index 1041), nếu không thì nút Zalo/Chat che mất mấy từ khoá bên dưới. */ .md-goiy{ z-index:1060; } /* Xe ngựa: GIỮ kiểu đè (absolute) như bản đang chạy — chủ chốt 01/10/2026 "ảnh ngựa và ảnh banner cần thiết kế có thể đè nhau sao cho đẹp gọn". Từng đổi sang đứng-đúng-chỗ (static) cho khỏi đè tiêu đề bên dưới, nhưng đo ra khối đầu trang phình từ 505px lên 1036px — khách phải cuộn gấp đôi mới tới ô tìm kiếm. Cách xếp đặt cụ thể ở mục 21. */ /* Chip tên sàn: responsive.css ép mỗi ô đúng 25% bề ngang (≈90px ở màn 390px) trong khi chữ "TAOBAO.COM" cần 104px -> chữ thò ra ngoài viên, nhìn như bị cắt. Cho ô rộng theo chữ, thiếu chỗ thì tự xuống hàng. */ .search .nav-tabs.selectWeb > li{ width:auto !important; } /* Đoạn hướng dẫn dưới ô tìm kiếm bị cụm nút liên hệ (Zalo/Chat/Gọi) bay bên phải che mất chữ cuối dòng ở màn hẹp -> chừa lề phải đúng bề ngang cụm nút. */ @media(max-width:600px){ .search .ghichu-timkiem{ padding-right:46px; text-align:left !important; } } /* ---- 16. CHỮ KHÓ ĐỌC ở gáy đầu và popup thông báo (máy đo 30/09, không phải cảm tính) ---- Chỉ đổi MÀU cho đọc được, không đụng bố cục gáy đầu (chủ chốt: gáy đầu giữ như web thật). */ /* Khối "Đăng nhập / Đăng ký" góc trên: chữ trắng trên nền xanh cũ #009266 chỉ đạt 3,96. Nền đậm thêm đúng một nấc là đọc rõ (4,5) mà mắt vẫn thấy cùng màu xanh Mã Đại. Chỉ đổi MÀU NỀN của khối này, không xê dịch gì trong gáy đầu. */ div.auth{ background-color:var(--md-nen-nut) !important; } .md-tb-ico{ background-color:var(--md-nen-nut) !important; } button.md-tb-dong{ background-color:var(--md-nen-nut) !important; } /* Nhãn đỏ "Tìm & Tạo đơn tiếng Việt": chữ #222 trên #e84d3d đạt 4,21 -> chữ đen đậm = 4,9 */ .nt-dong{ color:#111 !important; } /* Ngày tháng trong popup thông báo: xám #7a8782 trên trắng đạt 3,74 -> xám đậm = 5,3 */ .md-tb-luc{ color:#5f6b66 !important; } /* ============ 17. BA LUẬT NỀN CHO MÀN CẢM ỨNG VÀ CHỮ ============ Rút từ bộ luật giao diện của Vercel (bản ghim 01/10/2026, xem tools/luat-giao-dien/). Ba thứ này không ai nhìn thấy ngay nhưng khách chạm vào là thấy khác. */ /* Điện thoại: chạm vào nút, trình duyệt chờ ~300ms xem có phải chạm-hai-lần-để-phóng-to không rồi mới phản hồi -> cảm giác "bấm mãi không ăn". Khai rõ là không cần chờ. */ a, button, input[type="submit"], input[type="button"], .btn, .chip a, .key{ touch-action: manipulation; } /* Tiêu đề xuống dòng bị rớt lại một chữ lẻ ở dòng cuối (chữ mồ côi) -> chia dòng cân lại. Trình duyệt cũ không hiểu thì bỏ qua, không hỏng gì. */ h1, h2, h3, .title-main, .sec-title, .mdnh .tieu-de{ text-wrap: balance; } p, .ghichu-timkiem, .mdnh .phu{ text-wrap: pretty; } /* Con nằm trong hàng ngang (flex) mặc định KHÔNG chịu co, nên chữ dài đẩy vỡ khung thay vì cắt gọn bằng "…". Đây chính là bệnh tên hàng bị xén đo được hôm 30/09. */ .mdnh .o .ten, .news-home .content .name, .search .frm_search input.text, .policy .item .title, .md-goiy a{ min-width:0; } /* ============ 18. KHÔI PHỤC DẤU VIỀN KHI DÙNG BÀN PHÍM ============ Máy đo 01/10/2026: 29 chỗ trong hệ đang tắt viền focus (`outline:none`) — rải rác ở bootstrap, fancybox, jquery-ui và cả các màn khách (ví · đổi mật khẩu · tìm sản phẩm · kho nguồn hàng · tạo đơn ký gửi). Hậu quả: khách bấm phím Tab để đi giữa các ô KHÔNG thấy mình đang đứng ở đâu — người dùng bàn phím, người mắt kém, người dùng phần mềm đọc màn hình đều mò mẫm. KHÔNG sửa 29 chỗ đó: phần lớn nằm trong thư viện ngoài (bootstrap, jquery-ui), sửa vào là mất sạch khi nâng cấp thư viện. Thay vào đó khôi phục lại ở ĐÂY — file nạp sau cùng. Dùng :focus-visible chứ không phải :focus — trình duyệt chỉ vẽ viền khi người ta đi bằng BÀN PHÍM, bấm chuột thì không hiện, nên không làm xấu giao diện thường ngày. */ /* Liên kết, nút, phần tử bấm được: viền HAI LỚP — vòng trong sẫm, vòng ngoài trắng. Thấy được trên MỌI nền; thử một màu trước đó thì đo ra 3 chỗ chìm mất: email trên nền xám (2,79), nút Facebook trên nền xanh dương (2,26), biểu tượng trên nền #efefef (1,15). */ /* Lặp :focus-visible ba lần để NÂNG ĐỘ ƯU TIÊN — vài nút đã có box-shadow riêng với !important và selector dài hơn (vd .search .download_document .down3), nên luật ngắn bị thua và mất vòng trắng. Người soi độc lập bắt 2/60 điểm dừng bị thế (01/10/2026). */ a:focus-visible:focus-visible:focus-visible, button:focus-visible:focus-visible:focus-visible, [tabindex]:focus-visible:focus-visible:focus-visible, [role="button"]:focus-visible:focus-visible:focus-visible, .btn:focus-visible:focus-visible:focus-visible, .key:focus-visible:focus-visible:focus-visible, .chip a:focus-visible:focus-visible:focus-visible{ outline: 2px solid var(--md-focus,#009266) !important; outline-offset: 2px !important; /* BA LỚP nhạt dần: viền xanh → vòng trắng (chống chìm trên nền tối) → quầng xanh mờ. Lấy đúng sắc focus mà hệ đang dùng ở màn đăng nhập (style.css:2973) để không chế màu mới. */ box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 0 0 7px rgba(0,146,102,.26) !important; } /* Ô NHẬP tách riêng, CHỈ dùng outline — không đụng box-shadow. Nhiều ô nhập trong hệ đã có sẵn vòng sáng xanh lúc focus (style.css:2973, màn giỏ hàng, màn tạo đơn, màn ký gửi…). Nếu áp box-shadow !important như trên thì vòng sáng đó bị XOÁ MẤT đúng lúc người ta đi bằng bàn phím — lấy đi một dấu hiệu đang có (tự bắt 01/10). */ input:focus-visible, select:focus-visible, textarea:focus-visible, .search .frm_search input.text:focus-visible, .frm_search input:focus-visible, form input:focus-visible, form select:focus-visible, form textarea:focus-visible{ outline: 2px solid var(--md-focus,#009266) !important; outline-offset: 2px !important; /* Quầng mờ KHÔNG !important: ô nào đã có vòng sáng riêng thì vòng đó vẫn thắng, ô nào chưa có thì được quầng xanh nhạt này — thêm mà không cướp. */ box-shadow: 0 0 0 5px rgba(0,146,102,.16); } /* ============ 18c. MENU CON (thả xuống) — mang về phong cách Mã Đại ============ Trước 02/10/2026 menu con vẫn để nguyên kiểu Bootstrap mặc định: bo góc chỉ 4px ở đáy, viền xám, bóng cứng, chữ 16px màu #333, di chuột vào thì nền xám nhạt. Đặt cạnh phần còn lại của trang (bo tròn, xanh Mã Đại) thì lạc hẳn — chủ bắt đúng chỗ này. Nay: bo đều, bóng mềm, chữ gọn hơn, di chuột vào thì nền xanh nhạt + chữ xanh đậm. ⚠️ VÌ SAO PHẢI !important Ở ĐÂY (đo 02/10/2026, đừng gỡ): `drop-menu.css` nạp SAU file này (home.php dòng 200 rồi 211) và có sẵn ba rule TRÙNG ĐỘ ĐẶC TRƯNG trong @media(min-width:768px): chữ 16px, đệm 6px 12px, và di chuột vào ra màu ĐỎ #a80000. Cùng độ đặc trưng thì ai nạp sau thắng — nên nếu không đánh dấu ưu tiên, toàn bộ phần màu/chữ dưới đây KHÔNG hiện trên máy tính, chỉ khung bo tròn là ăn. Đã kiểm bằng cách duyệt toàn bộ bảng kiểu của trang thật: rule mình đứng thứ 31-33, rule cũ đứng 39-41. (Màu đỏ đó là màu di-chuột-vào CHUNG cho mọi mục, không phải dấu cảnh báo riêng của mục "Danh Mục Hàng Cấm" — đã kiểm: mục đó không có màu riêng nào.) */ .navbar-nav>li>.dropdown-menu, .navbar-nav .dropdown-menu{ border: 1px solid var(--md-vien-xanh, #b7e6d3) !important; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 60, 40, .13); padding: 6px !important; overflow: hidden; } .navbar-nav .dropdown-menu>li>a{ font-size: 14.5px !important; padding: 9px 13px !important; border-radius: 9px; transition: background-color .15s, color .15s; } .navbar-nav .dropdown-menu>li>a:hover, .navbar-nav .dropdown-menu>li>a:focus-visible{ background-color: var(--md-xanh-nhat, #e7f7f0) !important; color: var(--md-xanh-sau, #00734d) !important; } .navbar-nav .dropdown-menu>li.active>a{ background-color: var(--md-xanh-nhat, #e7f7f0) !important; color: var(--md-xanh-sau, #00734d) !important; font-weight: 700; } /* 18b. Ô NHẬP NẰM TRONG HỘP BO TRÒN — vẽ viền trên HỘP, đừng vẽ quanh ô Ô tìm của khu Nguồn hàng là thẻ vuông đặt lọt trong hộp bo 24px. Viền focus ở rule trên bám theo chính thẻ nên ra một khung VUÔNG cắt ngang hộp bo — chủ bắt 02/10/2026. Cách đúng: ô con thôi vẽ viền, hộp mẹ nhận viền (hộp đã bo sẵn nên viền bo theo, ôm trọn cả kính lúp lẫn chỗ gõ). Vẫn giữ nguyên tắc: chỉ hiện khi đi bằng bàn phím. */ .tv-box input:focus-visible, .tv-box input:focus{ outline: none !important; outline-offset: 0 !important; box-shadow: none !important; } .tv-box:focus-within{ /* Xanh nhạt dần thay cho viền đen: viền xanh ôm hộp → quầng mờ toả ra (chủ chê đen "thô" 02/10/2026). */ outline: 2px solid var(--md-focus,#009266); outline-offset: 2px; box-shadow: 0 0 0 7px rgba(0,146,102,.15); border-radius: 24px; } /* ============ 19. ẢNH KHAI KÍCH THƯỚC PHẢI KÈM height:auto ============ Khai width/height thật trong HTML là để trình duyệt chừa sẵn chỗ (chống nhảy bố cục). NHƯNG nếu CSS chỉ đặt bề ngang mà không đặt chiều cao — ví dụ .icon_chome{width:30px} trong style.css — thì ảnh lấy bề ngang 30px của CSS và chiều cao 120px của HTML -> méo dẹt. Đây là lỗi bản vá 01/10 gây ra, đo được: icon Chrome/Cốc Cốc méo 75%. Cho mọi ảnh có khai kích thước tự tính lại chiều cao theo tỉ lệ. */ /* Chỉ nhắm ĐÍCH DANH những ảnh mà CSS cũ đặt bề ngang nhưng quên chiều cao. Áp cho MỌI ảnh (img[width][height]{height:auto}) thì đo ra độ nhảy bố cục tăng gấp đôi (0,033 -> 0,074) vì chỗ trình duyệt chừa sẵn không còn khớp chiều cao cuối. */ .icon_chome, .brand__child .img img, .bg-layer, #md-ngua-anh, .banner-logo .img img{ height:auto !important; } /* Trừ các khung CẮT ảnh có chủ ý (ảnh phải phủ kín khung, cắt phần thừa) */ .mdnh .o .anh img, .news-home .box-thum-news img, .news-home .item .img img{ height:100% !important; } /* ============ 20. ĐOẠN ĐẦU TRÊN ĐIỆN THOẠI (chủ đặt hàng 01/10/2026) ============ Hiện trạng đo được ở khổ 390px: menu xổ ra chỉ rộng 360/390 nên hở một dải bên phải · nền xám #f1f1f1 với chữ xám #222 cỡ 14px mảnh -> nhìn nhoè · các mục cao 36px, ngón tay dễ bấm nhầm · mũi tên mở mục con là ô vuông trắng trống, khách không hiểu bấm vào đâu. */ @media (max-width:767px){ /* --- Dải menu xổ: trắng sạch, kín bề ngang, có vạch ngăn từng mục --- */ /* Khung cha rộng 360 trong màn 390 (theme cũ chừa lề), nên menu hở một dải bên phải. 100vw + kéo về mép trái để dải menu kín hẳn bề ngang màn. */ .navbar-collapse{ /* Khung cha .navitor bắt đầu ở x15 và rộng 360 trong màn 390 (theme cũ chừa lề hai bên). Kéo ra đúng 15px mỗi bên là dải menu kín hẳn bề ngang — thử 100vw/left:50% đều sai vì cha đã lệch sẵn 15px (tự bắt 01/10/2026). */ /* .navitor là hàng flex nên width của con bị flex-basis quyết định — phải đặt flex-basis, đặt mỗi width thì không ăn (tự bắt 01/10/2026). */ width:calc(100% + 30px) !important; max-width:none !important; flex-basis:calc(100% + 30px) !important; flex-grow:0 !important; flex-shrink:0 !important; padding-left:0 !important; padding-right:0 !important; margin-left:-15px !important; margin-right:-15px !important; background:#fff !important; border-top:1px solid var(--md-vien) !important; box-shadow:0 10px 24px rgba(0,0,0,.14) !important; } /* Nền xám #bbb nằm ở chính ul.nav, không phải ở khung ngoài — phải gọi đích danh */ .navbar-collapse .nav, .navbar-collapse .navbar-nav{ background:#fff !important; margin:0 !important; width:100% !important; } .navbar-collapse .nav > li{ border-bottom:1px solid #eef1f0 !important; background:#fff !important; } .navbar-collapse .nav > li:last-child{ border-bottom:0 !important; } /* Chữ to và đậm hơn, ô bấm cao 48px cho vừa đầu ngón tay */ .navbar-collapse .nav > li > a{ font-size:15px !important; font-weight:600 !important; color:var(--md-than) !important; padding:14px 16px !important; min-height:48px !important; display:flex !important; align-items:center !important; } .navbar-collapse .nav > li > a:hover, .navbar-collapse .nav > li.active > a{ background:var(--md-xanh-nhat) !important; color:var(--md-xanh-sau) !important; } /* Vạch xanh bên trái mục đang xem — biết mình đang ở đâu */ .navbar-collapse .nav > li.active > a{ box-shadow:inset 3px 0 0 var(--md-nen-nut) !important; } /* Mục có menu con: nút mở phải NHÌN THẤY và ĐỦ TO cho ngón tay. Phần tử thật ăn click là (js/main.js:128), không phải .caret — .caret bị drop-menu.css đặt display:none nên mọi kiểu dáng gắn vào nó đều là code chết. Ảnh nền gốc của .bulet-dropdown (icon-dropdown.png) KHÔNG còn trên đĩa, máy chủ trả về cả trang chủ thay cho ảnh, nên nút hiện ra như một ô trắng trống — khách không biết bấm vào đâu để mở "Chính sách, quy định" / "Nguồn hàng". Nay vẽ mũi tên bằng phông biểu tượng có sẵn, bỏ ảnh nền hỏng. (Người soi độc lập bắt 01/10/2026; bản vá trước của tôi nhắm nhầm .caret nên vô tác dụng.) */ .navbar-collapse .bulet-dropdown{ background-image:none !important; background-color:#f4f7f6 !important; border:1px solid var(--md-vien) !important; border-radius:8px !important; width:38px !important; height:38px !important; /* vùng bấm đủ rộng */ display:flex !important; align-items:center !important; justify-content:center !important; position:absolute !important; right:12px !important; top:5px !important; text-indent:0 !important; font-size:0 !important; cursor:pointer; z-index:5 !important; } .navbar-collapse .bulet-dropdown:after{ content:"\f107"; font-family:"FontAwesome"; font-size:17px; color:var(--md-xanh-sau); line-height:1; } /* Đang mở thì mũi tên quay lên, nền xanh nhạt — biết mục nào đang xổ */ .navbar-collapse li.open > .bulet-dropdown, .navbar-collapse .bulet-dropdown.active{ background-color:var(--md-xanh-nhat) !important; border-color:var(--md-vien-xanh) !important; } .navbar-collapse li.open > .bulet-dropdown:after, .navbar-collapse .bulet-dropdown.active:after{ content:"\f106"; } /* Chừa chỗ cho nút, khỏi đè lên chữ dài */ .navbar-collapse .nav > li.dropdown > a, .navbar-collapse .nav > li:has(.bulet-dropdown) > a{ padding-right:60px !important; } /* Menu con thụt vào, nền hơi xám để phân biệt cấp */ .navbar-collapse .nav .dropdown-menu > li > a, .navbar-collapse .nav ul li a{ padding-left:32px !important; font-size:14px !important; font-weight:500 !important; background:#fafbfb !important; } /* --- Dải trên cùng (giỏ hàng · đăng nhập) gọn lại, chữ dễ bấm --- */ div.auth{ padding:6px 10px !important; } div.auth a{ font-size:13.5px !important; } /* --- Nút ☰ rõ hơn: có khung, đủ to cho ngón tay --- */ .navbar-toggle{ width:44px !important; height:40px !important; padding:0 !important; border:1px solid var(--md-vien) !important; border-radius:10px !important; background:#fff !important; display:flex !important; /* column: ba vạch phải XẾP CHỒNG. Để mặc định (row) thì chúng nằm ngang thành ba gạch rời rạc, không ai nhận ra là nút menu (tự bắt 01/10/2026). */ flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; } .navbar-toggle .icon-bar{ background:var(--md-than) !important; width:20px !important; height:2px !important; border-radius:1px !important; margin:0 !important; display:block !important; } /* --- Xe ngựa: bớt chiều cao để khách thấy ô tìm kiếm sớm hơn --- */ .brand-logo .banner-logo .img img, .brand-logo .banner-logo .img canvas{ max-height:190px !important; width:auto !important; } .brand-logo .banner-logo{ text-align:center; } } /* ============ 21. ĐẦU TRANG ĐIỆN THOẠI: NGỰA ĐÈ LÊN BANNER (chủ đặt hàng 01/10/2026) ============ Ý: ảnh chợ + dòng "Giải pháp vận tải & Tìm hàng giá gốc" là nền; xe ngựa cắt giấy chồng lên mép dưới ảnh chợ, nửa trong nửa ngoài — gọn một khối thay vì hai khối rời xếp dọc. Vừa đỡ dài, vừa ra chất tranh cắt giấy của thương hiệu. */ @media(max-width:767px){ /* Khối bọc: chừa đúng chỗ cho phần ngựa thò xuống dưới ảnh chợ */ .brand-logo .all.horse{ height:120px !important; position:relative; } /* Ngựa nổi lên trên, kéo ngược vào đáy ảnh chợ */ .brand-logo .banner-logo{ position:absolute !important; left:0 !important; right:0 !important; top:-70px !important; bottom:auto !important; z-index:3 !important; text-align:center !important; pointer-events:none; } .brand-logo .banner-logo .img{ display:inline-block; } .brand-logo .banner-logo .img img, .brand-logo .banner-logo .img canvas{ /* Chỉ giới hạn BỀ NGANG, để chiều cao tự tính theo tỉ lệ. Đặt cả max-width lẫn max-height thì ở màn hẹp (320/360px) hai giới hạn đánh nhau, trình duyệt bóp ảnh méo 15-24% (tự bắt khi quét 15 khổ màn, 01/10/2026). */ max-width:92vw !important; width:auto !important; height:auto !important; max-height:none !important; } /* ⛔ KHÔNG dùng filter:drop-shadow cho ảnh ngựa: ảnh cắt giấy có hàng trăm mảng trong suốt rời nhau, trình duyệt đổ bóng từng mảng nên hiện ra một lưới ô vuông mờ chồng lên con ngựa (chụp ảnh mới thấy, số đo không bắt được — bắt 01/10/2026). */ /* Ảnh chợ: phủ mờ dần ở đáy để chỗ ngựa chồng lên nhìn liền mạch */ .box-cap{ z-index:2 !important; } } /* ============ 22. CHUYỂN GIAO MƯỢT GIỮA ẢNH BANNER VÀ KHU XE NGỰA ============ Chủ chốt 01/10/2026: "đoạn chuyển giao giữa ảnh banner và ngựa màu hơi thô". Đo được: ảnh chợ kết thúc ở y302 rồi nhảy thẳng sang nền xám #efefef của khu ngựa — một đường cắt ngang sắc lẹm giữa vùng nhiều màu và vùng phẳng. Cách chữa: phủ một dải tan dần ở đáy ảnh, từ trong suốt xuống đúng màu nền khu dưới, nên mắt không thấy đường cắt nữa mà thấy ảnh "chìm" dần vào nền. */ .slide-site{ position:relative !important; } .slide-site:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none; z-index:2; background:linear-gradient(to bottom, rgba(239,239,239,0) 0%, rgba(239,239,239,.45) 42%, rgba(239,239,239,.85) 76%, rgb(239,239,239) 100%); } @media(max-width:767px){ /* Màn hẹp: dải tan dài hơn theo tỉ lệ, và kéo ngựa lên đè sâu vào ảnh như bản đang chạy — chính con ngựa che nốt chỗ giao nhau, nhìn liền một khối. */ .slide-site:after{ height:64px; } .brand-logo .banner-logo{ top:-104px !important; } .brand-logo .all.horse{ height:92px !important; } } /* ============ 23. CHỮ BANNER TRÊN ĐIỆN THOẠI DÙNG ĐÚNG PHÔNG CỦA WEB ============ Chủ chốt 01/10/2026: "font chưa giống". Truy ra: responsive.css khai `.content-txt{font-family: TrajanPro3}` NHƯNG đặt trong `@media(min-width:768px)` nên điện thoại không bao giờ nhận, rơi về Roboto không chân — khác hẳn máy tính (TrajanPro3 có chân, 40px, kèm bóng chữ). Đây là chỗ hụt sẵn của theme, không phải do bản thiết kế. Nay cho điện thoại dùng đúng phông ấy, cỡ nhỏ lại cho vừa màn. */ @media(max-width:767px){ .content-txt, .content-txt h1, .content-txt h2, .content-txt p{ font-family:"TrajanPro3", "Times New Roman", serif !important; } .content-txt h1{ font-size:26px !important; line-height:1.25 !important; letter-spacing:.5px !important; /* bóng chữ giống bản máy tính — chữ trắng đặt trên ảnh chợ nhiều chi tiết, không có bóng thì chỗ nền sáng chữ chìm mất */ text-shadow:0 2px 6px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4) !important; } .content-txt p, .content-txt h2{ font-size:18px !important; text-shadow:0 2px 6px rgba(0,0,0,.55) !important; } } /* ============ 24. THU GỌN CÁC Ô TRÊN ĐIỆN THOẠI (chủ chốt 01/10/2026) ============ "Các ô cần thu nhỏ lại cho gọn, đỡ mất diện tích, hạn chế to quá bị xuống hàng nhiều". Đo ở khổ 390px trước khi sửa: chip sàn 4 ô phải xuống 2 hàng · chip từ khoá 8 ô xuống 4 hàng · hai nút Tạo đơn mỗi nút một hàng · mỗi thẻ dịch vụ cao 312px nên riêng khu dịch vụ đã 2.114px. Toàn trang 8.746px. */ @media(max-width:767px){ /* --- Chip tên sàn: ép vừa MỘT hàng (4 ô) thay vì tràn xuống hàng thứ hai --- */ .search .nav-tabs.selectWeb{ gap:5px !important; flex-wrap:nowrap !important; } .search .nav-tabs.selectWeb > li > a{ font-size:11.5px !important; padding:7px 9px !important; letter-spacing:-.2px; } /* --- Chip từ khoá: nhỏ lại, 8 ô còn 2-3 hàng --- */ .search .hotwords a.key{ font-size:11.5px !important; padding:4px 9px !important; margin:3px 2px !important; } .search .hotwords strong{ font-size:11.5px !important; } /* --- Hai nút Tạo đơn nằm CHUNG một hàng --- */ .search .download_document{ display:flex !important; gap:8px !important; margin-top:12px !important; } .search .download_document .btn_user{ flex:1 1 0 !important; min-width:0 !important; margin:0 !important; font-size:12.5px !important; padding:11px 6px !important; white-space:nowrap !important; } .search .download_document .btn_user .fa{ margin-right:3px !important; } /* --- Thẻ dịch vụ: bỏ khoảng trắng thừa, nút bám sát nội dung --- */ .policy ul.list{ gap:10px !important; } .policy ul.list > li .item{ padding:14px 14px 12px !important; } .policy ul.list .item img{ max-height:36px !important; margin-bottom:6px !important; } .policy ul.list .item h3, .policy ul.list .item h4, .policy ul.list .item .title{ font-size:14.5px !important; margin:0 0 5px !important; } .policy ul.list .item p, .policy ul.list .item .desc, .policy ul.list .item li{ font-size:12.5px !important; line-height:1.45 !important; } /* Nút "Chi tiết" thôi bị đẩy xuống đáy bằng khoảng trắng rỗng */ .policy ul.list .item .btn, .policy ul.list .item a.btn{ margin-top:10px !important; padding:7px 16px !important; font-size:12px !important; } /* --- Khu tìm kiếm: bớt đệm quanh viền --- */ .search{ padding:16px 12px 14px !important; } .search h3.title-main{ margin-bottom:2px !important; } /* --- Thẻ sản phẩm nguồn hàng: nén nhẹ, vẫn đọc rõ giá --- */ .mdnh .o .ten{ font-size:12.5px !important; } .mdnh .o .gia{ font-size:14px !important; } .mdnh .chip a{ font-size:12px !important; padding:6px 12px !important; } } /* --- 24b. Thẻ dịch vụ: nén thật (mục 24 bị madai-dichvu.css nạp sau ghi đè) --- Đo cấu trúc thật một thẻ 312px: đệm 20/18/18 · lề dưới 30 · biểu tượng 52 + 14 · tiêu đề 22 + 8 · mô tả 125 + 16 · nút 36. Chỗ phí là lề dưới 30px, đệm rộng và biểu tượng 52px. Lặp class để thắng file nạp sau. */ @media(max-width:767px){ .policy.policy ul.list > li .item{ padding:13px 13px 11px !important; margin-bottom:10px !important; } .policy.policy ul.list > li{ margin-bottom:0 !important; } .policy.policy ul.list .item .icon{ width:38px !important; height:38px !important; margin-bottom:8px !important; overflow:hidden !important; } .policy.policy ul.list .item .icon img{ width:38px !important; height:76px !important; margin-top:-38px !important; } .policy.policy ul.list .item h4.lbl, .policy.policy ul.list .item .lbl{ font-size:14.5px !important; margin:0 0 4px !important; } .policy.policy ul.list .item p.desc{ font-size:12.5px !important; line-height:1.45 !important; margin:0 0 8px !important; } .policy.policy ul.list .item p.read-more{ margin:0 !important; } .policy.policy ul.list .item p.read-more a{ padding:7px 15px !important; font-size:12px !important; } } /* --- 24c. Cụm nút liên hệ bay bên phải: thu nhỏ, khỏi che chữ --- Đo ở 390px: cụm 5 nút chiếm một dải dọc bên phải, đè lên chữ cuối dòng của khối mô tả và nút "Tạo đơn ký gửi". Thu nhỏ nút và cho khối chữ chừa lề phải. */ @media(max-width:600px){ .madai-contact{ right:8px !important; bottom:56px !important; gap:6px !important; } .madai-contact .mc-btn{ width:34px !important; height:34px !important; } .madai-contact .mc-btn i.fa{ font-size:14px !important; } .madai-contact .mc-btn svg{ width:16px !important; height:16px !important; } /* Khối chữ dài chừa đúng bề ngang cụm nút để không bị che chữ cuối dòng */ .search .ghichu-timkiem{ padding-right:44px !important; } .search .hotwords{ padding-right:40px !important; } } /* --- 24d. Ảnh khu "Hướng dẫn đăng ký" méo 64% --- step.css đặt `@media(max-width:480px) .step-inner .inner .img img{width:50%}` — lại đúng cái bệnh đặt bề ngang mà quên chiều cao: ảnh 500x379 bị bóp thành 180x379. Cùng loại với icon Chrome/Cốc Cốc ở mục 19, nhưng nằm ngoài 3 selector đã vá (người soi độc lập bắt 01/10/2026). */ .step-inner .inner .img img, .register-step-sec .inner .img img{ height:auto !important; } /* --- 24e. Màn RẤT hẹp (≤380px): chip sàn phải xuống hàng, không được tràn ra ngoài --- Đo ở 360px: 4 chip ép một hàng thì tràn 9px mỗi bên. Bề ngang dùng được chỉ 336px, mà chữ "ALIBABA.COM" đọc được đã chiếm ~90px — bốn cái không thể vừa. Ở khổ này cho xuống hàng, thà hai hàng còn hơn chữ lòi ra ngoài khung. */ @media(max-width:380px){ .search .nav-tabs.selectWeb{ flex-wrap:wrap !important; } .search .nav-tabs.selectWeb > li > a{ font-size:11px !important; padding:6px 8px !important; } } /* ============ 25. Ô TÌM Ở TRANG KHO NGUỒN HÀNG BỊ ĐẨY RA NGOÀI MÀN ============ Đo ở 390px (đã đăng nhập): .tv-hdr là hàng ngang, tiêu đề chiếm 202px nên ô tìm chỉ còn 142px, trong khi ruột nó (biểu tượng + ô nhập + nút) cần 205px -> thò ra ngoài 48px và bị .wrap_body{overflow-x:hidden} cắt mất. Khách KHÔNG bấm được nút Tìm và nút chụp ảnh, chỉ gõ Enter mới tìm được. Lỗi này có SẴN ở bản đang chạy (đã đối chiếu), không phải do bản thiết kế. Chữa: trên màn hẹp cho tiêu đề và ô tìm mỗi thứ một hàng, ô tìm rộng hết khung. */ @media(max-width:767px){ .tv-hdr{ flex-wrap:wrap !important; gap:10px !important; } .tv-hdr > .tv-hdr-l{ flex:0 0 100% !important; max-width:100% !important; } .tv-hdr > .tv-srch{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; } .tv-srch .tv-box{ width:100% !important; max-width:100% !important; box-sizing:border-box; } .tv-srch .tv-box input{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; } } /* ============ 26. MENU TRÀN 2 DÒNG Ở KHỔ ~1024px (máy tính bảng nằm ngang) ============ Đo ở 1024x768: 9 mục menu cần 969px nhưng chỗ chứa chỉ 940px — THIẾU đúng 29px nên "Liên hệ" rớt xuống dòng hai. Khung nav không cao theo, nên dòng thứ hai thò ra 69px và ĐÈ LÊN nội dung ngay dưới: ở trang Kho Nguồn hàng nó che mất 55px của ô tìm kiếm, ở trang Tìm sản phẩm che nửa banner tiêu đề — khách không bấm được. Lỗi này có SẴN ở bản đang chạy (đo cùng con số 69px/55px trên cả hai bản). Chữa nhẹ nhất: thu đệm ngang mỗi mục 2px (9 mục tiết kiệm ~36px > 29px đang thiếu), chữ giữ nguyên cỡ. Chỉ áp đúng dải khổ bị, không đụng khổ khác. */ @media(min-width:992px) and (max-width:1199px){ .navitor .navbar-nav > li > a{ padding-left:13px !important; padding-right:13px !important; /* đệm dọc bớt 4px mỗi phía: dải menu thấp xuống 8px, hết thò xuống đè nội dung */ padding-top:12px !important; padding-bottom:12px !important; } .navitor .navbar-nav{ margin-bottom:0 !important; } /* Ép một dòng, không cho rớt mục nào xuống dòng hai */ .navitor .navbar-nav{ display:flex !important; flex-wrap:nowrap !important; } /* ⛔ KHÔNG đặt nav{height:auto}: thử rồi, nav co từ 125px xuống 90px nên phần menu lại thò ra nhiều hơn. Chiều cao nav là do theme tính, để nguyên. */ } /* ============ 18d. VIỀN Ô NHẬP — MỘT SẮC XANH KHẮP SITE ============ Chủ chốt 03/10/2026: "các ô viền của tất cả những nơi có đều đồng bộ thành màu xanh". Trước đó mỗi màn một kiểu (#ccc · #ddd · #d6d6d6 · #e4e8e6) vì code đi qua nhiều đời. CHỈ đổi MÀU viền — giữ nguyên độ dày, kiểu nét và bo góc của từng ô, để không xô lệch bố cục đang chạy. Lúc bấm vào thì viền đậm lên + quầng xanh (mục 18/18b). Vì sao phải !important: phần lớn ô nhập được tô màu bởi CSS nằm NGAY TRONG component (thẻ