:root {
      --msx-green: #1B7A3D;
      --msx-green-light: #22924A;
      --msx-green-dark: #145E2F;
      --msx-gold: #E8A500;
      --msx-gold-light: #FFD54F;
      --msx-gold-dark: #C68A00;
      --g: #1B7A3D;
      --gl: #E8F5E9;
      --r: #E53935;
      --rl: #FFEBEE;
      --o: #FB8C00;
      --b: #1E88E5;
      --p: #7E57C2;
      --y: #F9A825;
      --gr: #78909C;
      --bg: #F5F7FA;
      --card: #fff;
      --bd: #E0E6ED;
      --hdr-dark: #0D2818;
      --hdr-mid: #13381F;
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
      --shadow-lg: 0 12px 40px rgba(0, 0, 0, .12);
      --radius: 12px;
      --radius-sm: 8px;
      --radius-lg: 20px;
      /* Token riêng của module Chấm công (js/tabs/attendance.js) — trước chỉ định nghĩa trong scope .mx, nên mọi
         modal/mask append thẳng vào document.body (nằm NGOÀI .mx) bị var() undefined → nút/chữ vô hình (nền
         trong suốt + chữ trắng). Đưa lên :root để luôn có giá trị bất kể DOM nesting ở đâu. Không trùng tên với
         token nào khác trong app (đã kiểm tra toàn bộ codebase trước khi thêm). */
      --g8: #067346;
      --g9: #045a38;
      --sec: #55A845;
      --gold: #FDB71A;
      --cream: #F8F0E8;
      --g1: #e9f7ef;
      --b2: #E4E7EC;
      --gr5: #667085;
      --gr6: #475467;
      --red: #D92D20;
      --warn: #F79009;
      --info: #1570EF;
      --dis: #98A2B3
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: #1e293b;
      font-size: 13px;
      -webkit-font-smoothing: antialiased
    }

    /* ═══════ LOGIN ═══════ */
    #login-screen {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--hdr-dark);
      position: relative;
      overflow: hidden;
      font-family: 'Inter', system-ui, sans-serif
    }

    .login-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #0D2818 0%, #13381F 30%, #1B7A3D 70%, #145E2F 100%);
      z-index: 0
    }

    .login-bg::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 165, 0, .12) 0%, transparent 70%);
      top: -200px;
      right: -150px;
      animation: orbit 20s linear infinite
    }

    .login-bg::after {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(27, 122, 61, .2) 0%, transparent 70%);
      bottom: -100px;
      left: -100px;
      animation: orbit 15s linear infinite reverse
    }

    @keyframes orbit {
      from {
        transform: rotate(0deg) translateX(30px) rotate(0deg)
      }

      to {
        transform: rotate(360deg) translateX(30px) rotate(-360deg)
      }
    }

    .login-particles {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden
    }

    .login-particles span {
      position: absolute;
      width: 3px;
      height: 3px;
      background: rgba(232, 165, 0, .3);
      border-radius: 50%;
      animation: rise linear infinite
    }

    .login-particles span:nth-child(1) {
      left: 10%;
      animation-duration: 12s;
      animation-delay: 0s
    }

    .login-particles span:nth-child(2) {
      left: 25%;
      animation-duration: 9s;
      animation-delay: 2s;
      width: 2px;
      height: 2px
    }

    .login-particles span:nth-child(3) {
      left: 40%;
      animation-duration: 15s;
      animation-delay: 1s
    }

    .login-particles span:nth-child(4) {
      left: 55%;
      animation-duration: 11s;
      animation-delay: 3s;
      width: 4px;
      height: 4px;
      background: rgba(27, 122, 61, .3)
    }

    .login-particles span:nth-child(5) {
      left: 70%;
      animation-duration: 13s;
      animation-delay: 0.5s
    }

    .login-particles span:nth-child(6) {
      left: 85%;
      animation-duration: 10s;
      animation-delay: 4s;
      width: 2px;
      height: 2px
    }

    .login-particles span:nth-child(7) {
      left: 50%;
      animation-duration: 14s;
      animation-delay: 2.5s;
      background: rgba(255, 255, 255, .15)
    }

    .login-particles span:nth-child(8) {
      left: 15%;
      animation-duration: 16s;
      animation-delay: 1.5s;
      background: rgba(255, 255, 255, .1)
    }

    @keyframes rise {
      0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0)
      }

      10% {
        opacity: 1
      }

      90% {
        opacity: 1
      }

      100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(40px)
      }
    }

    .lbox {
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(24px) saturate(1.5);
      border-radius: var(--radius-lg);
      padding: 44px 40px;
      width: 440px;
      max-width: 94vw;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .08);
      position: relative;
      z-index: 2;
      animation: cardIn .7s cubic-bezier(.22, 1, .36, 1)
    }

    @keyframes cardIn {
      from {
        opacity: 0;
        transform: translateY(40px) scale(.97)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .l-logo {
      text-align: center;
      margin-bottom: 30px
    }

    .l-logo-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px
    }

    .msx-logo-text {
      display: flex;
      align-items: baseline;
      gap: 0
    }

    .msx-logo-text .msx-m,
    .msx-logo-text .msx-s {
      font-size: 36px;
      font-weight: 900;
      color: var(--msx-green);
      line-height: 1
    }

    .msx-logo-text .msx-x {
      font-size: 36px;
      font-weight: 900;
      color: var(--msx-gold);
      line-height: 1
    }

    .msx-logo-text .msx-group {
      font-size: 14px;
      font-weight: 800;
      color: var(--msx-green-dark);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-left: 6px;
      align-self: center
    }

    .l-logo-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--msx-green), var(--msx-green-light));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(27, 122, 61, .25);
      flex-shrink: 0;
      overflow: hidden
    }

    .l-logo-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .l-logo h2 {
      font-size: 15px;
      font-weight: 600;
      color: var(--gr);
      letter-spacing: .3px
    }

    .l-logo .tagline {
      font-size: 11px;
      color: #a0aec0;
      margin-top: 3px;
      font-style: italic;
      letter-spacing: .5px
    }

    .l-roles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 24px
    }

    .rc {
      border: 2px solid var(--bd);
      border-radius: var(--radius);
      padding: 16px 12px;
      cursor: pointer;
      transition: all .3s cubic-bezier(.22, 1, .36, 1);
      text-align: center;
      position: relative;
      overflow: hidden;
      background: #fff
    }

    .rc::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--msx-green), var(--msx-gold));
      transition: all .3s;
      transform: translateX(-50%)
    }

    .rc:hover {
      border-color: var(--msx-green);
      transform: translateY(-3px);
      box-shadow: var(--shadow-md)
    }

    .rc:hover::after,
    .rc.sel::after {
      width: 100%;
      left: 0;
      transform: none
    }

    .rc.sel {
      border-color: var(--msx-green);
      background: linear-gradient(135deg, rgba(27, 122, 61, .04), rgba(232, 165, 0, .03));
      box-shadow: 0 4px 20px rgba(27, 122, 61, .12)
    }

    .rc .ri {
      font-size: 28px;
      margin-bottom: 6px;
      display: block
    }

    .rc .rn {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b
    }

    .rc .rd {
      font-size: 10px;
      color: var(--gr);
      margin-top: 3px;
      letter-spacing: .3px
    }

    .fg {
      margin-bottom: 18px
    }

    .fg label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 7px;
      letter-spacing: .3px
    }

    .fg .input-wrap {
      position: relative;
      display: flex;
      align-items: center
    }

    .fg input {
      width: 100%;
      padding: 13px 16px;
      border: 2px solid var(--bd);
      border-radius: var(--radius);
      font-size: 14px;
      font-family: 'Inter', system-ui, sans-serif;
      transition: all .2s;
      background: #FAFBFC
    }

    .fg input:focus {
      outline: none;
      border-color: var(--msx-green);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(27, 122, 61, .08)
    }

    .fg input::placeholder {
      color: #cbd5e1
    }

    .fg .pass-toggle {
      position: absolute;
      right: 14px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      color: #94a3b8;
      transition: color .2s;
      padding: 4px;
      line-height: 1
    }

    .fg .pass-toggle:hover {
      color: var(--msx-green)
    }

    .remember-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px
    }

    .remember-row label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--gr);
      cursor: pointer;
      user-select: none;
      font-weight: 500
    }

    .remember-row input[type=checkbox] {
      width: 17px;
      height: 17px;
      accent-color: var(--msx-green);
      cursor: pointer
    }

    .btn-lg {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, var(--msx-green), var(--msx-green-light));
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: all .3s;
      font-family: 'Inter', system-ui, sans-serif;
      letter-spacing: .5px;
      box-shadow: 0 4px 16px rgba(27, 122, 61, .25);
      position: relative;
      overflow: hidden
    }

    .btn-lg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent, rgba(232, 165, 0, .15));
      opacity: 0;
      transition: opacity .3s
    }

    .btn-lg:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(27, 122, 61, .3)
    }

    .btn-lg:hover::before {
      opacity: 1
    }

    .btn-lg:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(27, 122, 61, .2)
    }

    .lerr {
      font-size: 12px;
      text-align: center;
      margin-top: 14px;
      min-height: 20px;
      border-radius: var(--radius-sm);
      padding: 0;
      transition: all .3s
    }

    .lerr:not(:empty) {
      padding: 11px 16px;
      background: #FFF5F5;
      border: 1px solid #FEB2B2;
      color: #C53030
    }

    .lerr.demo:not(:empty) {
      background: #FFFFF0;
      border: 1px solid #F6E05E;
      color: #975A16
    }

    .l-footer {
      margin-top: 24px;
      text-align: center;
      font-size: 11px;
      color: #a0aec0;
      letter-spacing: .5px
    }

    /* ═══════ HEADER ═══════ */
    #main-app {
      display: none
    }

    .hdr {
      background: linear-gradient(135deg, var(--hdr-dark), var(--hdr-mid));
      color: #fff;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      min-height: 56px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .15)
    }

    .hdr-brand-wrap {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .hdr-logo {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--msx-green), var(--msx-green-light));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(27, 122, 61, .3);
      flex-shrink: 0;
      overflow: hidden
    }

    .hdr-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .hdr-brand {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -.3px
    }

    .hdr-brand .hdr-x {
      color: var(--msx-gold)
    }

    .hdr-sub {
      font-size: 10px;
      opacity: .6;
      margin-top: 1px;
      letter-spacing: .5px;
      font-weight: 400
    }

    .hdr-mid {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap
    }

    .sync-badge {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: var(--radius-lg);
      padding: 5px 14px;
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(8px);
      font-weight: 500
    }

    .sdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4ade80;
      flex-shrink: 0;
      box-shadow: 0 0 8px rgba(74, 222, 128, .5)
    }

    .sdot.spin {
      animation: pulse .8s infinite
    }

    /* Đèn LIVE đỏ khi luồng đồng bộ nghẽn/lỗi */
    .sdot.err {
      background: #ef4444;
      box-shadow: 0 0 8px rgba(239, 68, 68, .65);
      animation: pulse 1s infinite
    }

    #sstat.ok {
      color: #86efac;
      font-weight: 700
    }

    #sstat.bad {
      color: #fca5a5;
      font-weight: 700
    }

    .sync-badge .err-txt {
      color: #fca5a5;
      font-weight: 600;
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    .hdr-right {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .ubadge {
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--radius-lg);
      padding: 5px 14px;
      font-size: 12px;
      font-weight: 600;
      backdrop-filter: blur(8px)
    }

    .rbadge {
      font-size: 9px;
      background: var(--msx-gold);
      color: var(--hdr-dark);
      padding: 2px 7px;
      border-radius: 10px;
      margin-left: 5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .bsm {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      color: #fff;
      padding: 6px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all .2s;
      backdrop-filter: blur(8px)
    }

    .bsm:hover {
      background: rgba(255, 255, 255, .18);
      border-color: rgba(255, 255, 255, .3);
      transform: translateY(-1px)
    }

    .bsm:disabled {
      opacity: .4;
      cursor: default;
      transform: none
    }

    /* ═══════ ALERT BANNER ═══════ */
    .alert-bar {
      display: none;
      background: linear-gradient(135deg, #FFF5F5, #FED7D7);
      border-bottom: 2px solid #E53935;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .alert-bar.hidden {
      display: none
    }

    .alert-icon {
      font-size: 20px;
      flex-shrink: 0
    }

    .alert-text {
      flex: 1;
      font-size: 12px;
      color: #742A2A;
      font-weight: 600
    }

    .alert-close {
      background: none;
      border: none;
      color: #742A2A;
      cursor: pointer;
      font-size: 18px;
      font-weight: 700;
      transition: transform .2s
    }

    .alert-close:hover {
      transform: scale(1.2)
    }

    .dup-bar {
      background: linear-gradient(135deg, #fef2f2, #fecaca);
      border-bottom: 2px solid #dc2626;
      padding: 11px 20px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .dup-bar.hidden {
      display: none
    }

    .dup-bar .alert-text {
      color: #7f1d1d;
      font-weight: 600
    }

    .dup-bar .alert-icon {
      font-size: 22px
    }

    /* ── Alert Center (gộp cảnh báo) ── */
    #alert-center:empty {
      display: none
    }

    #alert-center {
      border-bottom: 1px solid var(--bd)
    }

    .ac-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 22px;
      border-bottom: 1px solid rgba(0, 0, 0, .05)
    }

    .ac-item:last-child {
      border-bottom: none
    }

    .ac-item.danger {
      background: linear-gradient(135deg, #fef2f2, #fde8e8);
      border-left: 4px solid #dc2626
    }

    .ac-item.warning {
      background: linear-gradient(135deg, #fff7ed, #feeede);
      border-left: 4px solid #ea580c
    }

    .ac-item.info {
      background: linear-gradient(135deg, #eff6ff, #e6f0fe);
      border-left: 4px solid #2563eb
    }

    .ac-icon {
      font-size: 20px;
      flex-shrink: 0
    }

    .ac-text {
      flex: 1;
      font-size: 12px;
      font-weight: 600;
      color: #7f1d1d;
      line-height: 1.45
    }

    .ac-item.warning .ac-text {
      color: #7c2d12
    }

    .ac-item.info .ac-text {
      color: #1e40af
    }

    .ac-act {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 7px;
      padding: 5px 12px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s
    }

    .ac-act:hover {
      background: #f8fafc;
      transform: translateY(-1px)
    }

    .ac-close {
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      color: #64748b;
      opacity: .6;
      transition: all .2s;
      flex-shrink: 0
    }

    .ac-close:hover {
      opacity: 1;
      transform: scale(1.15)
    }

    /* ── Tab Trùng SĐT ── */
    .dup-grp {
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: var(--radius);
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-sm)
    }

    .dup-grp.checked {
      opacity: .72;
      border-color: #bbf7d0
    }

    .dup-grp-hd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      background: #fef2f2;
      border-bottom: 1px solid var(--bd);
      flex-wrap: wrap
    }

    .dup-grp.checked .dup-grp-hd {
      background: #f0fdf4
    }

    .dup-phone {
      font-weight: 800;
      font-size: 14px;
      color: #991b1b
    }

    .dup-grp.checked .dup-phone {
      color: #166534
    }

    .dup-chk-tag {
      display: inline-block;
      margin-left: 8px;
      background: #dcfce7;
      color: #166534;
      border-radius: 10px;
      padding: 1px 9px;
      font-size: 10px;
      font-weight: 700
    }

    /* ── Workflow xử lý đơn ── */
    .flow-wrap {
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: center
    }

    .flow-sel {
      border: 1px solid var(--bd);
      border-radius: 7px;
      padding: 3px 6px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      background: #fff;
      transition: all .15s
    }

    .flow-sel.flow-none {
      color: #64748b
    }

    .flow-sel.flow-dang {
      color: #1d4ed8;
      background: #eff6ff;
      border-color: #bfdbfe
    }

    .flow-sel.flow-goi {
      color: #c2410c;
      background: #fff7ed;
      border-color: #fed7aa
    }

    .flow-sel.flow-xong {
      color: #15803d;
      background: #f0fdf4;
      border-color: #bbf7d0
    }

    .flow-by {
      font-size: 9px;
      color: #0e7490;
      font-style: italic;
      white-space: nowrap
    }

    /* ═══════ CONTROLS ═══════ */
    .ctrl {
      background: #fff;
      border-bottom: 1px solid var(--bd);
      padding: 10px 20px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center
    }

    .pill-g {
      display: flex;
      gap: 5px;
      flex-wrap: wrap
    }

    .pill {
      padding: 5px 14px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--bd);
      background: #FAFBFC;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: var(--gr);
      transition: all .2s;
      white-space: nowrap
    }

    .pill.a {
      background: linear-gradient(135deg, var(--msx-green), var(--msx-green-light));
      color: #fff;
      border-color: var(--msx-green);
      box-shadow: 0 2px 8px rgba(27, 122, 61, .2)
    }

    .pill:hover:not(.a) {
      background: #EDF2F7;
      border-color: #CBD5E0;
      color: #2D3748
    }

    .sep {
      width: 1px;
      background: var(--bd);
      height: 20px;
      flex-shrink: 0
    }

    .lbl {
      font-size: 11px;
      color: var(--gr);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    /* ═══════ TABS ═══════ */
    .tabs {
      background: #fff;
      border-bottom: 1px solid var(--bd);
      padding: 0 20px;
      display: flex;
      overflow-x: auto;
      gap: 2px
    }

    .tab {
      padding: 12px 18px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--gr);
      border-bottom: 3px solid transparent;
      transition: all .2s;
      white-space: nowrap;
      flex-shrink: 0;
      position: relative
    }

    .tab.a {
      color: var(--msx-green);
      border-bottom-color: var(--msx-green);
      font-weight: 700
    }

    .tab:hover:not(.a) {
      color: #2D3748;
      background: rgba(27, 122, 61, .03)
    }

    /* ═══════ MAIN ═══════ */
    .main {
      padding: 16px 20px
    }

    .pane {
      display: none
    }

    .pane.a {
      display: block
    }

    /* ═══════ KPI ═══════ */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
      gap: 10px;
      margin-bottom: 14px
    }

    .kpi {
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: var(--radius);
      padding: 14px 16px;
      border-left: 4px solid var(--msx-green);
      position: relative;
      transition: all .25s;
      box-shadow: var(--shadow-sm)
    }

    .kpi:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md)
    }

    .kpi.r {
      border-left-color: var(--r)
    }

    .kpi.o {
      border-left-color: var(--o)
    }

    .kpi.b {
      border-left-color: var(--b)
    }

    .kpi.p {
      border-left-color: var(--p)
    }

    .kpi.y {
      border-left-color: var(--y)
    }

    .kpi.warn {
      border-color: #E53935;
      background: linear-gradient(135deg, #FFF5F5, #FED7D7);
      animation: blink 2s ease-in-out infinite
    }

    @keyframes blink {

      0%,
      100% {
        background: linear-gradient(135deg, #FFF5F5, #FED7D7)
      }

      50% {
        background: linear-gradient(135deg, #FED7D7, #FEB2B2)
      }
    }

    .kl {
      font-size: 11px;
      color: var(--gr);
      margin-bottom: 4px;
      font-weight: 600;
      letter-spacing: .2px
    }

    .kv {
      font-size: 22px;
      font-weight: 800;
      line-height: 1.15;
      color: #1a202c;
      overflow: hidden;
      white-space: nowrap;
      max-width: 100%
    }

    .kpi {
      min-width: 0
    }

    .kpi-wide {
      grid-column: span 2
    }

    @media(max-width:700px) {
      .kpi-wide {
        grid-column: auto
      }
    }

    /* Hero — 2 chỉ số tiền nổi bật */
    .hero-kpi {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px
    }

    @media(max-width:760px) {
      .hero-kpi {
        grid-template-columns: 1fr
      }
    }

    .hero-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 24px;
      border-radius: 14px;
      color: #fff;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
      position: relative;
      overflow: hidden
    }

    .hero-card::after {
      content: '';
      position: absolute;
      right: -30px;
      top: -30px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .10)
    }

    .hero-card.cod {
      background: linear-gradient(135deg, #13381F, #1B7A3D 60%, #16a34a)
    }

    .hero-card.rev {
      background: linear-gradient(135deg, #0f5132, #0e7490 60%, #0891b2)
    }

    .hero-ic {
      font-size: 36px;
      flex-shrink: 0;
      z-index: 1
    }

    .hero-body {
      min-width: 0;
      flex: 1;
      z-index: 1
    }

    .hero-label {
      font-size: 12px;
      font-weight: 700;
      opacity: .92;
      text-transform: uppercase;
      letter-spacing: .6px
    }

    .hero-num {
      font-size: 32px;
      font-weight: 900;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      margin: 3px 0
    }

    .hero-sub {
      font-size: 12px;
      opacity: .95
    }

    /* Vinh danh / cảnh báo Top 3 */
    .honor-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 14px
    }

    @media(max-width:760px) {
      .honor-row {
        grid-template-columns: 1fr
      }
    }

    .honor-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: var(--shadow-sm)
    }

    .honor-hd {
      padding: 10px 14px;
      font-weight: 800;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .honor-hd.gold {
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      color: #92400e;
      border-bottom: 1px solid #fde68a
    }

    .honor-hd.warn {
      background: linear-gradient(135deg, #fef2f2, #fee2e2);
      color: #991b1b;
      border-bottom: 1px solid #fecaca
    }

    .honor-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border-bottom: 1px solid #f1f5f9
    }

    .honor-item:last-child {
      border-bottom: none
    }

    .honor-medal {
      font-size: 20px;
      width: 28px;
      text-align: center;
      flex-shrink: 0
    }

    .honor-rank {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      border-radius: 50%;
      background: #fee2e2;
      color: #b91c1c;
      font-weight: 800;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .honor-name {
      font-weight: 700;
      font-size: 13px;
      color: #1e293b
    }

    .honor-sub {
      font-size: 11px;
      color: #64748b
    }

    .honor-val {
      margin-left: auto;
      text-align: right;
      font-weight: 800;
      font-size: 13px;
      white-space: nowrap
    }

    .honor-empty {
      padding: 14px;
      font-size: 12px;
      color: #94a3b8;
      text-align: center
    }

    .stuck-card {
      background: #fff;
      border: 1px solid #fcd34d;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 14px;
      box-shadow: var(--shadow-sm)
    }

    .stuck-hd {
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      color: #92400e;
      font-weight: 800;
      font-size: 13px;
      padding: 10px 14px;
      border-bottom: 1px solid #fde68a
    }

    /* Modal hành trình vận đơn */
    #journey-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(15, 23, 42, .45);
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    #journey-modal.show {
      display: flex
    }

    .jcard {
      background: #fff;
      width: 520px;
      max-width: 96vw;
      max-height: 86vh;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .3)
    }

    .jhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: linear-gradient(135deg, #13381F, #1B7A3D);
      color: #fff;
      font-weight: 800;
      font-size: 14px
    }

    .jclose {
      background: rgba(255, 255, 255, .2);
      border: none;
      color: #fff;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 14px
    }

    #journey-body {
      padding: 16px 20px;
      overflow-y: auto
    }

    .jsum {
      font-size: 12px;
      color: #475569;
      background: #f8fafc;
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 14px;
      line-height: 1.6
    }

    .jsum-big {
      font-size: 24px
    }

    .jtl {
      position: relative;
      padding-left: 22px
    }

    .jtl::before {
      content: '';
      position: absolute;
      left: 6px;
      top: 4px;
      bottom: 4px;
      width: 2px;
      background: #e2e8f0
    }

    .jitem {
      position: relative;
      padding: 0 0 16px 4px
    }

    .jitem::before {
      content: '';
      position: absolute;
      left: -19px;
      top: 3px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #1B7A3D;
      border: 2px solid #fff;
      box-shadow: 0 0 0 2px #1B7A3D
    }

    .jitem.carrier::before {
      background: #2563eb;
      box-shadow: 0 0 0 2px #2563eb
    }

    .jitem:first-child::before {
      background: #dc2626;
      box-shadow: 0 0 0 2px #dc2626
    }

    .jt-title {
      font-weight: 700;
      font-size: 13px;
      color: #1e293b
    }

    .jt-time {
      font-size: 11px;
      color: #94a3b8
    }

    .jt-detail {
      font-size: 12px;
      color: #475569;
      margin-top: 2px
    }

    .jempty {
      font-size: 12px;
      color: #94a3b8;
      text-align: center;
      padding: 20px
    }

    /* Tra cứu nhanh */
    .lookup-box {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 12px
    }

    .lookup-box input {
      flex: 1;
      min-width: 220px;
      padding: 8px 12px;
      border: 1px solid var(--bd);
      border-radius: 8px;
      font-size: 13px;
      font-family: inherit
    }

    .lookup-box input:focus {
      outline: none;
      border-color: var(--msx-green);
      box-shadow: 0 0 0 3px rgba(27, 122, 61, .1)
    }

    .lk-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px 14px;
      border-bottom: 1px solid #f1f5f9;
      font-size: 12px
    }

    .lk-row:last-child {
      border-bottom: none
    }

    .ks {
      font-size: 11px;
      color: var(--gr);
      margin-top: 4px
    }

    .kwarn {
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 20px
    }

    /* ═══════ TODAY PANEL — Hôm nay vs Hôm qua ═══════ */
    .tp-head {
      justify-content: space-between
    }

    .tp-head h3 {
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap
    }

    .tp-vs b {
      color: var(--msx-green)
    }

    .tp-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      font-style: normal;
      margin-left: auto
    }

    .tp-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
      animation: tpPulse 1.6s ease-in-out infinite;
      flex-shrink: 0
    }

    @keyframes tpPulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    .tp-body {
      display: grid;
      grid-template-columns: minmax(290px, 1.05fr) 1.55fr;
      gap: 14px;
      padding: 14px 16px
    }

    @media(max-width:880px) {
      .tp-body {
        grid-template-columns: 1fr
      }
    }

    /* Hero doanh thu */
    .tp-hero {
      background: linear-gradient(135deg, #0f5132, #137a3d 55%, #0e7490);
      border-radius: 14px;
      padding: 16px 18px;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(15, 81, 50, .28);
      display: flex;
      flex-direction: column
    }

    .tp-hero::after {
      content: '';
      position: absolute;
      right: -44px;
      top: -44px;
      width: 158px;
      height: 158px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .08)
    }

    .tp-hero::before {
      content: '';
      position: absolute;
      right: 30px;
      bottom: -54px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .05)
    }

    .tp-hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: relative;
      z-index: 1
    }

    .tp-hero-label {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      opacity: .92
    }

    .tp-growth {
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 800;
      padding: 3px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
      white-space: nowrap;
      line-height: 1.6
    }

    .tp-growth.up {
      background: rgba(220, 252, 231, .95);
      color: #15803d
    }

    .tp-growth.down {
      background: rgba(254, 226, 226, .97);
      color: #b91c1c
    }

    .tp-hero-num {
      font-size: 30px;
      font-weight: 900;
      line-height: 1.08;
      margin: 9px 0 2px;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      z-index: 1;
      letter-spacing: -.02em
    }

    .tp-hero-cap {
      font-size: 11px;
      opacity: .82;
      position: relative;
      z-index: 1
    }

    .tp-compare {
      margin-top: auto;
      padding-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      z-index: 1
    }

    .tp-cmp-row {
      display: flex;
      align-items: center;
      gap: 9px
    }

    .tp-cmp-tag {
      font-size: 10px;
      font-weight: 700;
      width: 50px;
      flex-shrink: 0;
      opacity: .9;
      letter-spacing: .3px
    }

    .tp-bar {
      flex: 1;
      height: 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
      overflow: hidden
    }

    .tp-bar-fill {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 999px;
      transition: width .7s cubic-bezier(.22, 1, .36, 1)
    }

    .tp-bar-today {
      background: linear-gradient(90deg, #bbf7d0, #fde68a)
    }

    .tp-bar-yday {
      background: rgba(255, 255, 255, .5)
    }

    .tp-cmp-val {
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      opacity: .95;
      min-width: 96px;
      text-align: right
    }

    /* Lưới chỉ số phụ — hàng vinh danh giãn cao bằng thẻ hero, 2 thẻ đếm ghim đáy → 2 cột cân nhau */
    .tp-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr auto;
      gap: 10px
    }

    @media(max-width:480px) {
      .tp-stats {
        grid-template-columns: 1fr;
        grid-template-rows: none
      }
    }

    .tp-stat {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 13px 15px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .2s, transform .2s
    }

    .tp-stat:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px)
    }

    .tp-stat-ic {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      flex-shrink: 0
    }

    .tp-ic-blue {
      background: #e0f2fe
    }

    .tp-ic-purple {
      background: #ede9fe
    }

    /* Doanh thu từng shop — frosted glass trong thẻ hero xanh */
    .tp-hero-shops {
      margin-top: 13px;
      padding-top: 11px;
      border-top: 1px solid rgba(255, 255, 255, .16)
    }

    .tp-hsh-ttl {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .62);
      margin-bottom: 7px
    }

    .tp-hsh {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 3.5px 0
    }

    .tp-hsh-nm {
      font-size: 11.5px;
      font-weight: 700;
      color: #fff;
      width: 44px;
      flex-shrink: 0
    }

    .tp-hsh-bar {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .15);
      overflow: hidden
    }

    .tp-hsh-bar>i {
      display: block;
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, #a7f3d0, #fcd34d);
      transition: width .5s ease
    }

    .tp-hsh-val {
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      white-space: nowrap;
      text-align: right
    }

    .tp-hsh-g {
      font-size: 9.5px;
      font-weight: 700;
      margin-left: 5px
    }

    .tp-hsh-g.up {
      color: #86efac
    }

    .tp-hsh-g.down {
      color: #fca5a5
    }

    .tp-stat-num {
      font-size: 22px;
      font-weight: 800;
      line-height: 1.05;
      color: #1a202c;
      letter-spacing: -.015em
    }

    .tp-stat-lb {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      margin-top: 2px
    }

    /* Thẻ vinh danh (Best Seller / Top Combo) — thẻ dọc: đầu thẻ → số lớn → chip phụ */
    .tp-honor {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 9px;
      border-radius: 12px;
      padding: 13px 15px;
      position: relative;
      overflow: hidden;
      border: 1px solid transparent;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .2s, transform .2s
    }

    .tp-honor:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px)
    }

    .tp-honor-gold {
      background: linear-gradient(135deg, #fffbeb, #fef3c7);
      border-color: #fde68a
    }

    .tp-honor-combo {
      background: linear-gradient(135deg, #eef6ff, #dbeafe);
      border-color: #bfdbfe
    }

    .tp-medal {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .08)
    }

    .tp-honor-body {
      min-width: 0;
      flex: 1
    }

    .tp-honor-cap {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .3px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .tp-honor-gold .tp-honor-cap {
      color: #b45309
    }

    .tp-honor-combo .tp-honor-cap {
      color: #1d4ed8
    }

    .tp-honor-name {
      font-size: 14.5px;
      font-weight: 800;
      color: #1e293b;
      line-height: 1.2;
      margin: 2px 0 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .tp-honor-sub {
      font-size: 11px;
      color: #475569;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .tp-hint {
      cursor: help;
      opacity: .55;
      font-weight: 700
    }

    /* Hàng đầu thẻ vinh danh: huy chương + nhãn + tên */
    .tp-honor-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0
    }

    /* Chỉ số chính của thẻ (DT / số đơn combo) */
    .tp-honor-big {
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.015em;
      line-height: 1.1;
      color: #1e293b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .tp-honor-gold .tp-honor-big {
      color: #b45309
    }

    .tp-honor-combo .tp-honor-big {
      color: #1d4ed8
    }

    /* Top 3 trong thẻ vinh danh: hạng 2-3 NGAY DƯỚI hạng 1, dạng pill bảng xếp hạng */
    .tp-top3 {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-top: 9px;
      margin-top: 2px;
      border-top: 1px dashed rgba(100, 116, 139, .25)
    }

    .tp-top3-row {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 11.5px;
      min-width: 0;
      background: rgba(255, 255, 255, .8);
      border: 1px solid rgba(148, 163, 184, .28);
      border-radius: 10px;
      padding: 8px 12px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
      transition: transform .15s, box-shadow .15s
    }

    /* Viền pill theo tông màu từng thẻ — tách hạng 2/3 rõ ràng trên nền pastel */
    .tp-honor-gold .tp-top3-row {
      border-color: #fcd34d
    }

    .tp-honor-combo .tp-top3-row {
      border-color: #93c5fd
    }

    .tp-top3-row:hover {
      transform: translateX(2px);
      box-shadow: 0 3px 8px rgba(15, 23, 42, .09)
    }

    .tp-top3-name {
      font-weight: 700;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    /* Khối tên 2 dòng: tên trên, chi tiết (số đơn · AOV / cơ cấu SP) dòng dưới */
    .tp-top3-main {
      flex: 1 1 auto;
      min-width: 0
    }

    .tp-top3-main .tp-top3-sub {
      margin-top: 1px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .tp-top3-sub {
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
      white-space: nowrap
    }

    .tp-top3-val {
      font-weight: 800;
      white-space: nowrap;
      margin-left: auto
    }

    /* Số liệu hạng 1 nằm góc trên bên phải thẻ (cùng hàng huy chương + tên) */
    .tp-honor-head .tp-honor-big {
      margin-left: auto;
      flex-shrink: 0;
      text-align: right;
      align-self: center;
      font-size: 26px
    }

    /* Phân cấp Top 3: hạng 2 to hơn hạng 3, nhỏ hơn hạng 1 */
    .tp-top3-row.r2 {
      font-size: 14px
    }

    .tp-top3-row.r2 .tp-top3-val {
      font-size: 17px
    }

    .tp-top3-row.r2 .tp-top3-sub {
      font-size: 11.5px
    }

    .tp-top3-row.r3 {
      font-size: 12.5px
    }

    .tp-top3-row.r3 .tp-top3-val {
      font-size: 14.5px
    }

    .tp-top3-row.r3 .tp-top3-sub {
      font-size: 11px
    }

    /* Hạng 2-3 thẻ Top Combo: tên lệch trái · chip cơ cấu đơn 1 HÀNG NGANG sát số combo bên phải */
    .tp-top3-chips {
      display: flex;
      flex-wrap: nowrap;
      gap: 4px;
      flex: 0 1 auto;
      margin-left: auto;
      justify-content: flex-end;
      min-width: 0;
      overflow: hidden
    }

    .tp-top3-chips .tp-cbchip {
      white-space: nowrap;
      flex-shrink: 0
    }

    @media(max-width:640px) {
      .tp-top3-chips {
        flex-wrap: wrap;
        justify-content: flex-end
      }
    }

    .tp-top3-chips+.tp-top3-val {
      margin-left: 0
    }

    .tp-honor-gold .tp-top3-val {
      color: #b45309
    }

    .tp-honor-combo .tp-top3-val {
      color: #1d4ed8
    }

    .tp-honor-unit {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0
    }

    /* Dải chip phụ dưới chỉ số chính */
    .tp-honor-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    /* Chip trong thẻ vinh danh: nền trắng để nổi trên nền màu */
    .tp-honor .tp-cbchip {
      background: #fff
    }

    /* Cơ cấu đơn theo số SP: Cb3 ×8 · Cb2 ×5 · Lẻ ×10 */
    .tp-combo-bd {
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    .tp-cbchip {
      font-size: 10.5px;
      font-weight: 800;
      padding: 2px 9px;
      border-radius: 999px;
      line-height: 1.55;
      white-space: nowrap;
      border: 1px solid transparent
    }

    .tp-cbchip.cb2 {
      background: #dbeafe;
      color: #1d4ed8;
      border-color: #bfdbfe
    }

    .tp-cbchip.cb3 {
      background: #fef3c7;
      color: #b45309;
      border-color: #fde68a
    }

    .tp-cbchip.cb4 {
      background: #ede9fe;
      color: #6d28d9;
      border-color: #ddd6fe
    }

    .tp-cbchip.le {
      background: #f1f5f9;
      color: #64748b;
      border-color: #e2e8f0
    }

    .tp-cbchip.gold {
      background: #fffbeb;
      color: #b45309;
      border-color: #fde68a
    }

    /* Lưới trạng thái vận đơn — trong thẻ có tiêu đề */
    .kpi-status {
      padding: 14px 16px;
      margin-bottom: 0
    }

    /* ═══════ CHARTS ═══════ */
    .ch-row {
      display: grid;
      grid-template-columns: 1fr 1.7fr;
      gap: 12px;
      margin-bottom: 14px
    }

    @media(max-width:600px) {
      .ch-row {
        grid-template-columns: 1fr
      }
    }

    .ch-card {
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: var(--radius);
      padding: 14px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .2s
    }

    .ch-card:hover {
      box-shadow: var(--shadow-md)
    }

    .ch-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: #718096;
      margin-bottom: 10px
    }

    .ch-wrap {
      position: relative;
      height: 180px
    }

    /* ═══════ TABLE CARD ═══════ */
    .tc {
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: var(--shadow-sm)
    }

    .tt {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--bd);
      background: linear-gradient(135deg, #FAFBFC, #F7FAFC)
    }

    .tt h3 {
      font-size: 14px;
      font-weight: 700;
      color: #1a202c
    }

    .srch {
      padding: 7px 12px;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-family: 'Inter', sans-serif;
      transition: all .2s;
      background: #fff
    }

    .srch:focus {
      outline: none;
      border-color: var(--msx-green);
      box-shadow: 0 0 0 3px rgba(27, 122, 61, .08)
    }

    .fsel {
      padding: 7px 10px;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      font-size: 12px;
      background: #fff;
      font-family: 'Inter', sans-serif
    }

    .fsel:focus {
      outline: none;
      border-color: var(--msx-green)
    }

    .ml {
      margin-left: auto;
      font-size: 11px;
      color: var(--gr);
      font-weight: 500
    }

    .tscroll {
      overflow-x: auto
    }

    table {
      width: 100%;
      border-collapse: collapse
    }

    th {
      background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
      padding: 10px 12px;
      text-align: center;
      font-size: 10px;
      font-weight: 700;
      color: #718096;
      text-transform: uppercase;
      letter-spacing: .8px;
      white-space: nowrap;
      border-bottom: 2px solid var(--bd)
    }

    td {
      padding: 9px 12px;
      border-bottom: 1px solid #F0F4F8;
      font-size: 12px;
      vertical-align: middle;
      text-align: center
    }

    tr {
      transition: background .15s
    }

    tr:hover td {
      background: rgba(27, 122, 61, .02)
    }

    /* Tooltip hiện nhanh (không chờ delay của title mặc định trình duyệt) */
    .qtip {
      position: relative;
      cursor: help;
      text-transform: none;
    }

    .qtip::after {
      content: attr(data-tip);
      position: absolute;
      left: 0;
      top: 130%;
      z-index: 80;
      width: 260px;
      max-width: 70vw;
      background: #1e293b;
      color: #fff;
      padding: 8px 10px;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: normal;
      white-space: normal;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
      opacity: 0;
      visibility: hidden;
      transition: opacity .05s linear;
      pointer-events: none;
    }

    .qtip:hover::after {
      opacity: 1;
      visibility: visible;
    }

    /* Căn cột bảng hiệu suất sale — đồng bộ header & dữ liệu (Nhân viên trái · chỉ số giữa · tiền phải) */
    .seller-tb td:nth-child(5) .recv {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      justify-content: center
    }

    /* Cột kéo giãn được — nhân sự tự chỉnh độ rộng để đọc */
    table.rz th,
    table.rz td {
      box-sizing: border-box;
      overflow-wrap: anywhere;
      white-space: normal
    }

    table.rz th {
      position: relative
    }

    .col-resizer {
      position: absolute;
      top: 0;
      right: -3px;
      width: 8px;
      height: 100%;
      cursor: col-resize;
      user-select: none;
      z-index: 6
    }

    .col-resizer:hover,
    .col-resizer.active {
      background: rgba(27, 122, 61, .35)
    }

    .rz-hint {
      font-size: 10px;
      color: #94a3b8;
      font-style: italic;
      margin-left: 8px
    }

    .done-chip {
      font-size: 11px;
      font-weight: 600;
      color: #166534;
      background: #dcfce7;
      border: 1px solid #86efac;
      border-radius: 20px;
      padding: 3px 10px;
      white-space: nowrap
    }

    .note-by {
      font-size: 10px;
      color: #0e7490;
      font-style: italic;
      margin-top: 3px;
      white-space: normal
    }

    .dup-badge {
      display: inline-block;
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
      border-radius: 10px;
      padding: 0 6px;
      font-size: 9px;
      font-weight: 700;
      white-space: nowrap
    }

    .cod-edit {
      cursor: pointer;
      border-bottom: 1px dashed #16a34a
    }

    .cod-edit:hover {
      background: #f0fdf4
    }

    tr:last-child td {
      border-bottom: none
    }

    /* ═══════ STATUS BADGES ═══════ */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: var(--radius-lg);
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap
    }

    .s0 {
      background: #EDF2F7;
      color: #4A5568
    }

    .s1 {
      background: #EBF8FF;
      color: #2B6CB0
    }

    .s2 {
      background: #FEFCBF;
      color: #975A16
    }

    .s3 {
      background: #C6F6D5;
      color: #276749
    }

    .s4 {
      background: #FEEBC8;
      color: #9C4221
    }

    .s5 {
      background: #E9D8FD;
      color: #6B46C1
    }

    .s6 {
      background: #FED7D7;
      color: #9B2C2C
    }

    .s9 {
      background: #BEE3F8;
      color: #2A69AC
    }

    .s15 {
      background: #FEFCBF;
      color: #B7791F
    }

    .s7 {
      background: #FED7E2;
      color: #97266D
    }

    .sfail {
      background: #FEE2E2;
      color: #B91C1C;
      border: 1px solid #FCA5A5
    }

    /* ═══════ PAGINATION ═══════ */
    .pg {
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      border-top: 1px solid var(--bd);
      flex-wrap: wrap
    }

    .pg-btn {
      padding: 5px 12px;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      background: #fff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all .2s;
      font-family: 'Inter', sans-serif
    }

    .pg-btn:hover:not(:disabled) {
      background: var(--msx-green);
      color: #fff;
      border-color: var(--msx-green);
      transform: translateY(-1px)
    }

    .pg-btn:disabled {
      opacity: .35;
      cursor: default
    }

    .pg-info {
      font-size: 11px;
      color: var(--gr);
      margin: 0 6px;
      font-weight: 500
    }

    /* ═══════ NOTES ═══════ */
    .note-cell {
      position: relative
    }

    .ntext {
      font-size: 11px;
      color: #4A5568;
      max-width: 130px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: color .15s
    }

    .ntext:hover {
      color: var(--b);
      text-decoration: underline
    }

    .nempty {
      font-size: 11px;
      color: #CBD5E0;
      cursor: pointer;
      transition: color .15s
    }

    .nempty:hover {
      color: var(--b)
    }

    .neditor {
      position: fixed;
      z-index: 200;
      background: #fff;
      border: 2px solid var(--msx-green);
      border-radius: var(--radius);
      padding: 18px;
      width: min(560px, 92vw);
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%)
    }

    .neditor textarea {
      width: 100%;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      padding: 10px;
      font-size: 14px;
      resize: vertical;
      height: 100px;
      font-family: 'Inter', sans-serif
    }

    .neditor textarea:focus {
      outline: none;
      border-color: var(--msx-green);
      box-shadow: 0 0 0 3px rgba(27, 122, 61, .08)
    }

    .nbtns {
      display: flex;
      gap: 6px;
      margin-top: 6px;
      justify-content: flex-end
    }

    .nsave {
      padding: 8px 18px;
      background: var(--msx-green);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      cursor: pointer;
      font-weight: 600;
      transition: background .2s
    }

    .nsave:hover {
      background: var(--msx-green-dark)
    }

    .ncancel {
      padding: 8px 14px;
      background: #EDF2F7;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      font-size: 13px;
      cursor: pointer;
      transition: background .2s
    }

    .ncancel:hover {
      background: #E2E8F0
    }

    .nsaving {
      font-size: 10px;
      color: var(--gr);
      padding-top: 3px;
      font-weight: 500
    }

    /* ═══════ SALE STATS ═══════ */
    .bar-wrap {
      flex: 1;
      height: 7px;
      background: #EDF2F7;
      border-radius: 4px;
      overflow: hidden
    }

    .bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--msx-green), var(--msx-green-light));
      border-radius: 4px;
      transition: width .6s ease
    }

    .ranknum {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .ranknum.r1 {
      background: linear-gradient(135deg, #F6AD55, #ECC94B);
      box-shadow: 0 2px 8px rgba(246, 173, 85, .3)
    }

    .ranknum.r2 {
      background: linear-gradient(135deg, #A0AEC0, #718096)
    }

    .ranknum.r3 {
      background: linear-gradient(135deg, #CD7F32, #B8651A)
    }

    .ranknum:not(.r1):not(.r2):not(.r3) {
      background: #CBD5E0
    }

    .pct-badge {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: var(--radius-lg)
    }

    .pct-g {
      background: #C6F6D5;
      color: #276749
    }

    .pct-y {
      background: #FEFCBF;
      color: #975A16
    }

    .pct-r {
      background: #FED7D7;
      color: #9B2C2C
    }

    /* ═══════ ADMIN PANEL ═══════ */
    .admin-section {
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: var(--radius);
      margin-bottom: 14px;
      overflow: hidden;
      box-shadow: var(--shadow-sm)
    }

    .admin-section-hdr {
      background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
      padding: 12px 16px;
      border-bottom: 1px solid var(--bd);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .admin-section-hdr h3 {
      font-size: 14px;
      font-weight: 700;
      color: #1a202c
    }

    .admin-section-body {
      padding: 14px 16px
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px
    }

    .form-row.t3 {
      grid-template-columns: 1fr 1fr 1fr
    }

    .form-row.t1 {
      grid-template-columns: 1fr
    }

    @media(max-width:560px) {

      .form-row,
      .form-row.t3 {
        grid-template-columns: 1fr
      }
    }

    .fi {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .fi label {
      font-size: 11px;
      font-weight: 600;
      color: #4A5568;
      letter-spacing: .2px
    }

    .fi input,
    .fi select {
      padding: 9px 12px;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      font-size: 12px;
      background: #fff;
      font-family: 'Inter', sans-serif;
      transition: all .2s
    }

    .fi input:focus,
    .fi select:focus {
      outline: none;
      border-color: var(--msx-green);
      box-shadow: 0 0 0 3px rgba(27, 122, 61, .08)
    }

    .btn-g {
      padding: 8px 18px;
      background: linear-gradient(135deg, var(--msx-green), var(--msx-green-light));
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 2px 8px rgba(27, 122, 61, .15)
    }

    .btn-g:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(27, 122, 61, .25)
    }

    .btn-r {
      padding: 8px 18px;
      background: linear-gradient(135deg, #E53935, #EF5350);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 2px 8px rgba(229, 57, 53, .15)
    }

    .btn-r:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(229, 57, 53, .25)
    }

    .btn-o {
      padding: 8px 18px;
      background: linear-gradient(135deg, #FB8C00, #FFA726);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s
    }

    .btn-o:hover {
      transform: translateY(-1px)
    }

    .btn-b {
      padding: 8px 18px;
      background: linear-gradient(135deg, #1E88E5, #42A5F5);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s
    }

    .btn-b:hover {
      transform: translateY(-1px)
    }

    .msg {
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      margin-top: 10px;
      font-weight: 500
    }

    .msg.ok {
      background: #C6F6D5;
      color: #276749;
      border: 1px solid #9AE6B4
    }

    .msg.err {
      background: #FED7D7;
      color: #9B2C2C;
      border: 1px solid #FEB2B2
    }

    .admin-user-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #F0F4F8
    }

    .admin-user-row:last-child {
      border-bottom: none
    }

    .au-info {
      flex: 1
    }

    .au-name {
      font-weight: 700;
      font-size: 13px;
      color: #1a202c
    }

    .au-meta {
      font-size: 11px;
      color: var(--gr)
    }

    .au-role {
      font-size: 10px;
      padding: 3px 10px;
      border-radius: var(--radius-lg);
      font-weight: 700;
      letter-spacing: .3px;
      text-transform: uppercase
    }

    .au-role.admin {
      background: #C6F6D5;
      color: #276749
    }

    .au-role.superadmin {
      background: #1f2937;
      color: #fde68a
    }

    .au-role.itsupport {
      background: #DBEAFE;
      color: #1E40AF
    }

    .au-role.gdkd {
      background: #FBCFE8;
      color: #9D174D
    }

    .au-role.staff {
      background: #BEE3F8;
      color: #2A69AC
    }

    .au-role.kho {
      background: #FDE68A;
      color: #92400E
    }

    .au-role.ketoan,
    .au-role.ketoantruong {
      background: #CCFBF1;
      color: #0F766E
    }

    .au-role.ceo {
      background: #FEEBC8;
      color: #9C4221
    }

    .au-role.leader {
      background: #E9D8FD;
      color: #553C9A
    }

    .au-role.marketing {
      background: #E0E7FF;
      color: #3730A3
    }

    .au-role.nhanvien,
    .au-role.chuyenvien,
    .au-role.subleader,
    .au-role.phophong,
    .au-role.truongphong,
    .au-role.phogdban,
    .au-role.gdban,
    .au-role.photgd,
    .au-role.phochutich,
    .au-role.chutichhdqt {
      background: #E2E8F0;
      color: #475569
    }

    /* ── Phân quyền: trình chỉnh theo vai trò ── */
    .perm-tier {
      font-size: 10px;
      font-weight: 700;
      color: var(--gr);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin: 10px 0 5px
    }

    .perm-picker .pill-g {
      margin-bottom: 2px
    }

    .perm-rp {
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .perm-rp-cnt {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: rgba(0, 0, 0, .08);
      font-size: 10px;
      font-weight: 800
    }

    .perm-rp.a .perm-rp-cnt {
      background: rgba(255, 255, 255, .28);
      color: #fff
    }

    .perm-editor {
      margin-top: 14px
    }

    .perm-empty {
      padding: 26px 16px;
      text-align: center;
      color: var(--gr);
      font-size: 13px;
      border: 1px dashed var(--bd);
      border-radius: var(--radius-sm);
      background: var(--bg)
    }

    .perm-head {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px 12px;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, #F0FDF4, #F8FAFC);
      margin-bottom: 12px
    }

    .perm-head .au-role {
      font-size: 13px;
      padding: 3px 12px
    }

    .perm-head-meta {
      font-size: 11.5px;
      color: var(--gr)
    }

    .perm-lock-note {
      font-size: 11px;
      font-weight: 700;
      color: var(--msx-green)
    }

    .perm-grp {
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin-bottom: 10px
    }

    .perm-grp-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 12px;
      background: #F1F5F9;
      font-size: 11.5px;
      font-weight: 700;
      color: #475569
    }

    .perm-lnk {
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      color: var(--msx-green)
    }

    .perm-lnk:hover {
      text-decoration: underline
    }

    .perm-lnk-sep {
      margin: 0 6px;
      color: var(--bd)
    }

    .perm-grp-body {
      padding: 4px 6px
    }

    .perm-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 8px;
      border-radius: 7px;
      cursor: pointer
    }

    .perm-row:hover {
      background: #F8FAFC
    }

    .perm-row.locked {
      cursor: default;
      opacity: .85
    }

    .perm-row .pr-main {
      flex: 1;
      min-width: 0
    }

    .perm-row .pr-lb {
      display: block;
      font-size: 12.5px;
      font-weight: 600;
      color: #334155
    }

    .perm-row .pr-ds {
      display: block;
      font-size: 10.5px;
      color: var(--gr);
      margin-top: 1px
    }

    .perm-row .pr-lock {
      display: block;
      font-size: 10px;
      color: var(--msx-green);
      margin-top: 2px
    }

    /* toggle switch */
    .psw {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
      flex: none
    }

    .psw input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute
    }

    .psw .sl {
      position: absolute;
      inset: 0;
      background: #CBD5E1;
      border-radius: 22px;
      transition: background .2s
    }

    .psw .sl::before {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      left: 3px;
      top: 3px;
      background: #fff;
      border-radius: 50%;
      transition: transform .2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .3)
    }

    .psw input:checked+.sl {
      background: var(--msx-green)
    }

    .psw input:checked+.sl::before {
      transform: translateX(18px)
    }

    .psw input:disabled+.sl {
      opacity: .55
    }

    /* Quyền riêng theo người dùng */
    .perm-user-pick {
      width: 100%;
      max-width: 420px;
      padding: 8px 10px;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      font-size: 13px;
      background: var(--card);
      color: #334155
    }

    .perm-row.ovr {
      background: #F5F3FF
    }

    .pr-ov {
      display: inline-block;
      margin-left: 7px;
      padding: 1px 7px;
      border-radius: 9px;
      background: #7C3AED;
      color: #fff;
      font-size: 9.5px;
      font-weight: 800;
      vertical-align: middle
    }

    .pr-role {
      color: #94A3B8 !important
    }

    .perm-note {
      margin-top: 4px;
      padding: 8px 10px;
      background: #F5F3FF;
      border: 1px solid #DDD6FE;
      border-radius: var(--radius-sm);
      font-size: 11px;
      color: #6D28D9
    }

    .au-actions {
      display: flex;
      gap: 6px
    }

    .btn-xs {
      padding: 5px 10px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--bd);
      background: #fff;
      transition: all .2s
    }

    .btn-xs:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm)
    }

    .btn-xs.r {
      background: #FFF5F5;
      border-color: #FEB2B2;
      color: #9B2C2C
    }

    .btn-xs.b {
      background: #EBF8FF;
      border-color: #90CDF4;
      color: #2B6CB0
    }

    .btn-xs.g {
      background: #F0FFF4;
      border-color: #9AE6B4;
      color: #276749
    }

    .activity-row {
      padding: 8px 0;
      border-bottom: 1px solid #F0F4F8;
      font-size: 11px;
      color: #4A5568
    }

    .activity-row:last-child {
      border-bottom: none
    }

    .activity-row strong {
      color: #1a202c
    }

    /* ═══════ MISC ═══════ */
    .sp {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #E2E8F0;
      border-top-color: var(--msx-green);
      border-radius: 50%;
      animation: spin .6s linear infinite;
      vertical-align: middle;
      margin-right: 6px
    }

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

    .ld td {
      text-align: center;
      padding: 32px;
      color: var(--gr)
    }

    .ptag {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      background: #EDF2F7;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 600;
      color: #4A5568
    }

    .info-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      padding: 10px 16px;
      background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
      border-top: 1px solid var(--bd);
      font-size: 11px;
      color: var(--gr);
      font-weight: 500
    }

    .info-row span {
      font-weight: 700;
      color: #1a202c
    }

    .warn-strip {
      background: linear-gradient(135deg, #FFFFF0, #FEFCBF);
      border: 1px solid #F6E05E;
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-size: 12px;
      color: #975A16;
      margin-bottom: 12px;
      display: none;
      font-weight: 500
    }

    .warn-strip.show {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .tbl-wrap-admin {
      max-height: 300px;
      overflow-y: auto
    }

    .qnote-btn {
      padding: 3px 8px;
      border: 1px solid #E2E8F0;
      border-radius: var(--radius-sm);
      font-size: 10px;
      cursor: pointer;
      background: #fff;
      margin: 1px;
      transition: all .15s;
      font-weight: 500
    }

    .qnote-btn:hover {
      background: var(--msx-green);
      color: #fff;
      border-color: var(--msx-green)
    }

    .qnote-btn.active {
      background: var(--msx-green);
      color: #fff;
      border-color: var(--msx-green);
      font-weight: 700
    }

    .rnote-input {
      width: 100%;
      font-size: 11px;
      padding: 5px 8px;
      border: 1px solid #E2E8F0;
      border-radius: var(--radius-sm);
      box-sizing: border-box;
      font-family: 'Inter', sans-serif
    }

    .rnote-input:focus {
      outline: none;
      border-color: var(--msx-green)
    }

    /* ═══════ SCROLLBAR ═══════ */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px
    }

    ::-webkit-scrollbar-track {
      background: #F7FAFC
    }

    ::-webkit-scrollbar-thumb {
      background: #CBD5E0;
      border-radius: 3px
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #A0AEC0
    }

    /* ═══════ RESPONSIVE ═══════ */
    @media(max-width:768px) {
      .hdr {
        padding: 8px 12px;
        min-height: auto
      }

      .main {
        padding: 10px 12px
      }

      .ctrl {
        padding: 8px 12px
      }

      .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 8px
      }
    }

    /* ═══════════════════════════════════════════════════════
   DESIGN REFRESH v2 — "Calm Operations" (lớp override an toàn)
   ═══════════════════════════════════════════════════════ */
    :root {
      --bg: #F1F5F9;
      --card: #FFFFFF;
      --bd: #E6EBF1;
      --gr: #64748B;
      --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
      --shadow-md: 0 6px 18px rgba(16, 24, 40, .07);
      --shadow-lg: 0 18px 50px rgba(16, 24, 40, .14);
      --radius: 14px;
      --radius-sm: 9px;
      --radius-lg: 18px;
    }

    body {
      line-height: 1.5;
      letter-spacing: -.005em;
      color: #0f172a
    }

    /* Cards & sections — bo mềm, viền dịu, shadow tinh tế, có khoảng thở */
    .kpi,
    .tc,
    .ch-card,
    .honor-card,
    .stuck-card,
    .admin-section {
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--bd);
      border-radius: var(--radius)
    }

    .kpi {
      padding: 16px 18px;
      transition: box-shadow .2s ease, transform .2s ease
    }

    .kpi:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px)
    }

    .ch-card {
      padding: 16px 18px
    }

    .kl {
      color: #64748B;
      font-weight: 600;
      letter-spacing: .2px;
      font-size: 11px
    }

    .kv {
      letter-spacing: -.015em
    }

    .ks {
      color: #94A3B8;
      font-size: 11px
    }

    /* Filter pills — touch target lớn hơn, active rõ ràng */
    .pill {
      padding: 7px 15px;
      border-radius: 999px;
      transition: all .15s ease;
      font-weight: 600
    }

    .pill:hover {
      background: #fff;
      border-color: var(--msx-green)
    }

    .pill.a {
      box-shadow: 0 2px 10px rgba(27, 122, 61, .28)
    }

    /* Tabs — chữ active đậm, transition mượt */
    .tab {
      transition: color .15s ease, border-color .15s ease
    }

    .tab.a {
      font-weight: 700
    }

    /* Section header & table title — đồng nhất */
    .tt h3,
    .admin-section-hdr h3 {
      letter-spacing: -.01em
    }

    /* Tables — header dịu, zebra nhẹ, hover, dòng cao (touch) */
    th {
      background: #F8FAFC;
      color: #64748B;
      font-weight: 700;
      border-bottom: 1px solid var(--bd);
      letter-spacing: .4px
    }

    td {
      padding: 11px 12px
    }

    tbody tr:nth-child(even) td {
      background: rgba(241, 245, 249, .45)
    }

    tbody tr:hover td {
      background: rgba(27, 122, 61, .055)
    }

    /* Buttons — bo & feedback nhất quán */
    .btn-xs,
    .btn-b,
    .btn-o,
    .btn-lg {
      transition: all .15s ease
    }

    .btn-xs {
      border-radius: 8px
    }

    .btn-xs:hover {
      filter: brightness(.97)
    }

    .btn-b:hover,
    .btn-o:hover {
      filter: brightness(1.05)
    }

    /* Inputs — focus ring rõ */
    input,
    select,
    textarea {
      transition: border-color .15s ease, box-shadow .15s ease
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    button:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--msx-green);
      outline-offset: 2px
    }

    /* Alerts — đồng nhất ngôn ngữ, thoáng hơn (calm) */
    .alert-bar,
    .dup-bar {
      padding: 12px 24px
    }

    .warn-strip {
      border-radius: 10px
    }

    /* Hero cards — shadow sang hơn */
    .hero-card {
      box-shadow: 0 10px 30px rgba(16, 24, 40, .12)
    }

    /* ═══ BẢNG RESPONSIVE — PC: bảng gọn vừa màn hình · Điện thoại: thẻ đơn ═══ */
    .col-resizer {
      right: -4px;
      width: 9px
    }

    /* Tab lọc trạng thái (như Pancake) */
    .status-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      padding: 10px 2px 12px;
      border-bottom: 1px solid var(--bd)
    }

    /* ── DASHBOARD: 🚦 Phễu vận hành ── */
    .ch-sub {
      font-size: 10.5px;
      font-weight: 400;
      color: #94a3b8
    }

    .funnel {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 4px 0
    }

    .fn-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 9px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: background .15s, border-color .15s, transform .12s
    }

    .fn-row:hover {
      background: #f8fafc;
      border-color: var(--bd);
      transform: translateX(2px)
    }

    .fn-row.fn-fail {
      background: #fef2f2;
      border-color: #fecaca
    }

    .fn-row.fn-fail:hover {
      border-color: #f87171
    }

    .fn-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-block
    }

    .fn-lb {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .fn-go {
      font-size: 9px;
      color: #cbd5e1;
      transition: color .15s
    }

    .fn-row:hover .fn-go {
      color: #16a34a
    }

    /* Cơ cấu trạng thái đơn: danh sách 2 cột cho cân (bớt khoảng trống), dòng "giao không thành" trải hết */
    .funnel.sl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px 18px;
      align-content: start;
      padding: 4px 0
    }

    .funnel.sl-grid .fn-fail {
      grid-column: 1 / -1
    }

    @media(max-width:760px) {
      .funnel.sl-grid {
        grid-template-columns: 1fr
      }
    }

    /* Donut tổng đơn ở giữa */
    .donut-flex {
      display: flex;
      gap: 18px;
      align-items: center;
      flex-wrap: wrap
    }

    .donut-box {
      width: 205px;
      height: 205px;
      position: relative;
      flex-shrink: 0;
      margin: 0 auto
    }

    .donut-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none
    }

    .donut-center b {
      font-size: 21px;
      font-weight: 900;
      color: #1e293b;
      letter-spacing: -.02em
    }

    .donut-center span {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .6px;
      color: #94a3b8
    }

    .fn-bar {
      flex: 1;
      height: 8px;
      border-radius: 999px;
      background: #f1f5f9;
      overflow: hidden
    }

    .fn-bar>i {
      display: block;
      height: 100%;
      border-radius: 999px;
      transition: width .5s ease
    }

    .fn-n {
      font-size: 13px;
      font-weight: 800;
      color: #1e293b;
      min-width: 52px;
      text-align: right
    }

    .fn-p {
      font-size: 10.5px;
      font-weight: 600;
      color: #94a3b8;
      min-width: 46px;
      text-align: right;
      white-space: nowrap
    }

    /* ── DASHBOARD: 🚦 Đơn cần xử lý ── */
    .dash-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
      gap: 10px
    }

    .act-card {
      display: flex;
      align-items: center;
      gap: 11px;
      border: 1px solid var(--bd);
      border-left: 4px solid var(--c, #64748b);
      border-radius: 11px;
      padding: 11px 14px;
      cursor: pointer;
      background: #fff;
      transition: box-shadow .18s, transform .14s
    }

    .act-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px)
    }

    .act-ic {
      font-size: 21px;
      line-height: 1
    }

    .act-n {
      font-size: 22px;
      font-weight: 900;
      color: var(--c, #0f172a);
      letter-spacing: -.02em;
      line-height: 1.1
    }

    .act-lb {
      font-size: 12px;
      font-weight: 700;
      color: #334155
    }

    .act-sb {
      font-size: 10.5px;
      color: #94a3b8
    }

    /* ── DASHBOARD: 🏪 Thẻ hiệu suất shop ── */
    .shop-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
      gap: 10px
    }

    .shop-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-top: 3px solid #1b7a3d;
      border-radius: 12px;
      padding: 11px 13px;
      cursor: pointer;
      transition: box-shadow .18s, transform .15s
    }

    .shop-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px)
    }

    .sc-hd {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px
    }

    .sc-hd b {
      color: #1e293b
    }

    .sc-tlh {
      margin-left: auto;
      padding: 2px 9px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 11px;
      white-space: nowrap
    }

    .sc-tlh.good {
      background: #dcfce7;
      color: #15803d
    }

    .sc-tlh.bad {
      background: #fee2e2;
      color: #b91c1c
    }

    .sc-big {
      font-size: 22px;
      font-weight: 900;
      color: #1a202c;
      margin: 6px 0 8px;
      letter-spacing: -.02em
    }

    .sc-big span {
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8
    }

    .sc-line {
      display: flex;
      justify-content: space-between;
      font-size: 11.5px;
      color: #64748b;
      padding: 2.5px 0
    }

    .sc-rate {
      margin-top: 7px
    }

    .sc-rate-lb {
      display: flex;
      justify-content: space-between;
      font-size: 10.5px;
      color: #64748b;
      margin-bottom: 3px
    }

    .sc-rate-lb b {
      color: #15803d
    }

    .sc-bar {
      height: 6px;
      border-radius: 999px;
      background: #f1f5f9;
      overflow: hidden
    }

    .sc-bar>i {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #16a34a, #4ade80);
      transition: width .5s ease
    }

    .sc-cod {
      margin-top: 9px;
      padding-top: 8px;
      border-top: 1px dashed var(--bd);
      font-size: 13px;
      font-weight: 800;
      color: #1e293b;
      white-space: nowrap
    }

    .shop-total {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 10px;
      padding: 9px 14px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 10px;
      font-size: 12px;
      color: #475569
    }

    .shop-total>b:first-child {
      color: #166534
    }

    .sp-note {
      margin-top: 8px;
      font-size: 10.5px;
      color: #94a3b8;
      line-height: 1.5
    }

    /* ── DASHBOARD: 📈 chip số liệu xu hướng ── */
    .trend-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 2px 0 12px
    }

    .tr-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 11px;
      border-radius: 9px;
      background: #f8fafc;
      border: 1px solid var(--bd);
      font-size: 12px
    }

    .tr-chip .tr-lb {
      font-size: 10.5px;
      color: #64748b;
      font-weight: 600
    }

    .tr-chip b {
      font-weight: 800;
      color: #1e293b
    }

    .tr-chip.good b {
      color: #15803d
    }

    .tr-chip.bad b {
      color: #b91c1c
    }

    .tr-chip.warn b {
      color: #b45309
    }

    /* Ghi chú NHIỀU VẾT trong cột Ghi chú + popup */
    .nlog {
      cursor: pointer
    }

    .nentry {
      padding: 3px 0;
      border-bottom: 1px dashed #eef2f7
    }

    .nentry:last-child {
      border-bottom: none
    }

    .nentry-b {
      white-space: pre-wrap;
      word-break: break-word
    }

    .nmore {
      font-size: 10px;
      color: #2563eb;
      font-weight: 700;
      margin-top: 2px
    }

    .nhist {
      max-height: 340px;
      overflow-y: auto;
      background: #f8fafc;
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 10px 14px;
      margin-bottom: 10px;
      font-size: 13.5px;
      line-height: 1.5;
      text-align: left
    }

    .nhist .note-by {
      font-size: 12px
    }

    .nhist .nentry {
      padding: 7px 0
    }

    /* Khối Vận chuyển chi tiết trong popup hành trình — như POS Cake */
    .jvc {
      margin: 10px 0;
      border: 1.5px solid #0e7490;
      border-radius: 12px;
      padding: 11px 14px;
      background: #fff;
      font-size: 12px
    }

    .jvc-hd {
      font-weight: 800;
      color: #0e7490;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap
    }

    .jvc-code {
      margin-left: auto;
      background: #0e7490;
      color: #fff;
      padding: 2px 10px;
      border-radius: 999px;
      font-family: monospace;
      font-size: 11px;
      font-weight: 700
    }

    .jvc-grid {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 4px 14px
    }

    .jvc-grid>span {
      color: #64748b;
      white-space: nowrap
    }

    .jvc-grid>b {
      color: #1e293b;
      word-break: break-word
    }

    .jvc-last {
      margin-top: 9px;
      padding-top: 8px;
      border-top: 1px dashed #99f6e4
    }

    .jvc-last-hd {
      font-weight: 800;
      color: #0e7490;
      margin-bottom: 5px
    }

    .st-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 13px;
      border-radius: 999px;
      background: #f1f5f9;
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap
    }

    .st-chip:hover {
      background: #e2e8f0
    }

    .st-chip.active {
      background: var(--msx-green);
      color: #fff;
      box-shadow: 0 2px 8px rgba(27, 122, 61, .3)
    }

    .st-chip .st-count {
      background: rgba(15, 23, 42, .08);
      border-radius: 999px;
      padding: 0 7px;
      font-size: 11px;
      font-weight: 800
    }

    .st-chip.active .st-count {
      background: rgba(255, 255, 255, .25)
    }

    /* Tổng cuối bảng */
    .tbl-footer {
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      padding: 12px 16px;
      background: #f8fafc;
      border-top: 2px solid var(--bd);
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      border-radius: 0 0 10px 10px
    }

    .tbl-footer b {
      color: #0f172a
    }

    .tbl-footer .ft-cod b {
      color: #16a34a
    }

    /* 📌 Thanh Tổng dính đáy khung khi cuộn danh sách vận đơn */
    #pane-orders .tc {
      overflow: visible
    }

    #pane-orders #ord-footer {
      position: sticky;
      bottom: 0;
      z-index: 5;
      box-shadow: 0 -3px 10px rgba(15, 23, 42, .07)
    }

    #pane-orders #ord-footer:empty {
      display: none
    }

    /* 📌 Dòng TỔNG dính đáy BẢNG (tfoot): còn cuộn trong bảng thì tổng luôn hiện, ra khỏi bảng thì tự nhả */
    table tfoot td.tfoot-sum {
      position: sticky;
      bottom: 0;
      z-index: 4;
      background: #f8fafc;
      border-top: 2px solid var(--bd);
      padding: 10px 8px;
      font-size: 12px;
      font-weight: 800;
      color: #0f172a;
      white-space: nowrap;
      box-shadow: 0 -3px 10px rgba(15, 23, 42, .07)
    }

    /* 📊 Ẩn/hiện cột thống kê phải của tab Vận đơn */
    #ord-grid {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 300px)
    }

    #ord-grid.side-hidden {
      grid-template-columns: minmax(0, 1fr)
    }

    #ord-grid.side-hidden #ord-side {
      display: none
    }

    /* 🔔 Chuông cảnh báo (đầu trang sạch, không còn dải đỏ thường trực) */
    .bell-wrap {
      position: relative;
      display: flex;
      align-items: center
    }

    .bell-btn {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 10px;
      width: 40px;
      height: 34px;
      font-size: 16px;
      cursor: pointer;
      position: relative;
      color: #fff;
      transition: all .15s
    }

    .bell-btn:hover {
      background: rgba(255, 255, 255, .24)
    }

    .bell-badge {
      position: absolute;
      top: -7px;
      right: -7px;
      background: #dc2626;
      color: #fff;
      border-radius: 999px;
      min-width: 18px;
      height: 18px;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      border: 2px solid var(--hdr-dark)
    }

    .bell-badge.hidden {
      display: none
    }

    .bell-btn.has-alert {
      animation: bellpulse 2.2s ease-in-out infinite
    }

    @keyframes bellpulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, .55)
      }

      55% {
        box-shadow: 0 0 0 7px rgba(220, 38, 38, 0)
      }
    }

    .alert-dropdown {
      position: absolute;
      top: 46px;
      right: 0;
      width: 480px;
      max-width: 92vw;
      max-height: 72vh;
      overflow: auto;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      box-shadow: var(--shadow-lg);
      z-index: 200;
      color: #0f172a
    }

    .alert-dropdown.hidden {
      display: none
    }

    .ad-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--bd);
      font-weight: 800;
      font-size: 13px;
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 1
    }

    .ad-close {
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      color: #64748b
    }

    .ad-empty {
      padding: 26px 16px;
      text-align: center;
      color: #16a34a;
      font-weight: 600;
      font-size: 13px
    }

    .alert-dropdown .ac-item {
      border-left-width: 4px;
      border-radius: 0;
      padding: 13px 16px
    }

    .rtable {
      width: 100%;
      table-layout: auto;
      border-collapse: collapse
    }

    .rtable th {
      text-align: center;
      padding: 10px 8px;
      font-size: 11px
    }

    .rtable td {
      padding: 10px 8px;
      vertical-align: middle;
      text-align: center
    }

    .rtable td[data-label="Sản phẩm"] {
      white-space: normal;
      line-height: 1.35;
      max-width: 200px
    }

    .rtable td[data-label="Ghi chú"] {
      min-width: 140px;
      max-width: 230px
    }

    .rtable td[data-label="Khách hàng"] {
      max-width: 150px
    }

    .note-cell .ntext,
    .note-cell .nempty {
      cursor: pointer
    }

    @media (max-width:760px) {
      .tscroll {
        overflow-x: visible
      }

      .rtable,
      .rtable tbody {
        display: block;
        width: 100%
      }

      .rtable thead {
        display: none
      }

      .rtable tr {
        display: block;
        background: #fff;
        border: 1px solid var(--bd);
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 8px 12px;
        box-shadow: var(--shadow-sm)
      }

      .rtable tr:nth-child(even) td {
        background: transparent
      }

      .rtable td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 8px 0;
        border: none !important;
        border-bottom: 1px dashed #eef2f7 !important;
        text-align: right !important;
        max-width: none !important
      }

      .rtable tr td:last-child {
        border-bottom: none !important
      }

      .rtable td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 11px;
        text-align: left;
        flex-shrink: 0
      }

      .rtable td[data-label="Sản phẩm"],
      .rtable td[data-label="Ghi chú"] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left !important
      }

      .rtable td[data-label="Sản phẩm"]::before,
      .rtable td[data-label="Ghi chú"]::before {
        margin-bottom: 3px
      }

      .rtable td[data-label="Khách hàng"] {
        flex-direction: column;
        align-items: flex-end
      }
    }

    /* ═══ Skeleton khi tải (cảm giác nhanh, mượt) ═══ */
    @keyframes shimmer {
      0% {
        background-position: -450px 0
      }

      100% {
        background-position: 450px 0
      }
    }

    .skel {
      display: inline-block;
      height: 13px;
      border-radius: 7px;
      background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 50%, #eef2f7 75%);
      background-size: 900px 100%;
      animation: shimmer 1.3s linear infinite;
      width: 70%
    }

    .skel-row td {
      padding: 13px 12px !important;
      border-bottom: 1px solid #f1f5f9
    }

    .skel-row:hover td {
      background: transparent !important
    }

    /* Tinh chỉnh khoảng thở/mềm mại bảng */
    .rtable tbody tr {
      transition: background .12s
    }

    .rtable tbody tr:hover td {
      background: rgba(27, 122, 61, .045)
    }

    .rtable td {
      border-bottom: 1px solid #f1f5f9
    }

    .badge {
      padding: 4px 11px;
      letter-spacing: .2px
    }

    .tc,
    .ch-card,
    .honor-card,
    .stuck-card,
    .admin-section {
      border-radius: 14px
    }

    /* ── FEEDBACK / GÓP Ý ── */
    .fb-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--bd)
    }

    .fb-item:last-child {
      border-bottom: none
    }

    .fb-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 6px;
      font-size: 11px;
      color: #64748b
    }

    .fb-text {
      font-size: 13px;
      color: #1e293b;
      white-space: pre-wrap;
      word-break: break-word
    }

    /* ── Đính kèm ảnh góp ý ── */
    .fb-attach-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 10px 0 4px
    }

    .fb-attach-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 600;
      color: #0f766e;
      background: #f0fdfa;
      border: 1.5px dashed #5eead4;
      border-radius: 8px;
      padding: 7px 13px;
      cursor: pointer;
      transition: .15s
    }

    .fb-attach-btn:hover {
      background: #ccfbf1;
      border-color: #2dd4bf
    }

    .fb-attach-hint {
      font-size: 11px;
      color: #94a3b8
    }

    .fb-imgs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 6px
    }

    .fb-imgs:empty {
      margin: 0
    }

    .fb-img-prev {
      position: relative;
      width: 76px;
      height: 76px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--bd);
      background: #f1f5f9
    }

    .fb-img-prev img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .fb-img-prev .rm {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      border: none;
      background: rgba(15, 23, 42, .72);
      color: #fff;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .fb-att-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 9px
    }

    .fb-img {
      width: 92px;
      height: 92px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--bd);
      cursor: zoom-in;
      transition: .12s
    }

    .fb-img:hover {
      filter: brightness(.94);
      transform: scale(1.02)
    }

    .img-zoom {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(2, 6, 23, .88);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      cursor: zoom-out
    }

    .img-zoom.open {
      display: flex
    }

    .img-zoom img {
      max-width: 96vw;
      max-height: 92vh;
      border-radius: 10px;
      box-shadow: 0 12px 48px rgba(0, 0, 0, .5)
    }

    .img-zoom .zclose {
      position: absolute;
      top: 16px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      font-size: 20px;
      cursor: pointer
    }

    /* ── Thống kê ticket & KPI xử lý ── */
    .fb-stat-sub {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 9px
    }

    .fb-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: 9px
    }

    .fb-stat {
      background: #f8fafc;
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 11px 12px
    }

    .fb-stat .v {
      font-size: 21px;
      font-weight: 800;
      line-height: 1.1;
      color: #0f172a
    }

    .fb-stat .l {
      font-size: 11px;
      color: #64748b;
      margin-top: 3px
    }

    .fb-stat.done .v {
      color: #16a34a
    }

    .fb-stat.doing .v {
      color: #b45309
    }

    .fb-stat.new .v {
      color: #2563eb
    }

    .fb-stat.rejected .v {
      color: #dc2626
    }

    .fb-htable {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }

    .fb-htable th,
    .fb-htable td {
      padding: 8px 10px;
      text-align: center;
      border-bottom: 1px solid #eef2f7
    }

    .fb-htable th {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: .3px;
      background: #f8fafc
    }

    .fb-htable th:first-child,
    .fb-htable td:first-child {
      text-align: left
    }

    .fb-htable td.hname {
      font-weight: 600;
      color: #1e293b
    }

    .fb-htable td .htot {
      font-weight: 800;
      color: #0f766e
    }

    .fb-htable tr:last-child td {
      border-bottom: none
    }

    .fb-typebars {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .fb-typebar {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px
    }

    .fb-typebar .tn {
      flex: 0 0 150px;
      color: #475569
    }

    .fb-typebar .tt2 {
      flex: 1;
      height: 8px;
      border-radius: 5px;
      background: #eef2f7;
      overflow: hidden
    }

    .fb-typebar .tt2 i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #14b8a6, #0d9488)
    }

    .fb-typebar .tc2 {
      flex: 0 0 38px;
      text-align: right;
      font-weight: 700;
      color: #0f172a
    }

    .fb-empty-mini {
      padding: 14px;
      text-align: center;
      color: #94a3b8;
      font-size: 12px
    }

    /* Badge người phụ trách ticket */
    .fb-assignee {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 9px;
      border-radius: 999px;
      background: #ede9fe;
      color: #6d28d9;
      border: 1px solid #ddd6fe;
      white-space: nowrap
    }

    .fb-assignee.none {
      background: #fff7ed;
      color: #c2410c;
      border-color: #fed7aa
    }

    .fb-assign-sel {
      max-width: 160px
    }

    .fb-reply {
      margin-top: 10px;
      padding: 9px 12px;
      background: linear-gradient(180deg, #f0fdf4, #ecfdf5);
      border: 1px solid #bbf7d0;
      border-left: 3px solid #16a34a;
      border-radius: 10px;
      font-size: 12px;
      word-break: break-word;
      transition: box-shadow .15s, border-color .15s
    }

    .fb-reply.editable {
      cursor: pointer
    }

    .fb-reply.editable:hover {
      border-color: #16a34a;
      box-shadow: 0 2px 10px rgba(22, 163, 74, .14)
    }

    .fb-reply.editable:hover .fb-reply-edit {
      opacity: 1
    }

    .fb-reply-hd {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      font-size: 11px;
      color: #15803d;
      margin-bottom: 3px
    }

    .fb-reply-hd strong {
      color: #166534
    }

    .fb-reply-time {
      color: #64748b;
      font-weight: 400
    }

    .fb-reply-edit {
      margin-left: auto;
      font-size: 10.5px;
      color: #16a34a;
      font-weight: 700;
      opacity: 0;
      transition: opacity .15s;
      white-space: nowrap
    }

    .fb-reply-body {
      white-space: pre-wrap;
      color: #1e293b;
      line-height: 1.5
    }

    /* Khung soạn phản hồi inline (thay prompt trình duyệt) */
    .fb-editor {
      margin-top: 10px;
      padding: 10px 12px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(2, 6, 23, .07);
      animation: fbSlideIn .18s ease
    }

    .fb-editor textarea {
      width: 100%;
      min-height: 72px;
      max-height: 240px;
      padding: 8px 10px;
      border: 1.5px solid #e2e8f0;
      border-radius: 9px;
      font: inherit;
      font-size: 12.5px;
      line-height: 1.5;
      resize: vertical;
      outline: none;
      box-sizing: border-box;
      transition: border-color .15s, box-shadow .15s
    }

    .fb-editor textarea:focus {
      border-color: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .13)
    }

    .fb-editor-ft {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      flex-wrap: wrap
    }

    .fb-editor-hint {
      font-size: 10.5px;
      color: #94a3b8;
      margin-left: auto
    }

    /* Form sửa thông tin đăng ký (IT chỉnh trước khi cấp tài khoản) */
    .fb-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 8px 10px
    }

    .fb-info-fg label {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 3px
    }

    .fb-info-inp {
      width: 100%;
      box-sizing: border-box;
      padding: 7px 9px;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      font: inherit;
      font-size: 12.5px;
      outline: none;
      transition: border-color .15s, box-shadow .15s
    }

    .fb-info-inp:focus {
      border-color: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .13)
    }

    /* Duyệt & tạo tài khoản */
    .fb-approve-info {
      font-size: 12.5px;
      color: #1e293b;
      margin-bottom: 8px
    }

    .fb-approve-note {
      font-size: 11px;
      color: #92400e;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 8px;
      padding: 6px 9px;
      margin-top: 8px
    }

    .fb-approved-chip {
      font-size: 11px;
      font-weight: 700;
      color: #16a34a;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 999px;
      padding: 2px 9px
    }

    .fb-done-chk {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: #475569;
      cursor: pointer;
      user-select: none;
      white-space: nowrap
    }

    /* Nút gửi phản hồi — class riêng để không bị .btn-xs đè nền trắng làm mất chữ */
    .fb-send-btn {
      padding: 6px 14px;
      background: linear-gradient(135deg, #16a34a, #22c55e);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(22, 163, 74, .25);
      transition: transform .12s, box-shadow .15s, opacity .15s
    }

    .fb-send-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(22, 163, 74, .32)
    }

    .fb-send-btn:active {
      transform: none
    }

    .fb-send-btn:disabled {
      opacity: .6;
      cursor: default;
      transform: none
    }

    @keyframes fbSlideIn {
      from {
        opacity: 0;
        transform: translateY(-5px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .fb-st {
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap
    }

    .fb-st.new {
      background: #dbeafe;
      color: #1d4ed8
    }

    .fb-st.doing {
      background: #fef3c7;
      color: #92400e
    }

    .fb-st.done {
      background: #dcfce7;
      color: #15803d
    }

    .fb-st.rejected {
      background: #fee2e2;
      color: #b91c1c
    }

    .fb-type {
      font-size: 11px;
      font-weight: 700;
      color: #334155
    }

    /* ═══════ SIDEBAR LAYOUT v2 — nhỏ gọn + Thu gọn kiểu POS Cake ═══════ */
    :root {
      --g1: #55A845;
      --g2: #067346;
      --msxgold: #fdb71a
    }

    #sb {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 192px;
      z-index: 240;
      display: flex;
      flex-direction: column;
      color: #fff;
      box-shadow: 2px 0 22px rgba(6, 115, 70, .3);
      transition: width .18s ease;
      background: linear-gradient(180deg, #55A845 0%, #2E8C46 38%, #067346 100%)
    }

    .sb-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      padding: 18px 12px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, .09);
      overflow: hidden
    }

    #sb .sb-brand .hdr-logo {
      width: 56px;
      height: 56px;
      flex: none;
      box-shadow: 0 4px 14px rgba(3, 40, 24, .35);
      border-radius: 50%
    }

    #sb .hdr-brand {
      font-size: 14.5px;
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: .2px
    }

    .sb-brand .hdr-sub {
      font-size: 9.5px;
      line-height: 1.5;
      opacity: .8;
      margin-top: 1px
    }

    #sb #msx-build-tag {
      margin-top: 4px !important
    }

    .sb-nav {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 8px 0
    }

    #sb .tab {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 2px 8px;
      padding: 8.5px 11px;
      border-radius: 9px;
      border-bottom: none;
      color: rgba(255, 255, 255, .95);
      font-size: 12.5px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-shadow: 0 1px 2px rgba(3, 40, 24, .25)
    }

    #sb .tab:hover:not(.a) {
      background: rgba(255, 255, 255, .16);
      color: #fff
    }

    #sb .tab.a {
      background: #fff;
      color: #067346;
      font-weight: 800;
      border-bottom: none;
      box-shadow: 0 4px 14px rgba(3, 40, 24, .28);
      text-shadow: none
    }

    #sb .tab {
      transition: background .15s ease, color .15s ease
    }

    .sb-nav::-webkit-scrollbar {
      width: 4px
    }

    .sb-nav::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .18);
      border-radius: 4px
    }

    .sb-ic {
      width: 18px;
      height: 18px;
      text-align: center;
      font-size: 14px;
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .sb-ic svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      display: block
    }

    .sb-fold {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 2px 8px;
      padding: 8px 11px;
      border-radius: 9px;
      cursor: pointer;
      color: rgba(255, 255, 255, .85);
      font-size: 12px;
      font-weight: 600;
      border-top: 1px solid rgba(255, 255, 255, .25);
      white-space: nowrap;
      overflow: hidden
    }

    .sb-fold:hover {
      background: rgba(255, 255, 255, .09);
      color: #fff
    }

    .sb-support {
      margin: 6px 8px 10px;
      padding: 10px 12px;
      background: rgba(3, 46, 27, .4);
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 12px;
      overflow: hidden;
      white-space: nowrap;
      backdrop-filter: blur(6px)
    }

    .sb-phone {
      color: var(--msxgold);
      text-shadow: 0 1px 8px rgba(253, 183, 26, .3)
    }

    /* ═══ ĐỢT 2 — TỔNG QUAN theo mock ═══ */
    .dash-kpi6 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
      gap: 10px;
      margin-bottom: 14px
    }

    .dk-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      padding: 13px 15px;
      display: flex;
      gap: 11px;
      align-items: flex-start;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .05)
    }

    .dk-card.click {
      cursor: pointer
    }

    .dk-card.click:hover {
      border-color: var(--g1);
      box-shadow: 0 4px 14px rgba(6, 115, 70, .12)
    }

    .dk-ic {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex: none
    }

    .dk-lb {
      font-size: 10.5px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: .2px
    }

    .dk-n {
      font-size: 18.5px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.25;
      margin-top: 1px;
      white-space: nowrap
    }

    .dk-s {
      font-size: 10px;
      color: #94a3b8;
      margin-top: 1px
    }

    .todo-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin-bottom: 14px
    }

    .todo-card {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid;
      border-radius: 12px;
      padding: 11px 14px;
      cursor: pointer;
      transition: transform .12s ease
    }

    .todo-card:hover {
      transform: translateY(-1px)
    }

    .todo-ic {
      font-size: 20px
    }

    .todo-lb {
      font-size: 11.5px;
      font-weight: 700;
      color: #334155
    }

    .todo-n {
      font-size: 15px;
      font-weight: 800
    }

    .todo-go {
      margin-left: auto;
      color: #94a3b8;
      font-size: 18px;
      font-weight: 700
    }

    .dash-funnel {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 6px 2px
    }

    .fu-step {
      text-align: center;
      min-width: 86px;
      flex: 1
    }

    .fu-ic {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px
    }

    .fu-n {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      margin-top: 4px
    }

    .fu-lb {
      font-size: 10.5px;
      color: #64748b;
      font-weight: 600
    }

    .fu-arrow {
      color: #cbd5e1;
      font-size: 16px;
      font-weight: 700
    }

    .dash-minis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
      gap: 10px
    }

    .mini-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      padding: 13px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .05)
    }

    .mini-lb {
      font-size: 10.5px;
      font-weight: 700;
      color: #64748b
    }

    .mini-n {
      font-size: 19px;
      font-weight: 800;
      line-height: 1.3
    }

    .mini-s {
      font-size: 9.5px;
      color: #94a3b8;
      margin-top: 1px
    }

    .mini-donut {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none
    }

    .mini-donut span {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff
    }

    .mini-donut.flat {
      background: #eff6ff;
      color: #2563eb
    }

    .dk-ic svg {
      width: 19px;
      height: 19px
    }

    .todo-ic svg {
      width: 20px;
      height: 20px
    }

    .fu-ic svg {
      width: 17px;
      height: 17px
    }

    .mini-donut.flat svg {
      width: 20px;
      height: 20px
    }

    .fu-d {
      font-size: 10px;
      margin-top: 2px;
      font-weight: 600
    }

    .dk-card.on {
      border-color: var(--g2);
      box-shadow: 0 0 0 2px rgba(6, 115, 70, .22)
    }

    @media(max-width:1100px) {
      #ord-grid {
        grid-template-columns: minmax(0, 1fr)
      }
    }

    .sb-call {
      display: block;
      margin-top: 7px;
      text-align: center;
      background: #fff;
      color: #067346;
      font-weight: 800;
      font-size: 11.5px;
      border-radius: 8px;
      padding: 6px 0;
      text-decoration: none
    }

    #main-app>.hdr,
    #main-app>.ctrl,
    #main-app>.main {
      margin-left: 192px;
      transition: margin-left .18s ease
    }

    /* trạng thái THU GỌN (chỉ desktop) */
    body.sb-mini #sb {
      width: 58px
    }

    body.sb-mini #main-app>.hdr,
    body.sb-mini #main-app>.ctrl,
    body.sb-mini #main-app>.main {
      margin-left: 58px
    }

    body.sb-mini .sb-lb,
    body.sb-mini .sb-brand>div:last-child,
    body.sb-mini .sb-support {
      display: none
    }

    body.sb-mini #sb .tab {
      justify-content: center;
      padding: 10px 0;
      margin: 2px 7px;
      gap: 0
    }

    body.sb-mini .sb-fold {
      justify-content: center;
      padding: 9px 0;
      gap: 0
    }

    body.sb-mini .sb-brand {
      justify-content: center;
      padding: 12px 6px 10px
    }

    #main-app>.hdr {
      background: #fff;
      color: #0f172a;
      box-shadow: 0 1px 0 var(--bd);
      min-height: 54px
    }

    #page-title {
      font-size: 17px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -.01em
    }

    #main-app>.hdr .sync-badge {
      background: #ecfdf5;
      border: 1px solid #bbf7d0;
      color: #166534
    }

    #main-app>.hdr .sync-badge.clk {
      background: #f1f5f9;
      border: 1px solid var(--bd);
      color: #334155
    }

    #main-app>.hdr .ubadge {
      background: #f8fafc;
      border: 1px solid var(--bd);
      color: #0f172a;
      backdrop-filter: none
    }

    #main-app>.hdr .bsm {
      background: #fff;
      border: 1px solid var(--bd);
      color: #334155;
      backdrop-filter: none
    }

    #main-app>.hdr .bsm:hover {
      background: #f1f5f9;
      border-color: #cbd5e1
    }

    #main-app>.hdr .bell-btn {
      color: #334155
    }

    #sb-burger {
      display: none;
      border: 1px solid var(--bd);
      background: #fff;
      border-radius: 8px;
      font-size: 17px;
      padding: 3px 10px;
      cursor: pointer;
      color: #0f172a
    }

    #sb-ov {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .5);
      z-index: 235
    }

    @media(max-width:900px) {
      #sb {
        width: 230px !important;
        transform: translateX(-105%);
        transition: transform .25s ease
      }

      body.sb-open #sb {
        transform: none
      }

      body.sb-open #sb-ov {
        display: block
      }

      #main-app>.hdr,
      #main-app>.ctrl,
      #main-app>.main {
        margin-left: 0 !important
      }

      #sb-burger {
        display: inline-block
      }

      .sb-fold {
        display: none
      }

      body.sb-mini .sb-lb {
        display: inline
      }

      body.sb-mini .sb-brand>div:last-child {
        display: block
      }

      body.sb-mini .sb-support {
        display: block
      }

      body.sb-mini #sb .tab {
        justify-content: flex-start;
        padding: 8.5px 11px;
        margin: 2px 8px;
        gap: 9px
      }
    }

    /* ═══════════════════════════════════════════════════════════════════
       QUẢNG CÁO FACEBOOK — tab Marketing/Ads (đồng bộ Pancake / Facebook Ads)
       ═══════════════════════════════════════════════════════════════════ */
    #pane-ads {
      padding-bottom: 30px
    }

    /* Header tab quảng cáo */
    .ads-head {
      display: flex;
      align-items: center;
      gap: 13px;
      flex-wrap: wrap;
      margin-bottom: 12px
    }

    .ads-head-ic {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, #1877F2, #0a5bd6);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
      box-shadow: 0 4px 12px rgba(24, 119, 242, .28)
    }

    .ads-head-ic svg {
      width: 24px;
      height: 24px;
      fill: #fff
    }

    .ads-head-tt {
      font-size: 19px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -.01em;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .ads-head-sub {
      font-size: 11.5px;
      color: #16a34a;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 1px
    }

    .ads-head-sub .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .18)
    }

    .ads-team-chip-wrap {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 7px 12px;
      box-shadow: var(--shadow-sm)
    }

    .ads-team-chip {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 8px
    }

    .ads-tchip-1 {
      background: #dcfce7;
      color: #15803d
    }

    .ads-tchip-2 {
      background: #cffafe;
      color: #0e7490
    }

    .ads-tchip-0 {
      background: #fff7ed;
      color: #c2410c
    }

    /* Sub-tabs */
    .ads-subtabs {
      display: flex;
      gap: 4px;
      border-bottom: 2px solid var(--bd);
      margin-bottom: 14px;
      flex-wrap: wrap
    }

    .ads-subtab {
      padding: 9px 16px;
      font-size: 13.5px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      border-bottom: 2.5px solid transparent;
      margin-bottom: -2px;
      transition: all .15s;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap
    }

    .ads-subtab:hover {
      color: #1877F2
    }

    .ads-subtab.on {
      color: #1877F2;
      border-bottom-color: #1877F2
    }

    .ads-subpane {
      display: none
    }

    .ads-subpane.on {
      display: block
    }

    .ads-demo-banner {
      background: #fffbeb;
      border: 1px solid #fde68a;
      color: #92400e;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 12px;
      margin-bottom: 13px;
      line-height: 1.5
    }

    @keyframes adsFade {
      from {
        opacity: 0;
        transform: translateY(4px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* Filter bar */
    .ads-filters {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      padding: 11px 13px;
      margin-bottom: 14px;
      box-shadow: var(--shadow-sm)
    }

    .ads-fgrp {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .ads-fgrp>svg {
      width: 16px;
      height: 16px;
      color: #64748b;
      flex: none
    }

    .ads-fsel {
      border: 1px solid var(--bd);
      border-radius: 9px;
      padding: 7px 11px;
      font-size: 12.5px;
      font-weight: 600;
      color: #0f172a;
      background: #fff;
      cursor: pointer;
      outline: none;
      font-family: inherit;
      min-width: 110px
    }

    .ads-fsel:focus {
      border-color: #1877F2;
      box-shadow: 0 0 0 3px rgba(24, 119, 242, .12)
    }

    .ads-fdate {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--bd);
      border-radius: 9px;
      padding: 6px 10px;
      background: #fff
    }

    .ads-fdate input {
      border: none;
      outline: none;
      font-size: 12px;
      font-weight: 600;
      color: #0f172a;
      font-family: inherit;
      background: transparent;
      width: 138px
    }

    .ads-fdate svg {
      width: 15px;
      height: 15px;
      color: #64748b;
      flex: none
    }

    .ads-fdate .arr {
      color: #94a3b8;
      font-size: 13px
    }

    /* Date range picker kiểu Pancake */
    .ads-dp-wrap {
      position: relative
    }

    .ads-dp-btn {
      cursor: pointer;
      font-family: inherit
    }

    .ads-dp-btn:hover {
      border-color: #cbd5e1
    }

    .ads-dp-btn #ads-dp-label {
      font-size: 12.5px;
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap
    }

    .ads-dp {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 60;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      box-shadow: var(--shadow-lg);
      display: flex;
      overflow: hidden;
      min-width: 680px
    }

    /* Panel chọn nhiều page (xem gộp) */
    .ads-pg-panel {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 60;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      box-shadow: var(--shadow-lg);
      min-width: 260px;
      max-height: 320px;
      overflow-y: auto;
      padding: 6px
    }

    .ads-pg-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 9px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 600;
      color: #0f172a;
      cursor: pointer;
      white-space: nowrap
    }

    .ads-pg-item:hover {
      background: #f1f5f9
    }

    .ads-pg-item.ads-pg-all {
      border-bottom: 1px solid var(--bd);
      margin-bottom: 4px;
      padding-bottom: 9px
    }

    .ads-pg-shop {
      color: #94a3b8;
      font-weight: 500
    }

    .ads-dp-presets {
      width: 170px;
      border-right: 1px solid var(--bd);
      padding: 8px 0;
      flex: none;
      max-height: 430px;
      overflow: auto
    }

    .ads-dp-pgroup {
      font-size: 10.5px;
      font-weight: 800;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .4px;
      padding: 9px 16px 4px
    }

    .ads-dp-preset {
      padding: 8px 16px;
      font-size: 12.5px;
      font-weight: 600;
      color: #334155;
      cursor: pointer
    }

    .ads-dp-preset:hover {
      background: #f0f9ff;
      color: #1877F2
    }

    .ads-dp-preset.on {
      background: #e0f2fe;
      color: #1877F2;
      font-weight: 700
    }

    .ads-dp-main {
      padding: 13px;
      flex: 1
    }

    .ads-dp-inputs {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px
    }

    .ads-dp-in {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--bd);
      border-radius: 9px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 700;
      color: #0f172a
    }

    .ads-dp-in svg {
      width: 14px;
      height: 14px;
      color: #94a3b8;
      flex: none
    }

    .ads-dp-in.active {
      border-color: #1877F2;
      box-shadow: 0 0 0 3px rgba(24, 119, 242, .12);
      color: #1877F2
    }

    .ads-dp-day {
      transition: background .08s
    }

    .ads-dp-cals {
      display: flex;
      gap: 18px
    }

    .ads-dp-cal {
      flex: 1
    }

    .ads-dp-chead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px
    }

    .ads-dp-title {
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a
    }

    .ads-dp-nav {
      border: none;
      background: none;
      cursor: pointer;
      color: #64748b;
      font-size: 14px;
      padding: 2px 6px;
      border-radius: 6px
    }

    .ads-dp-nav:hover {
      background: #f1f5f9;
      color: #1877F2
    }

    .ads-dp-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px
    }

    .ads-dp-dow {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      text-align: center;
      padding: 4px 0
    }

    .ads-dp-day {
      font-size: 11.5px;
      text-align: center;
      padding: 7px 0;
      border-radius: 7px;
      cursor: pointer;
      color: #334155;
      border: 1px solid transparent
    }

    .ads-dp-day:hover {
      background: #f1f5f9
    }

    .ads-dp-day.out {
      color: #cbd5e1;
      cursor: default
    }

    .ads-dp-day.out:hover {
      background: none
    }

    .ads-dp-day.today {
      border-color: #bfdbfe;
      font-weight: 800
    }

    .ads-dp-day.in-range {
      background: #e0f2fe;
      border-radius: 0
    }

    .ads-dp-day.range-end {
      background: #1877F2;
      color: #fff;
      font-weight: 800
    }

    .ads-dp-time {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 13px;
      padding-top: 12px;
      border-top: 1px solid var(--bd)
    }

    .ads-dp-time label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b
    }

    .ads-dp-time input {
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 5px 8px;
      font-size: 12px;
      font-family: inherit;
      font-weight: 600
    }

    .ads-dp-foot {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 13px
    }

    @media(max-width:760px) {
      .ads-dp {
        min-width: auto;
        flex-direction: column;
        max-width: 92vw
      }

      .ads-dp-cals {
        flex-direction: column
      }

      .ads-dp-presets {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--bd);
        display: flex;
        flex-wrap: wrap;
        max-height: none
      }
    }

    .ads-btn {
      border: 1px solid var(--bd);
      background: #fff;
      border-radius: 9px;
      padding: 7px 12px;
      font-size: 12.5px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: all .12s;
      font-family: inherit
    }

    .ads-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1
    }

    .ads-btn svg {
      width: 15px;
      height: 15px
    }

    .ads-btn.primary {
      background: var(--msx-green);
      border-color: var(--msx-green);
      color: #fff
    }

    .ads-btn.primary:hover {
      background: var(--msx-green-dark)
    }

    .ads-btn.fb {
      background: #1877F2;
      border-color: #1877F2;
      color: #fff
    }

    .ads-btn.fb:hover {
      background: #0a5bd6
    }

    .ads-spacer {
      margin-left: auto
    }

    /* KPI cards */
    .ads-kpis {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 16px
    }

    .ads-kpi {
      flex: 1 1 142px
    }

    /* 2 cột tiền quan trọng → rộng hơn để không bị cắt số; các cột khác thu nhỏ lại */
    .ads-kpi-money {
      flex: 1.7 1 218px
    }

    .ads-kpi {
      position: relative;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
      transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s ease;
      overflow: hidden;
      min-width: 0
    }

    .ads-kpi::after {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 3px;
      background: var(--kc, #1877F2);
      opacity: 0;
      transition: opacity .16s
    }

    .ads-kpi:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 26px rgba(15, 23, 42, .11)
    }

    .ads-kpi:hover::after {
      opacity: .9
    }

    .ads-kpi-top {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 11px
    }

    .ads-kpi-ic {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none
    }

    .ads-kpi-ic svg {
      width: 19px;
      height: 19px
    }

    .ads-kpi-lb {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      line-height: 1.3;
      letter-spacing: .1px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 29px;
      flex: 1;
      min-width: 0;
      padding-top: 1px
    }

    .ads-kpi-n {
      font-size: clamp(16px, 1.5vw, 22px);
      font-weight: 800;
      color: #0f172a;
      line-height: 1.12;
      letter-spacing: -.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums
    }

    .ads-kpi-foot {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 10px;
      flex-wrap: wrap
    }

    .ads-delta {
      font-size: 11px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: 20px;
      line-height: 1.5
    }

    .ads-delta.up {
      color: #15803d;
      background: #dcfce7
    }

    .ads-delta.down {
      color: #b91c1c;
      background: #fee2e2
    }

    .ads-delta.warn {
      color: #c2410c;
      background: #ffedd5
    }

    .ads-delta.flat {
      color: #64748b;
      background: #f1f5f9
    }

    .ads-kpi-vs {
      font-size: 9.5px;
      color: #94a3b8;
      font-weight: 600
    }

    /* drag-to-reorder cột */
    .ads-dtbl th[draggable="true"] {
      cursor: grab;
      user-select: none
    }

    .ads-dtbl th[draggable="true"]:active {
      cursor: grabbing
    }

    .ads-dtbl th[draggable="true"]::before {
      content: '⋮⋮';
      color: #cbd5e1;
      margin-right: 5px;
      letter-spacing: -2px;
      font-weight: 700;
      opacity: 0;
      transition: opacity .12s
    }

    .ads-dtbl th[draggable="true"]:hover::before {
      opacity: 1
    }

    .ads-dtbl th.drag-over {
      background: #dbeafe !important;
      box-shadow: inset 3px 0 0 #1877F2
    }

    /* pastel icon bgs */
    .ic-green {
      background: #dcfce7;
      color: #16a34a
    }

    .ic-blue {
      background: #dbeafe;
      color: #2563eb
    }

    .ic-purple {
      background: #ede9fe;
      color: #7c3aed
    }

    .ic-teal {
      background: #ccfbf1;
      color: #0d9488
    }

    .ic-amber {
      background: #fef3c7;
      color: #d97706
    }

    .ic-rose {
      background: #ffe4e6;
      color: #e11d48
    }

    .ic-orange {
      background: #ffedd5;
      color: #ea580c
    }

    .ic-indigo {
      background: #e0e7ff;
      color: #4f46e5
    }

    .ic-sky {
      background: #e0f2fe;
      color: #0284c7
    }

    .ic-pink {
      background: #fce7f3;
      color: #db2777
    }

    /* Generic ads card */
    .ads-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 16px;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .05)
    }

    .ads-card-h {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 13px 16px;
      border-bottom: 1px solid var(--bd);
      flex-wrap: wrap
    }

    .ads-card-h h3 {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      margin: 0
    }

    .ads-card-h .sub {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 500
    }

    .ads-card-b {
      padding: 15px 16px
    }

    /* Time-tab grid */
    .ads-time-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 13px;
      margin-bottom: 14px
    }

    @media(max-width:1200px) {
      .ads-time-grid {
        grid-template-columns: 1fr 1fr
      }

      .ads-time-grid>*:first-child {
        grid-column: 1/-1
      }
    }

    @media(max-width:760px) {
      .ads-time-grid {
        grid-template-columns: 1fr
      }
    }

    .ads-chart-wrap {
      position: relative;
      height: 300px
    }

    .ads-chart-toggle {
      display: flex;
      gap: 3px;
      background: #f1f5f9;
      border-radius: 9px;
      padding: 3px;
      margin-left: auto
    }

    .ads-chart-toggle button {
      border: none;
      background: none;
      font-size: 11.5px;
      font-weight: 700;
      color: #64748b;
      padding: 5px 12px;
      border-radius: 7px;
      cursor: pointer;
      font-family: inherit
    }

    .ads-chart-toggle button.on {
      background: #fff;
      color: #1877F2;
      box-shadow: var(--shadow-sm)
    }

    /* Sync card */
    .ads-sync {
      text-align: center;
      padding: 18px 16px
    }

    .ads-sync-ic {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      background: #dcfce7;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 11px
    }

    .ads-sync-ic svg {
      width: 30px;
      height: 30px;
      color: #16a34a
    }

    .ads-sync.is-error .ads-sync-ic {
      background: #fee2e2
    }

    .ads-sync.is-error .ads-sync-ic svg {
      color: #dc2626
    }

    .ads-sync.is-syncing .ads-sync-ic {
      background: #dbeafe
    }

    .ads-sync.is-syncing .ads-sync-ic svg {
      color: #2563eb;
      animation: adsSpin 1s linear infinite
    }

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

    .ads-sync-st {
      font-size: 14px;
      font-weight: 800;
      color: #16a34a
    }

    .ads-sync.is-error .ads-sync-st {
      color: #dc2626
    }

    .ads-sync.is-syncing .ads-sync-st {
      color: #2563eb
    }

    .ads-sync-bar {
      height: 7px;
      border-radius: 5px;
      background: #e2e8f0;
      overflow: hidden;
      margin: 11px 0 6px
    }

    .ads-sync-bar>span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #16a34a, #22c55e);
      border-radius: 5px;
      transition: width .4s
    }

    .ads-sync-time {
      font-size: 11px;
      color: #64748b;
      margin: 7px 0 13px
    }

    .ads-sync-time b {
      color: #0f172a
    }

    /* today perf rows */
    .ads-perf-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px dashed var(--bd)
    }

    .ads-perf-row:last-child {
      border-bottom: none
    }

    .ads-perf-lb {
      font-size: 12px;
      color: #475569;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .ads-perf-lb .d {
      width: 8px;
      height: 8px;
      border-radius: 50%
    }

    .ads-perf-v {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a
    }

    /* insight list */
    .ads-insight {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      padding: 11px 0;
      border-bottom: 1px dashed var(--bd)
    }

    .ads-insight:last-child {
      border-bottom: none
    }

    .ads-insight-ic {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
      font-size: 16px
    }

    .ads-insight-tt {
      font-size: 12.5px;
      font-weight: 700;
      color: #0f172a
    }

    .ads-insight-tx {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.4
    }

    .ads-insight-go {
      margin-left: auto;
      font-size: 11px;
      font-weight: 700;
      color: #1877F2;
      cursor: pointer;
      white-space: nowrap
    }

    /* funnel */
    .ads-funnel {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      align-items: center
    }

    @media(max-width:620px) {
      .ads-funnel {
        grid-template-columns: 1fr
      }
    }

    .ads-fn-vis {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px
    }

    .ads-fn-seg {
      height: 30px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 10.5px;
      font-weight: 700;
      transition: width .4s
    }

    .ads-fn-tbl {
      width: 100%;
      border-collapse: collapse
    }

    .ads-fn-tbl td {
      padding: 7px 4px;
      font-size: 12px;
      border-bottom: 1px solid #f1f5f9
    }

    .ads-fn-tbl td:first-child {
      color: #475569;
      font-weight: 600
    }

    .ads-fn-tbl td:nth-child(2) {
      text-align: right;
      font-weight: 800;
      color: #0f172a
    }

    .ads-fn-tbl td:last-child {
      text-align: right;
      color: #64748b;
      width: 60px
    }

    .ads-fn-total {
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      color: #16a34a;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--bd)
    }

    /* top campaigns mini-table */
    .ads-mini-tbl {
      width: 100%;
      border-collapse: collapse
    }

    .ads-mini-tbl th {
      font-size: 10.5px;
      color: #94a3b8;
      font-weight: 700;
      text-align: left;
      padding: 7px 8px;
      text-transform: uppercase;
      letter-spacing: .3px;
      border-bottom: 1px solid var(--bd)
    }

    .ads-mini-tbl td {
      padding: 9px 8px;
      font-size: 12px;
      border-bottom: 1px solid #f1f5f9
    }

    .ads-mini-tbl tr:last-child td {
      border-bottom: none
    }

    .ads-mini-tbl td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      color: #0f172a
    }

    .ads-rank {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      font-size: 10.5px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    /* Top chiến dịch / Top quảng cáo — kiểu Pancake (2 thẻ cạnh nhau) */
    .ads-top2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px;
      margin-bottom: 14px
    }

    @media(max-width:980px) {
      .ads-top2 {
        grid-template-columns: 1fr
      }
    }

    .ads-top2 .ads-card {
      display: flex;
      flex-direction: column
    }

    .ads-top2 .ads-card-b {
      flex: 1;
      padding: 4px 8px 2px
    }

    .ads-top-tbl {
      width: 100%;
      border-collapse: collapse
    }

    .ads-top-tbl th {
      font-size: 11.5px;
      color: #64748b;
      font-weight: 600;
      text-align: left;
      padding: 9px 10px;
      border-bottom: 1px solid var(--bd);
      white-space: nowrap
    }

    .ads-top-tbl th.r {
      text-align: right
    }

    .ads-top-tbl th .srt {
      color: #cbd5e1;
      font-size: 8px;
      margin-left: 4px;
      vertical-align: middle
    }

    .ads-top-tbl td {
      padding: 10px;
      font-size: 12.5px;
      border-bottom: 1px solid #f1f5f9;
      color: #334155;
      vertical-align: middle
    }

    .ads-top-tbl tr:last-child td {
      border-bottom: none
    }

    .ads-top-tbl tbody tr:hover {
      background: #f8fafc
    }

    .ads-top-tbl td.r {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: #0f172a;
      white-space: nowrap
    }

    .ads-top-nm {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0
    }

    .ads-top-nm .t {
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
      color: #0f172a
    }

    .ads-top-nm .ads-thumb,
    .ads-top-nm .ads-thumb-ph {
      width: 30px;
      height: 30px;
      flex: none
    }

    .ads-card-foot {
      padding: 11px 16px;
      border-top: 1px solid var(--bd)
    }

    .ads-card-foot a {
      font-size: 12.5px;
      font-weight: 600;
      color: #16a34a;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none
    }

    .ads-card-foot a:hover {
      color: #15803d
    }

    .ads-card-foot a svg {
      width: 14px;
      height: 14px
    }

    /* Toolbar above big tables */
    .ads-toolbar {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      margin-bottom: 12px
    }

    .ads-search {
      position: relative;
      display: flex;
      align-items: center
    }

    .ads-search svg {
      position: absolute;
      left: 10px;
      width: 15px;
      height: 15px;
      color: #94a3b8;
      pointer-events: none
    }

    .ads-search input {
      border: 1px solid var(--bd);
      border-radius: 9px;
      padding: 8px 12px 8px 32px;
      font-size: 12.5px;
      width: 230px;
      outline: none;
      font-family: inherit
    }

    .ads-search input:focus {
      border-color: #1877F2;
      box-shadow: 0 0 0 3px rgba(24, 119, 242, .1)
    }

    .ads-chip {
      border: 1px solid var(--bd);
      background: #fff;
      border-radius: 20px;
      padding: 5px 13px;
      font-size: 11.5px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      white-space: nowrap;
      transition: all .12s
    }

    .ads-chip:hover {
      border-color: #1877F2;
      color: #1877F2
    }

    .ads-chip.on {
      background: #1877F2;
      border-color: #1877F2;
      color: #fff
    }

    .ads-chip .c {
      opacity: .7;
      margin-left: 3px
    }

    /* Big sticky data table */
    .ads-tscroll {
      overflow: auto;
      border: 1px solid var(--bd);
      border-radius: 14px;
      background: #fff;
      max-height: 72vh;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .05)
    }

    .ads-dtbl {
      border-collapse: separate;
      border-spacing: 0;
      width: max-content;
      min-width: 100%;
      font-size: 12px
    }

    .ads-dtbl th,
    .ads-dtbl td {
      padding: 9px 11px;
      white-space: nowrap;
      border-bottom: 1px solid #eef2f7;
      text-align: left
    }

    .ads-dtbl thead th {
      position: sticky;
      top: 0;
      z-index: 6;
      background: #f8fafc;
      color: #475569;
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .3px;
      border-bottom: 2px solid var(--bd);
      cursor: default
    }

    .ads-dtbl tbody tr:hover td {
      background: #f0f9ff
    }

    .ads-dtbl td.num,
    .ads-dtbl th.num {
      text-align: right;
      font-variant-numeric: tabular-nums
    }

    .ads-dtbl td.ctr,
    .ads-dtbl th.ctr {
      text-align: center
    }

    .ads-dtbl td.pos {
      color: #16a34a;
      font-weight: 700
    }

    .ads-dtbl td.neg {
      color: #dc2626;
      font-weight: 700
    }

    .ads-dtbl td.muted {
      color: #cbd5e1;
      text-align: center
    }

    /* sticky first column (ID) */
    .ads-dtbl th.sticky-l,
    .ads-dtbl td.sticky-l {
      position: sticky;
      left: 0;
      z-index: 5;
      background: #fff;
      border-right: 1px solid var(--bd)
    }

    .ads-dtbl thead th.sticky-l {
      z-index: 8;
      background: #f8fafc
    }

    .ads-dtbl tbody tr:hover td.sticky-l {
      background: #f0f9ff
    }

    /* total row sticky bottom */
    .ads-dtbl tfoot td {
      position: sticky;
      bottom: 0;
      z-index: 6;
      background: #f1f5f9;
      font-weight: 800;
      color: #0f172a;
      border-top: 2px solid var(--bd);
      border-bottom: none
    }

    .ads-dtbl tfoot td.sticky-l {
      z-index: 7
    }

    .ads-dtbl tfoot td.num {
      text-align: right
    }

    /* status badge */
    .ads-st {
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap
    }

    .ads-st::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor
    }

    .ads-st.run {
      background: #dcfce7;
      color: #15803d
    }

    .ads-st.pause {
      background: #fef3c7;
      color: #b45309
    }

    .ads-st.off {
      background: #f1f5f9;
      color: #64748b
    }

    .ads-st.err {
      background: #fee2e2;
      color: #dc2626
    }

    /* team badge */
    .ads-tb {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      white-space: nowrap
    }

    .ads-tb.t1 {
      background: #dcfce7;
      color: #15803d
    }

    .ads-tb.t2 {
      background: #cffafe;
      color: #0e7490
    }

    .ads-tb.t0 {
      background: #fff7ed;
      color: #c2410c
    }

    /* on/off toggle */
    .ads-toggle {
      position: relative;
      width: 34px;
      height: 19px;
      border-radius: 11px;
      background: #cbd5e1;
      cursor: pointer;
      flex: none;
      transition: background .15s;
      border: none;
      padding: 0
    }

    .ads-toggle.on {
      background: #16a34a
    }

    .ads-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #fff;
      transition: left .15s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
    }

    .ads-toggle.on::after {
      left: 17px
    }

    /* thumbnail */
    .ads-thumb {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      object-fit: cover;
      background: #e2e8f0;
      display: inline-block
    }

    .ads-thumb-ph {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: linear-gradient(135deg, #cbd5e1, #94a3b8);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 13px;
      font-weight: 800
    }

    /* row action buttons */
    .ads-act {
      border: none;
      background: #f1f5f9;
      border-radius: 7px;
      width: 26px;
      height: 26px;
      cursor: pointer;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #475569
    }

    .ads-act:hover {
      background: #e2e8f0;
      color: #1877F2
    }

    /* data-status dot */
    .ads-ds {
      font-size: 10.5px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .ads-ds .d {
      width: 7px;
      height: 7px;
      border-radius: 50%
    }

    .ads-ds.ok {
      color: #16a34a
    }

    .ads-ds.ok .d {
      background: #16a34a
    }

    .ads-ds.warn {
      color: #ea580c
    }

    .ads-ds.warn .d {
      background: #ea580c
    }

    .ads-ds.err {
      color: #dc2626
    }

    .ads-ds.err .d {
      background: #dc2626
    }

    /* pagination */
    .ads-pg {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 13px;
      flex-wrap: wrap
    }

    .ads-pg .info {
      margin-right: auto;
      font-size: 12px;
      color: #64748b
    }

    .ads-pg button {
      border: 1px solid var(--bd);
      background: #fff;
      border-radius: 8px;
      min-width: 32px;
      height: 32px;
      padding: 0 9px;
      font-size: 12.5px;
      font-weight: 700;
      color: #334155;
      cursor: pointer
    }

    .ads-pg button:hover:not(:disabled) {
      background: #f1f5f9
    }

    .ads-pg button.on {
      background: #1877F2;
      border-color: #1877F2;
      color: #fff
    }

    .ads-pg button:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    /* alert cards grid (bottom) */
    .ads-alerts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
      gap: 13px;
      margin-top: 14px
    }

    .ads-alert {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 14px;
      padding: 13px 15px;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
      border-top: 3px solid var(--ac, #94a3b8)
    }

    .ads-alert-h {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px
    }

    .ads-alert-h .ic {
      font-size: 16px
    }

    .ads-alert-h h4 {
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
      margin: 0
    }

    .ads-alert-h .all {
      margin-left: auto;
      font-size: 10.5px;
      font-weight: 700;
      color: #1877F2;
      cursor: pointer
    }

    .ads-alert-row {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
      padding: 5px 0;
      border-bottom: 1px dashed #f1f5f9
    }

    .ads-alert-row:last-child {
      border-bottom: none
    }

    .ads-alert-row .nm {
      color: #334155;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .ads-alert-row .vl {
      margin-left: auto;
      font-weight: 800;
      white-space: nowrap
    }

    .ads-alert-empty {
      font-size: 11px;
      color: #94a3b8;
      padding: 6px 0
    }

    /* insight cards (ad tab bottom) */
    .ads-insight-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 13px;
      margin-top: 14px
    }

    .ads-ic-card {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 16px;
      padding: 0;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .05)
    }

    .ads-ic-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 14px;
      font-size: 12.5px;
      font-weight: 800;
      color: #0f172a;
      border-bottom: 1px solid var(--bd)
    }

    .ads-ic-head.good {
      background: #f0fdf4
    }

    .ads-ic-head.bad {
      background: #fef2f2
    }

    .ads-ic-head.budget {
      background: #fffbeb
    }

    .ads-ic-head.close {
      background: #eff6ff
    }

    .ads-ic-body {
      padding: 13px 14px
    }

    .ads-ic-name {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 11px
    }

    .ads-ic-name b {
      font-size: 13px;
      color: #0f172a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .ads-ic-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 9px
    }

    .ads-ic-stat .l {
      font-size: 10px;
      color: #94a3b8;
      font-weight: 600
    }

    .ads-ic-stat .v {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      margin-top: 1px
    }

    .ads-empty {
      text-align: center;
      padding: 36px 20px;
      color: #94a3b8;
      font-size: 13px
    }

    /* column-picker dropdown */
    .ads-colmenu {
      position: absolute;
      z-index: 40;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 12px;
      box-shadow: var(--shadow-lg);
      padding: 8px;
      max-height: 330px;
      overflow: auto;
      min-width: 220px
    }

    .ads-colmenu label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      padding: 6px 8px;
      border-radius: 7px;
      cursor: pointer;
      color: #334155
    }

    .ads-colmenu label:hover {
      background: #f1f5f9
    }

    .ads-colmenu input {
      accent-color: #1877F2
    }

    /* ─── Báo cáo chi tiết (Ban lãnh đạo) ─── */
    .ads-rep-head {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      background: linear-gradient(120deg, #0d2818, #1B7A3D);
      color: #fff;
      border-radius: 16px;
      padding: 16px 18px;
      margin-bottom: 14px
    }

    .ads-rep-head h3 {
      font-size: 17px;
      font-weight: 900;
      margin: 0;
      letter-spacing: -.01em
    }

    .ads-rep-head .sub {
      font-size: 11.5px;
      opacity: .85;
      font-weight: 500
    }

    .ads-rep-actions {
      margin-left: auto;
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .ads-rep-actions button {
      border: 1px solid rgba(255, 255, 255, .3);
      background: rgba(255, 255, 255, .12);
      color: #fff;
      border-radius: 9px;
      padding: 8px 13px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: inherit;
      transition: background .12s
    }

    .ads-rep-actions button:hover {
      background: rgba(255, 255, 255, .24)
    }

    .ads-rep-actions button.solid {
      background: #fff;
      color: #15803d;
      border-color: #fff
    }

    .ads-rep-teams {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 13px;
      margin-bottom: 14px
    }

    .ads-rep-tcard {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .05)
    }

    .ads-rep-thead {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 13px 16px;
      color: #fff;
      font-weight: 800;
      font-size: 14px
    }

    .ads-rep-thead.t1 {
      background: linear-gradient(120deg, #15803d, #22c55e)
    }

    .ads-rep-thead.t2 {
      background: linear-gradient(120deg, #0e7490, #06b6d4)
    }

    .ads-rep-thead .mgr {
      margin-left: auto;
      font-size: 11px;
      font-weight: 600;
      opacity: .9;
      background: rgba(255, 255, 255, .2);
      padding: 2px 9px;
      border-radius: 20px
    }

    .ads-rep-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--bd)
    }

    .ads-rep-cell {
      background: #fff;
      padding: 12px 15px
    }

    .ads-rep-cell .l {
      font-size: 10.5px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .3px
    }

    .ads-rep-cell .v {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .ads-rep-cell .v.good {
      color: #16a34a
    }

    .ads-rep-cell .v.bad {
      color: #dc2626
    }

    .ads-rep-cell .v.warn {
      color: #ea580c
    }

    .ads-rep-cmp {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0
    }

    .ads-rep-cmp th,
    .ads-rep-cmp td {
      padding: 11px 13px;
      font-size: 12.5px;
      border-bottom: 1px solid #eef2f7;
      text-align: right;
      white-space: nowrap
    }

    .ads-rep-cmp th {
      font-size: 10.5px;
      color: #94a3b8;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .3px;
      background: #f8fafc;
      border-bottom: 2px solid var(--bd)
    }

    .ads-rep-cmp th:first-child,
    .ads-rep-cmp td:first-child {
      text-align: left;
      font-weight: 700
    }

    .ads-rep-cmp tfoot td {
      font-weight: 800;
      background: #f1f5f9;
      border-top: 2px solid var(--bd);
      border-bottom: none
    }

    .ads-rep-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      padding: 12px 15px;
      font-size: 12.5px;
      color: #1e3a5f;
      line-height: 1.55;
      margin-top: 14px
    }

    /* ─── Báo cáo (mockup v2) ─── */
    .ads-kpi-hl {
      border-color: #fbbf24;
      background: linear-gradient(180deg, #fffbeb, #fff)
    }

    .ads-kpi-hl::after {
      background: #f59e0b;
      opacity: 1
    }

    .ads-kpi-hl .ads-kpi-n {
      color: #b45309
    }

    .ads-hl-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10.5px;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 20px;
      margin-top: 8px
    }

    .ads-hl-chip.warn {
      background: #fef3c7;
      color: #b45309
    }

    .ads-hl-chip.ok {
      background: #dcfce7;
      color: #15803d
    }

    .ads-rep2-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 13px
    }

    .ads-rep2-title {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -.01em
    }

    .ads-rep2-title span {
      font-size: 11.5px;
      font-weight: 500;
      color: #94a3b8;
      letter-spacing: 0
    }

    .ads-rep2-act {
      margin-left: auto;
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .ads-rep2-charts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px
    }

    @media(max-width:980px) {
      .ads-rep2-charts {
        grid-template-columns: 1fr
      }
    }

    .ads-rep-wide th,
    .ads-rep-wide td {
      padding: 10px 11px;
      font-size: 12px
    }

    .ads-cb-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 7px;
      vertical-align: middle
    }

    .ads-cb-dot.t1 {
      background: #16a34a
    }

    .ads-cb-dot.t2 {
      background: #2563eb
    }

    .ads-cb-dot.t0 {
      background: #94a3b8
    }

    .ads-cb {
      font-size: 10.5px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 20px;
      white-space: nowrap
    }

    .ads-cb.good {
      background: #dcfce7;
      color: #15803d
    }

    .ads-cb.warn {
      background: #ffedd5;
      color: #c2410c
    }

    .ads-rep-ai {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      background: linear-gradient(120deg, #f0fdf4, #ecfeff);
      border: 1px solid #bbf7d0;
      border-radius: 16px;
      padding: 15px 17px;
      margin-top: 14px
    }

    .ads-rep-ai .ai-ic {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex: none;
      box-shadow: var(--shadow-sm)
    }

    .ads-rep-ai .ai-title {
      font-size: 13.5px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 6px
    }

    .ads-rep-ai ul {
      margin: 0;
      padding-left: 18px
    }

    .ads-rep-ai li {
      font-size: 12.5px;
      color: #334155;
      line-height: 1.7
    }

    .ads-rep-ai li::marker {
      color: #16a34a
    }

    @media print {

      aside#sb,
      .hdr,
      .ctrl,
      .ads-filters,
      .ads-subtabs,
      .ads-rep-actions,
      .sb-support {
        display: none !important
      }

      #main-app>.main {
        margin-left: 0 !important
      }
    }

    @media(max-width:640px) {
      .ads-time-grid {
        grid-template-columns: 1fr
      }

      .ads-kpis {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    /* Chấm công có bộ lọc riêng. Trên mobile giữ header gọn, không để nhóm tài khoản tràn ngang. */
    @media(max-width:640px) {
      html, body { max-width: 100%; overflow-x: hidden }
      body:has(#pane-attendance.a) #main-app>.hdr {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr) auto;
        gap: 8px;
        padding: 8px 10px;
        min-height: 58px;
        align-items: center;
      }
      body:has(#pane-attendance.a) #sb-burger { grid-column: 1; grid-row: 1; width: 42px; height: 42px }
      body:has(#pane-attendance.a) #page-title { grid-column: 2; grid-row: 1; font-size: 18px; white-space:nowrap }
      body:has(#pane-attendance.a) .hdr-mid { display:none }
      body:has(#pane-attendance.a) .hdr-right { grid-column: 3; grid-row: 1; width: auto; gap: 3px; min-width: 0; display: flex; align-items:center }
      body:has(#pane-attendance.a) .hdr-right .bell-wrap { flex: 0 0 auto }
      body:has(#pane-attendance.a) .hdr-right .bell-btn { width:36px;height:36px }
      body:has(#pane-attendance.a) .hdr-right .ubadge { width:36px;height:36px;overflow:hidden;font-size:0;padding:0;border-radius:50%;display:grid;place-items:center }
      body:has(#pane-attendance.a) .hdr-right .ubadge::before { content:'👤';font-size:17px }
      body:has(#pane-attendance.a) .hdr-right .bsm { display:none }
      body:has(#pane-attendance.a) .hdr-right #btn-logout { display:grid;width:36px;height:36px;min-height:36px;padding:0;place-items:center;font-size:0 }
      body:has(#pane-attendance.a) .hdr-right #btn-logout::before { content:'↪';font-size:18px }
      body:has(#pane-attendance.a) .main { padding: 10px 8px }
    }

    /* ════════════════ TAB KINH DOANH — Tổng quan điều hành ════════════════ */
    #pane-kinhdoanh {
      --kd-line: #e8edf3;
      --kd-ink: #0f172a;
      --kd-mut: #64748b
    }

    .kd-top {
      display: flex;
      align-items: center;
      gap: 13px;
      flex-wrap: wrap;
      margin-bottom: 15px
    }

    .kd-top-h {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin-right: auto
    }

    .kd-top-h h2 {
      font-size: 20px;
      font-weight: 900;
      color: var(--kd-ink);
      letter-spacing: -.02em;
      margin: 0;
      line-height: 1.1
    }

    .kd-top-h .kd-sub {
      font-size: 12px;
      color: var(--kd-mut)
    }

    .kd-chip-period {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      border: 1px solid var(--kd-line);
      border-radius: 10px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      white-space: nowrap
    }

    .kd-chip-period svg {
      width: 14px;
      height: 14px;
      color: #1B7A3D
    }

    .kd-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 10px;
      padding: 8px 13px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid var(--kd-line);
      background: #fff;
      color: #334155;
      transition: .15s;
      white-space: nowrap
    }

    .kd-btn:hover {
      background: #f8fafc
    }

    .kd-btn.primary {
      background: linear-gradient(135deg, #1B7A3D, #22924A);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(27, 122, 61, .25)
    }

    .kd-btn.primary:hover {
      filter: brightness(1.06)
    }

    .kd-btn svg {
      width: 15px;
      height: 15px
    }

    .kd-exp-wrap {
      position: relative
    }

    .kd-exp-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 5px);
      background: #fff;
      border: 1px solid var(--kd-line);
      border-radius: 11px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
      padding: 6px;
      min-width: 180px;
      z-index: 30;
      display: none
    }

    .kd-exp-menu.open {
      display: block
    }

    .kd-exp-menu button {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      border: 0;
      background: transparent;
      text-align: left;
      font-size: 12.5px;
      font-weight: 600;
      color: #334155;
      padding: 9px 11px;
      border-radius: 8px;
      cursor: pointer
    }

    .kd-exp-menu button:hover {
      background: #f1f5f9
    }

    /* KPI cards */
    .kd-kpis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 11px;
      margin-bottom: 14px
    }

    /* Màn rộng: thẻ tiền (DT, LN gộp, GTĐ TB) rộng hơn; thẻ số/% (đơn, biên, KH, chốt, hoàn) hẹp lại để không che số tiền */
    @media (min-width:1180px) {
      .kd-kpis {
        grid-template-columns: 1.42fr 1.42fr .82fr .82fr 1.42fr .9fr .82fr .82fr
      }
    }

    .kd-k {
      background: #fff;
      border: 1px solid var(--kd-line);
      border-radius: 15px;
      padding: 13px 14px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
      min-width: 0
    }

    .kd-k-ic {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px
    }

    .kd-k-ic svg {
      width: 19px;
      height: 19px;
      stroke-width: 2
    }

    .kd-k-lb {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .04em;
      color: var(--kd-mut);
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kd-k-val {
      font-size: 21px;
      font-weight: 900;
      color: var(--kd-ink);
      line-height: 1.15;
      margin: 3px 0 5px;
      letter-spacing: -.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kd-d {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 800
    }

    .kd-d.up {
      color: #16a34a
    }

    .kd-d.dn {
      color: #dc2626
    }

    .kd-d.nu {
      color: #94a3b8;
      font-weight: 600
    }

    .kd-k-sub {
      font-size: 10.5px;
      color: #94a3b8;
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kd-k.warn {
      border-color: #fecaca;
      background: linear-gradient(180deg, #fff, #fff7f7)
    }

    /* grid rows */
    .kd-row {
      display: grid;
      gap: 13px;
      margin-bottom: 13px
    }

    .kd-rowB {
      grid-template-columns: 1.55fr 1fr 1fr 1fr
    }

    .kd-rowC {
      grid-template-columns: repeat(4, 1fr)
    }

    .kd-rowD {
      grid-template-columns: repeat(4, 1fr)
    }

    @media(max-width:1300px) {

      .kd-rowB,
      .kd-rowC,
      .kd-rowD {
        grid-template-columns: repeat(2, 1fr)
      }

      .kd-rowB>.kd-card:first-child {
        grid-column: span 2
      }
    }

    @media(max-width:740px) {

      .kd-rowB,
      .kd-rowC,
      .kd-rowD {
        grid-template-columns: 1fr
      }

      .kd-rowB>.kd-card:first-child {
        grid-column: auto
      }
    }

    .kd-card {
      background: #fff;
      border: 1px solid var(--kd-line);
      border-radius: 15px;
      padding: 15px 16px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .kd-card-h {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 13px
    }

    .kd-card-h h3 {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--kd-ink);
      margin: 0
    }

    .kd-card-h .kd-link {
      margin-left: auto;
      font-size: 11.5px;
      font-weight: 700;
      color: #1B7A3D;
      cursor: pointer;
      white-space: nowrap
    }

    .kd-card-h .kd-link:hover {
      text-decoration: underline
    }

    .kd-card-h .kd-aibadge {
      margin-left: auto;
      font-size: 10px;
      font-weight: 800;
      color: #7c3aed;
      background: #f3e8ff;
      border-radius: 20px;
      padding: 2px 9px
    }

    .kd-seg {
      display: inline-flex;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 2px;
      gap: 2px
    }

    .kd-seg button {
      border: 0;
      background: transparent;
      font-size: 11.5px;
      font-weight: 700;
      color: #64748b;
      padding: 4px 11px;
      border-radius: 6px;
      cursor: pointer
    }

    .kd-seg button.a {
      background: #fff;
      color: #0f172a;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .08)
    }

    .kd-rev-foot {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 9px;
      padding-top: 11px;
      border-top: 1px solid var(--kd-line)
    }

    .kd-rev-foot .it {
      display: flex;
      flex-direction: column
    }

    .kd-rev-foot .it b {
      font-size: 15px;
      font-weight: 900;
      color: #0f172a
    }

    .kd-rev-foot .it span {
      font-size: 10.5px;
      color: #94a3b8;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .02em
    }

    .kd-rev-foot .it b.g {
      color: #16a34a
    }

    .kd-rev-foot .it b.gold {
      color: #C68A00
    }

    /* donut + legend */
    .kd-donut-wrap {
      position: relative;
      height: 152px;
      margin: 2px auto 12px;
      max-width: 205px
    }

    .kd-donut-c {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      text-align: center
    }

    .kd-donut-c b {
      font-size: 14px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1.1
    }

    .kd-donut-c span {
      font-size: 9px;
      color: #94a3b8;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em
    }

    .kd-leg {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .kd-leg-it {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px
    }

    .kd-leg-it .dot {
      width: 9px;
      height: 9px;
      border-radius: 3px;
      flex: none
    }

    .kd-leg-it .nm {
      font-weight: 700;
      color: #334155;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .kd-leg-it .vl {
      margin-left: auto;
      font-weight: 800;
      color: #0f172a;
      white-space: nowrap;
      font-size: 11.5px
    }

    .kd-leg-it .pc {
      color: #94a3b8;
      font-weight: 700;
      font-size: 11px;
      min-width: 40px;
      text-align: right
    }

    /* order overview */
    .kd-ov-tot {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding-bottom: 10px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--kd-line)
    }

    .kd-ov-tot .lb {
      font-size: 12px;
      font-weight: 700;
      color: #475569
    }

    .kd-ov-tot b {
      font-size: 19px;
      font-weight: 900;
      color: #0f172a
    }

    .kd-ov {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .kd-ov li {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 0;
      font-size: 12px
    }

    .kd-ov li .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: none
    }

    .kd-ov li .nm {
      color: #475569
    }

    .kd-ov li .n {
      margin-left: auto;
      font-weight: 800;
      color: #0f172a
    }

    .kd-bars {
      margin-top: 11px;
      padding-top: 11px;
      border-top: 1px solid var(--kd-line)
    }

    .kd-bars-h {
      font-size: 10px;
      font-weight: 800;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 9px
    }

    .kd-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 11px
    }

    .kd-bar .lb {
      color: #64748b;
      font-weight: 700;
      min-width: 58px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .kd-bar .track {
      flex: 1;
      height: 7px;
      background: #f1f5f9;
      border-radius: 4px;
      overflow: hidden
    }

    .kd-bar .fill {
      height: 100%;
      border-radius: 4px;
      transition: width .6s
    }

    .kd-bar .vv {
      font-weight: 800;
      color: #334155;
      min-width: 46px;
      text-align: right
    }

    /* insights */
    .kd-ins {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .kd-ins-it {
      display: flex;
      gap: 10px;
      padding: 9px 11px;
      border-radius: 11px;
      border: 1px solid var(--kd-line);
      border-left-width: 3px;
      background: #fafcff
    }

    .kd-ins-it .ic {
      font-size: 16px;
      flex: none;
      line-height: 1.3
    }

    .kd-ins-it .tt {
      font-size: 10.5px;
      font-weight: 800;
      color: #64748b;
      margin-bottom: 2px;
      text-transform: uppercase;
      letter-spacing: .02em
    }

    .kd-ins-it .ds {
      font-size: 12px;
      color: #0f172a;
      font-weight: 600;
      line-height: 1.4
    }

    .kd-ins-it.g {
      border-left-color: #16a34a;
      background: #f0fdf4
    }

    .kd-ins-it.g .ds b {
      color: #15803d
    }

    .kd-ins-it.b {
      border-left-color: #2563eb;
      background: #eff6ff
    }

    .kd-ins-it.b .ds b {
      color: #1d4ed8
    }

    .kd-ins-it.p {
      border-left-color: #7c3aed;
      background: #faf5ff
    }

    .kd-ins-it.p .ds b {
      color: #6d28d9
    }

    .kd-ins-it.r {
      border-left-color: #dc2626;
      background: #fef2f2
    }

    .kd-ins-it.r .ds b {
      color: #b91c1c
    }

    /* tables */
    .kd-tblwrap {
      overflow-x: auto;
      margin: -2px
    }

    .kd-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px
    }

    .kd-tbl th {
      text-align: left;
      font-size: 10px;
      font-weight: 800;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .03em;
      padding: 0 8px 8px;
      border-bottom: 1px solid var(--kd-line);
      white-space: nowrap
    }

    .kd-tbl th.r,
    .kd-tbl td.r {
      text-align: right
    }

    .kd-tbl td {
      padding: 8px;
      border-bottom: 1px solid #f1f5f9;
      color: #334155;
      white-space: nowrap
    }

    .kd-tbl tr:last-child td {
      border-bottom: 0
    }

    .kd-tbl .rk {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      background: #f1f5f9;
      color: #64748b
    }

    .kd-tbl .rk.r1 {
      background: #fef3c7;
      color: #b45309
    }

    .kd-tbl .rk.r2 {
      background: #e2e8f0;
      color: #475569
    }

    .kd-tbl .rk.r3 {
      background: #ffedd5;
      color: #c2410c
    }

    .kd-tbl .nm {
      font-weight: 700;
      color: #0f172a;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .kd-up {
      color: #16a34a;
      font-weight: 800
    }

    .kd-dn {
      color: #dc2626;
      font-weight: 800
    }

    .kd-newb {
      color: #2563eb;
      font-weight: 800
    }

    .kd-av {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #dbeafe;
      color: #1d4ed8;
      font-size: 10px;
      font-weight: 800;
      margin-right: 7px;
      flex: none
    }

    /* targets */
    .kd-tg {
      margin-bottom: 14px
    }

    .kd-tg:last-child {
      margin-bottom: 0
    }

    .kd-tg-h {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
      gap: 8px
    }

    .kd-tg-h .nm {
      font-size: 12px;
      font-weight: 700;
      color: #475569
    }

    .kd-tg-h .vl {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 700;
      white-space: nowrap
    }

    .kd-tg-h .vl b {
      color: #0f172a
    }

    .kd-tg-track {
      height: 9px;
      background: #f1f5f9;
      border-radius: 5px;
      overflow: hidden
    }

    .kd-tg-fill {
      height: 100%;
      border-radius: 5px;
      background: linear-gradient(90deg, #1B7A3D, #22924A);
      transition: width .7s
    }

    .kd-tg-fill.warn {
      background: linear-gradient(90deg, #d97706, #f59e0b)
    }

    .kd-tg-pc {
      font-size: 11px;
      font-weight: 800;
      color: #16a34a;
      margin-top: 4px
    }

    .kd-tg-pc.warn {
      color: #d97706
    }

    /* căn trái cột tên trong các bảng KD */
    .kd-tbl td:not(.r) { text-align: left }
    .kd-tbl .nmcell { display: inline-flex; align-items: center; gap: 7px; text-align: left }

    /* popover chi tiết mục tiêu theo nhân sự */
    .kd-tg.has-pop { position: relative; cursor: help }
    .kd-tg.has-pop .kd-tg-h .nm::after { content: ' ⓘ'; color: #94a3b8; font-size: 10px }
    .kd-tg-pop { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 50; background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; box-shadow: 0 14px 36px rgba(15, 23, 42, .2); padding: 10px 12px; min-width: 320px; max-width: 400px; max-height: 300px; overflow: auto }
    .kd-tg.has-pop:hover .kd-tg-pop { display: block }
    .kd-pop-h { font-size: 11px; font-weight: 800; color: #0f172a; margin-bottom: 7px }
    .kd-pop-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px }
    .kd-pop-tbl th { text-align: right; font-size: 9.5px; font-weight: 800; color: #94a3b8; text-transform: uppercase; padding: 0 6px 5px; border-bottom: 1px solid #eef2f7 }
    .kd-pop-tbl th:first-child { text-align: left }
    .kd-pop-tbl td { padding: 5px 6px; border-bottom: 1px solid #f6f8fb; text-align: right; white-space: nowrap }
    .kd-pop-tbl td:first-child { text-align: left; font-weight: 600; color: #334155 }
    .kd-pop-tbl tr.tot td { border-top: 1.5px solid #e2e8f0; border-bottom: 0; font-weight: 800; color: #0f172a; padding-top: 7px }

    /* health */
    .kd-health {
      display: flex;
      gap: 13px;
      align-items: stretch;
      flex-wrap: wrap
    }

    .kd-hscore {
      flex: none;
      width: 98px;
      background: linear-gradient(160deg, #f0fdf4, #ecfdf5);
      border: 1px solid #bbf7d0;
      border-radius: 13px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 11px 8px
    }

    .kd-hscore .big {
      font-size: 30px;
      font-weight: 900;
      color: #16a34a;
      line-height: 1
    }

    .kd-hscore .u {
      font-size: 10px;
      color: #15803d;
      font-weight: 700;
      margin-top: 1px
    }

    .kd-hscore .lb {
      font-size: 10.5px;
      color: #16a34a;
      font-weight: 800;
      margin-top: 7px;
      text-align: center
    }

    .kd-hsub {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      min-width: 170px
    }

    .kd-hsub-it {
      background: #f8fafc;
      border: 1px solid var(--kd-line);
      border-radius: 11px;
      padding: 9px 10px
    }

    .kd-hsub-it .ic {
      font-size: 15px
    }

    .kd-hsub-it .n {
      font-size: 17px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1;
      margin-top: 3px
    }

    .kd-hsub-it .l {
      font-size: 10px;
      color: #64748b;
      font-weight: 700;
      margin-top: 2px
    }

    .kd-hsub-it .s {
      font-size: 9.5px;
      font-weight: 800;
      margin-top: 1px
    }

    /* alerts + actions */
    .kd-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .kd-li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 9px 11px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1.4
    }

    .kd-li .ic {
      font-size: 14px;
      flex: none;
      margin-top: 1px
    }

    .kd-li.danger {
      background: #fef2f2;
      color: #991b1b
    }

    .kd-li.warn {
      background: #fffbeb;
      color: #92400e
    }

    .kd-li.info {
      background: #eff6ff;
      color: #1e40af
    }

    .kd-li.ok {
      background: #f0fdf4;
      color: #166534
    }

    .kd-li .tt {
      font-weight: 700
    }

    .kd-li .ds {
      opacity: .85;
      font-size: 11px
    }

    .kd-act {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid #f1f5f9
    }

    .kd-act:last-child {
      border-bottom: 0
    }

    .kd-act .ic {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: #f0fdf4;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex: none
    }

    .kd-act .tt {
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.35
    }

    .kd-act .ds {
      font-size: 11px;
      color: #64748b;
      margin-top: 1px;
      line-height: 1.35
    }

    .kd-muted {
      color: #94a3b8;
      font-size: 12px;
      padding: 14px 0;
      text-align: center
    }

    /* lịch sử giá vốn */
    .kd-hist{display:flex;flex-direction:column;gap:10px}
    .kd-hi{border:1px solid #e8edf3;border-radius:11px;overflow:hidden}
    .kd-hi-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f8fafc;padding:8px 12px;border-bottom:1px solid #eef2f7;font-size:11.5px}
    .kd-hi-when{font-weight:800;color:#0f172a}
    .kd-hi-by{color:#475569;font-weight:600}
    .kd-hi-cnt{margin-left:auto;font-size:10.5px;font-weight:800;color:#1d4ed8;background:#dbeafe;border-radius:20px;padding:2px 9px}
    .kd-hi-del{border:1px solid #fecaca;background:#fef2f2;color:#dc2626;border-radius:7px;padding:3px 8px;font-size:11px;cursor:pointer}
    .kd-hi-del:hover{background:#fee2e2}
    .kd-hi-row{display:flex;gap:10px;padding:6px 12px;font-size:12px;border-top:1px solid #f6f8fb;flex-wrap:wrap}
    .kd-hi-nm{font-weight:700;color:#334155;min-width:150px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .kd-hi-ch{color:#64748b}
    .kd-hi-ch b{color:#16a34a}

    .kd-spin {
      display: inline-block;
      width: 13px;
      height: 13px;
      border: 2px solid #cbd5e1;
      border-top-color: #1B7A3D;
      border-radius: 50%;
      animation: kdsp .7s linear infinite;
      vertical-align: -2px;
      margin-right: 6px
    }

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

    @media print {

      #pane-kinhdoanh .kd-top .kd-btn,
      #pane-kinhdoanh .kd-link {
        display: none !important
      }
    }

    /* ============ MSX Toast + Dialog (confirm / prompt / alert) ============ */
    #msx-toasts {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 10010;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: min(380px, calc(100vw - 32px));
      pointer-events: none;
    }
    .msx-toast {
      pointer-events: auto;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      background: #fff;
      border-radius: var(--radius-sm);
      border-left: 4px solid var(--gr);
      box-shadow: var(--shadow-lg);
      font-size: 13px;
      color: #1e293b;
      opacity: 0;
      transform: translateX(40px);
      transition: opacity .28s ease, transform .28s ease;
    }
    .msx-toast.show { opacity: 1; transform: translateX(0); }
    .msx-toast.hide { opacity: 0; transform: translateX(40px); }
    .msx-toast.success { border-left-color: #16a34a; }
    .msx-toast.error { border-left-color: #E53935; }
    .msx-toast.warning { border-left-color: #FB8C00; }
    .msx-toast.info { border-left-color: #1E88E5; }
    .msx-toast .mt-ico { font-size: 15px; line-height: 1.4; flex: 0 0 auto; }
    .msx-toast .mt-body { flex: 1 1 auto; min-width: 0; }
    .msx-toast .mt-title { font-weight: 800; margin-bottom: 2px; }
    .msx-toast .mt-msg { white-space: pre-wrap; word-break: break-word; font-weight: 600; line-height: 1.4; }
    .msx-toast .mt-x {
      flex: 0 0 auto;
      background: none;
      border: none;
      cursor: pointer;
      color: #94a3b8;
      font-size: 14px;
      line-height: 1;
      padding: 0 2px;
      margin: -2px -2px 0 0;
    }
    .msx-toast .mt-x:hover { color: #475569; }

    .msx-ov {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(15, 23, 42, .45);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      transition: opacity .2s ease;
    }
    .msx-ov.show { opacity: 1; }
    .msx-dlg {
      background: #fff;
      width: 420px;
      max-width: 96vw;
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
      overflow: hidden;
      transform: translateY(10px) scale(.98);
      transition: transform .2s ease;
      font-family: 'Inter', sans-serif;
    }
    .msx-ov.show .msx-dlg { transform: translateY(0) scale(1); }
    .msx-dlg .md-head {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 16px 18px 0;
    }
    .msx-dlg .md-ico { font-size: 20px; flex: 0 0 auto; line-height: 1; }
    .msx-dlg .md-title { font-size: 15px; font-weight: 800; color: #0f172a; }
    .msx-dlg .md-body {
      padding: 11px 18px 4px;
      font-size: 13.5px;
      line-height: 1.5;
      color: #334155;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 56vh;
      overflow: auto;
    }
    .msx-dlg .md-inputwrap { padding: 8px 18px 0; }
    .msx-dlg .md-input {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid var(--bd);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: 'Inter', sans-serif;
      background: #fff;
      transition: all .2s;
    }
    .msx-dlg .md-input:focus {
      outline: none;
      border-color: var(--msx-green);
      box-shadow: 0 0 0 3px rgba(27, 122, 61, .08);
    }
    .msx-dlg .md-foot {
      display: flex;
      justify-content: flex-end;
      gap: 9px;
      padding: 16px 18px;
    }
    .msx-btn {
      padding: 9px 18px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid var(--bd);
      background: #fff;
      color: #475569;
      font-family: 'Inter', sans-serif;
      transition: all .15s;
    }
    .msx-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
    .msx-btn.ok {
      border-color: transparent;
      color: #fff;
      background: linear-gradient(135deg, var(--msx-green), var(--msx-green-light));
      box-shadow: 0 2px 8px rgba(27, 122, 61, .2);
    }
    .msx-btn.danger {
      border-color: transparent;
      color: #fff;
      background: linear-gradient(135deg, #E53935, #EF5350);
      box-shadow: 0 2px 8px rgba(229, 57, 53, .2);
    }

/* ===== TAB QUẢNG CÁO (chuyển từ style trong body) ===== */
        /* ===== TAB QUẢNG CÁO — GIAO DIỆN MỚI (prefix axd-) ===== */
        .axd-grid{display:grid;gap:16px;margin-bottom:16px}
        .axd-grid-chart{grid-template-columns:1.9fr 1fr}
        .axd-grid-3{grid-template-columns:repeat(3,1fr)}
        .axd-grid-2{grid-template-columns:repeat(2,1fr)}
        .axd-grid-4{grid-template-columns:repeat(4,1fr)}
        @media(max-width:1180px){.axd-grid-chart,.axd-grid-3,.axd-grid-2,.axd-grid-4{grid-template-columns:1fr}}
        .axd-grid-3,.axd-grid-2{align-items:start}  /* thẻ tự cao theo nội dung → hết khoảng trắng thừa dưới thẻ ít dòng */
        .axd-chart-tools{display:flex;align-items:center;gap:14px}
        /* Phễu quảng cáo DỌC (funnel xếp dọc, segment thu nhỏ dần) */
        .axd-vfunnel{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px}
        .axd-vf-seg{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;color:#fff;border-radius:9px;box-shadow:0 1px 3px rgba(15,23,42,.12)}
        .axd-vf-nm{font-size:11.5px;font-weight:600;opacity:.95;white-space:nowrap}
        .axd-vf-r{display:flex;align-items:center;gap:7px;white-space:nowrap}
        .axd-vf-v{font-size:14.5px;font-weight:800}
        .axd-vf-d{font-size:10px;font-weight:700;opacity:.9}
        .axd-vf-rate{font-size:10.5px;color:#64748b;font-weight:700;padding:5px 0}
        .axd-vf-total{text-align:center;font-size:11.5px;color:#16a34a;font-weight:700;margin-top:10px;padding-top:9px;border-top:1px dashed #e2e8f0}
        /* Thông tin & cảnh báo (bổ sung theo ảnh 1) — xếp ngang, tự xuống dòng */
        .axd-alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
        .axd-alert{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:12px;background:#f8fafc;border:1px solid #eef2f7}
        .axd-alert.warn{background:#fffbeb;border-color:#fde68a}
        .axd-alert.info{background:#eff6ff;border-color:#bfdbfe}
        .axd-alert.ok{background:#f0fdf4;border-color:#bbf7d0}
        .axd-alert.danger{background:#fef2f2;border-color:#fecaca}
        .axd-alert-ic{font-size:18px;flex:0 0 auto;line-height:1.2}
        .axd-alert-bd{flex:1;min-width:0}
        .axd-alert-tt{font-size:12.5px;font-weight:700;color:#334155}
        .axd-alert-tx{font-size:11px;color:#64748b;margin-top:2px;line-height:1.4}
        .axd-alert-link{font-size:11px;font-weight:700;color:#16a34a;cursor:pointer;white-space:nowrap;align-self:center}
        .axd-alert-link:hover{text-decoration:underline}
        /* Chip chọn nhanh thời gian (thay thanh Kỳ chung) */
        .ads-quick{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
        .ads-qchip{font-size:11.5px;font-weight:600;color:#475569;background:#f1f5f9;border:1px solid transparent;border-radius:8px;padding:7px 11px;cursor:pointer;white-space:nowrap;transition:.12s}
        .ads-qchip:hover{background:#e2e8f0}
        .ads-qchip.on{background:#16a34a;color:#fff;border-color:#16a34a;box-shadow:0 1px 4px rgba(22,163,74,.3)}
        .axd-switch{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#475569;cursor:pointer;user-select:none}
        .axd-switch input{display:none}
        .axd-switch i{width:34px;height:18px;border-radius:10px;background:#cbd5e1;position:relative;transition:.2s;flex:0 0 auto}
        .axd-switch i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}
        .axd-switch input:checked + i{background:#2563eb}
        .axd-switch input:checked + i::after{transform:translateX(16px)}
        /* Insight nhanh */
        .axd-iq{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid #f1f5f9}
        .axd-iq:last-child{border-bottom:0}
        .axd-iq-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px}
        .axd-iq-ic.b1{background:#ede9fe}.axd-iq-ic.b2{background:#dbeafe}.axd-iq-ic.b3{background:#fef3c7}.axd-iq-ic.b4{background:#dcfce7}.axd-iq-ic.b5{background:#fee2e2}
        .axd-iq-body{flex:1;min-width:0}
        .axd-iq-tt{font-size:12px;font-weight:700;color:#334155}
        .axd-iq-sub{font-size:10.5px;color:#94a3b8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .axd-iq-right{flex:0 0 auto;text-align:right;display:flex;align-items:center;gap:6px;max-width:46%;justify-content:flex-end}
        .axd-iq-val{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
        .axd-iq-val.g{color:#16a34a}.axd-iq-val.b{color:#2563eb}.axd-iq-val.r{color:#dc2626}.axd-iq-val.a{color:#d97706}
        .axd-iq-bar{width:96px;height:7px;border-radius:5px;background:#eef2f7;overflow:hidden}
        .axd-iq-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#34d399,#fbbf24)}
        .axd-mini{font-size:11px;font-weight:800}.axd-mini.up{color:#16a34a}.axd-mini.down{color:#dc2626}.axd-mini.flat{color:#94a3b8}
        .axd-chev{color:#cbd5e1;font-size:16px;line-height:1}
        /* Phễu ngang */
        .axd-funnel{display:flex;align-items:stretch;flex-wrap:nowrap}
        .axd-fn-step{flex:1;text-align:center;padding:6px 2px;min-width:0}
        .axd-fn-lb{font-size:10.5px;color:#94a3b8;font-weight:600}
        .axd-fn-v{font-size:15px;font-weight:800;color:#1e293b;margin:3px 0;font-variant-numeric:tabular-nums}
        .axd-fn-arrow{flex:0 0 auto;align-self:center;display:flex;flex-direction:column;align-items:center;padding:0 1px}
        .axd-fn-arrow span{font-size:9px;font-weight:700;color:#475569;background:#f1f5f9;border-radius:5px;padding:1px 4px;margin-bottom:3px;white-space:nowrap}
        .axd-fn-arrow b{color:#94a3b8;font-size:13px;line-height:1}
        /* Hiệu quả Team / Page */
        .axd-perf{padding:9px 0;border-bottom:1px solid #f4f6f9}
        .axd-perf:last-child{border-bottom:0}
        .axd-perf-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
        .axd-perf-nm{font-size:12px;font-weight:700;color:#334155;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .axd-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
        .axd-perf-bar{height:8px;border-radius:5px;background:#eef2f7;overflow:hidden;margin-bottom:5px}
        .axd-perf-bar i{display:block;height:100%;border-radius:5px}
        .axd-perf-meta{display:flex;justify-content:space-between;font-size:10.5px;color:#94a3b8}
        .axd-perf-meta b{color:#334155;font-weight:700}
        /* Top lists */
        .axd-tophdr{display:flex;align-items:center;gap:10px;padding:0 2px 7px;font-size:9.5px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid #f1f5f9}
        .axd-tophdr .axd-top-nums span{color:#94a3b8}
        .axd-toprow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #f4f6f9}
        .axd-toprow:last-child{border-bottom:0}
        .axd-rank{flex:0 0 auto;width:20px;height:20px;border-radius:6px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;background:#cbd5e1}
        .axd-rank.r1{background:#f59e0b}.axd-rank.r2{background:#94a3b8}.axd-rank.r3{background:#d97706}
        .axd-toprow .ads-thumb,.axd-toprow .ads-thumb-ph{width:30px;height:30px;border-radius:7px;flex:0 0 auto;font-size:13px}
        .axd-top-main{flex:1;min-width:0}
        .axd-top-nm{font-size:12px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .axd-top-ty{font-size:10px;color:#94a3b8;margin-top:1px}
        .axd-badge{display:inline-block;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:20px;margin-top:3px}
        .axd-badge.green{background:#dcfce7;color:#16a34a}.axd-badge.amber{background:#fef3c7;color:#b45309}.axd-badge.gray{background:#f1f5f9;color:#64748b}
        .axd-top-nums{flex:0 0 auto;display:flex;gap:12px;align-items:center;font-size:11.5px;color:#475569;font-variant-numeric:tabular-nums}
        .axd-top-nums span{min-width:62px;text-align:right;display:inline-block}
        .axd-top-nums .roas{min-width:32px;font-weight:800;color:#16a34a}
        .axd-top-spk{flex:0 0 auto;width:60px;height:24px}
        .axd-spark{display:block}
        @media(max-width:1480px){.axd-top-spk{display:none}}
        /* KPI phụ dưới cùng */
        .axd-bk{padding:14px 16px}
        .axd-bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
        .axd-bk-lb{font-size:12px;font-weight:600;color:#64748b}
        .axd-bk-spk{width:70px;height:24px;flex:0 0 auto}
        .axd-bk-v{font-size:21px;font-weight:800;color:#1e293b;margin:6px 0 5px;font-variant-numeric:tabular-nums}
        .axd-bk-foot{font-size:11px;display:flex;align-items:center;gap:5px}
    .mx-shift-flex-time{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border:1px solid #a6e4c1;background:#f2fbf6;border-radius:14px;margin-bottom:14px}
    .mx-shift-flex-time[hidden]{display:none}
    .mx-shift-flex-time .mx-shift-time-hint{grid-column:1/-1;color:#067647;font-size:12px;font-weight:700}
    .mx-shift-flex-time .mx-shift-time-hint.bad{color:#d92d20}
    @media(max-width:640px){.mx-shift-flex-time{grid-template-columns:1fr}}