/*
File: theme.css — BẢNG MÀU "A · TÍM ĐÊM" của panel (task-47; Owner chốt 2026-10-09). Nạp ở layouts/head-style.php SAU light.css (mọi trang, kể cả đăng nhập). Chế độ sáng = KHÔNG thuộc tính (:root); chế độ tối = [data-bs-theme="dark"]
(luật dark-mode.md). Mọi màu của panel đi qua biến Bootstrap (--bs-*) + biến riêng --kp-* khai báo Ở ĐÂY — trang / CSS khác KHÔNG đặt màu cứng.

Bảng màu (Owner duyệt theo mẫu A; ô "chỉnh" = đã chỉnh nhẹ để đạt WCAG, số đo ở report-47):
  Vai trò            Sáng                       Tối
  Nền trang          #f5f6fb                    #0b0d18
  Thẻ / hộp thoại    #ffffff                    #141729
  Nền phụ            #f0f1f9                    #1a1e36
  Viền               #e2e4f0                    #272c4a (hộp thoại #3a3f6b)
  Chữ / chữ phụ      #1d2033 / #5f6380          #e8e9f6 / #9ea2c6
  Nút chính          #4f54c9 + bóng tím nhẹ     #5d62e0 + viền sáng trong + quầng tím
  Link / số liệu     #4348b8 / #4f54c9          #9599ff / #aeb1ff
  Thanh trên         #ffffff                    #0f1222
  Menu trái          #ffffff (task-48: TRẮNG)   #0f1222
  Huy hiệu trạng thái: nền nhạt + chữ đậm (sáng) / nền mờ ~15 % + chữ sáng (tối).
Nguyên tắc: huy hiệu trạng thái dùng bộ 4 màu (xanh lá / vàng / đỏ / xanh dương) ở --kp-*-bg / --kp-*-fg; nút chính = .btn-primary; số liệu nổi = .text-primary; icon nền tảng = .kp-plat (layouts/platform-lib.php).
*/

/* ================= 1. biến màu — chế độ SÁNG ================= */
:root, [data-bs-theme="light"] {
    --kp-primary: #4f54c9; --kp-primary-hover: #4348b8; --kp-primary-active: #3b3fa6; --kp-on-primary: #fff;
    --kp-link: #4348b8; --kp-link-border: #b6b9ea; --kp-accent: #4f54c9; --kp-key: #4348b8;
    --kp-sel-bg: #eeefff; --kp-sel-fg: #2f339a;
    --kp-btn-glow: 0 4px 12px -4px rgba(79, 84, 201, .55);
    --kp-card-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --kp-dlg-border: #d9dbf0; --kp-dlg-shadow: 0 12px 32px -12px rgba(16, 24, 40, .25);
    --kp-succ-bg: #dcf5e7; --kp-succ-fg: #146c43; --kp-warn-bg: #fdf0d3; --kp-warn-fg: #8a5300;
    --kp-dang-bg: #fde4e2; --kp-dang-fg: #b42318; --kp-dang-border: #f1b7b1; --kp-dang-solid: #d1362b;
    --kp-info-bg: #e3eefc; --kp-info-fg: #1d4f91; --kp-neutral-bg: #e9eaf3; --kp-neutral-fg: #4b4f6b;
    --kp-android: #2e9e5b; --kp-ios: #1d1d1f;
    --kp-brand: #4f54c9; --kp-brand-text: #1d2033;
    --kp-input-bg: #f0f1f9; --kp-input-border: #c9ccdf; --kp-check-border: #8d91b3;
    /* viền / trạng thái tương tác (task-48, Bổ sung 3): viền nút / ô gói LÚC THƯỜNG đã >= 3 : 1 so với nền xung quanh; rê chuột / đang chọn / focus = viền ĐẬM hơn + nền nhạt, không bao giờ kém lúc thường */
    --kp-ctl: #7a7fd2; --kp-ctl-hot: #4f54c9; --kp-ctl2: #7a7f9d; --kp-ctl2-hot: #4a4e69;
    --kp-ctl-dang: #d1362b; --kp-ctl-dang-hot: #a62b20; --kp-ctl-succ: #2e8f66; --kp-ctl-succ-hot: #146c43;

    --bs-body-bg: #f5f6fb; --bs-body-bg-rgb: 245, 246, 251;
    --bs-body-color: #1d2033; --bs-body-color-rgb: 29, 32, 51; --bs-emphasis-color: #1d2033; --bs-emphasis-color-rgb: 29, 32, 51;
    --bs-secondary-color: #5f6380; --bs-secondary-color-rgb: 95, 99, 128;
    --bs-secondary-bg: #ffffff; --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg: #f0f1f9; --bs-tertiary-bg-rgb: 240, 241, 249;
    --bs-border-color: #e2e4f0;
    --bs-primary: #4f54c9; --bs-primary-rgb: 79, 84, 201;
    --bs-primary-text-emphasis: #2f339a; --bs-primary-bg-subtle: #eeefff; --bs-primary-border-subtle: #c3c5ef;
    --bs-link-color: #4348b8; --bs-link-color-rgb: 67, 72, 184; --bs-link-hover-color: #353aa0; --bs-link-hover-color-rgb: 53, 58, 160;
    --bs-input-bg: #f0f1f9;
    --bs-header-bg: #ffffff; --bs-search-border-color: #e2e4f0; --bs-footer-bg: #ffffff; --bs-footer-color: #5f6380;
    /* menu trái (task-48, Owner: "sáng thì cho trắng"): chế độ SÁNG menu + ô logo NỀN TRẮNG như thẻ; chế độ tối giữ nền tối của task-47 (khối tối bên dưới) */
    --bs-sidebar-bg: #ffffff;
    --bs-sidebar-menu-item-color: #4a4e69; --bs-sidebar-menu-sub-item-color: #4a4e69; --bs-sidebar-menu-item-icon-color: #4a4e69;
    --bs-sidebar-menu-item-icon-effact-color: rgba(74, 78, 105, .15);
    --bs-sidebar-menu-item-hover-color: #4a4e69; --bs-sidebar-menu-item-hover-effact-color: rgba(74, 78, 105, .15);
    --bs-sidebar-menu-item-active-color: #4f54c9; --bs-sidebar-menu-item-active-effact-color: rgba(79, 84, 201, .2);
    --bs-sidebar-border-color: #e2e4f0; --bs-sidebar-menu-item-active-bg-color: #eeefff;
    --bs-sidebar-alert: #f0f1f9;
    --kp-side-hover: #f0f1f9; --kp-side-flyout-fg: #4f54c9;
    --kp-side-muted: #70748c;
}

