/* * Ghi đè giao diện. * File này được nạp sau CSS của ứng dụng nên có thể dùng để đổi màu, bo góc, * ẩn/hiện thành phần hoặc thêm style mới mà không cần build lại frontend. * * Ví dụ: * :root { * --accent: #ff4d6d; * } */ /* * Patch 2026-11-02 (rev 2): the two viewfinder overlay buttons (effects / * beauty and photobooth) sit in a horizontal row, centered at the bottom * of the camera preview (buttons are 36px, gap 8px). When the photobooth * button is absent (photo preview), the effects button centers alone. * NOTE: class names are CSS-module hashes of the current build; if the * frontend is rebuilt, port this into the Upload CSS module instead. */ .Upload_viewfinder__idkkX .Upload_filter-btn__nzfBl { top: auto; bottom: 20px; left: calc(50% - 40px); right: auto; } .Upload_viewfinder__idkkX .Upload_booth-btn__lYZkV { top: auto; bottom: 20px; left: calc(50% + 4px); right: auto; } /* Khi nút khung viền có mặt trong hàng (body.ki-wf-on), cả 3 nút dồn sang trái thành bộ ba canh giữa; khi nút khung tắt (phiên booth), hai nút gốc trượt về vị trí cặp canh giữa nguyên bản. Chung một nhịp trượt left .25s nên hàng nút chuyển động đồng bộ. */ body.ki-wf-on .Upload_viewfinder__idkkX .Upload_filter-btn__nzfBl { left: calc(50% - 62px); } body.ki-wf-on .Upload_viewfinder__idkkX .Upload_booth-btn__lYZkV { left: calc(50% - 18px); } .Upload_viewfinder__idkkX:not(:has(.Upload_booth-btn__lYZkV)) .Upload_filter-btn__nzfBl { left: calc(50% - 18px); } /* * Patch 2026-11-02 (rev 3): the booth pill ("Nổi bật · 5 giây", shown at the * bottom-center of the viewfinder while photobooth mode is on) overlaps the * centered button row. While the pill is present, both buttons slide up * above it (pill occupies bottom 16px + ~32px height; buttons rest at * bottom:58px); when the pill closes they glide back to bottom:20px. */ .Upload_viewfinder__idkkX .Upload_filter-btn__nzfBl, .Upload_viewfinder__idkkX .Upload_booth-btn__lYZkV { transition: bottom .25s ease, left .25s ease; } .Upload_viewfinder__idkkX:has(.Upload_booth-pill__xSBQk) .Upload_filter-btn__nzfBl, .Upload_viewfinder__idkkX:has(.Upload_booth-pill__xSBQk) .Upload_booth-btn__lYZkV { bottom: 58px; } /* * Patch 2026-11-02 (rev 4a): smooth, decisive feed swiping. * The app sets --app-h from window.innerHeight via JS on resize; on iOS * Safari the toolbars resize innerHeight DURING a scroll gesture, which * shifts every snap page mid-gesture (pager catches, needs a second pull). * Pinning --app-h to the dynamic viewport unit keeps the geometry in step * with the browser's own scrolling. Page overflow is also contained so * content can never spill into the next snap page, and the blurred media * fill is cheaper to composite while scrolling. */ /* (rev 6: the --app-h:100dvh pin from rev 4a was REMOVED — freezing the shell height fights the app's own JS sizing on iOS and can leave snap pages taller than the visible screen. The app JS owns --app-h again.) */ .MomentFeed_page__iY818 { overflow: hidden; } .MomentFeed_media-fill__Jx31F { filter: blur(14px) brightness(.75); transform: scale(1.15) translateZ(0); } /* * Patch 2026-11-02 (rev 4b): hide the "Mã tài khoản" (account ID) row in * Settings. It is the only settings row whose icon is an SVG card with a * element ("ID" badge) — every other row icon uses shapes only. */ .ProfileSection_row__VmQRK:has(.ProfileSection_row-icon__HbFUg svg text) { display: none; } /* * Patch 2026-11-02 (rev 4c): more distinctive camera overlay icons. * The effects/beauty button gets a sparkles icon; the photobooth buttons * (toggle, change frame, edit shots) get the camera-on-tripod icon the * owner picked (camera body with lens + tripod legs, white stroke). * Original SVGs are hidden and the new glyphs are drawn as centered * background images. Lock badges on gated buttons are kept. */ .Upload_viewfinder__idkkX button[aria-label="Hiệu ứng và làm đẹp"] > svg, .Upload_viewfinder__idkkX button[aria-label="Đổi khung photobooth"] > svg, .Upload_viewfinder__idkkX button[aria-label="Bật photobooth"] > svg, .Upload_viewfinder__idkkX button[aria-label="Tắt photobooth"] > svg, .Upload_viewfinder__idkkX button[aria-label^="Chỉnh từng ảnh"] > svg { display: none; } .Upload_viewfinder__idkkX button[aria-label="Hiệu ứng và làm đẹp"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 20px 20px; } .Upload_viewfinder__idkkX button[aria-label="Đổi khung photobooth"], .Upload_viewfinder__idkkX button[aria-label="Bật photobooth"], .Upload_viewfinder__idkkX button[aria-label="Tắt photobooth"], .Upload_viewfinder__idkkX button[aria-label^="Chỉnh từng ảnh"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 92' fill='none' stroke='white' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='13' width='56' height='31' rx='7'/%3E%3Cpath d='M23 13l2.2-5.2A3 3 0 0 1 28 6h8a3 3 0 0 1 2.8 1.8L41 13'/%3E%3Cpath d='M28 10.2h8'/%3E%3Cpath d='M17 13v31'/%3E%3Ccircle cx='36' cy='28.5' r='9.5'/%3E%3Cpath d='M27.5 44v2.5a4.5 4.5 0 0 0 9 0V44'/%3E%3Cpath d='M32 51v6'/%3E%3Crect x='21' y='57' width='22' height='8' rx='3.5'/%3E%3Cpath d='M26 65l-8 23'/%3E%3Cpath d='M32 65v23'/%3E%3Cpath d='M38 65l8 23'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: auto 26px; } /* Rev82: hai glyph trên vốn là background-image với stroke trắng CHẾT — nhuộm color theo trạng thái (rev81) không đổi được màu ảnh nền, đó là lý do máy thật vẫn trắng. Chuyển glyph sang lớp ::after dùng MẶT NẠ (mask) + background-color: currentColor: nút giữ nguyên nền tròn tối của app, glyph ăn theo color của nút — trắng khi thường, vàng cam #ffc531 khi đang chọn (Upload_on / ki-wf-open). */ .Upload_viewfinder__idkkX button[aria-label="Hiệu ứng và làm đẹp"], .Upload_viewfinder__idkkX button[aria-label="Đổi khung photobooth"], .Upload_viewfinder__idkkX button[aria-label="Bật photobooth"], .Upload_viewfinder__idkkX button[aria-label="Tắt photobooth"], .Upload_viewfinder__idkkX button[aria-label^="Chỉnh từng ảnh"] { background-image: none !important; } .Upload_viewfinder__idkkX button[aria-label="Hiệu ứng và làm đẹp"]::after, .Upload_viewfinder__idkkX button[aria-label="Đổi khung photobooth"]::after, .Upload_viewfinder__idkkX button[aria-label="Bật photobooth"]::after, .Upload_viewfinder__idkkX button[aria-label="Tắt photobooth"]::after, .Upload_viewfinder__idkkX button[aria-label^="Chỉnh từng ảnh"]::after { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; } .Upload_viewfinder__idkkX button[aria-label="Hiệu ứng và làm đẹp"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E"); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; } .Upload_viewfinder__idkkX button[aria-label="Đổi khung photobooth"]::after, .Upload_viewfinder__idkkX button[aria-label="Bật photobooth"]::after, .Upload_viewfinder__idkkX button[aria-label="Tắt photobooth"]::after, .Upload_viewfinder__idkkX button[aria-label^="Chỉnh từng ảnh"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 92' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='13' width='56' height='31' rx='7'/%3E%3Cpath d='M23 13l2.2-5.2A3 3 0 0 1 28 6h8a3 3 0 0 1 2.8 1.8L41 13'/%3E%3Cpath d='M28 10.2h8'/%3E%3Cpath d='M17 13v31'/%3E%3Ccircle cx='36' cy='28.5' r='9.5'/%3E%3Cpath d='M27.5 44v2.5a4.5 4.5 0 0 0 9 0V44'/%3E%3Cpath d='M32 51v6'/%3E%3Crect x='21' y='57' width='22' height='8' rx='3.5'/%3E%3Cpath d='M26 65l-8 23'/%3E%3Cpath d='M32 65v23'/%3E%3Cpath d='M38 65l8 23'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 92' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='13' width='56' height='31' rx='7'/%3E%3Cpath d='M23 13l2.2-5.2A3 3 0 0 1 28 6h8a3 3 0 0 1 2.8 1.8L41 13'/%3E%3Cpath d='M28 10.2h8'/%3E%3Cpath d='M17 13v31'/%3E%3Ccircle cx='36' cy='28.5' r='9.5'/%3E%3Cpath d='M27.5 44v2.5a4.5 4.5 0 0 0 9 0V44'/%3E%3Cpath d='M32 51v6'/%3E%3Crect x='21' y='57' width='22' height='8' rx='3.5'/%3E%3Cpath d='M26 65l-8 23'/%3E%3Cpath d='M32 65v23'/%3E%3Cpath d='M38 65l8 23'/%3E%3C/svg%3E"); -webkit-mask-size: auto 26px; mask-size: auto 26px; } /* * Patch 2026-11-02 (rev 5): vuốt feed mượt như app native. * Đo từ video quay màn hình của chủ web: khi vuốt, trang ĐỨNG HÌNH * ~1,5s rồi nhảy — iOS Safari phải chạy lại các bộ lọc trực tiếp trên * từng khung hình cuộn: * 1) .MomentFeed_media-fill dùng filter: blur() trực tiếp -> custom.js * render sẵn ảnh mờ tĩnh (canvas 24x24) và gán lại src; ở đây chỉ * việc tắt filter cho các thẻ đã có bản tĩnh. Nếu canvas bị chặn * CORS ('tainted') thì hạ blur xuống 8px cho nhẹ hơn hẳn 14px. * 2) Thanh trả lời / nhãn phụ đề / nút âm thanh dùng backdrop-filter * blur+saturate — loại bộ lọc đắt nhất khi cuộn vì phải lấy mẫu lại * nội dung đang chạy phía dưới mỗi khung hình. Nền của chúng vốn đã * là màu đặc/bán trong suốt nên tắt backdrop-filter gần như không * đổi diện mạo, chỉ đổi hiệu năng. */ .MomentFeed_media-fill__Jx31F[data-ki-static="1"] { filter: none !important; } .MomentFeed_media-fill__Jx31F[data-ki-static="tainted"] { filter: blur(8px) brightness(0.75) !important; } .MomentFeed_reply__vjWje, .MomentFeed_caption__46sof, .MomentFeed_sound-btn__xlxpb { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .MomentFeed_caption__46sof { background: #0000008a !important; } /* * Patch 2026-11-03 (rev 7): khử "khựng 1 nhịp" giữa cú vuốt + tính năng * chú thích. Lớp MomentAmbient là ảnh TOÀN MÀN HÌNH (lớn hơn màn hình * 160px) dùng filter: blur(12px) saturate trực tiếp, lại thay ảnh mới + * fade-in 0,35s đúng lúc đổi trang — iOS phải lọc lại cả lớp khổng lồ * này trong lúc feed đang trượt nên khựng đúng một nhịp mỗi lần vuốt. * custom.js render sẵn bản mờ tĩnh 48x48 cho cả lớp này: đã có bản tĩnh * thì tắt filter hẳn; bị chặn CORS thì hạ xuống blur 8px nhẹ hơn. */ .MomentAmbient_photo__lbHH2[data-ki-static="1"] { filter: none !important; } .MomentAmbient_photo__lbHH2[data-ki-static="tainted"] { filter: blur(8px) saturate(1.15) brightness(0.92) !important; } /* * Patch 2026-11-03 (rev 9): trả feed về cuộn + scroll-snap NATIVE * 100% như app gốc (gỡ pager JS của rev 8 và các ép snap !important * của rev 6 — chúng giành nhịp với cơ chế gốc trên iPhone: trang * đứng giữa hai khoảnh khắc, dải feed dính đè lên màn hình camera). * Chỉ giữ việc tắt hẳn fade-in + transition của lớp MomentAmbient: * dù ảnh đã là bitmap tĩnh, việc chạy animation opacity 0,35s trên * một lớp phủ toàn màn hình vẫn buộc iOS composite lại lớp lớn đó * đúng giữa cú vuốt. */ .MomentAmbient_photo__lbHH2 { animation: none !important; } .MomentAmbient_ambient__o920t { transition: none !important; } /* * Patch 2026-11-03 (rev 12): chi phí mỗi khung hình cuộn mà các vòng * trước CHƯA đụng tới. Số đo overlay trên máy thật: hình học khớp, * không teleport, nhưng thanh điều hướng dưới + các nút tròn nổi * TRÊN feed dùng backdrop-filter: blur(20px) saturate(1.5) — iOS * phải lấy mẫu + làm mờ lại vùng nền bên dưới các nút này ở TỪNG * khung hình feed trượt qua, đây là mẫu tốn GPU nhất trên web di * động. Tắt hẳn backdrop-filter của chrome nổi, nền bù sang màu * đặc gần tương đương (#2c2c2ee6) nên diện mạo gần như không đổi. * Kèm: bỏ box-shadow blur 36px của thẻ khoảnh khắc (phải raster * lại khi cuộn) và bỏ filter blur trực tiếp trên ảnh nền thẻ (chỉ * còn thấy ở hai dải bên của video; hạ opacity thay cho blur). */ .LocketNav_pill__ei2q3, .LocketNav_side__YpZ4Y, .MobileTopBar_circle__\+YTQx, .MobileTopBar_friends-pill__Lk9SU { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #2c2c2ee6 !important; } .MomentFeed_card__0nvaV { box-shadow: none !important; } .MomentFeed_media-fill__Jx31F { filter: none !important; opacity: 0.5; } /* * Patch 2026-11-03 (rev 15): thủ phạm park giữa trang. CSS gốc của * feed khai -webkit-overflow-scrolling: touch — thuộc tính cuộn * quán tính THỜI CŨ của iOS. Khi còn thuộc tính này, iOS Safari * dùng đường cuộn cũ và scroll-snap (khai ngay bên cạnh: * scroll-snap-type: y mandatory) bị phớt lờ/không ổn định: ảnh * chụp máy thật cho thấy feed ĐỨNG YÊN ở scrollTop 115–119 giữa * hai trang dù hình học và snap khai đúng hết, và số trang đã cố * định (vá rev 14) mà vẫn park. Đặt lại giá trị auto (đường cuộn * hiện đại) để snap hoạt động đúng như khai báo. */ .MomentFeed_feed__sRke- { -webkit-overflow-scrolling: auto !important; } /* * Patch 2026-11-03 (rev 25) — ĐÃ GỠ ở rev 27: ép --t-page-bg về * đen tại #root. Cách đó (và cả rev 26 sơn body đen) đều là "vá * màu" chống lại nguồn token duy nhất của app: dải trên cùng hết * trắng nhưng thành vệt đen cắt ngang nền chủ đề — sếp chê "bị * cut, khó chịu" là đúng. Rev 27 đi đường kiến trúc ở khối dưới. */ /* * Patch 2026-11-03 (rev 26): lớp đúng của vụ "thanh trắng" theo * deep research iOS Safari (xem report ios-safari-status-bar-tint * 2026-11-03). UA máy sếp ghi Version/27.0 — từ Safari 26, * theme-color KHÔNG còn được dùng để nhuộm dải trên cùng nữa * (đó là lý do rev24 ghim meta đen mà dải vẫn trắng); Safari lấy * màu nhuộm từ background-color của BODY — mà app để mặc định * Bootstrap #fff — cộng với nền canvas do body truyền lên (CSS * Backgrounds: html không có nền thì nền body phủ toàn canvas, * #root cao bằng innerHeight không giới hạn được canvas). Vá: * sơn html + body đen đặc !important (phải cả hai: html có nền * thì body hết truyền, và body là nguồn mẫu mặc định của * Safari). Hệ quả kèm: vùng overscroll cũng đen — đúng ý. */ html, body { /* Rev 33: BỎ !important. Bản rev 26 ghim đen !important đã * thắng cả inline style mà JS gương nền (rev 29/30) đặt lên * html/body — computed color của html trên máy thật đo được * rgb(0,0,0) trong khi image là gradient chủ đề (env rev31), * và iOS sơn vùng ngoài layout (dải status bar của bản * standalone) bằng background-COLOR của canvas → dải đen * không cách gì đồng bộ được. Nay: màu chờ = token đặc của * chủ đề (--t-page-solid) do chính app đặt; inline của JS * gương thắng lớp này khi chạy. */ background-color: var(--t-page-solid, #161618); } /* * Rev 32 (2026-11-03): sheet hiệu ứng (StudioPanel) — chừa thêm * khoảng dưới cho hàng 'Đặt lại tất cả'. Bằng chứng pixel từ ảnh * chụp máy sếp (photo-33, bản standalone): hàng chữ này dính sát * mép dưới của sheet, descender bị cắt cụt ('Đặt' mất nét dưới) * và chữ bị SHEET ĐÈ LÊN thanh điều hướng nổi; trong khi đo mô * phỏng cùng bộ quy tắc gốc cho khoảng đệm 44px (10 + safe-area * 34) rất thoải mái — tức trên máy thật vùng đệm đó co lại gần * như bằng không (ứng viên: --safe-bottom do app tự đặt lại * trong bản standalone, hoặc sheet bị thanh điều hướng nổi * z-cao hơn che mất phần đệm). Vá theo hướng không phụ thuộc * safe-area: cộng thẳng 30px đệm dưới cho panel, cộng cả biến * của app (nếu app đặt 34 thì tổng 74 — hơi dư nhưng an toàn; * nếu app đặt 0 thì có đúng 40px). Panel là position:fixed * bottom:0, cao theo nội dung nên đệm cộng thêm chỉ nâng nội * dung lên, không cắt gì khác. */ .StudioPanel_panel__gXJQy { padding-bottom: calc(40px + var(--safe-bottom, 0px)) !important; } /* * Rev 34 (2026-11-03): khung trang full cạnh tới cạnh ở bản * standalone. Chuẩn đối chiếu: app Locket gốc — nền liền một * màu từ mép trên xuống mép dưới, các nút kính nổi trên nền * đó (ảnh sếp gửi 09:53). viewport-fit=cover (rev 33) làm * viewport layout cao hơn vùng app tự tính (--app-h = * innerHeight) → dưới đáy lộ canvas thành dải màu (ảnh * photo-35: dải nâu dưới thanh điều hướng). Vá: ở chế độ * standalone, #root cao theo viewport LỚN NHẤT (100lvh, gồm * cả vùng dưới thanh trạng thái/home) để lớp sơn của app tự * phủ kín màn hình; canvas chỉ còn là lớp dự phòng và đã * được JS gương sang đúng màu đáy trang (custom.js rev34). * Chỉ áp standalone để không phá bố cục khi mở bằng tab. */ @media (display-mode: standalone) { #root { height: 100dvh !important; height: 100lvh !important; } /* Rev 37: đệm chuyển vào TRONG Dashboard — sửa đúng * điểm rev 35 làm hỏng. Sự thật từ bundle (đọc 10:0x): * lớp sơn SÁNG của trang là ::before của Dashboard * (background: var(--cam-bg) = gradient gốc sáng của * chủ đề, inset:0 phủ kín Dashboard), còn nền của * chính Dashboard và #root là biến thể tối. Rev 33 * (ảnh photo-35) phía trên ĐÃ đúng vì Dashboard nằm ở * y=0 và ::before sơn cả dải trên; rev 35 đệm #root * đã đẩy Dashboard xuống, dải trên lộ nền tối của * #root. Bản này: #root không đệm nữa (Dashboard về * y=0, ::before sơn kín lên mép trên như photo-35), * và đệm an toàn cộng vào padding-top của CHÍNH * Dashboard — nội dung (hàng icon) lùi xuống dưới * Dynamic Island, còn vùng đệm vẫn do ::before của * Dashboard sơn sáng. Phần đáy (100lvh) đã đúng từ * rev 34 — giữ nguyên, không đụng. */ [class*='Dashboard_mobile'] { padding-top: env(safe-area-inset-top, 0px) !important; box-sizing: border-box; } } /* * Rev 35 (2026-11-03): popup hiệu ứng — thẻ kính NỔI, bo * cong, KHÔNG vết cắt. Chỉ đạo của sếp (09:57): 'bo cong * tách ra, không có vết cut ngang'. Rev 33 nổi nhưng có * vòng viền sáng bao quanh (inset 0 0 0 1px) + sợi sáng * mép trên → trên máy thật thành đường viền cắt. Rev 34 * dính đáy thì sếp bảo 'trở về như cũ'. Bản này: nổi hẳn * (lệch 12px hai bên, nhấc khỏi đáy 12px + safe), bo 28px * cả 4 góc, bề mặt kính của app (token --t-sheet 84% + * blur 24px saturate 1.5), và TUYỆT ĐỐI không viền: bỏ * mọi inset — chỉ một bóng đổ khuếch tán mềm, bán kính * lớn, độ mờ thấp để mép thẻ tan vào nền thay vì cắt. * Đối chiếu ngôn ngữ app gốc: các pill kính của Locket * (thanh điều hướng, pill bạn bè) đều không viền, chỉ * mờ kính + bóng rất nhẹ. Rise lò xo .38s giữ nguyên, * tôn trọng reduced-motion. Đệm dưới rev 32 giữ nguyên. */ .StudioPanel_panel__gXJQy { /* Rev 41: quay lại thẻ NỔI kính trong của rev 39 theo * đúng lời sếp (10:25): 'cần giống lúc nãy, chỉ fix * phần bg đang bị tách ra có viền 2 lớp'. Rev 40 dính * đáy bị chê 'lại nguyên đường cut như cũ' → huỷ. */ /* Rev 44: theo đúng ảnh gốc app Locket sếp gửi * (photo-46/47) — sheet DÍNH ĐÁY FULL BỀ NGANG, bo * lớn chỉ ở hai góc trên, mặt sheet ĐẶC như bản gốc. * Hết thẻ nổi/kính trong: khe đáy và đường biên tách * lớp biến mất vì sheet phủ kín tới mép màn hình. */ left: 0 !important; right: 0 !important; margin-bottom: 0; border-radius: 36px 36px 0 0 !important; /* Rev 39: kính TRONG THẬT. Log nginx chốt máy đã nhận * rev 38 (10:18) mà sếp vẫn bảo 'vẫn vậy' — đúng, vì * bỏ viền mà thân thẻ vẫn đặc 84% thì đường biên của * mảng đặc vẫn tách thẻ khỏi nền. Hạ độ đặc xuống 58% * và tăng blur lên 28px + saturate 1.6 cố định (không * theo token nữa): nền xuyên qua thẻ như kính thật, * biên thẻ chỉ còn là vệt sáng mờ + bóng mềm, không * còn mảng đặc để lộ đường cắt. Đây là đúng biến thể * 'clear glass' của Apple cho bề mặt nổi trên ảnh. */ /* Rev 44: mặt sheet đặc như app gốc — dùng đúng token * của app (kèm filter kính khi user chọn style Kính). */ background: var(--t-sheet, #2c2c2e) !important; backdrop-filter: var(--t-sheet-filter, none) !important; -webkit-backdrop-filter: var(--t-sheet-filter, none) !important; /* Rev 38: viền sáng CHỈ ở mép trên. Ảnh cận cảnh sếp * gửi (photo_1-7) cho thấy vòng sáng quanh thân của * rev 37 vẽ thành đường outline tách thẻ khỏi nền ở * mép dưới và hai góc — đúng cái sếp bảo 'đừng tách * ra'. Bỏ vòng quanh + sợi đáy; giữ đường specular * mép trên (ánh sáng Apple chiếu từ trên) và thay * bóng đổ bằng hai lớp mềm rộng để mép dưới của thẻ * hoà vào bóng, liền mạch với nền. */ /* Rev 41: VIỀN 2 LỚP nằm ở bóng đổ — rev 38/39 xếp * hai lớp bóng (một lớp sát 4px/18px + một lớp xa * 18px/50px): lớp sát tạo thành đường tối thứ hai * ngay dưới mép thẻ, cộng với mép kính thành 'viền * 2 lớp' tách thẻ khỏi nền (ảnh photo-42). Bản này * chỉ còn MỘT lớp bóng duy nhất, blur thật lớn 70px * để bóng không có cạnh đọc được ở bất cứ đâu; đường * specular mép trên giữ nguyên. */ /* Rev 44: sheet dính đáy chỉ cần MỘT bóng hắt lên * trên (như bản gốc 0 -12px 40px) — không specular, * không bóng đổ xuống (không còn mép dưới để đổ). */ box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45) !important; animation: kiGlassRise 0.38s cubic-bezier(0.32, 0.72, 0.24, 1) both !important; } @keyframes kiGlassRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* * Rev 42 — LIQUID GLASS cho MỌI popup/sheet (chỉ thị sếp * 2026-11-03 10:31: "check lại hết mấy phần popup đều cho * liquid glass hết viền ngoài, xuyên background, cạnh dưới * bo cong, thêm animation mượt"). Một công thức kính DUY * NHẤT toàn app (đã chốt ở StudioPanel rev 41): nền sheet * 58% + blur 28px saturate 1.6 (nền xuyên qua), specular * sáng mép trên, MỘT lớp bóng khuếch tán 24/70, bo 28px, * animation nảy kiGlassRise 0.38s. * * Nhóm nổi (bottom sheet): CaptionPicker (fixed riêng), * MomentFeed action sheet + Dialog sheet (nằm trong wrap * flex-end -> dùng margin). Cả hai đều được nâng khỏi đáy * 12px, bo tròn cả cạnh dưới, padding đáy bỏ phần * safe-area vì thẻ không còn ngồi trong vùng home-bar. */ /* Rev 44: hình học sheet theo app gốc (photo-46) — * dính đáy, full bề ngang, phủ kín tới mép dưới. */ .CaptionPicker_panel__ZVl\+z { left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; margin: 0 auto !important; padding-bottom: calc(12px + var(--safe-bottom, 0px)) !important; } .MomentFeed_sheet__m4Q9v, .Dialog_panel__YNtOY.Dialog_sheet__DGe1U { margin: 0 !important; padding-bottom: calc(14px + var(--safe-bottom, 0px)) !important; } /* Mặt sheet ĐẶC như app gốc cho cả họ bottom sheet. */ .CaptionPicker_panel__ZVl\+z, .MomentFeed_sheet__m4Q9v, .Dialog_panel__YNtOY.Dialog_sheet__DGe1U { border-radius: 36px 36px 0 0 !important; background: var(--t-sheet, #2c2c2e) !important; backdrop-filter: var(--t-sheet-filter, none) !important; -webkit-backdrop-filter: var(--t-sheet-filter, none) !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45) !important; animation: kiGlassRise 0.38s cubic-bezier(0.32, 0.72, 0.24, 1) both !important; } /* Hộp thoại giữa màn hình: giữ kính nổi (đúng tính chất * của nó), animation bung kiGlassPop. Chỉ panel GIỮA màn * hình — panel dạng sheet có mặt đặc ở rule trên. */ .Dialog_panel__YNtOY:not(.Dialog_sheet__DGe1U) { border-radius: 28px !important; background: color-mix(in srgb, var(--t-sheet, #2c2c2e) 58%, transparent) !important; backdrop-filter: blur(28px) saturate(1.6) !important; -webkit-backdrop-filter: blur(28px) saturate(1.6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 24px 70px rgba(0, 0, 0, 0.25) !important; animation: kiGlassPop 0.34s cubic-bezier(0.32, 0.72, 0.24, 1) both !important; } /* Dropdown menu (Dialog): cùng kính, mở bằng kiGlassDrop. */ .Dialog_dropdown__SdwmH { border-radius: 28px !important; background: color-mix(in srgb, var(--t-dropdown, #48484a) 58%, transparent) !important; backdrop-filter: blur(28px) saturate(1.6) !important; -webkit-backdrop-filter: blur(28px) saturate(1.6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 24px 70px rgba(0, 0, 0, 0.25) !important; animation: kiGlassDrop 0.3s cubic-bezier(0.32, 0.72, 0.24, 1) both !important; } /* * Rev 43 — sửa 2 lỗi trên màn Gửi (ảnh sếp photo-45): * (1) TÁCH LỚP/BÙN MÀU: backdrop của CaptionPicker mờ đen * 55% (#0000008c) giết hết nền trước khi kính blur -> kính * chỉ blur một trường đen, thành phiến nâu xám tách hẳn * khỏi trang. Hạ dim xuống 30%: cảnh thật còn sống sau * kính, một lớp kính duy nhất đọc liền mạch. * (2) DẢI VÀNG THỪA ĐÁY MÀN: --app-h do JS gán theo * innerHeight có thể nhỏ hơn chiều cao thật của máy độc * lập (màn Gửi lọt thỏm, canvas vàng lộ ~34px ở đáy). Ghim * --app-h = 100lvh trong standalone cho mọi màn dùng nó * (#root, pager, chat, memories, dialog). */ .CaptionPicker_backdrop__vK8oi { background: rgba(0, 0, 0, 0.3) !important; } @media (display-mode: standalone) { :root { --app-h: 100lvh !important; } } /* Rev 44: sheet toàn màn hình trả về mặt ĐẶC gốc * (--t-sheet-full), huỷ lớp kính trong của rev 42. */ .Friends_sheet__54127, .Donate_sheet__AFqB4 { background: var(--t-sheet-full, #232325) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } @keyframes kiGlassPop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes kiGlassDrop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .StudioPanel_panel__gXJQy, .CaptionPicker_panel__ZVl\+z, .MomentFeed_sheet__m4Q9v, .Dialog_panel__YNtOY.Dialog_sheet__DGe1U, .Dialog_panel__YNtOY, .Dialog_dropdown__SdwmH { animation: none !important; } } /* * Rev 45 — ICON MÀN GỬI theo app gốc (chỉ thị sếp 10:43 + * ảnh gốc photo-47; đối chiếu bundle trước khi sửa): * - Nút tải xuống (MobileTopBar circle+bare, xuất hiện 1 * lần duy nhất trong bundle — đúng nút này): bản web * lộ VÒNG TRÒN đặc xám + bóng (ảnh photo-45 crop) dù * CSS gốc đã ghi bare — một override style Kính của * app vẽ lại nền chrome thắng bare. Bản gốc: glyph * TRẦN, mũi tên ĐẶC đậm vào khay U. Fix: diệt nền/bóng * bằng !important, ẩn svg nét cũ, vẽ glyph đặc bằng * mask + currentColor (tự theo màu chữ của theme: * tối trên nền kem, sáng trên nền đen — như gốc). * - Nút gửi: máy bay giấy nét 1.9/36px -> 40px nét 2.2 * cho đậm như gốc (vòng tròn xám btn-post giữ nguyên). * - Nút X huỷ: 22px -> 26px (gốc to hơn; chọn theo * aria-label để không đụng nút flip camera). * - Nút mở nhãn (icon-trigger): glyph Aa+sao trong bundle * ĐÃ giống gốc (arc + Aa + sao) — chỉ nâng 34 -> 38px. */ .MobileTopBar_circle__\+YTQx.MobileTopBar_bare__JNw0F { background-color: currentColor !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 16.9c-.5 0-.95-.22-1.26-.62L6.7 11.1c-.52-.7-.02-1.7.9-1.7h2.75V3.55c0-.92.73-1.65 1.65-1.65s1.65.73 1.65 1.65V9.4h2.75c.92 0 1.42 1 .9 1.7l-4.04 5.18c-.31.4-.76.62-1.26.62z'/%3E%3Cpath d='M4.9 14.6v2.9a4.1 4.1 0 0 0 4.1 4.1h6a4.1 4.1 0 0 0 4.1-4.1v-2.9' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 16.9c-.5 0-.95-.22-1.26-.62L6.7 11.1c-.52-.7-.02-1.7.9-1.7h2.75V3.55c0-.92.73-1.65 1.65-1.65s1.65.73 1.65 1.65V9.4h2.75c.92 0 1.42 1 .9 1.7l-4.04 5.18c-.31.4-.76.62-1.26.62z'/%3E%3Cpath d='M4.9 14.6v2.9a4.1 4.1 0 0 0 4.1 4.1h6a4.1 4.1 0 0 0 4.1-4.1v-2.9' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 27px 27px; mask-size: 27px 27px; } .MobileTopBar_circle__\+YTQx.MobileTopBar_bare__JNw0F svg { display: none !important; } .Upload_post-inner__r0OgS svg { width: 40px !important; height: 40px !important; stroke-width: 2.2; } button[aria-label="Huỷ, chụp lại"] svg { width: 26px !important; height: 26px !important; } .CaptionPicker_icon-trigger__iJQvD svg { width: 38px !important; height: 38px !important; } /* * Patch 2026-11-03 (rev 27) — ĐÃ GỠ ở rev 29: viewport-fit= * cover + khung safe-area trên #root. Trên tab Safari dọc, * cover không nới viewport được chút nào; nó chỉ làm lộ canvas * đen ở cả hai đầu trang (ảnh sếp 09:20: dải trên ám đen, dưới * thêm dải đen dưới vùng vàng). Rev 29 trả hình học về nguyên * trạng và đi đúng cơ chế canvas: custom.js gương nền chủ đề * (--t-page-bg) lên html + body, để vùng đệm trên/dưới của * Safari tự mang gradient của chủ đề. Lớp sơn html/body đen ở * rev 26 giữ vai trò nền chờ trước khi JS chạy và cho chủ đề * mặc định; inline style của JS thắng nó khi có chủ đề. */ /* * Rev 28: pager transform cho feed — khi custom.js gắn lớp * ki-pager-on, feed thôi là scroller gốc (không overflow cuộn, * không snap của iOS nữa); các trang [data-page] được dịch bằng * transform do pager điều khiển hoàn toàn (kéo theo tay, đà, * animation đáp trang). touch-action: none để cử chỉ dọc thuộc * về pager, không bị trình duyệt giành cho cuộn/zoom. */ .MomentFeed_feed__sRke-.ki-pager-on { overflow: hidden !important; scroll-snap-type: none !important; touch-action: none; } /* * Rev 50 — ANIMATION POPUP/SHEET (chỉ thị sếp 2026-11-03 * 11:18: "save thêm animation popup cho mượt nhất có * thể"). CHỈ đụng animation — hình học rev44, mặt sheet * và icon rev45 giữ nguyên từng dòng. Nguyên tắc: chỉ * animate transform + opacity (compositor, 60fps); đường * cong kiểu spring iOS (tấn công nhanh, đáp êm, vượt nhẹ * 1–2px rồi yên); opacity đầy sớm (40–55% hành trình) để * panel hết "ma" khi còn đang trượt; backdrop fade đồng * bộ với sheet. */ /* Sheet đáy: trượt lên 0.48s, spring rất nhẹ (overshoot 1.02 — bản 0.55s/1.06 cũ đáp lâu và rung thêm khung hình lúc chạm đáy). */ .StudioPanel_panel__gXJQy, .CaptionPicker_panel__ZVl\+z, .MomentFeed_sheet__m4Q9v, .Dialog_panel__YNtOY.Dialog_sheet__DGe1U { animation: kiGlassRise 0.48s cubic-bezier(0.32, 1.02, 0.4, 1) both !important; } @keyframes kiGlassRise { from { opacity: 0; transform: translateY(30px); } 45% { opacity: 1; } to { opacity: 1; transform: translateY(0); } } /* Backdrop của picker: fade vào đồng bộ với sheet. */ .CaptionPicker_backdrop__vK8oi { animation: kiFadeIn 0.4s ease-out both !important; } @keyframes kiFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Hộp thoại giữa màn hình: bung spring rõ hơn một chút. */ .Dialog_panel__YNtOY:not(.Dialog_sheet__DGe1U) { animation: kiGlassPop 0.38s cubic-bezier(0.34, 1.22, 0.4, 1) both !important; } @keyframes kiGlassPop { from { opacity: 0; transform: scale(0.94) translateY(10px); } 50% { opacity: 1; } to { opacity: 1; transform: scale(1) translateY(0); } } /* Dropdown: mở từ mép trên xuống. */ .Dialog_dropdown__SdwmH { transform-origin: top center; animation: kiGlassDrop 0.34s cubic-bezier(0.34, 1.1, 0.4, 1) both !important; } @keyframes kiGlassDrop { from { opacity: 0; transform: translateY(-5px) scale(0.96); } 55% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1); } } /* Sheet toàn màn hình (Bạn bè / Ủng hộ): trượt kiểu ngăn * kéo dài — đi một đoạn 6% chiều cao rồi đáp êm. */ .Friends_sheet__54127, .Donate_sheet__AFqB4 { animation: kiDrawerRise 0.48s cubic-bezier(0.32, 0.72, 0.24, 1) both !important; } @keyframes kiDrawerRise { from { opacity: 0; transform: translateY(6%); } 40% { opacity: 1; } to { opacity: 1; transform: translateY(0); } } /* Giảm chuyển động: chỉ cross-fade, không trượt/nảy. */ @media (prefers-reduced-motion: reduce) { .StudioPanel_panel__gXJQy, .CaptionPicker_panel__ZVl\+z, .MomentFeed_sheet__m4Q9v, .Dialog_panel__YNtOY.Dialog_sheet__DGe1U, .Dialog_panel__YNtOY, .Dialog_dropdown__SdwmH, .Friends_sheet__54127, .Donate_sheet__AFqB4, .CaptionPicker_backdrop__vK8oi { animation: kiFadeIn 0.18s ease-out both !important; } } /* * Rev 51 — ICON MỞ NHÃN theo app gốc 100% (chỉ thị sếp * 2026-11-03 11:21, ảnh gốc photo_1-11): glyph trong bundle * là arc + Aa + dấu CỘNG; bản gốc là arc + Aa + HAI SAO * 4 cánh (lớn + nhỏ) ở góc phải trên. Hình học đo từ chính * ảnh gốc (tách 5 component, fit ellipse cung tròn): cung * ellipse tâm (176,164) rx 160 ry 137 nét 34 đầu tròn, * hở góc 60°..-20°; sao lớn tâm (325,98) r 49, sao nhỏ * (265,30) r 30; chữ Aa bold rounded tại chỗ. Kỹ thuật * như rev45 (đã chạy đúng trên máy): ẩn glyph con trong * svg của nút, sơn glyph gốc bằng mask + currentColor — * màu tự theo màu chrome của theme (tối trên nền sáng, * sáng trên nền tối) nên không bao giờ chìm vào nền. * Trạng thái đã có nhãn: svg bị gỡ khỏi DOM (thay bằng * emoji nhãn) nên không ảnh hưởng. */ .CaptionPicker_icon-trigger__iJQvD svg { background-color: currentColor !important; -webkit-mask-image: url("data:image/svg+xml,Aa"); mask-image: url("data:image/svg+xml,Aa"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .CaptionPicker_icon-trigger__iJQvD svg > * { display: none !important; } /* * Khung viền widget (2026-11-03, rev56): nút tròn cạnh nút photobooth ở * đáy viewfinder + bảng chọn khung (sheet dính đáy kiểu native). Nút là * bản sao class của nút photobooth nên giữ nguyên nền kính/kích thước * của app; chỉ đổi vị trí (kế bên phải) và glyph (CSS dưới đây ghi đè * background-image tripod + hiện svg riêng). */ .Upload_viewfinder__idkkX #ki-wf-btn { top: auto; bottom: 20px; left: calc(50% + 26px); right: auto; background-image: none !important; transition: bottom .25s ease, left .25s ease; } /* Trạng thái đang gắn khung dùng class Upload_on của chính app (đổi màu icon sang accent) — đồng bộ với cách nút photobooth báo đang bật. */ /* Lớp khung phủ lên khung camera (xem trước trực tiếp + màn hình duyệt ảnh sau chụp): JS gắn img VÀO TRONG hộp viewfinder/media (không còn fixed trên body) nên khung bị cắt đúng bo góc của khung ngắm và luôn nằm DƯỚI các nút chức năng của app — nút được nâng z-index 5 ở rule ngay dưới, khung z-index 1 (ngang lớp canvas hiệu ứng của app). */ /* Nút zoom camera kiểu app native: vòng tròn mờ góc phải trên khung ngắm, cặp với nút flash góc trái của app (cùng nền mờ + blur). */ #ki-zoom-btn { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 800; display: none; align-items: center; justify-content: center; z-index: 6; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } #ki-zoom-btn:active { transform: scale(.92); } /* Nhóm khung photobooth chia mục thu/xổ như panel khung widget: bấm tiêu đề nhóm (Basic / Hoạ tiết / Premium) để xổ hoặc thu. custom.js gắn .ki-sec-closed + badge số lượng; ở đây chỉ là hình thức + cơ chế thu bằng grid-template-rows trên chính nhóm của app. */ .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9 { display: grid; grid-template-rows: auto 1fr; transition: grid-template-rows .38s cubic-bezier(.32, .72, .35, 1); } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9.ki-sec-closed { grid-template-rows: auto 0fr; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9 > .BoothSheet_frames__o8DAR, .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9 > .BoothSheet_tiles__HGUax { min-height: 0; overflow: hidden; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9.ki-sec-closed > .BoothSheet_frames__o8DAR { padding-top: 0; padding-bottom: 0; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9:not(.ki-sec-closed) > .BoothSheet_tiles__HGUax { padding-top: 3px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9 .BoothSheet_sub__cu8YG { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #fff; margin: 0; padding: 6px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9.ki-sec-premium .BoothSheet_sub__cu8YG { color: #ffc531; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9 .BoothSheet_sub__cu8YG::after { content: ''; margin-left: auto; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5L12 16l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .34s cubic-bezier(.32, .72, .35, 1); } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd .BoothSheet_frame-group__ToDh9:not(.ki-sec-closed) .BoothSheet_sub__cu8YG::after { transform: rotate(180deg); } .ki-booth-count { font-size: 12px; font-weight: 700; color: #a7a7ad; background: #26262b; border-radius: 999px; padding: 2.5px 8px; } /* Ba nút camera (lọc/photobooth/widget — kèm flash/âm thanh cùng họ): nút nào đang bật hoặc đang thao tác thì icon chuyển VÀNG CAM #ffc531 cho rõ trạng thái đang chọn. App vốn gắn class Upload_on và tô var(--cam-accent) — màu accent đổi theo theme nên nhiều theme không ra vàng cam; ở đây chốt cứng màu vàng cam. Nút widget mở panel thì custom.js gắn thêm .ki-wf-open. */ .Upload_booth-btn__lYZkV.Upload_on__vQXBY, .Upload_filter-btn__nzfBl.Upload_on__vQXBY, .Upload_flash-btn__xPw8W.Upload_on__vQXBY, .Upload_sound-btn__ji6jH.Upload_on__vQXBY, #ki-wf-btn.ki-wf-open { color: #ffc531 !important; } /* Riêng nút hiệu ứng: app chỉ gắn Upload_on khi studio đang xử lý hoặc đã áp look — mở panel Bộ lọc ở filter "Gốc" thì không gắn. custom.js theo dõi panel StudioPanel và gắn .ki-filter-open khi panel đang mở để nút cũng vàng cam lúc đang thao tác. */ .Upload_viewfinder__idkkX button[aria-label="Hiệu ứng và làm đẹp"].ki-filter-open { color: #ffc531 !important; } #ki-wf-overlay { position: absolute; z-index: 1; pointer-events: none; display: none; } /* Nút chức năng + pill của app phải luôn nổi trên khung viền widget. */ .Upload_booth-btn__lYZkV, .Upload_filter-btn__nzfBl, .Upload_flash-btn__xPw8W, .Upload_sound-btn__ji6jH, .Upload_booth-pill__xSBQk, .Upload_booth-video-chip__XHGM2, .Upload_zoom-badge__xXpv9, .Upload_caption-pill__hrkBh, #ki-wf-btn { z-index: 5; } /* Sheet đóng: rơi thẳng xuống hết cỡ trong .2s, CHỈ transform — bản cũ chỉ trượt 48px + mờ dần tới opacity .4 nên nhìn nhòe, bóng ma. Nền mờ phía sau cũng tắt trong cùng nhịp .2s. */ #ki-wf-backdrop.closing #ki-wf-sheet { animation: kiSheetFall .2s ease-in forwards; } #ki-wf-backdrop.closing { animation: kiWfDim .2s ease-out forwards; } @keyframes kiSheetFall { from { transform: translateY(0); } to { transform: translateY(102%); } } @keyframes kiWfDim { to { background: rgba(0, 0, 0, 0); } } .Upload_viewfinder__idkkX:has(.Upload_booth-pill__xSBQk) #ki-wf-btn { bottom: 58px; } #ki-wf-btn { position: absolute; width: 36px; height: 36px; border-radius: 50%; flex: none; } #ki-wf-btn svg { display: block !important; width: 21px; height: 21px; margin: auto; } #ki-wf-backdrop { position: fixed; inset: 0; z-index: 520; background: rgba(0, 0, 0, .45); display: none; align-items: flex-end; justify-content: center; /* Như sheet photobooth của app (không có backdrop chặn chạm): chỉ mờ nền, chạm xuyên qua để nút khung vẫn bấm tắt/mở được (pop in/out). */ pointer-events: none; } #ki-wf-sheet { pointer-events: auto; } #ki-wf-backdrop.open { display: flex; } #ki-wf-sheet { width: 100%; max-width: 520px; max-height: 94dvh; display: flex; flex-direction: column; overflow: hidden; background: #121214; color: #fff; border-radius: 30px 30px 0 0; padding: 10px 7.5vw calc(18px + var(--safe-bottom, 0px)); box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); animation: kiGlassRise .48s cubic-bezier(.32, 1.02, .4, 1); font-family: inherit; } /* Vùng giữa (preview + 2 mục khung) cuộn riêng; tiêu đề ở trên và công tắc + nút Dùng khung này ở dưới luôn cố định, không bị cut. */ .ki-wf-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; } .ki-wf-scroll::-webkit-scrollbar { display: none; } .ki-wf-handle { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); margin: 2px auto 12px; } .ki-wf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ki-wf-title { font-size: 25px; font-weight: 800; } #ki-wf-close { border: 0; background: rgba(255, 255, 255, .13); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; } #ki-wf-close svg { width: 15px; height: 15px; display: block; } .ki-wf-preview { position: relative; width: 42vw; max-width: 192px; aspect-ratio: 1; margin: 12px auto 0; border-radius: 13%; overflow: hidden; background: linear-gradient(165deg, #f7e0ac, #eed08f); } .ki-wf-person { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 29%; height: auto; z-index: 1; } .ki-wf-person circle, .ki-wf-person path { fill: #17191d; stroke: #fff; stroke-width: 5; stroke-linejoin: round; } .ki-wf-preview img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .ki-wf-preview-name { text-align: center; font-weight: 700; font-size: 16.5px; margin: 8px 0 12px; } .ki-wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8.5vw; margin: 2px 0 14px; } /* Hai mục Basic / Premium: mặc định thu gọn thành hàng tiêu đề nhỏ, bấm vào mới xổ lưới khung ra (trượt bằng grid-template-rows). */ .ki-wf-sec { border-top: 1px solid rgba(255, 255, 255, .07); padding-bottom: 4px; } .ki-wf-sec-head { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; padding: 13px 2px 11px; color: #fff; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ki-wf-sec-title { font-size: 16.5px; font-weight: 800; letter-spacing: .2px; } #ki-wf-sec-premium .ki-wf-sec-title { color: #ffc531; } .ki-wf-sec-count { font-size: 12px; font-weight: 700; color: #a7a7ad; background: #26262b; border-radius: 999px; padding: 2.5px 8px; } .ki-wf-sec-chev { margin-left: auto; width: 19px; height: 19px; color: #8e8e93; transition: transform .34s cubic-bezier(.32, .72, .35, 1); } .ki-wf-sec.open .ki-wf-sec-chev { transform: rotate(180deg); } .ki-wf-sec-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.32, .72, .35, 1); } .ki-wf-sec.open .ki-wf-sec-body { grid-template-rows: 1fr; } .ki-wf-sec-body .ki-wf-grid { overflow: hidden; min-height: 0; margin: 0; } /* Khi mục đang mở mới chừa đệm cho badge ✓ (thò lên 7px) và vành chọn 2.5px của hàng đầu/cột biên — đệm thường trực sẽ làm chiều cao thu gọn rò đúng bằng đệm (9+4px) nên chỉ áp khi .open. */ .ki-wf-sec.open .ki-wf-grid { padding: 9px 6px 4px; } .ki-wf-tile { position: relative; border: 0; background: none; color: #fff; padding: 0; cursor: pointer; font-family: inherit; } .ki-wf-thumb { position: relative; display: block; aspect-ratio: 1; border-radius: 15%; overflow: hidden; background: linear-gradient(165deg, #f7e0ac, #eed08f); } .ki-wf-tile.sel .ki-wf-thumb { box-shadow: 0 0 0 2.5px #ffc531; } .ki-wf-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .ki-wf-check { position: absolute; top: -7px; right: -3px; width: 23px; height: 23px; border-radius: 50%; background: #ffc531; display: none; align-items: center; justify-content: center; z-index: 3; } .ki-wf-tile.sel .ki-wf-check { display: flex; } .ki-wf-check svg { width: 13px; height: 13px; display: block; } .ki-wf-tile-name { display: block; font-size: 13px; font-weight: 600; margin-top: 7px; text-align: center; opacity: .92; } .ki-wf-divider { height: 1px; background: rgba(255, 255, 255, .09); margin-bottom: 14px; } .ki-wf-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15.5px; font-weight: 600; margin-bottom: 14px; } #ki-wf-toggle { width: 52px; height: 32px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .16); position: relative; cursor: pointer; flex: none; transition: background .2s ease; padding: 0; } #ki-wf-toggle .ki-wf-knob { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: transform .2s ease; } #ki-wf-toggle.on { background: #ffc531; } #ki-wf-toggle.on .ki-wf-knob { transform: translateX(20px); } #ki-wf-apply { width: 100%; border: 0; border-radius: 999px; background: #ffc531; color: #1a1405; font-size: 16.5px; font-weight: 800; padding: 15px; cursor: pointer; font-family: inherit; } #ki-wf-apply:active { transform: scale(.98); } /* Nút "Không khung" dưới nút Dùng khung này: bỏ chọn hẳn khung. Khi chưa chọn khung nào thì mờ + không bấm được. */ #ki-wf-none { width: 100%; margin-top: 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 15.5px; font-weight: 700; padding: 13px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; } #ki-wf-none:active { transform: scale(.98); } #ki-wf-none.off { opacity: .35; pointer-events: none; } .ki-wf-status { text-align: center; font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 8px; color: #ffd34d; } /* ===== Restyle theo ref của sếp (2026-11-03): màn Photobooth + sheet Bộ lọc — nền tối, điểm nhấn vàng #FFC531, trạng thái chọn màu vàng. */ /* --- Màn Photobooth (BoothSheet trong Dialog sheet) --- */ .Dialog_panel__YNtOY.Dialog_sheet__DGe1U:has(#booth-title) { background: #101012 !important; border-radius: 28px 28px 0 0 !important; padding: 14px 20px calc(22px + var(--safe-bottom, 0px)) !important; position: relative; } .Dialog_panel__YNtOY.Dialog_sheet__DGe1U:has(#booth-title) .Dialog_close-bar__98oUY { display: none; } #booth-title { font-size: 21px; text-align: center; margin: 6px 48px 18px; } .ki-booth-back { position: absolute; top: 10px; left: 10px; width: 44px; height: 44px; background: none; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; padding: 0; } /* REV78: các rule BoothSheet trước đây mở đầu bằng #root nhưng sheet này render qua portal ra document.body — #root KHÔNG phải tổ tiên nên rule không bao giờ khớp trên máy thật. Hậu quả nặng nhất: nút done không được position:absolute như thiết kế nên ::after (inset:0) bám vào panel và PHỦ TOÀN BỘ sheet — mọi cú chạm trong sheet đều trúng nút done làm sheet đóng ngay. Nay scope theo chính panel (.Dialog_panel:has(#booth-title)) — portal-safe, specificity vẫn cao hơn CSS bundle — và ::after thêm pointer-events:none. */ .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_done__x3e0a { position: absolute; top: 10px; right: 14px; width: 44px; height: 44px; border-radius: 50%; background: #ffc531; font-size: 0; color: transparent; padding: 0; z-index: 3; } .BoothSheet_done__x3e0a::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-color: #1c1c1e; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l5.2 5L19.5 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l5.2 5L19.5 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-size: 22px; mask-size: 22px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_label__EpVnS { font-size: 16.5px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_sec__x003w { gap: 10px; margin-bottom: 20px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_segment__7ENc5 { background: #26262b; border-radius: 14px; padding: 3px; gap: 3px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_seg__ivPeC { height: 42px; font-size: 15px; border-radius: 11px; color: #a9a9b0; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_seg__ivPeC.BoothSheet_on__ZTBNY { background: #ffc531; color: #161616; font-weight: 800; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_layouts__ipF4x { gap: 12px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_tiles__HGUax { gap: 12px 8px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_pic__qwqb3 { border-radius: 18px; border-width: 2.5px; padding: 0; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_on__ZTBNY .BoothSheet_pic__qwqb3 { border-color: #ffc531; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_name__dG5la { color: #d7d7dc; font-size: 13px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_on__ZTBNY .BoothSheet_name__dG5la { color: #ffc531; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_tiles__HGUax .BoothSheet_pic__qwqb3 { border-radius: 12px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_tiles__HGUax .BoothSheet_name__dG5la { font-size: 11.5px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-groups__rcfBd { gap: 16px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame-group__ToDh9 { gap: 10px; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_sub__cu8YG { font-size: 15px; font-weight: 700; color: #b9b9c0; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frames__o8DAR { padding: 8px 0; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame__FKzP4 { width: 52px; height: 52px; box-shadow: inset 0 0 0 1px #ffffff33; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_frame__FKzP4.BoothSheet_on__ZTBNY { box-shadow: 0 0 0 2.5px #101012, 0 0 0 5.5px #ffc531; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_chip__U0OgZ.BoothSheet_on__ZTBNY { background: #ffc531; border-color: #ffc531; color: #161616; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_input__0twj6:focus { border-color: #ffc531; } .Dialog_panel__YNtOY:has(#booth-title) .BoothSheet_edit__2wCH9 { background: #26262b; border-radius: 14px; } /* --- Sheet Bộ lọc / Làm đẹp / Trang điểm / Hiệu ứng (StudioPanel) --- */ #root .StudioPanel_tab__PKFbf { font-size: 14px; padding: 8px 10px; } #root .StudioPanel_tab__PKFbf.StudioPanel_on__997XP { background: #ffc531; color: #161616; } #root .StudioPanel_done__dte2p { background: #ffc531; width: 40px; height: 40px; } #root .StudioPanel_tiles__yf5Q0 { gap: 10px; } #root .StudioPanel_tile__DqenF { width: 64px; } #root .StudioPanel_tile-face__UXWd7 { width: 58px; height: 58px; } #root .StudioPanel_tile__DqenF.StudioPanel_on__997XP .StudioPanel_tile-face__UXWd7 { box-shadow: 0 0 0 2.5px #ffc531; } #root .StudioPanel_tile__DqenF.StudioPanel_on__997XP .StudioPanel_tile-name__gMPj3 { color: #ffc531; } #root .StudioPanel_tile-name__gMPj3 { font-size: 12px; } #root .StudioPanel_tile-dot__RfYi6 { background: #ffc531; } #root .StudioPanel_chip__KnuTQ.StudioPanel_on__997XP { background: #ffc531; border-color: #ffc531; color: #161616; } #root .StudioPanel_chip__KnuTQ.StudioPanel_set__WCvBE { border-color: #ffc531; } /* ===== Thông báo (toast) theo ref "Đã xoá" của sếp (2026-11-03): thanh pill tối nổi ở đáy, vòng tròn vàng + glyph, chữ trắng đậm, nút ✕ xám, không thanh tiến trình. Số đo từ ảnh ref: nền #252525, viền trắng mờ, bo 30px, cao ~57px, hai bên cách mép 30px, vòng vàng Ø~31px, glyph đen. Thanh nổi trên thanh điều hướng dưới của app (+76px). ===== */ .Toastify__toast-container--bottom-right { left: 0 !important; right: 0 !important; width: auto !important; bottom: calc(var(--safe-bottom, 0px) + 76px) !important; padding: 0 30px !important; } .Toastify__toast { background: rgba(37, 37, 39, .92) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .14); border-radius: 30px !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); min-height: 57px; padding: 11px 18px 11px 14px; margin-bottom: 10px; align-items: center; font-family: inherit; } .Toastify__toast-body { padding: 0; margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.25; color: #fff; } .Toastify__toast-icon { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; margin-inline-end: 12px; background: none; } /* Icon của toastify là hình tròn đặc có glyph cắt rỗng: tô màu cả hình, glyph sẽ hiện màu nền tối của thanh — đúng như ref (đĩa vàng, ✓ đen). */ .Toastify__toast-icon svg { width: 31px; height: 31px; } .Toastify__toast-icon svg, .Toastify__toast-icon svg * { fill: #8e8e93 !important; } .Toastify__toast--success .Toastify__toast-icon svg, .Toastify__toast--success .Toastify__toast-icon svg * { fill: #ffc531 !important; } .Toastify__toast--error .Toastify__toast-icon svg, .Toastify__toast--error .Toastify__toast-icon svg * { fill: #ff453a !important; } .Toastify__toast--warning .Toastify__toast-icon svg, .Toastify__toast--warning .Toastify__toast-icon svg * { fill: #ff9f0a !important; } .Toastify__toast--info .Toastify__toast-icon svg, .Toastify__toast--info .Toastify__toast-icon svg * { fill: #4c9aff !important; } .Toastify__toast-icon:empty { display: none; } .Toastify__spinner { border-color: rgba(255, 255, 255, .25); border-right-color: #ffc531; } .Toastify__close-button { align-self: center; color: #ababab; opacity: 1; padding: 8px 0 8px 12px; } .Toastify__close-button > svg { width: 15px; height: 15px; } .Toastify__close-button:hover { opacity: 1; color: #fff; } /* Ẩn thanh tiến trình NHƯNG vẫn để nó chạy: cơ chế tự tắt của toastify gắn onAnimationEnd vào chính thanh này (animation của nó là bộ đếm autoClose) — display:none làm animation không bao giờ chạy → toast kẹt vĩnh viễn (lỗi sếp báo 17:05). Thư viện tự ẩn bằng opacity:0, ta làm đúng như vậy. */ .Toastify__progress-bar--wrp { opacity: 0 !important; } @keyframes kiToastIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes kiToastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } } .Toastify__bounce-enter--bottom-right { animation-name: kiToastIn !important; animation-duration: .38s !important; animation-timing-function: cubic-bezier(.3, 1.08, .4, 1) !important; } .Toastify__bounce-exit--bottom-right { animation-name: kiToastOut !important; animation-duration: .3s !important; animation-timing-function: ease-in !important; } /* Đang mở cuộc trò chuyện: ẩn hẳn thanh điều hướng của app (nó đè lên ô soạn tin nhắn — photo-85). Class do watcher trong custom.js gắn khi Chat_composer đang hiện. LƯU Ý (điều tra rev88 trên máy thật): nav trên máy KHÔNG mang class LocketNav_floating — element thật chỉ có LocketNav_nav + LocketNav_with-side, nên phải nhắm cả hai. */ body.ki-chat-open .LocketNav_floating__nIveN, body.ki-chat-open .LocketNav_nav__3ojqP { display: none !important; } /* MƯỢT ANIMATION (yêu cầu sếp 17:21): cấp sẵn lớp vẽ (layer) cho các bề mặt hay chuyển động nhất — trình duyệt khỏi tạo layer giữa chừng ở khung hình đầu tiên (nguồn khựng phổ biến nhất trên iOS Safari). Các bề mặt này chỉ animate transform/opacity. TUYỆT ĐỐI không áp cho trang feed: will-change: transform tạo containing block mới cho phần tử fixed bên trong (bài học rev49 — panel từng bám nhầm đáy trang feed). */ .StudioPanel_panel__gXJQy, .CaptionPicker_panel__ZVl\+z, .MomentFeed_sheet__m4Q9v, .Dialog_panel__YNtOY, #ki-wf-sheet, .Toastify__toast { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* rev91 — Hộp thoại cài đặt chi tiết (thẻ bước + hình minh hoạ dựng bằng HTML/CSS, thay danh sách chữ của bundle). */ .ki-guide-on .InstallGuideDialog_guide-icon__cfRY2, .ki-guide-on .InstallGuideDialog_guide-title__Q1eYM, .ki-guide-on .InstallGuideDialog_guide-steps__ojCCd, .ki-guide-on .InstallGuideDialog_guide-note__oO8yw { display: none !important; } .ki-guide-on .InstallGuideDialog_guide-btn__VvLDE { border-radius: 999px; height: 52px; font-size: 16.5px; margin-top: 14px; } .ki-guide-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 2px; } .ki-guide-logo { width: 54px; height: 54px; border-radius: 14px; flex: none; } .ki-guide-title { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.15; } .ki-guide-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.55); margin-top: 3px; } .ki-card { display: flex; gap: 12px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 14px; margin-top: 12px; } .ki-badge { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ffc531; color: #1c1c1e; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .ki-card.ki-escape { border-color: rgba(255, 197, 49, 0.5); } .ki-card.ki-escape .ki-badge { background: transparent; border: 1.6px solid #ffc531; color: #ffc531; } .ki-card-main { flex: 1; min-width: 0; } .ki-card h4 { margin: 3px 0 4px; font-size: 16.5px; font-weight: 700; color: #fff; } .ki-card p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.62); } .ki-card .ki-hint { margin-top: 9px; font-size: 13.5px; } .ki-card .ki-hint b { color: #ffc531; } .ki-illus { margin-top: 11px; background: #141416; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 10px 12px; color: #fff; } .ki-illus svg { width: 19px; height: 19px; display: block; } .ki-illus .ki-hl { border: 1.6px solid #ffc531; border-radius: 10px; box-shadow: 0 0 0 3px rgba(255, 197, 49, 0.14); } .ki-bar { display: flex; align-items: center; gap: 8px; } .ki-bar-nav { display: flex; gap: 3px; background: rgba(255, 255, 255, 0.09); border-radius: 999px; padding: 6px 10px; } .ki-bar-nav i { font-style: normal; font-size: 16px; line-height: 1; color: #fff; } .ki-bar-url { flex: 1; display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.09); border-radius: 999px; padding: 5px 10px; min-width: 0; } .ki-bar-menu { display: flex; padding: 3px 5px; flex: none; } .ki-bar-menu svg { width: 17px; height: 17px; } .ki-bar-host { flex: 1; text-align: center; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ki-bar-re { display: flex; flex: none; opacity: 0.85; } .ki-bar-re svg { width: 15px; height: 15px; } .ki-bar-tabs { display: flex; background: rgba(255, 255, 255, 0.09); border-radius: 50%; padding: 6px; flex: none; } .ki-bar-tabs svg { width: 16px; height: 16px; } .ki-rows .ki-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border: 1.6px solid transparent; border-radius: 10px; font-size: 14.5px; color: #fff; } .ki-rows .ki-row + .ki-row { margin-top: 4px; } .ki-rows .ki-row.dim { color: rgba(255, 255, 255, 0.72); } .ki-rows { padding: 8px; } .ki-confirm { padding-top: 22px; } .ki-conf-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; } .ki-conf-cancel { color: #5aa2ff; font-size: 13.5px; } .ki-conf-title { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; color: #fff; } .ki-conf-add { color: #5aa2ff; font-size: 13.5px; font-weight: 600; padding: 3px 9px; display: block; } .ki-wrap { position: relative; display: inline-flex; } .ki-callout { position: absolute; bottom: calc(100% + 7px); right: -2px; background: #ffc531; color: #1c1c1e; font-size: 11px; font-weight: 800; border-radius: 7px; padding: 3px 8px; white-space: nowrap; z-index: 2; } .ki-callout::after { content: ''; position: absolute; top: 100%; right: 12px; border: 5px solid transparent; border-top-color: #ffc531; border-bottom: 0; } .ki-conf-app { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 9px 11px; } .ki-conf-app img { width: 38px; height: 38px; border-radius: 10px; flex: none; } .ki-conf-name { font-size: 14.5px; font-weight: 600; color: #fff; line-height: 1.25; } .ki-conf-name small { display: block; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.5); } .ki-conf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; font-size: 13.5px; color: #fff; } .ki-switch { width: 46px; height: 27px; border-radius: 999px; background: #34c759; position: relative; flex: none; display: block; } .ki-switch i { position: absolute; top: 2.5px; right: 2.5px; width: 22px; height: 22px; border-radius: 50%; background: #fff; } .ki-guide-cap { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); margin: 10px 0 0; } /* rev92 — Cổng cài đặt (bản web chưa cài chỉ thấy hướng dẫn cài). */ html.ki-gated, html.ki-gated body { overflow: hidden !important; } #ki-gate { position: fixed; inset: 0; z-index: 1400; background: #101012; background: var(--t-bg, #101012); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .ki-gate-inner { max-width: 480px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(30px + env(safe-area-inset-bottom, 0px)); } .ki-gate-lead { margin: 12px 0 2px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); } .ki-gate-btn { display: block; width: 100%; height: 52px; margin-top: 16px; border: none; border-radius: 999px; background: var(--accent-grad, linear-gradient(180deg, #ffd34d, #ffb800)); color: #1c1c1e; font-size: 16.5px; font-weight: 700; cursor: pointer; } .ki-gate-weblink { display: block; margin: 18px auto 0; background: none; border: none; color: rgba(255, 255, 255, 0.38); font-size: 13px; text-decoration: underline; cursor: pointer; } /* rev93 — App đã cài (standalone/fullscreen) thì ẩn hẳn nút "Cài ứng dụng vào máy" ở màn đăng nhập: đã cài rồi, nút vô nghĩa. */ @media (display-mode: standalone), (display-mode: fullscreen) { .Login_btn-install__4XJ7R { display: none !important; } } /* rev95 — Màn hình chào của cổng: logo + tên app + nút "Tải xuống"; nhấn Tải xuống mới mở phần hướng dẫn cài đặt bên dưới. */ .ki-gate-splash { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 0 4px; } .ki-gate-logo { width: 92px; height: 92px; border-radius: 24px; box-shadow: 0 10px 34px rgba(255, 197, 49, 0.28), 0 0 0 1px rgba(255, 197, 49, 0.35); transition: width 0.35s ease, height 0.35s ease, border-radius 0.35s ease; } .ki-gate-name { margin-top: 16px; font-size: 27px; font-weight: 800; color: var(--t-ink, #fff); letter-spacing: 0.2px; } .ki-gate-tag { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--t-sub, rgba(255, 255, 255, 0.62)); max-width: 300px; } .ki-gate-dl { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 230px; height: 54px; margin-top: 24px; font-size: 16.5px; } .ki-gate-dl svg { width: 21px; height: 21px; flex: 0 0 auto; } #ki-gate.ki-gate-open .ki-gate-dl { display: none; } #ki-gate.ki-gate-open .ki-gate-logo { width: 56px; height: 56px; border-radius: 15px; } #ki-gate.ki-gate-open .ki-gate-name { font-size: 21px; margin-top: 10px; } #ki-gate.ki-gate-open .ki-gate-tag { display: none; } .ki-gate-guide { margin-top: 22px; animation: kiGuideIn 0.45s cubic-bezier(0.32, 1.02, 0.4, 1) both; } @keyframes kiGuideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }