/* =========================================================
   SCM SaaS Platform — SPA Layout CSS
   Phong cách: MISA AMIS App Launcher
   ========================================================= */

/* Reset hoàn toàn — ghi đè mọi theme WordPress */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* Ghi đè `100vh` bằng chiều cao THẬT đo qua JS (biến `--vh`, set trong dashboard-template.php)
       — trên mobile, `100vh`/`100svh` tính TĨNH lúc cold-load thường SAI (trình duyệt chưa "chốt"
       xong trạng thái thanh địa chỉ ẩn/hiện) và không tự tính lại, gây hiện tượng giao diện bị đẩy
       lên/cắt mất phần trên khi mới mở trình duyệt. Fallback `1vh` phòng JS chưa kịp chạy. */
    height: calc(var(--vh, 1vh) * 100) !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #1a202c;
    touch-action: manipulation !important; /* chặn pinch-zoom + double-tap zoom trên mobile */
}

/* Nhiều theme WordPress áp font riêng (thường serif) cho h1-h6 dù không gắn class nào — dù
   html/body đã reset font-family, thẻ heading thô (<h2>Danh sách doanh nghiệp</h2>, <h3>...)
   vẫn bị theme ghi đè vì selector thẻ có specificity cao hơn kế thừa từ body — ép về ĐÚNG font
   sans-serif dùng chung toàn app để tiêu đề không còn lệch font với phần còn lại.
   ⚠️ Rule chỉ theo tên thẻ (h1,h2,...) từng thử trước đó KHÔNG thắng được vì `template_redirect`
   chỉ thay BODY, `wp_head()` vẫn chạy bình thường nên CSS theme (thường có selector cụ thể hơn,
   vd `.entry-content h2`/`body.theme-x h2`, specificity cao hơn `h2` trần) vẫn thắng dù rule này
   có `!important`. Ép specificity bằng cách gắn thêm `#scm-spa-dashboard-root` (ID root bọc toàn
   bộ SPA, xem `dashboard-template.php`) — ID + thẻ luôn thắng mọi selector class+thẻ của theme. */
#scm-spa-dashboard-root h1,
#scm-spa-dashboard-root h2,
#scm-spa-dashboard-root h3,
#scm-spa-dashboard-root h4,
#scm-spa-dashboard-root h5,
#scm-spa-dashboard-root h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Xóa admin bar nếu vẫn còn render */
#wpadminbar {
    display: none !important;
}

html.wp-toolbar {
    padding-top: 0 !important;
}

/* Đè theme container phổ biến */
.site, #page, #content, .site-content, .container, .wrapper,
.entry-content, .site-inner, .content-area, #main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* =========================================================
   DASHBOARD ROOT — Full Viewport
   ========================================================= */
#scm-spa-dashboard-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100svh; /* small viewport height: cố định, không nhảy khi browser bar ẩn/hiện */
    height: calc(var(--vh, 1vh) * 100); /* ghi đè bằng chiều cao THẬT đo qua JS — xem html,body */
    position: relative;
    overflow: hidden;
}

/* Background landscape image — tương tự MISA AMIS */
#scm-spa-dashboard-root::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        var(--scm-bg-image, none),
        linear-gradient(160deg, #b8d4f0 0%, #c9dff5 25%, #dde9f7 50%, #e8c8a0 75%, #d4a574 100%);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* =========================================================
   HEADER — Thanh tiêu đề nổi trên background
   ========================================================= */
.spa-header {
    position: relative;
    z-index: 100;
    min-height: 56px;
    padding-top: env(safe-area-inset-top, 0px); /* tránh đè lên status bar trên iOS/Android */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    gap: 16px;
    flex-shrink: 0;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.spa-header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.spa-header-left img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.spa-header-center {
    flex: 1;
    max-width: 320px;
    margin: 0 auto;
}

.spa-search-bar {
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 6px 16px;
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.spa-search-bar:focus-within {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12);
}

.spa-search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #4a5568;
    width: 100%;
}

.spa-search-bar input::placeholder {
    color: #a0aec0;
}

.spa-search-icon {
    color: #a0aec0;
    font-size: 15px;
    flex-shrink: 0;
}

/* Nút icon tìm kiếm thay cho `.spa-search-bar` trên mobile — ẩn mặc định (Desktop vẫn dùng ô
   nhập rộng như cũ), chỉ hiện ở `@media(max-width:768px)` bên dưới. `!important` BẮT BUỘC vì
   `.spa-header-icon-btn` (dùng chung cho mọi icon-button header khác) có sẵn `display:flex`
   KHÔNG điều kiện, đứng SAU rule này trong file → thắng cascade (cùng specificity, rule sau
   thắng) → nút search vẫn hiện trên Desktop dù rule "ẩn" này tưởng đã áp dụng. */
.spa-mobile-search-btn { display: none !important; }

.spa-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-marketplace {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.btn-marketplace:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-marketplace svg {
    width: 16px;
    height: 16px;
}

.spa-header-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 18px;
    transition: background 0.15s;
}

.spa-header-icon-btn:hover {
    background: rgba(0,0,0,0.06);
}

.spa-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    position: relative;
}

.spa-avatar-wrapper {
    position: relative;
    cursor: pointer;
}

.spa-notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #e53e3e;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    font-weight: 700;
}

/* =========================================================
   CHUÔNG THÔNG BÁO (header)
   ========================================================= */
.scm-notif-bell {
    position: relative;
}

.scm-notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    border: 2px solid #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

#scm-notif-dropdown {
    position: fixed;
    z-index: 99999;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.scm-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.scm-notif-head-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
}
.scm-notif-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.scm-notif-markall {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.scm-notif-markall:hover { text-decoration: underline; }
.scm-notif-markall[disabled] { color: #cbd5e1; cursor: default; text-decoration: none; }
/* Nút "×" — chỉ hiện trên mobile full-màn-hình (`#scm-notif-dropdown.is-mobile-full`); dropdown
   neo nhỏ Desktop đã có sẵn "click ra ngoài để đóng", không cần thêm nút. */
.scm-notif-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef2f7;
    color: #475569;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.scm-notif-close:hover { background: #e2e8f0; }

.scm-notif-list {
    overflow-y: auto;
    flex: 1;
}

.scm-notif-item {
    display: flex;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid #f4f6f9;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.scm-notif-item:hover { background: #f8fafc; }
.scm-notif-item.is-unread { background: #eff6ff; }
.scm-notif-item.is-unread:hover { background: #e4effe; }

.scm-notif-item-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}
.scm-notif-item-body { min-width: 0; flex: 1; }
.scm-notif-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
    margin-bottom: 2px;
}
.scm-notif-item-msg {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scm-notif-item-time {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
}
.scm-notif-item.is-unread .scm-notif-item-title::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #3b82f6;
    vertical-align: middle;
}

.scm-notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}
.scm-notif-empty-icon { display: flex; justify-content: center; margin-bottom: 8px; opacity: 0.6; color: #9ca3af; }

.scm-notif-foot {
    flex-shrink: 0;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.scm-notif-viewall {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    padding: 11px 16px;
    cursor: pointer;
}
.scm-notif-viewall:hover { background: #eff6ff; }

@media (max-width: 480px) {
    #scm-notif-dropdown { width: calc(100vw - 16px); }
}

/* Mobile (≤768px) — `#scm-notif-dropdown.is-mobile-full` (class thêm bởi JS khi
   `window.innerWidth<=768`, `_toggleNotifDropdown()`) đè kích thước cố định của dropdown neo
   nhỏ Desktop (`width:360px`, `max-height:70vh`...) — `top/bottom/left/right` đã set qua inline
   style (đo header/footer thật) tự quyết định kích thước khi không còn `width`/`max-width` cố
   định chặn lại. */
@media (max-width: 768px) {
    #scm-notif-dropdown.is-mobile-full {
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    .scm-notif-close { display: flex; }
}

/* =========================================================
   CATEGORY TABS — Thanh tab danh mục
   ========================================================= */
.spa-category-nav {
    position: relative;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Chừa khoảng trống DƯỚI cho bóng đổ của tab (`box-shadow: 0 2px 8px` ở
       `.spa-cat-tab.active`, lan tới ~10px xuống dưới đáy nút).
       `overflow-x:auto` biến nav thành scroll container → theo spec trục Y còn lại tự tính
       thành `auto` chứ không còn `visible`, nên MỌI thứ tràn khỏi padding-box đều bị CẮT.
       Trước đây padding-bottom = 0 → mép dưới padding-box trùng đúng đáy nút nên bóng đổ bị
       xén phẳng (nhìn như có một vùng vô hình bao quanh các nút).
       `margin-bottom` âm bù lại đúng phần padding vừa thêm nên khoảng cách xuống lưới ứng
       dụng bên dưới KHÔNG đổi. */
    padding: 20px 20px 12px;
    margin-bottom: -12px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.spa-category-nav::-webkit-scrollbar {
    display: none;
}

.spa-cat-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    outline: none;
}

.spa-cat-tab:hover {
    background: rgba(255, 255, 255, 0.78);
}

.spa-cat-tab.active {
    background: #fff;
    color: #1a202c;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.spa-cat-tab-icon {
    font-size: 14px;
}

/* =========================================================
   BODY — Vùng chứa App Grid + nội dung SPA động
   ========================================================= */
/* =========================================================
   FILTER SIDEBAR
   ========================================================= */
#scm-filter-sidebar {
    flex-shrink: 0;
    /* Tự co dãn theo độ dài chữ dài nhất của các select (vd "Công cụ & Nền tảng phát triển") */
    width: fit-content;
    min-width: 200px;
    max-width: 340px;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 20px 0 20px 20px;
}
#scm-filter-sidebar::-webkit-scrollbar { display: none; }

.scm-filter-sidebar-inner {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    min-height: 200px;
}

.scm-filter-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.scm-filter-group {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 12px;
}
.scm-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.scm-filter-group-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.scm-filter-group-row input[type="checkbox"] {
    margin: 0;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #0073aa;
}

.scm-filter-group-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scm-filter-select-wrap {
    margin-top: 8px;
}

.scm-filter-select {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    color: #374151;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.scm-filter-select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.15);
}
/* Trong sidebar: select co theo độ dài option (không cắt chữ) → kéo sidebar rộng ra.
   Bottom sheet mobile vẫn dùng width:100% ở trên. */
#scm-filter-sidebar .scm-filter-select {
    width: max-content;
    min-width: 100%;
    max-width: 100%;
}

.spa-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 60px;
    /* Luôn CẤP PHÁT SẴN khoảng không gian cho thanh cuộn (Chrome/Edge/Firefox mới hỗ trợ
       `scrollbar-gutter`) + `scrollbar-width:thin` CỐ ĐỊNH (không đổi none↔thin theo hover
       nữa — đổi giá trị này ở Firefox cũng làm thay đổi bề rộng gutter y hệt đổi `width`
       ở WebKit) — chỉ còn CHỮ MÀU (`scrollbar-color`) đổi theo hover, không ảnh hưởng layout. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Ẩn/hiện thanh cuộn khi rê chuột vào — CHỈ đổi màu (trong suốt ↔ xám mờ) của phần TAY CẦM,
   KHÔNG BAO GIỜ đổi `width`/`scrollbar-width` (nguyên nhân layout shift/nhấp nháy đã báo lỗi,
   video loi4.wmv — trước đây width 0↔6px làm khung nội dung co giãn mỗi lần hover ra/vào).
   Cùng pattern đã áp dụng cho `.scm-co-scroll-list`/`.scm-accsett-content`. */
.spa-body:hover {
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.spa-body::-webkit-scrollbar {
    width: 6px;
}

.spa-body::-webkit-scrollbar-track {
    background: transparent;
}

.spa-body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background-color .15s ease;
}

.spa-body:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
}

/* =========================================================
   APP GRID — Lưới ứng dụng kiểu MISA AMIS
   ========================================================= */
.apps-group-container {
    margin-bottom: 36px;
}

.apps-group-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a202c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px 4px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 110px));
    gap: 16px 12px;
}