/* ================= 2. biến màu — chế độ TỐI ================= */
[data-bs-theme="dark"] {
    --kp-primary: #5d62e0; --kp-primary-hover: #6f74ea; --kp-primary-active: #5358d6; --kp-on-primary: #fff;
    --kp-link: #9599ff; --kp-link-border: #4a509f; --kp-accent: #aeb1ff; --kp-key: #aeb1ff;
    --kp-sel-bg: #1f2350; --kp-sel-fg: #e3e4ff;
    --kp-btn-glow: 0 0 0 1px #7479ff inset, 0 6px 18px -6px rgba(93, 98, 224, .8);
    --kp-card-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    --kp-dlg-border: #3a3f6b; --kp-dlg-shadow: 0 16px 40px -10px rgba(0, 0, 0, .7);
    --kp-succ-bg: rgba(34, 197, 94, .15); --kp-succ-fg: #4ade80; --kp-warn-bg: rgba(245, 158, 11, .16); --kp-warn-fg: #fbbf24;
    --kp-dang-bg: rgba(248, 113, 113, .15); --kp-dang-fg: #fca5a5; --kp-dang-border: rgba(248, 113, 113, .45); --kp-dang-solid: #dc2626;
    --kp-info-bg: rgba(96, 165, 250, .15); --kp-info-fg: #93c5fd; --kp-neutral-bg: rgba(158, 162, 198, .16); --kp-neutral-fg: #c3c6e6;
    --kp-android: #4ade80; --kp-ios: #e5e7eb;
    --kp-brand: #9599ff; --kp-brand-text: #e8e9f6;
    --kp-input-bg: #1a1e36; --kp-input-border: #4a5080; --kp-check-border: #7a80b4;
    --kp-ctl: #6a70e6; --kp-ctl-hot: #8a90ff; --kp-ctl2: #7d82a8; --kp-ctl2-hot: #b9bddf;
    --kp-ctl-dang: #e5584c; --kp-ctl-dang-hot: #ff7a70; --kp-ctl-succ: #3fbf74; --kp-ctl-succ-hot: #4ade80;

    --bs-body-bg: #0b0d18; --bs-body-bg-rgb: 11, 13, 24;
    --bs-body-color: #e8e9f6; --bs-body-color-rgb: 232, 233, 246; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #9ea2c6; --bs-secondary-color-rgb: 158, 162, 198;
    --bs-secondary-bg: #141729; --bs-secondary-bg-rgb: 20, 23, 41;
    --bs-tertiary-bg: #1a1e36; --bs-tertiary-bg-rgb: 26, 30, 54;
    --bs-border-color: #272c4a;
    --bs-primary: #5d62e0; --bs-primary-rgb: 93, 98, 224;
    --bs-primary-text-emphasis: #aeb1ff; --bs-primary-bg-subtle: #1f2350; --bs-primary-border-subtle: #3a4090;
    --bs-link-color: #9599ff; --bs-link-color-rgb: 149, 153, 255; --bs-link-hover-color: #b3b6ff; --bs-link-hover-color-rgb: 179, 182, 255;
    --bs-input-bg: #1a1e36; --bs-accordion-button-active-bg: #1a1e36; --bs-boxed-body-bg: #1a1e36;
    --bs-header-bg: #0f1222; --bs-search-border-color: #272c4a; --bs-footer-bg: #0f1222; --bs-footer-color: #9ea2c6; --bs-footer-border-color: #1d2140;
    --bs-sidebar-bg: #0f1222;
    --bs-sidebar-menu-item-color: #a3a7cf; --bs-sidebar-menu-sub-item-color: #a3a7cf; --bs-sidebar-menu-item-icon-color: #a3a7cf;
    --bs-sidebar-menu-item-icon-effact-color: rgba(163, 167, 207, .2);
    --bs-sidebar-menu-item-hover-color: #ffffff; --bs-sidebar-menu-item-hover-effact-color: rgba(255, 255, 255, .2);
    --bs-sidebar-menu-item-active-color: #ffffff; --bs-sidebar-menu-item-active-effact-color: rgba(255, 255, 255, .2);
    --bs-sidebar-border-color: #1d2140; --bs-sidebar-menu-item-active-bg-color: #262b5a;
    --bs-sidebar-alert: #141729;
    --kp-side-hover: rgba(255, 255, 255, .06); --kp-side-flyout-fg: #ffffff;
    --bs-sidebar-dark-bg: #0f1222; --bs-sidebar-dark-menu-item-color: #a3a7cf; --bs-sidebar-dark-menu-sub-item-color: #a3a7cf; --bs-sidebar-dark-menu-item-icon-color: #a3a7cf;
    --bs-light: #1a1e36; --bs-light-rgb: 26, 30, 54;
    --kp-side-muted: #8387b2;
}
[data-bs-theme="dark"] .table-light { --bs-table-bg: #1a1e36; --bs-table-striped-bg: #1a1e36; --bs-table-active-bg: #1a1e36; --bs-table-hover-bg: #1a1e36; --bs-table-color: #e8e9f6; --bs-table-striped-color: #e8e9f6; --bs-table-active-color: #e8e9f6; --bs-table-hover-color: #e8e9f6; }

/* ================= 3. nền, thẻ, bảng, ô nhập ================= */
body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.card { box-shadow: var(--kp-card-shadow); border-color: var(--bs-border-color); }
.card-header { background-color: transparent; border-bottom-color: var(--bs-border-color); }
.card-header .card-title, .card-title { font-weight: 600; }
.table > :not(caption) > * > * { border-bottom-color: var(--bs-border-color); }
.table thead th, .table-light, .table-light > th, .table-light > td { background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-weight: 600; }
.form-control, .form-select, .input-group-text { background-color: var(--kp-input-bg); border-color: var(--kp-input-border); color: var(--bs-body-color); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--bs-tertiary-bg); opacity: .85; }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.form-control:focus, .form-select:focus { background-color: var(--kp-input-bg); border-color: var(--kp-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22); color: var(--bs-body-color); }
.form-check-input { background-color: var(--kp-input-bg); border-color: var(--kp-check-border); }
.form-check-input:checked { background-color: var(--kp-primary); border-color: var(--kp-primary); }
.form-check-input:focus { border-color: var(--kp-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22); }
hr { border-color: var(--bs-border-color); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--bs-border-color) !important; }
code { color: var(--kp-key); }
body:not([data-bs-theme="dark"]), [data-bs-theme="dark"] { --bs-code-color: var(--kp-key); }   /* tên key / mã: màu "link" của bảng màu (light.css đặt #c2185b — ghi đè, nạp sau) */
pre, .bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color); }
.modal-content, .dropdown-menu, .offcanvas, .popover { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
.dropdown-menu { box-shadow: var(--kp-dlg-shadow); }
.dropdown-item { color: var(--bs-body-color); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--kp-sel-bg); color: var(--kp-sel-fg); }
.dropdown-divider { border-top-color: var(--bs-border-color); }
.page-title-box h4, .page-title-box .breadcrumb-item.active { color: var(--bs-body-color); }

