/* Giao diện thử kiểu Spike cho Admin ATP (anh yêu cầu 20/10/2026).
   Chỉ có tác dụng khi <html> có lớp ui-spike: bật bằng ?ui=spike, tắt bằng ?ui=old.
   Học bố cục / màu / bo góc / đổ bóng của mẫu Spike Admin; CSS tự viết, không chép mã hay hình của mẫu.
   Màu chính lấy theo logo An Tín Phát (xanh lá); ?tone=blue đổi sang xanh dương giống mẫu. */

html.ui-spike{
  --sk-font:Roboto,Inter,system-ui,-apple-system,'Segoe UI',sans-serif; /* anh chọn Roboto 20/10/2026 */
  --sk-bg:#f0f5f9;
  --sk-card:#ffffff;
  --sk-ink:#111c2d;
  --sk-muted:#5a6a85;
  --sk-line:#e5eaef;
  --sk-hover:#f6f9fc;
  --sk-shadow:0 2px 6px rgba(37,83,185,.10);
  --sk-shadow-up:0 14px 30px -14px rgba(37,83,185,.30);

  /* xanh đậm đúng màu logo An Tín Phát (#0C5230), điểm nhấn xanh nõn chuối của logo (#8CC43F) */
  --sk-primary:#0c5230;
  --sk-primary-ink:#083d23;
  --sk-primary-soft:rgba(12,82,48,.10);
  --sk-lime:#8cc43f;

  --sk-blue:#0085db;   --sk-blue-ink:#006cb3;   --sk-blue-soft:rgba(0,133,219,.12);
  --sk-green:#2f8f46;  --sk-green-ink:#1f6e33;  --sk-green-soft:rgba(47,143,70,.13);
  --sk-orange:#e5830b; --sk-orange-ink:#b46400; --sk-orange-soft:rgba(248,160,60,.17);
  --sk-red:#ee5d50;    --sk-red-ink:#d03a2d;    --sk-red-soft:rgba(238,93,80,.13);
  --sk-purple:#7c5ce6; --sk-purple-ink:#6443d6; --sk-purple-soft:rgba(124,92,230,.13);
  --sk-cyan:#0ba5c9;   --sk-cyan-ink:#08809c;   --sk-cyan-soft:rgba(11,165,201,.13);
  --sk-grey:#707a82;   --sk-grey-ink:#4f5962;   --sk-grey-soft:rgba(112,122,130,.12);

  /* biến cũ của Admin dùng chung cho mọi trang */
  --primary:var(--sk-primary);
  --primary-dark:var(--sk-primary-ink);
  --primary-light:var(--sk-primary);
  --bg:var(--sk-bg);
  --border:var(--sk-line);
  --text:var(--sk-ink);
  --text-light:var(--sk-muted);
  --success:var(--sk-green);
  --danger:var(--sk-red);
  --warning:var(--sk-orange);
  --info:var(--sk-blue);
  --money-pos:var(--sk-green-ink);
  --money-neg:var(--sk-red-ink);
  --mm-dark:var(--sk-primary);
  --mm-teal:var(--sk-primary);
  --mm-head:#f6f9fc;
  --mm-input:#dfe5ef;
}
html.ui-spike.tone-blue{--sk-primary:#0085db;--sk-primary-ink:#006cb3;--sk-primary-soft:rgba(0,133,219,.12)}

html.ui-spike body,html.ui-spike input,html.ui-spike select,html.ui-spike textarea,html.ui-spike button,
html.ui-spike .tbl,html.ui-spike .sb-item,html.ui-spike .sb-subitem,html.ui-spike .topbar,html.ui-spike .page-title,html.ui-spike .btn{font-family:var(--sk-font)}
html.ui-spike body{background:var(--sk-bg);color:var(--sk-ink)}
html.ui-spike b,html.ui-spike .num,html.ui-spike .col-money{font-variant-numeric:tabular-nums}

/* ============ Menu trái: thẻ trắng nổi ============ */
html.ui-spike .sidebar{width:262px;background:var(--sk-card);color:var(--sk-ink);margin:16px 0 16px 16px;top:16px;height:calc(100vh - 32px);border-radius:18px;box-shadow:var(--sk-shadow)}
html.ui-spike .sidebar::-webkit-scrollbar-thumb{background:#d5dde6}
html.ui-spike .sb-brand{padding:18px 18px 8px 22px;border-bottom:0}
html.ui-spike .sb-logo-img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 0 1px var(--sk-line)}
html.ui-spike .sb-logo-tag{font-size:19px;font-weight:800;color:var(--sk-ink);letter-spacing:-.2px}
html.ui-spike .sb-brand .toggle{color:var(--sk-muted);opacity:1;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px}
html.ui-spike .sb-brand .toggle:hover{background:var(--sk-primary-soft);color:var(--sk-primary)}
html.ui-spike .sb-role-chip{margin:6px 22px 4px;padding:4px 12px;border-radius:999px;font-weight:700;font-size:11.5px}
html.ui-spike .sb-menu{padding:8px 0 12px}
html.ui-spike .sb-menu::before{content:'MENU';display:block;margin:10px 26px 6px;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:var(--sk-ink)}
html.ui-spike .sb-item{color:var(--sk-ink);font-size:14.5px;font-weight:500;margin:2px 14px 2px 0;padding:11px 14px 11px 24px;border-radius:0 999px 999px 0;gap:14px}
html.ui-spike .sb-item i:first-child{width:22px;font-size:17px;color:var(--sk-ink);opacity:.9}
html.ui-spike .sb-item i.ti:first-child{font-size:21px;opacity:1}
html.ui-spike .sb-item:hover{background:var(--sk-primary-soft);color:var(--sk-primary)}
html.ui-spike .sb-item:hover i:first-child{color:var(--sk-primary)}
html.ui-spike .sb-item.active{background:var(--sk-primary-soft);color:var(--sk-primary);font-weight:700}
html.ui-spike .sb-item.active i:first-child{color:var(--sk-primary)}
html.ui-spike .sb-item.open{background:transparent;color:var(--sk-primary);font-weight:700}
html.ui-spike .sb-item.open i:first-child{color:var(--sk-primary)}
html.ui-spike .sb-item > i.fa-chevron-right{color:var(--sk-muted);font-size:10px}
html.ui-spike .sb-sub{background:transparent;margin:0 14px 4px 0}
html.ui-spike .sb-subitem{color:var(--sk-muted);font-size:14px;font-weight:500;padding:9px 14px 9px 60px;margin:1px 0;border-radius:0 999px 999px 0;position:relative}
html.ui-spike .sb-subitem::before{content:'';position:absolute;left:34px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1.5px solid currentColor;opacity:.7}
html.ui-spike .sb-subitem:hover{background:var(--sk-hover);color:var(--sk-primary)}
html.ui-spike .sb-subitem.active{background:var(--sk-primary-soft);color:var(--sk-primary);font-weight:700}
html.ui-spike .sb-subitem.active::before{background:currentColor;opacity:1}
html.ui-spike .sb-badge{background:var(--sk-red);color:#fff;font-weight:700;padding:2px 8px;font-size:11px;box-shadow:0 4px 10px -4px var(--sk-red)}
html.ui-spike .sb-foot{margin:8px 14px 14px;padding:14px 16px;border:0;border-radius:14px;background:var(--sk-primary-soft);color:var(--sk-ink);font-size:11.5px}
html.ui-spike .sb-foot a{color:var(--sk-primary);text-decoration:none;font-weight:700}
html.ui-spike .app.collapsed .sidebar{width:84px}
html.ui-spike .app.collapsed .sb-menu::before{display:none}
html.ui-spike .app.collapsed .sb-item{margin:2px 12px;border-radius:12px;padding:12px;justify-content:center}
html.ui-spike .app.collapsed .sb-brand .toggle{background:var(--sk-primary-soft);color:var(--sk-primary)}

/* ============ Thanh trên: thẻ trắng nổi ============ */
html.ui-spike .main{padding:0 16px 0 20px}
html.ui-spike .topbar{background:var(--sk-card);color:var(--sk-ink);height:70px;margin-top:16px;top:16px;padding:0 18px;border:0;border-radius:18px;box-shadow:var(--sk-shadow);gap:10px}
html.ui-spike .topbar .branch-pick{background:var(--sk-hover);border:1px solid var(--sk-line);color:var(--sk-ink);font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;padding:9px 14px;border-radius:999px;gap:8px}
html.ui-spike .topbar .branch-pick .fa-store{display:inline-block;color:var(--sk-primary);font-size:14px}
html.ui-spike .topbar .branch-pick:hover{border-color:var(--sk-primary);background:var(--sk-primary-soft)}
html.ui-spike .tb-search{display:flex;align-items:center;gap:8px;height:44px;min-width:300px;padding:0 16px;border:1px solid var(--sk-line);border-radius:999px;background:var(--sk-card)}
html.ui-spike .tb-search i{color:var(--sk-ink)}
html.ui-spike .tb-search input{border:0;outline:0;background:transparent;color:var(--sk-ink);font-size:14px;width:100%}
html.ui-spike .tb-search input::placeholder{color:var(--sk-muted)}
html.ui-spike .tb-search:focus-within{border-color:var(--sk-primary);box-shadow:0 0 0 3px var(--sk-primary-soft)}
html.ui-spike .tb-icon{width:42px;height:42px;color:var(--sk-ink);font-size:17px}
html.ui-spike .tb-icon:hover{background:var(--sk-primary-soft);color:var(--sk-primary)}
html.ui-spike .tb-bubble{background:var(--sk-red);border:2px solid #fff}
html.ui-spike .tb-bad-debt{background:var(--sk-cyan-soft);color:var(--sk-cyan-ink);font-weight:700;padding:8px 14px}
html.ui-spike .tb-user{padding:4px 6px 4px 10px;border-radius:999px;color:var(--sk-ink)}
html.ui-spike .tb-user:hover{background:var(--sk-hover)}
html.ui-spike .tb-user .name div:first-child{font-weight:700}
html.ui-spike .tb-user .avatar{width:42px;height:42px;font-size:15px;box-shadow:0 0 0 3px var(--sk-primary-soft)}
html.ui-spike .user-menu,html.ui-spike .alerts-drop{border:0;border-radius:16px;box-shadow:0 18px 40px -12px rgba(37,83,185,.35);color:var(--sk-ink)}
html.ui-spike .mobile-menu-btn{background:var(--sk-primary-soft);color:var(--sk-primary)}

/* ============ Nội dung chung ============ */
html.ui-spike .content{padding:22px 0 16px}
html.ui-spike .app-foot{background:transparent;border:0;color:var(--sk-muted)}
html.ui-spike .page-title{background:var(--sk-card);border-radius:16px;box-shadow:var(--sk-shadow);padding:14px 20px;margin:0 0 20px;font-size:18px;font-weight:700;color:var(--sk-ink);min-height:68px}
html.ui-spike .page-title>i:first-child{width:40px;height:40px;border-radius:12px;background:var(--sk-primary-soft);color:var(--sk-primary);font-size:16px}
html.ui-spike .page-title .btn i{width:auto;height:auto;background:none;border-radius:0;font-size:13px;color:inherit;display:inline-block}
html.ui-spike .panel{border:0;border-radius:16px;box-shadow:var(--sk-shadow);margin-bottom:20px}
html.ui-spike .panel-head{border-bottom:1px solid var(--sk-line);padding:16px 20px}
html.ui-spike .panel-head h3{font-size:16px;font-weight:700;color:var(--sk-ink)}
html.ui-spike .panel-head h3 i{color:var(--sk-primary)}

/* Nút, ô nhập, nhãn */
html.ui-spike .btn{border-radius:999px;font-weight:600;padding-left:18px;padding-right:18px}
html.ui-spike .btn-sm{padding-left:14px;padding-right:14px}
html.ui-spike .btn-primary{background:var(--sk-primary);border-color:var(--sk-primary);color:#fff;box-shadow:0 8px 16px -10px var(--sk-primary)}
html.ui-spike .btn-primary:hover{background:var(--sk-primary-ink)}
html.ui-spike .btn-outline{border:1px solid var(--sk-primary);color:var(--sk-primary);background:#fff}
html.ui-spike .btn-outline:hover{background:var(--sk-primary-soft)}
html.ui-spike .content input[type=text],html.ui-spike .content input[type=date],html.ui-spike .content input[type=number],
html.ui-spike .content input[type=month],html.ui-spike .content input:not([type]),html.ui-spike .content select{border:1px solid var(--mm-input);border-radius:10px;font-size:14px}
html.ui-spike .content input:focus,html.ui-spike .content select:focus{border-color:var(--sk-primary);box-shadow:0 0 0 3px var(--sk-primary-soft);outline:0}
html.ui-spike .badge{border-radius:999px;font-weight:700;padding:3px 10px;border:1px solid transparent}
html.ui-spike .badge-success{background:var(--sk-green-soft);color:var(--sk-green-ink);border-color:rgba(47,143,70,.35)}
html.ui-spike .badge-danger{background:var(--sk-red-soft);color:var(--sk-red-ink);border-color:rgba(238,93,80,.35)}
html.ui-spike .badge-warning{background:var(--sk-orange-soft);color:var(--sk-orange-ink);border-color:rgba(229,131,11,.35)}
html.ui-spike .badge-info{background:var(--sk-blue-soft);color:var(--sk-blue-ink);border-color:rgba(0,133,219,.35)}
html.ui-spike .badge-muted{background:var(--sk-grey-soft);color:var(--sk-grey-ink);border-color:rgba(112,122,130,.3)}
html.ui-spike .segmented{background:var(--sk-bg);border:1px solid var(--sk-line)}
html.ui-spike .segmented button{color:var(--sk-muted)}
html.ui-spike .segmented button.active{background:var(--sk-card);color:var(--sk-primary);box-shadow:var(--sk-shadow)}

/* Bảng */
html.ui-spike .tbl{color:var(--sk-ink);font-size:13.5px}
html.ui-spike .tbl thead th{background:var(--mm-head);color:var(--sk-ink);font-weight:700;border-bottom:1px solid var(--sk-line);padding:13px 14px}
html.ui-spike .tbl tbody td{border-bottom:1px solid var(--sk-line);padding:13px 14px}
html.ui-spike .tbl tbody tr:hover{background:var(--sk-hover)}
html.ui-spike .tbl .code-link{color:var(--sk-primary)}

/* ============ Khung chào đầu trang (thay nền xanh đậm) ============ */
html.ui-spike .dash-hero,html.ui-spike .branch-hero,html.ui-spike .branch-detail-hero,html.ui-spike .baddebt-hero,html.ui-spike .capital-hero,html.ui-spike .ic-hero,html.ui-spike .ic-hero.refined{
  background:var(--sk-card);color:var(--sk-ink);border:0;border-radius:18px;box-shadow:var(--sk-shadow);position:relative;overflow:hidden}
html.ui-spike .dash-hero>*,html.ui-spike .branch-hero>*,html.ui-spike .branch-detail-hero>*,html.ui-spike .ic-hero>*{position:relative;z-index:1}
html.ui-spike .dash-hero h1,html.ui-spike .branch-hero h1,html.ui-spike .branch-detail-hero h1,html.ui-spike .ic-hero h1{color:var(--sk-ink);font-weight:800;letter-spacing:-.3px}
html.ui-spike .dash-hero p,html.ui-spike .branch-hero p,html.ui-spike .branch-detail-hero p,html.ui-spike .ic-hero p{color:var(--sk-muted)}
html.ui-spike .dash-eyebrow{display:inline-block;background:var(--sk-primary-soft);color:var(--sk-primary);border-radius:999px;padding:5px 12px;letter-spacing:.8px}
html.ui-spike .branch-hero-tags span{background:var(--sk-hover);border:1px solid var(--sk-line);color:var(--sk-ink);font-weight:700}
html.ui-spike .dash-filter-card,html.ui-spike .branch-filter-card{background:rgba(255,255,255,.92);border:1px solid var(--sk-line);box-shadow:var(--sk-shadow);backdrop-filter:none}
html.ui-spike .dash-filter-row label,html.ui-spike .branch-filter-row label{color:var(--sk-muted)}
html.ui-spike .dash-filter-row input,html.ui-spike .dash-filter-row select,html.ui-spike .branch-filter-row input,html.ui-spike .branch-filter-row select{border:1px solid var(--mm-input);background:#fff}
html.ui-spike .dash-period-strip span{background:var(--sk-card);border:0;box-shadow:var(--sk-shadow)}

/* ============ KHỐI SỐ ============
   1) Khối màu đặc nổi (số tổng quan): .exec-card, .branch-summary > div
   2) Khối màu nhạt (số chi tiết): .branch-metrics > div, .branch-flow > div, .col-card, .kpi-sum-card, .ic-kpi, .kpi-mini > div
   Mỗi khối một màu theo nghĩa: giải ngân xanh dương, đã thu xanh lá, dư nợ tím, sắp hạn cam, quá hạn đỏ. */

/* 1) Khối màu đặc */
html.ui-spike .exec-grid,html.ui-spike .branch-summary{gap:18px;margin-bottom:20px}
html.ui-spike .exec-card::before{display:none}
html.ui-spike .exec-card,html.ui-spike .branch-summary>div{
  --c:var(--sk-blue);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 80%,#fff) 0%,var(--c) 52%,color-mix(in srgb,var(--c) 86%,#000) 100%);color:#fff;border:0;border-radius:18px;padding:76px 20px 18px;min-height:168px;position:relative;overflow:hidden;
  box-shadow:0 16px 28px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.08);
  transition:transform .16s ease,box-shadow .16s ease}
html.ui-spike .exec-card:hover,html.ui-spike .branch-summary>div:hover{transform:translateY(-3px);box-shadow:0 22px 34px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.08)}
/* ô biểu tượng góc trên trái */
html.ui-spike .branch-summary>div::after{
  content:'';position:absolute;left:20px;top:18px;width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.2) var(--ico) center/22px 22px no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
html.ui-spike .exec-card i{position:absolute;left:20px;top:18px;right:auto;bottom:auto;width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.2);color:#fff;opacity:1;font-size:19px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
html.ui-spike .exec-card span,html.ui-spike .branch-summary span{position:relative;display:block;color:rgba(255,255,255,.92);font-size:13px;font-weight:600;margin-bottom:6px}
html.ui-spike .exec-card b,html.ui-spike .branch-summary b{position:relative;display:block;color:#fff;font-size:clamp(20px,1.65vw,25px);white-space:nowrap;font-weight:800;letter-spacing:-.3px;line-height:1.15}
html.ui-spike .exec-card em,html.ui-spike .branch-summary em{position:relative;display:inline-block;margin-top:10px;font-style:normal;font-size:11.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 10px}
html.ui-spike .exec-card em.bad::before{content:'▼ ';font-size:9px}
/* màu từng khối (Trang chủ) */
html.ui-spike .exec-card.primary{--c:var(--sk-blue)}
html.ui-spike .exec-card.success{--c:var(--sk-green)}
html.ui-spike .exec-card:not(.primary):not(.success):not(.warn):not(.danger){--c:var(--sk-purple)}
html.ui-spike .exec-card.warn{--c:var(--sk-orange)}
html.ui-spike .exec-card.danger{--c:var(--sk-red)}
/* màu từng khối (Tổng quát / Chi tiết cửa hàng): Dư nợ · Giải ngân · Đã thu · Rủi ro · thêm */
html.ui-spike .branch-summary>div:nth-child(1){--c:var(--sk-purple);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 4 8l8 4 8-4-8-4z'/%3E%3Cpath d='m4 12 8 4 8-4'/%3E%3Cpath d='m4 16 8 4 8-4'/%3E%3C/svg%3E")}
html.ui-spike .branch-summary>div:nth-child(2){--c:var(--sk-blue);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M7 9.5v.01M17 14.5v.01'/%3E%3C/svg%3E")}
html.ui-spike .branch-summary>div:nth-child(3){--c:var(--sk-green);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1.5 3h-3z'/%3E%3Cpath d='M10.5 7C6 9 4 13 5 16.5 5.7 19 8 20 12 20s6.3-1 7-3.5C20 13 18 9 13.5 7'/%3E%3Cpath d='M12 10.5v6M10 12.5c0-1 4-1.5 4 .5s-4 1.5-4 2.8c0 1.4 4 1 4 0'/%3E%3C/svg%3E")}
html.ui-spike .branch-summary>div:nth-child(4){--c:var(--sk-orange);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 19h18L12 4z'/%3E%3Cpath d='M12 10v4M12 17v.01'/%3E%3C/svg%3E")}
html.ui-spike .branch-summary>div:nth-child(5){--c:var(--sk-cyan);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M21 19H3'/%3E%3C/svg%3E")}
html.ui-spike .branch-summary>div:nth-child(6){--c:var(--sk-red);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z'/%3E%3C/svg%3E")}
html.ui-spike .branch-summary>div.warn{border-left:0}

@media (min-width:1100px){html.ui-spike .branch-summary.detail{grid-template-columns:repeat(3,minmax(0,1fr))}}
html.ui-spike .branch-detail-filter{position:relative;z-index:1;background:rgba(255,255,255,.92);border:1px solid var(--sk-line);border-radius:16px;padding:14px;box-shadow:var(--sk-shadow)}
html.ui-spike .branch-detail-filter label{color:var(--sk-muted)}
html.ui-spike .branch-detail-filter select,html.ui-spike .branch-detail-filter input{border:1px solid var(--mm-input);background:#fff;color:var(--sk-ink)}

/* Thẻ từng cơ sở */
html.ui-spike .branch-card-grid{gap:20px}
html.ui-spike .branch-card{border:0;border-radius:18px;padding:18px;box-shadow:var(--sk-shadow)}
html.ui-spike .branch-card:hover{transform:translateY(-3px);box-shadow:var(--sk-shadow-up);border-color:transparent}
html.ui-spike .branch-card-head b{color:var(--sk-ink);font-size:17px;font-weight:800}
html.ui-spike .branch-health{border:1px solid transparent}
html.ui-spike .branch-health.good{background:var(--sk-green-soft);color:var(--sk-green-ink);border-color:rgba(47,143,70,.35)}
html.ui-spike .branch-health.warn{background:var(--sk-orange-soft);color:var(--sk-orange-ink);border-color:rgba(229,131,11,.35)}
html.ui-spike .branch-health.bad{background:var(--sk-red-soft);color:var(--sk-red-ink);border-color:rgba(238,93,80,.35)}
html.ui-spike .branch-money{position:relative;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--sk-primary) 78%,#fff) 0%,var(--sk-primary) 55%,color-mix(in srgb,var(--sk-primary) 85%,#000) 100%);border:0;border-radius:16px;padding:16px 18px;
  box-shadow:0 14px 24px -16px var(--sk-primary),inset 0 1px 0 rgba(255,255,255,.25)}
html.ui-spike .branch-money span,html.ui-spike .branch-money em{position:relative;color:rgba(255,255,255,.9);font-style:normal}
html.ui-spike .branch-money b{position:relative;color:#fff;font-size:26px;font-weight:800}
html.ui-spike .branch-metrics{gap:10px}
html.ui-spike .branch-metrics div{--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink);background:var(--soft);border-radius:14px;padding:12px 8px}
html.ui-spike .branch-metrics div b{color:var(--ink);font-size:21px;font-weight:800}
html.ui-spike .branch-metrics div span{color:var(--ink);font-weight:600;opacity:.9}
html.ui-spike .branch-metrics div:nth-child(1){--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink)}
html.ui-spike .branch-metrics div:nth-child(2){--soft:var(--sk-green-soft);--ink:var(--sk-green-ink)}
html.ui-spike .branch-metrics div:nth-child(3){--soft:var(--sk-purple-soft);--ink:var(--sk-purple-ink)}
html.ui-spike .branch-metrics div:nth-child(4){--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .branch-metrics div:nth-child(5){--soft:var(--sk-cyan-soft);--ink:var(--sk-cyan-ink)}
html.ui-spike .branch-metrics div:nth-child(6){--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .branch-flow>div{border-radius:14px;background:var(--sk-blue-soft)}
html.ui-spike .branch-flow .btn{white-space:nowrap}
html.ui-spike .branch-health b{margin-right:2px}
html.ui-spike .branch-flow>div:nth-child(2){background:var(--sk-green-soft)}
html.ui-spike .branch-flow>div span{color:var(--sk-muted);font-weight:600}
html.ui-spike .branch-flow>div:nth-child(1) b{color:var(--sk-blue-ink)}
html.ui-spike .branch-flow>div:nth-child(2) b{color:var(--sk-green-ink)}

/* 2) Khối màu nhạt: Công nợ */
html.ui-spike .col-chips{gap:8px}
html.ui-spike .col-chip{background:var(--sk-card);border:1px solid var(--sk-line);border-radius:999px;padding:6px 12px;font-weight:600;color:var(--sk-muted)}
html.ui-spike .col-chip b{color:var(--sk-ink)}
html.ui-spike .col-chip:hover{border-color:var(--sk-primary);color:var(--sk-primary)}
html.ui-spike .col-chip.active{background:var(--sk-primary);border-color:var(--sk-primary);color:#fff}
html.ui-spike .col-chip.active b{color:#fff}
html.ui-spike .col-cards{gap:18px;margin-bottom:20px}
html.ui-spike .col-card{--c:var(--sk-blue);--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink);
  position:relative;overflow:hidden;background:var(--soft);border:0;border-radius:18px;padding:68px 18px 16px;min-height:150px;transition:transform .16s ease,box-shadow .16s ease}
html.ui-spike .col-card::before{content:'';position:absolute;left:18px;top:16px;width:40px;height:40px;border-radius:12px;background:#fff var(--ico) center/20px 20px no-repeat;box-shadow:0 6px 14px -8px var(--c)}
html.ui-spike .col-card span{color:var(--ink);font-weight:700;font-size:13px}
html.ui-spike .col-card b{color:var(--ink);font-size:30px;font-weight:800;letter-spacing:-.4px}
html.ui-spike .col-card em{color:var(--ink);opacity:.85;font-style:normal;font-weight:600}
html.ui-spike .col-card:hover{transform:translateY(-3px);box-shadow:0 16px 28px -18px var(--c)}
html.ui-spike .col-card.active{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 80%,#fff) 0%,var(--c) 52%,color-mix(in srgb,var(--c) 86%,#000) 100%);box-shadow:0 16px 28px -14px var(--c),inset 0 1px 0 rgba(255,255,255,.28)}
html.ui-spike .col-card.active span,html.ui-spike .col-card.active b,html.ui-spike .col-card.active em{color:#fff}
html.ui-spike .col-card{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230085db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16M11 15h1v3'/%3E%3C/svg%3E")}
html.ui-spike .col-card.warn{--c:var(--sk-orange);--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5830b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='7'/%3E%3Cpath d='M12 10v3l2 2M7 4 4 6.5M17 4l3 2.5'/%3E%3C/svg%3E")}
html.ui-spike .col-card.danger{--c:var(--sk-red);--soft:var(--sk-red-soft);--ink:var(--sk-red-ink);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee5d50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 19h18L12 4z'/%3E%3Cpath d='M12 10v4M12 17v.01'/%3E%3C/svg%3E")}
html.ui-spike .col-card.ok{--c:var(--sk-green);--soft:var(--sk-green-soft);--ink:var(--sk-green-ink);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}

/* Khối màu nhạt dùng chung: KPI / ca / nhân sự / thiết bị */
html.ui-spike .kpi-summary{gap:16px}
html.ui-spike .kpi-sum-card{--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink);background:var(--soft);border:0;border-left:0;border-radius:16px;box-shadow:none;padding:16px 18px}
html.ui-spike .kpi-sum-card:nth-child(6n+2){--soft:var(--sk-green-soft);--ink:var(--sk-green-ink)}
html.ui-spike .kpi-sum-card:nth-child(6n+3){--soft:var(--sk-purple-soft);--ink:var(--sk-purple-ink)}
html.ui-spike .kpi-sum-card:nth-child(6n+4){--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .kpi-sum-card:nth-child(6n+5){--soft:var(--sk-cyan-soft);--ink:var(--sk-cyan-ink)}
html.ui-spike .kpi-sum-card:nth-child(6n+6){--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .kpi-sum-card.warn{--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .kpi-sum-card span{color:var(--ink);font-weight:700}
html.ui-spike .kpi-sum-card b{color:var(--ink);font-weight:800}
html.ui-spike .kpi-sum-card i{top:14px;bottom:auto;right:14px;width:36px;height:36px;border-radius:11px;background:#fff;color:var(--ink);font-size:16px;display:flex;align-items:center;justify-content:center}
html.ui-spike .ic-kpi{--soft:var(--sk-green-soft);--ink:var(--sk-green-ink);background:var(--soft);border:0;border-radius:16px;box-shadow:none}
html.ui-spike .ic-kpi.danger{--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .ic-kpi.warn{--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .ic-kpi.info{--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink)}
html.ui-spike .ic-kpi *{color:var(--ink)}
html.ui-spike .kpi-mini:has(.km-n)>div{background:var(--sk-blue-soft);border-radius:10px}
html.ui-spike .kpi-mini:has(.km-n)>div:nth-child(2){background:var(--sk-green-soft)}
html.ui-spike .kpi-mini:has(.km-n)>div:nth-child(3){background:var(--sk-orange-soft)}
html.ui-spike .kpi{border:0;border-radius:16px;box-shadow:var(--sk-shadow)}
html.ui-spike .kpi.kpi-money,html.ui-spike .kpi.grad-1{background:var(--sk-blue)}
html.ui-spike .kpi.grad-2{background:var(--sk-green)}
html.ui-spike .kpi.grad-3{background:var(--sk-orange)}
html.ui-spike .kpi.grad-4{background:var(--sk-purple)}
html.ui-spike .kpi-icon{border-radius:13px}

/* Điện thoại */
@media (max-width:860px){
  html.ui-spike .main{padding:0 10px}
  html.ui-spike .sidebar{margin:0;top:0;height:100dvh;border-radius:0 18px 18px 0}
  html.ui-spike .topbar{margin-top:10px;top:10px;height:auto;min-height:62px;padding:10px 12px;border-radius:16px}
  html.ui-spike .tb-search{min-width:0;height:40px}
  html.ui-spike .content{padding:14px 0 10px}
  html.ui-spike .page-title{padding:12px 14px;min-height:0;font-size:16px;margin-bottom:14px}
  html.ui-spike .exec-card,html.ui-spike .branch-summary>div{min-height:0;padding:70px 16px 16px}
  html.ui-spike .col-cards{grid-template-columns:1fr 1fr;gap:12px}
  html.ui-spike .col-card{padding:62px 14px 14px;min-height:0}
  html.ui-spike .col-card b{font-size:24px}
}

/* ============ Khung xanh lá: menu trái, thanh trên, khung chào đầu trang (anh chọn 20/10/2026) ============
   Nền xanh lá theo màu chính, chữ trắng. Ô chọn / nút trong khung giữ đọc được. */
html.ui-spike{
  --sk-chrome:linear-gradient(150deg,color-mix(in srgb,var(--sk-primary) 90%,#fff) 0%,var(--sk-primary) 50%,color-mix(in srgb,var(--sk-primary) 85%,#000) 100%);
  --sk-chrome-v:linear-gradient(180deg,color-mix(in srgb,var(--sk-primary) 92%,#fff) 0%,var(--sk-primary) 50%,color-mix(in srgb,var(--sk-primary) 85%,#000) 100%);
  --sk-glass:rgba(255,255,255,.14);
  --sk-glass-line:rgba(255,255,255,.28);
}

/* Menu trái */
html.ui-spike .sidebar{background:var(--sk-chrome-v);color:#fff;box-shadow:0 12px 28px -14px color-mix(in srgb,var(--sk-primary) 70%,transparent)}
html.ui-spike .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}
html.ui-spike .sb-logo-img{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
html.ui-spike .sb-logo-tag{color:#fff}
html.ui-spike .sb-brand .toggle{color:#fff}
html.ui-spike .sb-brand .toggle:hover{background:var(--sk-glass);color:#fff}
html.ui-spike .sb-role-chip{background:var(--sk-glass)!important;color:#fff!important;border:1px solid var(--sk-glass-line)!important}
html.ui-spike .sb-menu::before{color:rgba(255,255,255,.72)}
html.ui-spike .sb-item,html.ui-spike .sb-item i:first-child{color:#fff}
html.ui-spike .sb-item:hover{background:var(--sk-glass);color:#fff}
html.ui-spike .sb-item:hover i:first-child{color:#fff}
html.ui-spike .sb-item.active{background:#fff;color:var(--sk-primary);box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
html.ui-spike .sb-item.active i:first-child{color:var(--sk-primary)}
html.ui-spike .sb-item.open{background:rgba(255,255,255,.08);color:#fff}
html.ui-spike .sb-item.open i:first-child{color:#fff}
html.ui-spike .sb-item > i.fa-chevron-right{color:rgba(255,255,255,.75)}
html.ui-spike .sb-subitem{color:rgba(255,255,255,.86)}
html.ui-spike .sb-subitem:hover{background:var(--sk-glass);color:#fff}
html.ui-spike .sb-subitem.active{background:#fff;color:var(--sk-primary)}
html.ui-spike .sb-badge{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
html.ui-spike .sb-foot{background:var(--sk-glass);color:rgba(255,255,255,.88)}
html.ui-spike .sb-foot a{color:#fff}
html.ui-spike .app.collapsed .sb-brand .toggle{background:var(--sk-glass);color:#fff}

/* Thanh trên */
html.ui-spike .topbar{background:var(--sk-chrome);color:#fff;box-shadow:0 12px 26px -14px color-mix(in srgb,var(--sk-primary) 70%,transparent)}
html.ui-spike .topbar .branch-pick{background:var(--sk-glass);border-color:var(--sk-glass-line);color:#fff}
html.ui-spike .topbar .branch-pick .fa-store{color:#fff}
html.ui-spike .topbar .branch-pick:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
html.ui-spike .tb-search{background:var(--sk-glass);border-color:var(--sk-glass-line)}
html.ui-spike .tb-search i,html.ui-spike .tb-search input{color:#fff}
html.ui-spike .tb-search input::placeholder{color:rgba(255,255,255,.75)}
html.ui-spike .tb-search:focus-within{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.15)}
html.ui-spike .tb-icon{color:#fff}
html.ui-spike .tb-icon:hover{background:var(--sk-glass);color:#fff}
html.ui-spike .tb-bubble{border-color:var(--sk-primary)}
html.ui-spike .tb-bad-debt{background:var(--sk-glass);color:#fff;border:1px solid var(--sk-glass-line)}
html.ui-spike .tb-user{color:#fff}
html.ui-spike .tb-user:hover{background:var(--sk-glass)}
html.ui-spike .tb-user .name div:last-child{opacity:.8}
html.ui-spike .tb-user .avatar{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
html.ui-spike .mobile-menu-btn{background:var(--sk-glass);color:#fff}
html.ui-spike .topbar .user-menu,html.ui-spike .topbar .alerts-drop{color:var(--sk-ink)}

/* Khung chào đầu trang */
html.ui-spike .dash-hero,html.ui-spike .branch-hero,html.ui-spike .branch-detail-hero,html.ui-spike .baddebt-hero,html.ui-spike .capital-hero,html.ui-spike .ic-hero,html.ui-spike .ic-hero.refined{
  background:var(--sk-chrome);color:#fff;box-shadow:0 16px 30px -16px color-mix(in srgb,var(--sk-primary) 75%,transparent)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) :is(h1,h2,h3,b,strong){color:#fff}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) p{color:rgba(255,255,255,.86)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) .dash-eyebrow{background:var(--sk-glass);color:#fff;border:1px solid var(--sk-glass-line)}
html.ui-spike .branch-hero-tags span{background:var(--sk-glass);border-color:var(--sk-glass-line);color:#fff}
html.ui-spike :is(.dash-filter-card,.branch-filter-card,.branch-detail-filter){background:rgba(255,255,255,.10);border:1px solid var(--sk-glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) label{color:rgba(255,255,255,.88)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) :is(select,input){
  background:var(--sk-glass)!important;border:1px solid var(--sk-glass-line)!important;color:#fff!important}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) :is(select,input):focus{background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.65)!important;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) select option{color:var(--sk-ink);background:#fff}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) input::-webkit-calendar-picker-indicator{filter:invert(1)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) .segmented{background:var(--sk-glass);border:1px solid var(--sk-glass-line)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) .segmented button{color:rgba(255,255,255,.85)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) .segmented button.active{background:#fff;color:var(--sk-primary)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) .btn-primary{background:#fff;border-color:#fff;color:var(--sk-primary);box-shadow:0 8px 16px -10px rgba(0,0,0,.45)}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) .btn-primary:hover{background:#eef6ef}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero) .btn-outline{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}

/* ============ Công nợ: dòng gọn (chỉ dựng khi bật Spike) ============ */
html.ui-spike .cx-row td{vertical-align:middle;padding:14px 10px}
html.ui-spike table:has(.cx-row) thead th{padding-left:10px;padding-right:10px}
html.ui-spike .cx-stt{color:var(--sk-muted);font-weight:600;width:44px}
html.ui-spike .cx-who{display:flex;align-items:center;gap:12px;min-width:190px}
html.ui-spike .cx-who b{display:block;font-size:14px;font-weight:700;color:var(--sk-ink);margin-bottom:2px}
html.ui-spike .cx-who a{color:var(--sk-muted)}
html.ui-spike .cx-who a:hover{color:var(--sk-primary)}
html.ui-spike .cx-who .col-sub i{font-size:10px;margin-right:2px}
html.ui-spike .cx-ava{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
html.ui-spike .cx-ava.blue{background:var(--sk-blue-soft);color:var(--sk-blue-ink)}
html.ui-spike .cx-ava.orange{background:var(--sk-orange-soft);color:var(--sk-orange-ink)}
html.ui-spike .cx-ava.red{background:var(--sk-red-soft);color:var(--sk-red-ink)}
html.ui-spike .cx-tag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:6px;background:var(--sk-grey-soft);color:var(--sk-grey-ink);font-size:10.5px;font-weight:700;vertical-align:1px}
html.ui-spike .cx-strong{font-weight:700;color:var(--sk-ink);white-space:nowrap}
html.ui-spike .cx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent;white-space:nowrap;margin-bottom:3px}
html.ui-spike .cx-chip i{font-size:11px}
html.ui-spike .cx-chip.blue{background:var(--sk-blue-soft);color:var(--sk-blue-ink);border-color:rgba(0,133,219,.3)}
html.ui-spike .cx-chip.orange{background:var(--sk-orange-soft);color:var(--sk-orange-ink);border-color:rgba(229,131,11,.32)}
html.ui-spike .cx-chip.red{background:var(--sk-red-soft);color:var(--sk-red-ink);border-color:rgba(238,93,80,.32)}
html.ui-spike .cx-amt{font-size:15px;font-weight:800;color:var(--sk-ink)}
html.ui-spike .cx-status{max-width:250px}
html.ui-spike .cx-status .badge{margin-bottom:4px}
html.ui-spike .cx-status .col-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
html.ui-spike .cx-status .col-sub i{font-size:10px;margin-right:3px}
html.ui-spike .cx-note{font-style:italic;color:var(--sk-ink)!important}
html.ui-spike .cx-by{font-size:11px!important;opacity:.8}
html.ui-spike .cx-th-acts{text-align:right}
html.ui-spike .cx-dev{display:flex;align-items:center;gap:6px;margin-top:4px}
html.ui-spike .cx-dev .col-sub{display:inline}
html.ui-spike .cx-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
html.ui-spike .cx-acts button{height:36px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
html.ui-spike .cx-pay{padding:0 14px;border-radius:999px;background:var(--sk-green);color:#fff;box-shadow:0 8px 16px -10px var(--sk-green)}
html.ui-spike .cx-pay:hover{background:var(--sk-green-ink)}
html.ui-spike .cx-upd{padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--sk-line)!important;color:var(--sk-ink)}
html.ui-spike .cx-upd:hover{border-color:var(--sk-primary)!important;color:var(--sk-primary);background:var(--sk-primary-soft)}
html.ui-spike .cx-caret{font-size:9px;opacity:.7}
html.ui-spike .cx-ico{width:36px;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--sk-line)!important;color:var(--sk-muted)}
html.ui-spike .cx-ico:hover{background:var(--sk-primary-soft);border-color:transparent!important;color:var(--sk-primary)}
html.ui-spike .cx-menu{position:fixed;z-index:3000;min-width:250px;max-width:300px;background:#fff;border:1px solid var(--sk-line);border-radius:14px;padding:6px;
  box-shadow:0 20px 44px -14px rgba(37,83,185,.38);font-family:var(--sk-font)}
html.ui-spike .cx-menu-head{padding:8px 10px 9px;margin-bottom:4px;border-bottom:1px solid var(--sk-line);font-size:12px;color:var(--sk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ui-spike .cx-menu-head b{color:var(--sk-ink)}
html.ui-spike .cx-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--sk-ink);text-align:left;cursor:pointer}
html.ui-spike .cx-menu button:hover{background:var(--sk-hover)}
html.ui-spike .cx-mi{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
html.ui-spike .cx-menu .ok .cx-mi{background:var(--sk-green-soft);color:var(--sk-green-ink)}
html.ui-spike .cx-menu .warn .cx-mi{background:var(--sk-orange-soft);color:var(--sk-orange-ink)}
html.ui-spike .cx-menu .info .cx-mi{background:var(--sk-blue-soft);color:var(--sk-blue-ink)}
html.ui-spike .cx-menu .danger .cx-mi{background:var(--sk-red-soft);color:var(--sk-red-ink)}
html.ui-spike .cx-cur{margin-left:auto;color:var(--sk-primary)}
@media (max-width:1380px){
  html.ui-spike .cx-upd .cx-lbl{display:none}
  html.ui-spike .cx-upd{padding:0 11px}
}

/* =====================================================================================
   BỘ THÀNH PHẦN DÙNG CHUNG v2 (anh yêu cầu 20/10/2026: học TailAdmin / Flux / Spike)
   Quy tắc: thẻ trắng viền mảnh; tiêu đề trang phẳng; thanh lọc 1 hàng; bảng tiêu đề nhạt,
   số căn phải, dòng thoáng; nút bo 10px (chính / viền xám / nhạt / biểu tượng); nhãn trạng thái
   nền nhạt không viền; phân trang ô vuông. Lớp sau ghi đè lớp trước.
   ===================================================================================== */
html.ui-spike{
  --sk-line:#e4e7ec; --sk-line-2:#eef0f3; --sk-input:#d0d5dd; --sk-th:#f9fafb;
  --sk-muted:#667085; --sk-ink-2:#344054;
  --sk-shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --sk-card-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.03);
  --border:var(--sk-line); --mm-input:var(--sk-input); --mm-head:var(--sk-th); --text-light:var(--sk-muted);
}

/* Tiêu đề trang: phẳng trên nền, chữ to, nút thao tác bên phải */
html.ui-spike .page-title{background:transparent;box-shadow:none;border-radius:0;padding:4px 0;min-height:48px;margin:0 0 18px;font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--sk-ink);gap:14px}
html.ui-spike .page-title>i:first-child{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--sk-primary);font-size:18px;box-shadow:var(--sk-card-shadow);border:1px solid var(--sk-line)}
html.ui-spike .mm-head{margin-bottom:18px}

/* Thẻ */
html.ui-spike .panel,html.ui-spike .mm-card,html.ui-spike .filters,html.ui-spike .notif-side,html.ui-spike .notif-tools,html.ui-spike .notif-item{
  background:#fff;border:1px solid var(--sk-line);border-radius:16px;box-shadow:var(--sk-card-shadow)}
html.ui-spike .panel-head{padding:16px 20px;border-bottom:1px solid var(--sk-line);min-height:60px}
html.ui-spike .panel-head h3{font-size:16px;font-weight:700}
html.ui-spike .panel-body{padding:16px 20px}
html.ui-spike .panel-note,html.ui-spike .col-note,html.ui-spike .mm-note{background:var(--sk-th);border:1px solid var(--sk-line);border-radius:12px;color:var(--sk-ink-2)}

/* Ô nhập + nhãn (mọi thanh lọc, form) */
html.ui-spike .field label,html.ui-spike .col-filters label,html.ui-spike .mm-filters label,html.ui-spike .px-field>span{font-size:12.5px;font-weight:600;color:var(--sk-ink-2);letter-spacing:0}
html.ui-spike .content :is(input[type=text],input[type=search],input[type=date],input[type=number],input[type=month],input[type=tel],input[type=email],input:not([type]),select,textarea){
  min-height:42px;border:1px solid var(--sk-input);border-radius:10px;background:#fff;color:var(--sk-ink);font-size:14px;padding:8px 12px;box-shadow:var(--sk-shadow-xs)}
html.ui-spike .content select{padding-right:32px}
html.ui-spike .content :is(input,select,textarea):focus{border-color:var(--sk-primary);box-shadow:0 0 0 4px var(--sk-primary-soft);outline:0}
html.ui-spike .content :is(input,textarea)::placeholder{color:#98a2b3}
/* ô tìm kiếm có kính lúp */
html.ui-spike .content input:is([placeholder^="Tìm"],[placeholder^="Tên, mã"],[placeholder^="Mã HĐ"],[placeholder*="tìm kiếm"]){
  padding-left:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center/17px no-repeat}
html.ui-spike .filters{padding:16px 20px;gap:14px;margin-bottom:18px}

/* Nút */
html.ui-spike .btn{border-radius:10px;min-height:40px;padding:0 16px;font-size:14px;font-weight:600;gap:8px;justify-content:center;box-shadow:var(--sk-shadow-xs)}
html.ui-spike .btn-sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:9px}
html.ui-spike .btn-primary{background:var(--sk-primary);border:1px solid var(--sk-primary);color:#fff;box-shadow:var(--sk-shadow-xs)}
html.ui-spike .btn-primary:hover{background:var(--sk-primary-ink);border-color:var(--sk-primary-ink)}
html.ui-spike .btn-outline{background:#fff;border:1px solid var(--sk-input);color:var(--sk-ink-2)}
html.ui-spike .btn-outline:hover{background:var(--sk-th);color:var(--sk-ink);border-color:#98a2b3}
html.ui-spike .btn-soft{background:var(--sk-primary-soft);border:1px solid transparent;color:var(--sk-primary);box-shadow:none}
html.ui-spike .btn-soft:hover{background:color-mix(in srgb,var(--sk-primary) 20%,#fff)}
html.ui-spike .btn-danger{background:var(--sk-red);border-color:var(--sk-red);color:#fff}
html.ui-spike .btn-warn{background:var(--sk-orange);border-color:var(--sk-orange);color:#fff}
html.ui-spike .btn:disabled{opacity:.5;cursor:not-allowed}
html.ui-spike .btn-icon{width:40px;padding:0}
html.ui-spike .btn-sm.btn-icon{width:34px}
html.ui-spike .icon-btn,html.ui-spike .row-actions a,html.ui-spike .row-actions button{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--sk-line);color:var(--sk-muted);font-size:13px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
html.ui-spike .icon-btn:hover,html.ui-spike .row-actions a:hover,html.ui-spike .row-actions button:hover{background:var(--sk-primary-soft);border-color:transparent;color:var(--sk-primary)}
html.ui-spike .icon-btn.danger,html.ui-spike .row-actions .del{color:var(--sk-red-ink)}
html.ui-spike .icon-btn.danger:hover,html.ui-spike .row-actions .del:hover{background:var(--sk-red-soft);color:var(--sk-red-ink)}
html.ui-spike .row-actions{gap:6px}
/* nút trên nền xanh (khung chào) giữ kiểu riêng */
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero,.notif-hero,.access-hero) .btn-outline{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero,.notif-hero,.access-hero) .btn-outline:hover{background:rgba(255,255,255,.22)}

/* Nhãn trạng thái */
html.ui-spike .badge,html.ui-spike .mm-state{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap}
html.ui-spike .badge::before,html.ui-spike .mm-state::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
html.ui-spike .badge-success,html.ui-spike .mm-state.ok{background:#eef6ef;color:#1f6e33}
html.ui-spike .badge-danger,html.ui-spike .mm-state.debt{background:#fef3f2;color:#b42318}
html.ui-spike .badge-warning,html.ui-spike .mm-state.late{background:#fffaeb;color:#b54708}
html.ui-spike .badge-info{background:#eff8ff;color:#175cd3}
html.ui-spike .badge-muted,html.ui-spike .mm-state.closed{background:#f2f4f7;color:#475467}

/* Bảng (mọi bảng: .tbl · .mm-tbl · .cash-tbl · .ic-table) */
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl){border-collapse:separate;border-spacing:0;font-size:14px;color:var(--sk-ink)}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) thead th{background:var(--sk-th);color:var(--sk-muted);font-size:12.5px;font-weight:600;letter-spacing:.1px;text-transform:none;padding:12px 16px;border-bottom:1px solid var(--sk-line);vertical-align:middle;white-space:nowrap}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) tbody td{padding:14px 16px;border-bottom:1px solid var(--sk-line-2);vertical-align:middle;background:transparent}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) tbody tr:last-child td{border-bottom:0}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) tbody tr:hover td{background:var(--sk-th)}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(.num,.col-money){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(.col-sub,.mm-sub,.sub-text,.mm-muted){display:block;font-size:12.5px;color:var(--sk-muted);font-weight:400;margin-top:2px}
html.ui-spike :is(.tbl,.mm-tbl) .code-link,html.ui-spike .mm-code{color:var(--sk-primary);font-weight:700;cursor:pointer}
html.ui-spike :is(.tbl,.mm-tbl) .code-link:hover,html.ui-spike .mm-code:hover{text-decoration:underline}
html.ui-spike .tbl-wrap{border-radius:0 0 16px 16px}
html.ui-spike .panel>.tbl-wrap:first-child{border-radius:16px}
html.ui-spike .empty-row td,html.ui-spike td.empty-row{color:var(--sk-muted);text-align:center;padding:36px 16px!important}

/* Phân trang */
html.ui-spike .pagination{border-top:1px solid var(--sk-line);padding:12px 20px;color:var(--sk-muted);font-size:13px}
html.ui-spike .pagination .pages{gap:6px}
html.ui-spike .pagination .pages a,html.ui-spike .mm-pages a{min-width:36px;height:36px;border-radius:9px;border:1px solid var(--sk-line);background:#fff;color:var(--sk-ink-2);font-weight:600;display:inline-flex;align-items:center;justify-content:center}
html.ui-spike .pagination .pages a:hover,html.ui-spike .mm-pages a:hover{background:var(--sk-th)}
html.ui-spike .pagination .pages a.active,html.ui-spike .mm-pages a.active{background:var(--sk-primary);border-color:var(--sk-primary);color:#fff}
html.ui-spike .mm-pager{padding:14px 20px;color:var(--sk-muted);font-size:13px}

/* Thẻ tab */
html.ui-spike .tabs,html.ui-spike .mm-tabs{border-bottom:1px solid var(--sk-line);gap:4px}
html.ui-spike .tabs .tab,html.ui-spike .mm-tabs a{color:var(--sk-muted);font-weight:600;font-size:14px;padding:10px 14px;border-bottom:2px solid transparent}
html.ui-spike .tabs .tab.active,html.ui-spike .mm-tabs a.active{color:var(--sk-primary);border-bottom-color:var(--sk-primary)}

/* Cửa sổ */
html.ui-spike .modal{border-radius:18px;box-shadow:0 24px 48px -12px rgba(16,24,40,.25)}
html.ui-spike .modal-head{background:#fff;padding:18px 22px;border-bottom:1px solid var(--sk-line)}
html.ui-spike .modal-head h3{font-size:18px;font-weight:700;color:var(--sk-ink)}
html.ui-spike .modal-foot{background:#fff;padding:14px 22px;border-top:1px solid var(--sk-line);gap:10px}

/* Trống */
html.ui-spike .empty{padding:48px 20px;color:var(--sk-muted);font-size:14px}
html.ui-spike .empty i{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--sk-th);border:1px solid var(--sk-line);color:#98a2b3;font-size:26px;display:flex;align-items:center;justify-content:center}

/* Menu nổi dùng chung (ATPPop) */
html.ui-spike .px-pop{position:fixed;z-index:3000;min-width:220px;max-width:280px;background:#fff;border:1px solid var(--sk-line);border-radius:14px;padding:6px;box-shadow:0 20px 44px -14px rgba(16,24,40,.28);font-family:var(--sk-font)}
html.ui-spike .px-pop-head{padding:8px 10px 9px;margin-bottom:4px;border-bottom:1px solid var(--sk-line);font-size:12px;color:var(--sk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ui-spike .px-pop-head b{color:var(--sk-ink)}
html.ui-spike .px-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;font-size:14px;font-weight:500;color:var(--sk-ink-2);text-align:left;cursor:pointer}
html.ui-spike .px-pop button i{width:18px;text-align:center;color:var(--sk-muted)}
html.ui-spike .px-pop button:hover{background:var(--sk-th);color:var(--sk-ink)}
html.ui-spike .px-pop button.danger,html.ui-spike .px-pop button.danger i{color:var(--sk-red-ink)}
html.ui-spike .px-pop button.danger:hover{background:var(--sk-red-soft)}
html.ui-spike .px-pop hr{border:0;border-top:1px solid var(--sk-line);margin:5px 4px}

/* ============ Cầm đồ / Trả góp (dựng khi bật Spike) ============ */
html.ui-spike .px-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
html.ui-spike .px-head .page-title{margin:0;align-items:center}
html.ui-spike .page-title .px-sub{display:block;font-size:13px;font-weight:500;color:var(--sk-muted);letter-spacing:0;margin-top:2px}
html.ui-spike .px-actions{display:flex;gap:8px;flex-wrap:wrap}
html.ui-spike .px-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:18px}
html.ui-spike .px-stat{--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink);display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--sk-line);border-radius:16px;padding:16px 18px;box-shadow:var(--sk-card-shadow);transition:transform .15s,box-shadow .15s,border-color .15s}
html.ui-spike .px-stat-ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--soft);color:var(--ink)}
html.ui-spike .px-stat>div>span{display:block;font-size:13px;font-weight:500;color:var(--sk-muted)}
html.ui-spike .px-stat b{display:block;margin-top:3px;font-size:clamp(19px,1.55vw,24px);font-weight:800;letter-spacing:-.3px;color:var(--sk-ink);white-space:nowrap}
html.ui-spike .px-stat em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--ink);margin-top:1px}
html.ui-spike .px-stat.green{--soft:var(--sk-green-soft);--ink:var(--sk-green-ink)}
html.ui-spike .px-stat.purple{--soft:var(--sk-purple-soft);--ink:var(--sk-purple-ink)}
html.ui-spike .px-stat.orange{--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .px-stat.red{--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .px-stat.red b{color:var(--sk-red-ink)}
html.ui-spike .px-stat.click{cursor:pointer}
html.ui-spike .px-stat.click:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ink) 40%,#fff);box-shadow:0 12px 24px -16px var(--ink)}
html.ui-spike .px-table-card{overflow:hidden}
html.ui-spike .px-toolbar{display:flex;align-items:flex-end;gap:12px;padding:16px 20px;border-bottom:1px solid var(--sk-line);flex-wrap:wrap}
html.ui-spike .px-toolbar .px-q{flex:1 1 280px;min-width:220px}
html.ui-spike .px-field{display:flex;flex-direction:column;gap:6px;min-width:150px}
html.ui-spike .px-adv{background:var(--sk-th)}
html.ui-spike .btn.on{background:var(--sk-primary-soft);border-color:transparent;color:var(--sk-primary)}
html.ui-spike .px-tbl .px-stt,html.ui-spike .px-tbl th:first-child{width:40px;color:var(--sk-muted)}
html.ui-spike .px-tbl :is(th,td){padding-left:11px;padding-right:11px}
html.ui-spike .px-tbl :is(th,td):first-child{padding-left:20px}
html.ui-spike .px-tbl :is(th,td):last-child{padding-right:20px}
html.ui-spike .px-strong{font-weight:600;color:var(--sk-ink)}
html.ui-spike .px-trunc{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;color:var(--sk-ink-2)}
html.ui-spike .px-pos{color:var(--sk-green-ink);font-weight:600;cursor:pointer}
html.ui-spike .px-pos:hover{text-decoration:underline}
html.ui-spike .px-neg{color:var(--sk-red-ink)}
html.ui-spike .px-dash{color:#98a2b3}
html.ui-spike .px-act{text-align:right;white-space:nowrap}
html.ui-spike .px-act .btn+.btn{margin-left:6px}
html.ui-spike .px-table-card .mm-pager{border-top:1px solid var(--sk-line)}
html.ui-spike .mm-pager b{color:var(--sk-ink)}
html.ui-spike .mm-pages{gap:6px}
html.ui-spike .mm-pages a.off{opacity:.4;pointer-events:none}
html.ui-spike .mm-pages a i{font-size:11px}
@media (max-width:1300px){html.ui-spike .px-act .btn-soft .px-lbl{display:none}html.ui-spike .px-act .btn-soft{width:34px;padding:0}}
@media (max-width:860px){
  html.ui-spike .px-toolbar{padding:12px}
  html.ui-spike .px-field{flex:1 1 45%;min-width:0}
  html.ui-spike .px-toolbar .px-q{flex:1 1 100%}
  html.ui-spike .px-stats{grid-template-columns:1fr 1fr;gap:10px}
  html.ui-spike .px-stat{padding:12px;gap:10px}
  html.ui-spike .px-stat-ic{width:38px;height:38px;font-size:15px}
  html.ui-spike .px-stat b{font-size:17px}
  html.ui-spike .px-table-card .mm-cards{padding:12px}
  html.ui-spike .mm-cardrow{border:1px solid var(--sk-line);box-shadow:var(--sk-card-shadow)}
}

/* ============ Trung tâm thông báo ============ */
html.ui-spike .notif-hero,html.ui-spike .access-hero{background:var(--sk-chrome);color:#fff;border:0;border-radius:18px;padding:24px 28px;margin-bottom:18px;box-shadow:0 16px 30px -16px color-mix(in srgb,var(--sk-primary) 75%,transparent)}
html.ui-spike .notif-hero h2,html.ui-spike .access-hero :is(h1,h2){color:#fff;font-size:24px;font-weight:800;letter-spacing:-.3px}
html.ui-spike .notif-hero p,html.ui-spike .access-hero p{color:rgba(255,255,255,.86)}
html.ui-spike :is(.notif-hero,.access-hero) .btn-primary{background:#fff;border-color:#fff;color:var(--sk-primary)}
html.ui-spike :is(.notif-hero,.access-hero) .btn-primary:hover{background:#eef6ef}
html.ui-spike .notif-summary{gap:16px;margin-bottom:18px}
html.ui-spike .notif-summary>div{--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink);background:var(--soft);border:0;border-left:0;border-radius:16px;padding:16px 18px;box-shadow:none}
html.ui-spike .notif-summary>div:nth-child(2){--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .notif-summary>div:nth-child(3){--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .notif-summary>div:nth-child(4){--soft:var(--sk-purple-soft);--ink:var(--sk-purple-ink)}
html.ui-spike .notif-summary>div:nth-child(5){--soft:var(--sk-green-soft);--ink:var(--sk-green-ink)}
html.ui-spike .notif-summary>div:nth-child(6){--soft:var(--sk-cyan-soft);--ink:var(--sk-cyan-ink)}
html.ui-spike .notif-summary span{color:var(--ink);font-size:13px;font-weight:700;margin-bottom:4px}
html.ui-spike .notif-summary b{color:var(--ink);font-size:28px;font-weight:800}
html.ui-spike .notif-layout{grid-template-columns:250px 1fr;gap:18px}
html.ui-spike .notif-side{padding:8px;top:104px}
html.ui-spike .notif-side button{padding:10px 12px;border-radius:10px;color:var(--sk-ink-2);font-size:14px;font-weight:500}
html.ui-spike .notif-side button:hover{background:var(--sk-th);color:var(--sk-ink)}
html.ui-spike .notif-side button.active{background:var(--sk-primary-soft);color:var(--sk-primary);font-weight:700}
html.ui-spike .notif-side b{min-width:26px;text-align:center;background:#f2f4f7;color:var(--sk-ink-2);border-radius:999px;padding:2px 8px;font-size:12px}
html.ui-spike .notif-side button.active b{background:var(--sk-primary);color:#fff}
html.ui-spike .notif-tools{padding:12px;gap:10px;margin-bottom:12px}
html.ui-spike .notif-tools input{flex:1}
html.ui-spike .notif-list{gap:10px}
html.ui-spike .notif-item{padding:16px 18px;border-left:1px solid var(--sk-line);gap:14px}
html.ui-spike .notif-item:hover{border-color:#c9ced6}
html.ui-spike .notif-item:not(.read){background:linear-gradient(90deg,var(--sk-primary-soft),#fff 26%)}
html.ui-spike .notif-item.read{opacity:1}
html.ui-spike .notif-item.read .notif-title b{color:var(--sk-ink-2);font-weight:600}
html.ui-spike .notif-ic{width:42px;height:42px;border-radius:12px;background:var(--sk-blue-soft);color:var(--sk-blue-ink)}
html.ui-spike .notif-item.danger .notif-ic{background:var(--sk-red-soft);color:var(--sk-red-ink)}
html.ui-spike .notif-item.warn .notif-ic{background:var(--sk-orange-soft);color:var(--sk-orange-ink)}
html.ui-spike .notif-title b{font-size:14.5px;color:var(--sk-ink)}
html.ui-spike .notif-type{background:#eff8ff;color:#175cd3;border-radius:999px;font-weight:600;padding:2px 9px}
html.ui-spike .notif-msg{color:var(--sk-ink-2);font-size:13.5px}
html.ui-spike .notif-meta{color:var(--sk-muted);font-size:12px}
html.ui-spike .notif-list>.empty{background:#fff;border:1px dashed var(--sk-input);border-radius:16px}

/* ============ Thu / chi ============ */
html.ui-spike .px-stat.cyan{--soft:var(--sk-cyan-soft);--ink:var(--sk-cyan-ink)}
html.ui-spike .cash-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){html.ui-spike .cash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
html.ui-spike .cash-stats .px-stat{flex-direction:row;align-items:center;padding:14px 16px}
html.ui-spike .cash-stats .px-stat b{font-size:20px}
html.ui-spike .cash-stats .px-stat-ic{width:40px;height:40px;font-size:16px}
html.ui-spike .cash-tbl th small{display:none}
html.ui-spike .cash-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));align-items:end;gap:12px 14px}
html.ui-spike .cash-filters label{font-size:12.5px;font-weight:600;color:var(--sk-ink-2);gap:6px}
html.ui-spike .cash-filters label:first-child{grid-column:span 2}
html.ui-spike .cash-filters :is(input,select){min-width:0;width:100%}
html.ui-spike .cash-filters>.btn{align-self:end}
html.ui-spike .cash-pos{color:var(--sk-green-ink)}
html.ui-spike .cash-neg{color:var(--sk-red-ink)}
html.ui-spike .cash-chan{border-radius:999px;padding:2px 9px;font-weight:600;font-size:12px}
html.ui-spike .cash-pager{border-top:1px solid var(--sk-line);padding:12px 20px;font-size:13px;color:var(--sk-muted)}
html.ui-spike .cash-pager select{min-height:34px!important;padding:4px 28px 4px 10px!important}

/* ============ Ô số còn lại (Nợ xấu, Nguồn vốn): khối nền nhạt, bỏ viền màu bên trái ============ */
html.ui-spike :is(.baddebt-card,.capital-summary>div){--soft:var(--sk-blue-soft);--ink:var(--sk-blue-ink);position:relative;overflow:hidden;background:var(--soft);border:0!important;border-radius:16px;box-shadow:none;padding:16px 18px}
html.ui-spike :is(.baddebt-card,.capital-summary>div)::before{display:none}
html.ui-spike .baddebt-card.danger{--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .baddebt-card.success{--soft:var(--sk-green-soft);--ink:var(--sk-green-ink)}
html.ui-spike .baddebt-card.warn{--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .baddebt-card:nth-child(6n+2):not(.danger):not(.success):not(.warn){--soft:var(--sk-purple-soft);--ink:var(--sk-purple-ink)}
html.ui-spike .baddebt-card:nth-child(6n+5):not(.danger):not(.success):not(.warn){--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .baddebt-card:nth-child(6n):not(.danger):not(.success):not(.warn){--soft:var(--sk-cyan-soft);--ink:var(--sk-cyan-ink)}
html.ui-spike .capital-summary>div:nth-child(6n+2){--soft:var(--sk-green-soft);--ink:var(--sk-green-ink)}
html.ui-spike .capital-summary>div:nth-child(6n+3){--soft:var(--sk-red-soft);--ink:var(--sk-red-ink)}
html.ui-spike .capital-summary>div:nth-child(6n+4){--soft:var(--sk-purple-soft);--ink:var(--sk-purple-ink)}
html.ui-spike .capital-summary>div:nth-child(6n+5){--soft:var(--sk-orange-soft);--ink:var(--sk-orange-ink)}
html.ui-spike .capital-summary>div:nth-child(6n){--soft:var(--sk-cyan-soft);--ink:var(--sk-cyan-ink)}
html.ui-spike :is(.baddebt-card,.capital-summary>div) span{color:var(--ink);font-weight:700;font-size:13px}
html.ui-spike :is(.baddebt-card,.capital-summary>div) b{color:var(--ink);font-weight:800}
html.ui-spike :is(.baddebt-card,.capital-summary>div) em{color:var(--ink);opacity:.85;font-style:normal}
html.ui-spike .baddebt-card i{position:absolute;top:14px;right:14px;bottom:auto;left:auto;width:36px;height:36px;border-radius:11px;background:#fff;color:var(--ink);opacity:1;font-size:15px;display:flex;align-items:center;justify-content:center}
html.ui-spike :is(.baddebt-hero,.capital-hero) .btn:not(.btn-primary):not(.btn-outline){color:#fff}

/* ============ Chống cắt thông tin trong bảng (anh báo 20/10/2026: cột Thao tác bị cắt) ============
   1) Ô gọn hơn: lề trái/phải 12px, ô đầu/cuối 20px. Tiêu đề cột được xuống dòng, số tiền thì không.
   2) Cột thao tác (ô cuối có nút) luôn dính mép phải khi bảng phải cuộn ngang, có bóng mờ phân cách.
   3) Nút trên dòng 32px, không xuống hàng. */
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td){padding-left:10px;padding-right:10px}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td):first-child{padding-left:18px}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td):last-child{padding-right:18px}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) thead th{white-space:normal;line-height:1.35}
html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) thead th:is(.num,.col-money){white-space:nowrap}
html.ui-spike table:has(tbody td:last-child :is(button,.btn,.row-actions,.mm-icons,.cx-acts,.cash-actions)) :is(th,td):last-child{
  position:sticky;right:0;z-index:2;background:#fff;box-shadow:-10px 0 14px -12px rgba(16,24,40,.35)}
html.ui-spike table:has(tbody td:last-child :is(button,.btn,.row-actions,.mm-icons,.cx-acts,.cash-actions)) thead th:last-child{background:var(--sk-th);z-index:3}
html.ui-spike table:has(tbody td:last-child :is(button,.btn,.row-actions,.mm-icons,.cx-acts,.cash-actions)) tbody tr:hover td:last-child{background:var(--sk-th)}
html.ui-spike .row-actions{flex-wrap:nowrap;gap:4px}
html.ui-spike .row-actions :is(a,button),html.ui-spike .icon-btn{width:32px;height:32px;flex-shrink:0}
html.ui-spike .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
html.ui-spike .row-actions .btn{width:auto;padding:0 10px;min-height:32px;height:32px}
html.ui-spike .tbl .sub-text .code-link{font-weight:600}
html.ui-spike .tbl .sub-text .badge{margin-top:3px}
/* Bảng so sánh nhiều cột số (Tổng quát / Chi tiết cửa hàng, bảng công): chữ 13px, ô hẹp hơn */
html.ui-spike :is(.branch-table-panel,.branch-detail-grid,.payroll-panel) .tbl{font-size:13px}
html.ui-spike :is(.branch-table-panel,.branch-detail-grid) .tbl :is(th,td){padding-left:8px;padding-right:8px}
/* Công nợ: cột khách hẹp hơn để vừa 1440px */
html.ui-spike .cx-who{min-width:165px}
html.ui-spike .cx-status{max-width:215px}
html.ui-spike .cx-status .col-sub{max-width:215px}
/* Bảng nhiều cột tự co: ≥ 12 cột chữ 13px, ≥ 15 cột chữ 12,5px; ô hẹp hơn */
html.ui-spike table:is(.tbl,.mm-tbl,.cash-tbl):has(thead tr:first-child > th:nth-child(12)){font-size:13px}
html.ui-spike table:is(.tbl,.mm-tbl,.cash-tbl):has(thead tr:first-child > th:nth-child(12)) :is(th,td){padding-left:8px;padding-right:8px}
html.ui-spike table:is(.tbl,.mm-tbl,.cash-tbl):has(thead tr:first-child > th:nth-child(15)){font-size:12.5px}
html.ui-spike table:is(.tbl,.mm-tbl,.cash-tbl):has(thead tr:first-child > th:nth-child(15)) :is(th,td){padding-left:6px;padding-right:6px}
html.ui-spike table:is(.tbl,.mm-tbl,.cash-tbl):has(thead tr:first-child > th:nth-child(12)) :is(th,td):first-child{padding-left:16px}
html.ui-spike table:is(.tbl,.mm-tbl,.cash-tbl):has(thead tr:first-child > th:nth-child(12)) :is(th,td):last-child{padding-right:16px}
html.ui-spike .cx-ava{width:36px;height:36px;font-size:14px}
html.ui-spike .cx-who{gap:10px}
html.ui-spike .cx-stt{width:34px}
/* Màn hẹp: nút trên dòng chỉ còn biểu tượng (vẫn có chữ khi rê chuột) */
@media (max-width:1400px){
  html.ui-spike .cx-upd .cx-lbl{display:none}
  html.ui-spike .cx-upd{padding:0 11px}
}
@media (max-width:1320px){
  html.ui-spike .cx-pay .cx-lbl{display:none}
  html.ui-spike .cx-pay{padding:0 12px}
  html.ui-spike .row-actions .btn{font-size:0;gap:0;width:32px;padding:0}
  html.ui-spike .row-actions .btn i{font-size:13px}
}
/* Màn ≤ 1400px (laptop 1366): bảng chữ 13px, ô hẹp; nút trên dòng chỉ còn biểu tượng; cột tài sản hẹp hơn */
@media (max-width:1400px){
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl){font-size:13px}
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td){padding-left:8px;padding-right:8px}
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td):first-child{padding-left:14px}
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td):last-child{padding-right:14px}
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) thead th{font-size:12px}
  html.ui-spike .px-act .btn-soft .px-lbl,html.ui-spike .cx-pay .cx-lbl{display:none}
  html.ui-spike .px-act .btn-soft{width:34px;padding:0}
  html.ui-spike .cx-pay{padding:0 12px}
  html.ui-spike .px-trunc{max-width:120px}
  html.ui-spike .cx-who{min-width:150px}
  html.ui-spike .cx-status,html.ui-spike .cx-status .col-sub{max-width:190px}
  html.ui-spike .row-actions .btn{font-size:0;gap:0;width:32px;padding:0}
  html.ui-spike .row-actions .btn i{font-size:13px}
}
/* Màn ≤ 1366px: menu trái hẹp hơn, lề nhỏ hơn để nhường chỗ cho bảng */
@media (min-width:861px) and (max-width:1366px){
  html.ui-spike .sidebar{width:232px;margin:12px 0 12px 12px;top:12px;height:calc(100vh - 24px)}
  html.ui-spike .sb-item{padding:10px 12px 10px 20px;gap:12px;font-size:14px}
  html.ui-spike .sb-subitem{padding-left:52px}
  html.ui-spike .sb-subitem::before{left:30px}
  html.ui-spike .main{padding:0 12px 0 14px}
  html.ui-spike .topbar{margin-top:12px;top:12px}
  html.ui-spike .tb-search{min-width:220px}
}
@media (min-width:861px) and (max-width:1300px){
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl){font-size:12.5px}
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td){padding-left:7px;padding-right:7px}
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td):first-child{padding-left:12px}
  html.ui-spike :is(.tbl,.mm-tbl,.cash-tbl) :is(th,td):last-child{padding-right:12px}
  html.ui-spike .px-trunc{max-width:100px}
  html.ui-spike .tbl td .badge{white-space:normal;text-align:left}
}
/* Không rút gọn "…" tên tài sản: cho xuống dòng để luôn đọc đủ */
html.ui-spike .px-trunc{display:inline-block;max-width:150px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;overflow-wrap:anywhere}
@media (max-width:1400px){html.ui-spike .px-trunc{max-width:118px}}
@media (min-width:861px) and (max-width:1300px){html.ui-spike .px-trunc{max-width:96px}}
/* Cửa sổ thao tác (Đóng lãi / Tất toán / Chi tiết): bảng lịch kỳ gọn, cột phải hẹp hơn ở màn nhỏ */
html.ui-spike .modal :is(.mm-tbl,.mm-table,.tbl){font-size:12.5px}
html.ui-spike .modal :is(.mm-tbl,.mm-table,.tbl) :is(th,td){padding:10px 6px}
html.ui-spike .modal :is(.mm-tbl,.mm-table,.tbl) :is(th,td):first-child{padding-left:12px}
html.ui-spike .modal :is(.mm-tbl,.mm-table,.tbl) :is(th,td):last-child{padding-right:12px}
@media (max-width:1400px){html.ui-spike .mm-win{grid-template-columns:minmax(0,1fr) 290px}}
@media (max-width:1100px){html.ui-spike .mm-win{grid-template-columns:1fr}}
/* Công nợ: cụm nút gọn hơn để vừa 1440px */
html.ui-spike .cx-acts{gap:4px}
html.ui-spike .cx-acts button{height:34px;font-size:12.5px}
html.ui-spike .cx-pay{padding:0 11px}
html.ui-spike .cx-upd{padding:0 10px}
html.ui-spike .cx-ico{width:34px}

/* ============ Chống cắt trên điện thoại ============ */
/* bảng nằm thẳng trong panel-body (Đối soát NH, bảng quỹ) cũng được cuộn ngang thay vì bị cắt */
html.ui-spike .panel-body:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
html.ui-spike .panel-body > table{min-width:100%}
@media (max-width:860px){
  /* khung bảng không lòi ra mép (cũ: margin âm 10px bị thẻ cắt mất) */
  html.ui-spike .tbl-wrap{margin:0;padding:0 0 6px}
  /* ô số Thiết bị: 2 cột */
  html.ui-spike .ic-kpi-grid,html.ui-spike .ic-kpi-grid.refined{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.ui-spike .ic-tools input,html.ui-spike #mdmSearch{min-width:0!important;width:100%}
  html.ui-spike .ic-tools{flex-wrap:wrap}
  html.ui-spike .mdm-filter-row > *{flex:1 1 140px;min-width:0;max-width:100%}
  html.ui-spike .mdm-filter-row select{width:100%}
  /* ô tổng Thu chi / Cầm đồ: biểu tượng trên, số nhỏ lại cho vừa */
  html.ui-spike .cash-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html.ui-spike .cash-stats .px-stat{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  html.ui-spike .cash-stats .px-stat b{font-size:15.5px}
  html.ui-spike .px-stat b{white-space:normal;overflow-wrap:anywhere}
}

/* ============ Ô tổng v3 (anh chê ô trắng nhiều khoảng trống): khối màu nổi gọn ============
   Hàng trên: ô biểu tượng + nhãn; hàng dưới: số to. Nền một màu đậm nhạt, bóng màu, chữ trắng. */
html.ui-spike .px-stat{--c:var(--sk-blue);
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:10px;
  padding:16px 18px;border:0;border-radius:16px;color:#fff;min-height:0;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 86%,#000) 100%);
  box-shadow:0 14px 24px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.08)}
html.ui-spike .px-stat>div{display:contents}
html.ui-spike .px-stat-ic{grid-column:1;grid-row:1;width:34px;height:34px;border-radius:10px;font-size:14px;background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
html.ui-spike .px-stat>div>span{grid-column:2;grid-row:1;color:rgba(255,255,255,.92);font-size:13px;font-weight:600;line-height:1.3}
html.ui-spike .px-stat b,html.ui-spike .px-stat.red b{grid-column:1 / -1;grid-row:2;margin:0;color:#fff;font-size:clamp(19px,1.6vw,24px);font-weight:800;letter-spacing:-.3px;white-space:nowrap}
html.ui-spike .px-stat em{grid-column:1 / -1;grid-row:3;justify-self:start;margin:-2px 0 0;font-style:normal;font-size:11.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.2);border-radius:999px;padding:2px 9px}
html.ui-spike .px-stat.blue{--c:var(--sk-blue)}
html.ui-spike .px-stat.green{--c:var(--sk-green)}
html.ui-spike .px-stat.purple{--c:var(--sk-purple)}
html.ui-spike .px-stat.orange{--c:var(--sk-orange)}
html.ui-spike .px-stat.red{--c:var(--sk-red)}
html.ui-spike .px-stat.cyan{--c:var(--sk-cyan)}
html.ui-spike .px-stat.click:hover{transform:translateY(-2px);box-shadow:0 20px 30px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.25)}
html.ui-spike .cash-stats .px-stat{padding:14px 16px;display:grid}
html.ui-spike .cash-stats .px-stat b{font-size:20px}
@media (max-width:860px){
  html.ui-spike .px-stats,html.ui-spike .cash-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html.ui-spike .px-stat,html.ui-spike .cash-stats .px-stat{padding:12px;display:grid}
  html.ui-spike .px-stat b,html.ui-spike .cash-stats .px-stat b{font-size:16px;white-space:normal;overflow-wrap:anywhere}
}
/* nhãn ô lọc trong khung xanh: chữ trắng (đè luật nhãn chung) */
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero,.notif-hero,.access-hero) :is(label,.field label,.field>label){color:rgba(255,255,255,.9)}
/* cột Thao tác dính phải: vạch mảnh thay cho bóng đậm */
html.ui-spike table:has(tbody td:last-child :is(button,.btn,.row-actions,.mm-icons,.cx-acts,.cash-actions)) :is(th,td):last-child{box-shadow:inset 1px 0 0 var(--sk-line-2)}

/* ============ Mọi ô số còn lại → khối màu nổi gọn (cùng kiểu ô tổng Cầm đồ) ============
   Cần xử lý / Giải ngân (.apv-stat), KPI / ca / nhân sự (.kpi-sum-card), Vận hành nhân sự, Quản trị truy cập,
   Thông báo, Nguồn vốn, Nợ xấu. Hàng trên: biểu tượng + nhãn; hàng dưới: số; dòng phụ dạng viên. */
html.ui-spike :is(.apv-stats,.kpi-summary,.notif-summary,.capital-summary,.baddebt-summary,.people-ops-kpis,.access-kpis){gap:16px}
html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi){
  --c:var(--sk-blue);position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:auto;align-items:center;align-content:start;column-gap:10px;row-gap:8px;
  min-height:0;padding:16px 18px;border:0!important;border-radius:16px;color:#fff;text-align:left;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 86%,#000) 100%);
  box-shadow:0 14px 24px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.08);
  transition:transform .15s ease,box-shadow .15s ease}
html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi)::before,
html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi)::after{display:none}
html.ui-spike .apv-stat>div{display:contents}
/* biểu tượng */
html.ui-spike :is(.apv-stat,.kpi-sum-card,.baddebt-card,.people-ops-kpis>article,.access-kpi) i{
  position:static!important;grid-column:1;grid-row:1;width:34px;height:34px;border-radius:10px;margin:0;opacity:1;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff!important;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
/* nhãn */
html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi) span{
  grid-column:2;grid-row:1;display:block;margin:0;color:rgba(255,255,255,.92)!important;font-size:13px;font-weight:600;line-height:1.3}
html.ui-spike :is(.notif-summary>div,.capital-summary>div) span{grid-column:1 / -1}
/* số */
html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi) b{
  grid-column:1 / -1;grid-row:2;display:block;margin:0;color:#fff!important;font-size:clamp(20px,1.6vw,26px);font-weight:700;letter-spacing:-.3px;line-height:1.15;white-space:nowrap}
/* dòng phụ */
html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi) :is(em,small){
  grid-column:1 / -1;grid-row:3;justify-self:start;display:inline-block;margin:-2px 0 0;font-style:normal;font-size:11.5px;font-weight:600;
  color:#fff!important;opacity:1;background:rgba(255,255,255,.2);border-radius:999px;padding:2px 9px}
html.ui-spike :is(.apv-stat,.notif-summary>div,.baddebt-card):hover{transform:translateY(-2px)}
html.ui-spike .apv-stat{cursor:pointer;font:inherit}
/* Cần xử lý / Giải ngân: chờ duyệt cam · chờ tạo lệnh xanh dương · chờ xác nhận tím · đã giải ngân xanh lá */
html.ui-spike .apv-stat:nth-child(1){--c:var(--sk-orange)}
html.ui-spike .apv-stat:nth-child(2){--c:var(--sk-blue)}
html.ui-spike .apv-stat:nth-child(3){--c:var(--sk-purple)}
html.ui-spike .apv-stat:nth-child(4){--c:var(--sk-green)}
html.ui-spike .apv-stat.empty{opacity:.88}
html.ui-spike .apv-stat.empty b{color:#fff!important}
html.ui-spike .apv-stat.mine:not(.empty){box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c),0 14px 24px -14px var(--c)}
html.ui-spike .apv-stat.mine:not(.empty) em{background:#fff;color:var(--c)!important}
/* KPI / ca / nhân sự: xoay vòng 6 màu */
html.ui-spike .kpi-sum-card:nth-child(6n+1){--c:var(--sk-blue)}
html.ui-spike .kpi-sum-card:nth-child(6n+2){--c:var(--sk-green)}
html.ui-spike .kpi-sum-card:nth-child(6n+3){--c:var(--sk-purple)}
html.ui-spike .kpi-sum-card:nth-child(6n+4){--c:var(--sk-orange)}
html.ui-spike .kpi-sum-card:nth-child(6n+5){--c:var(--sk-cyan)}
html.ui-spike .kpi-sum-card:nth-child(6n+6){--c:var(--sk-red)}
html.ui-spike .kpi-sum-card.warn{--c:var(--sk-orange)}
/* Thông báo */
html.ui-spike .notif-summary>div:nth-child(1){--c:var(--sk-blue)}
html.ui-spike .notif-summary>div:nth-child(2){--c:var(--sk-red)}
html.ui-spike .notif-summary>div:nth-child(3){--c:var(--sk-orange)}
html.ui-spike .notif-summary>div:nth-child(4){--c:var(--sk-purple)}
html.ui-spike .notif-summary>div:nth-child(5){--c:var(--sk-green)}
html.ui-spike .notif-summary>div:nth-child(6){--c:var(--sk-cyan)}
/* Nguồn vốn */
html.ui-spike .capital-summary>div:nth-child(6n+1){--c:var(--sk-blue)}
html.ui-spike .capital-summary>div:nth-child(6n+2){--c:var(--sk-green)}
html.ui-spike .capital-summary>div:nth-child(6n+3){--c:var(--sk-red)}
html.ui-spike .capital-summary>div:nth-child(6n+4){--c:var(--sk-purple)}
html.ui-spike .capital-summary>div:nth-child(6n+5){--c:var(--sk-orange)}
html.ui-spike .capital-summary>div:nth-child(6n){--c:var(--sk-cyan)}
/* Nợ xấu */
html.ui-spike .baddebt-card{--c:var(--sk-purple)}
html.ui-spike .baddebt-card.danger{--c:var(--sk-red)}
html.ui-spike .baddebt-card.success{--c:var(--sk-green)}
html.ui-spike .baddebt-card.warn{--c:var(--sk-orange)}
html.ui-spike .baddebt-card:nth-child(6n){--c:var(--sk-cyan)}
/* Vận hành nhân sự, Quản trị truy cập */
html.ui-spike :is(.people-ops-kpis>article,.access-kpi).green{--c:var(--sk-green)}
html.ui-spike :is(.people-ops-kpis>article,.access-kpi).blue{--c:var(--sk-blue)}
html.ui-spike :is(.people-ops-kpis>article,.access-kpi).amber{--c:var(--sk-orange)}
html.ui-spike :is(.people-ops-kpis>article,.access-kpi).red{--c:var(--sk-red)}
/* Thống kê thu / chi: ô .kpi màu đặc, ô theo loại nền nhạt */
html.ui-spike .kpi{--c:var(--sk-blue);border:0;border-radius:16px;color:#fff;padding:16px 18px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 86%,#000) 100%);
  box-shadow:0 14px 24px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.25)}
html.ui-spike .kpi.grad-1,html.ui-spike .kpi.kpi-money{--c:var(--sk-blue)}
html.ui-spike .kpi.grad-2{--c:var(--sk-green)}
html.ui-spike .kpi.grad-3{--c:var(--sk-orange)}
html.ui-spike .kpi.grad-4{--c:var(--sk-purple)}
html.ui-spike .kpi :is(.kpi-label,.kpi-sub,.kpi-foot){color:rgba(255,255,255,.92)!important}
html.ui-spike .kpi .kpi-value{color:#fff!important;font-weight:700}
html.ui-spike .kpi .kpi-icon{background:rgba(255,255,255,.2)!important;color:#fff!important;width:44px;height:44px;border-radius:12px}
html.ui-spike .stat-row{background:transparent;box-shadow:none;padding:0;gap:12px}
html.ui-spike .stat-cell{background:#fff;border:1px solid var(--sk-line);border-radius:14px;padding:14px;text-align:left}
html.ui-spike .stat-cell + .stat-cell{border-left:1px solid var(--sk-line)}
html.ui-spike .stat-cell .lbl{color:var(--sk-muted);text-transform:none;letter-spacing:0;font-size:12.5px}
html.ui-spike .stat-cell .val{color:var(--sk-ink);font-size:18px}
@media (max-width:860px){
  html.ui-spike :is(.apv-stats,.kpi-summary,.notif-summary,.capital-summary,.baddebt-summary,.people-ops-kpis,.access-kpis){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi){padding:12px}
  html.ui-spike :is(.apv-stat,.kpi-sum-card,.notif-summary>div,.capital-summary>div,.baddebt-card,.people-ops-kpis>article,.access-kpi) b{font-size:17px;white-space:normal;overflow-wrap:anywhere}
}

/* Bảng kiểu khác (.table ở Cần xử lý, .mm-table lịch sử gia hạn, .cash-funds bảng quỹ): cùng quy tắc bảng */
html.ui-spike :is(.table,.mm-table,.cash-funds){width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:var(--sk-ink)}
html.ui-spike :is(.table,.mm-table,.cash-funds) th{background:var(--sk-th);color:var(--sk-muted);font-size:12.5px;font-weight:600;padding:12px 10px;border-bottom:1px solid var(--sk-line);text-align:left}
html.ui-spike :is(.table,.mm-table,.cash-funds) td{padding:13px 10px;border-bottom:1px solid var(--sk-line-2);vertical-align:middle}
html.ui-spike .cash-funds :is(th,td):not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
html.ui-spike :is(.table,.mm-table,.cash-funds) tbody tr:hover td{background:var(--sk-th)}
html.ui-spike .table-wrap{overflow-x:auto}
/* Thống kê thu / chi: dòng tổng thành khối màu, ô theo loại thành khối màu xoay vòng */
html.ui-spike .tk-total{--c:var(--sk-green);text-align:left!important;margin-bottom:16px!important;padding:18px 22px;border-radius:16px;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 86%,#000) 100%);
  box-shadow:0 14px 24px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.25)}
html.ui-spike .tk-total.out{--c:var(--sk-red)}
html.ui-spike .tk-total>div:first-child{font-size:13px;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:.3px}
html.ui-spike .tk-total>div:last-child{font-size:30px!important;font-weight:700!important;color:#fff!important;margin-top:4px}
html.ui-spike .stat-cell{--c:var(--sk-blue);border:0!important;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 86%,#000) 100%);
  box-shadow:0 14px 24px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.25)}
html.ui-spike .stat-cell:nth-child(6n+2){--c:var(--sk-purple)}
html.ui-spike .stat-cell:nth-child(6n+3){--c:var(--sk-orange)}
html.ui-spike .stat-cell:nth-child(6n+4){--c:var(--sk-green)}
html.ui-spike .stat-cell:nth-child(6n+5){--c:var(--sk-cyan)}
html.ui-spike .stat-cell:nth-child(6n){--c:var(--sk-red)}
html.ui-spike .stat-cell .lbl{color:rgba(255,255,255,.92)!important;font-weight:600}
html.ui-spike .stat-cell .val{color:#fff!important;font-size:20px;font-weight:700}
html.ui-spike .stat-cell .icn{color:#fff}
/* KPI: 6 ô vừa một hàng */
html.ui-spike .kpi-summary{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* ============ Nợ xấu: khung lọc 1 hàng dưới tiêu đề, chữ gợi ý trắng mờ ============ */
html.ui-spike .baddebt-hero{grid-template-columns:1fr;gap:16px;padding:22px 26px}
html.ui-spike .baddebt-hero h1{font-size:26px;line-height:1.2;margin-bottom:6px}
html.ui-spike .baddebt-filter-card{display:grid;grid-template-columns:minmax(240px,2.2fr) repeat(4,minmax(120px,1fr)) auto;gap:12px;align-items:end;padding:14px 16px;border-radius:16px}
html.ui-spike .baddebt-filter-card .field{min-width:0;margin:0}
html.ui-spike .baddebt-filter-card :is(input,select){width:100%;min-width:0}
html.ui-spike .baddebt-filter-actions{grid-column:auto;display:flex;gap:8px;align-items:end;justify-content:flex-start;white-space:nowrap}
html.ui-spike .baddebt-filter-actions .btn:not(.btn-primary){background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.55);color:#fff}
/* chữ gợi ý trong ô nhập nền tối: trắng mờ (cũ: xám, khó đọc) */
html.ui-spike :is(.dash-hero,.branch-hero,.branch-detail-hero,.baddebt-hero,.capital-hero,.ic-hero,.notif-hero,.access-hero) :is(input,textarea)::placeholder{color:rgba(255,255,255,.72)!important;opacity:1}
/* Nợ xấu: 5 ô số vừa một hàng */
html.ui-spike .baddebt-summary{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media (max-width:1200px){html.ui-spike .baddebt-filter-card{grid-template-columns:repeat(3,minmax(0,1fr))}html.ui-spike .baddebt-filter-card .field:first-child{grid-column:1 / -1}}
@media (max-width:860px){html.ui-spike .baddebt-filter-card{grid-template-columns:1fr 1fr}html.ui-spike .baddebt-filter-actions{grid-column:1 / -1}}
@media (min-width:861px) and (max-width:1366px){html.ui-spike .tb-search{min-width:290px}}

/* ============ Cửa sổ khách hàng: 3 ô số (Tổng HĐ · Tổng vay · Đang vay) thành khối màu gọn ============ */
html.ui-spike .kpi-mini:has(.km-lbl){--c:var(--sk-blue);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 16px;border-radius:14px;color:#fff;text-align:left;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 86%,#000) 100%);
  box-shadow:0 12px 22px -16px var(--c),inset 0 1px 0 rgba(255,255,255,.25)}
html.ui-spike .form-grid>.kpi-mini:has(.km-lbl):nth-child(2){--c:var(--sk-green)}
html.ui-spike .form-grid>.kpi-mini:has(.km-lbl):nth-child(3){--c:var(--sk-purple)}
html.ui-spike .kpi-mini:has(.km-lbl)>div{background:none!important;padding:0;border-radius:0}
html.ui-spike .kpi-mini .km-lbl{font-size:13px;font-weight:600;color:rgba(255,255,255,.92)}
html.ui-spike .kpi-mini .km-val{font-size:22px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
html.ui-spike .cust-head{border-radius:16px;background:var(--sk-primary-soft);border:0}
html.ui-spike .cust-avatar{background:var(--sk-primary)}

/* ============ Menu tài khoản (góc phải trên) ============ */
html.ui-spike .user-menu{min-width:250px;padding:8px;border-radius:16px;border:1px solid var(--sk-line);box-shadow:0 20px 44px -14px rgba(16,24,40,.3)}
html.ui-spike .um-head{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
html.ui-spike .um-avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;box-shadow:0 0 0 3px var(--sk-primary-soft)}
html.ui-spike .um-head>div:last-child{min-width:0;line-height:1.35;color:var(--sk-ink)}
html.ui-spike .user-menu .sep{height:1px;background:var(--sk-line);margin:4px 2px}
html.ui-spike .user-menu a{gap:12px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--sk-ink-2)}
html.ui-spike .user-menu a i{width:18px;text-align:center;color:var(--sk-muted)}
html.ui-spike .user-menu a:hover{background:var(--sk-th);color:var(--sk-ink)}
html.ui-spike .user-menu a[style*="danger"],html.ui-spike .user-menu a[style*="danger"] i{color:var(--sk-red-ink)!important}
html.ui-spike .user-menu a[style*="danger"]:hover{background:var(--sk-red-soft)}

/* ============ Số đếm trên menu trái: viên đỏ gọn, không viền xám ============ */
html.ui-spike .sb-badge{box-shadow:none;background:#e5484d;color:#fff;min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}
html.ui-spike .sb-item.active .sb-badge{background:#e5484d;color:#fff}

/* ============ Cần xử lý: ô "Đang chờ bạn" giữ màu khối (đè luật cũ nền hồng nhạt) ============ */
html.ui-spike .apv-stat.mine:not(.empty){border:0!important;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 55%,color-mix(in srgb,var(--c) 86%,#000) 100%)}
html.ui-spike .apv-stat.mine:not(.empty) i{color:#fff!important}
html.ui-spike .apv-stat.mine:not(.empty)::after{content:'';display:block;position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:apvPulse 1.6s infinite}
@keyframes apvPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* địa chỉ trong bảng khách hàng */
html.ui-spike .cx-clamp2{display:block;min-width:170px;max-width:250px;line-height:1.4;color:var(--sk-ink-2)}  /* không cắt chữ: rộng vừa để địa chỉ thường gọn 2 dòng */
/* Dãy ô số không rơi xuống hàng ở laptop 1366px */
html.ui-spike .px-stats:not(.cash-stats){grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
html.ui-spike .exec-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* Thanh lọc chung (Khách hàng, danh sách HĐ…): ô tìm kiếm rộng gấp đôi, có kính lúp */
html.ui-spike .filters{grid-template-columns:minmax(240px,2fr) repeat(auto-fill,minmax(140px,1fr))}
@media (max-width:860px){html.ui-spike .filters{grid-template-columns:1fr 1fr}html.ui-spike .filters > .field:first-child{grid-column:1 / -1}}
html.ui-spike .content input:is([placeholder^="Tên"]){padding-left:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center/17px no-repeat}