/* Thanh điều hướng đáy kiểu ứng dụng điện thoại. Mặc định ẨN. Chỉ hiện khi trang chạy dạng webapp (đã cài lên màn hình chính, class .la-webapp do base_site.html gắn) và màn hình hẹp - nên trên web máy tính bàn không có gì thay đổi. */ .app-nav, .app-tren, .app-sheet, .app-sheet-nen, .app-menu-trai, .app-menu-nen { display: none; } .app-mo-sheet, .app-mo-menu { display: none; } /* checkbox điều khiển bảng Cá nhân / menu trái */ .app-mo-tim { display: none; } /* checkbox điều khiển ô tìm kiếm */ /* Bảng thông báo và nền chắn của nó KHÔNG cần luật ẩn riêng: cả hai nằm trong .app-tren, mà thẻ đó đã `display: none` ngay dòng trên - display: none gỡ cả cây con, kể cả thẻ position: fixed bên trong. */ /* Số đỡ tạm cho lúc script đo chưa chạy. Khai ở đây thay vì viết vào phần dự phòng của var(): calc() lồng trong var() lồng trong calc() có máy không phân tích nổi, hỏng cả dòng khai báo là mất luôn chỗ chừa. SỐ NÀY PHẢI KHỚP CHIỀU CAO THẬT ĐO ĐƯỢC: 52px phần thanh (đo ở máy rộng 430px, đệm đáy tối thiểu 4px đã trừ ra) CỘNG đệm đáy thật - đệm ấy theo vùng vuốt Home của từng máy (xem .app-nav), nên phải tính bằng cùng một biểu thức max(...) ở đây, không ghi cứng được. (Calc của chính biến này thì không sao - thứ hỏng là calc() viết trong phần DỰ PHÒNG của var(), như ghi chú ngay trên.) Trước đây để 78px - đoán theo icon 22px + nhãn 11.5px. Lệch 8px, mà #container lấy nó làm chỗ chừa cuối trang, nên MỖI LẦN TẢI TRANG bố cục nhảy 8px ngay khi script đo chạy xong: bấm nút nào cũng thấy phần cuối trang giật một cái. Script vẫn giữ nguyên để lo trường hợp máy đặt cỡ chữ hệ thống to hơn - lúc đó thanh cao thật sự khác. */ :root { /* THANH NỔI (xem .la-webapp .app-nav): 54px thân thanh (đệm đáy 6px) CỘNG khoảng hở dưới thanh - chỗ chừa cuối trang tính từ MÉP TRÊN thanh tới đáy màn hình, nên khoảng hở nằm trong số này. */ --app-nav-cao: calc(54px + max(8px, calc(env(safe-area-inset-bottom, 0px) - 12px))); --app-tren-cao: 56px; } /* ===== CHUYỂN TRANG MÀ HAI THANH ĐỨNG YÊN ============================== Ứng dụng dựng trang ở máy chủ nên bấm nút nào cũng là tải lại cả trang. Trước đây điều đó có nghĩa: thanh trên và thanh đáy biến mất rồi vẽ lại, nhìn ra một cú chớp - "giật cục" đúng như người dùng nói. `@view-transition` bảo trình duyệt tự chụp trang cũ, chụp trang mới, rồi chuyển cảnh giữa hai ảnh đó. Phần tử nào có `view-transition-name` GIỐNG NHAU ở cả hai trang thì nó coi là MỘT phần tử và giữ nguyên, không cho tan rồi hiện lại. Đặt tên cho hai thanh, rồi tắt luôn hoạt ảnh của chúng: kết quả là hai thanh đứng im tuyệt đối trong lúc phần nội dung đổi. ĐÂY KHÔNG PHẢI LÀ BỎ TẢI LẠI TRANG. Trang vẫn tải lại, trạng thái vẫn dựng lại từ máy chủ - chỉ có điều mắt không còn thấy hai thanh nhấp nháy. Muốn thật sự không tải lại thì phải viết lại thành ứng dụng một trang, việc lớn hơn nhiều và rủi ro hơn nhiều. Chỉ bật ở màn hình hẹp: hai thanh này vốn chỉ có ở đó, còn bản web máy tính thì giữ nguyên như cũ, không đụng tới. Máy không hỗ trợ (trình duyệt cũ) thì bỏ qua cả khối, chuyển trang y như trước - không hỏng gì. */ /* ⛔ ĐÃ TẮT (2026-10-19). Safari trên iPhone chụp hai thanh lệch khi trang tràn lên dải giờ (viewport-fit=cover): ảnh chụp thanh đáy NHẢY LÊN đúng một dải giờ, dưới nó một dải trống; và ảnh chụp không có logo / biểu tượng / mặt kính mờ - còn trơ một đĩa xám (người dùng chụp màn hình báo cả hai). spa.js đã giữ hai thanh đứng yên ở hầu hết lần chuyển trang (không dựng lại chúng); chuyển cảnh này chỉ còn chạy ở mấy lần tải trang kiểu thường - đúng những lần lỗi hiện ra. Bỏ hẳn cho chắc: mất một nhịp hoà mờ lúc tải hẳn trang, đổi lại không còn ảnh chụp nào để mà lệch. @media (max-width: 860px) { @view-transition { navigation: auto; } } */ @media (max-width: 860px) { /* --- Thanh trên ------------------------------------------------------- Nút tìm kiếm bên trái, chuông bên phải. Dán dính đỉnh màn hình và ăn luôn phần tai thỏ, để dải màu chạy hết lên trên cùng. KHÔNG còn logo EVN ở đây: nó chỉ lặp lại thứ đã có ở nút giữa thanh đáy (logo EVN là một trong ba logo thay phiên), mà lại chiếm đúng góc dễ bấm nhất bằng một thứ không bấm được. Nút tìm dời vào chỗ đó. Cùng nền và cùng kiểu nút với thanh đáy (Neumorphism) - hai thanh kẹp trên dưới cùng một trang mà khác tông thì nhìn như hai phần mềm. */ /* Trừ trang đăng nhập: lúc đó chưa đăng nhập, tìm kiếm lẫn thông báo đều vô nghĩa, mà thẻ đăng nhập lại là một khối canh giữa màn hình. */ .la-webapp body:not(.login) .app-tren { --app-tren-nut-co: 40px; display: block; /* FIXED, KHÔNG PHẢI STICKY. ------------------------------------------------------------------- Người dùng báo: sau khi hai thanh đều có view-transition-name thì thanh ĐÁY đứng yên hẳn, riêng thanh TRÊN vẫn nháy. Khác biệt về cấu trúc duy nhất còn lại giữa hai thanh là chỗ này: thanh đáy đã `fixed`, thanh trên còn `sticky` (tức vẫn nằm trong dòng chảy của #container). Đổi nốt cho hai thanh giống hệt nhau. NÓI THẲNG CHO NGƯỜI SỬA SAU: chưa chứng minh được cơ chế. Đã dựng trình duyệt không giao diện đo thử hai giả thuyết và CẢ HAI ĐỀU SAI: - "sticky trôi theo dòng cuộn": đo ở cuộn 0 và cuộn 300, kể cả khi giả lập tai thỏ 47px, thanh sticky vẫn ghim đúng đỉnh 0 y như fixed. Không trôi. - "có trang nào đó thiếu .app-tren nên mất phần tử chung": không template con nào ghi đè block header, thanh có mặt ở mọi trang đã đăng nhập. Nên đây là sửa theo kiểu làm cho giống cái đang chạy tốt, không phải theo kiểu đã bắt được thủ phạm. Ai lần ra cơ chế thật thì sửa lại ghi chú này. Đổi sang fixed là thanh KHÔNG còn chiếm chỗ trong dòng nữa, nên phải chừa chỗ ở đầu #container - y như đã chừa ở cuối trang cho thanh đáy. Thiếu phần chừa đó thì nội dung chui lên nằm dưới thanh. */ position: fixed; top: 0; left: 0; right: 0; z-index: 40; margin: 0; /* CHỪA THÊM 12px DƯỚI DẢI GIỜ cho hàng 🔍 / lời chào / 🔔 ra khỏi VỆT NHOÈ của iOS 26. Dải giờ để trong suốt (black-translucent, người dùng chọn giữ để đổi nền là dải đổi màu ngay) thì iOS tự vẽ một lớp nhoè mờ dần loang xuống dưới dải giờ - đè lên nửa trên hai nút (người dùng báo nhiều lần). CSS không tắt được lớp ấy, nên hạ hàng nút xuống thấp hơn. min(12px, inset): máy KHÔNG có dải giờ đè lên trang (inset 0 - Android, máy tính) thì không chừa thêm gì. Script cuối base_site.html đo lại chiều cao thanh nên chỗ chừa đầu trang tự theo. */ padding-top: calc(env(safe-area-inset-top, 0px) + min(12px, env(safe-area-inset-top, 0px))); background: var(--nm-light, #ffffff); /* Nét mép 0 2px 0 dùng --nm-dark: đây là một ĐƯỜNG KẺ đặc, đúng việc của màu đó. Còn lớp toả rộng phải là mực tối trong suốt - --nm-dark toả ra 16px thì thành mảng sáng phủ lên nội dung, cùng lỗi đã làm hai bên nút thanh đáy hiện mảng trắng (xem .app-nav-nen). */ box-shadow: 0 2px 0 var(--nm-dark, #c5cedb), 0 6px 14px rgba(31, 42, 58, 0.10); /* Tên để trình duyệt nhận ra "vẫn là thanh đó" khi sang trang khác, nhờ vậy nó giữ nguyên thay vì cho tan rồi hiện lại. Tên phải DUY NHẤT trong một trang - hai phần tử cùng tên là trình duyệt bỏ cuộc, không chuyển cảnh gì cả. Xem khối @view-transition ở đầu tệp. */ /* (Từng có view-transition-name: pl-thanh-tren - đã bỏ cùng khối @view-transition đầu tệp.) */ } .app-tren-thanh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; } /* Khối co giãn đẩy chuông về sát mép phải, và mang luôn LỜI CHÀO. Gộp vào một khối thay vì thêm thẻ mới: lúc mở ô tìm, lời chào tự nhường chỗ theo luật ẩn .app-tren-dan sẵn có, khỏi phải khai thêm luật ẩn nữa. Tên dài thì cắt bớt bằng dấu ba chấm chứ không cho xuống dòng - xuống dòng là thanh cao vọt lên, đẩy cả trang tụt xuống. */ .app-tren-dan { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; color: var(--nm-ink, #1f2a3a); } /* Logo EVN cuối lời chào, thay chỗ emoji 👋 cũ. ĐO BẰNG `em`, KHÔNG BẰNG `px`: cỡ chữ của dòng này là 13.5px, nhưng máy nào đặt cỡ chữ hệ thống to hơn thì chữ to theo mà con số px thì đứng yên - logo sẽ tụt lại thành một chấm nhỏ xíu bên cạnh dòng chữ to. Để theo `em` là nó luôn cao đúng bằng chữ, y như emoji trước đây. 1.15em vì emoji thường vẽ cao hơn chữ hoa một chút; để đúng 1em thì logo trông nhỏ hơn cái nó vừa thay. vertical-align âm kéo logo xuống cho tâm nó ngang tâm hàng chữ - mặc định `baseline` là đáy logo nằm trên đường chân chữ, nhìn như bị nhấc bổng lên. Con số -0.13em là ĐO RA chứ không ước: ở -0.22em tâm logo nằm thấp hơn tâm hàng chữ 1,2px, bù đúng 1,2px/13.5px ≈ 0.09em thì khớp. Tâm emoji 👋 cũ cũng nằm đúng chỗ ấy, nên logo mới ngồi y chỗ cái nó vừa thay. */ .app-tren-evn { height: 1.15em; width: auto; vertical-align: -0.13em; /* ĐĨA LÓT SÁNG. Logo EVN là sao xanh đậm viền tròn xanh đậm, nền trong suốt. Đặt lên thanh nền TỐI thì xanh đậm trên xám đậm gần như chìm hẳn - đo ảnh chụp thấy chỉ còn lờ mờ. Đúng vấn đề đã gặp với logo ở nút giữa thanh đáy, và chữa bằng đúng biến đã dùng ở đó (xem .app-nav-giua-vong), để hai chỗ cùng một logo thì cùng một cách xử lý. `border-radius: 50%` cho đĩa lót trùng khít vòng tròn sẵn có của logo, không lòi ra bốn góc. Nền sáng thì đĩa trắng nằm trên thanh trắng - không ai thấy, mà cũng không hại gì. */ background: var(--nm-nut-giua, #ffffff); border-radius: 50%; /* Khối cha có overflow: hidden + ellipsis; ảnh không được co lại thành méo khi tên người dùng dài. */ flex: none; } /* Nút nổi mềm rồi lõm khi chạm, đúng kiểu các nút khác của theme. */ .app-tren-nut { display: grid; place-items: center; /* Một con số cho cả nút lẫn bề rộng lúc đóng của vỏ ô tìm - hai thứ đó phải bằng nhau thì lúc đóng vỏ mới trùng khít lên nút, không hở. */ width: var(--app-tren-nut-co, 40px); height: var(--app-tren-nut-co, 40px); flex: none; padding: 0; border: 0; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; color: var(--nm-ink-soft, #64748b); background: var(--nm-bg, #e9edf2); box-shadow: var(--nm-out-sm, 3px 3px 7px #c5cedb, -3px -3px 7px #fff); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .app-tren-nut:active { box-shadow: var(--nm-in-sm, inset 2px 2px 5px #c5cedb, inset -2px -2px 5px #fff); } /* --- Nút 📷 "Chụp ảnh để tìm" (thay chỗ chuông thông báo cũ) ----------- Là