/* ================= 4. nút ================= */
.btn-primary { --bs-btn-color: var(--kp-on-primary); --bs-btn-bg: var(--kp-primary); --bs-btn-border-color: var(--kp-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kp-primary-hover); --bs-btn-hover-border-color: var(--kp-primary-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kp-primary-active); --bs-btn-active-border-color: var(--kp-primary-active); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--kp-primary); --bs-btn-disabled-border-color: var(--kp-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); box-shadow: var(--kp-btn-glow); }
.btn-primary:disabled, .btn-primary.disabled { box-shadow: none; }
.btn-outline-primary { --bs-btn-color: var(--kp-link); --bs-btn-border-color: var(--kp-link-border); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kp-primary); --bs-btn-hover-border-color: var(--kp-primary);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kp-primary); --bs-btn-active-border-color: var(--kp-primary); --bs-btn-disabled-color: var(--kp-link); --bs-btn-disabled-border-color: var(--kp-link-border); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
.btn-light { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--kp-sel-bg); --bs-btn-hover-border-color: var(--kp-link-border);
    --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--kp-sel-bg); --bs-btn-active-border-color: var(--kp-link-border); --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-bg: var(--bs-tertiary-bg); --bs-btn-disabled-border-color: var(--bs-border-color); }
.btn-link { --bs-btn-color: var(--kp-link); --bs-btn-hover-color: var(--bs-link-hover-color); }
.btn-outline-danger { --bs-btn-border-color: var(--kp-dang-border); }
.text-primary { --bs-primary-rgb: 79, 84, 201; }
[data-bs-theme="dark"] .text-primary { --bs-primary-rgb: 174, 177, 255; }
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--kp-primary); color: #fff; }
.page-item.active .page-link { background-color: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.page-link { color: var(--kp-link); background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
.page-link:hover { background-color: var(--kp-sel-bg); color: var(--kp-sel-fg); border-color: var(--bs-border-color); }
.bg-primary { --bs-primary-rgb: 79, 84, 201; }
.progress-bar { background-color: var(--kp-primary); }

/* ================= 5. huy hiệu trạng thái (nền nhạt + chữ đậm / nền mờ + chữ sáng) ================= */
.badge.bg-success, .badge.bg-success-subtle { background-color: var(--kp-succ-bg) !important; color: var(--kp-succ-fg) !important; --bs-badge-color: var(--kp-succ-fg); }
.badge.bg-warning, .badge.bg-warning-subtle { background-color: var(--kp-warn-bg) !important; color: var(--kp-warn-fg) !important; --bs-badge-color: var(--kp-warn-fg); }
.badge.bg-danger, .badge.bg-danger-subtle { background-color: var(--kp-dang-bg) !important; color: var(--kp-dang-fg) !important; --bs-badge-color: var(--kp-dang-fg); }
.badge.bg-info, .badge.bg-info-subtle { background-color: var(--kp-info-bg) !important; color: var(--kp-info-fg) !important; --bs-badge-color: var(--kp-info-fg); }
.badge.bg-secondary, .badge.bg-secondary-subtle, .badge.bg-light { background-color: var(--kp-neutral-bg) !important; color: var(--kp-neutral-fg) !important; --bs-badge-color: var(--kp-neutral-fg); }
.badge.bg-primary, .badge.bg-primary-subtle { background-color: var(--kp-sel-bg) !important; color: var(--kp-sel-fg) !important; --bs-badge-color: var(--kp-sel-fg); }
.badge { font-weight: 600; }
/* số trên chuông: đỏ đặc, chữ trắng */
.noti-icon .badge, .noti-icon .badge.bg-danger { background-color: var(--kp-dang-solid) !important; color: #fff !important; --bs-badge-color: #fff; }
.alert-success { --bs-alert-bg: var(--kp-succ-bg); --bs-alert-color: var(--kp-succ-fg); --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-bg: var(--kp-warn-bg); --bs-alert-color: var(--kp-warn-fg); --bs-alert-border-color: transparent; }
.alert-danger { --bs-alert-bg: var(--kp-dang-bg); --bs-alert-color: var(--kp-dang-fg); --bs-alert-border-color: var(--kp-dang-border); }
.alert-info { --bs-alert-bg: var(--kp-info-bg); --bs-alert-color: var(--kp-info-fg); --bs-alert-border-color: transparent; }
.alert-primary { --bs-alert-bg: var(--kp-sel-bg); --bs-alert-color: var(--kp-sel-fg); --bs-alert-border-color: transparent; }
.alert a:not(.btn) { color: inherit; text-decoration: underline; }
.border-success { border-color: var(--kp-succ-fg) !important; }
.card.border-success { border-color: var(--kp-succ-fg) !important; }

/* ================= 6. thanh trên + menu trái + logo TheKing ================= */
#page-topbar { background-color: var(--bs-header-bg); border-bottom: 1px solid var(--bs-border-color); box-shadow: none; }
body[data-bs-theme="dark"] #page-topbar, [data-topbar=light] #page-topbar { background-color: var(--bs-header-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
#page-topbar .header-item { color: var(--bs-body-color); }
#page-topbar .header-item:hover { color: var(--kp-link); }
#page-topbar .bg-light-subtle { background-color: var(--bs-tertiary-bg) !important; }
.vertical-menu { background: var(--bs-sidebar-bg); border-color: var(--bs-sidebar-border-color); }
#sidebar-menu .menu-title, body[data-bs-theme="dark"] .menu-title { color: var(--kp-side-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
#sidebar-menu ul li a { border-radius: 8px; margin: 1px 8px; padding-left: calc(1.5rem - 8px); padding-right: calc(1.5rem - 8px); }
#sidebar-menu ul li a:hover { background-color: var(--kp-side-hover); }
#sidebar-menu ul li.mm-active > a, #sidebar-menu ul li a.active, .mm-active > a, .mm-active .active, body[data-sidebar=dark] .mm-active > a { background-color: var(--bs-sidebar-menu-item-active-bg-color); color: var(--bs-sidebar-menu-item-active-color); }
#sidebar-menu ul li.mm-active > a i, #sidebar-menu ul li a.active i, .mm-active > a i, .mm-active .active i { color: var(--bs-sidebar-menu-item-active-color); }
#sidebar-menu ul li.mm-active > a svg, #sidebar-menu ul li a.active svg, .mm-active > a svg { color: var(--bs-sidebar-menu-item-active-color); }
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a { background-color: var(--bs-sidebar-menu-item-active-bg-color); color: var(--kp-side-flyout-fg); }
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i { color: var(--kp-side-flyout-fg); }
.navbar-brand-box { background-color: var(--bs-header-bg); border-right: 1px solid var(--bs-border-color); }
.navbar-brand-box .logo, .navbar-brand-box .logo-dark, .navbar-brand-box .logo-light { color: var(--kp-brand-text); }
@media (min-width: 992px) { .navbar-brand-box a.logo { width: fit-content; max-width: 168px; } }   /* task-77: ở chế độ tối template đặt .logo-light { display: block } nên link logo giãn hết ô 250 px và đè nút ☰ (bộ quét 1920 px báo `chong`) — co theo chữ + hình */
.auth-logo .logo-txt { color: var(--kp-brand-text); }   /* chữ TheKing ở trang đăng nhập theo chế độ sáng / tối (template: var(--bs-dark) — tối trên nền tối) */

/* chế độ tối: body có thêm data-topbar / data-sidebar = "dark" (app.js, body.php) — các khối [data-topbar=dark] / [data-sidebar=dark] của template đặt lại màu xám xanh lá; ghi đè bằng độ ưu tiên cao hơn */
body[data-bs-theme="dark"][data-topbar="dark"], body[data-bs-theme="dark"][data-sidebar="dark"], body[data-bs-theme="dark"] {
    --bs-header-bg: #0f1222; --bs-header-item-color: #e8e9f6; --bs-topbar-search-bg: #1a1e36;
    --bs-sidebar-bg: #0f1222; --bs-sidebar-dark-bg: #0f1222;
    --bs-sidebar-dark-menu-item-color: #a3a7cf; --bs-sidebar-dark-menu-sub-item-color: #a3a7cf; --bs-sidebar-dark-menu-item-icon-color: #a3a7cf;
    --bs-sidebar-dark-menu-item-hover-color: #ffffff; --bs-sidebar-dark-menu-item-active-color: #ffffff;
}
body[data-bs-theme="dark"][data-topbar="dark"] .navbar-brand-box, body[data-bs-theme="dark"][data-sidebar="dark"] .navbar-brand-box { background: var(--bs-header-bg); border-color: var(--bs-border-color); box-shadow: none; }
body[data-bs-theme="dark"][data-sidebar="dark"] .vertical-menu { background: var(--bs-sidebar-bg); }
body[data-bs-theme="dark"][data-topbar="dark"] #page-topbar { background-color: var(--bs-header-bg); border-color: var(--bs-border-color); }
body[data-topbar="dark"] .navbar-brand-box .logo, body[data-sidebar="dark"] .navbar-brand-box .logo-txt { color: var(--kp-brand-text) !important; }

/* thanh trên: tên tài khoản không bao giờ xuống dòng (điện thoại chỉ hiện ảnh đại diện, tên ở đầu menu tài khoản; máy tính tên dài thì cắt "…"). Task-60: logo + ☰ về kiểu gốc của template (mục 12). */
#page-topbar .header-user-name { display: block !important; -webkit-line-clamp: unset; line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; line-height: 1.5; } /* task-50: 1 dòng — line-height 1,15 (panel.css, cho tên xuống nhiều dòng) thấp hơn hộp chữ làm chữ lệch khỏi tâm dòng, icon mũi tên cạnh nó lệch theo */
@media (max-width: 575.98px) {
    #page-topbar .header-user-name { display: none !important; }
    #page-topbar .header-user-btn .kp-i-chevron-down { display: none !important; }
    #page-topbar .header-user-btn { padding-left: .5rem; padding-right: .5rem; }
}
.header-user-menu-name { white-space: normal; overflow-wrap: anywhere; max-width: 16rem; color: var(--bs-body-color); font-weight: 600; font-size: 14px; text-transform: none; padding: .5rem 1rem; }
@media (min-width: 576px) { .header-user-menu-name { display: none; } }
#header-user .dropdown-menu { margin-top: 0; }
/* Menu tài khoản + menu ngôn ngữ trên điện thoại (task-48, Bổ sung 5 — Owner, máy thật Samsung: menu tài khoản mở LỆCH TRÁI, bắt đầu ngay cạnh ☰, cách xa ảnh đại diện).
   Gốc: app.css của template có @media (max-width: 600px) { .navbar-header .dropdown { position: static } .navbar-header .dropdown .dropdown-menu { right: 10px !important; left: 10px !important } } —
   mọi menu xổ của thanh trên thành KHUNG DÀI CẢ MÀN HÌNH (cách mép 10 px) neo theo thanh trên, không theo nút. Bài topbar_menu của task-47 chỉ đo MÉP PHẢI của menu (ảnh đại diện sát mép phải màn hình nên
   menu dài cả màn hình vẫn "canh phải") nên đạt; máy thật thấy cả khung dài. Sửa: menu tài khoản / ngôn ngữ neo theo NÚT của nó (khung .dropdown = relative), canh mép PHẢI theo nút (right: 0; left: auto — như máy tính; transform của Popper bị animation DropDownSlide của template đè nên không dựa vào Popper;
   !important để thắng luật !important của template). Chuông thông báo giữ khung dài cả màn hình (panel.css, chủ ý). */
@media (max-width: 600px) {
    #page-topbar .navbar-header #header-user, #page-topbar .navbar-header #header-language { position: relative; }
    #header-user > .dropdown-menu, #header-language > .dropdown-menu { left: auto !important; right: 0 !important; width: max-content; min-width: 10rem; max-width: calc(100vw - 16px); }
}

/* ================= 9. Tạo key + chọn gói (task-47) ================= */
.btn-check:checked + .btn-outline-primary { background-color: var(--kp-sel-bg); color: var(--kp-sel-fg); border-color: var(--kp-ctl-hot); box-shadow: inset 0 0 0 1px var(--kp-ctl-hot); }
.btn-check:disabled + .btn-outline-primary { opacity: .6; }
.kc-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: 32rem; }
.kc-type .btn { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; font-weight: 600; white-space: normal; }
.kp-packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; max-width: 40rem; }
.kp-packs[hidden] { display: none; }   /* chưa chọn App (task-48): KHÔNG hiện 5 ô "chết" — chỉ dòng gợi ý #pack-hint */
.kp-packs .pack-option {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem; min-height: 64px; padding: .5rem .25rem; margin: 0;
    text-align: center; line-height: 1.25; white-space: normal; background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--kp-ctl);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.kp-pack-days { font-weight: 600; font-size: .9375rem; }
.kp-pack-price { font-size: .8125rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.kp-pack-price strong { font-weight: 700; color: var(--bs-body-color); }
/* rê chuột / đang chọn: rõ ràng (viền + nền nhạt của bảng màu; đang chọn thêm vòng viền trong) */
.btn-check:not(:disabled) + .pack-option:hover { background: var(--kp-sel-bg); border-color: var(--kp-ctl-hot); color: var(--kp-sel-fg); box-shadow: inset 0 0 0 1px var(--kp-ctl-hot); }
.btn-check:not(:disabled) + .pack-option:hover .kp-pack-price, .btn-check:not(:disabled) + .pack-option:hover .kp-pack-price strong { color: var(--kp-sel-fg); }
.btn-check:checked + .pack-option, .btn-check:checked + .pack-option:hover { background: var(--kp-sel-bg); border-color: var(--kp-ctl-hot); color: var(--kp-sel-fg); box-shadow: inset 0 0 0 1px var(--kp-ctl-hot); }
.btn-check:checked + .pack-option .kp-pack-price, .btn-check:checked + .pack-option .kp-pack-price strong { color: var(--kp-sel-fg); }
/* gói app chưa đặt giá: ô nét đứt, chữ rõ (không mờ như bị tắt), giá "—" */
.kp-packs .btn-check:disabled + .pack-option { opacity: 1; pointer-events: none; background: transparent; border-style: dashed; border-color: var(--bs-border-color); color: var(--bs-secondary-color); }
.kp-packs .pack-option.is-empty .kp-pack-price { font-size: 0; }
.kp-packs .pack-option.is-empty .kp-pack-price::before { content: "4"; font-size: .8125rem; }
@media (max-width: 575.98px) {
    .kp-packs { grid-template-columns: 1fr; max-width: none; }
    .kp-packs .pack-option { flex-direction: row !important; justify-content: space-between !important; min-height: 48px; padding: .25rem 1rem; }
    .kc-type { max-width: none; }
}
.kc-summary { display: flex; flex-direction: column; gap: .25rem; margin: .25rem 0 1rem; padding: .75rem 0 0; border-top: 1px dashed var(--bs-border-color); max-width: 40rem; } /* chữ chỉ đọc (cùng kiểu .topup-plan): KHÔNG nền, KHÔNG viền bo — không trông như ô nhập (Bổ sung task-47) */
.kc-summary strong { font-variant-numeric: tabular-nums; }
.kc-summary:not(:has(> :not(.d-none))) { display: none; }   /* task-48: chưa tính được (chưa chọn App / gói) → không hiện khung tóm tắt trống */
.kc-cost { color: var(--bs-secondary-color); }

/* ================= 7. icon nền tảng (layouts/platform-lib.php) ================= */
/* task-53 (Bổ sung 3): logo nền tảng — viewBox KHÍT nét vẽ (layouts/platform-lib.php), cỡ + khe tính theo em của chỗ đó rồi LÀM TRÒN về điểm ảnh nguyên (round()):
   · CỠ THỊ GIÁC √(rộng × cao) 2 logo lệch ≤ 10 %: Apple cao .84 em × rộng .7 em; Android cao .6 em × rộng 1,05 em (task-51 từng đặt "cao bằng nhau" nên Apple chỉ bằng nửa Android); cao ≤ chữ hoa × 1,3;
   · MỘT khe cố định --kp-slot = 1,2 em cho cả 2 logo (logo căn giữa khe bằng lề) + 0,5 em tới chữ → chữ sau logo KHÔNG dịch khi đổi Android ↔ iOS; mọi chỗ cùng nguồn (kp_platform_html + ô chọn dùng chung);
   · độ nâng = round((chữ hoa − cao logo) / 2): cạnh nét nằm đúng hàng điểm ảnh → tâm nét ≤ 0,5 px so tâm chữ hoa ở mọi cỡ chữ (hộp svg không còn bị Chrome làm tròn lệch ±0,5 px tuỳ vị trí dòng).
   Không flex: logo và tên là chữ nội dòng nên cùng đường chân chữ với mọi chữ khác của ô. Trình duyệt chưa có round() giữ bản em (sai số ≤ 1 px). */
.kp-plat { display: inline; white-space: nowrap; --kp-cap: .74em; --kp-slot: 1.2em; --kp-lw: 1em; --kp-lh: .7em; }
.kp-plat-android { --kp-lw: 1.05em; --kp-lh: .6em; }
.kp-plat-ios { --kp-lw: .7em; --kp-lh: .84em; }
.kp-plat svg { display: inline-block; width: var(--kp-lw); height: var(--kp-lh); flex: 0 0 auto; margin-inline: calc((var(--kp-slot) - var(--kp-lw)) / 2) calc((var(--kp-slot) - var(--kp-lw)) / 2 + .5em); vertical-align: calc((var(--kp-cap) - var(--kp-lh)) / 2) !important; }
@supports (width: round(1px, 1px)) {
    :root { --kp-px: 1px; }   /* đơn vị làm tròn = 1 điểm ảnh THIẾT BỊ: màn thường 1 px, màn ×2 (đa số điện thoại) 0,5 px, màn ×3 0,333 px — cạnh nét luôn nằm đúng hàng điểm ảnh */
    @media (min-resolution: 1.5dppx) { :root { --kp-px: .5px; } }
    @media (min-resolution: 2.5dppx) { :root { --kp-px: .33333px; } }
    .kp-plat { --kp-slot: round(1.2em, var(--kp-px)); }
    .kp-plat-android { --kp-lw: round(1.05em, var(--kp-px)); --kp-lh: round(.6em, var(--kp-px)); }
    .kp-plat-ios { --kp-lw: round(.7em, var(--kp-px)); --kp-lh: round(.84em, var(--kp-px)); }
    .kp-plat svg { vertical-align: round(calc((var(--kp-cap) - var(--kp-lh)) / 2), var(--kp-px)) !important; }
    /* task-64 mục 6 (report-63 5.1 — logo lệch 0,6 – 0,7 px ở dpr 2): màn 1,5× – 2,4× (px = 0,5) — chân logo cách đường chân chữ một số LẺ NỬA điểm ảnh thiết bị (px/2, 3px/2…), không phải số nguyên điểm ảnh.
       Lý do (đo ở bộ thử dpr 2, bảng `reports/report-64-chi-tiet/logo-dpr2.md`): đường chân chữ làm tròn theo ĐIỂM ẢNH THIẾT BỊ, còn hình SVG làm tròn theo ĐIỂM ẢNH CSS (1 px) — 2 lưới khác nhau nên khi
       khoảng cách chân logo – đường chân chữ là bội của px thì sai số làm tròn của hai bên không triệt tiêu mà CỘNG lại (độ lệch tâm tới 0,64 – 0,75 px tuỳ vị trí dòng); lệch nửa px thì chỉ còn ±0,25 px.
       Độ dời vẫn ≤ px/2 so với lý tưởng (cap − lh)/2. dpr 1 giữ như trên (cùng lưới 1 px → triệt tiêu); dpr ≥ 2,5 (px = 0,333) cũng giữ như trên — đo ở dpr 3 độ dời px/2 làm lệch 0,6 px. */
    @media (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) { .kp-plat svg { vertical-align: calc(round(calc((var(--kp-cap) - var(--kp-lh)) / 2 - var(--kp-px) / 2), var(--kp-px)) + var(--kp-px) / 2) !important; } }
}
.kp-plat-icon-only svg { margin-inline: calc((var(--kp-slot) - var(--kp-lw)) / 2); }
/* hiệu chỉnh nhỏ theo HÌNH của logo (bài ink_<n> — nét điểm ảnh): vòm Android có trọng tâm điểm ảnh hơi thấp; táo iOS có lá nhô trên nên trọng tâm cao hơn tâm hộp — nhích ≤ 0,3 px; màn ×2 trở lên lệch ngược chiều (đường chân chữ làm tròn 0,5 px) */
/* task-60: bỏ translateY của logo (chỉnh cho font cũ của task-52) — xem khối cuối file */
.kp-plat-android svg { fill: var(--kp-android); }
.kp-plat-ios svg { fill: var(--kp-ios); }
.app-select-plat { flex: 0 0 auto; margin-left: auto; }
.app-select-option .app-select-plat { margin-left: .25rem; }
.kp-plat-icon-only .kp-plat-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ================= 8. hộp thoại chung (task-45) ================= */
dialog.kp-dialog { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--kp-dlg-border); box-shadow: var(--kp-dlg-shadow); }
dialog.kp-dialog::backdrop { background: rgba(11, 13, 24, .55); }

/* ================= 10. TRẠNG THÁI TƯƠNG TÁC (task-48, Bổ sung 3 — Owner: "rê chuột vào ô gói / nút Key trả phí thì MẤT VIỀN, rất nhiều nơi y chang") =================
   Nguyên nhân: nút viền (.btn-outline-*) khi rê chuột đổ NỀN ĐẶC cùng màu với viền (chữ trắng) → viền hoà vào nền, nút như "mất viền" / đổi sang loại khác. Chuẩn mới cho MỌI phần tử bấm được có viền
   (nút viền, nút nhạt .btn-light, ô gói, nút chọn loại key, phân trang, ô chọn): 4 trạng thái đều có VIỀN rõ (>= 3 : 1 so với nền xung quanh) —
     thường   = viền --kp-ctl* (vừa đủ 3 : 1) trên nền thẻ;
     rê chuột = nền NHẠT (--kp-sel-bg / --kp-tertiary / --kp-*-bg) + viền ĐẬM hơn (--kp-ctl*-hot) dày thêm 1 px (inset) — rõ hơn lúc thường, viền khác nền;
     focus    = vòng 2 px ngoài viền (outline, --kp-ctl-hot) — hiện bằng bàn phím;
     chọn / nhấn = như rê chuột (nền nhạt + viền đậm dày); nút chính (.btn-primary) và nút đặc khác giữ nền đặc (viền = nền, có bóng).
   Bài thử: states_ui (tests\ui\states-plan.mjs) rê chuột / focus / chọn từng loại phần tử trong Chrome thật, đo viền so với nền xung quanh (>= 3 : 1) và viền so với nền của chính nó (>= 2 : 1), sáng + tối. */
.btn-outline-primary { --bs-btn-border-color: var(--kp-ctl); --bs-btn-hover-color: var(--kp-sel-fg); --bs-btn-hover-bg: var(--kp-sel-bg); --bs-btn-hover-border-color: var(--kp-ctl-hot);
    --bs-btn-active-color: var(--kp-sel-fg); --bs-btn-active-bg: var(--kp-sel-bg); --bs-btn-active-border-color: var(--kp-ctl-hot); --bs-btn-disabled-border-color: var(--kp-ctl); }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--kp-ctl2); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--kp-ctl2-hot);
    --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--bs-tertiary-bg); --bs-btn-active-border-color: var(--kp-ctl2-hot); --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-border-color: var(--kp-ctl2); }
