/* ========================================================================== KIỂU GIAO DIỆN "LIQUID GLASS" - lớp kính trong mờ kiểu iOS 26. GIAO DIỆN DUY NHẤT của hệ thống - luôn bật, không còn nút bật/tắt (người dùng yêu cầu bỏ các giao diện khác). Mọi luật mở đầu bằng html:root: độ ưu tiên (0,1,1) cao hơn luật gốc neumorphism.css cùng tên. MỨC KÍNH chỉnh bằng thanh trượt "Trong suốt <-> Phủ màu" (mục Cá nhân trên điện thoại, dải liên kết máy tính) - xem --kinh-muc bên dưới và templates/admin/_thanh_truot_kinh.html. ĐỘC LẬP VỚI SÁNG / TỐI: kính có hai bản, theo đúng nút "Đổi nền sáng / tối" đang có. Hai lựa chọn không trói vào nhau. CÁCH LÀM: KHÔNG viết lại từng trang. Cả hệ thống vẽ bằng một bộ biến --nm-* (nền, viền, bóng nổi, bóng lõm) dùng ở khoảng 600 chỗ. Ở đây chỉ định nghĩa lại bộ biến đó thành bản kính: - mặt (--nm-bg / --nm-surface / --nm-light) thành TRẮNG TRONG SUỐT, - bóng nổi neumorphism (hai bóng sáng-tối chéo nhau) thành viền sáng mảnh ở mép trên + bóng đổ mềm phía dưới - đúng kiểu viên kính, - bóng lõm thành một lớp tối rất nhạt bên trong. Trang nào thêm sau mà dùng biến là tự có kính, khỏi phải nhớ sửa ở đây. NỀN PHÍA SAU: kính chỉ ra kính khi phía sau nó có màu. Nền xám phẳng của neumorphism thì mặt kính trong suốt nhìn y như mặt xám - nên trang được trải một lớp màu loang (body::before, cố định khi cuộn). HIỆU ỨNG MỜ (backdrop-filter) CHỈ Ở CÁC THANH NỔI - cố ý: 1. Nó chỉ thấy được khi có nội dung TRÔI QUA phía sau: thanh trên, thanh đáy, bảng Cá nhân, bảng chuông. Thẻ nội dung nằm yên trên nền loang mượt thì làm mờ cũng chẳng khác gì. 2. backdrop-filter biến thẻ thành KHUNG CHỨA cho mọi thẻ position: fixed bên trong. Gắn lên thẻ nội dung là các lớp phủ trong đó (xem ảnh phóng to, khung sửa ô, bảng chọn số câu...) bị giam vào thẻ thay vì phủ kín màn hình. Thanh trên chứa bảng chuông position: fixed, nên ở đó lớp mờ đặt vào một thẻ giả ::before chứ không đặt lên thanh. ========================================================================== */ /* --- Bộ biến bản SÁNG ---------------------------------------------------- */ html:root, html:root[data-theme="light"] { /* Mặt kính: ba độ dày, mỏng -> dày. */ /* MỨC KÍNH: 0 = "Trong suốt" (xuyên thấu nhiều), 1 = "Phủ màu" (mặt kính đặc hơn, tương phản cao hơn) - thanh trượt trong mục Cá nhân / dải liên kết máy tính đặt giá trị này lên style của . Mặc định 0.4: đúng bằng độ trong của bản trước khi có thanh trượt. Mọi độ trong suốt bên dưới là HÀM của mức này (calc trong rgba), nên kéo thanh là cả trang đổi theo ngay, không phải tải lại. */ --kinh-muc: 0.4; --nm-bg: rgba(255, 255, 255, calc(0.22 + 0.5 * var(--kinh-muc))); --nm-surface: rgba(255, 255, 255, calc(0.32 + 0.5 * var(--kinh-muc))); --nm-light: rgba(255, 255, 255, calc(0.56 + 0.42 * var(--kinh-muc))); /* --nm-dark còn làm màu ĐƯỜNG KẺ (hàng bảng, mép thanh) - mực tối mờ. */ --nm-dark: rgba(31, 42, 58, 0.13); --nm-ink: #172033; --nm-ink-soft: #4b5870; --nm-accent: #0a64e0; --nm-accent-deep: #0050c8; --nm-green: #0d6e31; --nm-amber: #8a4b02; --nm-r: 26px; --nm-r-sm: 18px; /* Viên kính: mép trên bắt sáng, mép dưới hắt sáng nhẹ, một viền trắng mảnh bao quanh, và bóng đổ mềm phía dưới. BÓNG ĐỔ PHẢI GỌN (bán kính nhỏ, co âm). Bản đầu để 0 10px 30px: các thẻ xếp cách nhau 14px nên bóng của chúng dồn kín khe hở, cả cột thẻ trông như nằm trên một tấm sương chữ nhật - đã gặp thật ở trang chủ. */ --nm-out: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(255, 255, 255, 0.35), 0 0 0 0.75px rgba(255, 255, 255, 0.55), 0 6px 14px -6px rgba(31, 42, 58, 0.16); --nm-out-sm: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), 0 0 0 0.75px rgba(255, 255, 255, 0.6), 0 3px 8px -3px rgba(31, 42, 58, 0.14); --nm-in: inset 0 1px 3px rgba(31, 42, 58, 0.13), inset 0 0 0 0.75px rgba(31, 42, 58, 0.07); --nm-in-sm: inset 0 1px 2px rgba(31, 42, 58, 0.11), inset 0 0 0 0.75px rgba(31, 42, 58, 0.06); --nm-nut-giua: rgba(255, 255, 255, 0.86); --nm-nut-giua-bong: inset 0 1px 0.5px #fff, 0 0 0 0.75px rgba(255, 255, 255, 0.7), 0 8px 22px rgba(31, 42, 58, 0.22); /* Riêng cho kính. */ /* Trong suốt thì nhoè ít (thấy rõ hình phía sau), phủ màu thì nhoè nhiều. */ --kinh-mo: blur(calc(14px + 25px * var(--kinh-muc))) saturate(185%); --kinh-thanh: rgba(255, 255, 255, calc(0.42 + 0.5 * var(--kinh-muc))); /* thanh trên / đáy / bảng nổi */ /* Bảng Cá nhân / bảng chuông: dày hơn thanh - chữ của bảng nằm ĐÈ lên chữ và nút phía sau, mặt mỏng thì hai lớp chữ đọc lẫn vào nhau. */ /* Sàn 80% kể cả ở mức "Trong suốt": chữ của bảng nằm đè lên chữ của trang, mỏng hơn nữa là hai lớp chữ đọc lẫn vào nhau. */ --kinh-bang: rgba(246, 249, 253, calc(0.80 + 0.18 * var(--kinh-muc))); /* Khung bật lên (đồ thị, sửa ô, chọn số câu...): ĐỤC HẲN. Nội dung của nó - nhất là đồ thị - phải đọc được rõ. Bản đầu để 97% đục mà chữ đậm của trang phía sau vẫn hiện bóng mờ sau đường đồ thị - đo được, nên không chừa chút trong suốt nào. */ --kinh-hop: #f8fafd; --kinh-mep: rgba(255, 255, 255, 0.75); /* viền sáng mép thanh */ /* Viên kính nhỏ trên thanh trên (nút tìm, chuông, lời chào): mặt trắng mỏng hơn thanh một chút để còn thấy là MỘT LỚP KÍNH NỔI trên thanh. */ --kinh-vien: rgba(255, 255, 255, calc(0.5 + 0.35 * var(--kinh-muc))); --kinh-vien-sang: rgba(255, 255, 255, 0.95); /* Màu ĐẶC cho dải trạng thái của máy (thẻ meta theme-color không hiểu độ trong suốt) - xem plcDongBoMauThanh. Lấy đúng màu thanh trên nhìn thấy: mặt kính trắng 62% đè lên nền loang ở mép trên màn hình - đo điểm ảnh trên ảnh chụp: trái #e7f0fe, giữa #f6f9fd, phải #fbf6f1, lấy trung bình. Dải giờ / sóng / pin của iPhone liền màu với thanh, như một khối. Bản tối đo giữa thanh ra đúng #1f2637. */ --nm-thanh: #f3f7fc; /* Hai đầu thanh trượt: thanh kính 42% (trong suốt) và 92% (phủ màu) đè lên nền loang - tính ngược từ màu đo được. plcDongBoMauThanh nội suy giữa hai màu này theo --kinh-muc. */ --nm-thanh-0: #f1f6fc; --nm-thanh-1: #fdfefe; --kinh-nen: radial-gradient(60% 45% at 12% 8%, #a9c9ff 0%, transparent 70%), radial-gradient(50% 40% at 92% 12%, #ffd9b0 0%, transparent 70%), radial-gradient(55% 45% at 80% 88%, #b7f0e2 0%, transparent 70%), radial-gradient(50% 45% at 6% 92%, #e2ccff 0%, transparent 70%), linear-gradient(160deg, #eef3fa 0%, #e8eef7 100%); } /* --- Bộ biến bản TỐI ----------------------------------------------------- */ html:root[data-theme="dark"] { --nm-bg: rgba(46, 54, 72, calc(0.26 + 0.5 * var(--kinh-muc))); --nm-surface: rgba(52, 61, 80, calc(0.35 + 0.5 * var(--kinh-muc))); --nm-light: rgba(60, 70, 92, calc(0.48 + 0.5 * var(--kinh-muc))); --nm-dark: rgba(255, 255, 255, 0.10); --nm-ink: #eef2f8; --nm-ink-soft: #a9b4c7; --nm-accent: #6cb2ff; --nm-accent-deep: #9ccbff; --nm-green: #2fd36d; --nm-amber: #ffa53a; --nm-out: inset 0 1px 0.5px rgba(255, 255, 255, 0.22), inset 0 -1px 1px rgba(255, 255, 255, 0.05), 0 0 0 0.75px rgba(255, 255, 255, 0.12), 0 8px 18px -8px rgba(0, 0, 0, 0.5); --nm-out-sm: inset 0 1px 0.5px rgba(255, 255, 255, 0.24), 0 0 0 0.75px rgba(255, 255, 255, 0.13), 0 4px 10px -4px rgba(0, 0, 0, 0.45); --nm-in: inset 0 1px 3px rgba(0, 0, 0, 0.38), inset 0 0 0 0.75px rgba(255, 255, 255, 0.07); --nm-in-sm: inset 0 1px 2px rgba(0, 0, 0, 0.32), inset 0 0 0 0.75px rgba(255, 255, 255, 0.06); /* Đĩa nút giữa giữ SÁNG: logo EVN mực tối, đĩa tối là logo biến mất - cùng lý do với --nm-nut-giua ở neumorphism.css. */ --nm-nut-giua: rgba(214, 222, 235, 0.88); --nm-nut-giua-bong: inset 0 1px 0.5px rgba(255, 255, 255, 0.8), 0 8px 22px rgba(0, 0, 0, 0.5); --kinh-thanh: rgba(38, 45, 62, calc(0.42 + 0.5 * var(--kinh-muc))); --kinh-bang: rgba(30, 36, 50, calc(0.84 + 0.14 * var(--kinh-muc))); --kinh-hop: #1d2331; --kinh-mep: rgba(255, 255, 255, 0.16); --kinh-vien: rgba(255, 255, 255, calc(0.1 + 0.1 * var(--kinh-muc))); --kinh-vien-sang: rgba(255, 255, 255, 0.32); --nm-thanh: #1f2637; --nm-thanh-0: #1b2233; --nm-thanh-1: #252c3d; --kinh-nen: radial-gradient(60% 45% at 12% 8%, rgba(56, 102, 214, 0.55) 0%, transparent 70%), radial-gradient(50% 40% at 92% 14%, rgba(150, 70, 200, 0.42) 0%, transparent 70%), radial-gradient(55% 45% at 82% 90%, rgba(18, 140, 126, 0.42) 0%, transparent 70%), radial-gradient(50% 45% at 6% 92%, rgba(190, 90, 60, 0.32) 0%, transparent 70%), linear-gradient(160deg, #121826 0%, #0d121d 100%); } /* Nấc "auto" của Django (theo hệ điều hành) - lặp lại bộ tối khi máy đang tối. Trang này mặc định "dark" nên hiếm gặp, nhưng thiếu là kính sáng đè lên chữ sáng, không đọc được. */ @media (prefers-color-scheme: dark) { html:root[data-theme="auto"] { --nm-bg: rgba(46, 54, 72, calc(0.26 + 0.5 * var(--kinh-muc))); --nm-surface: rgba(52, 61, 80, calc(0.35 + 0.5 * var(--kinh-muc))); --nm-light: rgba(60, 70, 92, calc(0.48 + 0.5 * var(--kinh-muc))); --nm-dark: rgba(255, 255, 255, 0.10); --nm-ink: #eef2f8; --nm-ink-soft: #a9b4c7; --nm-accent: #6cb2ff; --nm-accent-deep: #9ccbff; --nm-green: #2fd36d; --nm-amber: #ffa53a; --nm-out: inset 0 1px 0.5px rgba(255, 255, 255, 0.22), 0 0 0 0.75px rgba(255, 255, 255, 0.12), 0 8px 18px -8px rgba(0, 0, 0, 0.5); --nm-out-sm: inset 0 1px 0.5px rgba(255, 255, 255, 0.24), 0 0 0 0.75px rgba(255, 255, 255, 0.13), 0 4px 10px -4px rgba(0, 0, 0, 0.45); --nm-in: inset 0 1px 3px rgba(0, 0, 0, 0.38); --nm-in-sm: inset 0 1px 2px rgba(0, 0, 0, 0.32); --nm-nut-giua: rgba(214, 222, 235, 0.88); --kinh-thanh: rgba(38, 45, 62, calc(0.42 + 0.5 * var(--kinh-muc))); --kinh-bang: rgba(30, 36, 50, calc(0.84 + 0.14 * var(--kinh-muc))); --kinh-hop: #1d2331; --kinh-mep: rgba(255, 255, 255, 0.16); --kinh-vien: rgba(255, 255, 255, calc(0.1 + 0.1 * var(--kinh-muc))); --kinh-vien-sang: rgba(255, 255, 255, 0.32); --nm-thanh: #1f2637; --nm-thanh-0: #1b2233; --nm-thanh-1: #252c3d; --kinh-nen: radial-gradient(60% 45% at 12% 8%, rgba(56, 102, 214, 0.55) 0%, transparent 70%), radial-gradient(50% 40% at 92% 14%, rgba(150, 70, 200, 0.42) 0%, transparent 70%), radial-gradient(55% 45% at 82% 90%, rgba(18, 140, 126, 0.42) 0%, transparent 70%), linear-gradient(160deg, #121826 0%, #0d121d 100%); } } /* --- Nền loang phía sau mọi thứ ------------------------------------------ Lớp cố định riêng (::before của body) chứ không phải background-attachment: fixed - iOS bỏ qua fixed, nền sẽ trôi theo trang và loang lổ ở đáy trang dài. html giữ một màu đặc làm nền vải, phòng lúc lớp loang chưa vẽ. */ html:root { background: var(--nm-thanh) !important; /* CÙNG CÔNG THỨC với màu dải trạng thái (plcDongBoMauThanh nội suy giữa --nm-thanh-0 và --nm-thanh-1 theo mức kính). Tuỳ máy, iOS tô vùng giờ / sóng / pin bằng thẻ theme-color hoặc bằng nền trang - hai nguồn phải ra MỘT màu thì đổi sáng / tối hay kéo thanh trượt mới không lệch nhau. Máy không hiểu color-mix thì giữ dòng trên. */ background: color-mix(in srgb, var(--nm-thanh-0), var(--nm-thanh-1) calc(var(--kinh-muc) * 100%)) !important; } html:root body { background: transparent !important; } html:root body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--kinh-nen); } /* #container phủ kín trang: để nền mờ của nó là cả trang bị một lớp sương trắng che mất màu loang. #content-related (khung bọc "Hoạt động gần đây") cũng vậy - nền riêng của nó thành một dải sương thừa quanh thẻ bên trong. */ html:root #container, html:root #content-related { background: transparent !important; } /* --- Nút: hình viên thuốc ------------------------------------------------ Như mẫu: nút chữ là viên thuốc, nút một biểu tượng là hình tròn (các nút tròn có sẵn - nút trên thanh trên - vốn đã bo 50%). */ html:root :is( .button, a.button, input[type="submit"], input[type="button"], input[type="reset"], .submit-row input, .submit-row a, button[class*="nut"], a[class*="nut"], label[class*="nut"], #user-tools a, #logout-form button, .theme-toggle, .app-dong, .tn-nut-chinh, .tn-nut-phu, .tn-nut-to, .tn-nut-xoa ) { border-radius: 999px !important; } /* --- Thanh trên (webapp) -------------------------------------------------- Lớp mờ đặt ở ::before - thanh chứa bảng chuông position: fixed, gắn backdrop-filter thẳng lên thanh là bảng chuông bị giam trong thanh. */ @media (max-width: 860px) { /* THANH TÌM KIẾM + DẢI GIỜ: MÀU ĐẶC LIỀN KHỐI - KHÔNG CÓ LỚP MỜ ĐỤC. Khi mép trên của ứng dụng TRONG SUỐT, chính iOS 26 phủ một lớp nhoè mờ dần ngay dưới dải giờ (hiệu ứng mép cuộn của hệ thống) và lớp ấy loang xuống quá dải giờ, đè lên NỬA TRÊN hai nút 🔍 🔔 - người dùng báo mãi "nửa vòng tròn phía trên mờ tối" dù trong trang không còn lớp làm mờ nào trên nút. CSS không tắt riêng được hiệu ứng ấy; nhưng iOS chỉ phủ khi mép trên trong suốt - có MÀU ĐẶC thì nó tô thẳng màu đó lên dải giờ. Người dùng chọn bỏ hẳn lớp mờ đục, nên thanh (gồm cả phần tràn lên dải giờ) là màu đặc, cùng công thức màu dải giờ. Dòng đầu là dự phòng cho máy không hiểu color-mix. */ html:root.la-webapp body:not(.login) .app-tren { background: var(--nm-thanh); background: color-mix(in srgb, var(--nm-thanh-0), var(--nm-thanh-1) calc(var(--kinh-muc) * 100%)); box-shadow: 0 1px 0 var(--kinh-mep), 0 6px 16px -6px rgba(15, 23, 42, 0.18); } /* Nền sáng: KHÔNG còn dải xanh xám đặc ở vùng giờ. Bản trước tô #56637b rồi chuyển dần sang màu thanh vì tưởng chữ giờ / pin iOS luôn TRẮNG; ảnh chụp iOS 26 cho thấy chữ tự đổi sang ĐEN trên nền sáng, còn đoạn chuyển màu thì loang xuống quanh 🔍, lời chào, 🔔 thành một lớp nhoè (người dùng: "làm trong cho icon và chữ nhìn thấy rõ nhất"). Nay cả thanh lẫn dải giờ là MỘT MÀU SÁNG ĐỀU (luật chung ngay trên) - vẫn ĐẶC, để iOS không phủ lớp nhoè mép cuộn của nó lên nửa trên hai nút như hồi mép trên trong suốt. */ /* Hỏi AI, nền sáng: KÍNH TRONG - lớp sáng rất mỏng tan dần (người dùng: "làm trong cho tôi Glass"). Ảnh chụp cho thấy iOS 26 tự đổi chữ giờ / pin sang ĐEN trên nền sáng, nên không cần dải xanh xám đặc cho chữ trắng. */ html:root.la-webapp:not([data-theme="dark"]) body.trang-hoi-ai::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.20) env(safe-area-inset-top, 0px), rgba(255, 255, 255, 0) 100%); } /* VUỐT ẨN THANH: dải giờ trở lại GƯƠNG MỜ NHẸ để thấy chữ cuộn qua (người dùng muốn vậy) - lúc này không còn nút nào bên dưới để bị nhoè đè lên. Tấm riêng ngoài thanh, cao đúng vùng an toàn. */ html:root.la-webapp.an-thanh body:not(.login):not(.trang-hoi-ai) #container::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); z-index: 39; pointer-events: none; background: rgba(255, 255, 255, 0.30); -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); } html:root[data-theme="dark"].la-webapp.an-thanh body:not(.login):not(.trang-hoi-ai) #container::before { background: rgba(18, 24, 36, 0.32); } /* --- Thanh đáy: mặt kính là lớp ::after đã khoét quanh nút giữa ------ */ html:root .app-nav-nen { filter: none; } html:root .app-nav-nen::before { background: var(--kinh-mep); } html:root .app-nav-nen::after { background: var(--kinh-thanh); -webkit-backdrop-filter: var(--kinh-mo); backdrop-filter: var(--kinh-mo); } /* --- Bảng Cá nhân ------------------------------------------------------ CHỈ LÀM MỜ LÚC BẢNG ĐANG MỞ: trình duyệt vẫn vẽ lớp làm mờ của một thẻ trong suốt hoàn toàn (đã gặp với bảng chuông thông báo cũ - một tấm sương nằm vắt ngang trang chủ dù không ai mở). */ html:root.la-webapp .app-sheet { background: var(--kinh-bang); box-shadow: inset 0 1px 0.5px var(--kinh-mep), 0 -10px 34px rgba(15, 23, 42, 0.22); } html:root.la-webapp .app-mo-sheet:checked ~ .app-sheet { -webkit-backdrop-filter: var(--kinh-mo); backdrop-filter: var(--kinh-mo); } html:root.la-webapp .app-sheet { border-radius: 30px 30px 0 0; } /* Nền chắn sau bảng Cá nhân: làm mờ trang thay vì chỉ phủ tối. */ html:root.la-webapp .app-sheet-nen { background: rgba(15, 23, 42, 0.22); } html:root.la-webapp .app-mo-sheet:checked ~ .app-sheet-nen { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* --- Bảng MENU TRÁI (nút ⋯ trang chủ): cùng mặt kính với bảng Cá nhân -- */ html:root.la-webapp .app-menu-trai { background: var(--kinh-bang); box-shadow: inset -1px 0 0.5px var(--kinh-mep), 10px 0 34px rgba(15, 23, 42, 0.22); border-radius: 0 30px 30px 0; } html:root.la-webapp .app-mo-menu:checked ~ .app-menu-trai { -webkit-backdrop-filter: var(--kinh-mo); backdrop-filter: var(--kinh-mo); } html:root.la-webapp .app-menu-nen { background: rgba(15, 23, 42, 0.22); } html:root.la-webapp .app-mo-menu:checked ~ .app-menu-nen { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } } /* Banner thông báo trong ứng dụng (bao-trong-app.js). */ html:root .app-bao-day { background: var(--kinh-thanh); -webkit-backdrop-filter: var(--kinh-mo); backdrop-filter: var(--kinh-mo); border-radius: 22px; box-shadow: inset 0 1px 0.5px var(--kinh-mep), 0 12px 32px rgba(15, 23, 42, 0.25); } /* --- Bản máy tính: dải tiêu đề và đường dẫn ------------------------------ */ html:root #header, html:root .breadcrumbs { background: var(--kinh-thanh) !important; } /* Máy không làm được backdrop-filter (trình duyệt cũ): mặt thanh dày lên cho chữ phía sau khỏi lộ qua, đọc lẫn vào nhau. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html:root { --kinh-thanh: rgba(240, 244, 250, 0.96); } html:root[data-theme="dark"] { --kinh-thanh: rgba(30, 36, 50, 0.96); } } /* Hàng tiêu đề DÍNH của bảng giao đề: các hàng người dùng cuộn chui xuống dưới nó, mặt kính mỏng như thẻ thường thì chữ hai lớp chồng lên nhau. */ html:root .tn-bang-giao thead th { background: var(--kinh-bang); } /* --- Trang Hỏi AI: phần đáy (ô soạn + dòng lưu ý) ------------------------ Bản gốc tô dải đáy bằng màu nền chuyển dần (.ai-soan-neo). Ở kiểu kính màu nền là trắng trong suốt, nên dải ấy thành một TẤM CHỮ NHẬT mờ có cạnh cứng hai bên, ô soạn và dòng lưu ý nằm lệch tông trên đó - người dùng chụp màn hình báo "phía dưới rất không đồng đều". Thay bằng một lớp kính LÀM MỜ phía sau, nhạt dần ở mép trên và hai bên (mask cắt giao hai dải chuyển màu) - không còn cạnh nào để thấy. Lớp mờ nằm ở ::before chứ không trên chính .ai-soan-neo: trong đó có lớp phủ .ai-kem-nen position: fixed, gắn backdrop-filter lên cha là nó bị giam. */ /* LẦN SAU (người dùng: "xung quanh ô nhập bị lem màu, không đẹp" - cả sáng lẫn tối): tấm sương mờ phía sau CẢ khối đáy rộng hơn ô nhập và nhạt dần ở mép, cộng bóng đổ kiểu neumorphism hai phía (một bóng tối, một quầng sáng) -> quanh ô nhập thành một quầng nhoè. Bỏ hẳn tấm sương; CHÍNH Ô NHẬP là một viên kính Liquid Glass có mép rõ: mặt kính trong mờ làm nhoè thứ phía sau, viền mảnh sáng, vệt bắt sáng ở mép trên, MỘT bóng đổ mềm. */ html:root .ai-soan-neo { background: none; } html:root .ai-soan-neo::before { content: none; } /* Ô soạn: MỘT viên kính liền. Ô chữ bên trong bỏ khung lõm riêng (luật chung cho input[type=text] của neumorphism.css) - khung trong khung là thứ làm phần đáy nhìn lổn nhổn. Lớp làm mờ ở ::before (không gắn backdrop-filter lên chính form: bảng chọn tệp bên trong cần thoát ra). */ html:root .ai-soan { position: relative; isolation: isolate; border-radius: 28px; background: none; border: 1px solid var(--kinh-vien); box-shadow: inset 0 1px 0 var(--kinh-mep), /* vệt bắt sáng mép trên */ inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px rgba(15, 23, 42, 0.18), /* một bóng mềm, không quầng */ 0 1px 3px rgba(15, 23, 42, 0.10); } html:root .ai-soan::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--kinh-thanh); -webkit-backdrop-filter: var(--kinh-mo); backdrop-filter: var(--kinh-mo); } html:root[data-theme="dark"] .ai-soan { box-shadow: inset 0 1px 0 var(--kinh-mep), 0 12px 30px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { html:root[data-theme="auto"] .ai-soan { box-shadow: inset 0 1px 0 var(--kinh-mep), 0 12px 30px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); } } html:root .ai-soan .ai-o { background: transparent; box-shadow: none; } /* --- Khung bật lên: mặt ĐỤC HẲN, làm mờ trang phía sau -------------------- Các khung này vẽ nền bằng biến chung (--nm-bg / --nm-light), mà ở kiểu kính các biến ấy trong suốt: trang phía sau lộ qua, chữ và số của trang đè lên đồ thị - người dùng chụp màn hình đồ thị "Áp suất đẩy" báo không đọc được. Khung bật lên là chỗ để ĐỌC, không phải để trang trí: dùng mặt đục hẳn, còn phần "kính" chuyển sang lớp phủ - trang phía sau mờ đi. Lớp phủ (.dtm, .lt-nen, .dash-khung-sua) là chính thẻ position: fixed nên gắn backdrop-filter lên nó an toàn: khung bên trong không phải fixed. */ html:root :is( .dtm-hop, .dash-hop-sua, .tn-so-cau-bang, .lt-the, .ai-ngan ) { background: var(--kinh-hop) !important; box-shadow: inset 0 1px 0.5px var(--kinh-mep), 0 18px 44px rgba(15, 23, 42, 0.32); } html:root :is(.dtm-hop, .dash-hop-sua, .lt-the) { border-radius: 26px; } html:root :is(.dtm, .lt-nen, .dash-khung-sua) { -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } /* --- Thanh trượt mức kính ("Trong suốt" <-> "Phủ màu") ------------------- Theo mẫu Cài đặt iOS: rãnh mảnh, phần đã kéo tô xanh, núm trắng hình viên thuốc, hai chấm mốc dưới hai đầu rãnh, biểu tượng hai lớp kính rỗng / đặc ở hai bên. Phần tô xanh vẽ bằng nền chuyển màu theo --phan (script đặt): Safari không có ::-webkit-slider-progress để tô riêng phần đã kéo. */ .kinh-chinh { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 8px; border-radius: 999px; background: var(--nm-bg); box-shadow: var(--nm-out-sm); color: var(--nm-ink-soft); } .kinh-icon { width: 26px; height: 26px; flex: none; } .kinh-ray { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } /* Hai chấm mốc dưới hai đầu rãnh. */ .kinh-ray::before, .kinh-ray::after { content: ""; position: absolute; bottom: -3px; width: 3px; height: 3px; border-radius: 50%; background: var(--nm-ink-soft); opacity: .55; } .kinh-ray::before { left: 11px; } .kinh-ray::after { right: 11px; } .kinh-truot { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; padding: 0; background: transparent; cursor: pointer; --phan: 40%; /* Kéo ngang trên điện thoại không được cuộn bảng Cá nhân theo. */ touch-action: pan-y; } .kinh-truot:focus { outline: none; } .kinh-truot::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--nm-accent) 0 var(--phan), rgba(120, 130, 150, .28) var(--phan) 100%); } .kinh-truot::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(120, 130, 150, .28); } .kinh-truot::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--nm-accent); } .kinh-truot::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 50px; height: 30px; margin-top: -12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 3px 10px rgba(15, 23, 42, .22); } .kinh-truot::-moz-range-thumb { width: 50px; height: 30px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 3px 10px rgba(15, 23, 42, .22); } .kinh-truot:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--nm-accent), 0 3px 10px rgba(15, 23, 42, .22); } .kinh-ghi-chu { margin: 4px 14px 14px; font-size: 12.5px; line-height: 1.55; color: var(--nm-ink-soft); } /* Bản gọn trên dải liên kết máy tính: cùng hàng với các nút viên thuốc. */ #user-tools .kinh-chinh-nho { display: inline-flex; vertical-align: middle; gap: 8px; padding: 4px 12px; margin: 0; width: 190px; } .kinh-chinh-nho .kinh-icon { width: 18px; height: 18px; } .kinh-chinh-nho .kinh-truot { height: 24px; } .kinh-chinh-nho .kinh-truot::-webkit-slider-runnable-track { height: 4px; } .kinh-chinh-nho .kinh-truot::-moz-range-track, .kinh-chinh-nho .kinh-truot::-moz-range-progress { height: 4px; } .kinh-chinh-nho .kinh-truot::-webkit-slider-thumb { width: 34px; height: 20px; margin-top: -8px; } .kinh-chinh-nho .kinh-truot::-moz-range-thumb { width: 34px; height: 20px; } .kinh-chinh-nho .kinh-ray::before, .kinh-chinh-nho .kinh-ray::after { display: none; } /* --- Dải giờ / sóng / pin (ứng dụng trên iPhone) -------------------------- Thẻ apple-mobile-web-app-status-bar-style = black-translucent làm dải này trong suốt và trang vẽ tràn lên bên dưới (xem base_site.html: iOS chỉ đọc màu dải lúc khởi động, nên đây là cách duy nhất để nó đổi NGAY theo nền sáng / tối). Chữ giờ / pin khi ấy luôn TRẮNG. Lớp body::after phủ đúng chiều cao vùng ấy (env safe-area-inset-top): - Nền TỐI, trang có thanh trên: để trống - thanh kính tối (.app-tren, vốn đã chừa padding-top bằng đúng vùng này) tràn lên liền một khối, chồng thêm một lớp nữa là lộ một đường nối. - Trang KHÔNG có thanh trên (Hỏi AI, đăng nhập): một lớp kính, kẻo chữ trang cuộn lên nằm lẫn dưới chữ giờ. - Nền SÁNG: dải kính sẫm nhẹ mờ dần xuống dưới. Chữ trắng trên kính sáng #f6f9fd chỉ đạt tương phản ~1.1:1 - không đọc được; giữa dải (chỗ chữ giờ) phủ ~47% mực tối là được ~3.5:1, rồi nhạt hẳn ở mép dưới để không thành một vạch cứng nối vào thanh trên. Lớp phủ (z 65) nằm trên thanh trên (40), thanh đáy (50), bảng Cá nhân (61); dưới các khung bật lên (đồ thị 70, lưu tiến độ 300...). */ @media (max-width: 860px) { html:root.la-webapp body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); z-index: 65; pointer-events: none; } html:root.la-webapp body.login::after { background: var(--kinh-thanh); -webkit-backdrop-filter: var(--kinh-mo); backdrop-filter: var(--kinh-mo); } /* Trang Hỏi AI: dải giờ là KÍNH TRONG (người dùng chọn) - lớp màu rất mỏng tan dần, KHÔNG làm mờ: nhìn xuyên thấy nền trang. Dải cao hơn vùng an toàn 16px: phần thêm là đoạn tan. Lưu ý: mép trên trong suốt thì iOS 26 có thể tự phủ lớp nhoè mép cuộn loang xuống ba nút ☰ ⌂ ✎ (đã gặp) - nếu người dùng thấy lại thì bản trước của luật này là dải MÀU ĐẶC (color-mix --nm-thanh-0/1). */ html:root.la-webapp body.trang-hoi-ai::after { height: calc(env(safe-area-inset-top, 0px) + 16px); -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(to bottom, rgba(18, 24, 36, 0.34) 0, rgba(18, 24, 36, 0.20) env(safe-area-inset-top, 0px), rgba(18, 24, 36, 0) 100%); } /* Nền sáng: chữ giờ / pin của iOS luôn TRẮNG - phủ một lớp sẫm nhẹ cho đọc được. Chỉ ở trang không có thanh trên (Hỏi AI, đăng nhập) và lúc thanh đang vuốt ẩn - còn lại thanh trên đã tự tô dải giờ màu đặc. Không làm mờ thêm (tấm gương #container::before đã làm mờ nhẹ): chồng hai lớp nhoè là chữ trang cuộn qua không còn nhìn thấy. */ html:root.la-webapp:not([data-theme="dark"]) body.login::after, html:root.la-webapp.an-thanh:not([data-theme="dark"]) body::after { background: linear-gradient(to bottom, rgba(15, 23, 42, 0.40) 0%, rgba(15, 23, 42, 0.32) 62%, rgba(15, 23, 42, 0) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* --- Thanh trên: nút tìm, chuông, lời chào là VIÊN KÍNH ------------------- Theo mẫu Liquid Glass: mỗi nút là một viên kính nổi trên thanh - mặt trong mờ làm nhoè thứ phía sau, vệt bắt sáng ở mép trên, viền sáng mảnh bao quanh, mép dưới hắt sáng nhẹ, bóng đổ mềm. Bản trước để hai nút là đĩa phẳng màu nền và lời chào nằm trơ trên thanh - người dùng báo nhìn không ra dạng kính. Vỏ ô tìm (.app-tren-tim) chính là cái nút 🔍 lúc đóng và ô dài lúc mở, nên kính đặt lên VỎ; ba nút bên trong vỏ vốn đã phẳng (app-nav.css). Chuông là nút đứng riêng, con trực tiếp của .app-tren-thanh. backdrop-filter gắn thẳng lên các viên này được: trong chúng không có thẻ position: fixed nào (bảng chuông là anh em của nút, không phải con). Chữ / biểu tượng KHÔNG bị làm mờ - lớp mờ chỉ áp lên thứ nằm PHÍA SAU. */ @media (max-width: 860px) { /* KHÔNG gắn backdrop-filter lên nút. Safari trên iPhone vẽ cả NỘI DUNG của thẻ có backdrop-filter (nhất là khi kèm overflow: hidden + bo tròn, như vỏ ô tìm) thành ảnh độ phân giải thấp: biểu tượng 🔍 🔔 và chấm đỏ nhoè hẳn - người dùng chụp từng nút gửi lại. */ /* NÚT NỔI KHỐI: mặt sáng hẳn hơn nền thanh, viền rõ, bóng đổ - nhìn là thấy nút, biểu tượng không chìm vào nền (người dùng: "các nút icon phải hiển thị nổi lên"). Bản trước là vòng kính trắng 10% trên kính tối, gần như vô hình. Nền sáng: đĩa trắng đặc; nền tối: đĩa sáng hơn nền ~2 bậc. */ /* NÚT 🔍 VÀ 🔔: ĐĨA TRÒN NỔI KHỐI, ĐỀU MÀU, SẮC NÉT CẢ VÒNG. Bản trước tô mặt đĩa đậm dần về nửa dưới và thêm bóng tối bên trong ở mép dưới để giả độ dày của kính, lại để đĩa hơi trong: người dùng thấy "một nửa đường bao tròn bị mờ đục". Nay đĩa ĐẶC, ĐỀU MÀU từ trên xuống, viền là một vòng sắc chạy đều quanh, chỉ giữ vệt sáng mảnh ở mép trên và bóng đổ RA NGOÀI cho nổi. Đĩa đặc thì thứ phía sau (mặt kính thanh, nội dung cuộn qua) không ảnh hưởng gì tới nó. Không backdrop-filter / filter: Safari trên iPhone vẽ nội dung của thẻ có lớp làm mờ thành ảnh độ phân giải thấp - biểu tượng nhoè. */ html:root .app-tren-tim, html:root .app-tren-thanh > .app-tren-nut { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(15, 23, 42, 0.14), 0 3px 10px -2px rgba(15, 23, 42, 0.30); } html:root[data-theme="dark"] .app-tren-tim, html:root[data-theme="dark"] .app-tren-thanh > .app-tren-nut { background: #3b4559; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.22), 0 3px 10px -2px rgba(0, 0, 0, 0.60); } /* NÚT 🔍: RÕ NÉT HOÀN TOÀN - KHÔNG BÓNG MỜ (người dùng: "không sử dụng hiệu ứng bóng mờ nữa mà làm rõ nét hết"). Bỏ bóng đổ toả (blur) - chỉ còn một vòng viền sắc 1px và nền đặc, không thứ gì nhoè quanh mép. */ html:root .app-tren-tim { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22); } html:root[data-theme="dark"] .app-tren-tim { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.30); } html:root .app-mo-tim:checked ~ .app-tren-thanh .app-tren-tim { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22); } html:root[data-theme="dark"] .app-mo-tim:checked ~ .app-tren-thanh .app-tren-tim { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.30); } /* Lời chào: đậm, to hơn một nấc, màu tương phản tối đa - nổi lên trên mặt kính. Không text-shadow (từng làm chữ trông nhoè trên iPhone). */ html:root .app-tren-dan { font-size: 14.5px; font-weight: 700; letter-spacing: 0.1px; color: #0b1220; } html:root[data-theme="dark"] .app-tren-dan { color: #ffffff; } /* Biểu tượng to hơn một nấc (ô bấm 40px, máy hẹp 36px). */ html:root .app-tren-thanh .app-tren-nut { font-size: 20px; } html:root .app-tren-thanh > .app-tren-nut:active { background: var(--kinh-thanh); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18), inset 0 0 0 0.75px rgba(255, 255, 255, 0.28); } } /* --- Dải sau thanh phụ của bàn phím ảo (^ v ✓) ---------------------------- Bàn phím mở thì iOS co cửa sổ app lại; phần SAU thanh phụ nằm NGOÀI trang và iOS tô bằng màu nền của (bình thường là màu dải trạng thái). Trang không vẽ được vào vùng đó, cũng không tắt được thanh phụ (giới hạn của iOS). Người dùng muốn dải ấy THEO NỀN TRANG - tối khi nền tối, sáng khi nền sáng, liền với phần ngay phía trên. Lúc bàn phím mở (lớp `ban-phim` do base_site.html gắn): - tô đúng MÀU GỐC của nền loang (lớp linear-gradient dưới cùng của --kinh-nen): tối #0d121d, sáng #e8eef7; - đáy nền loang (body::before) nhạt dần về CHÍNH màu đó, để các vệt màu loang ở hai góc đáy không thành đường ranh với dải. (Lần trước tô theo màu bàn phím - người dùng không muốn.) */ html:root.la-webapp.ban-phim { --nen-ban-phim: #e8eef7; } html:root[data-theme="dark"].la-webapp.ban-phim { --nen-ban-phim: #0d121d; } @media (prefers-color-scheme: dark) { html:root[data-theme="auto"].la-webapp.ban-phim { --nen-ban-phim: #0d121d; } } html:root.la-webapp.ban-phim { background: var(--nen-ban-phim) !important; } html:root.la-webapp.ban-phim body::before { background: linear-gradient(to bottom, transparent calc(100% - 170px), var(--nen-ban-phim) 100%), var(--kinh-nen); } /* --- Trang Hỏi AI: ba nút đầu trang (☰ lịch sử, ⌂ trang chủ, ✎ đoạn mới) -- Người dùng: "làm cho nó hiện rõ hiệu ứng Liquid Glass". Bản cũ là đĩa màu --nm-bg (ở kiểu kính gần như trong suốt) + bóng neumorphism mờ -> chìm vào nền. Nay mỗi nút là một VIÊN KÍNH TRÒN: - mặt kính trong (::before) làm nhoè + tăng độ tươi thứ phía sau; - vệt bóng sáng nửa trên (gradient trắng mờ dần), viền mảnh sáng quanh, hắt sáng nhẹ ở mép dưới, bóng đổ mềm ra ngoài; - biểu tượng đậm, màu tương phản tối đa. Lớp làm mờ ĐẶT Ở ::before, KHÔNG trên chính nút: Safari iPhone vẽ nội dung của thẻ có backdrop-filter thành ảnh độ phân giải thấp -> biểu tượng nhoè (đã gặp ở nút 🔍 🔔 thanh trên). */ html:root .ai-tron-to { position: relative; isolation: isolate; width: 40px; height: 40px; background: none; border: 0; color: #0b1220 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.70), /* viền sáng mảnh */ inset 0 1.5px 0 rgba(255, 255, 255, 0.95), /* vệt bắt sáng mép trên */ inset 0 -1px 1px rgba(255, 255, 255, 0.35), /* hắt sáng mép dưới */ 0 6px 16px -4px rgba(15, 23, 42, 0.28), /* bóng đổ mềm */ 0 1px 2px rgba(15, 23, 42, 0.12); } /* KÍNH TRONG, KHÔNG LÀM MỜ (người dùng: "vẫn mờ đục, muốn trong trẻo và sáng"): bỏ hẳn backdrop-filter - nhìn xuyên qua thấy rõ nền. Mặt kính chỉ còn vệt bóng sáng nửa trên + một lớp phủ rất nhẹ; độ "kính" nằm ở viền sáng sắc và vệt bắt sáng (box-shadow của nút). */ html:root .ai-tron-to::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.18) 100%), rgba(255, 255, 255, 0.16); } html:root .ai-tron-to svg { width: 21px; height: 21px; stroke-width: 2.2; } html:root .ai-tron-to:active { transform: scale(0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 3px rgba(15, 23, 42, 0.18); } html:root[data-theme="dark"] .ai-tron-to { color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1.5px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 1px rgba(255, 255, 255, 0.10), 0 6px 18px -4px rgba(0, 0, 0, 0.60), 0 1px 2px rgba(0, 0, 0, 0.40); } html:root[data-theme="dark"] .ai-tron-to::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 255, 255, 0.05); } @media (prefers-color-scheme: dark) { html:root[data-theme="auto"] .ai-tron-to { color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1.5px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 1px rgba(255, 255, 255, 0.10), 0 6px 18px -4px rgba(0, 0, 0, 0.60), 0 1px 2px rgba(0, 0, 0, 0.40); } html:root[data-theme="auto"] .ai-tron-to::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 255, 255, 0.05); } } /* --- Hỏi AI: nút "+" và nút giọng nói (mic) = cùng viên kính trong như ba nút đầu trang (người dùng: "làm đậm chất Glass"). Không backdrop-filter (biểu tượng nhoè trên iPhone); độ kính ở viền sáng sắc, vệt bắt sáng, vệt bóng nửa trên (::before) và bóng đổ mềm. Giữ trạng thái riêng: mic ĐỎ nhấp nháy khi đang ghi. */ html:root :is(.ai-tron, .ai-tron-tieng) { position: relative; isolation: isolate; background: none; border: 0; color: #0b1220; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(255, 255, 255, 0.35), 0 5px 14px -4px rgba(15, 23, 42, 0.28), 0 1px 2px rgba(15, 23, 42, 0.12); } html:root :is(.ai-tron, .ai-tron-tieng)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.18) 100%), rgba(255, 255, 255, 0.16); } html:root .ai-tron { font-weight: 600; font-size: 21px; } html:root .ai-tron-tieng svg { stroke-width: 2.2; } html:root :is(.ai-tron, .ai-tron-tieng):active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 3px rgba(15, 23, 42, 0.18); } /* Đang ghi âm: đĩa ĐỎ đặc (màu mang thông tin) - bỏ lớp kính. */ html:root .ai-tron-tieng.ai-dang-ghi { background: var(--nm-red, #dc2626); color: #fff; } html:root .ai-tron-tieng.ai-dang-ghi::before { content: none; } html:root[data-theme="dark"] :is(.ai-tron, .ai-tron-tieng) { color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1.5px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 1px rgba(255, 255, 255, 0.10), 0 6px 16px -4px rgba(0, 0, 0, 0.60), 0 1px 2px rgba(0, 0, 0, 0.40); } html:root[data-theme="dark"] :is(.ai-tron, .ai-tron-tieng)::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 255, 255, 0.05); } @media (prefers-color-scheme: dark) { html:root[data-theme="auto"] :is(.ai-tron, .ai-tron-tieng) { color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1.5px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 1px rgba(255, 255, 255, 0.10), 0 6px 16px -4px rgba(0, 0, 0, 0.60), 0 1px 2px rgba(0, 0, 0, 0.40); } html:root[data-theme="auto"] :is(.ai-tron, .ai-tron-tieng)::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 255, 255, 0.05); } } /* --- Hỏi AI: VIỀN NGOÀI ô nhập câu hỏi đậm chất kính ------------------------- Viền sáng rõ hơn + một vòng sáng mảnh bên ngoài + vệt bóng sáng ở mép trên mặt kính (lớp gradient chồng lên lớp làm mờ ::before của ô). */ html:root .ai-soan { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.10), /* nét ngoài mảnh cho rõ mép */ inset 0 1.5px 0 rgba(255, 255, 255, 0.95), /* vệt bắt sáng mép trên */ inset 0 -1px 0 rgba(255, 255, 255, 0.30), 0 12px 30px rgba(15, 23, 42, 0.20), 0 1px 3px rgba(15, 23, 42, 0.10); } html:root .ai-soan::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0, rgba(255, 255, 255, 0) 38%), var(--kinh-thanh); } html:root[data-theme="dark"] .ai-soan { border-color: rgba(255, 255, 255, 0.26); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 14px 32px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.35); } html:root[data-theme="dark"] .ai-soan::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 38%), var(--kinh-thanh); } @media (prefers-color-scheme: dark) { html:root[data-theme="auto"] .ai-soan { border-color: rgba(255, 255, 255, 0.26); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 14px 32px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.35); } html:root[data-theme="auto"] .ai-soan::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0) 38%), var(--kinh-thanh); } } /* --- Thanh trên: nút 🔍 và 🔔 NHỎ HƠN MỘT NẤC + KÍNH TRONG (Liquid Glass) ---- Người dùng: "thu nhỏ icon tìm kiếm và cái chuông thêm một tý nữa và làm dạng Glass". Nút 40 -> 34px (máy hẹp 36 -> 32px), biểu tượng 20 -> 17px. Kính làm bằng NỀN + VIỀN, KHÔNG backdrop-filter / filter: Safari trên iPhone vẽ nội dung thẻ có lớp làm mờ thành ảnh độ phân giải thấp (🔍 🔔 nhoè - đã gặp). Cũng KHÔNG bóng đổ toả mờ (người dùng đã yêu cầu bỏ bóng mờ quanh 🔍): độ kính nằm ở mặt trong suốt có vệt bắt sáng nửa trên, viền sáng sắc bên trong và một nét mảnh 0.5px bên ngoài cho rõ mép trên nền thanh sáng. */ @media (max-width: 860px) { html:root.la-webapp body:not(.login) .app-tren { --app-tren-nut-co: 34px; } html:root .app-tren-thanh .app-tren-nut { font-size: 17px; } html:root .app-tren-tim, html:root .app-tren-thanh > .app-tren-nut { background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0.06) 58%, rgba(255, 255, 255, 0.30) 100%), rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 1.5px 0 #ffffff, inset 0 -1px 1px rgba(255, 255, 255, 0.45); } html:root .app-tren-thanh > .app-tren-nut:active { background: rgba(15, 23, 42, 0.06); box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.26), inset 0 1px 2px rgba(15, 23, 42, 0.16); } /* Ô tìm MỞ RA thành ô nhập dài: mặt kính đặc hơn một chút cho chữ gõ vào dễ đọc, vẫn viền sắc, không bóng mờ. */ html:root .app-mo-tim:checked ~ .app-tren-thanh .app-tren-tim { background: rgba(255, 255, 255, 0.62); box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.85); } html:root[data-theme="dark"] .app-tren-tim, html:root[data-theme="dark"] .app-tren-thanh > .app-tren-nut { background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.07) 48%, rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0.10) 100%), rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1.5px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(255, 255, 255, 0.10); } html:root[data-theme="dark"] .app-tren-thanh > .app-tren-nut:active { background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.45); } html:root[data-theme="dark"] .app-mo-tim:checked ~ .app-tren-thanh .app-tren-tim { background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.24); } } @media (max-width: 400px) { html:root.la-webapp body:not(.login) .app-tren { --app-tren-nut-co: 32px; } html:root .app-tren-thanh .app-tren-nut { font-size: 16px; } } /* --- Hỏi AI: BA NÚT ĐẦU TRANG (☰ ⌂ ✎) CÙNG CỠ VỚI "+" VÀ NÚT GIỌNG NÓI ----- Người dùng: "làm icon phía trên đồng đều bằng kích thước icon + và voice". Cả năm nút 38px (đúng cỡ nút giọng nói - nút ấy phải bằng nút gửi / dừng vì ba nút thay phiên ở cùng một chỗ), biểu tượng 20px như biểu tượng mic. */ html:root .ai-tron-to { width: 38px; height: 38px; } html:root .ai-tron-to svg { width: 20px; height: 20px; } html:root .ai-tron { width: 38px; height: 38px; } /* --- Thanh đáy: LIQUID GLASS NỔI BẬT --------------------------------------- Người dùng: "làm cho nó nổi bật hiệu ứng Liquid Glass". Bản trước ra kính ĐỤC vì lớp ::before (đường mép) tô kín CẢ THANH màu trắng 75% nằm ngay dưới mặt kính ::after - lớp làm mờ của ::after hút lấy đúng mảng trắng ấy nên chỉ còn một tấm trắng sữa, nội dung phía sau gần như không lộ ra. Nay: - ::before BỎ NỀN. Viền sáng vẽ thẳng trên mặt kính ::after: viền trong (inset box-shadow) chạy quanh bốn cạnh bo tròn, và một VÒNG SÁNG (radial-gradient, tâm -4px, bán kính 30px = đúng cung khoét) chạy dọc chỗ khoét quanh nút EVN. Cả hai đều bị mask cắt theo đúng hình thanh. - Mặt kính TRONG hơn, làm mờ + tăng bão hoà mạnh hơn: thấy rõ màu nội dung trôi qua phía sau. - Vệt bắt sáng nửa trên + hắt sáng mép dưới: dáng "giọt kính" của iOS 26. Biểu tượng và chữ KHÔNG bị nhoè: lớp mờ nằm ở ::after (anh em của các mục), không phải ở thẻ chứa chúng. Độ đặc vẫn theo --kinh-muc (thanh trượt Trong suốt <-> Phủ màu). */ @media (max-width: 860px) { html:root .app-nav-nen { box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.32), 0 2px 6px -2px rgba(15, 23, 42, 0.14); } html:root .app-nav-nen::before { background: none; } html:root .app-nav-nen::after { background: radial-gradient(circle at 50% -4px, rgba(255, 255, 255, 0) 29px, rgba(255, 255, 255, 0.95) 30.3px, rgba(255, 255, 255, 0.35) 31.8px, rgba(255, 255, 255, 0) 34px), linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0.03) 58%, rgba(255, 255, 255, 0.18) 100%), rgba(255, 255, 255, calc(0.20 + 0.45 * var(--kinh-muc))); -webkit-backdrop-filter: blur(16px) saturate(210%) brightness(1.04); backdrop-filter: blur(16px) saturate(210%) brightness(1.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.70), inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1.5px 2px rgba(255, 255, 255, 0.40); } html:root[data-theme="dark"] .app-nav-nen { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.40); } html:root[data-theme="dark"] .app-nav-nen::after { background: radial-gradient(circle at 50% -4px, rgba(255, 255, 255, 0) 29px, rgba(255, 255, 255, 0.50) 30.3px, rgba(255, 255, 255, 0.14) 31.8px, rgba(255, 255, 255, 0) 34px), linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.01) 58%, rgba(255, 255, 255, 0.07) 100%), rgba(26, 32, 46, calc(0.26 + 0.45 * var(--kinh-muc))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20), inset 0 1.5px 0 rgba(255, 255, 255, 0.40), inset 0 -1.5px 2px rgba(255, 255, 255, 0.10); } } @media (max-width: 860px) and (prefers-color-scheme: dark) { html:root[data-theme="auto"] .app-nav-nen { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.40); } html:root[data-theme="auto"] .app-nav-nen::after { background: radial-gradient(circle at 50% -4px, rgba(255, 255, 255, 0) 29px, rgba(255, 255, 255, 0.50) 30.3px, rgba(255, 255, 255, 0.14) 31.8px, rgba(255, 255, 255, 0) 34px), linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.01) 58%, rgba(255, 255, 255, 0.07) 100%), rgba(26, 32, 46, calc(0.26 + 0.45 * var(--kinh-muc))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20), inset 0 1.5px 0 rgba(255, 255, 255, 0.40), inset 0 -1.5px 2px rgba(255, 255, 255, 0.10); } } /* Máy không làm mờ được: mặt kính trong suốt thì chữ trang lộ qua đọc lẫn vào nhãn - dày hẳn lên như mọi thanh kính khác (xem @supports phía trên). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html:root .app-nav-nen::after { background: rgba(240, 244, 250, 0.96); } html:root[data-theme="dark"] .app-nav-nen::after { background: rgba(30, 36, 50, 0.96); } }