/* =============================================================
   GIAO DIỆN GỌN — CHỈ bản cnb (đi kèm assets/js/shell-cnb.js)
   -------------------------------------------------------------
   1) Khung NGANG theo bản Trading: thanh tiêu đề xanh đậm · thẻ phân hệ
      xếp lớp nhiều màu · hàng tab trang con dính đầu trang khi cuộn.
   2) NÉN khoảng cách toàn app: thẻ, bảng, ô nhập, nút, tab, hộp thoại.
   3) Điện thoại: thanh trên 2 hàng, thẻ & tab cuộn ngang, nội dung sát lề.
   Mọi luật nằm dưới body.cnb-h → shell-cnb.js không chạy thì giao diện cũ giữ nguyên.
   ============================================================= */

/* ---------------- 1. KHUNG ---------------- */
body.cnb-h #app-shell{display:block;height:100vh;height:100dvh;overflow:hidden}
body.cnb-h #sidebar,body.cnb-h #sidebar-scrim,body.cnb-h .menu-btn{display:none!important}
body.cnb-h #main{height:100vh;height:100dvh;overflow-y:auto;display:flex;flex-direction:column}

/* Thanh tiêu đề xanh đậm */
#cnb-top{position:relative;z-index:30;display:flex;align-items:center;gap:12px;padding:6px 18px;color:#e6eeff;
  background:linear-gradient(100deg,#0b1f4d 0%,#123a8c 55%,#1d4ed8 100%)}
#cnb-top .ct-brand{flex:0 1 auto;min-width:0}
#cnb-top .brand{padding:0;border:0;gap:9px}
#cnb-top .brand-mark{width:30px;height:30px;border-radius:9px;font-size:12px;background:linear-gradient(135deg,#60a5fa,#1d4ed8);box-shadow:0 4px 12px rgba(0,0,0,.28)}
#cnb-top .brand-text strong{font-size:14px;color:#fff;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cnb-top .brand-text span{color:#bcd2ff;font-size:11px}
#cnb-top .ct-mid{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
#cnb-top .ct-right{flex:none;display:flex;align-items:center;gap:8px}
#cnb-top .period-picker{background:rgba(255,255,255,.95);border-color:transparent;padding:2px 8px 2px 10px}
#cnb-top .period-picker input{font-size:12.5px;padding:2px 0}
#cnb-top .global-search{max-width:300px}
#cnb-top .global-search>input{padding:5px 10px;font-size:12.5px;border-color:transparent;background:rgba(255,255,255,.95)}
#cnb-top .bell-btn{width:32px;height:32px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;font-size:14px}
#cnb-top .bell-btn:hover{background:rgba(255,255,255,.22)}
#cnb-top .whoami{margin:0}
#cnb-top .whoami-btn{width:auto;padding:3px 8px 3px 3px;gap:7px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);border-radius:999px}
#cnb-top .whoami-btn:hover{background:rgba(255,255,255,.2)}
#cnb-top .avatar{width:26px;height:26px;font-size:10.5px;background:linear-gradient(135deg,#60a5fa,#f97316)}
#cnb-top .whoami-text strong{font-size:12px;max-width:150px}
#cnb-top .whoami-text span{color:#bcd2ff;font-size:10px}
#cnb-top .whoami .caret{color:#bcd2ff}
#cnb-top .user-menu{top:calc(100% + 6px);bottom:auto;left:auto;right:0;min-width:190px}

/* Thẻ phân hệ: chồng mép như thẻ hồ sơ, thẻ đang chọn nổi lên nền trắng */
.cnb-mods{display:flex;align-items:flex-end;padding:3px 18px 0 22px;overflow-x:auto;overflow-y:hidden;flex:none;
  background:linear-gradient(100deg,#0b1f4d 0%,#123a8c 55%,#1d4ed8 100%);scrollbar-width:none}
.cnb-mods::-webkit-scrollbar{display:none}
.mtab{--c:#1d4ed8;position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;margin-left:-10px;padding:7px 17px 8px 15px;
  border:0;border-radius:12px 12px 0 0;cursor:pointer;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;color:#fff;
  background:var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 80%,#fff) 0%,var(--c) 100%);
  box-shadow:-4px -1px 9px rgba(5,15,40,.28),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(4px);transition:transform .15s,filter .15s}
.mtab:first-child{margin-left:0}
.mtab::after{content:"";position:absolute;left:12px;right:12px;top:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.mtab:hover{transform:translateY(1px);filter:brightness(1.06)}
.mtab .ic{font-size:13px;line-height:1}
.mtab .count{background:#fff;color:var(--c);font-size:10.5px;padding:0 6px;border-radius:99px;line-height:16px}
.mtab.on{z-index:3;transform:none;color:var(--c);background:var(--surface);padding-top:8px;padding-bottom:9px;
  box-shadow:-5px -2px 12px rgba(5,15,40,.3),5px -2px 12px rgba(5,15,40,.22)}
.mtab.on::after{left:0;right:0;top:0;height:3px;border-radius:12px 12px 0 0;background:var(--c)}
.mtab.on .count{background:var(--c);color:#fff}

/* Tab trang con: nối liền thẻ đang chọn, gạch đáy theo màu phân hệ, dính đầu khi cuộn */
.cnb-subs{position:sticky;top:0;z-index:25;flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:6px 18px;
  background:var(--surface);border-bottom:2px solid var(--mc,#1d4ed8);box-shadow:0 4px 12px rgba(15,31,61,.07)}
.cnb-subs .sub-title{display:flex;align-items:center;gap:6px;flex:none;margin-right:4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mc,#1d4ed8)}
.cnb-subs .sub-title i{width:9px;height:9px;border-radius:3px;background:var(--mc,#1d4ed8)}
.stab{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;
  color:var(--text-2);border:1px solid var(--border);background:var(--surface-2);transition:background .12s,color .12s,border-color .12s}
.stab .ic{font-size:12px;line-height:1}
.stab:hover{color:var(--mc);border-color:var(--mc);background:var(--brand-soft);background:color-mix(in srgb,var(--mc) 8%,#fff)}
.stab.active{color:#fff;border-color:transparent;background:var(--mc);box-shadow:0 3px 8px rgba(15,31,61,.18)}
.stab .count{background:#f97316;color:#fff;font-size:10.5px;padding:0 6px;border-radius:99px;line-height:16px}
.stab.active .count{background:#fff;color:var(--mc)}
.ssep{flex:none;display:inline-flex;align-items:center;gap:6px;margin:0 1px 0 4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mc);opacity:.85}
.ssep::before{content:"";width:1px;height:18px;background:var(--border-strong)}
.ssep.first::before{display:none}

/* Tiêu đề màn: một hàng gọn (tiêu đề · mô tả · nút thao tác) */
body.cnb-h #topbar{position:static;flex:none;align-items:center;gap:10px;padding:9px 18px 3px;background:transparent;border-bottom:0}
body.cnb-h .topbar-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto}
body.cnb-h #topbar h1{font-size:16.5px;padding-left:10px;white-space:nowrap}
body.cnb-h #topbar h1::before{width:3px;background:var(--mc,#1d4ed8)}
body.cnb-h #page-sub{margin:0;padding:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.cnb-h .topbar-right{flex:0 1 auto;align-items:center}
body.cnb-h #topbar-actions{gap:6px}
body.cnb-h #view{padding:6px 18px 40px}
body.cnb-h .notif-panel{top:50px}

/* ---------------- 2. NÉN KHOẢNG CÁCH ---------------- */
body.cnb-h{font-size:13.5px;line-height:1.45}
body.cnb-h .card-head{padding:8px 12px;gap:10px}
body.cnb-h .card-head h3{font-size:13.5px;padding-left:10px}
body.cnb-h .card-head .sub{font-size:11px}
body.cnb-h .card-body{padding:12px}
body.cnb-h .grid{gap:10px}
body.cnb-h .stack{gap:10px}
body.cnb-h .row{gap:8px}
body.cnb-h .toolbar{gap:6px;margin-bottom:10px}
body.cnb-h .field{margin-bottom:8px;gap:3px}
body.cnb-h .field > label{font-size:11.5px}
body.cnb-h .field .hint{font-size:10.5px}
body.cnb-h input[type=text],body.cnb-h input[type=number],body.cnb-h input[type=email],body.cnb-h input[type=date],
body.cnb-h input[type=month],body.cnb-h input[type=password],body.cnb-h input[type=tel],body.cnb-h input[type=time],body.cnb-h select,body.cnb-h textarea{padding:5px 9px;font-size:13px}
body.cnb-h textarea{min-height:52px}
body.cnb-h fieldset{padding:9px 11px 1px;margin-bottom:10px}
body.cnb-h .btn{padding:5px 11px;font-size:12.5px;gap:5px}
body.cnb-h .btn.sm{padding:3px 8px;font-size:11.5px}
body.cnb-h .icon-btn{width:26px;height:26px}
body.cnb-h table.data{font-size:12.5px}
body.cnb-h table.data th{padding:6px 10px;font-size:10.5px}
body.cnb-h table.data td{padding:6px 10px}
body.cnb-h table.data tfoot td{padding:7px 10px}
body.cnb-h .badge{padding:1px 8px;font-size:10.5px}
body.cnb-h .kpi{padding:10px 12px 10px}
body.cnb-h .kpi .k-label{font-size:10.5px}
body.cnb-h .kpi .k-value{font-size:20px;margin-top:3px}
body.cnb-h .kpi .k-sub{font-size:11px;margin-top:2px}
body.cnb-h .kpi-mini{padding:9px 11px}
body.cnb-h .kpi-mini .km-v{font-size:20px}
body.cnb-h .att-kpis{gap:8px;margin-bottom:10px}
body.cnb-h .alert{padding:8px 11px;font-size:12.5px;gap:8px}
body.cnb-h .alert-row{padding:8px 12px}
body.cnb-h .callout{padding:7px 11px;font-size:12px}
body.cnb-h h4.sec{margin:12px 0 6px;font-size:11.5px}
body.cnb-h .empty-state{padding:24px 16px}
body.cnb-h .empty-state .big{font-size:24px;margin-bottom:4px}
body.cnb-h .kv{gap:3px 12px;font-size:12.5px}
/* Tab trong màn: viên nhỏ, gọn một hàng */
body.cnb-h .tabs{gap:5px;margin-bottom:10px;padding:1px 0}
body.cnb-h .tab{padding:5px 11px;font-size:12.5px}
body.cnb-h .tab:hover{transform:none}
body.cnb-h .tab.active{box-shadow:0 3px 8px rgba(15,23,42,.16)}
/* Hộp thoại */
body.cnb-h .modal-head{padding:10px 16px}
body.cnb-h .modal-head h2{font-size:15px}
body.cnb-h .modal-body{padding:14px 16px}
body.cnb-h .modal-foot{padding:9px 16px}
/* Pipeline & lịch công gọn hơn */
body.cnb-h .pl-col{flex-basis:240px;min-width:240px}
body.cnb-h .pl-col-body{padding:8px;gap:7px}
body.cnb-h .pl-card{padding:8px 9px}
body.cnb-h .cong-cell{min-height:58px}

/* ---------------- 3. ĐIỆN THOẠI & MÁY TÍNH BẢNG ---------------- */
@media (max-width:1100px){
  #cnb-top .whoami-text{display:none}
  #cnb-top .global-search{max-width:220px}
}
@media (max-width:820px){
  /* Thanh trên 2 hàng: [thương hiệu · chuông · người dùng] / [kỳ · tìm kiếm] */
  #cnb-top{flex-wrap:wrap;gap:6px 8px;padding:6px 10px 7px}
  #cnb-top .ct-brand{flex:1 1 0;order:1}
  #cnb-top .ct-right{order:2}
  #cnb-top .ct-mid{order:3;flex:1 1 100%;justify-content:stretch}
  #cnb-top .brand-text span{display:none}
  #cnb-top .period-picker{flex:0 0 auto;padding:3px 8px}
  #cnb-top .period-picker label{display:none}
  #cnb-top .period-picker input{font-size:14px;max-width:142px}
  #cnb-top .global-search{flex:1 1 auto;max-width:none;min-width:0}
  #cnb-top .global-search>input{font-size:16px;padding:6px 10px}
  #cnb-top .whoami .caret{display:none}
  #cnb-top .whoami-btn{padding:2px}
  .cnb-mods{padding:2px 10px 0 14px}
  .mtab{padding:6px 13px 7px 11px;font-size:12.5px;margin-left:-8px}
  .mtab.on{padding-top:7px;padding-bottom:8px}
  .cnb-subs{flex-wrap:nowrap;overflow-x:auto;padding:5px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cnb-subs::-webkit-scrollbar{display:none}
  .cnb-subs .sub-title,.ssep span{display:none}
  .stab{padding:6px 11px;font-size:13px}
  body.cnb-h #topbar{flex-wrap:wrap;gap:6px;padding:8px 10px 2px}
  body.cnb-h .topbar-title{flex:1 1 100%}
  body.cnb-h #topbar h1{font-size:15.5px}
  body.cnb-h #page-sub{display:none}
  body.cnb-h .topbar-right{flex:1 1 100%;flex-basis:100%}
  body.cnb-h #topbar-actions{justify-content:flex-start}
  body.cnb-h #topbar-actions:empty{display:none}
  body.cnb-h #view{padding:4px 10px 28px}
  /* Ô nhập vẫn 16px để iOS không tự phóng, nhưng đệm gọn hơn */
  body.cnb-h input[type=text],body.cnb-h input[type=number],body.cnb-h input[type=email],body.cnb-h input[type=date],
  body.cnb-h input[type=month],body.cnb-h input[type=password],body.cnb-h input[type=tel],body.cnb-h select,body.cnb-h textarea{font-size:16px;padding:7px 10px}
  body.cnb-h .field{margin-bottom:9px}
  body.cnb-h .btn{padding:7px 12px;font-size:13px}
  body.cnb-h .btn.sm{padding:5px 10px;font-size:12px}
  body.cnb-h #topbar-actions .btn{min-height:34px}
  body.cnb-h .card-body{padding:10px}
  body.cnb-h .card-head{padding:8px 10px}
  /* Tab trong màn: một hàng cuộn ngang thay vì nhiều hàng chiếm chỗ */
  body.cnb-h .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body.cnb-h .tabs::-webkit-scrollbar{display:none}
  body.cnb-h .tab{flex:none}
  body.cnb-h .grid{gap:8px}
  /* Thẻ số liệu 2 cột trên điện thoại thay vì 1 cột dài */
  body.cnb-h .grid-4,body.cnb-h .att-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.cnb-h .kpi .k-value{font-size:19px}
  body.cnb-h table.data th,body.cnb-h table.data td{padding:6px 8px}
  body.cnb-h .modal-root{padding:6px}
  body.cnb-h .modal-body{padding:12px}
  body.cnb-h .notif-panel{top:96px;right:8px;width:calc(100vw - 16px)}
}
@media (max-width:430px){
  #cnb-top .brand-mark{width:28px;height:28px}
  #cnb-top .brand-text strong{font-size:13.5px}
  .mtab .lb{max-width:110px;overflow:hidden;text-overflow:ellipsis}
  body.cnb-h #view{padding:4px 8px 24px}
  body.cnb-h .kpi{padding:9px 10px}
  body.cnb-h .kpi .k-value{font-size:17px}
}

/* ---------------- In ấn ---------------- */
@media print{
  #cnb-top,.cnb-mods,.cnb-subs{display:none!important}
  body.cnb-h #app-shell,body.cnb-h #main{height:auto;overflow:visible;display:block}
}