/* =============================================================
   GIAO DIỆN GỌN — cả 4 bản: cnb + ba + saas + sự kiện (đi kèm assets/js/shell-cnb.js)
   -------------------------------------------------------------
   1) Khung NGANG: thanh tiêu đề xanh đậm · thẻ phân hệ nền pastel (thẻ đang
      chọn nền trắng, gạch màu) · hàng tab trang con dạng viên (dính đầu trang).
   2) Tiêu đề màn có Ô BIỂU TƯỢNG theo màu phân hệ; thẻ số liệu nền nhạt có
      biểu tượng; khung trắng bo mềm, vạch màu nhỏ thay đầu mục tô đặc
      (đổi 03/11/2026 theo mẫu "đơn giản mà hiện đại").
   3) NÉN khoảng cách toàn app: thẻ, bảng, ô nhập, nút, tab, hộp thoại.
   4) Đ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.
   ============================================================= */

body.cnb-h{--bg:#f3f6fb;--line:#e6ebf3;--shadow-card:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);background:var(--bg)}

/* ---------------- 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;background:var(--bg)}

/* Thanh tiêu đề xanh đậm */
/* Cùng một dải chuyển màu NGANG cho thanh tiêu đề + hàng thẻ phân hệ → liền một mảng */
#cnb-top,.cnb-mods{background:linear-gradient(100deg,#0a1d56 0%,#1237a3 55%,#1d4ed8 100%)}
#cnb-top{position:relative;z-index:30;display:flex;align-items:center;gap:16px;padding:10px 24px 8px;color:#e6eeff}
#cnb-top .ct-brand{flex:0 1 auto;min-width:0}
#cnb-top .brand{padding:0;border:0;gap:12px}
#cnb-top .brand-mark{width:42px;height:42px;border-radius:12px;font-size:15px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35)}
#cnb-top .brand-text strong{font-size:18px;color:#fff;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cnb-top .brand-text span{color:#c7d8ff;font-size:12.5px}
#cnb-top .ct-mid{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
#cnb-top .ct-right{flex:none;display:flex;align-items:center;gap:10px}
#cnb-top .period-picker{background:#fff;border-color:transparent;border-radius:12px;padding:5px 12px;box-shadow:0 2px 8px rgba(5,15,40,.18)}
#cnb-top .period-picker label{color:#1d4ed8;font-weight:800}
#cnb-top .period-picker input{font-size:13px;padding:2px 0}
#cnb-top .global-search{max-width:340px}
#cnb-top .global-search>input{padding:8px 14px 8px 36px;font-size:13px;border-color:transparent;border-radius:999px;box-shadow:0 2px 8px rgba(5,15,40,.18);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center}
#cnb-top .bell-btn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;font-size:16px}
#cnb-top .bell-btn:hover{background:rgba(255,255,255,.22)}
#cnb-top .whoami{margin:0}
#cnb-top .whoami-btn{width:auto;padding:4px 12px 4px 4px;gap:9px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);border-radius:14px}
#cnb-top .whoami-btn:hover{background:rgba(255,255,255,.2)}
#cnb-top .avatar{width:34px;height:34px;font-size:12px;background:linear-gradient(135deg,#f472b6,#a855f7)}
#cnb-top .whoami-text strong{font-size:13px;max-width:160px}
#cnb-top .whoami-text span{color:#c7d8ff;font-size:11px}
#cnb-top .whoami .caret{color:#c7d8ff}
body.la-khach #cnb-top .period-picker,body.la-khach #cnb-top .global-search{display:none}
#cnb-top .user-menu{top:calc(100% + 6px);bottom:auto;left:auto;right:0;min-width:190px}

/* Thẻ phân hệ: nền pastel theo màu phân hệ, tách rời; thẻ đang chọn nền trắng + gạch màu */
.cnb-mods{display:flex;align-items:flex-end;gap:6px;padding:6px 22px 0;overflow-x:auto;overflow-y:hidden;flex:none;scrollbar-width:none}
.cnb-mods::-webkit-scrollbar{display:none}
.mtab{--c:#1d4ed8;position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 18px 11px;
  border:0;border-radius:14px 14px 0 0;cursor:pointer;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;color:#1e2a4a;
  background:#eef2ff;background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transform:translateY(5px);transition:transform .15s,background .15s}
.mtab::after{content:"";display:none}
.mtab:hover{transform:translateY(2px);background:color-mix(in srgb,var(--c) 22%,#fff)}
.mtab .ic{font-size:16px;line-height:1}
.mtab .count{background:var(--c);color:#fff;font-size:10.5px;padding:0 7px;border-radius:99px;line-height:17px}
.mtab.on{z-index:3;transform:none;color:var(--c);background:#fff;padding-top:12px;padding-bottom:13px;box-shadow:0 -6px 18px rgba(5,15,40,.22)}
.mtab.on::after{display:block;position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 4px 4px;background:var(--c)}

/* Tab trang con: viên trắng có biểu tượng, viên đang chọn tô 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:8px;padding:10px 22px;
  background:#fff;border-bottom:2px solid color-mix(in srgb,var(--mc,#1d4ed8) 45%,#fff);box-shadow:0 6px 16px rgba(15,31,61,.05)}
.cnb-subs .sub-title{display:flex;align-items:center;gap:7px;flex:none;margin-right:6px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mc,#1d4ed8)}
.cnb-subs .sub-title .ic{font-size:17px;line-height:1}
.stab{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:11px;font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;
  color:#1e293b;border:1px solid #e2e8f0;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:background .12s,color .12s,border-color .12s,box-shadow .12s}
.stab .ic{font-size:14px;line-height:1}
.stab:hover{color:var(--mc);border-color:color-mix(in srgb,var(--mc) 45%,#fff);background:color-mix(in srgb,var(--mc) 6%,#fff)}
.stab.active{color:#fff;border-color:transparent;background:var(--mc);background:linear-gradient(135deg,color-mix(in srgb,var(--mc) 72%,#fff),var(--mc));
  box-shadow:0 6px 16px color-mix(in srgb,var(--mc) 38%,transparent)}
.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 2px 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mc);opacity:.85}
.ssep::before{content:"";width:1px;height:20px;background:var(--border-strong)}
.ssep.first::before{display:none}

/* Tiêu đề màn: ô biểu tượng (màu phân hệ) · tiêu đề lớn · mô tả ở dòng dưới · nút thao tác bên phải */
body.cnb-h #topbar{position:static;flex:none;align-items:center;gap:14px;padding:20px 24px 10px;background:transparent;border-bottom:0}
body.cnb-h .topbar-title{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;min-width:0;flex:1 1 auto}
body.cnb-h #cnb-pg-ic{grid-row:1/span 2;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:26px;line-height:1;
  background:linear-gradient(135deg,color-mix(in srgb,var(--mc,#1d4ed8) 18%,#fff),color-mix(in srgb,var(--mc,#1d4ed8) 6%,#fff));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc,#1d4ed8) 20%,#fff)}
body.cnb-h #topbar h1{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2;padding-left:0;margin:0}
body.cnb-h #topbar h1::before{display:none}
body.cnb-h #page-sub{margin:3px 0 0;padding:0;font-size:13.5px;line-height:1.4;min-width:0}
body.cnb-h #page-sub:empty{display:none}
body.cnb-h .topbar-right{flex:0 1 auto;align-items:center}
body.cnb-h #topbar-actions{gap:8px}
body.cnb-h #view{padding:8px 24px 48px}
body.cnb-h .notif-panel{top:62px}

/* ---------------- 2. THÀNH PHẦN: khung, thẻ số liệu, tab, nút ---------------- */
/* Khung trắng bo mềm; màu khung (card-cN) chỉ còn ở vạch nhỏ cạnh tiêu đề + ánh nền rất nhạt */
body.cnb-h .card{border-radius:16px;border-color:var(--line);box-shadow:var(--shadow-card)}
body.cnb-h .card[class*="card-c"]{background:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 5%,#fff) 0,#fff 150px)}
body.cnb-h .card-head{padding:12px 16px;gap:10px;background:transparent;border-bottom:1px solid #eef2f7}
body.cnb-h .card[class*="card-c"] .card-head{background:transparent;border-bottom:1px solid #eef2f7}
body.cnb-h .card-head h3{font-size:15px;font-weight:700;padding-left:13px}
body.cnb-h .card[class*="card-c"] .card-head h3{color:#0f172a}
body.cnb-h .card-head h3::before{top:2px;bottom:2px;width:4px;border-radius:4px}
body.cnb-h .card[class*="card-c"] .card-head h3::before{top:2px;bottom:2px;background:var(--cc)}
body.cnb-h .card-head .sub,body.cnb-h .card[class*="card-c"] .card-head .sub{font-size:11.5px;color:var(--muted)}
body.cnb-h .card[class*="card-c"] .card-head .btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
body.cnb-h .card[class*="card-c"] .card-head .btn.ghost:hover{background:color-mix(in srgb,var(--cc) 9%,#fff);color:var(--cc)}
body.cnb-h .card[class*="card-c"] .card-body:not(.flush){background:transparent}
body.cnb-h .card[class*="card-c"] .card-body.flush{background:#fff}
body.cnb-h .card-body{padding:14px 16px}
/* Bảng: tiêu đề xám nhạt, sọc rất nhạt (chừa hàng tô theo mức độ) */
body.cnb-h .card[class*="card-c"] table.data th{background:#f8fafc;color:#64748b;border-bottom:1px solid var(--line)}
body.cnb-h .card[class*="card-c"] table.data tbody tr:nth-child(even):not(.row-ok):not(.row-warn):not(.row-danger){background:#fbfcfe}
body.cnb-h .card[class*="card-c"] table.data tfoot td{background:#f8fafc;border-top:1px solid #e2e8f0}
body.cnb-h table.data tbody tr:hover{background:color-mix(in srgb,var(--mc,#1d4ed8) 4%,#fff)}

/* Thẻ số liệu: nền nhạt theo màu, chấm / biểu tượng màu, số to */
body.cnb-h .kpi{--kc:var(--brand);border-radius:16px;padding:14px 16px;border:1px solid var(--line);box-shadow:var(--shadow-card);
  background:linear-gradient(135deg,color-mix(in srgb,var(--kc) 10%,#fff) 0%,#fff 72%)}
body.cnb-h .kpi:nth-child(6n+1){--kc:#2563eb}
body.cnb-h .kpi:nth-child(6n+2){--kc:#7c3aed}
body.cnb-h .kpi:nth-child(6n+3){--kc:#059669}
body.cnb-h .kpi:nth-child(6n+4){--kc:#ea580c}
body.cnb-h .kpi:nth-child(6n+5){--kc:#db2777}
body.cnb-h .kpi:nth-child(6n){--kc:#0891b2}
body.cnb-h .kpi.k-ok{--kc:var(--ok)}
body.cnb-h .kpi.k-warn{--kc:#d97706}
body.cnb-h .kpi.k-danger{--kc:var(--danger)}
body.cnb-h .kpi::after{display:none}
body.cnb-h .kpi .k-label{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:#334155}
body.cnb-h .kpi .k-label::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--kc);box-shadow:0 0 0 4px color-mix(in srgb,var(--kc) 16%,transparent)}
body.cnb-h .kpi .k-label.has-ic::before{display:none}
body.cnb-h .kpi .k-ic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;line-height:1;background:color-mix(in srgb,var(--kc) 15%,#fff)}
body.cnb-h .kpi .k-value{font-size:24px;font-weight:800;margin-top:7px;letter-spacing:-.01em;color:#0f172a}
body.cnb-h .kpi.k-ok .k-value{color:var(--ok)}
body.cnb-h .kpi.k-warn .k-value{color:var(--warn)}
body.cnb-h .kpi.k-danger .k-value{color:var(--danger)}
body.cnb-h .kpi .k-sub{font-size:12px;margin-top:4px;color:var(--text-2)}
.tr-up{color:#059669;font-weight:700}
.tr-down{color:#dc2626;font-weight:700}
.tr-flat{color:#64748b;font-weight:700}

/* Tab trong màn: viên trắng chữ màu, tab đang xem tô đặc */
body.cnb-h .tabs{gap:8px;margin-bottom:12px;padding:1px 0}
body.cnb-h .tab{padding:7px 14px;font-size:13px;border-radius:11px;background:#fff;border-color:#e2e8f0;box-shadow:0 1px 2px rgba(15,23,42,.05)}
body.cnb-h .tab:hover{transform:none;border-color:color-mix(in srgb,var(--tc) 45%,#fff);background:color-mix(in srgb,var(--tc) 6%,#fff)}
body.cnb-h .tab.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 72%,#fff),var(--tc));
  box-shadow:0 6px 14px color-mix(in srgb,var(--tc) 32%,transparent)}

/* Nút & ô nhập bo mềm hơn */
body.cnb-h .btn{border-radius:10px}
body.cnb-h .btn.primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:#1d4ed8;box-shadow:0 4px 12px rgba(29,78,216,.28)}
body.cnb-h .btn.primary:hover{background:linear-gradient(135deg,#2563eb,#1e40af)}
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{border-radius:9px}
body.cnb-h .badge{border-radius:999px}
body.cnb-h .modal-panel{border-radius:16px}

/* ---------------- 3. NÉN KHOẢNG CÁCH ---------------- */
body.cnb-h{font-size:13.5px;line-height:1.45}
body.cnb-h .card-head .sub{font-size:11.5px}
body.cnb-h .grid{gap:12px}
body.cnb-h .stack{gap:12px}
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:6px 10px;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:6px 12px;font-size:12.5px;gap:5px}
body.cnb-h .btn.sm{padding:3px 9px;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:7px 10px;font-size:10.5px}
body.cnb-h table.data td{padding:7px 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-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;border-radius:12px}
body.cnb-h .alert-row{padding:8px 12px}
body.cnb-h .callout{padding:8px 12px;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}
/* Hộp thoại */
body.cnb-h .modal-head{padding:12px 18px}
body.cnb-h .modal-head h2{font-size:15.5px}
body.cnb-h .modal-body{padding:14px 18px}
body.cnb-h .modal-foot{padding:10px 18px}
/* 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}

/* ---------------- 4. Đ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:240px}
}
@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:8px;padding:8px 12px}
  #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-mark{width:34px;height:34px;border-radius:10px}
  #cnb-top .brand-text strong{font-size:15px}
  #cnb-top .brand-text span{display:none}
  #cnb-top .period-picker{flex:0 0 auto;padding:4px 9px}
  #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:7px 12px 7px 34px}
  #cnb-top .bell-btn{width:36px;height:36px}
  #cnb-top .whoami .caret{display:none}
  #cnb-top .whoami-btn{padding:2px}
  .cnb-mods{padding:4px 10px 0;gap:4px}
  .mtab{padding:8px 13px 9px;font-size:13px}
  .mtab.on{padding-top:9px;padding-bottom:10px}
  .cnb-subs{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cnb-subs::-webkit-scrollbar{display:none}
  .cnb-subs .sub-title,.ssep span{display:none}
  .stab{padding:7px 12px;font-size:13px}
  body.cnb-h #topbar{flex-wrap:wrap;gap:8px;padding:12px 10px 4px}
  body.cnb-h .topbar-title{flex:1 1 100%}
  body.cnb-h #cnb-pg-ic{width:42px;height:42px;border-radius:13px;font-size:20px}
  body.cnb-h #topbar h1{font-size:19px}
  body.cnb-h #page-sub{font-size:12.5px}
  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:12px}
  body.cnb-h .card-head{padding:10px 12px}
  /* 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:10px}
  /* 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{padding:12px}
  body.cnb-h .kpi .k-value{font-size:20px}
  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){
  .mtab .lb{max-width:110px;overflow:hidden;text-overflow:ellipsis}
  body.cnb-h #view{padding:4px 8px 24px}
  body.cnb-h .kpi{padding:10px}
  body.cnb-h .kpi .k-label{font-size:12px;gap:7px}
  body.cnb-h .kpi .k-ic{width:26px;height:26px;font-size:14px}
  body.cnb-h .kpi .k-value{font-size:18px}
}

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