.btn-outline-danger { --bs-btn-color: var(--kp-dang-fg); --bs-btn-border-color: var(--kp-ctl-dang); --bs-btn-hover-color: var(--kp-dang-fg); --bs-btn-hover-bg: var(--kp-dang-bg); --bs-btn-hover-border-color: var(--kp-ctl-dang-hot);
    --bs-btn-active-color: var(--kp-dang-fg); --bs-btn-active-bg: var(--kp-dang-bg); --bs-btn-active-border-color: var(--kp-ctl-dang-hot); --bs-btn-disabled-color: var(--kp-dang-fg); --bs-btn-disabled-border-color: var(--kp-ctl-dang); }
.btn-outline-success { --bs-btn-color: var(--kp-succ-fg); --bs-btn-border-color: var(--kp-ctl-succ); --bs-btn-hover-color: var(--kp-succ-fg); --bs-btn-hover-bg: var(--kp-succ-bg); --bs-btn-hover-border-color: var(--kp-ctl-succ-hot);
    --bs-btn-active-color: var(--kp-succ-fg); --bs-btn-active-bg: var(--kp-succ-bg); --bs-btn-active-border-color: var(--kp-ctl-succ-hot); --bs-btn-disabled-color: var(--kp-succ-fg); --bs-btn-disabled-border-color: var(--kp-ctl-succ); }