/* App Card — kiểu icon launcher như MISA AMIS */
.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px 16px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    text-align: center;
    user-select: none;
    position: relative;
}

.app-card:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.app-card:active {
    transform: translateY(-1px);
}

/* Container bọc icon + badge — positioning context, không overflow:hidden */
.app-icon-container {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

/* Icon container — màu nền tròn bo góc như MISA */
.app-icon-wrapper {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: hidden; /* Cắt ảnh theo border-radius — badge đã được chuyển ra container */
}

/* Badge trạng thái — nằm trên .app-icon-container, không bị cắt bởi overflow:hidden */
.app-icon-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: #38a169;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.app-icon-badge svg {
    width: 11px;
    height: 11px;
    fill: #fff;
}

/* Nút yêu thích — ẩn mặc định, chỉ hiện khi hover card */
.js-star-btn {
    opacity: 0;
    transition: opacity 0.15s, transform 0.12s;
}
.app-card:hover .js-star-btn {
    opacity: 1;
}
.js-star-btn:hover {
    transform: scale(1.2);
}
/* Mobile: luôn hiện để dễ tap */
@media (max-width: 768px) {
    .js-star-btn {
        opacity: 1;
    }
}

.app-card-name {
    font-size: 13px;
    font-weight: 500;
    color: #1a202c;
    line-height: 1.3;
    max-width: 100%;
    word-break: break-word;
}

/* Trạng thái chưa kích hoạt */
.app-card.inactive .app-card-name {
    color: #4a5568;
}

/* Ứng dụng đang phát triển — làm mờ icon + tên còn 50% */
.app-card.is-developing .app-icon-wrapper,
.app-card.is-developing .app-card-name {
    opacity: 0.5;
}

/* =========================================================
   TRANG MÔ TẢ CHI TIẾT APP (/app-info-[slug])
   ========================================================= */
.scm-app-info-wrap {
    padding: 20px 24px 40px;
}

/* Card chinh: Zone 1 + 2 + 3 + 4 */
.scm-app-info-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
}

/* Zone 1: Quay lai — nam trong card */
.scm-app-info-back {
    padding: 16px 24px 0;
}
.scm-app-info-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.scm-app-info-back-btn:hover { color: #374151; background: #f9fafb; }

/* Zone 2: Header */
.scm-app-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    border-bottom: 1px solid #f1f5f9;
}
.scm-app-info-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 0;
}
.scm-app-info-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    background: #f0f4ff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.scm-app-info-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.scm-app-info-icon-emoji {
    font-size: 42px;
    line-height: 1;
}
.scm-app-info-meta { min-width: 0; }
.scm-app-info-name {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px;
    line-height: 1.2;
}
.scm-app-info-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}
.scm-app-info-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    align-items: stretch;
    min-width: 150px;
}
.scm-app-info-guide-btn,
.scm-app-info-enter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}
.scm-app-info-guide-btn {
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #374151;
}
.scm-app-info-guide-btn:hover { background: #f9fafb; }
.scm-app-info-enter-btn {
    border: none;
    background: #0073aa;
    color: #fff;
}
.scm-app-info-enter-btn:hover:not(:disabled) { background: #005f8d; }

/* Zone 3: Tabs */
.scm-app-info-tabs {
    display: flex;
    border-bottom: 1.5px solid #e2e8f0;
    padding: 0 28px;
}
.scm-app-info-tab {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.scm-app-info-tab:hover { color: #0073aa; }
.scm-app-info-tab.is-active {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

/* Zone 4: Content */
.scm-app-info-panel {
    display: none;
    padding: 28px 32px;
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
    min-height: 200px;
}
.scm-app-info-panel.is-active { display: block; }
.scm-app-info-panel h2,
.scm-app-info-panel h3 { color: #1a202c; margin-top: 24px; margin-bottom: 10px; }
.scm-app-info-panel ul { padding-left: 20px; }
.scm-app-info-panel li { margin-bottom: 6px; }
.scm-app-info-empty {
    color: #94a3b8;
    font-size: 14px;
    padding: 40px 0;
    text-align: center;
    margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .scm-app-info-wrap { padding: 14px 14px 30px; }
    .scm-app-info-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }
    .scm-app-info-actions {
        flex-direction: row;
        min-width: 0;
        width: 100%;
    }
    .scm-app-info-guide-btn,
    .scm-app-info-enter-btn { flex: 1; }
    .scm-app-info-icon-wrap { width: 64px; height: 64px; }
    .scm-app-info-icon-emoji { font-size: 34px; }
    .scm-app-info-name { font-size: 20px; }
    .scm-app-info-tabs { padding: 0 14px; }
    .scm-app-info-tab { padding: 12px 12px; font-size: 13px; }
    .scm-app-info-panel { padding: 18px 16px; }
}

/* =========================================================
   TOOLTIP MÔ TẢ APP (desktop hover) + NÚT "i" (mobile)
   ========================================================= */

/* Nút "i" — ẩn trên desktop (dùng hover), chỉ hiện ở thiết bị cảm ứng */
.app-info-btn {
    display: none;
}

/* Tooltip — con của .app-card nên hover vào tooltip vẫn giữ :hover của card */
/* Tooltip NỔI: position:fixed trên <body> → render trên cùng, không bị sidebar
   (backdrop-filter) hay overflow của .spa-body che/cắt. Toạ độ do JS tính. */
.app-tooltip-float {
    position: fixed;
    width: 250px;
    max-width: 78vw;
    z-index: 100000;
    pointer-events: auto;
    animation: scmTipIn 0.15s ease-out;
}

@keyframes scmTipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-tooltip-inner {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.18);
    padding: 15px 16px 14px;
    text-align: left;
}

.app-tooltip-inner::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--scm-tip-arrow, 50%);
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
}

.app-tooltip-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.35;
    margin-bottom: 6px;
}

.app-tooltip-status {
    font-weight: 500;
    color: #2563eb;
}
.app-tooltip-float.is-inactive .app-tooltip-status {
    color: #94a3b8;
}
/* App "tool công khai" (miễn phí + bỏ tích "Đăng nhập") — nhãn "Miễn phí vĩnh viễn" màu XANH LÁ
   (yêu cầu 2026-09-18), áp cho cả tooltip desktop lẫn bottom sheet mobile. */
.app-tooltip-float.is-public-tool .app-tooltip-status,
.scm-sheet-status.is-public-tool {
    color: #16a34a;
}

.app-tooltip-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-tooltip-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 14px;
    border: 1px solid #dbe4f0;
    border-radius: 9px;
    background: #f1f6fd;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.app-tooltip-detail:hover {
    background: #e3eefc;
}
.app-tooltip-detail svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Tooltip desktop: render nổi (fixed) bằng JS khi hover — không cần rule hover ở đây. */

/* Thiết bị cảm ứng: hiện nút "i" ở góc trên-trái của icon */
@media (hover: none), (max-width: 768px) {
    .app-info-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -4px;
        left: -4px;
        width: 20px;
        height: 20px;
        padding: 0;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 50%;
        color: #2563eb;
        cursor: pointer;
        z-index: 3;
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    }
    .app-info-btn svg {
        width: 12px;
        height: 12px;
    }
}

/* =========================================================
   TOOLTIP "LỘ TRÌNH ĐIỂM DANH" — hover vào nút "Điểm danh"/"Đã điểm danh hôm nay" (header).
   Cùng kỹ thuật tooltip NỔI (position:fixed trên <body>) như `.app-tooltip-float` — render trên
   cùng, không bị header/overflow che; toạ độ do JS tính (`_bindAttendanceTooltip`).
   ========================================================= */
.att-tooltip-float {
    position: fixed;
    max-width: 92vw;
    z-index: 100000;
    pointer-events: auto;
    animation: scmTipIn 0.15s ease-out;
}

.att-tooltip-inner {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.18);
    padding: 16px 18px 14px;
    text-align: left;
}

.att-tooltip-inner::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--scm-tip-arrow, 50%);
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
}

.att-tip-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 14px;
}

/* Hàng ngang các "mốc ngày" — cuộn ngang riêng khi lộ trình dài hơn khung tooltip (vd admin
   cấu hình >7 ngày), không đẩy vỡ layout trang. */
.att-tip-track {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
}

.att-tip-node {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 0 2px;
}

.att-tip-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: #f1f5f9;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}
.att-tip-node.is-done .att-tip-circle {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.att-tip-node.is-next .att-tip-circle {
    background: #fff;
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.att-tip-node.is-today .att-tip-day {
    color: #2563eb;
    font-weight: 700;
}

.att-tip-day {
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
}

.att-tip-reward {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1a202c;
    white-space: nowrap;
}
.att-tip-node.is-upcoming .att-tip-reward {
    color: #94a3b8;
    font-weight: 600;
}

/* Đường nối giữa 2 mốc — canh ngang tâm vòng tròn (tâm = 14px, trừ margin ngang của node) */
.att-tip-connector {
    flex: 1 0 14px;
    min-width: 14px;
    height: 2px;
    background: #e2e8f0;
    margin-top: 13px;
}
.att-tip-connector.is-done {
    background: #16a34a;
}

.att-tip-hint {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    white-space: nowrap;
}

/* =========================================================
   BOTTOM SHEET THÔNG TIN APP (mobile)
   ========================================================= */
.scm-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.25s ease;
}
.scm-sheet-overlay.is-open {
    background: rgba(0,0,0,0.45);
}

.scm-sheet {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 14px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.scm-sheet-overlay.is-open .scm-sheet {
    transform: translateY(0);
}

.scm-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: #cbd5e1;
    margin: 4px auto 18px;
}
.scm-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.35;
    margin-bottom: 10px;
}
.scm-sheet-status {
    font-weight: 500;
    color: #2563eb;
    font-size: 15px;
}
.scm-sheet-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
}
.scm-sheet-detail {
    display: block;
    width: 100%;
    padding: 13px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.15s;
}
.scm-sheet-detail:hover {
    background: #1d4ed8;
}
.scm-sheet-enter {
    display: block;
    width: 100%;
    padding: 12px;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* =========================================================
   VIEWS NỘI DUNG ĐỘNG (Plans, Cart, Checkout, Workspace)
   ========================================================= */
.spa-view-fade-in {
    animation: scmFadeIn 0.25s ease-out;
}

@keyframes scmFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card nổi trên background dùng cho Plans/Cart/Checkout/Workspace */
.spa-floating-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    padding: 36px;
    max-width: 760px;
    margin: 0 auto;
}

