/* ========================================================================== TE — BẢN VÁ GIAO DIỆN ĐIỆN THOẠI Trang: giasutienganhhanoi.com — giao diện con kenhthuonghieu Người viết: đợt rà soát giao diện ngày 08/09/2026 Cách dùng: nạp SAU CÙNG, sau style.css của giao diện con. Xem hướng dẫn ở tệp HUONG-DAN-DUA-LEN.md cùng thư mục. Nguyên tắc đã tuân thủ: - Chỉ chứa quy tắc chữa lỗi đã đo được, không thêm trang trí. - Gần như toàn bộ nằm trong truy vấn bề rộng nhỏ, nên máy tính giữ nguyên. - Trang chủ không bị đụng tới: những quy tắc chạm vào phần thân trang đều gắn thêm body:not(.home). Phần đầu trang và chân trang dùng chung thì có áp cho trang chủ, vì đó là bộ phận chung của cả trang. - Chỉ dùng !important ở đúng năm chỗ, mỗi chỗ có ghi chú lý do ngay bên trên. Cả năm đều để đè kiểu dáng ghi thẳng trong thẻ, hoặc đè một !important sẵn có của giao diện, không có chỗ nào dùng cho tiện. Ba mốc bề rộng được dùng, mỗi mốc khớp với một quy tắc có sẵn: - 849px: mốc mà giao diện mẹ Flatsome 3.15.2 đổi từ giao diện điện thoại sang giao diện máy tính (flatsome.css dùng max-width: 849px). Gần như toàn bộ bản vá dùng mốc này. - 850px: CỐ Ý giữ nguyên cho đúng ba quy tắc dính tới thanh liên hệ dưới cùng, vì chính giao diện con bật thanh đó ở mốc 850 (style.css dòng 975 đặt #azt-contact-footer-outer từ display none sang display block). Xem ghi chú ở đầu PHẦN A dưới đây. - 48em (768px): mốc của khối "ADD MOBILE ONLY CSS HERE" trong style.css. Sửa lần hai ngày 08/09/2026: chữa sáu tác dụng phụ do hai vòng kiểm độc lập đo được. Mỗi chỗ sửa có một dòng ghi chú bắt đầu bằng "SỬA LẦN HAI". ========================================================================== */ /* ========================================================================== PHẦN A — ĐẦU TRANG VÀ CHÂN TRANG DÙNG CHUNG (áp cho mọi trang) ========================================================================== */ /* -------------------------------------------------------------------------- A1 đến A3 dính trực tiếp tới thanh liên hệ dưới cùng, nên dùng đúng mốc 850px của giao diện con — là mốc bật thanh đó lên (style.css dòng 975). SỬA LẦN HAI: cố ý KHÔNG đổi ba quy tắc này sang 849px. Đo được ở bề rộng 850: thanh liên hệ vẫn hiện, nên nếu hạ xuống 849 thì đúng ở bề rộng 850 thanh vẫn che dòng chữ cuối chân trang mà không còn quy tắc nào chừa chỗ. Ba quy tắc này không đụng tới phần đầu trang, nên không gây ra lỗi lệch giao diện máy tính đã đo được ở mục 4 của vòng kiểm. -------------------------------------------------------------------------- */ @media only screen and (max-width: 850px) { /* -------------------------------------------------------------- A1. Nút trợ lý trò chuyện đè lên ba nút Gọi ngay, Whatsapp, Zalo -------------------------------------------------------------- Đo được: ô trò chuyện #te-giasu-assistant nằm ở dải dọc 784 đến 832, thanh liên hệ #azt-contact-footer-outer nằm ở 765 đến 844 và cao 79 điểm ảnh. Vì ô trò chuyện có thứ tự lớp 2147482000 còn thanh liên hệ chỉ có 100, nên khách chạm vào ba nút bên phải là mở khung trò chuyện chứ không gọi được. Cách chữa: nâng ô trò chuyện lên hẳn phía trên thanh liên hệ. Con số 115 điểm ảnh gồm: 79 là chiều cao thanh liên hệ, 28 là phần nhô lên của vòng tròn đỏ "Gọi ngay" (.azt-contact-footer-btn-center-icon đặt top -28px), 8 là khoảng thở. Lần thử đầu chỉ nâng 87 điểm ảnh thì ô trò chuyện vẫn phủ mất phần trên của vòng tròn đỏ, ảnh chụp cho thấy rõ. Quy tắc đặt từ tài liệu ngoài luôn thắng quy tắc :host bên trong shadow DOM của tiện ích trò chuyện, nên không cần !important. SỬA LẦN HAI: nâng lên 115 điểm ảnh thì ô trò chuyện hết đè thanh liên hệ nhưng lại nằm giữa dải dưới màn hình. Đã soi kỹ tiện ích: ô trò chuyện là một thẻ div có shadow DOM, nút bấm 198,17 nhân 48 nằm BÊN TRONG shadow đó với nhãn "Tư vấn cùng Times Edu", và thẻ ngoài KHÔNG đổi lớp hay thuộc tính nào khi khung chat mở ra (đo được: lúc đóng thẻ ngoài 198,17 nhân 48, lúc mở thành 366 nhân 640, thuộc tính vẫn đúng một chữ id). Vì vậy tệp kiểu dáng bên ngoài không có cách nào thu nhỏ riêng lúc chưa mở: mọi cách đặt bề rộng hay cắt bớt đều bóp luôn khung chat lúc mở. Cách chữa làm được bằng kiểu dáng là cho ô nép sát mép phải (giảm khoảng hở từ 12 xuống 4 điểm ảnh, lấy lại 8 điểm ảnh bề ngang cho phần nội dung bên trái), cộng với việc chừa đủ đệm đáy ở mục A2 để ô không bao giờ đè lên dòng chữ cuối chân trang nữa. Muốn thu nhỏ thật thành nút tròn lúc chưa mở thì phải sửa trong mã của chính tiện ích trò chuyện — xem mục H2 trong HUONG-DAN-DUA-LEN.md. */ #te-giasu-assistant { bottom: calc(79px + 28px + env(safe-area-inset-bottom, 0px) + 8px); right: 4px; } /* -------------------------------------------------------------- A2. Dòng thông tin công ty ở cuối chân trang bị thanh liên hệ che -------------------------------------------------------------- Đo được: cuộn hết trang thì đoạn "CÔNG TY CỔ PHẦN CÔNG NGHỆ GIÁO DỤC TIMES EDU" nằm ở 751 đến 844, mà thanh liên hệ bắt đầu từ 765, nên 79 điểm ảnh cuối bị che vĩnh viễn. Thẻ body đang có padding-bottom là 0. Cách chữa: chừa dưới thân trang đủ chỗ cho MỌI thứ đang neo cứng ở đáy. SỬA LẦN HAI: lần đầu chỉ chừa 79 điểm ảnh, đúng bằng chiều cao thanh liên hệ, nên đoạn thông tin công ty thoát khỏi thanh nhưng lại chui xuống dưới ô trò chuyện — đo được bị che 25 phần trăm ở khung 390 nhân 844 và 22 phần trăm ở khung 360 nhân 740. Nay cộng đủ cả phần ô trò chuyện: 79 chiều cao thanh liên hệ + 28 phần nhô lên của vòng tròn đỏ "Gọi ngay" (top -28px) + 8 khoảng thở giữa vòng tròn đỏ và ô trò chuyện (đúng con số ở mục A1) + 48 chiều cao ô trò chuyện lúc chưa mở (đo được 48, do .launch trong shadow DOM đặt min-height 48px) + 8 khoảng thở giữa ô trò chuyện và dòng chữ cuối = 171 điểm ảnh, cộng thêm vùng an toàn đáy máy. */ body { padding-bottom: calc(79px + 28px + 8px + 48px + 8px + env(safe-area-inset-bottom, 0px)); } /* -------------------------------------------------------------- A3. Thanh liên hệ dưới cùng không chừa vùng an toàn đáy máy -------------------------------------------------------------- Đo được: nhãn "Giảng Viên", "Whatsapp", "Zalo" chỉ cách mép dưới màn hình 15 điểm ảnh, trong khi thanh gạt về màn hình chính của iPhone chiếm khoảng 34 điểm ảnh cuối. Cách chữa: giữ nguyên kiểu đường viền trắng của giao diện, chỉ nới bề dày theo vùng an toàn của máy. Cố ý dùng border chứ không đổi sang padding, vì lớp trang trí #azt-contact-footer:after neo theo mép trong của đường viền, đổi sang padding sẽ làm hình nền tụt xuống 15 điểm ảnh. Lưu ý: env(safe-area-inset-bottom) chỉ có giá trị thật khi thẻ meta viewport có viewport-fit=cover — xem mục H1 trong HUONG-DAN-DUA-LEN.md. */ #azt-contact-footer { border-bottom-width: calc(15px + env(safe-area-inset-bottom, 0px)); } } /* -------------------------------------------------------------- A1b. Nút "lên đầu trang" nằm lọt hẳn dưới ô trò chuyện -------------------------------------------------------------- SỬA LẦN HAI. Đây chính là "chỗ khác" mà ô trò chuyện che, đo được thật: ở ba bề rộng 360, 390, 414 trên mọi trang đã thử, chạm vào bên trong ô trò chuyện có điểm rơi trúng a#top-link.back-to-top — nghĩa là nút lên đầu trang bấm không được. Đo cụ thể ở 390: nút lên đầu trang nằm ở dải dọc 715,2 đến 754, ô trò chuyện ở 700 đến 748, chồng nhau 33 điểm ảnh chiều cao. Lỗi này có sẵn từ trước bản vá và lần vá đầu chưa chữa. Nguyên nhân: style.css dòng 4456 đặt .back-to-top{bottom:90px !important} trong khối 48em, còn tiện ích trò chuyện tự đặt bottom 96px cho màn hình nhỏ, nên hai khối neo đúng chồng lên nhau. Cách chữa: xếp chồng ba khối ở góc dưới bên phải theo đúng thứ tự — thanh liên hệ dưới cùng, rồi ô trò chuyện, rồi nút lên đầu trang trên cùng. Con số 171 = 79 + 28 + 8 + 48 + 8, đúng bằng đệm đáy ở mục A2. CỐ Ý dùng mốc 48em chứ không phải 849px, cho trùng đúng mốc của quy tắc gốc. Đã đo ở 849 và 850: ở đó nút lên đầu trang vốn đã nằm ở bottom 200, tức trên hẳn ô trò chuyện, và bên cạnh còn một nút Whatsapp neo ở bottom 170; kéo nút lên đầu trang xuống 171 ở dải đó chỉ làm hai nút chồng nhau thêm, nên không đụng tới. !important thứ nhất: bắt buộc, vì quy tắc gốc của giao diện con đã dùng !important nên không có cách nào đè lại bằng độ ưu tiên. */ @media only screen and (max-width: 48em) { #top-link, .back-to-top { bottom: calc(79px + 28px + 8px + 48px + 8px + env(safe-area-inset-bottom, 0px)) !important; } /* A6 (vùng bấm 44 điểm ảnh) cho riêng nút lên đầu trang: đo được ở bề rộng 360 nút chỉ 39 nhân 39. Đặt chung chỗ với quy tắc dời vị trí ngay trên, và cùng mốc 48em, vì từ 769 điểm ảnh trở lên còn một nút Whatsapp nổi nằm sát bên — xem ghi chú ở mục A6. */ #top-link { width: 44px; height: 44px; line-height: 44px; } } /* -------------------------------------------------------------------------- Từ A4 trở đi là phần đầu trang và chân trang thường, nên dùng mốc 849px của giao diện mẹ Flatsome. SỬA LẦN HAI: trước đây cả khối để 850px, mà Flatsome đổi sang giao diện máy tính ngay từ 850. Đo được ở đúng bề rộng 850: quy tắc A6 nới vùng bấm làm đầu trang cao thêm 21,65 điểm ảnh (139,94 thành 161,59) và đẩy cả trang tụt xuống. Hạ mốc xuống 849 là hết. -------------------------------------------------------------------------- */ @media only screen and (max-width: 849px) { /* -------------------------------------------------------------- A4. Dải trống cố định cao 12 điểm ảnh nằm chắn sát đáy màn hình -------------------------------------------------------------- Đo được: #menu-stick-thok là khối position fixed, x từ 0 đến 390, y từ 832 đến 844, không có phần tử con nào, bên trong chỉ có khoảng trắng. Nó sinh ra từ dynamic_sidebar('menu-mobi') đang rỗng. Không dùng được :empty vì bên trong có một ký tự khoảng trắng, nên dùng :not(:has(*)) — nghĩa là ẩn khi không có phần tử con nào. Ngày nào vùng chứa tiện ích có nội dung trở lại thì khối tự hiện lại. */ #menu-stick-thok:not(:has(*)) { display: none; } /* -------------------------------------------------------------- A5. Nút tìm kiếm trên đầu trang là chữ trắng trên nền trắng -------------------------------------------------------------- Đo được: i.icon-search có màu tính toán rgba(255,255,255,0.8) còn nền thật phía sau là rgb(255,255,255), độ tương phản 1 trên 1. Nguyên nhân là lớp nav-dark của Flatsome. Giao diện con đã chữa cho giỏ hàng bằng .icon-shopping-basket{color:#b38b4d} nhưng bỏ sót cái kính lúp. Cách chữa: cho kính lúp cùng màu vàng đồng với giỏ hàng. */ .header-main li.header-search > a, .header-main li.header-search > a i, .header-main .icon-search { color: #b38b4d; } /* -------------------------------------------------------------- A6. Vùng bấm của các nút dùng chung nhỏ hơn 44 điểm ảnh -------------------------------------------------------------- Đo được ở bề rộng 360: nút mở thực đơn 33 nhân 32, nút tìm kiếm 16 nhân 27, nút giỏ hàng 23 nhân 32, hai số điện thoại trong chân trang cao 16, nút lên đầu trang 39 nhân 39. Cách chữa: nới vùng bấm cho đủ 44 điểm ảnh mà không đổi cỡ hình vẽ. */ .header-main a[data-open="#main-menu"], .header-main li.header-search > a, .header-main a.header-cart-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Hai số điện thoại trong chân trang: chỉ thêm đệm dọc, cố ý GIỮ NGUYÊN display là inline. Đã thử đổi sang inline-block và sang inline-flex thì hộp gói chúng chỉ rộng 49 điểm ảnh nên chữ "Tổng đài CSKH" bị bẻ thành ba dòng và tràn ra khỏi ô vàng: đo được liên kết cao 132 điểm ảnh và ô mẹ cũng cao 132, trong khi bình thường cả hai chỉ cao 16 và 20. Với phần tử inline thì đệm dọc nới đúng vùng chạm mà không đẩy dòng nào, đo lại được vùng chạm cao 44 điểm ảnh trong khi ô mẹ vẫn cao 20 như cũ. */ #footer a[href^="tel:"] { padding-top: 14px; padding-bottom: 14px; } /* Nút lên đầu trang được nới ở khối 48em phía trên, cùng chỗ với quy tắc dời vị trí của nó — xem mục A1b. SỬA LẦN HAI: trước đây quy tắc nới nằm ở đây, tức áp tới tận 849 điểm ảnh. Đo được ở 849: từ 769 điểm ảnh trở lên giao diện con hiện thêm một nút Whatsapp nổi (span.icon-whatsapp-des, 60 nhân 60, neo ở bottom 170) nằm ngay cạnh nút lên đầu trang và vốn đã chồng lên nhau 1208 điểm ảnh vuông. Nới nút lên đầu trang từ 38,8 lên 44 ở dải đó làm chỗ chồng nhau nặng thêm thành 1345. Vì lỗi vùng bấm chỉ đo được ở bề rộng điện thoại, nay chỉ nới trong khối 48em. */ /* -------------------------------------------------------------- A7. Chữ chân trang nhỏ hơn 15 điểm ảnh -------------------------------------------------------------- Phụ huynh lớn tuổi đọc các con số liên hệ này rất vất vả. Đã soi từng nút chữ trong chân trang và tìm đúng quy tắc sinh ra cỡ chữ: 13 điểm ảnh — dòng "Tổng đài CSKH" và số 036.203.8998, do style.css dòng 1456 .hotline_wrapper .hotline a { font-size: 13px } 13 điểm ảnh — đoạn thông tin công ty ở đáy chân trang, do style.css dòng 1403 .footer-2 p { font-size: 13px } 14,4 điểm ảnh — khối mã số thuế và số điện thoại, do thẻ bọc .text của trình dựng đặt cỡ chữ 90 phần trăm Còn lại đã sẵn từ 16 điểm ảnh trở lên: ba tiêu đề cột 18, năm liên kết chính sách 16, khối địa chỉ 16. SỬA LẦN HAI: bản trước đặt cỡ chữ 15 điểm ảnh thẳng lên thẻ cha .footer-wrapper nên KÉO NHỎ luôn những phần vốn đã lớn — ba tiêu đề cột tụt 18 xuống 16,875 điểm ảnh, năm liên kết chính sách tụt 16 xuống 15 và vùng chạm của chúng tụt 40 xuống 37,5 điểm ảnh, ngược hẳn mục đích. Mà dòng "Tổng đài CSKH" cần nâng thì vẫn nguyên 13, vì bộ chọn .hotline_wrapper .hotline a của giao diện con có độ ưu tiên cao hơn .footer-wrapper a. Nay chỉ nhắm đúng ba nhóm chữ đang nhỏ hơn 15 điểm ảnh, không đặt cỡ chữ lên thẻ cha nữa. */ .footer-wrapper .hotline_wrapper .hotline a { font-size: 15px; } .footer-wrapper .footer-2 p, .footer-wrapper .footer-2 li { font-size: 15px; line-height: 1.6; } /* Thẻ bọc .text chỉ dùng cho khối chữ tự do của trình dựng. Trong chân trang chỉ có đúng khối mã số thuế dùng nó, và khối đó đang 14,4 điểm ảnh. Cố ý KHÔNG chạm vào .section-title-main (18) và .ux-menu-link__text (16). */ .footer-wrapper .text, .footer-wrapper .text p, .footer-wrapper .text li { font-size: 15px; line-height: 1.6; } /* -------------------------------------------------------------- A8. Tệp trang trí footprint.png trả về 404 trên mọi lần tải trang -------------------------------------------------------------- Đo được: mỗi lần mở trang, trình duyệt gọi /wp-content/uploads/2020/08/footprint.png và nhận 404. Ảnh này chỉ là hoa văn nền, không mang thông tin. Cách chữa tạm bằng kiểu dáng: bỏ lời gọi ảnh, giữ nguyên nền trắng. Cách chữa gốc là tải lại đúng tệp ảnh — xem mục H4 trong hướng dẫn. */ .ld2-sec1-right { background-image: none; } } /* ========================================================================== PHẦN B — THANH "LUYỆN THI" DÁN TRÊN ĐỈNH ========================================================================== */ @media only screen and (max-width: 849px) { /* -------------------------------------------------------------- B1. Thanh bị đặt cứng bề rộng 800 điểm ảnh nên mục cuối bị cắt -------------------------------------------------------------- Đo được ở bề rộng 390: thanh rộng 800 điểm ảnh, danh sách có scrollWidth bằng clientWidth bằng 800 nên hoàn toàn không cuộn được. Bốn mục nằm ở 5-101, 116-188, 203-280 và 295-397; mục "Luyện thi A Level" vượt mép phải màn hình 390 nên đọc thành "Luyện thi A Leve". Ở 360 mất 37 điểm ảnh, ở 390 mất 7 điểm ảnh, từ 414 trở lên thì đủ. Nguyên nhân: style.css dòng 674-681 đặt width 800px, đồng thời khoá trục ngang (overflow-x hidden) và mở trục dọc (overflow-y scroll), tức là ngược hẳn với nhu cầu. Cách chữa: cho thanh vừa khung màn hình và vuốt ngang được thật. B2. Chữ trên thanh chỉ 12 điểm ảnh, nhỏ nhất trang B3. Bốn liên kết chỉ cao 15 điểm ảnh, dưới mức chạm 44 điểm ảnh Hai lỗi này chữa luôn ở đây bằng cách nâng cỡ chữ và cho mỗi liên kết cao trọn thanh. Chiều cao thanh vẫn giữ đúng 46 điểm ảnh như cũ (bỏ 10 điểm ảnh đệm trên dưới, bù bằng chiều cao dòng 46), nên quy tắc #header{margin-top:65px} của giao diện con không bị lệch. SỬA LẦN HAI: lần đầu nâng cỡ chữ từ 12 lên 14, mục cuối "Luyện thi A Level" vì thế bị đẩy sâu thêm ra ngoài mép phải. Nay để 13 điểm ảnh — vẫn dễ đọc hơn 12 mà mục cuối lùi lại gần mép — và thêm dấu hiệu cho khách biết thanh này vuốt ngang được (xem ghi chú B4 ngay dưới). */ #top-bar-luyen-thi { width: 100%; left: 0; right: 0; box-sizing: border-box; padding: 0; } #top-bar-luyen-thi ul { width: auto; max-width: 100%; margin: 0; padding: 0 12px; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #top-bar-luyen-thi ul::-webkit-scrollbar { display: none; } /* -------------------------------------------------------------- B4. Thanh vuốt ngang được nhưng không có dấu hiệu nào báo cho khách -------------------------------------------------------------- SỬA LẦN HAI: thêm vệt tối mỏng ở mép còn nội dung. Cách làm: bốn lớp nền chồng nhau. Hai lớp màu nền thật của thanh (đo được backgroundColor là rgb(179, 139, 77)) gắn background-attachment local nên trôi theo nội dung; hai lớp vệt tối gắn scroll nên đứng yên theo khung. Khi đã vuốt hết một bên thì lớp màu nền trôi tới che đúng vệt tối bên đó, nên vệt tự tắt. Không dùng đoạn mã chạy nào, và trên máy tính quy tắc này không tồn tại vì nằm trong truy vấn bề rộng nhỏ. */ #top-bar-luyen-thi ul { background-image: linear-gradient(to right, rgb(179, 139, 77) 40%, rgba(179, 139, 77, 0)), linear-gradient(to left, rgb(179, 139, 77) 40%, rgba(179, 139, 77, 0)), linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)), linear-gradient(to left, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%; background-attachment: local, local, scroll, scroll; } #top-bar-luyen-thi ul li { float: none; flex: 0 0 auto; margin: 0 14px 0 0; /* SỬA LẦN HAI: 14 xuống 13 điểm ảnh, xem lý do ở ghi chú B2 bên trên. */ font-size: 13px; } #top-bar-luyen-thi ul li:last-child { margin-right: 0; } #top-bar-luyen-thi ul li a { display: block; min-height: 46px; line-height: 46px; padding: 0 2px; } } /* ========================================================================== PHẦN C — HỘP ĐĂNG KÝ HỌC THỬ (nằm trong chân trang dùng chung) ========================================================================== */ @media only screen and (max-width: 849px) { /* -------------------------------------------------------------- C1. Hộp bị cắt mất đỉnh khi bàn phím bật lên -------------------------------------------------------------- Đo được khi khung nhìn còn 390 nhân 400: hộp có đỉnh ở -44 và đáy ở 444, tức cao 488 điểm ảnh; nút đóng nằm ở toạ độ dọc -34 nên đã ra ngoài màn hình, khách bị kẹt trong hộp. Nguyên nhân: .popup-overlay dùng display flex kèm align-items center; khi nội dung cao hơn khung nhìn thì cách căn giữa này đẩy phần trên ra ngoài và không cuộn lại được. Cách chữa: căn từ trên xuống, cho phép cuộn dọc, chừa đệm dưới để nút gửi không nằm dưới thanh liên hệ. Dùng margin auto trên hộp con để khi nội dung vẫn thấp hơn màn hình thì hộp còn được căn giữa như cũ. */ .popup-overlay { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 0 calc(100px + env(safe-area-inset-bottom, 0px)); } .popup-overlay .popup-content, .popup-overlay .popup-box { margin: auto; width: min(420px, calc(100% - 32px)); max-width: calc(100% - 32px); } /* -------------------------------------------------------------- C2. Nút đóng hộp chỉ rộng 12 điểm ảnh -------------------------------------------------------------- Đo được: .popup-overlay .close-btn là 11,5 nhân 32 điểm ảnh, trong khi mức tối thiểu dễ chạm là 44 nhân 44. Khách muốn bỏ qua hộp phải chạm đi chạm lại nhiều lần. */ /* Tiêu đề hộp chỉ 13 điểm ảnh, nhỏ hơn chữ thân bài */ .popup-overlay .popup-content strong, .popup-overlay .popup-box strong { font-size: 16px; line-height: 1.4; } .popup-overlay .close-btn { width: 44px; height: 44px; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; } /* -------------------------------------------------------------- C3. Nút trợ lý trò chuyện đè lên nút gửi của hộp đăng ký -------------------------------------------------------------- Đo được: nút gửi trải từ 316 đến 358, ô trò chuyện trải từ 340 đến 388, che 18 trên 42 điểm ảnh chiều cao nút. Ô trò chuyện có thứ tự lớp 2147482000, lớn hơn 99999 của hộp, nên luôn nằm trên. Cách chữa: giấu ô trò chuyện trong lúc hộp đang mở. */ body:has(.popup-overlay.show) #te-giasu-assistant { display: none; } } /* ========================================================================== PHẦN D — Ô NHẬP CỦA MỌI BIỂU MẪU ========================================================================== */ @media only screen and (max-width: 849px) { /* -------------------------------------------------------------- D1. Chạm vào ô nhập là màn hình iPhone tự phóng to -------------------------------------------------------------- Đo được: hai ô Họ và tên, Số điện thoại đều có cỡ chữ 15,52 điểm ảnh và cao 39 điểm ảnh; ô tìm kiếm trong bảng chọn 13,19 điểm ảnh và cao 33 điểm ảnh; ô Username, Password của WooCommerce cũng 15,52 điểm ảnh. Nguyên nhân là quy tắc font-size .97em, height 2.507em trong flatsome.css bản 3.15.2. Safari trên iPhone lấy 16 điểm ảnh làm mốc: dưới mốc đó là nó tự phóng to cả trang khi khách chạm vào ô. D2. Ô nhập thấp hơn mức chạm thoải mái Cùng lúc nâng chiều cao lên 48 điểm ảnh cho ngón tay chạm chắc. Không cần !important: tệp này nạp sau flatsome.css, các bộ chọn dưới đây có độ ưu tiên bằng hoặc cao hơn bộ chọn của Flatsome. SỬA LẦN HAI: lần đầu viết font-size: 16px như một con số tuyệt đối nên THU NHỎ luôn ô tìm kiếm bung ra từ nút kính lúp — đo được ô đó tụt từ 23,28 xuống 16 điểm ảnh ở bề rộng 390 và từ 26,772 xuống 16 ở bề rộng 768, nút gửi đi kèm tụt từ 58,2 hoặc 66,93 xuống 48. 16 điểm ảnh phải là mức SÀN chống iPhone tự phóng to, không phải mức cố định. Nay dùng max(16px, .97em): .97em chính là công thức của flatsome.css nên ô nào vốn lớn hơn 16 thì tính ra đúng cỡ cũ và giữ nguyên, ô nào nhỏ hơn thì được nâng lên đúng 16. Cũng bỏ height: auto. Flatsome đặt height: 2.507em; khi 2.507em nhỏ hơn 48 thì min-height 48 đã tự thắng, còn khi ô vốn cao hơn (ô tìm kiếm lớn cao 58,363) thì giữ nguyên chiều cao cũ thay vì bị ép về 48. Đệm ngang cũng lấy mức sàn để không bóp hẹp ô lớn: .75em là số của Flatsome, 14px là mức tối thiểu dễ chạm. */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], select, textarea, .ff-el-form-control { font-size: max(16px, .97em); min-height: 48px; padding: 12px max(14px, .75em); } textarea, textarea.ff-el-form-control { min-height: 96px; } /* SỬA LẦN HAI: min-height cũng phải là mức sàn. Flatsome đặt min-height: 2.5em cho mọi nút, nên nút của ô tìm kiếm lớn vốn cao 58,2 điểm ảnh; viết 48px cứng là kéo tụt nó xuống 48. Bỏ luôn font-size: 16px ở đây vì đã đo mọi nút gửi trên trang đều sẵn 16 điểm ảnh trở lên, không có nút nào cần nâng, mà đặt cứng thì lại có nguy cơ kéo nhỏ nút khác. */ .ff-btn-submit, .popup-overlay button[type="submit"] { min-height: max(48px, 2.5em); } /* -------------------------------------------------------------- D3. Nhãn ô nhập chỉ 14,4 điểm ảnh -------------------------------------------------------------- Đo được: thẻ label "Username or email address" của biểu mẫu đăng nhập WooCommerce là 14,4 điểm ảnh. Nhãn là chỗ khách đọc để biết ô hỏi gì, nên phải rõ hơn chữ gợi ý mờ bên trong ô. SỬA LẦN HAI: loại thêm .screen-reader-text. Đo được ba thẻ label "Search for:" của ô tìm kiếm mang lớp này, cỡ chữ 10,8 — 21,6 — 12,24 điểm ảnh; chúng bị cắt còn 1 nhân 1 điểm ảnh nên mắt không thấy, nhưng quy tắc cũ vẫn kéo cái 21,6 xuống 15. Không đổi gì trên màn hình, chỉ để bản vá giữ đúng nguyên tắc: không có chỗ nào chữ bị nhỏ đi. */ .ff-el-input--label, .ff-el-input--label label, form label:not(.screen-reader-text), .woocommerce form label:not(.screen-reader-text) { font-size: 15px; } /* Ô tìm kiếm trong bảng chọn trượt bên cũng thuộc nhóm này */ #main-menu .searchform input[type="search"], #main-menu .searchform input[name="s"], .off-canvas .searchform input { /* SỬA LẦN HAI: cùng lý do như trên, 16 điểm ảnh là mức sàn. */ font-size: max(16px, .97em); min-height: 48px; } /* Nút gửi của ô tìm kiếm phải cao bằng ô, nếu không sẽ lệch hàng. SỬA LẦN HAI: lấy mức sàn max(48px, 2.5em) để không kéo tụt nút của ô tìm kiếm lớn từ 58,2 xuống 48. */ .searchform .submit-button { min-height: max(48px, 2.5em); } } /* ========================================================================== PHẦN E — THÂN TRANG (KHÔNG áp cho trang chủ) Mọi quy tắc dưới đây đều gắn body:not(.home) để đợt dựng lại trang chủ ở việc khác không bị ảnh hưởng. Riêng E5 gắn body.archive và body.search, hai lớp này không bao giờ đi cùng lớp home nên cũng không đụng trang chủ. ========================================================================== */ /* -------------------------------------------------------------- E1. Hồ sơ giảng viên bị đẩy lệch ra ngoài mép trái màn hình -------------------------------------------------------------- Đo được ở bề rộng 390 trên trang /doi-ngu-gia-su-times-edu/: div.row.ld-team-gs có mép trái -100 và mép phải 290, nên tên thầy cô đọc thành "ầy Vũ Trung Hiếu", chức danh thành "ảng viên Sinh học", còn khoảng 130 điểm ảnh bên phải màn hình bỏ trống. Nguyên nhân: style.css dòng 4421 viết .ld-team-gs{margin:-100px} — viết tắt một giá trị nên âm cả bốn phía, kéo khối sang trái 100 điểm ảnh. Cách chữa: chỉ trả lại ba phía trái, phải, dưới về 0; giữ nguyên phần kéo lên trên 100 điểm ảnh mà giao diện cố ý làm. Đặt đúng mốc 48em để trùng mốc của quy tắc gốc, không lấn sang dải 769 đến 849 điểm ảnh nơi giao diện đang dùng margin-top -300px. */ @media only screen and (max-width: 48em) { body:not(.home) .ld-team-gs { margin-left: 0; margin-right: 0; margin-bottom: 0; } } @media only screen and (max-width: 849px) { /* -------------------------------------------------------------- E2. Bảng bị cắt mất cột cuối và không cuộn tới xem được -------------------------------------------------------------- Đo được trên /hoc-phi-times-edu/ ở bề rộng 390: bảng thứ nhất rộng 437 mép phải 452, bảng thứ hai rộng 441 mép phải 456, trong khi thẻ cha col-inner chỉ rộng 360 và không cuộn được. Cột thứ tư "Học phí 72 buổi" bị cắt hơn nửa, khách chỉ đọc được "Họ", "(10" và các con số cụt. Thẻ html đang đặt overflow-x hidden nên cuộn ngang cũng vô ích. Đo được trên /gia-su-tieng-anh-cap-toc.html ở bề rộng 360: năm bảng ba cột đều rộng đúng 400 điểm ảnh trong khung 335, do quy tắc .single table{min-width:400px} ở style.css dòng 1301. Cách chữa: bỏ bề rộng tối thiểu, giảm đệm ô, và biến chính thẻ bảng thành một khung cuộn ngang. Vì thead và tbody vẫn giữ vai trò cũ nên trình duyệt gộp chúng vào cùng một bảng ẩn, các cột vẫn thẳng hàng. Bẫy đã gặp khi thử lần đầu: bảng trang Học phí có thuộc tính style ghi thẳng trong bài là "height: 168px; width: 98.681%". Với display table thì 168 chỉ là chiều cao tối thiểu, nhưng khi đổi sang display block nó thành chiều cao cố định, bảng bị cắt còn 168 điểm ảnh trong khi nội dung cao 590, ảnh chụp lần thử đó chỉ còn thấy hàng tiêu đề và một dòng rưỡi. Vì vậy phải trả chiều cao về auto, và phải dùng !important vì kiểu dáng ghi thẳng trong thẻ luôn thắng tệp kiểu dáng. */ body:not(.home) #content table { display: block; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; /* !important thứ hai: thẻ table có style="height: 168px" ghi thẳng trong bài; không trả về auto thì bảng bị cắt mất hơn hai phần ba số dòng khi đổi sang display block. */ height: auto !important; /* !important thứ ba: cùng thẻ table đó có style="width: 98.681%"; để nguyên thì bảng chỉ được 320 điểm ảnh trong khung 324, thiếu đúng 4 điểm ảnh nên cột giá cuối vẫn bị khuất một chút. */ width: 100% !important; } /* !important thứ tư: style.css dòng 1316 đang đặt ".single table th, table td { padding: 12px 15px !important }". Không có !important ở đây thì không đè được, bảng vẫn tràn. Đã đo thử bốn mức để chọn con số dưới đây, ở bề rộng 360 trên trang Học phí, lấy phần nội dung còn thiếu so với khung bảng làm thước: cỡ chữ 14 đệm 4 → thiếu 10 và 14 điểm ảnh, vẫn phải vuốt cỡ chữ 13 đệm 4 → thiếu 0, bảng lọt hẳn cỡ chữ 13 đệm 3 → thiếu 0 cỡ chữ 13,5 đệm 3 → thiếu 0 Chọn cỡ chữ 13 kèm đệm 4 vì ô còn chỗ thở mà bảng vẫn lọt hẳn khung. Bảng số liệu dày đặc để 13 điểm ảnh là mức thường gặp; các phần chữ đọc liền như thân bài và chân trang vẫn giữ từ 15 điểm ảnh trở lên. */ body:not(.home) #content table td, body:not(.home) #content table th { padding: 8px 4px !important; font-size: 13px; } /* -------------------------------------------------------------- E3. Chữ trong bài căn đều hai bên nên khoảng trắng giãn rộng -------------------------------------------------------------- Đo được trên /gia-su-tieng-anh-cap-toc.html ở bề rộng 390: từng thẻ đoạn văn có text-align justify, cột chữ chỉ rộng 365 điểm ảnh, mỗi dòng sáu tới tám từ. Tiếng Việt không cắt từ bằng gạch nối nên toàn bộ khoảng dư bị dồn vào khoảng trắng, tạo vệt trắng chạy dọc đoạn. Nguyên nhân: style.css dòng 799-801 .type-post p{text-align:justify}. Cách chữa: bỏ căn đều trên điện thoại, máy tính giữ nguyên. */ body:not(.home) .type-post p, body:not(.home) .single-page.entry-content p { text-align: left; } /* -------------------------------------------------------------- E4. Nút chuyển trang nhỏ hơn mức chạm thoải mái -------------------------------------------------------------- Đo được tại /tin-tuc ở bề rộng 390: mỗi ô rộng 34 và cao 34 điểm ảnh, cỡ chữ 14,96 điểm ảnh, khoảng cách giữa các ô chỉ 11 điểm ảnh nên ngón tay dễ chạm nhầm sang ô bên cạnh. */ body:not(.home) .page-numbers li a, body:not(.home) .page-numbers li > span { min-width: 44px; min-height: 44px; line-height: 44px; font-size: 16px; padding: 0 4px; } body:not(.home) .page-numbers li { margin: 0 4px 8px; } /* -------------------------------------------------------------- E5. Ảnh đại diện bài viết ở trang danh mục và tìm kiếm bị cắt chữ -------------------------------------------------------------- Đo được tại /?s=ielts và /ielts-tin-tuc/ ở bề rộng 390: mọi ảnh đều bị nhét vào khung 358 nhân 200, tỷ lệ 1,79, object-fit cover. Ảnh dọc 1067 nhân 1280 chỉ còn thấy 47 phần trăm, ảnh bìa có chữ thì phần tiêu đề nằm ngoài khung bị cắt mất. Cách chữa: nới khung cho gần tỷ lệ ảnh gốc và neo phần trên của ảnh, nơi thường đặt tiêu đề. */ /* !important thứ năm: khung ảnh mang kiểu dáng ghi thẳng trong thẻ là style="padding-top:56%", do tuỳ chọn chiều cao ảnh của giao diện mẹ Flatsome sinh ra. Lần thử không có !important đã đo lại đúng tỷ lệ cũ 1,79 nên không đổi được gì. Kiểu dáng ghi thẳng trong thẻ luôn thắng tệp kiểu dáng, nên chỗ này bắt buộc phải có !important. Sửa ở phần Tuỳ biến thì đổi cả trên máy tính, mà máy tính đang không có lỗi này, nên chọn cách đè trong truy vấn bề rộng nhỏ để chỉ điện thoại đổi. SỬA LẦN HAI: lần đầu viết body:not(.home) nên quy tắc trùm luôn sáu trang chương trình (igcse-online, sat-online, a-level-online, ib-online, ap-online, ielts-online-2). Ở đó thẻ bài viết cũng có lớp .post-item .image-cover nhưng đặt tỷ lệ khác — đo được style="padding-top:75%", khung ảnh 360 nhân 270 — nên bị bóp ngắn còn 223,19 điểm ảnh ở bề rộng 390 và 477,39 ở bề rộng lớn hơn. Nay thu hẹp đúng hai chỗ đã đo được lỗi: trang danh mục (body có lớp archive) và trang tìm kiếm (body có lớp search). Hai lớp này không bao giờ đi cùng lớp home nên không cần thêm :not(.home). */ body.archive .post-item .image-cover, body.search .post-item .image-cover { padding-top: 62% !important; } body.archive .post-item .image-cover img, body.search .post-item .image-cover img { object-position: center top; } }