.btn-light { --bs-btn-border-color: var(--kp-ctl2); --bs-btn-hover-border-color: var(--kp-ctl-hot); --bs-btn-active-border-color: var(--kp-ctl-hot); --bs-btn-hover-color: var(--kp-sel-fg); --bs-btn-active-color: var(--kp-sel-fg); --bs-btn-disabled-border-color: var(--kp-ctl2); }
/* GỐC LỖI "mất viền" (Owner): app.css của template có `.btn.active, .btn.show, .btn:active, .btn:focus, .btn:hover { border-color: transparent !important }` — MỌI nút khi rê chuột / focus / nhấn / đang chọn bị
   xoá viền (nút viền .btn-outline-* đổ nền đặc cùng màu nên "viền hoà vào nền"; ô gói / nút "Key trả phí" (label.btn) mất viền khi rê chuột; nút vừa bấm còn focus thì mất viền). Ghi đè bằng !important:
   viền của trạng thái nào lấy biến viền của trạng thái đó (--bs-btn-hover-border-color / -active- / --bs-btn-border-color), đã đặt đậm hơn lúc thường ở trên. */
.btn:hover, .btn:focus-visible, .btn-check:focus-visible + .btn { border-color: var(--bs-btn-hover-border-color) !important; }
.btn:active, .btn.active, .btn.show, .btn-check:checked + .btn { border-color: var(--bs-btn-active-border-color) !important; }
.btn:focus:not(:focus-visible):not(:hover):not(:active):not(.active):not(.show) { border-color: var(--bs-btn-border-color) !important; } /* vừa bấm chuột, còn giữ focus: viền như lúc thường */
/* vòng viền trong 1 px (viền dày thêm) khi rê chuột / nhấn / đang chọn; focus bàn phím thêm vòng ngoài 2 px cách 2 px (template đặt `a, button { outline: 0 !important }` nên không dùng outline) */
/* nút nhạt ở chế độ TỐI: bootstrap.min.css có `[data-bs-theme=dark] .btn-light { viền = nền, đổ bóng }` (+ hover / focus / active cùng kiểu, focus có box-shadow !important) → nút nhạt tối KHÔNG có viền;
   trả lại biến của bảng màu (viền --kp-ctl2, rê chuột nền nhạt + viền đậm) */