.spa-floating-panel h2 {
    margin: 0 0 6px 0;
    font-size: 20px;
    color: #1a202c;
}

.spa-floating-panel .spa-panel-subtitle {
    color: #718096;
    font-size: 14px;
    margin: 0 0 28px 0;
}

/* Plan Cards */
.plan-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.plan-card {
    position: relative;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.plan-card:hover {
    border-color: #0073aa;
    box-shadow: 0 4px 16px rgba(0, 115, 170, 0.12);
}

/* Gói trial đã dùng — mờ đi, không cho click */
.plan-card-disabled {
    opacity: 0.6;
    cursor: default;
    background: #f9fafb;
}

.plan-card-disabled:hover {
    border-color: #e2e8f0;
    box-shadow: none;
    transform: none;
}

/* Gói "Khuyên dùng" (wp-admin > Gói cước dịch vụ) — viền/đổ bóng nổi bật + ribbon góc trên */
.plan-card-featured {
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.18);
}

.plan-card-featured:hover {
    border-color: #f59e0b;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.28);
}

.plan-card-recommended-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 4px 14px;
    border-radius: 99px;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
    white-space: nowrap;
}

.plan-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
}

.plan-card-price {
    font-size: 28px;
    font-weight: 700;
    color: #028e34;
}

.plan-card-price.free {
    color: #38a169;
}

.plan-card-desc {
    font-size: 13px;
    color: #718096;
    line-height: 1.5;
    flex: 1;
}

.plan-card-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.plan-card-badge.trial {
    background: #fef3c7;
    color: #92400e;
}

.plan-card-badge.paid {
    background: #ebf8ff;
    color: #2b6cb0;
}

.plan-card-icon {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    object-fit: contain;
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 24px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    width: 100%;
}

.btn-primary:hover:not(:disabled) {
    background: #005a87;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 24px;
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
}

.btn-secondary:hover {
    background: #edf2f7;
}

/* Form elements */
.spa-form-group {
    margin-bottom: 18px;
}

.spa-form-group label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-size: 13px;
}

.spa-form-group select,
.spa-form-group input[type="text"],
.spa-form-group input[type="number"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 14px;
    color: #1a202c;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.spa-form-group select:focus,
.spa-form-group input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12);
}

/* Info row trong checkout */
.checkout-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.checkout-info-row:last-child {
    border-bottom: none;
}

.checkout-info-label {
    color: #718096;
}

.checkout-info-value {
    font-weight: 600;
    color: #1a202c;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

/* Fix iOS Safari: input[type=date] native picker button tràn ra ngoài container */
#scm-spa-dashboard-root input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ẩn mũi tên spin mặc định của input[type=number] trong giỏ hàng */
#cart-qty-input::-webkit-outer-spin-button,
#cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Payment code highlight */
.payment-code-box {
    background: #fffbeb;
    border: 1px dashed #d97706;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 15px;
    color: #92400e;
    word-break: break-all;
}

/* Polling status */
.polling-status {
    background: #f0f4f8;
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
    color: #4a5568;
    font-weight: 500;
    margin-top: 20px;
}

/* Loading */
.spa-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: #718096;
    font-size: 15px;
}

.spa-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error box */
.spa-error-box {
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 10px;
    padding: 20px 24px;
    color: #c53030;
    text-align: center;
    margin: 20px 0;
}

/* =========================================================
   FOOTER
   ========================================================= */
.spa-footer {
    position: relative;
    z-index: 80;
    padding-top: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)); /* home indicator iOS */
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.spa-footer a {
    font-size: 13px;
    color: #4a5568;
    text-decoration: none;
    transition: color 0.15s;
}

.spa-footer a:hover {
    color: #0073aa;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .apps-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 105px));
        gap: 14px 10px;
    }

    .spa-body {
        padding: 20px 32px;
    }

    /* `.spa-body` đổi padding ở breakpoint này (20px 32px) — cập nhật lại margin âm bù trừ cho
       khớp (padding thật của `.scm-accsett-root` giữ nguyên như desktop, chỉ đổi margin). */
    .scm-accsett-root {
        margin: -20px -32px 0;
    }

    #scm-filter-sidebar {
        /* Giữ tự co dãn (width:fit-content ở base), chỉ hạ giới hạn cho màn nhỏ hơn */
        min-width: 160px;
        max-width: 280px;
    }
}

/* =========================================================
   MOBILE FILTER BOTTOM SHEET
   ========================================================= */

/* Badge số trên nút Bộ lọc */
.scm-mfb-count {
    background: #0073aa;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}

/* Trên desktop ẩn nút filter trong nav */
@media (min-width: 769px) {
    #scm-mobile-filter-btn { display: none !important; }
}

/* Overlay mờ phía sau bottom sheet */
#scm-mobile-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1800;
}

/* Bottom sheet */
#scm-mobile-filter-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1801;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: scm-sheet-up 0.25s cubic-bezier(.32,1,.58,1);
}
@keyframes scm-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.scm-mfs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f1;
    flex-shrink: 0;
}
.scm-mfs-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
}
.scm-mfs-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}
.scm-mfs-close:hover { background: #f3f4f6; }

.scm-mfs-body {
    overflow-y: auto;
    padding: 16px 20px;
    flex: 1;
}

/* Mỗi taxonomy trong bottom sheet */
.scm-mfs-group {
    margin-bottom: 20px;
}
.scm-mfs-group:last-child { margin-bottom: 0; }

.scm-mfs-group-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* Terms dạng chip ngang */
.scm-mfs-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.scm-mfs-term {
    background: #f3f4f6;
    border: 1.5px solid transparent;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.12s;
    font-weight: 500;
    white-space: nowrap;
}
.scm-mfs-term:hover {
    border-color: #0073aa;
    color: #0073aa;
}
.scm-mfs-term.active {
    background: #0073aa;
    border-color: #0073aa;
    color: #fff;
    font-weight: 600;
}
.scm-mfs-term.term-all {
    background: #e5e7eb;
    color: #6b7280;
}
.scm-mfs-term.term-all.active {
    background: #374151;
    border-color: #374151;
    color: #fff;
}

.scm-mfs-footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #f0f0f1;
    flex-shrink: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
}
.scm-mfs-btn-reset {
    flex: 1;
    padding: 11px;
    background: #f3f4f6;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.scm-mfs-btn-reset:hover { background: #e5e7eb; }
.scm-mfs-btn-apply {
    flex: 2;
    padding: 11px;
    background: #0073aa;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.scm-mfs-btn-apply:hover { background: #005f8d; }

/* Trên desktop: luôn ẩn bottom sheet mobile */
@media (min-width: 769px) {
    #scm-mobile-filter-sheet  { display: none !important; }
    #scm-mobile-filter-overlay{ display: none !important; }
}

@media (max-width: 768px) {
    .apps-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 96px)) !important;
        gap: 12px 8px;
    }

    .spa-body {
        padding: 16px;
    }

    #scm-filter-sidebar {
        display: none !important;
    }

    .spa-header-center {
        max-width: 180px;
    }

    /* Ô tìm kiếm rộng → icon gọn (xem ghi chú ở base rule `.spa-mobile-search-btn`). */
    .spa-search-bar { display: none; }
    .spa-mobile-search-btn { display: flex !important; margin: 0 auto; }

    .btn-marketplace span {
        display: none;
    }

    .app-icon-wrapper {
        width: 56px;
        height: 56px;
        font-size: 28px;
        border-radius: 14px;
    }

    .app-card {
        padding: 14px 8px 12px;
    }

    .app-card-name {
        font-size: 11px;
    }

    .spa-floating-panel {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .apps-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px 6px;
    }

    .app-icon-wrapper {
        width: 52px;
        height: 52px;
        font-size: 26px;
        border-radius: 13px;
    }

    .app-icon-container {
        width: 52px;
        height: 52px;
    }

    .app-card {
        padding: 10px 2px 8px;
    }

    .app-card-name {
        font-size: 10px;
    }

    .spa-category-nav {
        /* Xem ghi chú ở rule desktop: chừa chỗ cho bóng đổ + bù lại bằng margin âm. */
        padding: 12px 12px 10px;
        margin-bottom: -10px;
        gap: 4px;
        justify-content: flex-start;
    }

    .spa-cat-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* =========================================================
   AUTH OVERLAY — Form login/register nổi lên trong dashboard
   ========================================================= */
#scm-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Khung 2 cột (trái: thương hiệu — phải: form) */
.auth-overlay-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    display: flex;
    overflow: hidden;
    animation: scmFadeIn 0.2s ease-out;
}

.auth-overlay-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
    background: rgba(255,255,255,0.15);
    border: none;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.auth-overlay-close:hover {
    color: #0f172a;
    background: #fff;
}

/* ---------- Cột trái: thương hiệu / marketing ---------- */
.auth-overlay-left {
    flex: 0 0 40%;
    box-sizing: border-box;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    color: #e2e8f0;
    background: linear-gradient(160deg, #0f172a 0%, #0c4a6e 55%, #0073aa 100%);
    position: relative;
    overflow: hidden;
}
.auth-overlay-left::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    top: -120px;
    right: -100px;
}
.auth-overlay-brand { margin-bottom: 28px; position: relative; }
.auth-overlay-logo-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.auth-overlay-logo-chip img { display: block; height: 28px; width: auto; }
.auth-overlay-logo-chip.auth-overlay-logo-text {
    color: #0f172a;
    font-weight: 700;
    font-size: 16px;
}
.auth-overlay-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #bae6fd;
    background: rgba(255,255,255,0.12);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
    position: relative;
}
.auth-overlay-heading {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
    position: relative;
}
.auth-overlay-desc {
    margin: 0 0 auto;
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
    position: relative;
    padding-bottom: 24px;
}
.auth-overlay-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 24px;
    position: relative;
}
.auth-overlay-feature-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.auth-overlay-feature-text { display: flex; flex-direction: column; gap: 3px; }
.auth-overlay-feature-text strong { font-size: 13px; color: #fff; font-weight: 600; }
.auth-overlay-feature-text small { font-size: 12px; color: #cbd5e1; line-height: 1.4; }
.auth-overlay-copyright {
    margin-top: 24px;
    font-size: 11px;
    color: rgba(226,232,240,0.6);
    position: relative;
}

/* ---------- Cột phải: form ---------- */
.auth-overlay-right {
    flex: 1 1 60%;
    box-sizing: border-box;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
}

.auth-tabs {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 28px;
}
.auth-tab {
    flex: 1;
    border: none;
    background: none;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.auth-tab:hover { color: #0f172a; }
.auth-tab.is-active {
    background: #fff;
    color: #0073aa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

#scm-auth-overlay .auth-card-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
}

#scm-auth-overlay .auth-card h2 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    text-align: left;
}
#scm-auth-overlay .auth-subtitle {
    margin: 0 0 26px;
    color: #64748b;
    font-size: 13px;
    text-align: left;
    line-height: 1.5;
}
#scm-auth-overlay .form-group {
    margin-bottom: 18px;
    position: relative;
}
#scm-auth-overlay .form-group label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}
#scm-auth-overlay .input-icon-wrapper { position: relative; }
#scm-auth-overlay .input-icon-wrapper .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    display: flex;
    pointer-events: none;
}
#scm-auth-overlay .form-group input[type="text"],
#scm-auth-overlay .form-group input[type="email"],
#scm-auth-overlay .form-group input[type="password"] {
    width: 100%;
    padding: 11px 14px 11px 42px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    color: #0f172a;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#scm-auth-overlay .password-input-wrapper input[type="password"],
