/* File: panel.css — CSS dùng chung mọi trang của panel (task-22). Nạp ở layouts/head-style.php, ngay sau app.min.css của template (để thắng luật cùng độ ưu tiên của template). - Thanh trên cùng (#page-topbar, cố định) luôn nằm trên mọi phần tử của trang khi cuộn. Template đặt cho thanh z-index 1 — thấp hơn: + menu trái lúc thu gọn (body[data-sidebar-size=sm] .vertical-menu: position absolute — cuộn theo trang, z-index 5): khi cuộn, menu trượt lên che ô logo của thanh. app.js tự thu gọn menu khi mở trang ở cửa sổ rộng 1024–1366 px; độ rộng ≥ 992 px khác: sau khi bấm ☰. + ô đang focus trong .input-group của Bootstrap (z-index 5; nút trong .input-group: 2): vd. ô "Cộng thêm ngày" ở trang Sửa key đang gõ mà cuộn trang thì vẽ đè lên thanh. 1030 = mức z-index của thanh cố định trong Bootstrap (.fixed-top): trên menu thả xuống trong trang (1000), menu trái lúc mở rộng (1001 — cố định ngay dưới thanh, không chồng lên thanh), phần tử dính .sticky-top (1020); dưới hộp thoại xác nhận (nền mờ 1050, hộp 1055), thông báo (1090). Menu thả xuống của chính thanh (tài khoản…) nằm trong thanh nên cũng hiện trên mọi phần tử của trang. - Ghi chú cũ trong keys.php (task-10a, task-16) và apps.css (task-21) nói thanh "z-index 1" là mức của template trước task-22; các cách tránh đè thanh ở đó (cột dính không đặt z-index, isolation cho nhóm nút chọn mục, danh sách chọn App chỉ mở dưới thanh) vẫn giữ nguyên. */ #page-topbar { z-index: 1030; } /* Task-29 — CHUẨN HIỂN THỊ MÀN HÌNH CẢM ỨNG: điện thoại dọc 320–430 px, xoay ngang, máy tính bảng dọc — mọi khổ < 992 px (bố cục thẻ của từng trang); máy tính bảng xoay ngang / thiết bị chạm bằng ngón tay ≥ 992 px (pointer: coarse — vd. iPad ngang 1024–1366 px): bố cục máy tính của template nhưng cỡ chạm, ô nhập, chữ theo mục 2–4 (khối @media đầu tiên dưới đây). Máy tính dùng chuột (≥ 992 px, pointer: fine) giữ nguyên như template. Áp cho mọi trang của panel (file này nạp ở mọi trang, kể cả trang đăng nhập); CSS riêng của từng trang chỉ thêm phần riêng của trang đó, không đặt lại các quy tắc dưới đây. 1. Không cuộn ngang cả trang; bảng nhiều cột ở < 992 px thành thẻ "nhãn: giá trị" (CSS của từng trang), không dùng khung cuộn ngang. 2. Vùng chạm ≥ 44 × 44 px: nút, nút đóng (×), mục menu trái, mục menu xổ xuống, link đứng riêng (logo, breadcrumb, link giá trị trong dòng "nhãn: giá trị"), phân trang, ô đánh dấu / ô chọn tròn (tính cả nhãn — chạm vào chữ cũng chọn được). Link nằm trong câu chữ được nhỏ hơn. 3. Ô nhập / ô chọn: chữ 16 px (iPhone không tự phóng to trang khi chạm vào ô), cao ≥ 44 px. Ô chỉ nhập số: inputmode="numeric" (HTML). Chữ gợi ý (placeholder) của ô 1 dòng ngắn, vừa ô ở 320 px (ô 1 dòng không xuống dòng được); ví dụ / giải thích dài đặt ở dòng giải thích dưới ô (task-30). 4. Chữ nhỏ nhất 12 px (nhãn trạng thái .badge của template 10,5 px). 5. Hàng nút thao tác (.key-edit-actions / .app-edit-actions — d-flex flex-wrap gap-2): ở < 576 px mỗi nút rộng ít nhất nửa hàng, nút chữ dài tự sang hàng riêng; chữ trong nút không bị bó thành nhiều dòng hẹp. 6. Chuỗi dài (tên key, mã máy, mã app, tên app, câu báo …) và chữ trong nút xuống dòng trong khung, xem / copy được đủ (CSS từng trang: word-break / overflow-wrap; nút đứng trong cột hẹp của thẻ: white-space normal) — không cắt bằng "…" (kể cả nút của ô chọn App — apps.css), không tràn khỏi thẻ. 7. Không đặt z-index ≥ 1030 cho phần tử trong trang (thanh trên cùng 1030 — task-22); hộp thoại / thông báo (≥ 1050) mới nổi trên thanh. */ @media (max-width: 991.98px), (pointer: coarse) { /* 4. chữ */ .badge { font-size: max(.75em, 12px); white-space: normal; } /* task-41: nhãn English dài hơn ("In maintenance", "Locked …") xuống dòng trong khung thay vì thò ra khỏi thẻ (template: nowrap). KHÔNG đặt overflow-wrap: nhãn kế thừa "anywhere" của ô thẻ (ledger.css) — đặt lại làm chiều rộng nhỏ nhất của nhãn dài không còn co được */ .form-text code, .small code, small code { font-size: max(.875em, 12px); } /* 3. ô nhập / ô chọn */ .form-control, .form-select { min-height: 44px; font-size: 16px; } .input-group-text { min-height: 44px; font-size: 16px; } /* 2. nút */ .btn { min-height: 44px; } #ntf-filter-all, #ntf-filter-unread { min-width: 44px; } /* task-41: chữ English ngắn ("All") không được làm nút hẹp hơn vùng chạm 44 px (KHÔNG đặt min-width cho mọi .btn: nút trong hàng flex sẽ co dưới cỡ chữ, chữ chạm mép nút) */ .btn:not(.d-block):not(.d-none):not(.header-item) { display: inline-flex; align-items: center; justify-content: center; } .btn-close, .modal-header .btn-close { width: 1em; height: 1em; padding: calc((44px - 1em) / 2); } .input-group > .btn { min-width: 44px; } /* nút gắn vào ô nhập (con mắt ở ô mật khẩu, nút tìm) */ /* 2. ô đánh dấu / ô chọn tròn: cả hàng (ô + nhãn) cao 44 px; chạm vào nhãn cũng chọn */ .form-check { display: flex; align-items: center; min-height: 44px; padding-left: 0; margin-bottom: 0; } .form-check .form-check-input { float: none; flex: 0 0 auto; width: 1.25em; height: 1.25em; margin: 0; } .form-switch.form-check .form-check-input { width: 2.25em; } /* task-65: công tắc (Telegram báo động) giữ dạng viên thuốc — không bị ép thành vòng tròn như ô đánh dấu */ .form-check .form-check-label { flex: 1 1 auto; min-width: 0; padding: .625rem 0 .625rem .625rem; cursor: pointer; } .form-check-inline { display: inline-flex; margin-right: 1.25rem; } /* 2. thanh trên, menu xổ xuống (logo + menu trái: khối < 992 px bên dưới) */ .dropdown-menu .dropdown-item { display: flex; align-items: center; min-height: 44px; } #page-header-notifications-dropdown + .dropdown-menu .row a { display: inline-flex; align-items: center; min-height: 44px; } /* 2. tiêu đề trang: breadcrumb là link */ .page-title-box .breadcrumb { align-items: center; } .page-title-box .breadcrumb-item { display: flex; align-items: center; } /* dấu "›" (::before) giữa dòng với link cao 44 px */ .page-title-box .breadcrumb-item > a { display: inline-flex; align-items: center; min-height: 44px; } /* 2. link giá trị trong dòng "nhãn: giá trị" (thẻ thông tin) + phân trang */ .card dl dd > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } #key-history-all { display: inline-flex; align-items: center; min-height: 44px; } /* "Xem trong Nhật ký" ở trang Sửa key: link đứng riêng (task-43 bỏ câu giải thích quanh nó) */ .pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* trang đăng nhập: logo cao 44 px */ .auth-page .auth-logo { padding-top: 7px; padding-bottom: 7px; } } @media (max-width: 991.98px) { /* 2. logo + menu trái ở bố cục điện thoại / máy tính bảng dọc. Không áp cho bố cục máy tính (≥ 992 px, kể cả máy tính bảng xoay ngang): ở đó link logo là phần tử nội dòng chứa 1 khối con (logo nhỏ, display block) — thêm lề trong (kể cả kèm lề âm / nowrap) sinh thêm 2 dòng rỗng cao 69 px, ô logo cao 207 px, đẩy ☰ / ô tìm lên khỏi thanh và che mục đầu của menu trái (đã thử, task-29). Ở bố cục đó link logo giữ như template (~21 × 69 px); mục "Dashboard" của menu trái ngay dưới cùng đích, cao 52 px. */ /* logo: nới vùng chạm bằng lề trong (không đặt display — template ẩn / hiện logo sáng / tối bằng display), ô logo giữ nguyên bề ngang */ .navbar-brand-box { padding-left: calc(1.5rem - 10px); padding-right: calc(1.5rem - 10px); } .navbar-brand-box .logo { padding-left: 10px; padding-right: 10px; } #sidebar-menu ul li a { display: flex; align-items: center; min-height: 44px; } /* khung trang đăng nhập (.auth-page): form căn giữa ở mọi khổ (task-30 bỏ khối minh hoạ của template; task-49 bỏ luật cho khối .auth-bg / cột .col-md-5 / trang mẫu — không còn ở panel). < 992 px: nội dung căn giữa tối đa 440 px. */ .auth-page .auth-full-page-content > .w-100 { max-width: 440px; margin-left: auto; margin-right: auto; } } @media (max-width: 575.98px) { /* 5. hàng nút thao tác */ .key-edit-actions > .btn, .app-edit-actions > .btn { flex: 1 1 auto; min-width: calc(50% - .25rem); white-space: normal; } .key-edit-actions > .btn:not(.btn ~ .btn):not(:has(~ .btn)), .app-edit-actions > .btn:not(.btn ~ .btn):not(:has(~ .btn)) { flex-grow: 0; } /* task-78: nút DUY NHẤT của nhóm ("Đổi…", "Lưu ảnh", "Tìm" cạnh ô tìm) rộng nửa hàng, không thành thanh ngang hết màn (loại lỗi nut-rong); nhóm nhiều nút giữ giãn đều */ } /* Task-34 — thanh trên: tên hiển thị + ảnh đại diện của tài khoản đang đăng nhập (layouts/vertical-menu.php), hiện ở MỌI khổ (điện thoại cũng thấy tên). Chưa có ảnh: chữ cái đầu trong vòng tròn. Tên dài xuống dòng trong khung (không cắt "…"): chữ 12 px, dòng cao 1,15 → vừa thanh cao 70 px tới ~5 dòng; điện thoại khung tên hẹp nên tên dài thành nhiều dòng ngắn. Ô nút tài khoản co theo nội dung nhưng không đẩy các nút khác ra khỏi thanh (min-width: 0, flex co được). */ #page-topbar .header-profile-user { flex: 0 0 auto; object-fit: cover; } #page-topbar .header-profile-initial { display: inline-flex; align-items: center; justify-content: center; padding: 0; background-color: var(--bs-primary); color: #fff; font-weight: 600; font-size: 16px; line-height: 1; } #page-topbar .header-user-btn { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; text-align: left; } #page-topbar .header-user-name { min-width: 0; max-width: 12rem; font-size: 13px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Chốt chặn cho tên thật dài (50 ký tự toàn chữ rộng như "W" — không có trong dùng thật): tối đa 4 dòng (máy tính) / 5 dòng (điện thoại) trong thanh cao 70 px, quá nữa mới cắt "…" (tên đầy đủ luôn hiện ở trang Hồ sơ). Tên bình thường — kể cả 50 ký tự tiếng Việt có dấu / 50 ký tự liền không dấu cách — không bị cắt. */ #page-topbar .header-user-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } @media (max-width: 575.98px) { #page-topbar .header-user-btn { padding-left: .5rem; padding-right: .5rem; } #page-topbar .header-user-name { max-width: 6.5rem; font-size: 12px; margin-left: .375rem !important; -webkit-line-clamp: 5; line-clamp: 5; } /* task-41: cờ ngôn ngữ hiện cả trên điện thoại (trước đó ẩn dưới 576 px nên không đổi được ngôn ngữ) — nút gọn lại (cờ 24 px, 2 lề .5rem) để tên tài khoản còn chỗ */ #page-topbar #page-header-language-dropdown { padding-left: .5rem; padding-right: .5rem; min-width: 44px; } #page-topbar #page-header-language-dropdown img { margin-right: 0 !important; } } /* Task-37 — chuông thông báo (layouts/topbar-actions.php + layouts/notify-lib.php) và trang "Tất cả thông báo" (notifications.php): mỗi thông báo là 1 form POST (nút bấm cao >= 44 px; chữ >= 12 px), chưa đọc: nền nhạt + chữ đậm + chấm đỏ. Khung chuông cao tối đa 60% màn hình, cuộn trong khung; điện thoại (< 576 px) khung ghim sát mép màn hình (không tràn ngang), dưới thanh trên 70 px. Không z-index >= 1030 (khung xổ nằm trong thanh trên 1030, dùng z-index của Bootstrap). */ #header-notifications .ntf-menu { width: min(380px, calc(100vw - 16px)); max-width: calc(100vw - 16px); } #header-notifications .ntf-list { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; } .ntf-form { margin: 0; } .ntf-item { display: flex; align-items: flex-start; gap: .75rem; width: 100%; min-height: 44px; padding: .75rem 1rem; border: 0; border-top: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-body-color); text-align: left; cursor: pointer; } .ntf-form:first-child .ntf-item { border-top: 0; } .ntf-item:hover, .ntf-item:focus-visible { background-color: var(--bs-tertiary-bg); } .ntf-item.ntf-unread { background-color: rgba(var(--bs-primary-rgb, 85, 110, 230), .07); box-shadow: inset 3px 0 0 var(--bs-primary, #556ee6); } [data-bs-theme="dark"] .ntf-item.ntf-unread { background-color: rgba(var(--bs-primary-rgb, 85, 110, 230), .16); } .ntf-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; } .ntf-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; } .ntf-title { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; } .ntf-unread .ntf-title { font-weight: 700; } .ntf-text { color: var(--bs-secondary-color); font-size: 13px; overflow-wrap: anywhere; } #header-notifications .ntf-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .ntf-time { color: var(--bs-secondary-color); font-size: 12px; } .ntf-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background-color: var(--bs-danger); } #header-notifications .ntf-readall { min-height: 44px; display: inline-flex; align-items: center; } #header-notifications .ntf-head, #header-notifications .ntf-foot { padding-left: 1rem; padding-right: 1rem; } .ntf-page-list > .ntf-form { border-top: 0; } /* Dấu nhắc Bảo trì riêng ở mục menu "App của tôi" (task-37): menu thu gọn (data-sidebar-size="sm" — màn hình 1024–1366 px hoặc bấm ☰) ẩn nhãn / số nên thêm 1 chấm ở góc biểu tượng; rê chuột thì hiện nhãn + số như bình thường. */ #sidebar-menu .menu-maint-dot { display: none; } body[data-sidebar-size="sm"] #sidebar-menu .menu-maint-dot { display: block; position: absolute; top: 12px; right: 16px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--bs-warning); box-shadow: 0 0 0 2px var(--bs-body-bg); } body[data-sidebar-size="sm"] #sidebar-menu li:hover .menu-maint-dot { display: none; } .ntf-page-card .ntf-text { display: block; } @media (max-width: 575.98px) { .ntf-page-card > .card-body { padding: .75rem; } #header-notifications { position: static; } #header-notifications .ntf-menu { position: fixed !important; top: 70px !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none; margin: 0 !important; transform: none !important; } } /* Task-40 (việc nhỏ 1, report-38b 5.1) — logo và nút ☰ của thanh trên KHÔNG chồng nhau đúng 992 px. Template đổi bố cục bằng 2 mốc lệch nhau: khối @media (max-width: 992px) (đúng 992 vẫn là "điện thoại": ô logo co còn logo nhỏ — app.css) và các luật máy tính (menu trái 250 px, ☰ dời sang phải ô logo bằng lề +20 / −52 px) chỉ tắt ở (max-width: 991.98px). Ở bề ngang trong khoảng (991.98 px, 992 px] cả hai cùng có hiệu lực: ☰ bị dời mà ô logo đã co → chồng nhau 24 × 18 px (đo ở task-40: tests/suites/topbar_992.php). Ở đúng khoảng đó trả khối "điện thoại" của template về bố cục máy tính (ô logo 250 px, logo + chữ TheKing) — các luật khác của bề ngang này vốn đã là bố cục máy tính (menu trái hiện, nội dung lùi 250 px). Menu trái đã thu gọn (body[data-sidebar-size=sm]) có luật riêng độ ưu tiên cao hơn nên không bị đổi. */ @media (min-width: 991.981px) and (max-width: 992px) { .navbar-brand-box { width: 250px; } .logo span.logo-lg { display: inline; } .logo span.logo-sm { display: none; } } /* ---- task-41: English () — chữ English dài / ngắn khác tiếng Việt ở vài chỗ hẹp (đo bằng quét giao diện ui_en_*) ---- Chỉ đặt thứ khác tiếng Việt ở ĐÂY (tiếng Việt giữ nguyên từng điểm ảnh). Đừng chọn phần tử theo CHỮ hiện ra (data-label="…", title="…"): chữ đổi theo ngôn ngữ — dùng data-col / :nth-child / class. */ @media (max-width: 359.98px) { :root, html[lang="en"] { --kp-card-label: 5.5rem; } } /* task-60: 320 px — cột nhãn 7,5rem chừa cột giá trị chỉ 64 px nên giờ "2027-09-14 08:00:00" ngắt giữa số; 5,5rem chừa ~ 96 px */ html[lang="en"] { --kp-card-label: 6.25rem; } /* cột nhãn của thẻ "nhãn: giá trị" (Dashboard, lịch sử Bảo trì; tiếng Việt 7,5rem): giá trị English dài hơn ("Maintenance" 81 px) cần chỗ */ /* task-41: điện thoại (< 576 px) — nút cờ ngôn ngữ nay hiện cả ở khổ này (trước ẩn dưới 576 px) nên tên tài khoản 6 ký tự ("thedac") bị bẻ "thed / ac" (đo ở 390 px: chỉ còn ~38 px sau 4 nút 44 px + ô logo); lề phải 1,5rem của thanh trên (template) co lại .25rem → tên có ~58 px (320 px: ~53 px). Khổ ≥ 576 px giữ lề của template. */ @media (max-width: 575.98px) { #page-topbar .navbar-header { padding-right: .25rem; } } /* Task-43 — menu tài khoản (layouts/topbar-actions.php): SELLER có thêm 1 dòng số dư "Số dư: X credit · Y lượt key test" (bấm → Nạp tiền). Menu rộng đúng bằng dòng dài nhất (tối đa 24rem, không vượt màn hình); chữ xuống dòng trong khung khi hẹp (điện thoại 320 px, English dài hơn). Vùng chạm >= 44 px: quy tắc chung của .dropdown-item ở khối màn hình cảm ứng phía trên. Không màu riêng (kế thừa màu mục menu → đạt sáng / tối). */ #header-user .header-user-menu-balance { width: max-content; max-width: min(24rem, calc(100vw - 1rem)); } #header-user #header-balance { white-space: normal; overflow-wrap: anywhere; } #header-user #header-balance .kp-i { flex: 0 0 auto; } /* ==================================================================================================================== Task-45 — HỘP THOẠI DÙNG CHUNG (assets/js/panel-dialog.js, layouts/dialog-lib.php). Thay mọi trang con; luật: .claude\rules\dialog.md. Dùng + showModal(): trình duyệt vẽ hộp thoại ở TOP LAYER (trên mọi thứ, kể cả thanh trên 1030) nên KHÔNG cần z-index — đây là ngoại lệ hợp lệ của luật "không đè thanh trên" chỉ cho lớp phủ này; phần khác của trang vẫn không được z-index >= 1030. Màu theo biến Bootstrap → đạt cả sáng / tối. Chuẩn điện thoại: chạm >= 44 px, ô nhập 16 px (panel.css chung), nút xác nhận KHÔNG bị bàn phím ảo che (hàng nút dính đáy phần cuộn, chiều cao theo dvh), không cuộn ngang. ==================================================================================================================== */ html.kp-dialog-open { overflow: hidden; } dialog.kp-dialog { box-sizing: border-box; padding: 0; border: 1px solid var(--bs-border-color); border-radius: .5rem; margin: auto; width: min(540px, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); color: var(--bs-body-color); background: var(--bs-body-bg); box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .35); overflow: hidden; } dialog.kp-dialog[open] { display: flex; flex-direction: column; } dialog.kp-dialog-lg { width: min(940px, calc(100vw - 1.5rem)); } dialog.kp-dialog::backdrop { background: rgba(0, 0, 0, .55); } dialog.kp-dialog.is-busy .kp-dialog-body { cursor: progress; } .kp-dialog-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .5rem .25rem 1rem; border-bottom: 1px solid var(--bs-border-color); } .kp-dialog-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .kp-dialog-x { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--bs-body-color); font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .kp-dialog-x:hover, .kp-dialog-x:focus-visible { background: var(--bs-tertiary-bg); } .kp-dialog-body { flex: 1 1 auto; min-height: 0; padding: 1rem; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-wrap: anywhere; } .kp-dialog-body:focus { outline: 0; } .kp-dialog-loading { margin: 0; } /* Trang con khi nằm trong hộp thoại: bỏ khung thẻ lồng, cột Bootstrap theo MÀN HÌNH không còn đúng → dùng hết bề ngang hộp thoại. */ .kp-dialog-body > .row.justify-content-center > [class*="col-"], .kp-dialog-body > .row > [class*="col-xl-"], .kp-dialog-body > .row > [class*="col-lg-"] { flex: 0 0 100%; width: 100%; max-width: 100%; } .kp-dialog-body .card { margin-bottom: 1rem; } .kp-dialog-body > .row > [class*="col-"] > .card:last-child { margin-bottom: 0; } .kp-dialog-body > .row.justify-content-center > [class*="col-"] > .card { border: 0 !important; box-shadow: none; background: transparent; margin-bottom: 0; } /* !important: .border / .border-danger của Bootstrap cũng !important */ .kp-dialog-body > .row.justify-content-center > [class*="col-"] > .card > .card-body ul { margin-bottom: 1rem; } .kp-dialog-body > .row.justify-content-center > [class*="col-"] > .card > .card-body { padding: 0; } .kp-dialog-body .key-edit-actions, .kp-dialog-body .app-edit-actions { position: sticky; bottom: -1rem; z-index: 1; margin: 1rem -1rem -1rem; padding: .75rem 1rem; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); } @media (max-width: 575.98px) { dialog.kp-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); } dialog.kp-dialog-lg { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; } .kp-dialog-body { padding: .75rem; } .kp-dialog-body .key-edit-actions, .kp-dialog-body .app-edit-actions { bottom: -.75rem; margin: 1rem -.75rem -.75rem; padding: .75rem; } } /* Thông báo ngắn sau khi xong việc: task-52 chuyển sang thông báo nổi kiểu Dynamic Island dùng chung (assets/css/ui-kit.css mục 13, assets/js/panel-island.js; PanelDialog.toast gọi nó). */