[data-bs-theme="dark"] .btn-light { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); box-shadow: none; }
[data-bs-theme="dark"] .btn-light:is(:hover, :active, .active, .show), [data-bs-theme="dark"] .btn-check:checked + .btn-light, [data-bs-theme="dark"] .btn-light:focus-visible { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); }
[data-bs-theme="dark"] .btn-light:focus:not(:focus-visible) { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); box-shadow: none !important; }
.btn-outline-primary, .btn-light { --kp-ring: var(--kp-ctl-hot); }
.btn-outline-secondary { --kp-ring: var(--kp-ctl2-hot); }
.btn-outline-danger { --kp-ring: var(--kp-ctl-dang-hot); }
.btn-outline-success { --kp-ring: var(--kp-ctl-succ-hot); }
:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-light):is(:hover, :active, .active, .show),
.btn-check:checked + :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-light) { box-shadow: inset 0 0 0 1px var(--kp-ring); }
:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-light):focus-visible,
.btn-check:focus-visible + :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-light) { box-shadow: inset 0 0 0 1px var(--kp-ring), 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--kp-ring) !important; }
.btn:disabled, .btn.disabled { box-shadow: none; }
.btn-primary:focus-visible, .btn-check:focus-visible + .btn-primary { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--kp-ctl-hot); }
/* phân trang + ô chọn: viền rõ lúc thường, đậm hơn khi rê chuột / focus */
.pagination .page-link { border-color: var(--kp-ctl); }
.pagination .page-item:not(.active) .page-link:hover, .pagination .page-item:not(.active) .page-link:focus-visible { background-color: var(--kp-sel-bg); color: var(--kp-sel-fg); border-color: var(--kp-ctl-hot); box-shadow: inset 0 0 0 1px var(--kp-ctl-hot); }
.pagination .page-item:not(.active) .page-link:focus-visible { box-shadow: inset 0 0 0 1px var(--kp-ctl-hot), 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--kp-ctl-hot); }
.pagination .page-item.active .page-link { border-color: var(--kp-primary); }
.pagination .page-item.active .page-link:focus-visible { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--kp-ctl-hot); }
.form-select:hover:not(:disabled):not(:focus), .form-control:hover:not(:disabled):not(:focus):not([readonly]) { border-color: var(--kp-ctl2); }