#scm-auth-overlay .password-input-wrapper input[type="text"] {
    padding-right: 42px;
}
#scm-auth-overlay .form-group input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,0.12);
}
#scm-auth-overlay .password-input-wrapper {
    position: relative;
}
#scm-auth-overlay .toggle-password-icon {
    /* Vùng bấm mở rộng qua `padding` (icon SVG chỉ 18x18 — quá nhỏ so với khuyến nghị tối thiểu
       ~40-44px cho vùng chạm trên mobile, gây "chập chờn" khi bấm trúng/trượt). `right` giảm đúng
       bằng padding để icon vẫn hiện ĐÚNG VỊ TRÍ CŨ (không bị lệch nhìn thấy), chỉ vùng chạm to hơn. */
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#scm-auth-overlay .toggle-password-icon:hover { color: #0073aa; }
#scm-auth-overlay .form-utility-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13px;
}
#scm-auth-overlay .remember-me-label {
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
#scm-auth-overlay .form-utility-row a,
#scm-auth-overlay .auth-footer-redirect a {
    color: #0073aa;
    text-decoration: none;
    font-weight: 600;
}
#scm-auth-overlay .form-utility-row a:hover,
#scm-auth-overlay .auth-footer-redirect a:hover {
    text-decoration: underline;
}
#scm-auth-overlay .btn-auth-submit {
    width: 100%;
    padding: 13px;
    background: linear-gradient(90deg, #0073aa 0%, #0369a1 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
}
#scm-auth-overlay .btn-auth-submit:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(0,115,170,0.35);
}
#scm-auth-overlay .btn-auth-submit:active:not(:disabled) { transform: translateY(1px); }
#scm-auth-overlay .btn-auth-submit:disabled { background: #94a3b8; cursor: not-allowed; }
#scm-auth-overlay .btn-auth-submit .btn-auth-arrow { transition: transform 0.15s; }
#scm-auth-overlay .btn-auth-submit:hover:not(:disabled) .btn-auth-arrow { transform: translateX(3px); }
#scm-auth-overlay .auth-footer-redirect {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}
#scm-auth-overlay .auth-oauth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0 16px;
    color: #94a3b8; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
#scm-auth-overlay .auth-oauth-divider::before,
#scm-auth-overlay .auth-oauth-divider::after {
    content: ''; flex: 1; height: 1px; background: #e2e8f0;
}
#scm-auth-overlay .auth-oauth-buttons { display: flex; gap: 12px; }
#scm-auth-overlay .auth-oauth-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
#scm-auth-overlay .auth-oauth-btn:hover {
    background: #f1f5f9; border-color: #cbd5e1; transform: translateY(-1px);
}
#scm-auth-overlay .auth-oauth-consent {
    margin: 12px 0 0; text-align: center; font-size: 11px; color: #94a3b8; line-height: 1.5;
}
#scm-auth-overlay .auth-oauth-consent strong { color: #64748b; }
.auth-alert-box {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}
.auth-alert-box.alert-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.auth-alert-box.alert-error   { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; }

