/* ═ ══════════════════════════════════════════════════════════════
    KJG HỆ THỐNG NHẬP LIỆU — Design System v2
    Redesigned CSS: cleaner, easier to read, professional
  ═ ══════════════════════════════════════════════════════════════ */

  /* ─ ─ DESIGN TOKENS ─────────────────────────────────────────── */
  :root {
   /* Brand palette */
   --navy:    #0d1b2e;
   --blue:    #1a3a6e;
   --accent:   #2563eb;
   --accent-h:  #1d4ed8;
   --cyan:    #06b6d4;

   /* Semantic colours */
   --green:   #16a34a;
   --green-bg:  #f0fdf4;
   --green-bd:  #86efac;
   --red:    #dc2626;
   --red-bg:   #fef2f2;
   --red-bd:   #fca5a5;
   --amber:   #d97706;
   --amber-bg:  #fffbeb;
   --amber-bd:  #fcd34d;
   --purple:   #7c3aed;
   --purple-bg: #ede9fe;
   --purple-bd: #c4b5fd;

   /* Surface */
   --bg:     #f4f6f9;
   --card:    #ffffff;
   --border:   #e2e8f0;
   --border-h:  #cbd5e1;

   /* Text */
   --text:    #0f172a;
   --text-2:   #334155;
   --muted:   #64748b;
   --subtle:   #94a3b8;

   /* Sizing */
   --ih:     38px;    /* input height */
   --radius:   8px;
   --radius-lg: 12px;
   --radius-xl: 16px;

   /* Type scale */
   --fs-xs:   11px;
   --fs-sm:   12.5px;
   --fs-base:  14px;
   --fs-md:   15px;
   --fs-lg:   17px;
   --fs-xl:   22px;

   /* Spacing scale (4px base) */
   --sp-1: 4px;
   --sp-2: 8px;
   --sp-3: 12px;
   --sp-4: 16px;
   --sp-5: 20px;
   --sp-6: 24px;

   /* Shadows */
   --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
   --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
   --shadow-lg: 0 8px 28px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
   --shadow-xl: 0 20px 56px rgba(0,0,0,.18);

   /* Fonts */
   --font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  /* ─ ─ RESET ──────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
   font-family: var(--font);
   background: var(--bg);
   color: var(--text);
   font-size: var(--fs-base);
   line-height: 1.6;
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "cv02","cv03","cv04","cv11";
  }

  /* ─ ─ HEADER ─────────────────────────────────────────────────── */
  .app-header {
   background: linear-gradient(135deg, #0d1b2e 0%, #132240 55%, #1a3a6e 100%);
   color: #fff;
   padding: 0 var(--sp-6);
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 2px 16px rgba(0,0,0,.28);
  }
  .logo {
   font-size: var(--fs-md);
   font-weight: 700;
   letter-spacing: .3px;
   display: flex;
   align-items: center;
   gap: var(--sp-3);
  }
  .logo-badge {
   background: var(--accent);
   padding: 3px 10px;
   border-radius: 5px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   font-family: var(--font-mono);
  }
  .header-right { display: flex; align-items: center; gap: var(--sp-3); }
  .sync-btn {
   background: rgba(255,255,255,.1);
   border: 1px solid rgba(255,255,255,.18);
   color: #fff;
   padding: 6px var(--sp-4);
   border-radius: 7px;
   cursor: pointer;
   font-size: 12px;
   font-family: var(--font);
   font-weight: 500;
   transition: background .2s;
  }
  .sync-btn:hover { background: rgba(255,255,255,.2); }

  /* ─── ALERT BELL ─── */
  .alert-bell-btn {
   position: relative;
   background: none;
   border: 1px solid rgba(255,255,255,.18);
   border-radius: 8px;
   color: #fff;
   width: 36px; height: 36px;
   display: flex; align-items: center; justify-content: center;
   cursor: pointer;
   transition: background .2s;
  }
  .alert-bell-btn:hover { background: rgba(255,255,255,.15); }
  .alert-bell-btn.has-alerts { animation: bellShake 1s ease-in-out; }
  .alert-badge {
   position: absolute; top: -5px; right: -5px;
   background: #dc2626; color: #fff;
   font-size: 10px; font-weight: 700;
   min-width: 18px; height: 18px;
   border-radius: 9px;
   display: flex; align-items: center; justify-content: center;
   padding: 0 4px;
   box-shadow: 0 1px 3px rgba(0,0,0,.3);
  }
  @keyframes bellShake {
   0%,100% { transform: rotate(0); }
   10%,30%,50% { transform: rotate(8deg); }
   20%,40% { transform: rotate(-8deg); }
   60% { transform: rotate(0); }
  }

  /* ─── ALERT PANEL ─── */
  .alert-panel {
   position: fixed; top: 56px; right: 16px;
   width: 380px; max-height: 70vh;
   background: #fff; border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0,0,0,.18);
   z-index: 9999;
   overflow: hidden;
   border: 1px solid #e5e7eb;
  }
  .alert-panel-header {
   display: flex; align-items: center; justify-content: space-between;
   padding: 14px 18px;
   background: var(--navy, #0d1b2e); color: #fff;
   font-size: 14px; font-weight: 600;
  }
  .alert-panel-close {
   background: none; border: none; color: #fff;
   font-size: 22px; cursor: pointer; opacity: .7;
   line-height: 1;
  }
  .alert-panel-close:hover { opacity: 1; }
  .alert-panel-body {
   max-height: calc(70vh - 52px);
   overflow-y: auto;
   padding: 0;
  }
  .alert-group {
   border-bottom: 1px solid #f3f4f6;
   padding: 14px 18px;
  }
  .alert-group:last-child { border-bottom: none; }
  .alert-group-title {
   font-size: 12px; font-weight: 700; text-transform: uppercase;
   letter-spacing: .5px; margin-bottom: 8px;
   display: flex; align-items: center; gap: 6px;
  }
  .alert-group-title.red   { color: #dc2626; }
  .alert-group-title.amber { color: #d97706; }
  .alert-item {
   font-size: 13px; color: #374151;
   padding: 5px 0 5px 16px;
   position: relative; line-height: 1.5;
  }
  .alert-item::before {
   content: ''; position: absolute; left: 0; top: 11px;
   width: 6px; height: 6px; border-radius: 50%;
   background: #9ca3af;
  }
  .alert-item.critical::before { background: #dc2626; }
  .alert-item.warning::before  { background: #f59e0b; }
  .alert-empty {
   padding: 30px 18px; text-align: center;
   color: #6b7280; font-size: 13px;
  }
  .alert-loading {
   padding: 30px 18px; text-align: center;
   color: #6b7280; font-size: 13px;
  }
  @media (max-width: 480px) {
   .alert-panel { right: 8px; left: 8px; width: auto; }
  }

  #conn-status {
   font-size: 11px;
   color: rgba(255,255,255,.5);
   display: flex;
   align-items: center;
   gap: 5px;
  }
  .conn-dot {
   width: 7px; height: 7px;
   border-radius: 50%;
   background: #64748b;
   flex-shrink: 0;
   transition: background .3s;
  }
  .conn-dot.ok { background: #4ade80; box-shadow: 0 0 7px #4ade80; }
  .conn-dot.err { background: var(--red); }

  /* ─ ─ NAV TABS ────────────────────────────────────────────────── */
  .role-bar {
   background: #0d1b2e;
   border-bottom: 2px solid var(--accent);
   padding: 0 20px;
   display: flex;
   overflow-x: auto;
   position: sticky;
   top: 54px;
   z-index: 99;
   scrollbar-width: none;
  }
  .role-bar::-webkit-scrollbar { display: none; }
  .role-tab {
   padding: 12px 20px;
   font-size: 12px;
   font-weight: 600;
   color: rgba(255,255,255,.42);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
   transition: color .18s, border-color .18s;
   display: flex;
   align-items: center;
   gap: 7px;
   white-space: nowrap;
   letter-spacing: .2px;
  }
  .role-tab:hover { color: rgba(255,255,255,.72); }
  .role-tab.active { color: #fff; border-bottom-color: var(--cyan); }
  .role-tab .rdot {
   width: 6px; height: 6px;
   border-radius: 50%;
   background: rgba(255,255,255,.18);
   transition: background .2s, box-shadow .2s;
   flex-shrink: 0;
  }
  .role-tab.active .rdot { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }

  /* ─ ─ LAYOUT ──────────────────────────────────────────────────── */
  .tab-pane {
   display: none;
   padding: var(--sp-5) var(--sp-6) 48px;
   max-width: 1300px;
   margin: 0 auto;
  }
  .tab-pane.active { display: block; }

  /* ─ ─ CARD ─────────────────────────────────────────────────────── */
  .card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--sp-5);
   margin-bottom: var(--sp-4);
   box-shadow: var(--shadow-sm);
  }
  .card-hd {
   font-size: var(--fs-sm);
   font-weight: 700;
   letter-spacing: .4px;
   color: var(--muted);
   margin-bottom: var(--sp-4);
   padding-bottom: var(--sp-3);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   gap: var(--sp-2);
  }
  .badge-dest {
   font-size: 10px;
   padding: 2px 9px;
   border-radius: 5px;
   font-weight: 600;
   margin-left: auto;
  }
  .badge-green { background: var(--green-bg); color: #166534; border: 1px solid var(--green-bd); }
  .badge-blue { background: #eff6ff;     color: #1e40af; border: 1px solid #bfdbfe; }

  /* ─ ─ GRID ─────────────────────────────────────────────────────── */
  .g { display: grid; gap: var(--sp-3); }
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
  .g5 { grid-template-columns: repeat(5, 1fr); }
  .g6 { grid-template-columns: repeat(6, 1fr); }
  .c2 { grid-column: span 2; }
  .c3 { grid-column: span 3; }
  .c4 { grid-column: span 4; }

  /* ─ ─ FIELD & LABEL ────────────────────────────────────────────── */
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label {
   font-size: var(--fs-sm);
   font-weight: 600;
   color: var(--muted);
   letter-spacing: .1px;
   display: flex;
   align-items: center;
   gap: 5px;
  }
  .col-tag {
   font-family: var(--font-mono);
   font-size: 9px;
   background: #f1f5f9;
   border: 1px solid var(--border);
   border-radius: 3px;
   padding: 0 4px;
   color: var(--accent);
   font-weight: 500;
  }
  .req { color: var(--red); }

  /* ─ ─ INPUTS ───────────────────────────────────────────────────── */
  input, select, textarea {
   border: 1.5px solid var(--border);
   border-radius: var(--radius);
   padding: 0 11px;
   font-family: var(--font);
   font-size: var(--fs-base);
   color: var(--text);
   background: #fff;
   transition: border-color .15s, box-shadow .15s;
   width: 100%;
  }
  input, select { height: var(--ih); }
  textarea { padding: 8px 11px; resize: vertical; min-height: 64px; }
  input:focus, select:focus, textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  }
  input[readonly], textarea[readonly] {
   background: #f8fafc;
   color: var(--muted);
   cursor: default;
  }
  input[readonly]:focus { border-color: var(--border); box-shadow: none; }
  .af-filled {
   background: #eff6ff !important;
   color: #1d4ed8 !important;
   font-weight: 600 !important;
   border-color: #bfdbfe !important;
  }
  input:disabled, select:disabled {
   background: #f1f5f9;
   color: var(--subtle);
   cursor: not-allowed;
  }

  /* ─ ─ VẬT TƯ DROPDOWN ─────────────────────────────────────────── */
  .vt-wrap { position: relative; }
  .vt-input-row { display: flex; gap: 6px; }
  .vt-input-row input { flex: 1; }
  .vt-btn, .lsx-btn {
   height: var(--ih);
   padding: 0 15px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: var(--radius);
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
   font-family: var(--font);
   transition: background .18s;
   white-space: nowrap;
  }
  .vt-btn:hover, .lsx-btn:hover { background: var(--accent-h); }
  .vt-dropdown {
   position: absolute;
   top: calc(100% + 4px);
   left: 0; right: 0;
   background: #fff;
   border: 1.5px solid var(--accent);
   border-radius: var(--radius-lg);
   max-height: 270px;
   overflow-y: auto;
   z-index: 1000;
   display: none;
   box-shadow: var(--shadow-lg);
  }
  .vt-dropdown.open { display: block; }
  .vt-item .v-stock { margin-left: auto; font-weight: 700; color: var(--green); background: #f0fdf4; padding: 2px 6px; border-radius: 4px; font-size: 10px; }
  .vt-item .v-stock.low { color: var(--red); background: #fef2f2; }
  
  .btn-calc-mini {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e2e8f0; 
    background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: all 0.2s; color: #64748b;
  }
  .btn-calc-mini:hover { background: #f8fafc; border-color: var(--accent); color: var(--accent); }
  .vt-search-box {
   padding: 8px 10px;
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   background: #fff;
  }
  .vt-search-box input { height: 32px; font-size: 12px; }
  .vt-group-hd {
   padding: 6px 12px 3px;
   font-size: 10px;
   font-weight: 700;
   color: var(--subtle);
   text-transform: uppercase;
   letter-spacing: .7px;
   background: #f8fafc;
   border-top: 1px solid var(--border);
  }
  .vt-item {
   padding: 8px 13px;
   cursor: pointer;
   border-bottom: 1px solid #f1f5f9;
   transition: background .1s;
  }
  .vt-item:hover, .vt-item.sel { background: #eff6ff; }
  .vt-item .vn { font-weight: 500; font-size: var(--fs-base); }
  .vt-item .vm { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-top: 2px; }
  .vt-add-row {
   padding: 10px 13px;
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 12px;
   font-weight: 600;
   color: var(--accent);
   cursor: pointer;
   background: #f0f9ff;
   border-top: 1px solid var(--border);
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .vt-add-row:hover { background: #e0f2fe; }
  .vt-selected {
   margin-top: 5px;
   padding: 6px 11px;
   background: var(--green-bg);
   border: 1.5px solid var(--green-bd);
   border-radius: 7px;
   font-size: 12px;
   font-weight: 500;
   color: var(--green);
   display: none;
  }

  /* ─ ─ TRẠNG THÁI DOT ───────────────────────────────────────────── */
  .tt-wrap { position: relative; }
  .tt-dot {
   position: absolute;
   left: 11px; top: 50%;
   transform: translateY(-50%);
   width: 8px; height: 8px;
   border-radius: 50%;
   pointer-events: none;
   z-index: 1;
  }
  .tt-wrap select { padding-left: 27px; font-weight: 600; }

  /* ─ ─ LSX STATUS ───────────────────────────────────────────────── */
  .lsx-wrap { display: flex; gap: 6px; }
  .lsx-wrap input { flex: 1; }
  .lsx-status {
   height: var(--ih);
   padding: 0 13px;
   border-radius: var(--radius);
   font-size: 12px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 5px;
   white-space: nowrap;
   background: #f1f5f9;
   color: var(--muted);
   border: 1.5px solid var(--border);
  }
  .lsx-status.ok   { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
  .lsx-status.err   { background: var(--red-bg);  color: var(--red);  border-color: var(--red-bd); }
  .lsx-status.loading { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }

  /* ─ ─ KT PICKER BAR ────────────────────────────────────────────── */
  .kt-picker-bar {
   display: flex;
   gap: var(--sp-2);
   align-items: center;
   margin-top: 10px;
   padding: 10px 15px;
   background: #eff6ff;
   border: 1.5px solid #bfdbfe;
   border-radius: var(--radius);
  }
  .kt-picker-bar span { font-size: 12px; color: var(--accent); font-weight: 600; flex: 1; }
  .kt-picker-info { font-size: 12px; color: var(--muted); }
  .kt-picker-info strong { color: var(--accent); }

  /* ─ ─ PASTE TABLE ──────────────────────────────────────────────── */
  .paste-hint {
   font-size: 11px;
   color: var(--amber);
   background: var(--amber-bg);
   border: 1px solid var(--amber-bd);
   padding: 7px 11px;
   border-radius: 6px;
   margin-bottom: 10px;
  }
  .paste-table-wrap {
   overflow-x: auto;
   border: 1.5px solid var(--border);
   border-radius: var(--radius);
  }
  .paste-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
  .paste-table th {
   background: #f8fafc;
   padding: 9px 11px;
   text-align: left;
   font-size: 10px;
   font-weight: 700;
   color: var(--muted);
   letter-spacing: .4px;
   border-bottom: 1.5px solid var(--border);
   white-space: nowrap;
  }
  .paste-table td {
   padding: 4px 6px;
   border-bottom: 1px solid #f1f5f9;
   vertical-align: middle;
  }
  .paste-table tr:last-child td { border-bottom: none; }
  .paste-table tr:hover td { background: #fafbfc; }
  .paste-table input {
   height: 32px;
   font-size: var(--fs-base);
   border-color: transparent;
   border-radius: 5px;
   padding: 0 9px;
  }
  .paste-table input:focus { border-color: var(--accent); background: #fff; }
  .paste-table td.row-num {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--subtle);
   text-align: center;
   width: 34px;
  }
  .del-row-btn {
   background: none;
   border: none;
   color: #fca5a5;
   cursor: pointer;
   font-size: 15px;
   padding: 2px 5px;
   border-radius: 4px;
   transition: color .15s, background .15s;
  }
  .del-row-btn:hover { color: var(--red); background: var(--red-bg); }
  .add-row-btn {
   margin-top: 8px;
   height: 32px;
   padding: 0 14px;
   background: transparent;
   border: 1.5px dashed #cbd5e1;
   color: var(--muted);
   border-radius: 7px;
   cursor: pointer;
   font-size: 12px;
   font-family: var(--font);
   font-weight: 500;
   transition: border-color .2s, color .2s;
   display: flex;
   align-items: center;
   gap: 5px;
  }
  .add-row-btn:hover { border-color: var(--accent); color: var(--accent); }
  .paste-info-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 7px;
  }
  .paste-count { font-size: 11px; color: var(--muted); }
  .paste-count strong { color: var(--accent); }

  /* ─ ─ WORKER CARD ──────────────────────────────────────────────── */
  .worker-card {
   background: #f8fafc;
   border: 1.5px solid var(--border);
   border-radius: var(--radius);
   padding: 9px 12px;
   display: flex;
   align-items: center;
   gap: 7px;
  }
  .worker-num {
   font-size: 11px;
   font-weight: 700;
   color: var(--muted);
   min-width: 28px;
   font-family: var(--font-mono);
  }
  .worker-card select,
  .worker-card input[type=text] { flex: 1; height: 32px; font-size: 12px; }
  .worker-card input[type=number] { width: 62px; height: 32px; font-size: 12px; text-align: center; }

  /* ─ ─ MODAL ────────────────────────────────────────────────────── */

  /* 1. Làm nổi bật tên công ty và tiêu đề modal */
.modal-header .brand-title {
  color: #1a3353; /* Màu xanh navy đậm chuyên nghiệp */
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 2px;
}

.modal-header .brand-subtitle {
  color: #5f6368;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.8;
}

/* 2. Thu nhỏ và làm đẹp Checkbox */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #007bff; /* Màu xanh thương hiệu khi tick */
  vertical-align: middle;
  transition: transform 0.1s;
}

input[type="checkbox"]:hover {
  transform: scale(1.1);
}

/* 3. Cải thiện bảng dữ liệu (Table) */
.cnps-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.cnps-table th {
  background-color: #f8f9fa;
  color: #4a5568;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  padding: 12px 10px;
  border-bottom: 2px solid #edf2f7;
}

.cnps-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
}

.cnps-table tr:hover {
  background-color: #fcfcfc;
}
  .modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(8,16,32,.6);
   z-index: 500;
   display: none;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(4px);
  }
  .modal-overlay.open { display: flex; }
  #addvt-modal.modal-overlay { z-index: 600; }
  .modal-box {
   background: #fff;
   border-radius: var(--radius-xl);
   width: 860px;
   max-width: 96vw;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-xl);
   overflow: hidden;
  }
  .modal-box.sm { width: 520px; }
  .modal-box.lg { width: 1000px; }
  .modal-box.xl { width: 1100px; }
  .modal-header {
   padding: var(--sp-4) var(--sp-5);
   background: linear-gradient(135deg, #0d1b2e, #1a3a6e);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
  }
  .modal-header h3 { font-size: var(--fs-md); font-weight: 600; }
  .modal-close {
   background: rgba(255,255,255,.1);
   border: none;
   color: #fff;
   width: 30px; height: 30px;
   border-radius: 7px;
   cursor: pointer;
   font-size: 17px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .15s;
  }
  .modal-close:hover { background: rgba(255,255,255,.22); }
  .modal-filter {
   padding: 10px var(--sp-4);
   border-bottom: 1px solid var(--border);
   display: flex;
   gap: 10px;
   flex-shrink: 0;
   flex-wrap: wrap;
   align-items: center;
  }
  .modal-filter input { flex: 1; min-width: 160px; height: 34px; font-size: var(--fs-base); }
  .modal-filter select { width: 170px; height: 34px; font-size: var(--fs-base); }
  .modal-body { flex: 1; overflow-y: auto; padding: 14px var(--sp-4); }
  .modal-footer {
   padding: 12px var(--sp-4);
   border-top: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #f8fafc;
   flex-shrink: 0;
  }

  /* ─ ─ CUON PICKER CARDS ────────────────────────────────────────── */
  .cuon-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .cuon-card {
   border: 1.5px solid var(--border);
   border-radius: 10px;
   padding: 11px 13px;
   cursor: pointer;
   transition: border-color .16s, background .16s;
  }
  .cuon-card:hover { border-color: var(--accent); background: #f8faff; }
  .cuon-card.picked { border-color: var(--accent); background: #eff6ff; }
  .cuon-card.hidden { display: none; }
  .cc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
  .cc-stt { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-base); color: var(--accent); }
  .cc-tt { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
  .tt-ton { background: var(--green-bg); color: #166534; }
  .tt-xuat { background: #eff6ff;     color: #1e40af; }
  .tt-dang { background: var(--red-bg);  color: var(--red); }
  .cc-name  { font-size: 12px; color: var(--text); margin-bottom: 4px; line-height: 1.4; }
  .cc-bottom { display: flex; justify-content: space-between; font-size: 11px; }
  .cc-ncc  { color: var(--muted); }
  .cc-kg   { font-weight: 700; font-size: var(--fs-base); }
  .cc-kg.ok { color: var(--green); }
  .cc-kg.low { color: var(--red); }
  .kg-panel {
   display: none;
   margin-top: 8px;
   padding: 8px 11px;
   background: #f0f7ff;
   border-radius: 7px;
   border: 1px solid #c5d8f5;
  }
  .cuon-card.picked .kg-panel { display: block; }
  .kg-panel label { font-size: 11px; font-weight: 600; color: #1a3a6e; margin-bottom: 4px; display: block; }
  .kg-panel input { height: 32px; font-size: var(--fs-base); font-weight: 600; border-color: var(--accent); }
  .picker-group-hd {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .7px;
   color: #fff;
   background: #1e293b;
   padding: 5px 10px;
   border-radius: 6px;
   margin: 8px 0 5px;
   grid-column: 1 / -1;
  }
  .picker-group-hd.amber { background: #78350f; }

  /* ─ ─ UNDO SECTION ─────────────────────────────────────────────── */
  .undo-section {
   margin-top: 8px;
   padding: 10px 14px;
   background: #fffbeb;
   border: 1.5px solid var(--amber-bd);
   border-radius: var(--radius);
  }
  .undo-section-hd { font-size: 11px; font-weight: 600; color: var(--amber); margin-bottom: 8px; }
  .undo-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: #fff;
   border: 1px solid var(--amber-bd);
   border-radius: 6px;
   padding: 3px 9px;
   font-size: 12px;
   font-weight: 500;
   color: var(--amber);
   margin: 2px;
  }
  .undo-tag .undo-btn { cursor: pointer; color: #f59e0b; font-size: var(--fs-base); margin-left: 2px; }
  .undo-tag .undo-btn:hover { color: var(--red); }

  /* ─ ─ ADD VT MODAL ─────────────────────────────────────────────── */
  .addvt-body { padding: var(--sp-5); }

  /* ─ ─ BUTTONS ──────────────────────────────────────────────────── */
  .submit-bar {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: flex-end;
   padding-top: 14px;
   border-top: 1px solid var(--border);
   margin-top: 4px;
  }
  .btn-reset {
   height: 36px;
   padding: 0 16px;
   background: #ffffff;
   border: 1px solid #d1d1d6;
   color: #1c1c1e;
   border-radius: 6px;
   font-family: var(--font);
   font-size: var(--fs-base);
   font-weight: 500;
   cursor: pointer;
   transition: background .15s, border-color .15s, transform .15s;
   box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .btn-reset:hover { background: #f2f2f7; border-color: #c7c7cc; }
  .btn-reset:active { transform: scale(0.98); background: #e5e5ea; }
  .btn-save {
   height: 36px;
   padding: 0 20px;
   background: #007aff;
   color: #fff;
   border: none;
   border-radius: 6px;
   font-family: var(--font);
   font-size: var(--fs-base);
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: background .15s, transform .15s;
   box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .btn-save:hover { background: #006ee6; }
  .btn-save:active { transform: scale(0.97); }
  .btn-save.green {
   background: #34c759;
   box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .btn-save.green:hover { background: #2ebd4f; }
  .btn-save:disabled {
   background: #e5e5ea;
   color: #8e8e93;
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
  }
  .sel-info { font-size: 12px; color: var(--muted); }
  .sel-info strong { color: var(--accent); }

  /* ─ ─ DIVIDER ──────────────────────────────────────────────────── */
  .divider { height: 1px; background: var(--border); margin: 14px 0; }

  /* ─ ─ TOAST ────────────────────────────────────────────────────── */
  .toast-wrap {
   position: fixed;
   top: 66px; right: var(--sp-4);
   z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 7px;
  }
  .toast {
   padding: 11px var(--sp-4);
   border-radius: var(--radius);
   font-size: var(--fs-base);
   font-weight: 500;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 8px;
   box-shadow: var(--shadow-md);
   animation: slideIn .22s ease;
   max-width: 420px;
   word-break: break-word;
  }
  .toast.success { background: #16a34a; }
  .toast.error  { background: var(--red); }
  .toast.warn  { background: var(--amber); }
  .toast.info  { background: var(--accent); }
  @keyframes slideIn {
   from { transform: translateX(110%); opacity: 0; }
   to  { transform: translateX(0);  opacity: 1; }
  }

  /* ─ ─ LOADING ──────────────────────────────────────────────────── */
  .loading-overlay {
   position: fixed;
   inset: 0;
   background: rgba(8,16,32,.5);
   z-index: 800;
   display: none;
   align-items: center;
   justify-content: center;
  }
  .loading-overlay.open { display: flex; }
  .loading-box {
   background: #fff;
   border-radius: 14px;
   padding: 28px 36px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   box-shadow: var(--shadow-xl);
  }
  .spinner {
   width: 36px; height: 36px;
   border: 3px solid var(--border);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: spin .75s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-box p { font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
  .inline-spinner {
   display: inline-block;
   width: 12px; height: 12px;
   border: 2px solid rgba(255,255,255,.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin .7s linear infinite;
   vertical-align: middle;
  }

  /* ─ ─ EMPTY STATE ──────────────────────────────────────────────── */
  .no-data {
   text-align: center;
   padding: 36px 20px;
   color: var(--muted);
   font-size: var(--fs-base);
   grid-column: 1 / -1;
  }
  .no-data .nd-ico { font-size: 36px; margin-bottom: 8px; }
  .no-data p { font-size: 12px; margin-top: 4px; line-height: 1.6; }

  /* ─ ─ RESPONSIVE BASE ──────────────────────────────────────────── */
  @media (max-width: 900px) {
   .tab-pane { padding: 14px 14px 40px; }
   .g5, .g6 { grid-template-columns: repeat(2, 1fr); }
   .g4    { grid-template-columns: repeat(2, 1fr); }
   .c3, .c4 { grid-column: span 2; }
   .cuon-list { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
   .g2, .g3 { grid-template-columns: 1fr; }
   .c2    { grid-column: span 1; }
   .modal-box { max-height: 95vh; }
   .modal-filter { flex-direction: column; }
   .modal-filter select { width: 100%; }
  }

  /* ═ ═════════════════════════════════════════════════════════════
    BÁO CÁO V2
  ═ ═════════════════════════════════════════════════════════════ */

  /* Filter bar */
  .bc2-topbar {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: var(--sp-4);
  }
  .bc2-search {
   flex: 1;
   min-width: 220px;
   height: 36px;
   padding: 0 12px 0 34px;
   border: 1.5px solid var(--border);
   border-radius: var(--radius);
   font-family: inherit;
   font-size: var(--fs-base);
   background: var(--card);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: 10px center;
   transition: border-color .15s, box-shadow .15s;
  }
  .bc2-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
  .bc2-date-group { display: flex; align-items: center; gap: 6px; }
  .bc2-date-group label { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .bc2-date-group input { height: 36px; width: 138px; }
  .bc2-filter-btn {
   height: 36px;
   padding: 0 16px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   font-family: var(--font);
   border: 1px solid #d1d1d6;
   background: #ffffff;
   color: #1c1c1e;
   transition: background .15s, border-color .15s, transform .15s;
   box-shadow: 0 1px 2px rgba(0,0,0,.04);
   white-space: nowrap;
  }
  .bc2-filter-btn:hover { background: #f2f2f7; border-color: #c7c7cc; }
  .bc2-filter-btn:active { transform: scale(0.98); background: #e5e5ea; }
  .bc2-filter-btn.active { background: #007aff; color: #fff; border-color: #007aff; box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.15); }
  .bc2-refresh-btn {
   height: 36px;
   padding: 0 16px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   font-family: var(--font);
   background: #ffffff;
   color: #1c1c1e;
   border: 1px solid #d1d1d6;
   box-shadow: 0 1px 2px rgba(0,0,0,.04);
   transition: background .15s, border-color .15s, transform .15s;
   white-space: nowrap;
  }
  .bc2-refresh-btn:hover { background: #f2f2f7; border-color: #c7c7cc; }
  .bc2-refresh-btn:active { transform: scale(0.98); background: #e5e5ea; }

  /* Summary stats */
  .bc2-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   margin-bottom: 20px;
  }
  .bc2-stat {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 14px var(--sp-4);
   display: flex;
   flex-direction: column;
   gap: 4px;
   transition: box-shadow .15s;
  }
  .bc2-stat:hover { box-shadow: var(--shadow-md); }
  .bc2-stat-val {
   font-size: 28px;
   font-weight: 800;
   font-family: var(--font-mono);
   line-height: 1;
  }
  .bc2-stat-val.blue  { color: var(--accent); }
  .bc2-stat-val.amber { color: var(--amber); }
  .bc2-stat-val.green { color: var(--green); }
  .bc2-stat-val.purple { color: var(--purple); }
  .bc2-stat-lbl {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--muted);
  }

  /* Section header */
  .bc2-section-hd {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 22px 0 12px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--border);
  }
  .bc2-section-title { font-size: var(--fs-md); font-weight: 800; color: var(--navy); }
  .bc2-section-count {
   background: var(--accent);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   padding: 2px 9px;
   border-radius: 20px;
   min-width: 26px;
   text-align: center;
  }
  .bc2-section-count.amber { background: var(--amber); }
  .bc2-section-count.purple { background: var(--purple); }
  .bc2-section-count.muted { background: var(--muted); }

  /* Cards grid */
  .bc2-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
   gap: 14px;
  }

  /* Lệnh card */
  .bc2-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: box-shadow .2s, transform .15s;
   box-shadow: var(--shadow-sm);
  }
  .bc2-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
  .bc2-card.status-dang  { border-left: 4px solid var(--accent); }
  .bc2-card.status-chuan  { border-left: 4px solid var(--amber); }
  .bc2-card.status-dung  { border-left: 4px solid var(--purple); }
  .bc2-card.status-ketthuc { border-left: 4px solid var(--muted); opacity: .82; }

  /* Card header */
  .bc2-card-hd {
   padding: 10px 14px 8px;
   background: linear-gradient(135deg, #f8faff, #f1f5f9);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: flex-start;
   gap: 10px;
   flex-wrap: nowrap;
  }
  .bc2-card-left { flex: 1; min-width: 0; cursor: pointer; }
  .bc2-card-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .bc2-card-top-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
  .bc2-card-kh-inline { font-size: 11px; color: var(--muted); font-weight: 500; }
  .bc2-dot { color: var(--muted); }
  .bc2-edit-btn { font-size: 10px; padding: 2px 8px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 5px; cursor: pointer; color: #334155; margin-top: 3px; }
  /* Pills row */
  .bc2-pills-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
  .bc2-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
  .bc2-pill.nl-ok   { background: #dcfce7; color: #15803d; }
  .bc2-pill.nl-warn { background: #fef9c3; color: #854d0e; }
  .bc2-pill.date    { background: #eff6ff; color: #1d4ed8; }
  .bc2-pill.ca      { background: #f1f5f9; color: #475569; }
  .bc2-pill.kh      { background: #fdf4ff; color: #7e22ce; }
  /* 4 Stat mini-cards row */
  .bc2-stats-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   margin-top: 10px;
  }
  .bc2-stat-item {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   padding: 7px 10px;
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
  }
  .bc2-stat-lbl {
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .4px;
   color: var(--muted);
   white-space: nowrap;
  }
  .bc2-stat-val {
   font-size: 14px;
   font-weight: 800;
   color: var(--navy);
   font-family: var(--font-mono);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }
  /* Section box (NL + Vật tư phụ) */
  .bc2-section-box {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 9px;
   padding: 10px 12px;
   margin-bottom: 10px;
  }
  .bc2-section-box-title {
   font-size: 10px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--accent);
   margin-bottom: 8px;
  }
  /* Vật tư phụ — 2-col grid */
  .bc2-vtphu-grid { grid-template-columns: repeat(2, 1fr); }

  /* Progress nums */
  .bc2-progress-nums { font-size: 11px; color: var(--muted); font-weight: 500; }
  .bc2-qc { color: var(--subtle); font-weight: 400; }
  .bc2-card-ma {
   font-size: 13px;
   font-weight: 800;
   color: var(--navy);
   font-family: var(--font-mono);
   flex: 1;
   line-height: 1.3;
  }
  .bc2-card-kh { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px; }
  .bc2-card-mh { font-size: 12px; font-weight: 400; color: var(--navy); margin-top: 1px; }

  /* Status dropdown */
  .bc2-tt-select {
   height: 28px;
   padding: 0 8px;
   border-radius: 6px;
   font-size: 11px;
   font-weight: 700;
   font-family: inherit;
   border: 1.5px solid;
   cursor: pointer;
   outline: none;
   transition: .15s;
   min-width: 140px;
  }
  .bc2-tt-select.dang  { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
  .bc2-tt-select.chuan  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
  .bc2-tt-select.dung  { background: var(--purple-bg); color: #5b21b6; border-color: var(--purple-bd); }
  .bc2-tt-select.ketthuc { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
  .bc2-tt-saving { font-size: 10px; color: var(--muted); margin-top: 3px; display: none; }
  /* Nút sao chép lệnh */
  .bc2-copy-btn {
   background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px;
   padding: 3px 7px; font-size: 13px; cursor: pointer; line-height: 1;
   transition: background .15s, border-color .15s;
  }
  .bc2-copy-btn:hover { background: #e2e8f0; border-color: #94a3b8; }

  /* Card body */
  .bc2-card-body { padding: 12px 14px; }

  /* Progress bar */
  .bc2-progress-wrap { margin-bottom: 12px; }
  .bc2-progress-label {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 5px;
  }
  .bc2-progress-title {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .4px;
   color: var(--muted);
  }
  .bc2-progress-pct { font-size: var(--fs-md); font-weight: 800; font-family: var(--font-mono); }
  .bc2-progress-track {
   height: 8px;
   background: #e2e8f0;
   border-radius: 10px;
   overflow: hidden;
  }
  .bc2-progress-fill {
   height: 100%;
   border-radius: 10px;
   transition: width .5s cubic-bezier(.4,0,.2,1);
  }
  .bc2-progress-fill.green { background: linear-gradient(90deg, #22c55e, #16a34a); }
  .bc2-progress-fill.blue { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
  .bc2-progress-fill.amber { background: linear-gradient(90deg, #f59e0b, #d97706); }
  .bc2-progress-fill.red  { background: linear-gradient(90deg, #ef4444, #dc2626); }
  .bc2-progress-fill.grey { background: #cbd5e1; }

  /* Info grid */
  .bc2-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
  .bc2-info-item { display: flex; flex-direction: column; gap: 2px; }
  .bc2-info-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
  .bc2-info-val { font-size: 12px; font-weight: 700; color: var(--navy); font-family: var(--font-mono); }
  .bc2-info-val.green { color: var(--green); }
  .bc2-info-val.red  { color: var(--red); }
  .bc2-info-val.amber { color: var(--amber); }

  /* NL alert */
  .bc2-nl-alert {
   padding: 8px 12px;
   border-radius: 7px;
   margin-bottom: 10px;
   font-size: 11px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 8px;
  }
  .bc2-nl-alert.ok   { background: var(--green-bg); color: #15803d; border: 1px solid var(--green-bd); }
  .bc2-nl-alert.warn  { background: var(--amber-bg); color: #92400e; border: 1px solid var(--amber-bd); }
  .bc2-nl-alert.danger { background: var(--red-bg);  color: #991b1b; border: 1px solid var(--red-bd); }

  /* NKSX toggle */
  .bc2-nksx-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 10px;
   border-radius: 7px;
   cursor: pointer;
   background: #f8faff;
   border: 1px solid var(--border);
   font-size: 11px;
   font-weight: 700;
   color: var(--accent);
   transition: background .15s, border-color .15s;
   user-select: none;
   margin-top: 4px;
  }
  .bc2-nksx-toggle:hover { background: #eff6ff; border-color: #bfdbfe; }

  /* NKSX accordion */
  .bc2-nksx-body { display: none; margin-top: 10px; }
  .bc2-nksx-body.open { display: block; }
  .bc2-nksx-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 11px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
  }
  .bc2-nksx-table th {
   background: #f1f5f9;
   padding: 6px 8px;
   font-size: 9px;
   font-weight: 700;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .4px;
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
   text-align: left;
  }
  .bc2-nksx-table td {
   padding: 6px 8px;
   border-bottom: 1px solid #f1f5f9;
   vertical-align: middle;
   white-space: nowrap;
  }
  .bc2-nksx-table tr:last-child td { border-bottom: none; }
  .bc2-nksx-table tr:hover td { background: #f8faff; }
  .bc2-nksx-empty { padding: var(--sp-4); text-align: center; color: var(--muted); font-size: 11px; }

  /* Empty state */
  .bc2-empty { padding: 40px; text-align: center; color: var(--muted); }
  .bc2-empty-ico { font-size: 36px; margin-bottom: 8px; }
  .bc2-empty-text { font-size: var(--fs-base); font-weight: 600; }

  @media (max-width: 768px) {
   .bc2-grid { grid-template-columns: 1fr; }
   .bc2-stats { grid-template-columns: repeat(2, 1fr); }
   .bc2-info-grid { grid-template-columns: repeat(2, 1fr); }
   .bc2-stats-row { grid-template-columns: repeat(2, 1fr); }
   .bc2-vtphu-grid { grid-template-columns: 1fr; }
  }

  /* Legacy compat */
  .bc-filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
  .bc-filter-bar input { flex: 1; min-width: 200px; height: 34px; font-size: 12px; }
  .bc-filter-bar select { width: 160px; height: 34px; font-size: 12px; }
  .bc-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
  .bc-empty .be-ico { font-size: 40px; margin-bottom: 10px; }
  .bc-empty p { font-size: var(--fs-base); line-height: 1.6; }

  /* ═ ═════════════════════════════════════════════════════════════
    NHẬT KÝ SẢN XUẤT
  ═ ═════════════════════════════════════════════════════════════ */
  .nksx-bar {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
   padding: 10px 14px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   margin-bottom: 0;
  }
  .nksx-date-group { display: flex; align-items: center; gap: 6px; }
  .nksx-date-group label { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .nksx-date-group input { height: 34px; width: 140px; }
  .nksx-load-btn {
   height: 34px;
   padding: 0 var(--sp-4);
   background: linear-gradient(135deg, #1e3a5f, var(--accent));
   color: #fff;
   border: none;
   border-radius: 7px;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;
   font-family: inherit;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: opacity .2s;
   white-space: nowrap;
  }
  .nksx-load-btn:hover { opacity: .88; }
  .nksx-load-btn:disabled { opacity: .5; cursor: not-allowed; }
  .nksx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 0; }
  .nksx-stat {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 10px 14px;
   display: flex;
   flex-direction: column;
   gap: 2px;
  }
  .nksx-stat-val { font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-mono); color: var(--accent); }
  .nksx-stat-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
  .nksx-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .nksx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .nksx-table th {
   background: #f1f5f9;
   padding: 8px 10px;
   text-align: left;
   font-size: 10px;
   font-weight: 700;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .5px;
   border-bottom: 1.5px solid var(--border);
   white-space: nowrap;
  }
  .nksx-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; white-space: nowrap; }
  .nksx-table tr:last-child td { border-bottom: none; }
  .nksx-table tr.nksx-row { cursor: pointer; transition: background .12s; }
  .nksx-table tr.nksx-row:hover td { background: #eff6ff; }
  .nksx-table tr.nksx-row.expanded td { background: #dbeafe; font-weight: 600; }
  .nksx-print-btn { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;color:var(--muted);transition:all .15s; }
  .nksx-print-btn:hover { background:var(--accent);color:#fff;border-color:var(--accent); }
  .nksx-ca-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
  .nksx-ca-badge.sang { background: #fef9c3; color: #854d0e; }
  .nksx-ca-badge.chieu { background: var(--red-bg);   color: #991b1b; }
  .nksx-ca-badge.toi  { background: var(--purple-bg); color: #5b21b6; }
  .nksx-detail-row td { padding: 0 !important; border-bottom: 2px solid #93c5fd !important; }
  .nksx-detail-inner {
   padding: 14px var(--sp-4);
   background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
   border-left: 3px solid var(--accent);
  }
  .nksx-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
  .nksx-detail-item { display: flex; flex-direction: column; gap: 2px; }
  .nksx-detail-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
  .nksx-detail-val { font-size: var(--fs-base); font-weight: 600; color: var(--navy); font-family: var(--font-mono); }
  .nksx-ns-toggle {
   display: inline-flex; align-items: center; gap: 5px;
   padding: 4px 12px; border-radius: 6px; cursor: pointer;
   font-size: 11px; font-weight: 700; color: var(--accent);
   background: #dbeafe; border: 1px solid #93c5fd; transition: .15s; user-select: none;
  }
  .nksx-ns-toggle:hover { background: #bfdbfe; }
  .nksx-ns-wrap { margin-top: 10px; display: none; }
  .nksx-ns-wrap.open { display: block; }
  .nksx-ns-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }
  .nksx-ns-card {
   background: #fff; border: 1px solid #bfdbfe; border-radius: 6px;
   padding: 7px 10px; display: flex; flex-direction: column; gap: 2px;
  }
  .nksx-ns-name { font-size: 11px; font-weight: 700; color: var(--navy); }
  .nksx-ns-gio { font-size: 10px; color: var(--muted); }
  .nksx-placeholder { padding: 40px; text-align: center; color: var(--muted); }
  .nksx-placeholder-icon { font-size: 36px; margin-bottom: 8px; }
  .nksx-placeholder-text { font-size: var(--fs-base); font-weight: 600; }
  .nksx-placeholder-sub { font-size: 11px; margin-top: 4px; }
  @media (max-width: 600px) {
   .nksx-stats { grid-template-columns: repeat(2, 1fr); }
   .nksx-detail-grid { grid-template-columns: repeat(2, 1fr); }
   .nksx-ns-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* ═ ═════════════════════════════════════════════════════════════
    MODAL TẠO LỆNH SX MỚI
  ═ ═════════════════════════════════════════════════════════════ */
  .tao-lsx-body {
   padding: var(--sp-5);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   overflow-y: auto;
   max-height: calc(90vh - 70px);
  }
  .tao-lsx-body .field.full { grid-column: 1 / -1; }
  .tao-lsx-body .field label {
   font-size: 10px;
   font-weight: 700;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .6px;
   margin-bottom: 4px;
   display: block;
  }
  .tao-lsx-body input,
  .tao-lsx-body select { height: 36px; font-size: var(--fs-base); }
  .tao-lsx-body select {
   width: 100%;
   background: var(--card);
   border: 1.5px solid var(--border);
   border-radius: 7px;
   padding: 0 10px;
   color: var(--navy);
   font-family: inherit;
   cursor: pointer;
   appearance: auto;
  }
  .tao-lsx-body select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
  .tao-lsx-body input[readonly] { cursor: default; user-select: all; }
  .tao-lsx-section {
   grid-column: 1 / -1;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--muted);
   padding: 8px 0 4px;
   border-top: 1px solid var(--border);
   margin-top: 4px;
  }

  /* ═ ═════════════════════════════════════════════════════════════
    TỒN KHO (THEO DÕI KHO)
  ═ ═════════════════════════════════════════════════════════════ */
  .tk-section-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   margin-bottom: 14px;
   flex-wrap: wrap;
   gap: 12px;
  }
  .tk-header-left { display: flex; align-items: center; gap: 12px; }
  .tk-icon-wrap {
   width: 44px; height: 44px;
   background: linear-gradient(135deg, #0d1b2e, #1a3a6e);
   border-radius: 10px;
   display: flex; align-items: center; justify-content: center;
   font-size: var(--fs-xl); flex-shrink: 0;
   box-shadow: 0 2px 8px rgba(13,27,46,.22);
  }
  .tk-title  { font-size: var(--fs-md); font-weight: 700; color: var(--navy); }
  .tk-subtitle { font-size: 11px; color: var(--muted); margin-top: 1px; }
  .tk-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .tk-stats-mini {
   display: flex; align-items: center; gap: 0;
   background: var(--card); border: 1px solid var(--border);
   border-radius: var(--radius); overflow: hidden;
  }
  .tk-stat-mini { padding: 6px 14px; text-align: center; }
  .tk-stat-mini-val { display: block; font-size: 15px; font-weight: 700; color: var(--navy); font-family: var(--font-mono); }
  .tk-stat-mini-lbl { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
  .tk-stat-mini-sep { width: 1px; background: var(--border); height: 32px; }
  .tk-load-btn {
   height: 36px; padding: 0 var(--sp-4);
   background: linear-gradient(135deg, #0d1b2e, #1a3a6e);
   color: #fff; border: none; border-radius: var(--radius);
   cursor: pointer; font-size: 12px; font-weight: 700;
   font-family: inherit; display: flex; align-items: center; gap: 6px;
   transition: transform .2s, box-shadow .2s;
   box-shadow: 0 2px 8px rgba(13,27,46,.25);
  }
  .tk-load-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(13,27,46,.38); }
  .tk-load-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
  .tk-update-time { font-size: 10px; color: var(--muted); }
  .tk-filter-bar {
   display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
   flex-wrap: wrap; padding: 10px 14px;
   background: var(--card); border: 1px solid var(--border);
   border-radius: var(--radius);
  }
  .tk-search-wrap { position: relative; flex: 1; min-width: 220px; }
  .tk-search-icon {
   position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
   font-size: var(--fs-base); pointer-events: none;
  }
  .tk-search-input {
   width: 100%; height: 34px; padding: 0 10px 0 32px;
   border: 1.5px solid var(--border); border-radius: 7px;
   font-family: inherit; font-size: 12px; color: var(--text);
   transition: border-color .15s;
  }
  .tk-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
  .tk-select {
   height: 34px; padding: 0 10px; border: 1.5px solid var(--border);
   border-radius: 7px; font-family: inherit; font-size: 12px;
   color: var(--text); background: #fff; cursor: pointer; min-width: 140px;
  }
  .tk-select:focus { outline: none; border-color: var(--accent); }
  .tk-view-toggle { display: flex; border: 1.5px solid var(--border); border-radius: 7px; overflow: hidden; }
  .tk-view-btn {
   padding: 0 12px; height: 34px; border: none; background: transparent;
   font-family: inherit; font-size: 11px; font-weight: 600; color: var(--muted);
   cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
  }
  .tk-view-btn.active { background: var(--navy); color: #fff; }
  .tk-view-btn:hover:not(.active) { background: var(--bg); }
  .tk-placeholder {
   text-align: center; padding: 40px 20px;
   background: var(--card); border: 1.5px dashed var(--border); border-radius: 10px;
  }
  .tk-placeholder-icon { font-size: 40px; margin-bottom: 10px; opacity: .4; }
  .tk-placeholder-text { font-size: var(--fs-base); color: var(--muted); font-weight: 600; }
  .tk-placeholder-sub { font-size: 11px; color: var(--subtle); margin-top: 5px; }
  .tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  .tk-card {
   background: var(--card); border: 1px solid var(--border);
   border-radius: 10px; padding: 14px var(--sp-4);
   cursor: pointer; transition: all .18s;
   position: relative; overflow: hidden;
  }
  .tk-card::before {
   content: ''; position: absolute; left: 0; top: 0; bottom: 0;
   width: 3px; background: var(--accent);
   border-radius: 10px 0 0 10px; transition: width .18s;
  }
  .tk-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: #c5d8f5; }
  .tk-card:hover::before { width: 5px; }
  .tk-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
  .tk-card-ma {
   font-family: var(--font-mono); font-size: 10px; font-weight: 600;
   color: var(--accent); background: #eff6ff; padding: 2px 7px;
   border-radius: 4px; letter-spacing: .3px;
  }
  .tk-card-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .tk-badge-ton { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 700; background: var(--green-bg); color: var(--green); }
  .tk-badge-dang { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 700; background: var(--amber-bg); color: var(--amber); }
  .tk-badge-xuat { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 700; background: #dbeafe; color: #1e40af; }
  .tk-card-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: 3px; }
  .tk-card-loai { font-size: 10px; color: var(--muted); margin-bottom: 10px; }
  .tk-card-ncc { font-size: 10px; color: var(--subtle); margin-bottom: 10px; }
  .tk-kg-display { display: flex; align-items: baseline; gap: 5px; margin-bottom: 8px; }
  .tk-kg-val { font-size: 22px; font-weight: 700; font-family: var(--font-mono); color: var(--navy); line-height: 1; }
  .tk-kg-unit { font-size: 11px; font-weight: 600; color: var(--muted); }
  .tk-kg-cuon { font-size: 10px; color: var(--subtle); margin-left: auto; }
  .tk-usage-bar-wrap { height: 6px; background: #f1f5f9; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
  .tk-usage-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #60a5fa); }
  .tk-usage-row { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
  .tk-card-footer {
   display: flex; justify-content: flex-end; margin-top: 10px;
   padding-top: 8px; border-top: 1px solid var(--border);
  }
  .tk-detail-link {
   font-size: 11px; font-weight: 700; color: var(--accent);
   cursor: pointer; display: flex; align-items: center; gap: 3px;
  }
  .tk-detail-link:hover { text-decoration: underline; }
  .tk-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .tk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .tk-table th {
   background: #f1f5f9; padding: 9px 12px; text-align: left;
   font-size: 10px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .6px;
   border-bottom: 1.5px solid var(--border); white-space: nowrap;
   cursor: pointer; user-select: none;
  }
  .tk-table th:hover { background: #e8eef6; }
  .tk-table th .sort-icon { font-size: 9px; margin-left: 3px; opacity: .5; }
  .tk-table th.sorted .sort-icon { opacity: 1; color: var(--accent); }
  .tk-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
  .tk-table tr:last-child td { border-bottom: none; }
  .tk-table tr:hover td { background: #f8faff; }
  .tk-table .td-ma  { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600; }
  .tk-table .td-kg  { font-weight: 700; font-size: var(--fs-base); font-family: var(--font-mono); color: var(--navy); }
  .tk-table .td-cuon { color: var(--muted); font-size: 11px; }
  .tk-table .td-pct { min-width: 80px; }
  .tk-table .td-actions { text-align: center; }
  .tk-tbl-detail-btn {
   height: 26px; padding: 0 10px; background: #eff6ff;
   border: 1px solid #bfdbfe; color: var(--accent); border-radius: 5px;
   cursor: pointer; font-size: 11px; font-weight: 700;
   font-family: inherit; transition: .15s;
  }
  .tk-tbl-detail-btn:hover { background: var(--accent); color: #fff; }
  .tk-inline-bar { display: flex; align-items: center; gap: 6px; }
  .tk-inline-bar-wrap { flex: 1; height: 5px; background: #f1f5f9; border-radius: 5px; overflow: hidden; min-width: 60px; }
  .tk-inline-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), #60a5fa); }
  .tk-inline-pct { font-size: 10px; font-weight: 700; color: var(--muted); min-width: 28px; text-align: right; }
  .tk-modal-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--sp-4); }
  .tk-modal-stat { background: var(--bg); border-radius: 7px; padding: 10px 12px; text-align: center; }
  .tk-modal-stat-val { font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--navy); }
  .tk-modal-stat-lbl { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
  .tk-tab-bar { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 2px solid var(--border); }
  .tk-tab-btn {
    padding: 7px 18px; font-size: 12px; font-weight: 700; cursor: pointer;
    border: none; background: none; color: var(--muted);
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    transition: color .15s, border-color .15s;
  }
  .tk-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
  .tk-tab-btn .tk-tab-count {
    display: inline-block; background: #e0f2fe; color: var(--accent);
    border-radius: 10px; font-size: 10px; padding: 1px 6px; margin-left: 5px; font-weight: 700;
  }
  .tk-tab-btn.tab-dordang .tk-tab-count { background: #fef3c7; color: var(--amber); }
  .tk-tab-panel { display: none; }
  .tk-tab-panel.active { display: block; }
  .tk-cuon-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; max-height: 380px; overflow-y: auto; }
  .tk-cuon-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .tk-cuon-table th {
   background: var(--navy); color: #fff; padding: 7px 10px;
   font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
   position: sticky; top: 0; z-index: 1;
  }
  .tk-cuon-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; }
  .tk-cuon-table tr:last-child td { border-bottom: none; }
  .tk-cuon-table tr:hover td { background: #f8faff; }
  .tk-cuon-stt  { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
  .tk-cuon-conlai { font-weight: 700; color: var(--green); }
  .tk-cuon-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 700; }
  @media (max-width: 900px) {
   .tk-grid { grid-template-columns: repeat(2, 1fr); }
   .tk-section-header { flex-direction: column; }
   .tk-modal-summary { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
   .tk-grid { grid-template-columns: 1fr; }
   .tk-filter-bar { flex-direction: column; }
   .tk-search-wrap { width: 100%; }
  }

  /* ═ ═════════════════════════════════════════════════════════════
    KHO THÀNH PHẨM
  ═ ═════════════════════════════════════════════════════════════ */
  .ktp-mode-bar {
   display: flex; gap: 0; background: var(--card);
   border: 1.5px solid var(--border); border-radius: var(--radius);
   overflow: hidden; margin-bottom: 14px;
  }
  .ktp-mode-btn {
   flex: 1; padding: 11px 0; text-align: center;
   font-size: 12px; font-weight: 700; cursor: pointer;
   transition: background .2s, color .2s; background: transparent;
   border: none; font-family: inherit; color: var(--muted);
   display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  .ktp-mode-btn.active.nhap    { background: var(--green); color: #fff; }
  .ktp-mode-btn.active.xacnhan { background: var(--accent); color: #fff; }
  .ktp-mode-btn.active.xuat    { background: var(--red);  color: #fff; }
  .ktp-mode-btn:not(.active):hover { background: var(--bg); }
  .ktp-mode-sep { width: 1px; background: var(--border); }
  .ktp-sp-wrap { position: relative; }
  .ktp-sp-dropdown {
   position: absolute; top: calc(100% + 3px); left: 0; right: 0;
   background: #fff; border: 1.5px solid var(--accent); border-radius: 10px;
   max-height: 240px; overflow-y: auto; z-index: 200;
   display: none; box-shadow: var(--shadow-lg);
  }
  .ktp-sp-dropdown.open { display: block; }
  .ktp-sp-search-box { padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; }
  .ktp-sp-search-box input { height: 30px; font-size: 12px; }
  .ktp-sp-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background .1s; }
  .ktp-sp-item:hover, .ktp-sp-item.sel { background: #eff6ff; }
  .ktp-sp-item .sp-name { font-weight: 600; font-size: 12px; }
  .ktp-sp-item .sp-ma  { font-size: 10px; color: var(--muted); font-family: var(--font-mono); margin-top: 1px; }
  .ktp-sp-selected {
   margin-top: 5px; padding: 6px 10px;
   background: var(--green-bg); border: 1.5px solid var(--green-bd);
   border-radius: 6px; font-size: 12px; font-weight: 600;
   color: var(--green); display: none;
  }
  .ktp-tong-display {
   background: linear-gradient(135deg, #eff6ff, #dbeafe);
   border: 2px solid var(--accent); border-radius: var(--radius);
   display: flex; flex-direction: column; align-items: center;
   justify-content: center; gap: 3px; min-height: 36px; padding: 6px 12px;
  }
  .ktp-tong-val { font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-mono); color: var(--navy); }
  .ktp-tong-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); }
  .ktp-tf-btn { height:28px;padding:0 10px;border-radius:6px;border:1.5px solid var(--border);background:#fff;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s; }
.ktp-tf-btn:hover { border-color:var(--navy);color:var(--navy); }
.ktp-tf-active { background:var(--navy);color:#fff;border-color:var(--navy); }
  .ktp-tonkho-bar {
   display: flex; gap: 8px; align-items: center;
   margin-bottom: 12px; flex-wrap: wrap;
   padding: 10px 14px; background: var(--card);
   border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ktp-date-group { display: flex; align-items: center; gap: 6px; }
  .ktp-date-group label { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .ktp-date-group input { height: 34px; width: 140px; }
  .ktp-search-wrap { position: relative; flex: 1; min-width: 200px; }
  .ktp-search-wrap .tk-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: var(--fs-base); pointer-events: none; }
  .ktp-search-wrap input { width: 100%; height: 34px; padding: 0 10px 0 30px; border: 1.5px solid var(--border); border-radius: 7px; font-family: inherit; font-size: 12px; }
  .ktp-search-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
  .ktp-load-tk-btn {
   height: 34px; padding: 0 var(--sp-4);
   background: linear-gradient(135deg, var(--navy), var(--blue));
   color: #fff; border: none; border-radius: 7px; cursor: pointer;
   font-size: 12px; font-weight: 700; font-family: inherit;
   display: flex; align-items: center; gap: 6px; transition: opacity .2s; white-space: nowrap;
  }
  .ktp-load-tk-btn:hover { opacity: .9; }
  .ktp-load-tk-btn:disabled { opacity: .6; cursor: not-allowed; }
  .ktp-tk-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .ktp-tk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .ktp-tk-table th {
   background: #f1f5f9; padding: 9px 12px; text-align: left;
   font-size: 10px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .6px;
   border-bottom: 1.5px solid var(--border); white-space: nowrap;
  }
  .ktp-tk-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
  .ktp-tk-table tr:last-child td { border-bottom: none; }
  .ktp-tk-table tr:hover td { background: #f8faff; }
  .ktp-tk-table .td-ma  { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600; }
  .ktp-tk-table .td-tong { font-weight: 700; font-size: var(--fs-base); font-family: var(--font-mono); color: var(--navy); }
  .ktp-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
  .ktp-stat-card {
   background: var(--card); border: 1px solid var(--border);
   border-radius: var(--radius); padding: 12px var(--sp-4);
   display: flex; flex-direction: column; gap: 3px;
  }
  .ktp-stat-val    { font-size: 22px; font-weight: 700; font-family: var(--font-mono); color: var(--accent); }
  .ktp-stat-val.green { color: var(--green); }
  .ktp-stat-val.red  { color: var(--red); }
  .ktp-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
  @media (max-width: 600px) {
   .ktp-stats-row { grid-template-columns: 1fr; }
   .ktp-tonkho-bar { flex-direction: column; }
   .ktp-date-group input { width: 100%; }
  }

  /* ═ ═════════════════════════════════════════════════════════════
    LỊCH SỬ KHO TP
  ═ ═════════════════════════════════════════════════════════════ */
  .lsktp-topbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
  .lsktp-search {
   flex: 1; min-width: 200px; height: 34px;
   padding: 0 10px 0 30px; border: 1.5px solid var(--border);
   border-radius: 7px; font-family: inherit; font-size: 12px;
   background: var(--card);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: 9px center;
  }
  .lsktp-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
  .lsktp-date-group { display: flex; align-items: center; gap: 6px; }
  .lsktp-date-group label { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .lsktp-date-group input { height: 34px; width: 135px; }
  .lsktp-load-btn {
   height: 34px; padding: 0 14px; border-radius: 7px; cursor: pointer;
   font-size: 12px; font-weight: 700; font-family: inherit;
   border: none; color: #fff; transition: opacity .15s; white-space: nowrap;
  }
  .lsktp-load-btn.nhap { background: linear-gradient(135deg, #059669, #10b981); }
  .lsktp-load-btn.xuat { background: linear-gradient(135deg, #dc2626, #ef4444); }
  .lsktp-load-btn:hover { opacity: .88; }
  .lsktp-load-btn:disabled { opacity: .5; cursor: not-allowed; }
  .lsktp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .lsktp-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
  .lsktp-stat-val { font-size: 18px; font-weight: 800; font-family: var(--font-mono); }
  .lsktp-stat-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 2px; }
  .lsktp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
  .lsktp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .lsktp-table th {
   background: #f1f5f9; padding: 8px 10px; text-align: left;
   font-size: 10px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .4px;
   border-bottom: 1.5px solid var(--border); white-space: nowrap;
  }
  .lsktp-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
  .lsktp-table tr:last-child td { border-bottom: none; }
  .lsktp-table tr:hover td { background: #f8faff; }
  .lsktp-placeholder { padding: 32px; text-align: center; color: var(--muted); }
  .lsktp-placeholder-ico { font-size: 32px; margin-bottom: 6px; }
  .lsktp-placeholder-text { font-size: 12px; font-weight: 600; }
  .lsktp-count { font-size: 10px; color: var(--muted); margin-left: 6px; }

  /* Tab gộp lịch sử nhập/xuất TP */
  .ktp-hist-tabbar { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .ktp-hist-tab {
   padding: 5px 16px; font-size: 12px; font-weight: 600; border: none; cursor: pointer;
   background: var(--card); color: var(--muted); font-family: var(--font); transition: all .15s;
  }
  .ktp-hist-tab:first-child { border-right: 1px solid var(--border); }
  .ktp-hist-tab.active { background: var(--accent); color: #fff; }
  .ktp-hist-tab:not(.active):hover { background: var(--accent-light); color: var(--accent); }

  /* ═ ═════════════════════════════════════════════════════════════
    MODAL LỊCH SỬ NL
  ═ ═════════════════════════════════════════════════════════════ */
  #nldd-modal { z-index: 1100; }
  .nldd-modal-box {
   background: var(--card); border-radius: 14px;
   width: min(720px, 96vw); max-height: 85vh;
   display: flex; flex-direction: column;
   box-shadow: var(--shadow-xl);
  }
  .nldd-hd {
   padding: var(--sp-4) var(--sp-5) 14px;
   border-bottom: 1px solid var(--border);
   display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
  }
  .nldd-hd-main { flex: 1; }
  .nldd-title { font-size: 15px; font-weight: 800; color: var(--navy); }
  .nldd-sub  { font-size: 11px; color: var(--muted); margin-top: 3px; }
  .nldd-close {
   background: none; border: none; cursor: pointer;
   font-size: var(--fs-xl); color: var(--muted); line-height: 1;
   padding: 0 4px; transition: color .15s;
  }
  .nldd-close:hover { color: var(--red); }
  .nldd-stats {
   display: grid; grid-template-columns: repeat(3, 1fr);
   gap: 8px; padding: 12px var(--sp-5);
   border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .nldd-stat {
   background: #f8faff; border: 1px solid var(--border);
   border-radius: var(--radius); padding: 8px 12px;
  }
  .nldd-stat-val { font-size: 17px; font-weight: 800; font-family: var(--font-mono); color: var(--accent); }
  .nldd-stat-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 1px; }
  .nldd-body { overflow-y: auto; padding: 14px var(--sp-5) var(--sp-5); flex: 1; }
  .nldd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
  .nldd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .nldd-table th {
   background: #f1f5f9; padding: 7px 10px; text-align: left;
   font-size: 9px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .4px;
   border-bottom: 1.5px solid var(--border); white-space: nowrap;
  }
  .nldd-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; white-space: nowrap; }
  .nldd-table tr:last-child td { border-bottom: none; }
  .nldd-table tr:hover td { background: #f8faff; }
  .nldd-empty { padding: 32px; text-align: center; color: var(--muted); }
  .nldd-empty-ico { font-size: 32px; margin-bottom: 6px; }
  .nldd-empty-text { font-size: 12px; font-weight: 600; }
  .bc2-nl-click {
   cursor: pointer;
   border-bottom: 1.5px dashed var(--accent);
   color: var(--accent);
   transition: opacity .15s;
  }
  .bc2-nl-click:hover { opacity: .7; }

  /* ═══════════════════════════════════════════════════════════
    AUTH OVERLAY — Professional Loading Screen
  ═══════════════════════════════════════════════════════════ */
  #auth-overlay {
   position: fixed; inset: 0; z-index: 9999;
   background: linear-gradient(135deg, #0a0e27 0%, #132042 30%, #0d3b66 60%, #14274e 100%);
   display: flex; align-items: center; justify-content: center;
   overflow: hidden;
  }
  #auth-overlay.hidden { opacity:0; pointer-events:none; transition:opacity .5s ease; }

  /* Animated background particles */
  #auth-overlay::before {
   content: ''; position: absolute; inset: 0;
   background:
    radial-gradient(2px 2px at 20% 30%, rgba(96,165,250,.3), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(96,165,250,.2), transparent),
    radial-gradient(2px 2px at 60% 20%, rgba(147,197,253,.25), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(96,165,250,.15), transparent),
    radial-gradient(3px 3px at 15% 80%, rgba(59,130,246,.2), transparent),
    radial-gradient(2px 2px at 70% 45%, rgba(147,197,253,.2), transparent),
    radial-gradient(2px 2px at 90% 15%, rgba(96,165,250,.15), transparent),
    radial-gradient(2px 2px at 50% 90%, rgba(59,130,246,.2), transparent);
   animation: auth-particles 8s ease-in-out infinite alternate;
  }
  @keyframes auth-particles {
   0% { transform: translateY(0) scale(1); opacity:.6; }
   100% { transform: translateY(-20px) scale(1.05); opacity:1; }
  }

  /* Ambient glow */
  #auth-overlay::after {
   content: ''; position: absolute;
   width: 500px; height: 500px;
   background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%);
   top: 50%; left: 50%; transform: translate(-50%,-50%);
   animation: auth-glow 4s ease-in-out infinite alternate;
  }
  @keyframes auth-glow {
   0% { transform: translate(-50%,-50%) scale(1); opacity:.5; }
   100% { transform: translate(-50%,-50%) scale(1.3); opacity:1; }
  }

  .auth-box {
   position: relative; z-index: 2;
   background: rgba(255,255,255,.04);
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 24px;
   padding: 48px 48px 40px;
   text-align: center;
   max-width: 420px; width: 90%;
   backdrop-filter: blur(20px);
   box-shadow: 0 32px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
   animation: auth-box-in .6s ease-out;
  }
  @keyframes auth-box-in {
   0% { opacity:0; transform:translateY(20px) scale(.96); }
   100% { opacity:1; transform:translateY(0) scale(1); }
  }

  /* Logo image */
  .auth-logo-img {
   width: 120px; height: auto; margin: 0 auto 16px; display: block;
   filter: drop-shadow(0 4px 16px rgba(212,175,55,.35));
   animation: auth-logo-float 3s ease-in-out infinite;
  }
  @keyframes auth-logo-float {
   0%,100% { transform: translateY(0); filter: drop-shadow(0 4px 16px rgba(212,175,55,.35)); }
   50% { transform: translateY(-6px); filter: drop-shadow(0 8px 24px rgba(212,175,55,.5)); }
  }

  .auth-title {
   font-size: 24px; font-weight: 800; color: #fff;
   margin-bottom: 4px; letter-spacing: .5px;
  }
  .auth-sub {
   font-size: 13px; color: rgba(255,255,255,.4);
   margin-bottom: 36px; font-weight: 400;
  }

  /* Modern spinner — double ring */
  .auth-spinner-wrap {
   position: relative; width: 48px; height: 48px; margin: 0 auto 18px;
  }
  .auth-spinner {
   width: 48px; height: 48px; border-radius: 50%;
   border: 2.5px solid rgba(255,255,255,.06);
   border-top-color: #60a5fa;
   animation: auth-spin .9s linear infinite;
   position: absolute; inset: 0;
  }
  .auth-spinner-inner {
   width: 32px; height: 32px; border-radius: 50%;
   border: 2px solid rgba(255,255,255,.04);
   border-bottom-color: rgba(147,197,253,.6);
   animation: auth-spin 1.4s linear infinite reverse;
   position: absolute; top: 8px; left: 8px;
  }
  @keyframes auth-spin { to { transform: rotate(360deg); } }

  .auth-status {
   font-size: 13px; color: rgba(255,255,255,.55);
   font-weight: 500; margin-bottom: 6px;
   min-height: 18px;
  }

  /* Loading steps */
  .auth-steps {
   display: flex; justify-content: center; gap: 6px;
   margin-top: 20px;
  }
  .auth-step-dot {
   width: 6px; height: 6px; border-radius: 50%;
   background: rgba(255,255,255,.15);
   transition: all .3s ease;
  }
  .auth-step-dot.active {
   background: #60a5fa;
   box-shadow: 0 0 8px rgba(96,165,250,.5);
  }
  .auth-step-dot.done {
   background: #34d399;
   box-shadow: 0 0 6px rgba(52,211,153,.4);
  }

  /* Version tag */
  .auth-version {
   position: absolute; bottom: 16px; right: 20px;
   font-size: 10px; color: rgba(255,255,255,.2);
   font-weight: 500;
  }

  .auth-error {
   background: rgba(239,68,68,.12);
   border: 1px solid rgba(239,68,68,.25);
   border-radius: 12px; padding: 12px 16px;
   margin-top: 20px; color: #fca5a5;
   font-size: 12px; line-height: 1.5;
  }
  .auth-email-badge {
   display: inline-flex; align-items: center; gap: 6px;
   background: rgba(255,255,255,.08); border-radius: 20px;
   padding: 6px 14px; font-size: 11px; color: rgba(255,255,255,.6);
   margin-top: 12px;
  }




  /* ═ ═════════════════════════════════════════════════════════════
    TAB ADMIN
  ═ ═════════════════════════════════════════════════════════════ */
  #tab-admin    { display: none; }
  #tab-admin.visible    { display: flex; }
  #tab-taichinh.visible { display: flex; }
  .adm-header { display: flex; align-items: center; gap: 12px; margin-bottom: var(--fs-xl); flex-wrap: wrap; }
  .adm-title { font-size: 17px; font-weight: 800; color: var(--navy); }
  .adm-sub  { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .adm-reload {
   height: 34px; padding: 0 var(--sp-4);
   border-radius: var(--radius); border: none; cursor: pointer;
   font-size: 12px; font-weight: 700; font-family: inherit;
   background: var(--accent); color: #fff;
  }
  .adm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
  .adm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .adm-table th {
   background: #f1f5f9; padding: 9px 12px; text-align: left;
   font-size: 10px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .4px;
   border-bottom: 1.5px solid var(--border); white-space: nowrap;
  }
  .adm-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
  .adm-table tr:last-child td { border-bottom: none; }
  .adm-table tr:hover td { background: #f8faff; }
  .adm-toggle { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
  .adm-toggle input { opacity: 0; width: 0; height: 0; }
  .adm-toggle-slider {
   position: absolute; inset: 0; border-radius: 22px;
   background: #cbd5e1; transition: background .2s;
  }
  .adm-toggle-slider::before {
   content: ''; position: absolute; width: 16px; height: 16px;
   border-radius: 50%; background: #fff; bottom: 3px; left: 3px; transition: transform .2s;
  }
  .adm-toggle input:checked + .adm-toggle-slider { background: var(--accent); }
  .adm-toggle input:checked + .adm-toggle-slider::before { transform: translateX(16px); }
  .adm-quyen-select {
   height: 30px; border: 1.5px solid var(--border); border-radius: 6px;
   font-family: inherit; font-size: 12px; padding: 0 8px; background: var(--card);
  }
  .adm-save-btn {
   height: 28px; padding: 0 12px; border-radius: 6px; border: none;
   cursor: pointer; font-size: 11px; font-weight: 700; font-family: inherit;
   background: var(--green); color: #fff; transition: opacity .15s;
  }
  .adm-save-btn:hover { opacity: .85; }
  .adm-save-btn.saving { background: var(--muted); cursor: not-allowed; }
  .adm-save-ok { color: var(--green); font-size: 11px; font-weight: 700; margin-left: 6px; display: none; }
  .adm-del-btn {
   height: 28px; padding: 0 10px; border-radius: 6px; border: none;
   cursor: pointer; font-size: var(--fs-base); background: var(--red-bg); color: var(--red); transition: .15s;
  }
  .adm-del-btn:hover { background: var(--red); color: #fff; }
  .adm-email { font-weight: 600; color: var(--navy); }
  .adm-self { font-size: 10px; background: #dbeafe; color: #1d4ed8; border-radius: 4px; padding: 1px 6px; font-weight: 700; }

  /* ═ ═════════════════════════════════════════════════════════════
    SUB-TAB KẾ TOÁN
  ═ ═════════════════════════════════════════════════════════════ */
  .kt-subtab-bar {
   display: flex; gap: 0; margin-bottom: 18px;
   border-bottom: 2px solid var(--border);
   align-items: center; justify-content: space-between;
  }
  .kt-subtab {
   padding: 9px 22px; font-size: 12px; font-weight: 700; color: var(--muted);
   cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -2px;
   transition: color .15s, border-color .15s; user-select: none;
  }
  .kt-subtab:hover { color: var(--navy); }
  .kt-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .kt-section { display: none; }
  .kt-section.active { display: block; }

  /* ═ ═════════════════════════════════════════════════════════════
    PHỤ LIỆU
  ═ ═════════════════════════════════════════════════════════════ */
  .pl-type-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .pl-type-btn {
   padding: 7px 14px; border: 2px solid var(--border); border-radius: 20px;
   background: #fff; cursor: pointer; font-size: 12px; font-weight: 700;
   color: var(--muted); transition: border-color .15s, color .15s, background .15s;
   font-family: inherit;
  }
  .pl-type-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pl-type-btn.sel { border-color: var(--accent); background: #eff6ff; color: var(--accent); }
  .pl-hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .pl-hist-table th {
   background: #f1f5f9; padding: 7px 10px; text-align: left;
   font-size: 10px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .4px;
   border-bottom: 1.5px solid var(--border);
  }
  .pl-hist-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
  .pl-hist-table tr:hover td { background: #f8faff; }

  /* ═ ═════════════════════════════════════════════════════════════
    SKU BUILDER
  ═ ═════════════════════════════════════════════════════════════ */
  .sku-modal-box {
   background: #fff; border-radius: var(--radius-xl);
   width: 700px; max-width: 96vw; max-height: 92vh;
   display: flex; flex-direction: column;
   box-shadow: var(--shadow-xl);
  }
  .sku-body { padding: var(--sp-5); overflow-y: auto; flex: 1; }
  .sku-nhom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--sp-4); }
  .sku-nhom-btn {
   padding: 10px 6px; border: 2px solid var(--border); border-radius: var(--radius);
   background: #fff; cursor: pointer; text-align: center;
   font-size: 11px; font-weight: 700; color: var(--muted);
   transition: border-color .15s, color .15s; font-family: inherit; line-height: 1.5;
  }
  .sku-nhom-btn .ico { font-size: 18px; display: block; margin-bottom: 2px; }
  .sku-nhom-btn:hover { border-color: var(--accent); color: var(--accent); }
  .sku-nhom-btn.sel { border-color: var(--accent); background: #eff6ff; color: var(--accent); }
  .sku-form { display: none; }
  .sku-form.active { display: block; }
  .sku-row { display: grid; gap: 10px; margin-bottom: 10px; }
  .sku-row.c2 { grid-template-columns: 1fr 1fr; }
  .sku-row.c3 { grid-template-columns: 1fr 1fr 1fr; }
  .sku-f label {
   font-size: 10px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .4px;
   display: block; margin-bottom: 4px;
  }
  .sku-f input, .sku-f select {
   width: 100%; height: 34px; padding: 0 10px;
   border: 1.5px solid var(--border); border-radius: 7px;
   font-family: inherit; font-size: 12px; background: #fff;
  }
  .sku-f input:focus, .sku-f select:focus { outline: none; border-color: var(--accent); }
  .sku-f .hint { font-size: 10px; color: var(--muted); margin-top: 2px; }
  .sku-preview {
   background: linear-gradient(135deg, #0d1b2e, #1a3a6e);
   border-radius: 10px; padding: 14px var(--sp-4);
   margin: 14px 0; display: none;
  }
  .sku-preview-lbl { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 5px; }
  .sku-preview-ma  { font-size: 17px; font-weight: 800; color: #fff; font-family: var(--font-mono); word-break: break-all; }
  .sku-preview-ten { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 3px; }
  .sku-preview-warn { font-size: 10px; color: #fbbf24; margin-top: 3px; }
  .sku-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .sku-tag {
   padding: 2px 9px; background: #f1f5f9; border: 1px solid var(--border);
   border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--navy);
   cursor: pointer; transition: background .1s, border-color .1s, color .1s;
  }
  .sku-tag:hover { background: #eff6ff; border-color: var(--accent); color: var(--accent); }
  .sku-tag-clear { background: #fff1f2; border-color: #fecaca; color: #b91c1c; }
  .sku-tag-clear:hover { background: #fee2e2; border-color: #f87171; color: #991b1b; }

  /* Flash hint — xuất hiện khi click chip */
  .sku-flash-hint {
    display: none; opacity: 1;
    font-size: 11px; color: #1e40af; background: #eff6ff;
    border-left: 3px solid #3b82f6; border-radius: 4px;
    padding: 4px 8px; margin-top: 5px;
    transition: opacity .3s ease;
  }

  /* Nút xem quy tắc */
  .sku-ref-toggle-btn {
    float: right; font-size: 11px; font-weight: 600;
    color: #475569; background: #f1f5f9; border: 1px solid var(--border);
    border-radius: 20px; padding: 2px 10px; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .sku-ref-toggle-btn:hover, .sku-ref-toggle-btn.active {
    background: #dbeafe; border-color: #93c5fd; color: #1d4ed8;
  }

  /* Panel quy tắc collapsible */
  .sku-ref-panel {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 12px;
  }
  .sku-ref-cols {
    display: flex; flex-wrap: wrap; gap: 12px 20px;
  }
  .sku-ref-group { min-width: 140px; flex: 1 1 140px; }
  .sku-ref-title {
    font-size: 10px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid #e2e8f0; padding-bottom: 3px; margin-bottom: 5px;
  }
  .sku-ref-row {
    display: flex; gap: 6px; align-items: baseline;
    font-size: 11px; padding: 1px 0;
  }
  .sku-ref-row b {
    font-family: monospace; font-weight: 800; color: #1d4ed8;
    background: #eff6ff; border-radius: 3px; padding: 0 4px;
    white-space: nowrap; min-width: 44px;
  }
  .sku-ref-row span { color: #475569; }
  .sku-manual { display: none; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
  .sku-manual label {
   font-size: 10px; font-weight: 700; color: var(--muted);
   text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 4px;
  }
  .sku-manual input {
   width: 100%; height: 38px; padding: 0 12px;
   border: 2px solid var(--accent); border-radius: var(--radius);
   font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; color: var(--accent);
  }

  /* ═ ═════════════════════════════════════════════════════════════
    PL SKU PICKER
  ═ ═════════════════════════════════════════════════════════════ */
  .pl-picker-wrap { position: relative; }
  .pl-picker-row { display: flex; gap: 6px; }
  .pl-picker-input {
   flex: 1; height: 36px; padding: 0 10px;
   border: 1.5px solid var(--border); border-radius: 7px;
   font-family: inherit; font-size: var(--fs-base); cursor: pointer;
   background: #fff; transition: border-color .15s;
  }
  .pl-picker-input:focus { outline: none; border-color: var(--accent); }
  .pl-picker-btn {
   height: 36px; padding: 0 14px; background: var(--accent); color: #fff;
   border: none; border-radius: 7px; font-weight: 700; font-size: 12px;
   cursor: pointer; white-space: nowrap; font-family: inherit;
  }
  .pl-picker-dd {
   position: absolute; top: calc(100% + 4px); left: 0; right: 0;
   background: #fff; border: 1.5px solid var(--accent); border-radius: 10px;
   box-shadow: var(--shadow-lg); z-index: 300; display: none;
   flex-direction: column; max-height: 260px;
  }
  .pl-picker-dd.open { display: flex; }
  .pl-picker-search { padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .pl-picker-search input { width: 100%; height: 30px; padding: 0 10px; border: 1.5px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 12px; }
  .pl-picker-search input:focus { outline: none; border-color: var(--accent); }
  .pl-picker-list { overflow-y: auto; flex: 1; }
  .pl-picker-item {
   padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9;
   display: flex; flex-direction: column; gap: 2px;
  }
  .pl-picker-item:last-child { border-bottom: none; }
  .pl-picker-item:hover, .pl-picker-item.active { background: #eff6ff; }
  .pl-picker-item-name { font-size: 12px; font-weight: 600; color: var(--navy); }
  .pl-picker-item-ma  { font-size: 10px; color: var(--accent); font-family: var(--font-mono); }
  .pl-picker-item-dvt { font-size: 10px; color: var(--muted); }
  .pl-sel-disp {
   margin-top: 6px; padding: 8px 12px;
   background: var(--green-bg); border: 1.5px solid var(--green-bd);
   border-radius: 7px; display: none;
  }
  .pl-sel-disp-name { font-size: 12px; font-weight: 700; color: var(--green-dark, #14532d); }
  .pl-sel-disp-ma  { font-size: 10px; font-family: var(--font-mono); color: var(--green); }
  .pl-add-new {
   padding: 9px 12px; border-top: 1px solid var(--border);
   font-size: 12px; font-weight: 700; color: var(--accent);
   cursor: pointer; text-align: center; flex-shrink: 0;
  }
  .pl-add-new:hover { background: #eff6ff; }

  /* ═ ═════════════════════════════════════════════════════════════
    AUTOCOMPLETE DROPDOWN
  ═ ═════════════════════════════════════════════════════════════ */
  .lsac-wrap { position: relative; flex: 1; min-width: 200px; }
  .lsac-wrap input {
   width: 100%; height: 34px; padding: 0 30px 0 30px;
   border: 1.5px solid var(--border); border-radius: 7px;
   font-family: inherit; font-size: 12px; background: var(--card);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: 9px center;
   box-sizing: border-box;
  }
  .lsac-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
  .lsac-clear {
   position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
   background: none; border: none; cursor: pointer; color: var(--muted);
   font-size: var(--fs-md); padding: 0 2px; display: none; line-height: 1;
  }
  .lsac-wrap input:not(:placeholder-shown) ~ .lsac-clear { display: block; }
  .lsac-dropdown {
   position: absolute; top: calc(100% + 4px); left: 0; right: 0;
   background: var(--card); border: 1.5px solid var(--accent);
   border-radius: var(--radius); box-shadow: var(--shadow-md);
   z-index: 500; max-height: 220px; overflow-y: auto; display: none;
  }
  .lsac-dropdown.open { display: block; }
  .lsac-group-label {
   padding: 6px 10px 3px; font-size: 9px; font-weight: 700;
   text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
   background: #f8faff; border-bottom: 1px solid var(--border);
   position: sticky; top: 0;
  }
  .lsac-item {
   padding: 8px 12px; cursor: pointer; font-size: 12px;
   display: flex; align-items: center; gap: 8px;
   border-bottom: 1px solid #f1f5f9; transition: background .1s;
  }
  .lsac-item:last-child { border-bottom: none; }
  .lsac-item:hover, .lsac-item.active { background: #eff6ff; }
  .lsac-item-ico { font-size: var(--fs-base); flex-shrink: 0; }
  .lsac-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lsac-item-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
  .lsac-empty   { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }
/* ─ ─ BC2 CARD COMPACT + EXPAND ─────────────────────────────── */
  .bc2-card { cursor: pointer; }
  .bc2-card.expanded {
   grid-column: 1 / -1;
   cursor: default;
  }
  .bc2-card-detail {
   border-top: 1px solid var(--border);
   padding: 14px;
  }
  .bc2-nl-badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
  }
  .bc2-nl-badge.ok  { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bd); }
  .bc2-nl-badge.warn { background: var(--red-bg);  color: var(--red);  border: 1px solid var(--red-bd); }
  .bc2-expand-hint {
   margin-top: 10px;
   font-size: 11px;
   color: var(--accent);
   font-weight: 600;
   opacity: .7;
  }
  .bc2-card.expanded .bc2-expand-hint { display: none; }
  .bc2-card:hover:not(.expanded) { box-shadow: var(--shadow-md); }

/* ============================================================
   ROBO WIDGET — CSS SỬA LỖI IFRAME GAS
   Thay thế toàn bộ CSS cũ của widget (từ #robo-widget-root trở đi)
   ============================================================ */

/* Bắt buộc: html và body phải full height để iframe giãn đủ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Wrapper toàn trang — để #robo-anchor hoạt động đúng */
#robo-page-wrapper {
  min-height: 100%;
  position: relative; /* anchor con dùng absolute so với cái này */
}

/* Anchor — minimal wrapper, panel inside is position:fixed */
#robo-anchor {
  /* No positioning needed — #robo-panel inside is position:fixed */
}

/* Container widget — định vị từ anchor */
#robo-widget-root {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  /* width đủ để chứa hint bubble */
  width: 280px;
}

/* --- Bong bóng gợi ý --- */
#robo-hint {
  background: linear-gradient(135deg, #0f1e45, #162d6a);
  border: 1px solid rgba(80,160,255,.35);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 18px 10px 14px;
  font-size: 13px;
  color: #c8e0ff;
  box-shadow: 0 8px 30px rgba(10,40,120,.4);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  animation: robo-hint-in .4s cubic-bezier(.34,1.56,.64,1) 1.5s both;
  transition: transform .15s;
}
#robo-hint:hover { transform: scale(1.03); }
#robo-hint.robo-gone { display: none !important; }
@keyframes robo-hint-in {
  from { opacity:0; transform:translateY(8px) scale(.9); }
  to   { opacity:1; transform:none; }
}
#robo-hint-x {
  position: absolute; top:-7px; right:-7px;
  width:16px; height:16px;
  background:#2a3e6a; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:#6a8ec0; cursor:pointer;
}
#robo-hint-x:hover { background:#1e2e50; }

/* --- FAB robot --- */
#robo-fab {
  width:74px; height:68px;
  cursor:pointer; position:relative; flex-shrink:0;
  animation: robo-float 3.5s ease-in-out infinite;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 10px 22px rgba(0,120,200,.5))
          drop-shadow(0 3px 8px rgba(0,60,120,.35));
}
#robo-fab:hover {
  animation:none;
  transform: scale(1.13) translateY(-5px) !important;
  filter: drop-shadow(0 16px 30px rgba(0,150,240,.65));
}
#robo-fab:active { transform:scale(.94) !important; }
@keyframes robo-float {
  0%,100% { transform:translateY(0)    rotate(-.6deg); }
  50%      { transform:translateY(-7px) rotate(.6deg);  }
}

#robo-shadow {
  position:absolute; bottom:-8px; left:50%;
  transform:translateX(-50%);
  width:52px; height:12px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,140,220,.35) 0%,transparent 70%);
  animation: robo-shadow-pulse 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes robo-shadow-pulse {
  0%,100% { opacity:.8; transform:translateX(-50%) scaleX(1);   }
  50%      { opacity:.3; transform:translateX(-50%) scaleX(.7);  }
}

/* --- Panel chat — override to fixed position (FAB now inside sidebar) --- */
#robo-panel {
  position: fixed;
  bottom: 80px;
  left: 240px;
  width:330px; height:420px;
  border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: 0 24px 70px rgba(5,20,70,.5), 0 4px 14px rgba(5,20,70,.3);
  border:1px solid rgba(80,150,255,.15);
  z-index: 600;
  transform-origin: bottom left;
}
#robo-panel.robo-gone { display:none !important; }
#robo-panel.robo-open {
  animation:robo-panel-open .32s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes robo-panel-open {
  from { transform:scale(.55) translateY(24px); opacity:0; }
  to   { transform:scale(1)   translateY(0);    opacity:1; }
}

/* Header */
#robo-head {
  background:linear-gradient(150deg,#060f26,#0c1e48 50%,#071530);
  padding:13px 14px 11px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  border-bottom:1px solid rgba(60,130,255,.12);
}
#robo-avatar-wrap { position:relative; flex-shrink:0; width:46px; height:44px; }
#robo-status-ring {
  position:absolute; inset:-3px; border-radius:50%;
  border:2px solid transparent;
  border-top-color:#00e5ff; border-right-color:rgba(0,229,255,.35);
  animation:robo-spin 2.5s linear infinite;
}
@keyframes robo-spin { to{transform:rotate(360deg)} }
#robo-info h3 { font-size:13.5px; font-weight:700; color:#deeeff; margin:0; }
#robo-info p  { font-size:10.5px; color:rgba(160,200,255,.65); margin:2px 0 0; }
.robo-online {
  display:inline-block; width:6px; height:6px;
  background:#00e5ff; border-radius:50%;
  margin-right:4px; box-shadow:0 0 8px #00e5ff;
}
.robo-tags { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; }
.robo-tag {
  font-size:9px; padding:2px 7px; border-radius:10px;
  background:rgba(0,200,255,.1); color:#00d4f0;
  border:1px solid rgba(0,200,255,.2);
}
#robo-close {
  margin-left:auto; width:27px; height:27px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:50%; cursor:pointer; color:rgba(180,210,255,.7);
  font-size:14px; display:flex; align-items:center; justify-content:center;
  transition:.15s; flex-shrink:0;
}
#robo-close:hover { background:rgba(255,255,255,.14); color:#fff; }

/* Messages */
#robo-msgs {
  flex:1; overflow-y:auto; padding:12px;
  display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,#060e22,#091626);
}
#robo-msgs::-webkit-scrollbar { width:3px; }
#robo-msgs::-webkit-scrollbar-thumb { background:rgba(80,160,255,.25); border-radius:3px; }
.robo-msg {
  max-width:87%; padding:10px 14px; border-radius:14px;
  font-size:15px; line-height:1.6; font-weight:400; letter-spacing:0.1px;
  animation:robo-msg-in .18s ease;
}
@keyframes robo-msg-in {
  from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1}
}
.robo-msg.bot {
  background:linear-gradient(135deg,#0d1e42,#112850);
  border:1px solid rgba(80,150,255,.18);
  color:#f0f6fc; align-self:flex-start; border-bottom-left-radius:3px;
}
.robo-msg.user {
  background:linear-gradient(135deg,#1155bb,#1976d2);
  color:#ffffff; align-self:flex-end; border-bottom-right-radius:3px;
  box-shadow:0 3px 12px rgba(17,85,187,.45);
}
.robo-msg.sys {
  align-self:center;
  background:rgba(0,200,255,.07); border:1px solid rgba(0,200,255,.15);
  color:rgba(0,210,255,.85); font-size:11px;
  border-radius:20px; padding:4px 13px;
}
.robo-dots span {
  display:inline-block; width:5px; height:5px;
  background:#00b4d8; border-radius:50%; margin:0 2px;
  animation:robo-db 1s ease-in-out infinite;
}
.robo-dots span:nth-child(2){animation-delay:.18s}
.robo-dots span:nth-child(3){animation-delay:.36s}
@keyframes robo-db {
  0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)}
}

/* Chips */
/* ── CHIP DRAWER ── */
#robo-chip-drawer {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  background: #060e22;
  border-top: 1px solid rgba(80,150,255,.12);
  padding: 0 10px;
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 0;
  overflow: hidden;
  overflow-y: auto;
  transition: max-height .28s cubic-bezier(.4,0,.2,1),
              padding .28s cubic-bezier(.4,0,.2,1),
              opacity .2s ease;
  opacity: 0;
  z-index: 10;
}
#robo-chip-drawer.robo-open {
  max-height: 220px;
  opacity: 1;
  padding: 8px 10px;
}
.robo-chip {
  font-size: 10.5px; padding: 4px 10px;
  border-radius: 12px; cursor: pointer;
  transition: .15s; white-space: nowrap;
  font-family: inherit;
  background: rgba(17,85,187,.25);
  border: 1px solid rgba(80,150,255,.25);
  color: #7bb8f0;
}
.robo-chip:hover { background: rgba(17,85,187,.45); color: #deeeff; }
.robo-chip.robo-claude  { border-color: rgba(0,200,255,.3)!important;   color: #00d4f0!important; }
.robo-chip.robo-claude:hover  { background: rgba(0,170,210,.2)!important;  color: #00e5ff!important; }
.robo-chip.robo-chatgpt { border-color: rgba(16,185,129,.3)!important;  color: #10b981!important; }
.robo-chip.robo-chatgpt:hover { background: rgba(16,185,129,.2)!important; color: #34d399!important; }
.robo-chip.robo-gemini  { border-color: rgba(66,133,244,.3)!important;  color: #4285f4!important; }
.robo-chip.robo-gemini:hover  { background: rgba(66,133,244,.2)!important; color: #7cb3ff!important; }

/* ── NÚT GỢI Ý ── */
#robo-suggest-btn {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(80,150,255,.25);
  background: rgba(17,85,187,.2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  position: relative;
  color: #7bb8f0;
  font-size: 15px;
}
#robo-suggest-btn:hover { background: rgba(17,85,187,.4); border-color: rgba(80,150,255,.5); }
#robo-suggest-btn.robo-active {
  background: rgba(0,180,220,.2);
  border-color: #00d4f0;
  color: #00e5ff;
  box-shadow: 0 0 10px rgba(0,200,255,.2);
}
#robo-suggest-btn::after {
  content: '';
  position: absolute; top: -3px; right: -3px;
  width: 7px; height: 7px;
  background: #00e5ff; border-radius: 50%;
  border: 1.5px solid #07102a;
  animation: robo-dot-pulse 2s ease-in-out infinite;
}
#robo-suggest-btn.robo-active::after { display: none; }
@keyframes robo-dot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}

/* Input */
#robo-bar {
  display:flex; padding:9px 10px; gap:8px;
  background:#07102a; border-top:1px solid rgba(80,150,255,.1); flex-shrink:0;
}
#robo-input {
  flex:1; background:rgba(255,255,255,.05);
  border:1.5px solid rgba(80,160,255,.2); border-radius:20px;
  padding:8px 16px; font-size:15px; outline:none; font-weight:400;
  font-family:inherit; color:#e0efff; transition:.2s;
}
#robo-input::placeholder { color:rgba(120,170,220,.35); }
#robo-input:focus { border-color:rgba(0,200,255,.5); background:rgba(255,255,255,.08); }
#robo-send {
  width:34px; height:34px; border-radius:50%; border:none;
  background:linear-gradient(135deg,#0066aa,#00b4d8);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(0,160,200,.5); transition:.15s; flex-shrink:0;
}
#robo-send:hover { transform:scale(1.1); }

/* SVG animations */
@keyframes robo-vscan  { 0%,100%{opacity:.3} 50%{opacity:.85} }
@keyframes robo-blink  { 0%,86%,100%{transform:scaleY(1)} 91%{transform:scaleY(.05)} }
@keyframes robo-earpulse { 0%,100%{opacity:.55} 50%{opacity:1} }

/* Cải thiện tin nhắn bot */
.robo-msg.bot {
  line-height: 1.6;
  letter-spacing: 0.1px;
}
.robo-msg.bot b {
  color: #e0f0ff;
  font-weight: 600;
}


/* ── OEM Stats ── */
.oem-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1000px) {
  .oem-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .oem-stats { grid-template-columns: repeat(2, 1fr); }
}
.oem-stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.2s ease;
}
.oem-stat-card.actionable {
  cursor: pointer;
}
.oem-stat-card.actionable:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
.oem-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.oem-stat-content {
  display: flex;
  flex-direction: column;
}
.oem-stat-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono);
  line-height: 1.1;
  margin-bottom: 4px;
}
.oem-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.oem-stat-sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}



/* ── Toolbar (actions only) ── */
.oem-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible;
}

/* Legacy support */
.oem-view-btn { display: none; }

@media (max-width: 600px) {
  .oem-nav-tab { padding: 10px 14px; font-size: 13px; gap: 5px; }
  .oem-nav-icon { font-size: 15px; }
  .oem-toolbar { flex-wrap: wrap; justify-content: center; }
}

/* ── Kanban ── */
.oem-kanban {
  display: block; /* columns rendered inside .oem-kanban-cols */
}

.oem-col { }
.oem-col-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 5px 8px;
  border-radius: 6px;
  margin-bottom: 7px;
  text-align: center;
  text-transform: uppercase;
}
.oem-col-head-1 { background:#F1EFE8; color:#5F5E5A; }
.oem-col-head-2 { background:#E6F1FB; color:#0C447C; }
.oem-col-head-3 { background:#FAEEDA; color:#633806; }
.oem-col-head-4 { background:#EAF3DE; color:#3B6D11; }
.oem-col-head-5 { background:#F5F3FF; color:#3C3489; }
.oem-col-head-6 { background:#FFF7ED; color:#9A3412; } /* Làm bao bì — warm orange */
.oem-col-head-7 { background:#F0FDF4; color:#166534; } /* Lên LSX — green */

/* Kanban now wraps in .oem-kanban-cols div */
.oem-kanban-cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: start;
}
@media (max-width: 1200px) {
  .oem-kanban-cols { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .oem-kanban-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ── Kanban toolbar ── */
.oem-kanban-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.oem-view-toggle {
  display: flex; border: 1px solid var(--border);
  border-radius: 7px; overflow: hidden; flex-shrink: 0;
}
.oem-vt-btn {
  height: 30px; padding: 0 12px; font-size: 11.5px; font-weight: 600;
  font-family: var(--font); border: none; background: var(--card);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s;
}
.oem-vt-btn + .oem-vt-btn { border-left: 1px solid var(--border); }
.oem-vt-btn.active { background: var(--accent); color: #fff; }
.oem-pt-filter {
  height: 30px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-2); font-size: 11.5px; font-family: var(--font); cursor: pointer;
}

.oem-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: box-shadow .15s, transform .12s;
  border-left: 3px solid transparent;
}
.oem-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.oem-card.gd-1 { border-left-color: #888780; }
.oem-card.gd-2 { border-left-color: #2563EB; }
.oem-card.gd-3 { border-left-color: #D97706; }
.oem-card.gd-4 { border-left-color: #16A34A; }
.oem-card.gd-5 { border-left-color: #7C3AED; }
.oem-card.gd-6 { border-left-color: #EA580C; background:#FFFBF5; }
.oem-card.gd-7 { border-left-color: #0F6E56; background:#F0FDF4; }
.oem-card.oem-card-bb-warn { border-left-color: #DC2626 !important; background: #fff5f5 !important; }

/* ── BB Mini-stepper (in Kanban cards) ── */
.bb-mini-stepper {
  display: flex; align-items: center; gap: 3px;
  margin: 5px 0 2px; padding: 4px 6px;
  background: rgba(0,0,0,.03); border-radius: 6px;
  cursor: pointer; font-size: 9px;
  transition: background .15s;
  flex-wrap: wrap;
}
.bb-mini-stepper:hover { background: rgba(37,99,235,.06); }
.bb-mini-stepper.bb-overdue { background: rgba(220,38,38,.06); }
.bb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; transition: background .2s;
}
.bb-dot.done   { background: #16a34a; }
.bb-dot.active { background: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,.25); }
.bb-dot.idle   { background: #cbd5e1; }
.bb-dot-label {
  font-size: 9px; color: var(--muted); font-weight: 500; margin-left: 2px;
  white-space: nowrap;
}
.bb-deadline-badge {
  margin-left: auto; font-size: 8.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.bb-dl-ok   { background: #dcfce7; color: #166534; }
.bb-dl-soon { background: #fef3c7; color: #92400e; }
.bb-dl-late { background: #fee2e2; color: #991b1b; }

/* ── List view ── */
.oem-list-view { overflow-x: auto; }
.oem-list-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.oem-list-table thead th {
  background: var(--navy); color: #fff;
  padding: 9px 12px; font-size: 10px; font-weight: 700;
  text-align: left; letter-spacing: .03em; white-space: nowrap;
}
.oem-list-table tbody td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.oem-list-row { cursor: pointer; transition: background .12s; }
.oem-list-row:hover td { background: #f8fafc; }
.oem-list-row.oem-list-stale td { background: #fffbeb; }
.oem-list-row.oem-list-bb-warn td { background: #fff5f5; }
.oem-list-row.oem-list-archived { opacity: .55; }
.oem-list-name { font-weight: 700; font-size: 12.5px; color: var(--text); }
.oem-list-gd-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 9px; border-radius: 10px; white-space: nowrap;
}
.oem-list-bb { display: flex; flex-direction: column; gap: 1px; }
.oem-list-bb-bar {
  height: 4px; background: #e2e8f0; border-radius: 2px;
  overflow: hidden; width: 100%; min-width: 80px;
}
.oem-list-action-btn {
  height: 26px; padding: 0 10px; font-size: 11px; font-weight: 600;
  border-radius: 5px; border: 1px solid var(--border); background: var(--card);
  color: var(--accent); cursor: pointer; white-space: nowrap; font-family: var(--font);
  transition: background .15s;
}
.oem-list-action-btn:hover { background: #eff6ff; }

/* ── C360 — Bao Bì panel ── */
.bb-panel {
  padding: 4px 0;
  display: flex; flex-direction: column; gap: 16px;
}
.bb-panel-header { display: flex; align-items: center; gap: 8px; }
.bb-panel-title { font-size: 14px; font-weight: 700; color: var(--text); }
.bb-panel-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* 4-step tracker */
.bb-tracker {
  display: flex; align-items: center;
  padding: 16px; background: #f8fafc;
  border-radius: 10px; border: 1px solid var(--border);
}
.bb-step-wrap { display: flex; align-items: center; flex: 1; }
.bb-step-wrap:last-child { flex: 0; }
.bb-step {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; transition: all .25s; flex-shrink: 0;
  color: var(--muted);
}
.bb-step.done   { background: #16a34a; border-color: #16a34a; color: #fff; }
.bb-step.active { background: #f97316; border-color: #f97316; color: #fff; box-shadow: 0 0 0 4px rgba(249,115,22,.2); }
.bb-step-icon { font-size: 15px; line-height: 1; }
.bb-step-line {
  flex: 1; height: 3px; background: #e2e8f0; margin: 0 4px;
  border-radius: 2px; transition: background .25s;
}
.bb-step-line.done { background: #16a34a; }
.bb-tracker-labels {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; padding: 0 4px;
}
.bb-step-label {
  font-size: 10px; color: var(--muted); text-align: center; line-height: 1.3;
  padding: 0 2px;
}

/* Status card */
.bb-status-card {
  text-align: center; padding: 14px;
  border-radius: 10px; border: 1px solid var(--border); background: #f8fafc;
  transition: all .25s;
}
.bb-status-card.bb-status-active { border-color: #fdba74; background: #fff7ed; }
.bb-status-card.bb-status-done   { border-color: #86efac; background: #f0fdf4; }
.bb-status-card.bb-status-overdue{ border-color: #fca5a5; background: #fff5f5; }
.bb-status-icon { font-size: 28px; margin-bottom: 6px; }
.bb-status-text { font-size: 14px; font-weight: 700; color: var(--text); }
.bb-status-note { font-size: 12px; margin-top: 4px; color: var(--muted); }
.bb-status-note.overdue { color: #dc2626; font-weight: 700; }

/* Action buttons */
.bb-actions {
  display: flex; gap: 8px; align-items: center;
  justify-content: center; flex-wrap: wrap;
}
.bb-btn-primary {
  height: 36px; padding: 0 20px; border-radius: 8px;
  border: none; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
  box-shadow: 0 2px 8px rgba(37,99,235,.3); transition: all .18s;
}
.bb-btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.bb-btn-secondary {
  height: 34px; padding: 0 14px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--text-2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: all .15s;
  display: flex; align-items: center; gap: 5px;
}
.bb-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.bb-done-badge {
  font-size: 13px; font-weight: 700; color: #16a34a;
  padding: 7px 16px; border-radius: 8px;
  background: #f0fdf4; border: 1px solid #86efac;
}

/* Edit section */
.bb-edit-section {
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.bb-field-row {
  display: flex; align-items: center; gap: 10px;
}
.bb-field-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  white-space: nowrap; width: 130px; flex-shrink: 0;
  letter-spacing: .2px; text-transform: uppercase;
}
.bb-date-inp {
  height: 32px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--border); background: #fff;
  font-size: 12px; font-family: var(--font); color: var(--text); flex: 1;
}
.bb-date-inp:focus { outline: none; border-color: var(--accent); }
.bb-save-inline-btn {
  height: 32px; padding: 0 12px; border-radius: 7px;
  border: 1px solid var(--border); background: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font);
  color: var(--accent); white-space: nowrap;
  transition: background .15s;
}
.bb-save-inline-btn:hover { background: #eff6ff; }
.bb-notes-inp {
  width: 100%; border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 10px; font-size: 12px; font-family: var(--font);
  resize: vertical; background: #fff; color: var(--text); box-sizing: border-box;
}
.bb-notes-inp:focus { outline: none; border-color: var(--accent); }
.bb-save-notes-btn {
  margin-top: 6px; height: 30px; padding: 0 14px; border-radius: 7px;
  border: none; background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: var(--font);
  transition: background .15s;
}
.bb-save-notes-btn:hover { background: var(--accent-hover); }

/* Log section */
.bb-log-section {
  border-top: 1px solid var(--border); padding-top: 10px;
}
.bb-log-title { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; letter-spacing: .3px; text-transform: uppercase; }
.bb-log-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: 11.5px;
}
.bb-log-item:last-child { border-bottom: none; }
.bb-log-date { font-size: 10px; color: var(--muted); white-space: nowrap; min-width: 65px; padding-top: 1px; }
.bb-log-text { color: var(--text); line-height: 1.4; }

/* Spin animation for active step */
@keyframes bb-spin { to { transform: rotate(360deg); } }
.bb-spin {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: bb-spin .8s linear infinite;
}




/* ── Bao Bì Tracker (List/Danh sách view) ── */
.bb-tracker-panel {
  background: #fff; border-radius: 12px;
  border: 1px solid var(--border); overflow: hidden;
}
.bb-tracker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #f8fafc;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 8px;
}
.bb-tracker-title { font-size: 13px; font-weight: 700; color: var(--text); }
.bb-tracker-count { font-size: 11px; color: var(--muted); font-weight: 500; }
.bb-tracker-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.bb-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.bb-leg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bb-tracker-empty {
  padding: 24px; text-align: center; font-size: 13px; color: var(--muted);
}
.bb-tracker-rows { display: flex; flex-direction: column; }

.bb-tracker-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
  cursor: default;
}
.bb-tracker-row:last-child { border-bottom: none; }
.bb-tracker-row:hover { background: #f8fafc; }
.bb-tracker-row.bb-row-late  { background: #fff5f5; }
.bb-tracker-row.bb-row-late:hover { background: #fee2e2; }
.bb-tracker-row.bb-row-soon  { background: #fffbeb; }
.bb-tracker-row.bb-row-done  { background: #f0fdf4; opacity: .8; }

.bb-row-name {
  flex: 0 0 220px; min-width: 0; cursor: pointer;
  padding: 0 4px;
}
.bb-row-name:hover .bb-row-company { color: var(--accent); }
.bb-row-company {
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .12s;
}
.bb-row-product {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}

/* 4 inline dots with connectors */
.bb-row-steps {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.bb-inline-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #e2e8f0; background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; flex-shrink: 0;
  transition: all .18s; color: #94a3b8;
  user-select: none;
}
.bb-inline-dot:hover { transform: scale(1.18); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.bb-inline-dot.done  { background: #16a34a; border-color: #16a34a; color: #fff; }
.bb-inline-dot.active { background: #f97316; border-color: #f97316; color: #fff; box-shadow: 0 0 0 3px rgba(249,115,22,.2); }
.bb-inline-line { width: 20px; height: 3px; background: #e2e8f0; flex-shrink: 0; border-radius: 2px; }
.bb-inline-line.done { background: #16a34a; }

.bb-row-stage { flex: 0 0 130px; }
.bb-stage-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 99px; white-space: nowrap;
}
.bb-stage-badge.done { background: #f0fdf4; color: #16a34a; }
.bb-stage-badge.idle { background: #f1f5f9; color: #94a3b8; }
.bb-stage-badge.active { background: #fff7ed; color: #f97316; }

.bb-row-deadline { flex: 0 0 140px; cursor: pointer; }
.bb-dl-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.bb-dl-badge.late   { background: #fee2e2; color: #dc2626; }
.bb-dl-badge.soon   { background: #fef3c7; color: #d97706; }
.bb-dl-badge.ok     { background: #f0fdf4; color: #16a34a; }
.bb-dl-badge.no-dl  { background: #f8fafc; color: #94a3b8; }

.bb-row-pt {
  flex: 1; font-size: 11px; font-weight: 600; color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── OEM View Toggle ── */
.oem-view-toggle {
  display: inline-flex; border-radius: 8px;
  border: 1px solid var(--border); overflow: hidden;
  background: #f1f5f9;
}
.oem-vt-btn {
  height: 30px; padding: 0 14px; border: none; background: transparent;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--muted); font-family: var(--font);
  transition: background .15s, color .15s;
}
.oem-vt-btn.active { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.oem-vt-btn:hover:not(.active) { background: #e2e8f0; color: var(--text); }

.oem-card-name { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 2px; }

.oem-card-sp   { font-size: 10px; color: var(--muted); }
.oem-card-meta { display:flex; justify-content:space-between; align-items:center; margin-top:5px; }
.oem-card-days { font-size: 9px; color: var(--subtle); }
.oem-card-pt   { font-size: 9px; color: var(--accent); font-weight:600; }

.oem-empty-col {
  font-size: 10px;
  color: var(--subtle);
  text-align: center;
  padding: 12px 0;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
}

/* ── Đơn hàng table ── */
.oem-dh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.oem-dh-table th {
  background: var(--navy);
  color: #fff;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .03em;
}
.oem-dh-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.oem-dh-table tr:hover td { background: #f8fafc; }
.oem-dh-table tr.done td { background: #f0fdf4; color: #166534; }
.oem-dh-table tr.overdue td.col-han { color: #DC2626; font-weight: 700; }
.oem-dh-table tr.soon    td.col-han { color: #D97706; font-weight: 700; }

.oem-prog-wrap { width: 80px; }
.oem-prog-bar  { height: 5px; background: var(--border); border-radius: 3px; margin-top: 3px; overflow:hidden; }
.oem-prog-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.oem-prog-low  { background: #EF4444; }
.oem-prog-mid  { background: #F59E0B; }
.oem-prog-high { background: #22C55E; }

.oem-tt-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.oem-tt-cho  { background:#F1EFE8; color:#5F5E5A; }
.oem-tt-dang { background:#DBEAFE; color:#1D4ED8; }
.oem-tt-xong { background:#DCFCE7; color:#166534; }
.oem-tt-giao { background:#EDE9FE; color:#5B21B6; }
.oem-tt-hold { background:#FEF9C3; color:#854D0E; }

/* ── OEM Detail Modal ── */
.oem-gd-stepper { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.oem-gd-btn {
  width:36px; height:36px; border-radius:50%;
  border:2px solid var(--border); background:var(--card); color:var(--muted);
  font-size:12px; font-weight:700; cursor:pointer; transition:all .18s;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.oem-gd-btn:hover  { border-color:var(--accent); color:var(--accent); }
.oem-gd-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.oem-gd-btn.done   { background:var(--green);  border-color:var(--green);  color:#fff; }
.oem-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; font-size:12px; margin-bottom:14px; }
.oem-info-item label { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.3px; text-transform:uppercase; display:block; margin-bottom:2px; }
.oem-info-item span  { font-size:13px; font-weight:500; color:var(--text); }
.oem-gd-label-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.oem-gd-label {
  font-size:10px; padding:2px 8px; border-radius:10px;
  border:1px solid var(--border); color:var(--muted); background:#f8fafc;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.oem-gd-label:hover  { border-color:var(--accent); color:var(--accent); background:#eff6ff; }
.oem-gd-label.active { border-color:var(--accent); color:#fff; background:var(--accent); }


/* ── Placeholder ── */
.oem-placeholder {
  padding: 40px;
  text-align: center;
}

/* ── Update GD buttons in modal ── */
.oem-gd-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  transition: .12s;
}
.oem-gd-btn:hover { border-color: var(--accent); color: var(--accent); }
.oem-gd-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }



/* ============================================================
   KẾT THÚC CSS WIDGET
   ============================================================ */


  
/* ── OEM Giai đoạn 3: Lệnh SX ── */
.oem-lsx-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:#f0fdf4; border:1px solid #86efac; color:#166534;
  border-radius:6px; padding:2px 9px; font-size:10px; font-weight:600;
  font-family:var(--font-mono); transition: background .15s, border-color .15s;
}
.oem-lsx-badge:hover {
  background: #dcfce7; border-color: #4ade80;
}
.btn-tao-lsx {
  background: #34c759; color: #fff; border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.15);
  transition: background .15s, transform .15s;
}
.btn-tao-lsx:hover { background: #2ebd4f; }
.btn-tao-lsx:active { transform: scale(0.97); }
.btn-sync-tiendo {
  height: 34px; padding: 0 14px; font-size: 12px;
  background: #ffffff; color: #1c1c1e; border: 1px solid #d1d1d6;
  border-radius: 6px; cursor: pointer; font-weight: 500; font-family: var(--font);
  transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn-sync-tiendo:hover { background: #f2f2f7; border-color: #c7c7cc; }
.btn-sync-tiendo:active { transform: scale(0.98); background: #e5e5ea; }


/* ── OEM Archive & Edit ── */
.oem-archived-banner {
  background:#fffbeb; border:1px solid #fcd34d; border-radius:8px;
  padding:6px 12px; font-size:11px; color:#92400e; font-weight:600;
  display:flex; align-items:center; gap:6px; margin-bottom:10px;
}
.oem-card.archived {
  opacity:.45; border-left-color:#94a3b8 !important;
  background:#f8fafc !important;
}
.oem-archive-toggle {
  font-size:11px; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:5px; border:1px solid var(--border);
  background:var(--card); margin-left:auto;
}
.oem-archive-toggle:hover { border-color:var(--accent); color:var(--accent); }
.btn-archive {
  background: #ffffff; color: #1c1c1e; border: 1px solid #d1d1d6;
  border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn-archive:hover { background: #fff0f0; color: #ff3b30; border-color: #ffb3b0; }
.btn-archive:active { transform: scale(0.98); background: #ffebeb; }
.btn-edit-khach {
  background: #ffffff; color: #1c1c1e; border: 1px solid #d1d1d6;
  border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn-edit-khach:hover { background: #f2f2f7; border-color: #c7c7cc; }
.btn-edit-khach:active { transform: scale(0.98); background: #e5e5ea; }

/* ── macOS Style Buttons ── */
.btn-mac {
  background: #ffffff; color: #1c1c1e; border: 1px solid #d1d1d6;
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-mac:hover { background: #f2f2f7; border-color: #c7c7cc; }
.btn-mac:active { transform: scale(0.96); background: #e5e5ea; }
.btn-mac.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 3px rgba(37,99,235,.2); }

.btn-mac-danger {
  background: #ffffff; color: #dc2626; border: 1px solid #fecaca;
  border-radius: 6px; padding: 3px 8px; font-size: 10px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-mac-danger:hover { background: #fef2f2; border-color: #fca5a5; }
.btn-mac-danger:active { transform: scale(0.96); background: #fee2e2; }

.btn-mac-primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-mac-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-mac-primary:active { transform: scale(0.96); }

.btn-mac-success {
  background: #f0fdf4; color: #166534; border: 1px solid #86efac;
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-mac-success:hover { background: #dcfce7; border-color: #4ade80; }
.btn-mac-success:active { transform: scale(0.96); background: #bbf7d0; }

.btn-mac-solid-success {
  background: #16a34a; color: #fff; border: 1px solid #15803d;
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  font-family: var(--font);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-mac-solid-success:hover { background: #15803d; }
.btn-mac-solid-success:active { transform: scale(0.96); }


/* ── OEM Đơn hàng — Grouped view ── */
.oem-group-wrap { margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); }

.oem-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
.oem-group-header:hover { background: #eff6ff; }
.oem-group-chevron { font-size: 11px; color: var(--muted); transition: transform .2s; }
.oem-group-chevron.open { transform: rotate(90deg); }
.oem-group-name { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.oem-group-meta { display: flex; gap: 14px; align-items: center; }
.oem-group-stat { font-size: 11px; color: var(--muted); }
.oem-group-stat b { color: var(--text); }
.oem-group-prog-wrap { width: 80px; }
.oem-group-prog-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.oem-group-prog-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width .3s; }

.oem-group-body { display: none; }
.oem-group-body.open { display: block; }

.oem-don-row {
  display: grid;
  grid-template-columns: 1fr 260px 100px 120px 160px;
  align-items: center;
  gap: 0 10px;
  padding: 9px 14px 9px 32px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}
.oem-don-row:last-child { border-bottom: none; }
.oem-don-row:hover { background: #f8fafc; }
.oem-don-row.overdue { background: #fff5f5; }
.oem-don-row.soon    { background: #fffbeb; }
.oem-don-row.done    { background: #f0fdf4; opacity: .8; }

.oem-don-sp   { font-weight: 600; color: var(--text); }
.oem-don-qc   { font-size: 10px; color: var(--muted); margin-top: 1px; }
.oem-don-sl   { text-align: right; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.oem-don-han  { font-size: 11px; color: var(--muted); white-space: nowrap; line-height: 1.6; }
.oem-don-han.overdue { color: #dc2626; font-weight: 700; }
.oem-don-han.soon    { color: #d97706; font-weight: 700; }
.oem-don-actions { display: flex; gap: 5px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }

.oem-don-prog { }
.oem-don-prog-label { font-size: 10px; font-weight: 700; }
.oem-don-prog-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 2px; width: 60px; }
.oem-don-prog-fill { height: 100%; border-radius: 2px; transition: width .3s; }


/* ── OEM Filter bar ── */
.oem-filter-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.oem-filter-tab {
  height: 32px; padding: 0 14px; border-radius: 16px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: all .18s;
  white-space: nowrap;
}
.oem-filter-tab.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}
.oem-filter-tab.done-tab.active {
  background: #16a34a; border-color: #16a34a; color: #fff;
}
.oem-filter-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.oem-filter-select {
  height: 32px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-2); font-size: 12px; font-family: var(--font);
  cursor: pointer;
}
.oem-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: rgba(255,255,255,.25); font-size: 10px;
  font-weight: 700; margin-left: 5px; padding: 0 4px;
}
.oem-filter-tab:not(.active) .oem-filter-count {
  background: #e2e8f0; color: var(--muted);
}

/* Row hiển thị số chính xác */
.oem-don-numbers {
  display: flex; flex-direction: column; gap: 5px;
}
.oem-don-num-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
}
.oem-don-num-label {
  width: 28px; color: var(--muted); font-size: 10px; font-weight: 700; flex-shrink: 0; letter-spacing:.2px;
}
.oem-don-num-bar { width: 60px; flex-shrink: 0; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.oem-don-num-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.oem-don-num-val { font-size: 11px; font-weight: 600; white-space: nowrap; text-align: right; flex-shrink: 0; min-width: 130px; }

.oem-hoan-tat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f0fdf4; border: 1px solid #86efac; color: #166534;
  border-radius: 5px; padding: 2px 8px; font-size: 10px; font-weight: 600;
}
.btn-hoan-tat {
  height: 26px; padding: 0 10px; font-size: 10px; font-weight: 600;
  border-radius: 5px; border: 1px solid #86efac; background: #f0fdf4;
  color: #166534; cursor: pointer; white-space: nowrap; font-family: var(--font);
}
.btn-hoan-tat:hover { background: #dcfce7; }


/* ── OEM LSX dropdown menu ── */
.oem-lsx-menu-wrap { position: relative; display: inline-block; }
.oem-lsx-menu {
  position: absolute; bottom: calc(100% + 4px); right: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-md);
  min-width: 180px; z-index: 999;
  display: none; flex-direction: column; overflow: hidden;
}
.oem-lsx-menu.open { display: flex; }
.oem-lsx-menu-item {
  padding: 9px 14px; font-size: 12px; font-weight: 500;
  color: var(--text); cursor: pointer; display: flex;
  align-items: center; gap: 8px; transition: background .15s;
  white-space: nowrap;
}
.oem-lsx-menu-item:hover { background: #eff6ff; color: var(--accent); }
.oem-lsx-menu-item + .oem-lsx-menu-item { border-top: 1px solid #f1f5f9; }


/* ── OEM Autocomplete ── */
.oem-ac-wrap { position: relative; }
.oem-ac-dropdown {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-md);
  max-height: 220px; overflow-y: auto;
  z-index: 9000; display: none;
}
.oem-ac-dropdown.open { display: block; }
.oem-ac-item {
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9; font-size: 12px;
  transition: background .12s;
}
.oem-ac-item:last-child { border-bottom: none; }
.oem-ac-item:hover, .oem-ac-item.active { background: #eff6ff; }
.oem-ac-item .ac-main { font-weight: 600; color: var(--text); }
.oem-ac-item .ac-sub  { font-size: 10px; color: var(--muted); margin-top: 1px; font-family: var(--font-mono); }


/* ── KTP Multi-item form ── */
.ktp-items-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:8px; }
.ktp-items-table th { background:var(--navy); color:#fff; padding:6px 8px; font-size:10px; font-weight:700; text-align:center; }
.ktp-items-table td { padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
.ktp-items-table td input { width:100%; height:30px; border:1px solid var(--border); border-radius:5px; padding:0 6px; font-size:11px; font-family:var(--font); }
.ktp-items-table td input:focus { outline:none; border-color:var(--accent); }
.ktp-items-total { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:6px 0; font-size:12px; font-weight:600; color:var(--navy); }
.btn-add-item { height:28px; padding:0 12px; font-size:11px; font-weight:600; border-radius:5px; border:1.5px dashed var(--accent); background:transparent; color:var(--accent); cursor:pointer; }
.btn-add-item:hover { background:#eff6ff; }
.btn-del-item { width:24px; height:24px; border-radius:4px; border:1px solid #fecaca; background:#fef2f2; color:#dc2626; cursor:pointer; font-size:12px; font-weight:700; }

/* ── Phiếu xuất kho — Print ── */
@media print {
  body * { visibility: hidden !important; }
  #phieu-xuat-kho-print, #phieu-xuat-kho-print * { visibility: visible !important; }
  #phieu-xuat-kho-print { position: fixed; top: 0; left: 0; width: 100%; }
  .phieu-no-print { display: none !important; }
}
.phieu-xk-wrap {
  font-family: 'Times New Roman', serif;
  font-size: 13px;
  color: #000;
  max-width: 740px;
  margin: 0 auto;
  padding: 16px;
  background: #fff;
}
.phieu-xk-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:8px; }
.phieu-xk-logo { width:90px; flex-shrink:0; }
.phieu-xk-logo img { width:100%; }
.phieu-xk-company { flex:1; }
.phieu-xk-company .ten { font-size:13px; font-weight:700; text-transform:uppercase; }
.phieu-xk-company .dia-chi { font-size:11px; color:#333; margin-top:2px; }
.phieu-xk-title { text-align:center; margin:12px 0 4px; }
.phieu-xk-title h2 { font-size:16px; font-weight:700; text-transform:uppercase; margin:0; letter-spacing:1px; }
.phieu-xk-title .mau { font-size:11px; font-style:italic; color:#555; }
.phieu-xk-title .so-phieu { font-size:12px; margin-top:4px; }
.phieu-xk-info { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin:10px 0; font-size:12px; }
.phieu-xk-info .row { display:flex; gap:4px; }
.phieu-xk-info .lbl { font-weight:600; white-space:nowrap; }
.phieu-xk-table { width:100%; border-collapse:collapse; margin:10px 0; font-size:12px; }
.phieu-xk-table th { border:1px solid #000; padding:5px 6px; text-align:center; font-size:11px; background:#f5f5f5; }
.phieu-xk-table td { border:1px solid #000; padding:4px 6px; }
.phieu-xk-table td.num { text-align:right; }
.phieu-xk-table td.ctr { text-align:center; }
.phieu-xk-table .total-row td { font-weight:700; background:#f9fafb; }
.phieu-xk-bangchu { font-size:12px; font-style:italic; margin:6px 0 14px; }
.phieu-xk-ky { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:16px; text-align:center; font-size:11px; }
.phieu-xk-ky .ky-block .title { font-weight:700; margin-bottom:40px; }
.phieu-xk-ky .ky-block .name { font-size:10px; color:#555; margin-top:4px; }

/* ── KHÁCH HÀNG + SỔ CÁI ── */
.kh-layout { display:flex; gap:0; }
.kh-list-col { flex:1; min-width:0; }
.kh-drawer {
  width:550px; flex-shrink:0;
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  background:var(--card);
  max-height:calc(100vh - 180px);
  overflow:hidden;
}
.kh-drawer.hidden { display:none; }

.kh-filter-bar {
  display:flex; gap:8px; align-items:center;
  flex-wrap:wrap; padding:0 0 12px;
}
.kh-filter-btn {
  height:32px; padding:0 14px;
  border-radius:7px; font-size:12px;
  font-family:var(--font); cursor:pointer;
  border:1px solid var(--border);
  background:var(--card); color:var(--muted);
  font-weight:500; transition:.15s;
}
.kh-filter-btn.active-no {
  background:#fef2f2; border-color:#fecaca;
  color:#991b1b; font-weight:600;
}
.kh-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.kh-tbl thead tr { background:#f1f5f9; }
.kh-tbl th {
  padding:8px 10px; text-align:left;
  font-weight:700; font-size:12px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.kh-tbl td {
  padding:8px 10px;
  border-bottom:1px solid #f0f0f0;
  vertical-align:middle;
}
.kh-tbl tr.kh-sel td { background:#eff6ff; }
.kh-tbl tr:not(.kh-sel):hover td {
  background:#f8fafc; cursor:pointer;
}
.kh-sodu-pos { font-weight:700; color:#dc2626; }
.kh-sodu-neg { font-weight:700; color:#1e40af; }
.kh-sodu-zero { color:var(--muted); }
.kh-badge {
  display:inline-block; font-size:10px;
  padding:2px 7px; border-radius:99px; font-weight:600;
}
.kh-b-no    { background:#fef2f2; color:#991b1b; }
.kh-b-coc   { background:#eff6ff; color:#1e40af; }
.kh-b-ok    { background:#f0fdf4; color:#166534; }
.kh-b-empty { background:#f1f5f9; color:var(--muted); }

/* ── DRAWER SỔ CÁI ── */
.dw-head {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.dw-name { font-size:13px; font-weight:700; color:var(--navy); }
.dw-code { font-size:10px; color:var(--accent); font-family:monospace; margin-top:2px; }
.dw-stats3 {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:6px; padding:10px 14px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.dw-sc { background:#f8fafc; border-radius:7px; padding:7px 9px; }
.dw-sc-l { font-size:10px; color:var(--muted); margin-bottom:2px; }
.dw-sc-v { font-size:12px; font-weight:700; }
.dw-sc-v.red   { color:#dc2626; }
.dw-sc-v.green { color:#16a34a; }
.dw-sc-v.blue  { color:#1e40af; }
.dw-body {
  flex:1; overflow-y:auto;
  padding:12px 14px;
}
.dw-sec-title {
  font-size:10px; font-weight:700;
  color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:8px;
}
.dw-footer {
  padding:10px 14px; display:flex; gap:6px;
  border-top:1px solid var(--border); flex-shrink:0;
}
.dw-btn {
  flex:1; height:32px; border-radius:7px;
  font-size:12px; font-weight:600;
  font-family:var(--font); cursor:pointer;
  border:1px solid var(--border); background:var(--card);
  color:var(--text);
}
.dw-btn.primary { background:var(--navy); color:#fff; border-color:var(--navy); }
.dw-btn.green   { background:#166534;     color:#fff; border-color:#166534; }

/* ── SỔ CÁI TABLE ── */
.sc-tbl { width:100%; border-collapse:collapse; font-size:11px; }
.sc-tbl th {
  font-size:10px; font-weight:600; color:var(--muted);
  padding:5px 6px; border-bottom:1px solid var(--border);
  text-align:left; background:#f8fafc;
}
.sc-tbl td { padding:6px 6px; border-bottom:1px solid #f0f0f0; vertical-align:top; }
.sc-tbl tr:last-child td { border-bottom:none; }
.sc-tbl tr.sc-expand-row td { border-bottom:none; }
.sc-tbl tr.sc-detail-row td { padding:0 6px 8px; }

.sc-chip {
  display:inline-block; font-size:9px;
  padding:2px 6px; border-radius:4px; font-weight:600;
}
.sc-chip-phat  { background:#fef3c7; color:#92400e; }
.sc-chip-coc   { background:#eff6ff; color:#1e40af; }
.sc-chip-tt    { background:#f0fdf4; color:#166534; }

.sc-pos  { color:#dc2626; font-weight:700; }
.sc-neg  { color:#1e40af; font-weight:700; }
.sc-zero { color:#16a34a; font-weight:700; }

.sc-expand-btn {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; color:var(--accent); cursor:pointer;
  background:none; border:none; padding:0;
  font-family:var(--font); margin-top:3px;
}
.sc-expand-btn:hover { text-decoration:underline; }

/* ── PHIẾU XUẤT DETAIL ── */
.phieu-detail-box {
  background:#fffbeb; border:1px solid #fcd34d;
  border-radius:7px; padding:9px 10px;
}
.phieu-detail-title {
  font-size:9px; font-weight:700; color:#92400e;
  text-transform:uppercase; letter-spacing:.3px; margin-bottom:7px;
}
.phieu-row-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 0; border-bottom:1px solid #fde68a;
}
.phieu-row-item:last-of-type { border-bottom:none; }
.phieu-ma   { font-family:monospace; font-size:10px; color:#1e40af; min-width:82px; }
.phieu-info-text { font-size:10px; }
.phieu-sp   { color:var(--text); }
.phieu-sub  { color:var(--muted); font-size:9px; }
.phieu-tien { font-size:11px; font-weight:700; color:#92400e; }
.phieu-view-btn {
  font-size:9px; padding:2px 7px;
  border-radius:4px; border:1px solid #fcd34d;
  background:#fff; color:#92400e; cursor:pointer;
  margin-left:6px;
}
.phieu-total-row {
  display:flex; justify-content:space-between;
  margin-top:6px; padding-top:5px;
  border-top:1px solid #fcd34d;
  font-size:10px; font-weight:700; color:#92400e;
}

/* ── MODAL CÔNG NỢ PHÁT SINH ── */

/* Style cho nút Bỏ qua trong bảng công nợ gia công */
.btn-skip-lo {
  background: #fff1f0; /* Màu nền đỏ cực nhẹ */
  border: 1px solid #ffa39e; /* Viền màu hồng đào */
  color: #cf1322; /* Chữ màu đỏ đậm */
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  line-height: 1;
}

.btn-skip-lo:hover {
  background: #ff4d4f; /* Khi di chuột vào: Nền đỏ */
  color: #ffffff; /* Chữ trắng */
  border-color: #ff4d4f;
  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
}

.btn-skip-lo:active {
  transform: translateY(1px); /* Hiệu ứng nhấn nút */
}

.cnps-auto-box {
  background:#fffbeb; border-left:3px solid #f59e0b;
  border-radius:0 7px 7px 0; padding:10px 12px; margin-bottom:12px;
}
.cnps-auto-lbl {
  font-size:10px; font-weight:700; color:#92400e; margin-bottom:6px;
}
.cnps-auto-row {
  display:flex; justify-content:space-between;
  font-size:11px; margin-bottom:3px;
}
.cnps-auto-row:last-child { margin-bottom:0; }
.cnps-edit-note { font-size:10px; color:#92400e; margin-top:5px; }

/* ── CNPS: Filter area ── */
.cnps-filter-area { margin-bottom: 10px; }
.cnps-date-filter {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 6px 0;
}
.cnps-section-head {
  font-size: 12px; padding: 6px 0; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cnps-readonly { opacity: .6; }
.cnps-khong-tinh { opacity: .5; text-decoration: line-through; }

/* ── CNPS: Phiếu list — card layout chỉn chu ── */
.cnps-warn {
  background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
}
.cnps-phieu-scroll { max-height: 240px; overflow-y: auto; padding: 1px; }
.cnps-phieu-card {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; overflow: hidden; background: var(--card);
  transition: border-color .15s, box-shadow .15s; font-size: 12px;
}
.cnps-phieu-card:last-child { margin-bottom: 0; }
.cnps-phieu-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.cnps-phieu-card.cnps-thieu-gia { border-color: #fbbf24; background: #fffdf5; }
.cnps-phieu-card.cnps-khong-tinh { opacity: .55; }
/* Card header */
.cnps-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #eef2f7;
}
.cnps-card-head input[type="checkbox"] {
  margin: 0; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent);
}
.cnps-card-head-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cnps-phieu-code { font-family: 'Inter', monospace; font-size: 13px; font-weight: 700; color: var(--accent); }
.cnps-phieu-date { font-size: 11px; color: var(--muted); }
.cnps-card-head-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cnps-phieu-amount { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--navy); }
.cnps-phieu-amount.warn { color: #d97706; }
.cnps-btn-skip {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 4px 10px; font-size: 11px; cursor: pointer;
  color: #dc2626; display: flex; align-items: center; gap: 3px;
  flex-shrink: 0; font-weight: 600; white-space: nowrap;
}
.cnps-btn-skip:hover { background: #fef2f2; border-color: #fecaca; }
.cnps-btn-skip.reopen { color: #16a34a; }
.cnps-btn-skip.reopen:hover { background: #f0fdf4; border-color: #bbf7d0; }
/* Card body — items table */
.cnps-card-body { padding: 6px 12px 8px; }
.cnps-items-grid {
  display: grid; grid-template-columns: 2fr 60px 140px 100px;
  font-size: 12px; gap: 0;
}
.cnps-items-hdr {
  display: contents; font-size: 10px; font-weight: 600; color: var(--muted);
}
.cnps-items-hdr > span { padding: 4px 0; border-bottom: 1px solid #e2e8f0; }
.cnps-items-row { display: contents; }
.cnps-items-row > span { padding: 6px 0; border-bottom: 1px solid #f1f5f9; align-items: center; }
.cnps-items-row:last-child > span { border-bottom: none; }
.cnps-item-sp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.cnps-item-sl { text-align: center; font-weight: 600; }
.cnps-item-gia { text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.cnps-item-gia.warn { color: #d97706; font-style: italic; }
.cnps-item-tt { text-align: right; font-weight: 700; color: var(--navy); }
/* Card footer — total */
.cnps-card-foot {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 6px 12px; background: #f8fafc; border-top: 1px solid #e8edf4;
  font-size: 13px; font-weight: 700; gap: 6px;
}
.cnps-card-foot .lbl { color: var(--muted); font-weight: 500; font-size: 12px; }
/* Giá input inline — wider, usable */
.cnps-gia-inline {
  width: 120px; padding: 5px 10px; font-size: 13px; text-align: right;
  border: 1.5px solid #f59e0b; border-radius: 6px;
  background: #fffbeb; color: #92400e; font-weight: 600;
  font-family: var(--font); box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.cnps-gia-inline:focus {
  outline: none; border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
.cnps-gia-inline::placeholder { color: #d97706; opacity: .7; font-weight: 400; font-size: 12px; }
/* Nút xác nhận chọn phiếu */
.cnps-confirm-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; margin-top: 8px; border-top: 1px dashed var(--border);
}
.cnps-confirm-bar .cnps-sel-info { font-size: 13px; color: var(--muted); }
.cnps-confirm-bar .cnps-sel-info b { color: var(--navy); font-size: 14px; }
.cnps-confirm-btn {
  padding: 8px 20px; font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff; border: none; border-radius: 7px;
  cursor: pointer; font-family: var(--font);
}
.cnps-confirm-btn:hover { background: #1d4ed8; }
.cnps-confirm-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Form CN ẩn cho đến khi xác nhận chọn */
.cnps-form-area { display: none; }
.cnps-form-area.visible { display: block; }
.cnps-readonly .cnps-card-head { background: #f1f5f9; }

/* ── Modal Phiếu XK filter ── */
.pxk-filter-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); }
.pxk-tab {
  padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); margin-bottom: -2px; font-family: var(--font);
}
.pxk-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.pxk-tab:not(.active):hover { color: var(--accent); }

.pxk-phieu { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.pxk-phieu-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: #f8fafc;
}
.pxk-code { font-family: monospace; font-weight: 700; color: var(--accent); font-size: 13px; }
.pxk-date { font-size: 11px; color: var(--muted); margin-left: 8px; }
.pxk-total { font-size: 13px; font-weight: 700; }
.pxk-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.pxk-tt-chua { background: #fef3c7; color: #92400e; }
.pxk-tt-da   { background: #dcfce7; color: #16a34a; }
.pxk-tt-khong { background: #f1f5f9; color: #94a3b8; }

.pxk-items { padding: 0 12px; }
.pxk-item-header {
  display: grid; grid-template-columns: 2fr 60px 90px 90px;
  font-size: 10px; font-weight: 600; color: var(--muted);
  padding: 6px 0; border-bottom: 1px solid #e2e8f0;
}
.pxk-item-row {
  display: grid; grid-template-columns: 2fr 60px 90px 90px;
  font-size: 11px; padding: 5px 0; border-bottom: 1px solid #f8fafc;
}
.pxk-item-row:last-child { border-bottom: none; }
.pxk-item-sp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxk-item-sl { text-align: center; }
.pxk-item-gia { text-align: right; }
.pxk-item-gia.warn { color: #d97706; }
.pxk-item-tt { text-align: right; font-weight: 600; }
.pxk-gia-input {
  width: 80px; padding: 2px 4px; font-size: 11px; text-align: right;
  border: 1px solid #fcd34d; border-radius: 4px; background: #fffbeb;
}
.pxk-actions { padding: 6px 12px; display: flex; gap: 6px; justify-content: flex-end; }
.pxk-act-btn {
  padding: 4px 12px; font-size: 11px; font-weight: 600; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); cursor: pointer;
  font-family: var(--font);
}
.pxk-act-btn:hover { background: #f1f5f9; }
.pxk-act-btn.green { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.pxk-act-btn.green:hover { background: #bbf7d0; }

/* ── DW button outline style ── */
.dw-btn.outline {
  background: var(--card); color: var(--navy); border: 1.5px solid var(--border);
}
.dw-btn.outline:hover { background: #f1f5f9; border-color: var(--navy); }

.cnps-result {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; background:#f8fafc;
  border-radius:7px; margin-top:4px;
}
.cnps-result-lbl { font-size:11px; color:var(--muted); }
.cnps-result-val { font-size:14px; font-weight:700; color:#dc2626; }

/* ═══════════════════════════════════════════════════════════
   CUỘN NL CHƯA GHI SX (Section tab SX)
   ═══════════════════════════════════════════════════════════ */
.cuon-treo-card { border-color: #fcd34d; background: #fffef5; }
.cuon-treo-card .card-hd { color: #92400e; }
.ct-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  margin-left: 6px;
}
.ct-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; padding: 10px 12px;
}
.ct-item {
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 8px 10px; background: var(--card);
}
.ct-item-caution { border-color: #fcd34d; background: #fffef5; }
.ct-item-warn { border-color: #fca5a5; background: #fef2f2; }
.ct-item-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.ct-cuon { font-family: 'Inter', monospace; font-weight: 700; font-size: 13px; color: var(--accent); }
.ct-kg { font-weight: 700; font-size: 12px; }
.ct-item-body { display: flex; flex-direction: column; gap: 2px; }
.ct-nl { font-size: 11px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-meta { font-size: 10px; color: var(--muted); }
.ct-meta b { color: #dc2626; }
.ct-item-warn .ct-meta b { color: #991b1b; }
.ct-item-actions {
  display: flex; gap: 6px; margin-top: 6px;
}
.ct-btn-phanbo {
  flex: 1; padding: 4px 0; font-size: 10.5px; font-weight: 700;
  background: var(--navy); color: #fff; border: none; border-radius: 5px;
  cursor: pointer;
}
.ct-btn-phanbo:hover { opacity: .85; }
.ct-btn-nhaplai {
  flex: 1; padding: 4px 0; font-size: 10.5px; font-weight: 600;
  background: #fff; color: #e74c3c; border: 1.5px solid #e74c3c; border-radius: 5px;
  cursor: pointer;
}
.ct-btn-nhaplai:hover { background: #fef2f2; }

/* ═══════════════════════════════════════════════════════════
   ĐỐI SOÁT NGUYÊN LIỆU (Tab Kế toán)
   ═══════════════════════════════════════════════════════════ */
.doiso-stats {
  display: flex; gap: 16px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.doiso-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px; background: #f8fafc; border-radius: 8px; min-width: 80px;
}
.doiso-stat.warn { background: #fef2f2; }
.doiso-stat-num { font-size: 22px; font-weight: 800; color: var(--navy); }
.doiso-stat.warn .doiso-stat-num { color: #dc2626; }
.doiso-stat-lbl { font-size: 10px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.doiso-tbl {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.doiso-tbl th {
  text-align: left; padding: 8px 10px; background: #f8fafc;
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 2px solid var(--border);
}
.doiso-tbl td {
  padding: 7px 10px; border-bottom: 1px solid #f1f5f9;
}
.doiso-row-warn { background: #fef2f2; }
.doiso-row-warn td:last-child { color: #dc2626; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════ */
.db-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 20px;
}
.db-stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 16px; text-align: center; cursor: pointer;
  transition: box-shadow .2s, transform .15s;
}
.db-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.db-stat-val {
  display: block; font-size: 32px; font-weight: 800; color: var(--navy);
  line-height: 1.2;
}
.db-stat-val.db-red   { color: #dc2626; }
.db-stat-val.db-green { color: #16a34a; }
.db-stat-val.db-amber { color: #d97706; }
.db-stat-lbl {
  display: block; font-size: 12px; color: var(--muted); font-weight: 600;
  margin-top: 6px; text-transform: uppercase; letter-spacing: .3px;
}

.db-section {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 16px; overflow: hidden;
}
.db-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.db-section-title {
  font-size: 14px; font-weight: 700; color: var(--navy);
}
.db-reload-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  width: 32px; height: 32px; font-size: 16px; cursor: pointer;
  color: var(--muted); transition: color .2s;
}
.db-reload-btn:hover { color: var(--accent); border-color: var(--accent); }
.db-updated { font-size: 11px; color: var(--muted); }

.db-alert-list { padding: 12px 18px; }
.db-alert-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9;
  font-size: 13px; line-height: 1.5;
}
.db-alert-row:last-child { border-bottom: none; }
.db-alert-row.red  { color: #dc2626; }
.db-alert-row.amber { color: #92400e; }
.db-alert-row.green { color: #16a34a; }

.db-tiendo-list { padding: 0; }
.db-td-row {
  display: grid; grid-template-columns: 130px 1fr 1fr 2fr 90px 110px;
  align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.db-td-row:last-child { border-bottom: none; }
.db-td-row.header {
  font-weight: 700; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .3px;
  background: #f8fafc; padding: 10px 18px;
}
.db-td-don { font-weight: 600; color: var(--navy); }
.db-td-bar-wrap {
  display: flex; align-items: center; gap: 8px;
}
.db-td-bar {
  flex: 1; height: 14px; background: #e5e7eb; border-radius: 7px; overflow: hidden;
}
.db-td-bar-fill {
  height: 100%; border-radius: 7px; transition: width .4s ease;
}
.db-td-pct { font-weight: 800; font-size: 13px; min-width: 40px; color: var(--navy); }
.db-td-hang { font-size: 12px; color: var(--muted); }
.db-td-deadline { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.db-td-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.db-td-badge.red { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.db-td-badge.amber { background: #fffbeb; color: #d97706; border: 1px solid #fcd34d; }
.db-td-tt-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
}
.db-td-tt-badge.sx  { background: #dbeafe; color: #1d4ed8; }
.db-td-tt-badge.cho { background: #f3f4f6; color: #6b7280; }
.db-td-tt-badge.ht  { background: #dcfce7; color: #16a34a; }
.db-td-row.row-warn { background: #fef2f2; }

.db-placeholder {
  padding: 40px; text-align: center; color: var(--muted); font-size: 13px;
}

/* Dashboard - Thống kê SX */
.db-sx-period-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.db-period-btn {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--muted); transition: all .15s;
}
.db-period-btn.active, .db-period-btn:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.db-sx-filters {
  padding: 10px 18px; background: #f8fafc; border-bottom: 1px solid var(--border);
}
.db-sx-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.db-sx-filter-row label { font-size: 12px; font-weight: 600; color: var(--muted); }
.db-sx-filter-row input[type="date"],
.db-sx-filter-row select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; background: #fff;
}
.db-sx-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.db-sx-stat { text-align: center; }
.db-sx-stat-val {
  display: block; font-size: 24px; font-weight: 800; color: var(--navy);
}
.db-sx-stat-lbl {
  display: block; font-size: 11px; color: var(--muted); margin-top: 2px;
}
/* Donut + table layout */
.db-sx-chart-area {
  display: grid; grid-template-columns: 260px 1fr; gap: 0;
  min-height: 200px;
}
.db-sx-donut-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 16px; border-right: 1px solid var(--border);
  position: relative;
}
.db-sx-donut {
  width: 160px; height: 160px; border-radius: 50%;
  position: relative;
}
.db-sx-donut-center {
  position: absolute; top: 20px; left: 16px; right: 16px;
  width: 160px; height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.db-sx-donut-center::before {
  content: ''; position: absolute;
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--card);
}
.db-sx-donut-total {
  position: relative; z-index: 1;
  font-size: 20px; font-weight: 800; color: var(--navy);
}
.db-sx-donut-lbl {
  position: relative; z-index: 1;
  font-size: 11px; color: var(--muted); font-weight: 600;
}
.db-sx-legend {
  margin-top: 14px; width: 100%;
}
.db-sx-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 2px 0; color: var(--text);
}
.db-sx-legend-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.db-sx-legend-pct {
  margin-left: auto; font-weight: 700; font-size: 11px; color: var(--navy);
}
/* Table */
.db-sx-table-wrap { padding: 12px 18px; overflow-x: auto; }
.db-sx-row {
  display: grid; grid-template-columns: 1fr 45px 2fr 65px 50px 45px;
  align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px;
}
.db-sx-row:last-child { border-bottom: none; }
.db-sx-row.header {
  font-weight: 700; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .3px;
}
.db-sx-bar {
  height: 12px; background: #e5e7eb; border-radius: 6px; overflow: hidden;
}
.db-sx-bar-fill {
  height: 100%; border-radius: 6px;
  transition: width .4s ease;
}
.db-sx-kg { font-weight: 700; font-size: 12px; color: var(--navy); text-align: right; }
.db-sx-pct { font-weight: 600; font-size: 11px; color: var(--muted); text-align: right; }

@media (max-width: 768px) {
  .db-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .db-td-row { grid-template-columns: 1fr; gap: 4px; }
  .db-td-row.header { display: none; }
  .db-sx-summary { grid-template-columns: repeat(2, 1fr); }
  .db-sx-chart-area { grid-template-columns: 1fr; }
  .db-sx-donut-wrap { border-right: none; border-bottom: 1px solid var(--border); padding: 16px; }
  .db-sx-row { grid-template-columns: 1fr; gap: 4px; }
  .db-sx-row.header { display: none; }
  .db-sx-filter-row { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════
   DỰ TOÁN ĐƠN HÀNG
   ═══════════════════════════════════════════════════════════ */
/* ── DỰ TOÁN: Toolbar ── */
.dt-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; flex-wrap: wrap; gap: 8px;
}
.dt-toolbar-left { display: flex; align-items: center; gap: 8px; }
.dt-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* ── DỰ TOÁN: Modal box ── */
.dt-modal-box { max-width: 720px; width: 95%; }
.dt-modal-head { padding: 16px 20px; }
.dt-modal-title { display: flex; align-items: center; gap: 10px; }
.dt-modal-icon { font-size: 22px; }
.dt-modal-body { padding: 20px; max-height: 75vh; overflow-y: auto; }
.dt-modal-foot { display: flex; justify-content: space-between; align-items: center; }
.dt-foot-right { display: flex; gap: 8px; }

/* ── DỰ TOÁN: Section groups ── */
.dt-section {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.dt-section-head {
  font-size: 13px; font-weight: 700; color: var(--navy);
  margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.dt-section-icon { font-size: 15px; }
.dt-hint { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ── DỰ TOÁN: Form grid ── */
.dt-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.dt-form-grid-3 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* ── DỰ TOÁN: Kết quả ── */
.dt-result {
  margin-top: 16px; background: #f8fafc; border: 1px solid var(--border);
  border-radius: 10px; padding: 18px;
}
.dt-result-title {
  font-size: 13px; font-weight: 800; color: var(--navy);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px;
}
.dt-result-grid {
  display: grid; gap: 10px;
}
.dt-result-grid.dt-result-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.dt-result-grid.dt-result-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.dt-r-group {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px;
}
.dt-r-group.dt-r-highlight { border-color: var(--accent); background: #eff6ff; }
.dt-r-group.dt-r-primary {
  border-color: var(--accent); background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 2px 8px rgba(37,99,235,.1);
}
.dt-r-label { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.dt-r-val { font-size: 14px; font-weight: 700; color: var(--navy); }
.dt-r-val.dt-r-big { font-size: 18px; }
.dt-r-divider { height: 1px; background: var(--border); margin: 14px 0; }
.dt-r-subtitle {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px;
}

.dt-r-status-bar {
  margin-bottom: 16px; padding: 12px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 700; text-align: center;
  line-height: 1.6;
}
.dt-r-status-bar.du-nl {
  background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0;
}
.dt-r-status-bar.thieu-nl {
  background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}
.dt-r-status-bar.kip {
  background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0;
}
.dt-r-status-bar.sat {
  background: #fefce8; color: #a16207; border: 1px solid #fde68a;
}
.dt-r-status-bar.tre {
  background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}

/* ── DỰ TOÁN: Bảng danh sách ── */
.dt-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.dt-table th {
  background: #f8fafc; padding: 10px 12px; text-align: left;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 2px solid var(--border);
}
.dt-table td {
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.dt-table tr:hover td { background: #f8fafc; }
.dt-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
}
.dt-badge.du   { background: #dcfce7; color: #16a34a; }
.dt-badge.thieu { background: #fef2f2; color: #dc2626; }
.dt-badge.moi  { background: #eff6ff; color: #2563eb; }

/* ── DỰ TOÁN: Sub text trong bảng ── */
.dt-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dt-row-huy { opacity: .45; }

/* ── DỰ TOÁN: Popup chọn trạng thái / ưu tiên ── */
.dt-field-popup {
  position: absolute; z-index: 9999;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15);
  min-width: 220px; padding: 8px 0;
  animation: dtPopupIn .15s ease-out;
}
@keyframes dtPopupIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: translateY(0); } }
.dt-fp-title {
  padding: 8px 16px 6px; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
}
.dt-fp-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer; transition: background .1s;
}
.dt-fp-option:hover { background: #f1f5f9; }
.dt-fp-option.dt-fp-selected { background: #eff6ff; }
.dt-fp-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.dt-fp-label { font-size: 13px; font-weight: 600; }
.dt-fp-desc { font-size: 11px; color: var(--muted); margin-top: 1px; }
.dt-fp-check { margin-left: auto; color: #3b82f6; font-weight: 700; font-size: 14px; }
.dt-fp-cancel {
  padding: 8px 16px; text-align: center; font-size: 12px;
  color: var(--muted); cursor: pointer; border-top: 1px solid var(--border);
  margin-top: 4px;
}
.dt-fp-cancel:hover { color: #1e293b; background: #f8fafc; }

/* ── DỰ TOÁN: Nút lập đơn + link mã đơn ── */
.dt-btn-lapdon {
  background: #3b82f6; color: #fff; border: none; border-radius: 6px;
  padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.dt-btn-lapdon:hover { background: #2563eb; transform: scale(1.03); }
.dt-don-link {
  color: #3b82f6; font-weight: 600; font-size: 12px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.dt-don-link:hover { color: #1d4ed8; }
.dt-act-unlink {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  font-size: 11px; margin-left: 4px; padding: 2px 4px; border-radius: 4px;
  vertical-align: middle; transition: all .15s;
}
.dt-act-unlink:hover { color: #dc2626; background: #fef2f2; }

/* ── DỰ TOÁN: Action buttons ── */
.dt-actions { white-space: nowrap; }
.dt-act-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s; margin-left: 2px;
}
.dt-act-btn:hover { background: #f1f5f9; }
.dt-act-del:hover { background: #fef2f2; border-color: #fecaca; }

/* ── DỰ TOÁN: Badge trạng thái (clickable) ── */
.dt-badge-tt {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: transform .1s; user-select: none;
}
.dt-badge-tt:hover { transform: scale(1.08); }
.dt-badge-tt.tt-moi   { background: #eff6ff; color: #2563eb; }
.dt-badge-tt.tt-duyet { background: #dcfce7; color: #16a34a; }
.dt-badge-tt.tt-don   { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.dt-badge-tt.tt-huy   { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }

/* ── DỰ TOÁN: Badge ưu tiên (clickable) ── */
.dt-badge-ut {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: transform .1s; user-select: none;
}
.dt-badge-ut:hover { transform: scale(1.08); }
.dt-badge-ut.ut-cao  { background: #fef2f2; color: #dc2626; }
.dt-badge-ut.ut-tb   { background: #fefce8; color: #a16207; }
.dt-badge-ut.ut-thap { background: #f1f5f9; color: #94a3b8; }

/* ── DỰ TOÁN: Responsive ── */
@media (max-width: 600px) {
  .dt-form-grid, .dt-form-grid-3 { grid-template-columns: 1fr; }
  .dt-result-grid.dt-result-grid-3 { grid-template-columns: 1fr; }
  .dt-result-grid.dt-result-grid-4 { grid-template-columns: 1fr 1fr; }
  .dt-modal-body { padding: 14px; }
  .dt-section { padding: 12px; }
  .dt-modal-foot { flex-direction: column; gap: 8px; }
  .dt-foot-right { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   BACKUP SECTION
   ═══════════════════════════════════════════════════════════ */
.bk-badge { display:inline-block; padding:3px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.bk-badge-on { background:#d1fae5; color:#065f46; }
.bk-badge-off { background:#f3f4f6; color:#6b7280; }

.bk-controls { display:flex; gap:8px; padding:12px 16px; flex-wrap:wrap; align-items:center; }
.bk-btn { padding:7px 14px; border:none; border-radius:6px; font-size:12px; font-weight:500;
           cursor:pointer; transition:all .15s; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.bk-btn:hover { filter:brightness(0.92); }
.bk-btn-primary { background:var(--accent); color:#fff; }
.bk-btn-green { background:#10b981; color:#fff; }
.bk-btn-muted { background:#e5e7eb; color:#374151; }
.bk-btn-outline { background:transparent; border:1px solid #d1d5db; color:#374151; }
.bk-btn:disabled { opacity:.5; cursor:not-allowed; }

.bk-info { display:flex; gap:20px; padding:8px 16px 12px; flex-wrap:wrap; }
.bk-info-item { display:flex; gap:6px; align-items:center; font-size:12px; }
.bk-info-label { color:#6b7280; }
.bk-info-val { font-weight:600; color:#111827; }

.bk-history-title { padding:10px 16px; font-size:12px; font-weight:600; color:#374151;
                     cursor:pointer; user-select:none; border-top:1px solid #f3f4f6; }
.bk-history-title:hover { background:#f9fafb; }
.bk-history-list { padding:0 16px 12px; }

.bk-history-group { margin-bottom:10px; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.bk-history-group-head { display:flex; justify-content:space-between; align-items:center;
                          padding:8px 12px; background:#f9fafb; font-size:12px; font-weight:600; }
.bk-history-group-files { padding:6px 12px; }
.bk-history-file { display:flex; justify-content:space-between; align-items:center;
                    padding:4px 0; font-size:11.5px; border-bottom:1px solid #f3f4f6; }
.bk-history-file:last-child { border-bottom:none; }
.bk-history-file a { color:var(--accent); text-decoration:none; }
.bk-history-file a:hover { text-decoration:underline; }
.bk-history-file .bk-size { color:#9ca3af; }

@media(max-width:600px) {
  .bk-controls { flex-direction:column; }
  .bk-btn { width:100%; justify-content:center; }
  .bk-info { flex-direction:column; gap:6px; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD SUB-TABS & NL KẾ HOẠCH
   ═══════════════════════════════════════════════════════════ */
.db-sub-tabs { display:flex; gap:0; border-bottom:2px solid #e5e7eb; margin-bottom:16px; }
.db-sub-tab { padding:10px 20px; font-size:13px; font-weight:600; color:#6b7280;
              background:none; border:none; cursor:pointer; position:relative; transition:all .2s; }
.db-sub-tab:hover { color:#1e293b; }
.db-sub-tab.active { color:var(--accent); }
.db-sub-tab.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0;
                             height:2px; background:var(--accent); }

/* NL KH sections */
.nlkh-note { font-size:11.5px; color:#9ca3af; padding:0 0 10px; }
.nlkh-table-wrap { overflow-x:auto; }

.nlkh-table { width:100%; border-collapse:collapse; font-size:12px; }
.nlkh-table th { background:#f8fafc; padding:8px 10px; text-align:left; font-weight:600;
                  color:#374151; border-bottom:2px solid #e5e7eb; white-space:nowrap; }
.nlkh-table td { padding:7px 10px; border-bottom:1px solid #f3f4f6; }
.nlkh-table tr:hover { background:#f0f9ff; }

.nlkh-tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10.5px; font-weight:600; }
.nlkh-tag-red { background:#fef2f2; color:#dc2626; }
.nlkh-tag-green { background:#f0fdf4; color:#16a34a; }
.nlkh-tag-amber { background:#fffbeb; color:#d97706; }
.nlkh-tag-blue { background:#eff6ff; color:#2563eb; }
.nlkh-tag-gray { background:#f3f4f6; color:#6b7280; }

/* Bar chart đơn giản bằng CSS */
.nlkh-bar-wrap { display:flex; align-items:center; gap:6px; }
.nlkh-bar { height:16px; border-radius:3px; min-width:2px; transition:width .3s; }
.nlkh-bar-ton { background:#3b82f6; }
.nlkh-bar-can { background:#ef4444; opacity:.7; }
.nlkh-bar-lbl { font-size:10.5px; color:#6b7280; white-space:nowrap; }

/* Năng lực cards */
.nlkh-nangluc-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:4px 0; }
.nlkh-nl-card { text-align:center; padding:16px 8px; background:#f8fafc; border-radius:10px;
                 border:1px solid #e5e7eb; }
.nlkh-nl-val { display:block; font-size:24px; font-weight:700; color:#1e293b; }
.nlkh-nl-lbl { display:block; font-size:11px; color:#6b7280; margin-top:4px; }

/* SP toggle buttons */
.nlkh-sp-card { position:relative; padding-bottom:36px; }
.nlkh-sp-toggle { display:flex; justify-content:center; gap:4px; margin-top:8px;
                   position:absolute; bottom:8px; left:50%; transform:translateX(-50%); }
.nlkh-sp-btn { border:1px solid #d1d5db; background:#fff; color:#6b7280; font-size:10px;
               padding:2px 8px; border-radius:4px; cursor:pointer; transition:all .2s;
               font-weight:500; line-height:1.4; }
.nlkh-sp-btn:hover { border-color:#3b82f6; color:#3b82f6; }
.nlkh-sp-btn.active { background:#3b82f6; color:#fff; border-color:#3b82f6; }

/* Gợi ý lịch */
.nlkh-goiy-row { display:flex; align-items:center; gap:10px; padding:10px 12px;
                  border-bottom:1px solid #f3f4f6; font-size:12px; }
.nlkh-goiy-row:hover { background:#f0f9ff; }
.nlkh-goiy-stt { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
                  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.nlkh-goiy-info { flex:1; }
.nlkh-goiy-label { font-weight:600; color:#1e293b; }
.nlkh-goiy-meta { font-size:11px; color:#6b7280; margin-top:2px; }
.nlkh-goiy-badge { flex-shrink:0; }
.nlkh-goiy-note { font-size:11px; font-weight:600; }

.nlkh-footer { text-align:right; padding:8px 0; }

/* Chart area for thống kê NL */
.nlkh-chart-area { padding:4px 0; }
.nlkh-chart-bar { display:flex; align-items:center; gap:8px; padding:6px 0; }
.nlkh-chart-name { width:180px; font-size:12px; color:#374151; text-align:right; overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; }
.nlkh-chart-track { flex:1; height:20px; background:#f3f4f6; border-radius:4px; overflow:hidden; position:relative; }
.nlkh-chart-fill { height:100%; border-radius:4px; transition:width .4s; }
.nlkh-chart-val { font-size:11px; color:#6b7280; width:70px; text-align:right; flex-shrink:0; }

@media(max-width:600px) {
  .db-sub-tab { padding:8px 14px; font-size:12px; }
  .nlkh-nangluc-cards { grid-template-columns:repeat(2,1fr); }
  .nlkh-chart-name { width:100px; font-size:11px; }
}

/* Tab source trong modal CNPS */
#cnps-source-tabs {
  flex-shrink: 0;
}
#cnps-source-tabs button:hover {
  background: var(--hover, #f8fafc);
}

/* Vùng lô GC */
#gc-lo-section table thead tr th {
  font-weight: 600;
  white-space: nowrap;
}
#gc-lo-section table tbody tr:hover {
  background: #fffbeb;
}
/* ─ ─ KJG CONFIRM DIALOG ──────────────────────────────────── */
.kjg-cfm-overlay {
  position: fixed; inset: 0;
  background: rgba(8,16,32,.55);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  animation: kjgCfmFadeIn .15s ease;
}
@keyframes kjgCfmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kjg-cfm-box {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  max-width: 420px; width: 90%;
  box-shadow: var(--shadow-xl);
  animation: kjgCfmSlideUp .15s ease;
}
@keyframes kjgCfmSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kjg-cfm-title {
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--navy); margin-bottom: 8px;
}
.kjg-cfm-msg {
  font-size: var(--fs-base); color: var(--text-2);
  line-height: 1.65; margin-bottom: 22px;
  word-break: break-word;
}
.kjg-cfm-btns {
  display: flex; justify-content: flex-end; gap: 8px;
}
.kjg-cfm-btn {
  height: 36px; padding: 0 18px;
  border-radius: 8px;
  font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  border: none;
}
.kjg-cfm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kjg-cfm-cancel {
  background: #f1f5f9; color: var(--text-2);
  border: 1px solid var(--border);
}
.kjg-cfm-cancel:hover { background: #e2e8f0; }
.kjg-cfm-ok {
  background: var(--accent); color: #fff;
}
.kjg-cfm-ok:hover { background: var(--accent-h); box-shadow: 0 2px 8px rgba(37,99,235,.3); }
.kjg-cfm-ok.danger {
  background: var(--red);
}
.kjg-cfm-ok.danger:hover { background: #b91c1c; box-shadow: 0 2px 8px rgba(220,38,38,.3); }

/* ── Chuẩn hoá input ngày — hiển thị theo locale trình duyệt ── */
input[type="date"] {
  font-family: inherit;
  /* Buộc Chrome dùng định dạng dd/mm/yyyy qua lang vi */
}
/* Ngăn spin-button xấu trên input number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 1; }

/* ── Global date input: overlay dd/MM/yyyy (tránh phụ thuộc locale OS) ── */
.kjg-date-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.kjg-date-ov {
  position: absolute;
  top: 2px; bottom: 2px; left: 2px; right: 24px; /* right: chừa chỗ icon lịch ~22px */
  display: flex;
  align-items: center;
  padding: 0 8px;
  pointer-events: none;
  background: white;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text, #0f172a);
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
  font-family: inherit;
}
/* Khi đang focus (user đang chọn): hiện text gốc để thấy được highlight */
input[type="date"].kjg-date-filled { color: transparent; caret-color: transparent; }
input[type="date"].kjg-date-filled:focus { color: inherit; caret-color: auto; }
input[type="date"].kjg-date-filled:focus ~ .kjg-date-ov,
input[type="date"].kjg-date-filled:focus + .kjg-date-ov { opacity: 0; }

/* ── Highlight card/dòng mới sau khi lưu khách OEM ── */
@keyframes oemHighlightPulse {
  0%   { box-shadow: 0 0 0 0px rgba(37,99,235,.7); background-color: #dbeafe; }
  60%  { box-shadow: 0 0 0 4px rgba(37,99,235,.4); background-color: #eff6ff; }
  100% { box-shadow: 0 0 0 3px rgba(37,99,235,.25); background-color: inherit; }
}
.oem-highlight-new {
  animation: oemHighlightPulse 0.5s ease forwards;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25) !important;
  transition: box-shadow 1.5s ease, background-color 1.5s ease;
}


/* ─ ─ LOGIN SCREEN STYLES ─────────────────────────────────────── */
.login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d1b2e 0%, #132240 55%, #1a3a6e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
}

.login-container {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.06);
  padding: 48px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: slideUp 0.5s ease-out;
}

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

.login-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #1a3a6e 0%, #2563eb 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.15);
}

.login-logo svg {
  width: 50px;
  height: 50px;
  opacity: 0.9;
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  color: #0d1b2e;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.login-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 32px;
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-form-group {
  text-align: left;
}

.login-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-form-group input {
  width: 100%;
  height: 42px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  transition: all 0.2s;
  background: #ffffff;
}

.login-form-group input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: #f8fafc;
}

.login-form-group input::placeholder {
  color: #cbd5e1;
}

.login-btn {
  height: 44px;
  background: linear-gradient(135deg, #1a3a6e 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.25);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.login-btn.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.login-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.login-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease;
  display: none;
}

.login-error.show {
  display: block;
}

.login-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #16a34a;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease;
  display: none;
}

.login-success.show {
  display: block;
}

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

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
}

.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

.login-footer {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.6;
}

.login-footer a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

.login-footer a:hover {
  text-decoration: underline;
}



/* ── Robo Write Action Confirm UI ───────────────────────── */
.robo-action-confirm {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.3);
  border-radius: 10px;
}
.robo-action-label {
  font-size: 11px;
  font-weight: 700;
  color: #f97316;
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.robo-action-desc {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 10px;
  line-height: 1.5;
}
.robo-action-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.robo-btn-ok {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid #16a34a;
  background: rgba(22,163,74,0.15);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.robo-btn-ok:hover  { background: rgba(22,163,74,0.3); }
.robo-btn-ok:disabled { opacity: .5; cursor: not-allowed; }
.robo-btn-cancel {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(148,163,184,0.3);
  background: transparent;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
}
.robo-btn-cancel:hover { background: rgba(148,163,184,0.1); }

/* ── Robo Excel Output UI ───────────────────────────────── */
.robo-excel-output {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.3);
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════
   XNSX REDESIGN — Card LSX, Filter Pills, Hybrid Buttons
   ══════════════════════════════════════════════════════════════ */

/* Filter pill bar */
.xnsx-filter-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-card, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
}
.xnsx-filter-pill {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font, 'Inter', sans-serif);
  color: var(--text, #374151);
  transition: all .15s ease;
  white-space: nowrap;
}
.xnsx-filter-pill:hover { border-color: #6366f1; color: #6366f1; background: #f5f3ff; }
.xnsx-filter-pill.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.xnsx-filter-pill.pill-warn { border-color: #f59e0b; color: #b45309; background: #fefce8; }
.xnsx-filter-pill.pill-warn.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.xnsx-filter-pill.pill-ok { border-color: #10b981; color: #065f46; background: #f0fdf4; }
.xnsx-filter-pill.pill-ok.active { background: #10b981; color: #fff; border-color: #10b981; }
.xnsx-filter-search {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  height: 32px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 0 14px 0 32px;
  font-size: 12px;
  font-family: var(--font, 'Inter', sans-serif);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%239ca3af' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 10px center;
  outline: none;
  transition: border-color .15s;
}
.xnsx-filter-search:focus { border-color: #6366f1; }
.xnsx-filter-refresh {
  height: 32px;
  width: 32px;
  border: 1.5px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.xnsx-filter-refresh:hover { border-color: #6366f1; background: #f5f3ff; transform: rotate(45deg); }

/* Batch import bar */
.xnsx-batch-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #1e40af;
  animation: slideDown .2s ease;
}
.xnsx-batch-bar.visible { display: flex; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.xnsx-batch-count { font-weight: 700; font-size: 14px; }
.xnsx-batch-btn {
  margin-left: auto;
  padding: 5px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s;
}
.xnsx-batch-btn:hover { background: #1d4ed8; }
.xnsx-batch-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}

/* LSX Card */
.xnsx-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--card, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .15s;
}
.xnsx-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.xnsx-card.card-done { opacity: .75; }
.xnsx-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-card, #f8fafc);
  border-bottom: 1px solid transparent;
  transition: background .12s;
}
.xnsx-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xnsx-card-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xnsx-card-row2 { display: flex; align-items: center; gap: 4px; }
.xnsx-card-kh {
  font-size: 11px; font-weight: 600; color: #7c3aed;
  background: #f5f3ff; border-radius: 4px; padding: 1px 6px;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xnsx-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.xnsx-detail-info {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: #f8fafc; border-bottom: 1px solid var(--border);
  padding: 8px 16px; font-size: 11.5px;
}
.xnsx-detail-info span { color: var(--text); }
.xnsx-detail-info b { color: var(--navy); }
.xnsx-card-header:hover { background: #f1f5f9; }
.xnsx-card-header.open { border-bottom-color: var(--border, #e2e8f0); }
.xnsx-card-chevron {
  font-size: 11px;
  color: var(--muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.xnsx-card-chevron.open { transform: rotate(90deg); }
.xnsx-card-ma {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy, #1e3a5f);
  min-width: 90px;
}
.xnsx-card-tp {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.xnsx-card-mat {
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.xnsx-card-product {
  font-size: 11.5px;
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xnsx-card-mini-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.xnsx-mini-stat {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.xnsx-mini-stat b { color: var(--text); }
.xnsx-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 120px;
}
.xnsx-progress-bar-bg {
  height: 6px;
  width: 80px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}
.xnsx-progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease;
}
.xnsx-progress-pct {
  font-size: 10px;
  color: var(--muted);
  min-width: 28px;
  text-align: right;
}

/* Status badges for LSX header */
.xnsx-lsx-badge {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.xnsx-lsx-badge.chua  { background: #fef3c7; color: #92400e; }
.xnsx-lsx-badge.mot-phan { background: #dbeafe; color: #1e40af; }
.xnsx-lsx-badge.du    { background: #d1fae5; color: #065f46; }

/* Detail panel */
.xnsx-detail-panel {
  padding: 12px 16px 16px;
  background: #f8fafc;
}

/* Compact table for shifts */
.xnsx-shift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.xnsx-shift-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.xnsx-shift-table th.num { text-align: right; }
.xnsx-shift-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.xnsx-shift-table tr.zebra { background: #fff; }
.xnsx-shift-table tr.done td { opacity: .65; }
.xnsx-shift-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xnsx-shift-table tr:last-child td { border-bottom: none; }
.xnsx-shift-table tr.xnsx-inline-confirm td {
  padding: 0;
  background: #eff6ff;
}
.xnsx-shift-table tr.highlight-pending td { background: #fffbeb; }

/* Hàng cân cảnh báo */
.hangcan-ok   { color: var(--text); }
.hangcan-warn { color: #d97706; font-weight: 600; }
.hangcan-none { color: var(--muted); font-style: italic; }

/* Status badge for shift row */
.shift-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.shift-badge.chua    { background: #fef3c7; color: #92400e; }
.shift-badge.da-nhap { background: #d1fae5; color: #065f46; }
.shift-badge.da-dc   { background: #dbeafe; color: #1e40af; }

/* Hybrid action button */
.xnsx-btn-nhap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1.5px solid #10b981;
  border-radius: 7px;
  background: #f0fdf4;
  color: #065f46;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
  white-space: nowrap;
}
.xnsx-btn-nhap:hover { background: #10b981; color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.3); }
.xnsx-btn-nhap:disabled { opacity: .45; cursor: not-allowed; }
.xnsx-btn-edit {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 5px;
  transition: background .12s;
  color: var(--muted);
}
.xnsx-btn-edit:hover { background: #f1f5f9; color: var(--text); }
.xnsx-btn-adjust {
  background: none;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 6px;
  color: #6b7280;
  font-family: var(--font);
  transition: all .12s;
}
.xnsx-btn-adjust:hover { border-color: #6366f1; color: #6366f1; background: #f5f3ff; }

/* Inline confirm row */
.xnsx-inline-confirm-box {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.xnsx-inline-confirm-box .confirm-text { flex: 1; font-weight: 500; color: #1e40af; }
.xnsx-btn-confirm-ok {
  padding: 5px 14px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}
.xnsx-btn-confirm-ok:hover { background: #059669; }
.xnsx-btn-confirm-cancel {
  padding: 5px 10px;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  color: var(--muted);
}
.xnsx-btn-confirm-cancel:hover { background: #f1f5f9; }

/* Adjust panel modal-style */
.xnsx-adjust-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.xnsx-adjust-box {
  background: #fff;
  border-radius: 14px;
  width: 420px;
  max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  overflow: hidden;
}
.xnsx-adjust-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.xnsx-adjust-head h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.xnsx-adjust-head p {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 0;
}
.xnsx-adjust-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.xnsx-adjust-body { padding: 16px 20px; }
.xnsx-adjust-body .field { margin-bottom: 12px; }
.xnsx-adjust-body label { font-size: 11px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.xnsx-adjust-body input, .xnsx-adjust-body textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  padding: 8px 10px; font-size: 13px;
  font-family: var(--font); outline: none;
  transition: border-color .15s;
}
.xnsx-adjust-body input:focus, .xnsx-adjust-body textarea:focus { border-color: #6366f1; }
.xnsx-adjust-body .hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.xnsx-adjust-foot {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #f1f5f9;
}
.xnsx-adjust-audit {
  margin-top: 12px;
  font-size: 11px;
  border-radius: 8px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  padding: 8px 10px;
}
.xnsx-adjust-audit-title { font-weight: 700; color: #1e40af; margin-bottom: 5px; }
.xnsx-adjust-audit-row { color: #374151; margin-bottom: 3px; }
.xnsx-adjust-audit-row span { font-weight: 600; }

/* Mark-all checkbox */
.xnsx-cb-all { cursor: pointer; accent-color: #6366f1; }
.xnsx-cb { cursor: pointer; accent-color: #10b981; }

/* Footer summary bar */
.xnsx-detail-footer {
  padding: 8px 14px;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
}
.xnsx-detail-footer b { color: var(--text); }

/* Empty state */
.xnsx-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 13px;
}
.xnsx-empty-icon { font-size: 32px; margin-bottom: 8px; }

/* ═ ══════════════════════════════════════════════════════════════
   HR DASHBOARD (QUẢN LÝ NHÂN SỰ)
═ ══════════════════════════════════════════════════════════════ */

/* Mini Dashboard Cards */
.hr-dash-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.hr-stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hr-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.hr-stat-icon.total { background: #eff6ff; color: #3b82f6; }
.hr-stat-icon.active { background: #f0fdf4; color: #10b981; }
.hr-stat-icon.probation { background: #fffbeb; color: #f59e0b; }
.hr-stat-icon.inactive { background: #f1f5f9; color: #64748b; }
.hr-stat-info { flex: 1; }
.hr-stat-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.hr-stat-value { font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1; }

/* Smart Filter Bar */
.hr-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.hr-search {
  flex: 1;
  max-width: 300px;
  position: relative;
}
.hr-search input {
  width: 100%;
  padding-left: 32px;
  height: 36px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid transparent;
}
.hr-search input:focus { background: #fff; border-color: var(--accent); }
.hr-search-icon {
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--subtle);
  font-size: 13px;
}
.hr-filter-chips {
  display: flex;
  gap: 6px;
  border-left: 1px solid var(--border);
  padding-left: 12px;
}
.hr-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #f1f5f9;
  color: var(--muted);
  border: 1px solid transparent;
  transition: all 0.2s;
  user-select: none;
}
.hr-chip:hover { background: #e2e8f0; }
.hr-chip.active { background: var(--navy); color: #fff; box-shadow: 0 2px 6px rgba(13, 27, 46, 0.2); }
.hr-dept-select {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #f8fafc;
  font-weight: 600;
  color: var(--text-2);
  min-width: 140px;
}

/* Operational Data Table */
.hr-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.hr-table {
  width: 100%;
  border-collapse: collapse;
}
.hr-table th {
  background: #f8fafc;
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.hr-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.hr-table tr:last-child td { border-bottom: none; }
.hr-table tr:hover td { background: #f8faff; }

/* Department group header row */
.hr-dept-header-row td {
  background: #f1f5f9 !important;
  padding: 6px 16px;
  border-top: 2px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.hr-dept-header-row:first-child td { border-top: none; }
.hr-dept-header-row:hover td { background: #f1f5f9 !important; }
.hr-dept-header-icon { font-size: 14px; margin-right: 6px; }
.hr-dept-header-name {
  font-size: 11px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.hr-dept-header-count {
  margin-left: 8px; font-size: 11px; color: #94a3b8;
  font-weight: 500;
}

/* Employee Avatar & Name */
.hr-emp-col {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hr-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.hr-emp-info { display: flex; flex-direction: column; }
.hr-emp-name { font-weight: 700; color: var(--navy); font-size: 14px; }
.hr-emp-code { font-family: var(--font-mono); font-size: 11px; color: var(--subtle); }

/* Dept Badge */
.hr-dept-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: var(--text-2);
}

/* Status Badges */
.hr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.hr-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.hr-status.chinh-thuc { background: #f0fdf4; color: #166534; }
.hr-status.chinh-thuc::before { background: #10b981; }
.hr-status.thu-viec { background: #fffbeb; color: #b45309; }
.hr-status.thu-viec::before { background: #f59e0b; }
.hr-status.nghi { background: #f1f5f9; color: #64748b; }
.hr-status.nghi::before { background: #94a3b8; }

/* Row Hover Actions */
.hr-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.2s;
}
.hr-table tr:hover .hr-actions { opacity: 1; }
.hr-btn-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.hr-btn-icon:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--accent);
}

/* ══════════════════════════════════════════════
   CUSTOMER 360 PANEL
══════════════════════════════════════════════ */
#c360-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,.35);
  z-index: 1200;
  animation: fadeIn .15s ease;
}
#c360-backdrop.open { display: block; }

#c360-panel {
  position: fixed;
  top: 0;
  right: -720px;
  width: 680px;
  max-width: 96vw;
  height: 100vh;
  background: var(--card);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 32px rgba(0,0,0,.14);
  transition: right .24s cubic-bezier(.4,0,.2,1);
}
#c360-panel.open { right: 0; }

/* ── Sticky top ── */
.c360-sticky { flex-shrink: 0; }

/* Header */
.c360-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.c360-hdr-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.c360-hdr-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.c360-hdr-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.6;
}
.c360-hdr-btns { display: flex; gap: 5px; flex-shrink: 0; }
.c360-hdr-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}
.c360-hdr-btn:hover { background: #f1f5f9; }
.c360-hdr-btn.close {
  color: var(--muted);
  font-size: 15px;
  padding: 0 8px;
  line-height: 1;
}

/* Stage bar */
.c360-stage-wrap {
  padding: 9px 16px 8px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
}
.c360-stage-steps {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.c360-gd-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: var(--card);
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  flex-shrink: 0;
  transition: .12s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c360-gd-btn.done  { background: var(--accent); border-color: var(--accent); color: #fff; }
.c360-gd-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.12); }
.c360-gd-btn:not(.done):not(.active):hover { border-color: var(--accent); color: var(--accent); }
.c360-gd-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  min-width: 8px;
}
.c360-gd-line.done { background: var(--accent); }
.c360-stage-label { font-size: 11px; color: var(--muted); }
.c360-stage-label b { color: var(--navy); }

/* Stats bar */
.c360-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}
.c360-stat {
  padding: 7px 10px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.c360-stat:last-child { border-right: none; }
.c360-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  display: block;
  line-height: 1.2;
}
.c360-stat-lbl {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-top: 2px;
  display: block;
}

/* Tabs */
.c360-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.c360-tab {
  flex: 1;
  height: 34px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  border-bottom: 2px solid transparent;
  transition: .12s;
}
.c360-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.c360-tab:hover:not(.active) { color: var(--text); background: #f8fafc; }

/* Scrollable content */
.c360-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  overscroll-behavior: contain;
}

/* Footer */
.c360-footer {
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: #fafbfc;
}

/* Empty / Loading states */
.c360-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 28px;
}
.c360-empty > div { font-size: 13px; margin-top: 8px; color: var(--muted); }
.c360-loading { padding: 32px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── Đơn hàng items ── */
.c360-don-item {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color .12s;
}
.c360-don-item:hover { border-color: #94a3b8; }
.c360-don-item.done  { opacity: .6; }
.c360-don-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.c360-don-ma { font-size: 10px; color: var(--muted); font-family: monospace; }
.c360-don-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}
.c360-don-badge.done { background: #dcfce7; color: #166534; }
.c360-don-badge.warn { background: #fef2f2; color: #991b1b; }
.c360-don-sp { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.c360-don-qc { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.c360-don-prog { margin: 5px 0; }
.c360-don-prog-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.c360-don-prog-lbl { font-size: 9px; font-weight: 700; color: var(--muted); width: 26px; text-align: right; }
.c360-prog-bar { flex: 1; height: 4px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.c360-prog-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.c360-don-prog-num { font-size: 10px; font-weight: 600; width: 108px; text-align: right; white-space: nowrap; }
.c360-don-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.c360-don-han { font-size: 10px; color: var(--muted); }
.c360-don-han.warn { color: #dc2626; font-weight: 600; }

/* ── Công nợ ── */
.c360-cn-summary {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.c360-cn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text);
}
.c360-cn-row.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.c360-cn-warn {
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: #92400e;
  margin-bottom: 10px;
}
.c360-cn-actions { display: flex; gap: 6px; margin-bottom: 14px; }
.c360-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 10px 0 7px;
}
.c360-tx-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid #f0f4f8;
}
.c360-tx-main  { display: flex; flex-direction: column; gap: 2px; }
.c360-tx-loai  { font-size: 11px; color: var(--text); font-weight: 500; }
.c360-tx-ref   { font-size: 10px; color: var(--accent); font-family: monospace; }
.c360-tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c360-tx-amt   { font-size: 12px; font-weight: 700; }
.c360-tx-amt.pos { color: #dc2626; }  /* tiền hàng = tăng nợ */
.c360-tx-amt.neg { color: #16a34a; }  /* tiền nhận = giảm nợ */
.c360-tx-date  { font-size: 10px; color: var(--muted); }

/* ── Timeline placeholder ── */
.c360-tl-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
}

/* Stale stat card highlight */
.c360-stat-val.stale { color: #dc2626; }
.c360-stat-val.warn  { color: #d97706; }
.c360-stat-val.ok    { color: #16a34a; }

/* OEM stats — thêm card Cần follow */
.oem-stat-card.stale .oem-stat-val { color: var(--red); }

@media (max-width: 768px) {
  #c360-panel { width: 100vw; }
  .c360-stats { grid-template-columns: repeat(2, 1fr); }
  .c360-stats .c360-stat:nth-child(2) { border-right: none; }
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMER 360 — TIMELINE TAB
   ══════════════════════════════════════════════════════════════ */

/* Quick-add action bar */
.c360-tl-actions {
  display: flex;
  gap: 6px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.c360-tl-btn {
  flex: 1;
  padding: 7px 4px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.c360-tl-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.c360-tl-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Inline form */
.c360-tl-form {
  background: var(--accent-light);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  display: none;
}
.c360-tl-form.open { display: block; }
.c360-tl-form textarea {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
}
.c360-tl-form textarea:focus { border-color: var(--accent); }
.c360-tl-form-row {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  align-items: center;
}
.c360-tl-form-row input[type="date"] {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}
.c360-tl-form-row input[type="date"]:focus { border-color: var(--accent); }
.c360-tl-form-row .spacer { flex: 1; }
.c360-tl-save-btn {
  padding: 5px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.c360-tl-save-btn:hover { background: var(--accent-hover); }
.c360-tl-cancel-btn {
  padding: 5px 10px;
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.c360-tl-cancel-btn:hover { background: #f1f5f9; }

/* Timeline list */
.c360-tl-list { display: flex; flex-direction: column; gap: 0; }
.c360-tl-item {
  display: flex;
  gap: 10px;
  position: relative;
  padding-bottom: 14px;
}
/* Vertical connector line */
.c360-tl-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 22px;
  width: 2px;
  bottom: 0;
  background: var(--border);
}
.c360-tl-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  z-index: 1;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--border);
}
.c360-tl-item.manual .c360-tl-dot { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.c360-tl-item.system .c360-tl-dot { background: #f1f5f9; }
.c360-tl-body { flex: 1; min-width: 0; padding-top: 1px; }
.c360-tl-content {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}
.c360-tl-item.system .c360-tl-content { color: var(--text-light); font-style: italic; }
.c360-tl-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.c360-tl-date { font-size: 10.5px; color: var(--text-light); }
.c360-tl-who  { font-size: 10.5px; color: var(--text-light); }
.c360-tl-del {
  font-size: 11px;
  color: #dc2626;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  transition: opacity .15s;
}
.c360-tl-item:hover .c360-tl-del { opacity: 1; }
.c360-tl-del:hover { text-decoration: underline; }

/* Empty state */
.c360-tl-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
}

/* ══════════════════════════════════════════════════════════════
   EWS — Source tags (LSX + Dự toán)
   ══════════════════════════════════════════════════════════════ */
.ews-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.ews-src-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ews-src-tag.dang  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.ews-src-tag.chuan { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.ews-src-tag.dt    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.ews-src-kg { opacity: 0.7; font-weight: 400; }

/* ══════════════════════════════════════════════════════════════
   LSX Card — NL Shortage Badge
   ══════════════════════════════════════════════════════════════ */
.bc2-nl-warn-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: #dc2626;
  line-height: 1.4;
}
.bc2-nl-warn-ton {
  color: #9ca3af;
  font-weight: 400;
  font-size: 10.5px;
}
.bc2-nl-overrun-badge {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

/* ══════════════════════════════════════════════════════════════
   GIA CÔNG — Tab quản lý đơn hàng gia công
   ══════════════════════════════════════════════════════════════ */

/* Stats bar */
.gc-stats-bar {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.gc-stat-card {
  flex: 1 1 100px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.gc-stat-val { font-size: 22px; font-weight: 800; color: var(--navy); }
.gc-stat-lbl { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.gc-stat-warn .gc-stat-val { color: #dc2626; }
.gc-stat-warn { border-color: #fecaca; background: #fff1f2; }

/* Alert banner */
.gc-alert {
  padding: 10px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.gc-alert-red   { background: #fff1f2; border: 1px solid #fecaca; color: #991b1b; }
.gc-alert-amber { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.gc-alert-chip {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-weight: 600; cursor: pointer; font-size: 11px;
}
.gc-alert-chip-red   { background: #fecaca; color: #991b1b; }
.gc-alert-chip-red:hover   { background: #fca5a5; }
.gc-alert-chip-amber { background: #fde68a; color: #92400e; }
.gc-alert-chip-amber:hover { background: #fcd34d; }

/* Filter buttons */
.gc-filter-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 600; border: none;
  background: #fff; color: var(--text-light); cursor: pointer; transition: all .15s;
  border-right: 1px solid var(--border);
}
.gc-filter-btn:last-child { border-right: none; }
.gc-filter-btn.active { background: var(--accent-light); color: var(--accent); }
.gc-filter-btn:hover:not(.active) { background: #f1f5f9; }

/* Order cards */
.gc-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}
.gc-card:hover { box-shadow: var(--shadow-md); }
.gc-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 8px; flex-wrap: wrap; gap: 6px;
}
.gc-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.gc-card-customer {
  font-size: 14px; font-weight: 700; color: var(--navy);
  line-height: 1.3; word-break: break-word;
}
.gc-card-subtitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-ma-don { font-size: 12px; font-weight: 700; color: var(--accent); font-family: monospace; }
.gc-tt-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .3px;
}
.gc-tt-blue  { background: #dbeafe; color: #1d4ed8; }
.gc-tt-green { background: #dcfce7; color: #15803d; }
.gc-tt-amber { background: #fef3c7; color: #92400e; }
.gc-tt-gray  { background: #f1f5f9; color: #64748b; }

/* Card meta row */
.gc-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px;
  color: var(--text-light); margin-bottom: 10px;
}
.gc-card-meta span { white-space: nowrap; }

/* NL tracking row */
.gc-nl-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
  background: #f8fafc; border-radius: 8px; padding: 8px 10px;
}
.gc-nl-stat { flex: 1 1 70px; text-align: center; }
.gc-nl-val { font-size: 15px; font-weight: 800; color: var(--navy); }
.gc-nl-lbl { font-size: 10px; color: var(--text-light); margin-top: 1px; }
.gc-nl-used .gc-nl-val  { color: #d97706; }
.gc-nl-remain .gc-nl-val{ color: #2563eb; }
.gc-nl-order .gc-nl-val { color: #64748b; }
.gc-nl-tp .gc-nl-val    { color: #15803d; }

/* Progress bar */
.gc-progress-wrap {
  height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 3px;
}
.gc-progress-bar { height: 100%; border-radius: 4px; transition: width .3s ease; }
.gc-progress-label { font-size: 10px; color: var(--text-light); margin-bottom: 6px; }

/* CN status badges */
.gc-cn-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
}
.gc-cn-urgent { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.gc-cn-warn   { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.gc-cn-ok     { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.gc-cn-gray   { background: #f1f5f9; color: #64748b; border: 1px solid var(--border); }

/* Action buttons */
.gc-card-actions { display: flex; gap: 6px; }
.gc-action-btn {
  padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 6px;
  border: 1px solid var(--border); background: #f8fafc;
  color: var(--text); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.gc-action-btn:hover { background: #e2e8f0; }
.gc-btn-cn { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.gc-btn-cn:hover { background: #bfdbfe; }
.gc-btn-del { color: var(--red); }
.gc-btn-del:hover { background: #fee2e2; border-color: #fca5a5; }
.gc-btn-lsx-on  { background: #dcfce7; border-color: #86efac; color: #15803d; font-family: monospace; }
.gc-btn-lsx-on:hover { background: #bbf7d0; }
.gc-btn-lsx-off { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.gc-btn-lsx-off:hover { background: #fde68a; }
.gc-btn-done { background: #dcfce7; border-color: #86efac; color: #15803d; }
.gc-btn-done:hover { background: #bbf7d0; }

/* Multi-lots chips trong form modal */
.gc-lot-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; font-size: 11.5px; font-family: monospace;
  background: #dbeafe; color: #1e40af; border-radius: 4px; border: 1px solid #93c5fd;
}
.gc-lot-chip button {
  background: none; border: none; color: #1e40af; font-size: 14px; font-weight: 700;
  cursor: pointer; padding: 0 0 0 2px; line-height: 1;
}
.gc-lot-chip button:hover { color: #dc2626; }

/* Lots list trong card đơn GC */
.gc-lots-list {
  margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px dashed var(--border); padding-top: 8px;
}
.gc-lot-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: #f8fafc; border: 1px solid var(--border);
  border-radius: 6px; font-size: 11.5px; flex-wrap: wrap;
}
.gc-lot-row-skip { background: #fef2f2; border-color: #fecaca; opacity: .85; }
.gc-lot-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; flex-wrap: wrap; }
.gc-lot-code { font-family: monospace; font-weight: 700; color: var(--navy); }
.gc-lot-primary-badge {
  font-size: 9px; background: #fef3c7; color: #92400e;
  padding: 1px 4px; border-radius: 3px; font-weight: 600;
}
.gc-lot-nl { color: var(--text-light); }
.gc-lot-ngay { color: var(--muted); font-size: 10.5px; }
.gc-lot-row-stats { display: flex; align-items: center; gap: 8px; color: var(--text-light); flex-wrap: wrap; }
.gc-lot-warn { color: #92400e; background: #fef3c7; padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 600; }
.gc-lot-skip-badge { color: #991b1b; background: #fee2e2; padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 600; }
.gc-lot-toggle-btn {
  padding: 3px 8px; font-size: 10.5px; border-radius: 4px;
  border: 1px solid var(--border); background: #fff; cursor: pointer; white-space: nowrap;
}
.gc-lot-toggle-btn:hover { background: #f1f5f9; }

/* LSX chips per-lot */
.gc-lot-lsx-row {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 4px; padding-top: 6px; border-top: 1px dotted var(--border);
  font-size: 10.5px;
}
.gc-lot-lsx-label { color: var(--muted); font-weight: 600; }
.gc-lot-lsx-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: monospace; font-weight: 600; font-size: 10.5px;
  background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd;
  padding: 2px 7px; border-radius: 4px;
}
.gc-lot-lsx-add {
  font-size: 10.5px; padding: 2px 8px; border-radius: 4px;
  border: 1px dashed #93c5fd; background: #eff6ff; color: #1d4ed8;
  cursor: pointer; font-weight: 600;
}
.gc-lot-lsx-add:hover { background: #dbeafe; }
.gc-lot-lsx-add-empty { border-style: solid; }

/* Meta badge LSX */
.gc-meta-lsx { color: #15803d; font-weight: 600; }
.gc-meta-lsx-empty { color: #92400e; background: #fef3c7; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; }

/* Modal Gắn LSX */
.gc-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1000;
  align-items: center; justify-content: center;
}
.gc-modal-body {
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow-xl);
  width: 92%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column;
}
.gc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.gc-modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); }
.gc-modal-close {
  background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted);
  line-height: 1; padding: 0 4px;
}
.gc-modal-close:hover { color: var(--text); }
.gc-modal-content { padding: 16px 18px; overflow-y: auto; }
.gc-modal-footer {
  display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border);
  justify-content: flex-end; flex-wrap: wrap;
}
.gc-modal-btn {
  padding: 8px 16px; font-size: 12px; font-weight: 600; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); cursor: pointer;
}
.gc-modal-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.gc-modal-btn-primary:hover { background: var(--accent-hover); }
.gc-modal-btn-warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.gc-modal-btn-warn:hover { background: #fde68a; }
.gc-modal-btn-danger { background: #f8fafc; color: var(--text); }
.gc-modal-btn-cancel { background: var(--card); color: var(--text); }
.gc-field-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.gc-field-input {
  width: 100%; padding: 8px 10px; font-size: 12.5px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff;
}

/* Card note */
.gc-card-note {
  font-size: 11px; color: var(--text-light); margin-top: 8px;
  padding-top: 6px; border-top: 1px solid #f1f5f9;
}

/* ══════════════════════════════════════════════════════════════
   C360 — Dự toán tab
   ══════════════════════════════════════════════════════════════ */
.c360-dt-item {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: box-shadow .15s;
}
.c360-dt-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }

.c360-dt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.c360-dt-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text, #1e293b);
  flex: 1;
  min-width: 0;
}
.c360-dt-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  white-space: nowrap;
}
.c360-dt-badge.ok       { background: #dcfce7; color: #15803d; }
.c360-dt-badge.shortage { background: #fee2e2; color: #dc2626; }
.c360-dt-badge.done     { background: #e0e7ff; color: #4338ca; }
.c360-dt-badge.pending  { background: #f1f5f9; color: #64748b; }

.c360-dt-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-light, #64748b);
  margin-top: 4px;
  margin-bottom: 6px;
}
.c360-dt-stats span { white-space: nowrap; }
.c360-dt-stats b { color: var(--text, #1e293b); }

.c360-dt-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.c360-dt-lsx {
  font-size: 11px;
  color: var(--accent, #2563eb);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.c360-dt-lsx:hover { text-decoration: underline; }

.c360-dt-deadline {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.c360-dt-deadline.overdue { background: #fee2e2; color: #dc2626; font-weight: 600; }
.c360-dt-deadline.soon    { background: #fef3c7; color: #92400e; font-weight: 600; }
.c360-dt-deadline.ok      { background: #f1f5f9; color: #64748b; }

.c360-dt-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light, #64748b);
}
.c360-dt-stats-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  font-size: 12px;
  color: var(--text-light, #64748b);
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin-bottom: 14px;
}
.c360-dt-stats-row span { white-space: nowrap; }
.c360-dt-stats-row b { color: var(--text, #1e293b); }

/* ══════════════════════════════════════════════════════════════
   C360 — Quick Action footer buttons
   ══════════════════════════════════════════════════════════════ */
.c360-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.c360-quick-btn:hover {
  background: var(--accent-hover, #1d4ed8);
  transform: translateY(-1px);
}
.c360-quick-btn:active { transform: translateY(0); }
.c360-quick-btn + .c360-quick-btn { margin-left: 0; }

/* ══════════════════════════════════════════════════════════════
   AR Aging Report — Banner + Table columns
   ══════════════════════════════════════════════════════════════ */

/* Loading state */
.aging-loading {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-light, #64748b);
}

/* Main banner card */
.aging-banner {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 18px 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.aging-banner-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.aging-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1e293b);
  flex: 1;
  min-width: 150px;
}
.aging-urgent-badge {
  background: #fee2e2;
  color: #dc2626;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.aging-filter-btn {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--text-light, #64748b);
  transition: all .15s;
  white-space: nowrap;
}
.aging-filter-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.aging-filter-btn.active { background: #fee2e2; border-color: #fca5a5; color: #dc2626; font-weight: 600; }

/* KPI row */
.aging-kpis {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.aging-kpi {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 6px 4px;
}
.aging-kpi-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1e293b);
  white-space: nowrap;
}
.aging-kpi-val.ok     { color: #16a34a; }
.aging-kpi-val.amber  { color: #d97706; }
.aging-kpi-val.orange { color: #ea580c; }
.aging-kpi-val.red    { color: #dc2626; }
.aging-kpi-val.green  { color: #16a34a; }
.aging-kpi-lbl {
  font-size: 10.5px;
  color: var(--text-light, #64748b);
  margin-top: 2px;
  white-space: nowrap;
}
.aging-kpi-pct {
  font-size: 10px;
  color: var(--text-light, #94a3b8);
}
.aging-kpi-sep {
  width: 1px;
  height: 36px;
  background: var(--border, #e2e8f0);
  flex-shrink: 0;
}

/* Stacked progress bar */
.aging-bar {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: #f1f5f9;
  gap: 1px;
}
.aging-seg { height: 100%; transition: width .3s; min-width: 2px; }
.aging-seg.seg-ok     { background: #16a34a; }
.aging-seg.seg-warn1  { background: #d97706; }
.aging-seg.seg-warn2  { background: #ea580c; }
.aging-seg.seg-danger { background: #dc2626; }

/* Table aging columns */
.kh-tbl-aging .aging-col {
  font-size: 11.5px;
  white-space: nowrap;
}
.aging-val        { font-weight: 600; }
.aging-val.amber  { color: #d97706; }
.aging-val.orange { color: #ea580c; }
.aging-val.red    { color: #dc2626; }

/* Age badge per row */
.age-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.age-badge.danger { background: #fee2e2; color: #dc2626; }
.age-badge.warn   { background: #ffedd5; color: #ea580c; }
.age-badge.ok     { background: #fef3c7; color: #92400e; }
.age-badge.new    { background: #dcfce7; color: #16a34a; }

/* Row tint for overdue */
tr.kh-row-danger { background: #fff5f5 !important; }
tr.kh-row-warn   { background: #fffbf0 !important; }
tr.kh-row-danger:hover { background: #fee2e2 !important; }
tr.kh-row-warn:hover   { background: #fef3c7 !important; }

/* ===== Công nợ — Grouped Khách Hàng Table ===== */
.kh-section-head td {
  padding: 10px 12px 8px;
  background: #f8fafc;
  border-top: 2px solid var(--border, #e2e8f0);
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.kh-section-head:hover td { background: #f1f5f9; }
.kh-sh-icon { font-size: 14px; margin-right: 4px; }
.kh-sh-label {
  font-weight: 700;
  color: var(--text, #1e293b);
  margin-right: 6px;
}
.kh-sh-count {
  display: inline-block;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-right: 8px;
}
.kh-sh-total {
  font-weight: 600;
  color: #dc2626;
  margin-left: 4px;
}
.kh-sh-coc .kh-sh-total     { color: #16a34a; }
.kh-sh-clear .kh-sh-total  { color: #64748b; }
.kh-sh-pending td { background: #fffbeb !important; border-top-color: #fde68a !important; }
.kh-sh-pending .kh-sh-label { color: #92400e; }
.kh-sh-caret {
  float: right;
  color: var(--text-light, #64748b);
  font-size: 11px;
  margin-top: 1px;
  transition: transform .2s;
}

/* Action cell in each row */
.kh-act-cell {
  white-space: nowrap;
  text-align: right;
  padding-right: 10px !important;
}
.kh-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  margin-left: 4px;
  transition: background .15s, border-color .15s;
}
.kh-action-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.kh-remind-btn {
  border-color: #fed7aa;
  background: #fff7ed;
}
.kh-remind-btn:hover { background: #ffedd5; border-color: #fb923c; }
.kh-don-btn {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.kh-don-btn:hover { background: #dcfce7; border-color: #4ade80; }

/* ═══════════════════════════════════════════════════════
   MODULE: HÀNG CHỜ XUẤT (cx-*)
═══════════════════════════════════════════════════════ */
/* Stats bar */
.cx-stats-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0 16px; margin-bottom: 2px;
}
.cx-stat {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; min-width: 140px; flex: 1;
}
.cx-stat-amber { border-color: #fde68a; background: #fffbeb; }
.cx-stat-red   { border-color: #fca5a5; background: #fef2f2; }
.cx-stat-icon  { font-size: 20px; }
.cx-stat-val   { font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1; }
.cx-stat-lbl   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cx-stat-amber .cx-stat-val { color: #b45309; }
.cx-stat-red   .cx-stat-val { color: #dc2626; }
.cx-reload-btn {
  margin-left: auto; padding: 8px 14px; font-size: 12px; font-weight: 600;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; color: var(--muted); font-family: var(--font); white-space: nowrap;
  flex-shrink: 0;
}
.cx-reload-btn:hover { background: #f1f5f9; color: var(--navy); }

/* Table */
.cx-table-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.cx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cx-table th {
  background: #f8fafc; padding: 10px 14px; text-align: left;
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.cx-table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cx-row:last-child td { border-bottom: none; }
.cx-row:hover td { background: #f8faff; }
.cx-row-warn td  { background: #fffdf0 !important; }
.cx-row-urgent td { background: #fff5f5 !important; }
.cx-row-urgent:hover td { background: #fee2e2 !important; }

/* Banner tổng "Chờ xuất" */
.cx-banner {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 12px;
}
.cx-banner-stat {
  flex: 1 1 140px; background: #fff; padding: 10px 14px;
  border-radius: 8px; border-left: 3px solid var(--accent);
  display: flex; flex-direction: column; gap: 2px;
}
.cx-banner-stat.cx-banner-green  { border-left-color: #16a34a; }
.cx-banner-stat.cx-banner-red    { border-left-color: #dc2626; background: #fef2f2; }
.cx-banner-stat.cx-banner-amber  { border-left-color: #d97706; background: #fffbeb; }
.cx-banner-stat.cx-banner-blue   { border-left-color: #2563eb; background: #eff6ff; }
.cx-banner-val { font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.cx-banner-lbl { font-size: 10.5px; color: var(--text-light); font-weight: 600; }
.cx-banner-note {
  flex-basis: 100%; font-size: 11px; color: var(--text-light);
  background: #fff; padding: 8px 12px; border-radius: 6px; border: 1px dashed var(--border);
}
.cx-banner-note.cx-banner-warn { background: #fffbeb; color: #92400e; border-color: #fcd34d; }

/* Aging badges */
.cx-aging-badge {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.cx-aging-green  { background: #dcfce7; color: #166534; }
.cx-aging-amber  { background: #fef3c7; color: #92400e; }
.cx-aging-red    { background: #fee2e2; color: #991b1b; }

/* Lý do giữ hàng */
.cx-reason-wrap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; position: relative; }
.cx-reason-pill {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  background: #eff6ff; color: #1e40af; font-size: 11px; font-weight: 600;
}
.cx-reason-btn {
  padding: 3px 9px; font-size: 11px; font-weight: 600; cursor: pointer;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 6px;
  color: var(--muted); font-family: var(--font);
}
.cx-reason-btn:hover { background: #f1f5f9; color: var(--accent); border-color: var(--accent); }
.cx-reason-clear {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  font-size: 12px; padding: 1px 3px; line-height: 1;
}
.cx-reason-clear:hover { color: #dc2626; }
.cx-reason-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 400;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 220px; overflow: hidden;
}
.cx-reason-opt {
  padding: 9px 14px; font-size: 12px; cursor: pointer; color: var(--text);
  transition: background .1s;
}
.cx-reason-opt:hover { background: #f0f9ff; color: var(--accent); }
.cx-reason-custom { padding: 8px; border-top: 1px solid #f1f5f9; }

/* Xuất ngay button */
.cx-xuat-btn {
  padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--accent); color: #fff; border: none; border-radius: 7px;
  font-family: var(--font); white-space: nowrap;
  transition: background .15s, transform .1s;
}
.cx-xuat-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.cx-xuat-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   UI UPGRADE — NHẬT KÝ SX · KHO NL · KHO TP
   v3.0 — Professional & Smart Warehouse UI
══════════════════════════════════════════════════════════════════ */

/* ─── A. GLOBAL TABLE ENHANCEMENTS ──────────────────────────────── */

/* Bảng Kho TP tồn kho — wrap để sticky header hoạt động */
.ktp-tk-table-wrap,
.lsktp-table-wrap,
.nksx-table-wrap {
  overflow: auto;
  max-height: 600px;
  border-radius: 10px;
  border: 1px solid #e8edf2;
}
.ktp-tk-table,
.lsktp-table,
.nksx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: var(--font);
}

/* Sticky header với visual mạnh hơn */
.ktp-tk-table thead th,
.lsktp-table thead th,
.nksx-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  box-shadow: 0 1px 0 #e2e8f0;
}
.ktp-tk-table thead th:first-child,
.lsktp-table thead th:first-child,
.nksx-table thead th:first-child {
  border-radius: 0;
}

/* Body rows */
.ktp-tk-table tbody td,
.lsktp-table tbody td,
.nksx-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1e293b;
  transition: background .12s;
}

/* Zebra rows */
.ktp-tk-table tbody tr:nth-child(even) td,
.lsktp-table tbody tr:nth-child(even) td,
.nksx-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

/* Row hover */
.ktp-tk-table tbody tr:hover td,
.lsktp-table tbody tr:hover td,
.nksx-table tbody tr:hover td {
  background: #eff6ff !important;
  cursor: pointer;
}

/* ─── ROW STATUS HIGHLIGHTS ─────────────────────────────────────── */
/* Tồn = 0 (hết hàng) — highlight đỏ nhạt */
.ktp-tk-table tbody tr.row-het-hang td {
  background: #fff1f2 !important;
}
.ktp-tk-table tbody tr.row-het-hang:hover td {
  background: #ffe4e6 !important;
}
.ktp-tk-table tbody tr.row-het-hang td:first-child {
  border-left: 3px solid #f43f5e;
}

/* Tồn thấp (< ngưỡng) — cảnh báo vàng */
.ktp-tk-table tbody tr.row-ton-thap td {
  background: #fffbeb !important;
}
.ktp-tk-table tbody tr.row-ton-thap:hover td {
  background: #fef3c7 !important;
}
.ktp-tk-table tbody tr.row-ton-thap td:first-child {
  border-left: 3px solid #f59e0b;
}

/* NL tồn kho thấp */
.tk-table tr.row-ton-thap td { background: #fffbeb !important; }
.tk-table tr.row-ton-thap td:first-child { border-left: 3px solid #f59e0b; }
.tk-table tr.row-het td { background: #fff1f2 !important; }
.tk-table tr.row-het td:first-child { border-left: 3px solid #f43f5e; }
.tk-table tr:hover td { background: #eff6ff !important; }

/* Badge trạng thái tồn kho */
.badge-het-hang {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fee2e2; color: #b91c1c;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
}
.badge-ton-thap {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fef3c7; color: #92400e;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
}
.badge-ton-ok {
  display: inline-flex; align-items: center; gap: 3px;
  background: #dcfce7; color: #166534;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
}

/* Mini progress bar trong cột tồn */
.ton-progress-wrap {
  display: flex; align-items: center; gap: 6px;
}
.ton-progress-bar {
  flex: 1; height: 5px; background: #e2e8f0;
  border-radius: 99px; overflow: hidden; min-width: 40px;
}
.ton-progress-fill {
  height: 100%; border-radius: 99px;
  transition: width .3s ease;
}
.ton-progress-fill.ok   { background: #22c55e; }
.ton-progress-fill.warn { background: #f59e0b; }
.ton-progress-fill.low  { background: #f43f5e; }

/* ─── B. STATS CARD NÂNG CẤP ────────────────────────────────────── */
.ktp-stats-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ktp-stat-card-v2 {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #e8edf2;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.ktp-stat-card-v2::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent);
  border-radius: 2px 0 0 2px;
}
.ktp-stat-card-v2.green::before { background: #22c55e; }
.ktp-stat-card-v2.red::before   { background: #f43f5e; }
.ktp-stat-card-v2.amber::before { background: #f59e0b; }

.ktp-stat-v2-icon {
  font-size: 18px; margin-bottom: 2px;
}
.ktp-stat-v2-val {
  font-size: 22px; font-weight: 800;
  color: #0f172a; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ktp-stat-v2-lbl {
  font-size: 11px; font-weight: 600;
  color: #64748b; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ktp-stat-v2-sub {
  font-size: 11px; color: #94a3b8;
  margin-top: 2px;
}
.ktp-stat-v2-warn {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fef3c7; color: #92400e;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px;
  margin-top: 4px; width: fit-content;
}

/* ─── C. KHO TP — FILTER BAR 2 TẦNG ────────────────────────────── */
.ktp-filter-v2 {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
}

/* Tầng 1: Thời gian + Làm mới */
.ktp-filter-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ktp-filter-row1 .ktp-date-label {
  font-size: 11px; font-weight: 700;
  color: #475569; white-space: nowrap;
}
.ktp-filter-row1 input[type="date"] {
  height: 32px; padding: 0 8px;
  border: 1.5px solid #e2e8f0; border-radius: 7px;
  font-size: 12px; font-family: var(--font); color: var(--text);
  background: #f8fafc;
  transition: border-color .15s;
}
.ktp-filter-row1 input[type="date"]:focus {
  outline: none; border-color: #2563eb;
  background: #fff;
}
.ktp-qp-group {
  display: flex; gap: 3px;
}
.ktp-qp-btn {
  padding: 5px 11px; font-size: 11.5px; font-weight: 600;
  border: 1.5px solid #e2e8f0; border-radius: 7px;
  background: #f8fafc; color: #64748b;
  cursor: pointer; font-family: var(--font);
  transition: all .15s;
}
.ktp-qp-btn:hover { background: #f1f5f9; color: #334155; }
.ktp-qp-btn.active {
  background: #2563eb; color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
.ktp-refresh-btn {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; font-size: 12px; font-weight: 700;
  border: 1.5px solid #2563eb; border-radius: 8px;
  background: #eff6ff; color: #2563eb;
  cursor: pointer; font-family: var(--font);
  transition: all .15s; white-space: nowrap;
}
.ktp-refresh-btn:hover { background: #2563eb; color: #fff; }

/* Divider mỏng giữa 2 tầng */
.ktp-filter-divider {
  height: 1px; background: #f1f5f9; margin: 0 -14px;
}

/* Tầng 2: Filter content */
.ktp-filter-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ktp-filter-group-label {
  font-size: 10.5px; font-weight: 700;
  color: #94a3b8; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}
.ktp-filter-sep {
  width: 1px; height: 20px;
  background: #e2e8f0; flex-shrink: 0;
}
.ktp-filter-search-v2 {
  flex: 1; min-width: 160px;
  height: 32px; padding: 0 10px 0 32px;
  border: 1.5px solid #e2e8f0; border-radius: 7px;
  font-size: 12px; font-family: var(--font);
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: all .15s;
}
.ktp-filter-search-v2:focus {
  outline: none; border-color: #2563eb;
  background-color: #fff;
}

/* ─── D. NKSX FORM — VISUAL SECTIONS ────────────────────────────── */

/* Section header với accent bar trái */
.sx-section {
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.sx-section-info {
  background: #f0f7ff;
  border: 1.5px solid #bfdbfe;
  border-left: 4px solid #2563eb;
}
.sx-section-result {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-left: 4px solid #22c55e;
}
.sx-section-nl {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-left: 4px solid #f59e0b;
}
.sx-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.sx-section-hd .sx-section-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #2563eb; color: #fff;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.sx-section-info .sx-section-step  { background: #2563eb; }
.sx-section-nl .sx-section-step    { background: #f59e0b; }
.sx-section-result .sx-section-step { background: #22c55e; }
.sx-section-body {
  padding: 14px 16px;
}

/* Sticky status bar trong form NKSX */
.sx-sticky-status {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -8px -8px 12px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sx-status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: #475569;
}
.sx-status-chip .chip-label {
  color: #94a3b8; font-weight: 500; font-size: 10.5px;
}
.sx-status-chip .chip-val {
  color: #1e293b; font-weight: 700;
}
.sx-status-chip .chip-val.missing {
  color: #f59e0b;
}
.sx-status-chip .chip-val.ok {
  color: #22c55e;
}
.sx-status-sep { color: #e2e8f0; }

/* Step progress dots */
.sx-step-progress {
  display: flex; align-items: center; gap: 0;
  margin-left: auto;
}
.sx-step-dot {
  display: flex; align-items: center;
}
.sx-step-dot-circle {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  background: #e2e8f0; color: #94a3b8;
  transition: all .2s;
}
.sx-step-dot.done .sx-step-dot-circle {
  background: #22c55e; color: #fff;
}
.sx-step-dot.active .sx-step-dot-circle {
  background: #2563eb; color: #fff;
  box-shadow: 0 0 0 3px #bfdbfe;
}
.sx-step-dot-line {
  width: 20px; height: 2px; background: #e2e8f0;
}
.sx-step-dot.done + .sx-step-dot .sx-step-dot-line { display: none; }

/* ─── CUỘN NL SECTION — Redesign ─────────────────────────────────── */
.cuon-treo-card {
  border: 1.5px solid #fde68a !important;
  background: #fffbeb !important;
}
.cuon-treo-card .card-hd {
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-weight: 700;
}

/* Cuộn treo items */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px 14px;
}
.ct-item {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  transition: all .15s;
}
.ct-item:hover {
  border-color: #f59e0b;
  box-shadow: 0 3px 10px rgba(245,158,11,.15);
  transform: translateY(-1px);
}
.ct-item-urgency {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 99px;
}
.ct-item-urgency.urgent { background: #fee2e2; color: #b91c1c; }
.ct-item-urgency.warn   { background: #fef3c7; color: #92400e; }
.ct-item-urgency.ok     { background: #dcfce7; color: #166534; }

.ct-item-stt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 800;
  color: #2563eb;
}
.ct-item-meta {
  font-size: 11px; color: #64748b; line-height: 1.5;
}
.ct-item-kg {
  font-size: 14px; font-weight: 800;
  color: #f59e0b;
}
.ct-item-actions {
  display: flex; gap: 5px; margin-top: 4px;
}
.ct-btn-phanbo {
  flex: 1; padding: 5px 0;
  background: #0d1b2e; color: #fff;
  border: none; border-radius: 7px;
  font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  transition: background .15s;
}
.ct-btn-phanbo:hover { background: #1e3a5f; }
.ct-btn-nhapkho {
  flex: 1; padding: 5px 0;
  background: #ecfdf5; color: #166534;
  border: 1px solid #86efac; border-radius: 7px;
  font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  transition: all .15s;
}
.ct-btn-nhapkho:hover { background: #dcfce7; }

/* ─── KHO NL — TK TABLE nâng cấp ───────────────────────────────── */
.tk-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.tk-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #f8fafc; color: #475569;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 10px 12px; border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.tk-table thead th.sortable { cursor: pointer; }
.tk-table thead th.sortable:hover { color: #2563eb; background: #eff6ff; }
.tk-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.tk-table tbody tr:nth-child(even) td { background: #fafbfc; }
.tk-table tbody tr:hover td { background: #eff6ff !important; cursor: pointer; }

/* Badge loại vật tư */
.vt-badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 6px; font-size: 10.5px; font-weight: 600;
}
.vt-badge-cotton  { background: #fef3c7; color: #92400e; }
.vt-badge-viscose { background: #ede9fe; color: #5b21b6; }
.vt-badge-other   { background: #f1f5f9; color: #475569; }

/* Cuộn counter split */
.cuon-split {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px;
}
.cuon-split-ton  { color: #22c55e; font-weight: 700; }
.cuon-split-sep  { color: #e2e8f0; }
.cuon-split-dor  { color: #f59e0b; font-weight: 600; }

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ktp-stats-v2 { grid-template-columns: 1fr; }
  .ktp-filter-row1, .ktp-filter-row2 { flex-direction: column; align-items: flex-start; }
  .ktp-refresh-btn { margin-left: 0; }
  .ct-grid { grid-template-columns: 1fr 1fr; }
  .sx-sticky-status { flex-direction: column; align-items: flex-start; }
  .sx-step-progress { margin-left: 0; }
}

/* ── OEM Grab-style Pipeline Tracker ── */
.oem-grab-tracker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
}
.oem-grab-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.oem-grab-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.oem-grab-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.oem-grab-info-enhanced {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.oem-grab-info-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.oem-grab-info-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.oem-grab-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.oem-grab-badge-warn { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.oem-grab-badge-wait { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.oem-grab-badge-ok   { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.oem-grab-customer {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.oem-grab-product {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.oem-grab-stage-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: #eff6ff;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  align-self: flex-start;
}
.oem-grab-stepper-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oem-grab-stepper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 650px;
  position: relative;
  margin-bottom: 20px;
  margin-top: 10px;
}
.oem-grab-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  background: #e2e8f0;
  transform: translateY(-50%);
  border-radius: 3px;
  z-index: 1;
}
.oem-grab-line-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 6px;
  background: #16a34a;
  transform: translateY(-50%);
  border-radius: 3px;
  z-index: 2;
  transition: width 0.4s ease;
}
.oem-grab-milestone {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.oem-grab-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 3px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  transition: all 0.3s ease;
}
.oem-grab-icon.done {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.oem-grab-icon.active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
  transform: scale(1.3);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  animation: grab-pulse-orange 2s infinite;
}
.oem-grab-label {
  position: absolute;
  top: 40px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  text-align: center;
}
.oem-grab-status-msg {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.oem-grab-badge-section {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.oem-grab-badge-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 4px solid #dcfce7;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.oem-grab-actions {
  display: flex;
  gap: 8px;
}
.oem-grab-btn {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: all 0.2s;
}
.oem-grab-btn-primary {
  background: var(--accent);
  color: white;
}
.oem-grab-btn-primary:hover {
  background: var(--accent-hover);
}
.oem-grab-btn-secondary {
  background: #f1f5f9;
  color: var(--text);
  border: 1px solid #cbd5e1;
}
.oem-grab-btn-secondary:hover {
  background: #e2e8f0;
}
@keyframes grab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@keyframes grab-pulse-orange {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@media (max-width: 900px) {
  .oem-grab-info-enhanced { flex-direction: column; align-items: flex-start; gap: 16px; }
  .oem-grab-info-right { flex-wrap: wrap; }
  .oem-grab-label { font-size: 9px; }
}