/* ================= 11. icon Lucide trong menu trái / thanh trên (task-50) ================= */
/* Template đặt cỡ icon menu bằng font-size 1,25 rem trên thẻ <i> (font icon cũ); icon Lucide là khối 1,2 em → đặt cỡ chữ của icon = cỡ chữ mục menu, khối 1,35 em (≈ 20 px). Khoảng icon – chữ = 0,5 em như mọi nơi. */
#sidebar-menu ul li a i.kp-i { font-size: inherit; min-width: 0; padding: 0; line-height: 1; --kp-i-size: 1.4em; color: var(--bs-sidebar-menu-item-icon-color); }   /* task-51: cỡ chữ = cỡ chữ của mục (cùng tâm chữ hoa), icon 1,4 em */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li > a { text-align: center; padding-left: 0; padding-right: 0; }   /* menu thu gọn: chỉ icon, CĂN GIỮA ô (trước task-51: lệch phải 7 px — lề trái 4 px + padding) */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li > a i.kp-i { font-size: 14.4px; margin: 0; }   /* menu thu gọn: icon 20 px như trước task-51 (template đặt cỡ chữ 1,5 rem cho i → icon 32 px nếu để kế thừa) */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li > a i.kp-i { vertical-align: top !important; }   /* task-62: menu thu gọn chỉ có icon — căn theo chữ hoa (kp-icons.css) làm icon cao hơn tâm mục 0,6 px; cộng làm tròn điểm ảnh của hàng cách 52,4 px thì mục thứ 9 (Nhật ký) lệch 1,1 px > chuẩn 1 px. Icon sát đầu dòng: tâm icon = tâm mục (lệch 0,1 px) ở mọi hàng */
body[data-sidebar-size=sm] .navbar-brand-box { padding-left: 0; padding-right: 0; }   /* logo thu gọn: vương miện 26 px CĂN GIỮA ô 70 px (trước: lề 24 px → lệch phải 2 px) */
body[data-sidebar-size=sm] .navbar-brand-box .logo .logo-sm { display: block; width: 26px; margin: 0 auto; }
#page-topbar .header-item .kp-i.icon-lg { --kp-i-size: 1.5rem; font-size: 16px; }
#page-topbar #header-language .header-item > img { margin: 0 auto !important; display: block; }   /* cờ ngôn ngữ: căn GIỮA nút (trước task-51 có lề phải .5rem → lệch trái 4 px) */
#page-topbar #vertical-menu-btn .kp-i-menu { --kp-i-size: 1.375rem; font-size: 16px; }
/* nút chỉ có icon của thanh trên (☰, sáng / tối, chuông): icon căn GIỮA nút cả 2 chiều (trước: vertical-align trong dòng 24 px lệch 0,7 – 1,4 px) */
#page-topbar #vertical-menu-btn, #page-topbar #mode-setting-btn, #page-topbar #page-header-notifications-dropdown { display: inline-flex; align-items: center; justify-content: center; }