/* Chỉ báo tiến trình (Quên mật khẩu → Đặt mật khẩu mới, 2 bước THẬT theo đúng luồng hiện có) */
.auth-progress-steps { margin-bottom: 20px; }
.auth-progress-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}
.auth-progress-dots { display: flex; align-items: center; gap: 6px; }
.auth-progress-dot {
    height: 6px;
    flex: 1;
    border-radius: 3px;
    background: #e2e8f0;
}
.auth-progress-dot.is-active { background: #0073aa; }
.auth-progress-dot.is-done   { background: #7dd3fc; }

/* Responsive: ẩn cột trái trên màn hình hẹp, chỉ còn form */
@media (max-width: 760px) {
    .auth-overlay-shell { flex-direction: column; max-height: calc(100vh - 24px); }
    .auth-overlay-left { display: none; }
    /* Nút "×" (`.auth-overlay-close`, `position:absolute` neo theo `.auth-overlay-shell`,
       `top:14px` cao 30px → chiếm tới y=44px) vốn thiết kế nổi trên cột trái tối màu (chỉ có ở
       Desktop) — khi ẩn cột trái, cột phải (`.auth-overlay-right`) trở thành item DUY NHẤT của
       shell nên top edge của nó trùng luôn top edge của shell. `padding-top:32px` cũ không đủ
       che hết vùng nút "×" chiếm (44px) → tab "Đăng ký" (ngay sau padding) bị đè lên ~12px.
       Tăng riêng `padding-top` lên 56px (chừa dư khoảng cách rõ ràng dưới nút) — các cạnh khác
       giữ nguyên 24px/32px như cũ. */
    .auth-overlay-right { padding: 56px 24px 32px; }
    .auth-overlay-close { color: #94a3b8; background: none; }
    .auth-overlay-close:hover { background: #f1f5f9; }
}

/* ================================================================
   ACCOUNT SETTINGS — 2-column layout (sidebar card + content)
   ================================================================ */
.scm-accsett-root {
    display: flex;
    /* `.spa-body` (khối cha bọc mọi view) đã có sẵn `padding:24px 60px` — trước đây khối này
       CỘNG THÊM `padding:20px 24px` của chính nó lên trên, ra tổng lề quá rộng (~44px trên,
       84px 2 bên). Dùng margin ÂM đúng bằng padding của `.spa-body` để triệt tiêu, rồi tự đặt
       padding THẬT của riêng khối này (28px trên — trong khoảng 24-32px yêu cầu; 32px 2 bên —
       hẹp hơn nhiều so với 84px cũ, nhường thêm chiều rộng cho nội dung). Đồng bộ với 2 media
       query bên dưới ở đúng breakpoint `.spa-body` đổi padding, tránh tràn ra ngoài khi thu nhỏ. */
    margin: -24px -60px 0;
    padding: 28px 32px 24px;
    /* `height:100%` (KHÔNG phải `min-height` — cố định ĐÚNG 1 màn hình, không giãn theo nội
       dung) — lấy theo chiều cao THẬT của `.spa-body` (đã trừ sẵn header qua flexbox `flex:1`),
       rồi TỰ TRỪ margin âm (-24px) ở trên. Cố định cứng để `.spa-body` KHÔNG BAO GIỜ cần cuộn
       cho trang này nữa — thay vào đó `.scm-accsett-content` (cột nội dung) tự cuộn RIÊNG bên
       trong đúng chiều cao này (xem `overflow-y:auto` + `height:100%` ở dưới), còn cột sidebar
       (`.scm-accsett-sidebar`, danh mục ngắn, luôn vừa màn hình) đứng yên không cuộn theo —
       tránh cuộn chuột kéo trôi mất cả sidebar lẫn nội dung cùng lúc. */
    height: 100%;
    gap: 20px;
    box-sizing: border-box;
    align-items: flex-start;
}
.scm-accsett-sidebar {
    width: 230px;
    min-width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: width 0.3s ease, min-width 0.3s ease;
}
/* Thu gọn sidebar (nút `.scm-accsett-sidebar-toggle`, cuối `.scm-accsett-nav-card`) — dùng
   chung cho CẢ "Thiết lập tài khoản" LẪN "Thiết lập hệ thống" (2 view dùng chung class này).
   Chỉ còn icon căn giữa; ẩn label + mọi nhóm con (không có icon riêng nên không có cách hiện
   hợp lý ở dạng thu gọn — bấm lại "Mở rộng" để xem tiếp). */
.scm-accsett-sidebar.is-collapsed { width: 64px; min-width: 64px; }
.scm-accsett-sidebar.is-collapsed .scm-accsett-nav-label { display: none; }
.scm-accsett-sidebar.is-collapsed .scm-accsett-nav-item { justify-content: center; padding: 10px 0; }
.scm-accsett-sidebar.is-collapsed .scm-accsett-nav-sub-group,
.scm-accsett-sidebar.is-collapsed .scm-accsett-nav-item.scm-accsett-nav-sub { display: none; }
.scm-accsett-sidebar-back { padding-bottom: 4px; }
.scm-accsett-back-btn {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    font-weight: 500;
}
.scm-accsett-back-btn:hover { color: #0073aa; }
.scm-accsett-sidebar-title { display: none; }
.scm-accsett-nav-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    padding: 8px;
}
.scm-accsett-nav { display: flex; flex-direction: column; gap: 1px; }
.scm-accsett-nav-group-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    padding: 10px 10px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.scm-accsett-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    text-align: left;
    text-decoration: none; /* dùng chung cho <a> (desktop, hỗ trợ mở tab mới) lẫn <button> cũ */
    transition: background 0.15s, color 0.15s, padding 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
}
.scm-accsett-nav-label { overflow: hidden; white-space: nowrap; }

/* Nút "Thu gọn/Mở rộng" — cuối `.scm-accsett-nav-card`, dưới danh sách mục nav. */
.scm-accsett-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    padding: 8px 0;
    border: none;
    border-top: 1px solid #f1f5f9;
    background: none;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.scm-accsett-sidebar-toggle:hover { background: #f1f5f9; color: #0073aa; }
.scm-accsett-nav-item:hover { background: #f1f5f9; }
.scm-accsett-nav-item.is-active { background: #0073aa; color: #fff; font-weight: 600; }
.scm-accsett-nav-item.is-active:hover { background: #005c8a; }
.scm-accsett-nav-sub { padding-left: 22px; font-size: 13px; }
.scm-accsett-nav-item.is-active-sub { color: #0073aa; font-weight: 600; background: #f0f7ff; }
.scm-accsett-nav-item.is-active-sub:hover { background: #e0f0fd; }
.scm-accsett-nav-sub-group { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.scm-accsett-nav-icon { font-size: 15px; flex-shrink: 0; }

.scm-accsett-content {
    flex: 1;
    min-width: 0;
    /* Cuộn RIÊNG trong phạm vi cột nội dung (khớp `height:100%` cố định của `.scm-accsett-root`
       ở trên) — cuộn chuột khi đang trỏ trong khu vực này chỉ ảnh hưởng đúng nội dung, không
       kéo trôi `.scm-accsett-sidebar` (cột danh mục) ra khỏi khung nhìn theo. */
    height: 100%;
    overflow-y: auto;
    /* CẤP PHÁT SẴN khoảng cho thanh cuộn + `scrollbar-width:thin` CỐ ĐỊNH (không đổi
       none↔thin theo hover — tránh layout shift, xem ghi chú đầy đủ ở `.spa-body`). */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
/* Ẩn/hiện khi rê chuột vào — CHỈ đổi màu tay cầm, KHÔNG đổi width (cùng pattern `.spa-body`/
   `.scm-co-scroll-list`, fix layout shift video loi4.wmv). */
.scm-accsett-content:hover {
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.scm-accsett-content::-webkit-scrollbar { width: 6px; }
.scm-accsett-content::-webkit-scrollbar-track { background: transparent; }
.scm-accsett-content::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background-color .15s ease; }
.scm-accsett-content:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
.scm-accsett-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 16px;
}
.scm-accsett-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
    color: #6b7280;
    font-size: 14px;
}
.scm-accsett-err { color: #dc2626; padding: 24px; text-align: center; }

/* "Thông tin cá nhân" — 2 card "Thông tin cơ bản"/"Thông tin liên lạc" xếp 2 cột song song
   trên Desktop (trước đó xếp chồng dọc bằng margin-top), tự xuống 1 cột trên tablet/mobile. */
.scm-accsett-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .scm-accsett-profile-grid { grid-template-columns: 1fr; }
}

/* Cards */
.scm-accsett-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.scm-accsett-card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}
.scm-accsett-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}
.scm-accsett-card-body { padding: 20px; }
.scm-accsett-change-link {
    font-size: 13px;
    font-weight: 600;
    color: #0073aa;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}
.scm-accsett-change-link:hover { text-decoration: underline; }

/* Nút "Thay đổi"/"Thiết lập" dạng icon outline (cây viết) — thay cho text link, dùng ở
   "Thông tin cá nhân" (Thông tin cơ bản/Thông tin liên lạc) và "Bảo mật" > "Thông tin đăng nhập"
   (Số điện thoại/Email/Mật khẩu/Xác thực 2 yếu tố). */
.scm-accsett-icon-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.scm-accsett-icon-btn:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0073aa; }
.scm-accsett-edit-btn {
    font-size: 13px;
    font-weight: 600;
    color: #0073aa;
    background: none;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.scm-accsett-edit-btn:hover { background: #e0f2fe; }

/* Info rows (read-only display) */
.scm-accsett-info-list { display: flex; flex-direction: column; }
.scm-accsett-info-row {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
    min-height: 48px;
}
.scm-accsett-info-row:last-child { border-bottom: none; }
.scm-accsett-info-label {
    width: 160px;
    flex-shrink: 0;
    font-size: 13px;
    color: #6b7280;
}
.scm-accsett-info-value {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1a202c;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.scm-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #16a34a;
    font-size: 12px;
    font-weight: 600;
}

/* Form elements */
.scm-accsett-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.scm-accsett-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    background: #fff;
    color: #1a202c;
    transition: border-color 0.15s;
    font-family: inherit;
}
.scm-accsett-input:focus { border-color: #0073aa; box-shadow: 0 0 0 2px rgba(0,115,170,0.1); }
select.scm-accsett-input { appearance: auto; }
.scm-accsett-btn-primary {
    display: inline-block;
    padding: 9px 20px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.scm-accsett-btn-primary:hover { background: #005c8a; }
.scm-accsett-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.scm-accsett-btn-secondary {
    display: inline-block;
    padding: 9px 16px;
    background: #f1f5f9;
    color: #374151;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.scm-accsett-btn-secondary:hover { background: #e2e8f0; }

/* 2FA method cards */
.scm-2fa-method-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.scm-2fa-method-icon { color: #64748b; flex-shrink: 0; width: 38px; display: flex; align-items: center; justify-content: center; }
.scm-2fa-method-body { flex: 1; min-width: 0; }
.scm-2fa-method-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.scm-2fa-method-desc { font-size: 12px; color: #6b7280; margin-top: 3px; line-height: 1.5; }
.scm-2fa-badge-default {
    font-size: 11px;
    font-weight: 600;
    color: #0073aa;
    background: #f0f7ff;
    padding: 2px 7px;
    border-radius: 4px;
}
.scm-2fa-method-action { flex-shrink: 0; }

/* Mobile */
@media (max-width: 768px) {
    /* `.spa-body` ở breakpoint này đổi padding thành 16px đều 4 cạnh — margin âm phải khớp
       lại (không còn -20px/-32px của breakpoint 1024px) để không tràn ra ngoài `.spa-body`. */
    /* ⚠️ Fix mất nội dung bên phải (vd "Bảo mật" > bảng "Nhật ký hoạt động"): base rule
       `.scm-accsett-root { align-items: flex-start; }` (dành cho layout 2 cột Desktop, sidebar
       KHÔNG kéo giãn theo chiều cao content) vô tình áp dụng luôn ở mobile — trong
       `flex-direction:column`, `align-items` điều khiển trục NGANG (bề rộng), nên `flex-start`
       khiến `.scm-accsett-content` co về đúng bề rộng NỘI DUNG THẬT (fit-content) thay vì lấp
       đầy màn hình, dễ vượt viewport nếu có bảng rộng bên trong (kể cả bảng đã có
       `overflow-x:auto` riêng — item cha vẫn tự nới theo nội dung con nếu không ép `stretch`).
       `.spa-body` (khối cha ngoài cùng) có `overflow-x:hidden` → phần vượt ra bị CẮT MẤT hẳn
       (không cuộn được), đúng khớp báo cáo "mất nội dung bên phải". Đè lại `stretch` (mặc định
       flexbox, ép mọi item con lấp đầy đúng bề rộng `.scm-accsett-root`) để content KHÔNG BAO
       GIỜ tự vượt viewport — bảng rộng bên trong vẫn tự cuộn ngang ĐÚNG PHẠM VI của chính nó
       qua `overflow-x:auto` sẵn có (`#activity-table-wrap`...), không còn tràn lên cấp cha. */
    /* `height: auto` — hủy cố định "đúng 1 màn hình" của bản Desktop (không còn `.scm-accsett-
       sidebar` để cần tách cuộn riêng, sidebar đã ẩn hẳn ở mobile ngay dưới) — quay lại cuộn
       theo TOÀN TRANG như thiết kế mobile gốc, tránh cuộn lồng nhau khó dùng trên màn hình nhỏ. */
    .scm-accsett-root { flex-direction: column; align-items: stretch; height: auto; margin: -16px -16px 0; padding: 12px; gap: 12px; }
    .scm-accsett-content { height: auto; overflow-y: visible; }

    /* Ẩn hẳn sidebar nav (`.scm-accsett-sidebar`, hàng ngang cuộn được — từng sửa lỗi width ở
       entry (z) ngay trên) trên mobile — dư thừa từ khi có popup FULL MÀN HÌNH mở qua avatar
       (`_showMobileSettingsMenu`, entry (x)) đã đủ điều hướng "Thiết lập tài khoản"/"Thiết lập
       hệ thống" + mọi mục con. Các rule `.scm-accsett-nav-*`/`.scm-accsett-sidebar-toggle` bên
       dưới GIỮ NGUYÊN (không xóa) — trở thành dead code vô hại bên trong parent đã ẩn, phòng
       cần khôi phục lại sau này không phải viết lại từ đầu.
       ⚠️ Nội dung (`.scm-accsett-content`) giờ chiếm trọn hàng — không cần chỉnh `flex`/`gap`
       gì thêm, `gap:12px` của `.scm-accsett-root` tự bỏ qua vì chỉ còn 1 flex item hiển thị. */
    .scm-accsett-sidebar { display: none; }

    .scm-accsett-nav-card { padding: 6px; }

    /* Mobile dùng layout hàng ngang cuộn được (xem `.scm-accsett-nav` bên dưới) — không áp
       dụng thu gọn icon-only (không hợp lý với layout này) — ẩn nút toggle + đảm bảo LUÔN
       hiện đủ label dù trước đó đã lỡ bật "Thu gọn" khi xem trên desktop (trạng thái lưu
       `localStorage`, có thể còn sót khi đổi kích thước cửa sổ/thiết bị). */
    .scm-accsett-sidebar-toggle { display: none; }
    .scm-accsett-sidebar.is-collapsed { width: 100%; min-width: 100%; }
    .scm-accsett-sidebar.is-collapsed .scm-accsett-nav-label { display: inline; }
    .scm-accsett-sidebar.is-collapsed .scm-accsett-nav-item { justify-content: flex-start; padding: 8px 12px; }
    .scm-accsett-sidebar.is-collapsed .scm-accsett-nav-sub-group { display: block; }
    .scm-accsett-sidebar.is-collapsed .scm-accsett-nav-item.scm-accsett-nav-sub { display: flex; }
    .scm-accsett-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .scm-accsett-nav-group-label { display: none; }
    /* ⚠️ Fix: base rule `.scm-accsett-nav-item{width:100%}` (dành cho layout dọc Desktop) KHÔNG
       được override ở đây trước đây — trên hàng ngang cuộn được, `width:100%` khiến MỖI mục
       chiếm trọn bề rộng cả hàng (chỉ thấy đúng 1 mục full-width tại 1 thời điểm, phải cuộn xa
       mới thấy mục đang chọn) thay vì gọn theo đúng độ dài label như 1 "pill" nhỏ. */
    .scm-accsett-nav-item { width: auto; white-space: nowrap; flex-shrink: 0; padding: 8px 12px; }
    .scm-accsett-nav-item.is-active { border-radius: 6px; }
    .scm-accsett-nav-sub { padding-left: 12px; }
    .scm-accsett-info-label { width: 110px; font-size: 12px; }
    .scm-accsett-card-hd { flex-wrap: wrap; gap: 8px; }
    .scm-2fa-method-card { flex-wrap: wrap; }
    .scm-2fa-method-action { width: 100%; padding-left: 52px; }
}

/* ============================================================
   PHÂN TRANG (dùng chung toàn hệ thống — "_buildPaginationBar"
   client-side lẫn các bảng phân trang server-side "sysset/...")
   Thiết kế hiện đại: bo góc, đổ bóng nhẹ, hover/active mượt,
   trang hiện tại nổi bật, disabled mờ đi. Chỉ đổi UI/UX —
   không đụng logic phân trang (event/data-attribute giữ nguyên).
   ============================================================ */
.scm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0;
    padding: 10px 2px 2px;
}
.scm-pagination-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
}
.scm-pagination-info strong { color: #111827; font-weight: 700; }

.scm-pagination-select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.scm-pagination-select:hover { border-color: #94a3b8; background: #f8fafc; }
.scm-pagination-select:focus { outline: none; border-color: #0073aa; box-shadow: 0 0 0 3px rgba(0,115,170,.15); }

.scm-pagination-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.scm-pg-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
                transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.scm-pg-btn:hover:not(:disabled):not(.is-active) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 23, 42, .10);
}
.scm-pg-btn:active:not(:disabled) {
    transform: translateY(0) scale(.95);
    box-shadow: none;
}
.scm-pg-btn.is-active {
    background: #0073aa;
    border-color: #0073aa;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 115, 170, .30);
    cursor: default;
}
.scm-pg-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Responsive: thu gọn trên mobile — chỉ còn ‹ Trước / Tiếp › + trang hiện tại,
   ẩn bớt số trang lân cận và nút |◄ ►| (nhảy đầu/cuối) để tránh bấm nhầm.
   Ẩn HẲN dòng "Hiển thị x–y / z dòng" + dropdown "N dòng/trang" (`.scm-pagination-info`
   gộp chung cả 2, xem `_buildPaginationBar` — spa-app.js) trên mọi bảng dùng chung
   component phân trang này, không riêng bảng nào. */
@media (max-width: 640px) {
    .scm-pagination { justify-content: center; }
    .scm-pagination-info { display: none; }
    .scm-pg-btn.is-pagenum:not(.is-active) { display: none; }
    .scm-pg-btn.is-firstlast { display: none; }
}

/* ============================================================
   Popup "Xóa tài khoản" — thiết kế lại premium/modern/safe UX
   (spa-app.js `_showDeleteAccountModal`)
   ============================================================ */
@keyframes scmDelFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scmDelPopIn {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);  }
}
@keyframes scmDelShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.scm-del-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 23, 42, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: scmDelFadeIn .18s ease-out;
}

.scm-del-modal {
    width: 100%; max-width: 500px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 24px;
    padding: 28px 30px;
    box-shadow: 0 25px 70px -12px rgba(15, 23, 42, .35), 0 8px 24px -8px rgba(220, 38, 38, .1);
    animation: scmDelPopIn .22s cubic-bezier(.16, 1, .3, 1);
}

.scm-del-modal.is-shaking { animation: scmDelPopIn .22s cubic-bezier(.16, 1, .3, 1), scmDelShake .4s ease-in-out; }

.scm-del-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.scm-del-head-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #fef2f2, #ffe4e6);
    display: flex; align-items: center; justify-content: center; color: #e11d48;
}
.scm-del-title { margin: 0 0 3px; font-size: 17px; font-weight: 700; color: #dc2626; letter-spacing: -.01em; }
.scm-del-subtext { margin: 0; font-size: 13px; line-height: 1.6; color: #94a3b8; }

.scm-del-step-label { font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.scm-del-step-label .scm-del-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: #f1f5f9; color: #64748b;
    font-size: 10.5px; font-weight: 700;
}

.scm-del-phrase-box {
    background: #f8fafc; border: 1.5px dashed #e2e8f0; border-radius: 10px;
    padding: 10px 14px; margin-bottom: 10px;
    font-size: 13px; font-weight: 600; color: #7f1d1d;
    -webkit-user-select: all; user-select: all;
}

.scm-del-input-wrap { position: relative; }
.scm-del-input {
    width: 100%; box-sizing: border-box; padding: 11px 40px 11px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; color: #1e293b; outline: none; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.scm-del-input:focus { border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(148, 163, 184, .15); }
.scm-del-input.is-match { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
.scm-del-input.is-wrong-shake { animation: scmDelShake .4s ease-in-out; border-color: #dc2626; }
.scm-del-input-check {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: #16a34a; opacity: 0; transition: opacity .15s ease;
    display: flex; align-items: center;
}
.scm-del-input-check.is-visible { opacity: 1; }

.scm-del-otp-row { display: flex; gap: 9px; }
.scm-del-otp-box {
    width: 46px; height: 52px; text-align: center;
    font-size: 20px; font-weight: 700; color: #1e293b;
    border: 1.5px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
    outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.scm-del-otp-box:focus { border-color: #dc2626; background: #fff; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
.scm-del-otp-box.is-filled { background: #fff; border-color: #cbd5e1; }
.scm-del-otp-row.is-shaking .scm-del-otp-box { animation: scmDelShake .4s ease-in-out; border-color: #dc2626; }

.scm-del-resend { font-size: 12px; color: #94a3b8; margin-top: 10px; }
.scm-del-resend .scm-del-resend-link {
    background: none; border: none; padding: 0; color: #0073aa; font-weight: 600;
    font-size: 12px; cursor: pointer; text-decoration: underline;
}
.scm-del-resend .scm-del-resend-link:disabled { color: #cbd5e1; cursor: not-allowed; text-decoration: none; }

.scm-del-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.scm-del-btn-cancel {
    padding: 10px 20px; background: transparent; color: #64748b;
    border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.scm-del-btn-cancel:hover { background: #f1f5f9; color: #334155; }
.scm-del-btn-primary {
    padding: 10px 22px; border: none; border-radius: 10px;
    font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer;
    background: #dc2626;
    transition: background .18s ease, transform .1s ease, box-shadow .18s ease;
    box-shadow: 0 4px 14px -4px rgba(220, 38, 38, .5);
}
.scm-del-btn-primary:hover:not(:disabled) { background: #b91c1c; }
.scm-del-btn-primary:active:not(:disabled) { transform: scale(.96); }
.scm-del-btn-primary:disabled {
    background: #fecaca; color: #fca5a5; cursor: not-allowed;
    box-shadow: none; opacity: .8;
}

/* ============================================================
   OTP dạng 6 ô rời dùng chung (accent xanh) — cùng PATTERN với
   popup "Xóa tài khoản" (`.scm-del-otp-*`: auto-advance/backspace/
   dán/rung khi sai/đếm ngược gửi lại) nhưng KHÔNG dùng chung class
   vì đây không phải hành động phá hủy — chỉ đổi tông màu accent
   (xanh `#2563eb` thay đỏ), layout/kích thước ô giữ nguyên y hệt.
   Dùng ở popup "Bàn giao chủ sở hữu" (`_showTransferOtpModal`).
   ============================================================ */
.scm-otp-row { display: flex; gap: 9px; }
.scm-otp-box {
    width: 46px; height: 52px; text-align: center;
    font-size: 20px; font-weight: 700; color: #1e293b;
    border: 1.5px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
    outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.scm-otp-box:focus { border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
.scm-otp-box.is-filled { background: #fff; border-color: #cbd5e1; }
.scm-otp-row.is-shaking .scm-otp-box { animation: scmDelShake .4s ease-in-out; border-color: #dc2626; }

.scm-otp-resend { font-size: 12px; color: #94a3b8; margin-top: 10px; }
.scm-otp-resend .scm-otp-resend-link {
    background: none; border: none; padding: 0; color: #0073aa; font-weight: 600;
    font-size: 12px; cursor: pointer; text-decoration: underline;
}
.scm-otp-resend .scm-otp-resend-link:disabled { color: #cbd5e1; cursor: not-allowed; text-decoration: none; }

/* ============================================================
   Popup "Thiết lập tài khoản"/"Thiết lập hệ thống" FULL MÀN HÌNH
   cho mobile (≤768px) — thay hẳn dropdown neo nhỏ của desktop
   khi bấm avatar, đủ chỗ hiện mục con (`_showMobileSettingsMenu`).
   `top`/`bottom` đặt qua inline style (đo chiều cao header/footer
   THẬT bằng JS) — CSS chỉ định vị trí còn lại + màu sắc/spacing.
   ============================================================ */
.scm-mobile-settings-menu {
    position: fixed; left: 0; right: 0; z-index: 99998;
    background: #fff; display: flex; flex-direction: column;
    animation: scmDelFadeIn .18s ease;
}
.scm-mobile-settings-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0; background: #f8fafc; flex-shrink: 0;
}
.scm-mobile-settings-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.scm-mobile-settings-userinfo { min-width: 0; flex: 1; }
.scm-mobile-settings-name {
    font-size: 14px; font-weight: 700; color: #1a202c;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scm-mobile-settings-email {
    font-size: 12px; color: #6b7280;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scm-mobile-settings-close {
    flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%;
    background: #eef2f7; color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.scm-mobile-settings-close:hover { background: #e2e8f0; }
.scm-mobile-settings-body { flex: 1; overflow-y: auto; padding: 8px 0 24px; }

.scm-mobile-settings-section-label {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 8px; font-size: 13px; font-weight: 700; color: #0073aa;
}
.scm-mobile-settings-group-label {
    padding: 10px 16px 4px 40px; font-size: 11.5px; font-weight: 700;
    color: #94a3b8; text-transform: uppercase; letter-spacing: .04em;
}
.scm-mobile-settings-divider { height: 1px; background: #f1f5f9; margin: 10px 0; }

.scm-mobile-settings-item {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 12px 16px; font-size: 14.5px; font-weight: 500; color: #374151;
    cursor: pointer; transition: background .15s ease;
}
.scm-mobile-settings-item:hover, .scm-mobile-settings-item:active { background: #f8fafc; }
.scm-mobile-settings-item.scm-mobile-item-lvl-1 { padding-left: 40px; }
.scm-mobile-settings-item.scm-mobile-item-lvl-2 { padding-left: 56px; font-size: 14px; color: #4b5563; }
.scm-mobile-settings-item.scm-mobile-settings-logout { color: #dc2626; font-weight: 600; padding-left: 16px; }

/* ============================================================
   Popup tìm kiếm ứng dụng FULL MÀN HÌNH cho mobile (≤768px) —
   mở từ `#scm-mobile-search-btn` (`_showMobileSearchOverlay`),
   thay ô tìm kiếm rộng bị bóp méo trong header hẹp.
   ============================================================ */
.scm-mobile-search-overlay {
    position: fixed; left: 0; right: 0; z-index: 99998;
    background: #fff; display: flex; flex-direction: column;
    animation: scmDelFadeIn .18s ease;
}
.scm-mobile-search-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.scm-mobile-search-input-wrap {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: #f5f7fa; border: 1px solid #e2e8f0; border-radius: 22px;
    padding: 9px 16px; color: #a0aec0;
}
.scm-mobile-search-input-wrap input {
    flex: 1; border: none; background: transparent; outline: none;
    font-size: 14px; color: #1a202c;
}
.scm-mobile-search-close {
    flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%;
    background: #eef2f7; color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.scm-mobile-search-close:hover { background: #e2e8f0; }
/* Padding ngang 16px — khớp `.spa-body{padding:16px}` ở breakpoint mobile (nơi `.apps-grid`
   THẬT SỰ nằm trong ở trang chủ) để lưới icon kết quả không dính sát mép màn hình. */
.scm-mobile-search-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }

.scm-mobile-search-empty {
    padding: 40px 20px; text-align: center; color: #94a3b8; font-size: 13px;
}

/* ============================================================
   "Giỏ hàng" (`renderCartView`) — bố cục 2 cột trên Desktop
   (≥1024px, cùng breakpoint dùng xuyên suốt file này): cột trái
   (kê khai chi tiết) + cột phải (chốt đơn, sticky khi cột trái
   dài hơn). Mobile/tablet mặc định `display:block` — 2 `<div>`
   con tự xếp chồng dọc ĐÚNG theo thứ tự DOM gốc (giống bố cục cũ
   trước khi tách cột), không cần rule riêng nào cho mobile.
   ============================================================ */
.scm-cart-col-right { margin-top: 24px; }
@media (min-width: 1024px) {
    .scm-cart-grid {
        display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start;
    }
    .scm-cart-col-right { position: sticky; top: 24px; margin-top: 0; }
}
.scm-cart-summary-card {
    background: #f8fafc; border-radius: 12px; padding: 20px 22px;
}

/* Ẩn cột bảng CHỈ trên mobile (≤768px) — utility class dùng chung, gắn trực tiếp vào `<th>`/
   `<td>` tương ứng (đã dùng cho bảng "Chọn doanh nghiệp để vào ứng dụng" — cột "Mã số thuế"/
   "Người quản trị" thừa thãi trên màn hẹp, Desktop vẫn hiện đủ như cũ). */
@media (max-width: 768px) {
    .scm-col-hide-mobile { display: none; }
}

/* "Danh sách doanh nghiệp" > bảng — `min-width:900px` (đặt cho Desktop, đủ chỗ 6 cột) khiến
   3 cột còn lại trên mobile (sau khi ẩn "Ngày tạo"/"Người đại diện"/"Địa chỉ") bị trình duyệt
   tự giãn rộng ra để lấp đầy 900px, tạo khoảng trống lớn giữa "Tên doanh nghiệp" và "Mã số
   thuế". Hạ `min-width` xuống mức đủ dùng cho 3 cột còn lại (Hành động/Tên doanh nghiệp/Mã số
   thuế, đã có `white-space:nowrap` riêng — không co dúm/xuống dòng) — `!important` để thắng
   inline style. Bảng vẫn nằm trong wrapper `overflow-x:auto` sẵn có nên nếu tên công ty quá
   dài vẫn cuộn ngang được, không bị cắt. */
@media (max-width: 768px) {
    .scm-syscompany-table { min-width: 380px !important; }
}

/* "Cơ cấu tổ chức" > toolbar tìm kiếm/lọc — trên mobile, ô tìm kiếm (`#org-search-wrap`, vốn
   `width:260px` cố định trên input) chiếm trọn 1 hàng riêng; dropdown "Tất cả trạng thái"
   (`#org-status-filter`) và nút "Mở rộng/Thu gọn" (`#btn-org-expand-toggle`) xuống hàng dưới,
   dùng `flex:1` để chia đều hết phần chiều ngang còn lại (thay vì mỗi phần tử chỉ rộng theo
   nội dung, để trống khoảng thừa bên phải). Cha (`display:flex;flex-wrap:wrap`) có sẵn nên
   không cần đổi gì thêm — ép search 100% tự đẩy 2 phần tử kia xuống dòng dưới. */
@media (max-width: 768px) {
    #org-search-wrap { width: 100%; }
    #org-search { width: 100% !important; }
    #org-status-filter,
    #btn-org-expand-toggle { flex: 1 1 0; }
    #btn-org-expand-toggle { justify-content: center; }
}

/* "Đối tượng" > tab "Người dùng" — toolbar 4 phần tử (tìm kiếm + 3 dropdown lọc) trên mobile:
   ẩn hẳn "Trạng thái: Tất cả" (`#persons-status-filter`); ô tìm kiếm chiếm trọn 1 hàng riêng
   (kéo giãn hết chiều ngang); "Tất cả công ty" + "Là nhân viên" cùng 1 hàng dưới — CHIA KHÔNG
   ĐỀU (40/60, `flex-grow` 2:3) vì "Là nhân viên: Tất cả" dài chữ hơn hẳn "Tất cả công ty", chia
   đôi đều (`calc(50%)`) làm mất chữ. Dùng `flex` (không phải `width`) để tự tính đúng theo
   `gap:10px` của cha (`display:flex;flex-wrap:wrap`) thay vì cộng trừ tay dễ lệch; ô tìm kiếm
   100% tự đẩy 2 dropdown còn lại xuống hàng dưới, đủ đúng 100% để không xuống hàng thứ 3.
   `min-width:0` bắt buộc — `<select>` có kích thước tối thiểu theo nội dung mặc định, chặn
   flexbox co đúng theo tỷ lệ nếu không có dòng này. */
@media (max-width: 768px) {
    #persons-status-filter { display: none !important; }
    #persons-search-wrap { width: 100%; box-sizing: border-box; }
    #persons-search-wrap #persons-search { width: 100% !important; }
    #persons-company-filter {
        flex: 2 1 0;
        min-width: 0;
        box-sizing: border-box;
    }
    #persons-employee-filter {
        flex: 3 1 0;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* "Vị trí công việc" > toolbar — ô tìm kiếm và dropdown "Tất cả trạng thái" mỗi phần tử chiếm
   TRỌN 1 hàng riêng trên mobile (kéo giãn hết chiều ngang, xếp chồng dọc) — trước đó cùng 1
   hàng chia đôi (`flex:1 1 0`) khiến ô tìm kiếm bị bóp hẹp mất chữ placeholder ("Tìm kiếm theo
   m..."), đổi sang `width:100%` để mỗi phần tử tự xuống hàng riêng (cha có sẵn
   `flex-wrap:wrap`). */
@media (max-width: 768px) {
    #jobpos-search-wrap,
    #jobpos-status-filter { width: 100%; box-sizing: border-box; }
    #jobpos-search-wrap #jobpos-search { width: 100% !important; }
}

/* "Thùng rác" (4 danh mục con: Doanh nghiệp/Cơ cấu tổ chức/Đối tượng/Vị trí công việc, dùng
   chung `_renderTrashShell()`) — ô tìm kiếm `#trash-search` có `width:280px` cố định trên
   input → trên mobile kéo giãn hết chiều ngang card (box-sizing đã là border-box qua reset
   `*{box-sizing:border-box}` đầu file, không cần khai báo thêm). */
@media (max-width: 768px) {
    #trash-search-wrap { width: 100%; box-sizing: border-box; }
    #trash-search-wrap #trash-search { width: 100% !important; }
}

/* "Phân quyền" > "Ứng dụng" (panel phải, `_renderPermAppsRightPanel`) — ô tìm kiếm + 2 dropdown
   lọc ("Tất cả tình trạng kích hoạt"/"Tất cả trạng thái sử dụng") trên mobile mỗi phần tử chiếm
   TRỌN 1 hàng riêng (kéo giãn hết chiều ngang, xếp chồng dọc) thay vì rộng theo nội dung/280px
   cố định như Desktop — khác toolbar "Vị trí công việc" (2 phần tử chia đôi cùng hàng), ở đây
   user yêu cầu mỗi phần tử rộng hết, không ghép chung hàng. */
@media (max-width: 768px) {
    #permapps-search-wrap,
    #permapps-activation-filter,
    #permapps-status-filter { width: 100%; box-sizing: border-box; }
    #permapps-search-wrap #permapps-search { width: 100% !important; }
}

/* "Lịch sử xác nhận" ("Thiết lập tài khoản" > "Giấy phép & Thanh toán") — ô tìm kiếm bọc trong
   `#accs-terms-search-wrap` có `max-width:300px` cố định cho Desktop → trên mobile bỏ giới hạn
   này, ô tìm kiếm kéo giãn hết chiều ngang card (đã sẵn `width:100%` trên wrapper). */
@media (max-width: 768px) {
    #accs-terms-search-wrap { max-width: 100% !important; }
}

/* "Nhật ký hoạt động" ("Thiết lập hệ thống") > toolbar 5 phần tử (tìm kiếm + 4 dropdown lọc)
   trên mobile: ô tìm kiếm giữ nguyên 1 hàng riêng (đã `flex:1;min-width:200px` sẵn từ trước,
   tự chiếm hết hàng vì không còn chỗ cho phần tử kế tiếp); 4 dropdown còn lại ghép cặp CÙNG
   HÀNG theo ĐÚNG THỨ TỰ DOM (Hành động+Đối tượng ở hàng 1, Doanh nghiệp+Thời gian ở hàng 2) —
   mỗi cặp `calc(50% - 5px)` khớp `gap:10px` của cha (`display:flex;flex-wrap:wrap`), 2 phần tử
   liên tiếp lấp đầy đúng 100% rồi cặp tiếp theo tự xuống hàng dưới. */
@media (max-width: 768px) {
    #actlog-action-filter,
    #actlog-object-filter,
    #actlog-company-filter,
    #actlog-range-filter {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        box-sizing: border-box;
    }
}

/* "Lịch sử thanh toán" > lọc trạng thái — hàng pill ("Tất cả giao dịch"/"Chờ thanh toán"/
   "Hoàn thành"/"Đã hủy") tràn/cắt mất tab cuối trên mobile (không đủ chỗ cạnh ô tìm kiếm) →
   đổi sang `<select>` (`_accsettOrdersHtml`, spa-app.js). Mặc định (Desktop) hiện pill, ẩn
   select; đảo ngược ở breakpoint mobile. Cả 2 điều khiển chung 1 trạng thái lọc, đồng bộ 2
   chiều qua JS (`_bindAccsettOrdersEvents`). */
.scm-orders-tabs-select {
    display: none;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    outline: none;
}
@media (max-width: 768px) {
    .scm-orders-tabs-pills { display: none !important; }
    .scm-orders-tabs-select { display: block; width: 100%; }
    /* Ô tìm kiếm + box "Số dư tín dụng" trước đây chỉ rộng theo nội dung (250px cố định / co theo
       nội dung) → trên mobile bị hẹp hơn hẳn dropdown "Tất cả giao dịch" (đã full-width ở trên) —
       ép cả 2 rộng bằng nhau, mỗi khối tự xuống 1 hàng riêng (nhờ `flex-wrap:wrap` có sẵn của
       `.scm-orders-filters-group`/container ngoài cùng). */
    .scm-orders-filters-group { width: 100%; }
    .scm-orders-search-wrap { width: 100% !important; }
    .scm-orders-search-wrap #orders-search { width: 100% !important; }
    .scm-orders-credit-box { width: 100%; box-sizing: border-box; }

    /* "Danh sách doanh nghiệp" — ô tìm kiếm (max-width:320px cố định qua inline style) + badge
       "Lượt tạo doanh nghiệp" (inline-flex, chỉ rộng theo nội dung) lệch nhau trên mobile — ép cả
       2 rộng bằng nhau (full width), mỗi khối tự xuống 1 hàng riêng (nhờ `flex-wrap:wrap` có sẵn
       của container ngoài cùng trong `_renderSystemCompanyPage`). `!important` cần cho ô tìm kiếm
       vì `max-width:320px` đang set qua inline style. */
    .scm-company-search-wrap { width: 100% !important; max-width: none !important; }
    .scm-company-quota-badge { display: flex !important; width: 100%; box-sizing: border-box; }
}

/* Form 2 cột dùng chung ("Thêm/Sửa doanh nghiệp" — 3 card song song; "Thêm/Sửa cơ cấu tổ chức",
   "Thêm/Sửa đối tượng", "Thêm/Sửa vị trí công việc" — mỗi card 2 cột trường) — trên mobile mỗi
   hàng chỉ nên chứa 1 phần tử (1 card hoặc 1 trường), tránh bị bóp méo cạnh nhau. `!important`
   BẮT BUỘC vì `grid-template-columns` đang set qua style INLINE (specificity cao hơn rule
   thường trong stylesheet) — cùng kỹ thuật đã dùng ở `.scm-orders-tabs-pills`/`#scm-filter-sidebar`. */
@media (max-width: 768px) {
    .scm-form-2col-grid { grid-template-columns: 1fr !important; }
}

/* "Phân quyền" > "Ứng dụng" và "Giấy phép" — trên mobile: bỏ ô tìm kiếm + danh sách công ty
   dạng scroll bên trái (panel `#permapps-company-panel`/`#lic-sidebar`, nút mở rộng nằm sẵn
   BÊN TRONG panel nên ẩn theo, không cần liệt kê riêng), thay bằng 1 dropdown chọn công ty
   (`#permapps-company-mselect`/`#lic-company-mselect`, class dùng chung
   `.scm-mobile-company-select`) ngay trên bảng dữ liệu bên phải. Desktop giữ nguyên layout 2
   cột cũ (panel trái + bảng phải), dropdown ẩn hoàn toàn. */
.scm-mobile-company-select { display: none; }
@media (max-width: 768px) {
    #permapps-company-panel,
    #lic-sidebar {
        display: none !important;
    }
    .scm-mobile-company-select {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 9px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #1a202c;
        background: #fff;
        margin-bottom: 12px;
    }
}

/* ============================================================
   Panel "Danh sách công ty" thu gọn/mở rộng MƯỢT — DÙNG CHUNG cho
   "Giấy phép" (`#lic-sidebar`) VÀ "Phân quyền" > "Ứng dụng"
   (`#permapps-company-panel`), thay cho 2 cách cũ khác nhau (hide()/
   show() nhảy tức thì ở Giấy phép; re-render toàn trang + ẩn/hiện
   markup có điều kiện ở Phân quyền).
   Kỹ thuật: `.scm-co-sidebar` (viên nang ngoài, `overflow:hidden`)
   chỉ animate WIDTH; nội dung bên trong giữ NGUYÊN chiều rộng tự
   nhiên 250px trong 1 wrapper `position:relative`
   (`.scm-co-sidebar-inner`) — 2 lớp `.scm-co-sidebar-full` (tiêu
   đề+search+list) và `.scm-co-sidebar-rail` (chỉ icon mở rộng) XẾP
   CHỒNG bằng `position:absolute`, crossfade qua opacity — nhờ vậy
   chữ KHÔNG BAO GIỜ bị bóp/reflow trong lúc width đang chạy
   animation, chỉ đơn thuần bị `overflow:hidden` của lớp ngoài che
   dần đi (hiệu ứng "trượt lộ dần"), đúng yêu cầu "không vỡ/đè chữ
   khi đang thu gọn". Cả 2 lớp `-full`/`-rail` LUÔN nằm sẵn trong DOM
   (không render-có-điều-kiện) để việc thu/phóng chỉ cần toggle class
   `is-collapsed`, không cần vẽ lại cả trang. */
.scm-co-sidebar {
    width: 250px;
    flex-shrink: 0;
    align-self: stretch;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scm-co-sidebar.is-collapsed { width: 44px; }
.scm-co-sidebar-inner {
    width: 250px;
    height: 100%;
    position: relative;
}
.scm-co-sidebar-full {
    position: absolute;
    inset: 0;
    width: 250px;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.scm-co-sidebar.is-collapsed .scm-co-sidebar-full {
    opacity: 0;
    pointer-events: none;
}
.scm-co-sidebar-rail {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.1s;
}
.scm-co-sidebar.is-collapsed .scm-co-sidebar-rail {
    opacity: 1;
    pointer-events: auto;
}
/* Nút thu gọn (cạnh tiêu đề) + nút mở rộng (trong `.scm-co-sidebar-rail`) — dùng CHUNG 1
   style: mặc định trong suốt (chỉ thấy icon), hover hiện rõ khung nút (nền xám nhạt bo góc)
   để báo hiệu có thể bấm — trước đó icon "trôi nổi" không có phản hồi hover nào. */
.scm-co-toggle-btn {
    border: none;
    background: none;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.scm-co-toggle-btn:hover {
    background: #f1f5f9;
    color: #0073aa;
}
/* Danh sách công ty cuộn được (`.scm-co-scroll-list`) — thanh cuộn LUÔN cấp phát sẵn khoảng
   không gian (`scrollbar-gutter:stable` + width/`scrollbar-width` CỐ ĐỊNH, không đổi theo
   hover), chỉ ẩn/hiện TRỰC QUAN qua màu tay cầm (`scrollbar-color`/`::-webkit-scrollbar-thumb`)
   — tránh layout shift/nhấp nháy khung khi rê chuột ra vào (báo lỗi kèm video loi4.wmv, trước
   đây đổi `width` 0↔6px làm khung co giãn). Vẫn cuộn được bằng lăn chuột/trackpad mọi lúc. */
.scm-co-scroll-list {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.scm-co-scroll-list::-webkit-scrollbar {
    width: 6px;
}
.scm-co-scroll-list:hover {
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.scm-co-scroll-list::-webkit-scrollbar-track {
    background: transparent;
}
.scm-co-scroll-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background-color .15s ease;
}
.scm-co-scroll-list:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
}

/* Chặn trình duyệt mobile (đặc biệt iOS Safari) tự động ZOOM TRANG khi bấm vào ô nhập —
   hành vi này kích hoạt bất cứ khi nào input/select/textarea đang focus có font-size TÍNH
   TOÁN < 16px. Toàn bộ SPA dựng UI bằng style INLINE (font-size 11-13px, tối ưu cho Desktop)
   nên phải ép `!important` ở breakpoint mobile để thắng specificity của inline style — đây là
   quy tắc CHUẨN, áp dụng đồng loạt cho MỌI ô nhập trong toàn hệ thống (không cần sửa từng nơi).
   Loại trừ checkbox/radio/range/color/file — các loại input đó không kích hoạt zoom và việc ép
   font-size có thể ảnh hưởng tới kích thước hiển thị của chúng ở vài trình duyệt cũ. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Nút nổi "Báo lỗi" — cố định góc dưới-phải, luôn hiện trên mọi kích thước màn hình
   (xem spa-app.js `_injectBugReportButton()`). */
#scm-bug-report-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99990;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #dc2626;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
#scm-bug-report-btn:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45); }
@media (max-width: 768px) {
    #scm-bug-report-btn { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* ============================================================
   CHỐNG CHỮ CỦA CỘT NÀY VẼ ĐÈ LÊN CỘT KHÁC — áp dụng cho mọi bảng
   dữ liệu dùng `table-layout:fixed` trong toàn SPA (báo lỗi
   2026-08-22: "Danh sách doanh nghiệp" — tên doanh nghiệp đè lên
   "Mã số thuế"; lỗi giống hệt ở "Cơ cấu tổ chức", "Đối tượng"...).

   Nguyên nhân: các bảng này BẮT BUỘC dùng `table-layout:fixed` +
   `<colgroup>` width px cố định — để bảng tiêu đề tĩnh và bảng dữ
   liệu (2 `<table>` TÁCH RỜI) luôn thẳng cột với nhau, xem
   `_stickyCardOuterStyle()`/`_bindStickyScrollSync()` trong
   spa-app.js — và JS đặt `white-space:nowrap` cho ô ở style inline.
   Nhưng ô KHÔNG hề có `overflow` nào → nội dung dài hơn width cột
   KHÔNG "tự cuộn bên trong ô" (giả định SAI ghi trong comment cũ
   của `_buildOrgTreeTable()`), mà TRÀN HẲN ra ngoài biên ô và vẽ đè
   lên nội dung của cột kế bên.

   Xử lý: cho phép nội dung XUỐNG DÒNG trong ô — ô cao thêm chứ
   không tràn ngang nữa nên không còn đè cột. `overflow-wrap` để cả
   chuỗi liền KHÔNG có dấu cách (email, mã số, URL dài) cũng ngắt
   được thay vì tràn ra. Bảng vẫn giữ nguyên `min-width` sẵn có, nên
   khi khung hẹp hơn tổng bề rộng các cột thì wrapper bao ngoài
   (`overflow-x:auto`, vd `#org-body-scroll`) vẫn CUỘN NGANG như cũ.

   Vì sao đặt ở đây thay vì sửa từng chỗ trong spa-app.js:
   `white-space:nowrap` do JS sinh ra ở style INLINE tại ~26 vị trí
   (có chỗ nằm trong biến `tdS` dùng chung cho cả bảng, có chỗ nối
   thêm riêng cho từng `<td>`) — 1 quy tắc chung ở đây bao hết, không
   sót chỗ nào và không phải sửa lại mỗi lần thêm bảng mới.
   `!important` là bắt buộc để thắng specificity của inline style —
   cùng lý do và cùng cách làm với khối chặn zoom mobile phía trên.

   Selector bám vào chính chuỗi `table-layout:fixed` trong thuộc tính
   style → khớp ĐÚNG tập bảng đang mắc lỗi này (bảng không dùng fixed
   layout thì cột tự co giãn theo nội dung, không bao giờ đè nhau).
   Viết 2 biến thể có/không có dấu cách sau dấu hai chấm để không phụ
   thuộc cách gõ ở từng chỗ trong JS.
   ============================================================ */
table[style*="table-layout:fixed"] th,
table[style*="table-layout:fixed"] td,
table[style*="table-layout: fixed"] th,
table[style*="table-layout: fixed"] td {
    white-space: normal !important;
    overflow-wrap: break-word; /* fallback cho trình duyệt cũ */
    overflow-wrap: anywhere;
}

/* NGOẠI LỆ của quy tắc ngay trên: badge/pill trạng thái ("Đang theo dõi", "Đang hoạt động",
   "Chủ sở hữu"...) — cho xuống dòng thì pill bị ngắt làm đôi, trông như vỡ giao diện. Giữ pill
   luôn 1 dòng, nhưng chặn nó tràn ra khỏi ô: nếu cột quá hẹp thì cắt bớt kèm "…" TRONG đúng
   biên của pill (cần `inline-block` — `overflow` không có tác dụng với inline thường).
   Selector khớp đúng 26 pill do JS sinh ra (đều cùng cặp `padding:2px 8px` + `border-radius:20px`
   — đã đối chiếu toàn bộ spa-app.js, không có phần tử nào khác dùng cặp này). */
table[style*="table-layout:fixed"] td span[style*="padding:2px 8px"][style*="border-radius:20px"],
table[style*="table-layout: fixed"] td span[style*="padding:2px 8px"][style*="border-radius:20px"] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    box-sizing: border-box;
}