/* ================= 12. thanh trên + menu điện thoại (task-60: kiểu gốc của template, KHÔNG sửa) ================= */
/* Task-60 (Owner 18:47: "sửa quá đà, bố cục gốc đẹp sẵn rồi"): thanh trên + menu điện thoại giữ ĐÚNG kiểu gốc của template — ô logo chỉ có hình (app.min.css ẩn chữ ở <= 992 px, ẩn cả ô ở <= 380 px) + nút ☰;
   menu mở ra là ngăn kéo cao hết màn của template. Không có luật riêng ở đây (task-47 / task-50 / task-60 cũ đã bỏ). */

/* ================= 13. chuỗi key hiển thị 1 dòng, rút gọn Ở GIỮA (task-51) ================= */
/* kc_key_html(): <span class="kp-key"><span class="kp-key-h">đầu…</span><span class="kp-key-t">6 ký tự cuối</span></span>. Đủ chỗ → nguyên chuỗi; hẹp → phần đầu bị cắt "…" cuối phần đó, 6 ký tự cuối luôn thấy.
   `.is-full` (hoặc trong hàng thẻ đang mở `.is-open`): hiện ĐỦ, xuống dòng CHỈ ở dấu gạch nối (chỉ cắt giữa chữ khi 1 đoạn đơn lẻ dài hơn cả dòng). Chuỗi đủ luôn nằm trong DOM (copy, người đọc màn hình). */
/* Phần đầu + đuôi là 2 hộp inline-block (KHÔNG flex: phần tử flex thành khối nên chọn / copy chữ trên danh sách ra 2 dòng, innerText chèn xuống dòng); chữ monospace nên đuôi 6 ký tự = 6ch đúng. */
.kp-key { display: inline-block; max-width: 100%; vertical-align: bottom; white-space: nowrap; font-family: var(--bs-font-monospace); }
.kp-key-h { display: inline-block; max-width: calc(100% - 6ch); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.kp-key-s .kp-key-h { max-width: 100%; }   /* key ngắn (không đuôi riêng) */
.kp-key.is-full, .is-open .kp-key { display: inline; white-space: normal; overflow-wrap: break-word; word-break: normal; }
.kp-key.is-full .kp-key-h, .is-open .kp-key .kp-key-h { display: inline; max-width: none; overflow: visible; text-overflow: clip; }
.kp-wrap { overflow-wrap: break-word; word-break: normal; }   /* câu báo có chuỗi key: xuống dòng ở dấu gạch nối (thay .text-break: break-word + word-break ngắt BẤT KỲ chỗ nào) */
.kp-keycell { display: inline-block; max-width: 100%; }

/* ================= 14. (đã gỡ ở task-52) khung thông báo trong luồng trang .kp-notice* — thay bằng thông báo nổi kiểu Dynamic Island: ui-kit.css mục 13, assets/js/panel-island.js ================= */

/* ================= 15. gập / mở rộng <details> (task-51, Bổ sung 5) =================
   Owner: thẻ "Lịch sử thao tác" dùng dấu ▶ MẶC ĐỊNH của trình duyệt, còn Nhật ký / sổ credit / bộ lọc điện thoại dùng icon chevron của bộ Lucide. MỌI <details> của panel: bỏ dấu mặc định
   (::marker / ::-webkit-details-marker), nhãn bên trái, chevron Lucide bên phải xoay 180° khi mở (cùng cách .kp-fold-btn — mobile.css). <summary> mới: class "kp-sum" + <i class="kp-i kp-i-chevron-down kp-i-solo kp-fold-caret">. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
summary.kp-sum { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
summary.kp-sum .kp-fold-caret { flex: 0 0 auto; transition: transform var(--kp-dur) var(--kp-ease); }
details[open] > summary.kp-sum .kp-fold-caret { transform: rotate(180deg); }
/* nút CHỈ có 1 icon (mắt hiện / ẩn mật khẩu, …): icon căn giữa nút bằng khung flex — ở máy tính .btn là inline-block nên icon lệch 1 px so với tâm nút (đo nét: mắt -1,0 px) */
.btn:has(> .kp-i-solo:only-child) { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 991.98px), (pointer: coarse) {
    summary.kp-sum { min-height: 44px; }   /* vùng chạm ≥ 44 px (nhãn của thẻ card-body đã cao hơn) */
}

/* ===== task-60: căn icon theo font Be Vietnam Pro =====
Be Vietnam Pro: chữ hoa 0,74 em (font cũ 0,698), ascent 1,00 / descent 0,27. Phần bù dưới đo bằng bài ink_<n> (nét icon so tâm chữ hoa, chuẩn ≤ 1 px; logo ≤ 0,5 px) */
@media (max-width: 991.98px), (pointer: coarse) {   /* nút là inline-flex ở màn cảm ứng: icon căn giữa dòng (không theo vertical-align) — đo thấp ~1,05 px; icon SAU tên key / mã app cao ~1,0 px */
    .btn > .kp-i:not(.kp-i-solo) { position: relative; top: -1px; }
    .key-name > .kp-i-end, .app-token > .kp-i-end { position: relative; top: .5px; }
}
/* ---- task-64 mục 1: ô logo của thanh trên ĐIỆN THOẠI liền mạch với thanh trên (Owner 11/10: "logo lạc lõng, thiếu đường kẻ phía dưới như phần còn lại") ----
   Gốc: template cho .navbar-brand-box bóng 0 2px 2px cùng màu nền (nối ô logo với menu trái ở bố cục máy tính) — dưới 992 px không còn menu trái nên bóng này vẽ ĐÈ LÊN đường kẻ dưới
   (border-bottom) của #page-topbar đúng phần dưới ô logo. Bỏ bóng ở khổ điện thoại / máy tính bảng dọc; từ 992 px giữ nguyên (ô logo nối liền menu trái). */
@media (max-width: 991.98px) {
    .navbar-brand-box,
    body[data-sidebar=dark] .navbar-brand-box,
    body[data-topbar=dark] .navbar-brand-box { -webkit-box-shadow: none !important; box-shadow: none !important; }
}