/* ============ BICA Inventory Module — đồng bộ design tokens ============ */
/* Chỉ định nghĩa các phần ĐẶC THÙ; phần chung dùng class dashboard.css */

[data-view="inventory"] { padding: 22px 26px 60px; }
@media (max-width: 900px) { [data-view="inventory"] { padding: 14px; } }

/* Skeleton loader */
.inv-loading, .inv-error {
  padding: 60px 20px; text-align: center; color: var(--text-3); font-size: 14px;
}
.inv-error { color: var(--danger); }
.inv-error i, .inv-loading i { font-size: 20px; margin-right: 8px; color: var(--primary); }
.inv-empty {
  padding: 36px; text-align: center; color: var(--text-3);
  background: var(--bg-alt); border-radius: var(--r-lg); margin: 16px 0;
  border: 1px dashed var(--border);
}

/* Header strip ngay dưới page-head */
.inv-meta-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.inv-meta-strip .inv-meta-info { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.inv-meta-strip .inv-meta-info strong { color: var(--text-2); }
.inv-role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.inv-role-badge.admin { background: linear-gradient(135deg, var(--accent-soft), rgba(234, 124, 63, .2)); color: var(--accent-strong); }
.inv-role-badge.basic { background: var(--bg-soft); color: var(--text-3); }

/* Breadcrumb drill (inventory-scoped, khác breadcrumb route) */
.inv-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 18px; font-size: 13px;
  box-shadow: var(--shadow-xs);
}
.inv-bc-link {
  color: var(--primary); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.inv-bc-link:hover { text-decoration: underline; }
.inv-bc-sep { color: var(--text-5); font-size: 10px; }
.inv-bc-cur { color: var(--text); font-weight: 700; }
.inv-bc-meta { color: var(--text-3); font-weight: 400; }
.inv-bc-hint { margin-left: auto; color: var(--text-4); font-size: 11.5px; font-style: italic; }
.inv-bc-hint i { margin-right: 4px; }

/* ===== FILTER BAR ===== */
.inv-filter-bar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 16px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 18px; box-shadow: var(--shadow-xs);
}
.inv-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.inv-filter-group label {
  font-size: 10px; color: var(--text-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.inv-filter-group select, .inv-filter-group input {
  padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: 13px; background: var(--bg); font-family: inherit; color: var(--text);
}
.inv-filter-group select:focus, .inv-filter-group input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.inv-filter-search { flex: 1; min-width: 200px; }
.inv-filter-search input { width: 100%; }
.inv-btn-reset {
  padding: 8px 14px; background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
  transition: var(--transition);
}
.inv-btn-reset:hover { background: var(--bg-soft); border-color: var(--text-4); }

/* ===== KPI Grid lớn (overview) — dùng .mkt-kpi-grid-compact nhưng có data-tier riêng ===== */
.mkt-kpi-card[data-tier="inv-grand"]   { --accent: var(--text); --accent-soft: var(--bg-soft); }
.mkt-kpi-card[data-tier="inv-stock"]   { --accent: var(--blue-600); --accent-soft: var(--blue-50); }
.mkt-kpi-card[data-tier="inv-value"]   { --accent: var(--accent); --accent-soft: var(--accent-soft); }
.mkt-kpi-card[data-tier="inv-warn"]    { --accent: var(--warning); --accent-soft: var(--warning-soft); }
.mkt-kpi-card[data-tier="inv-danger"]  { --accent: var(--danger); --accent-soft: var(--danger-soft); }

/* ===== MARKET DRILL CARDS — extend .market-card ===== */
.market-card.inv-market-card {
  cursor: pointer; padding: 18px 20px 16px;
}
.market-card.inv-market-card .market-head { margin-bottom: 12px; }
.market-card.inv-market-card .inv-market-value {
  font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.market-card.inv-market-card .inv-market-sub {
  font-size: 11px; color: var(--text-3); margin-bottom: 12px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.market-card.inv-market-card .inv-market-sub span { display: inline-flex; align-items: center; gap: 4px; }

/* Industry stack bar */
.inv-ind-bar {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--bg-soft); margin: 4px 0 10px;
}
.inv-ind-bar-seg { height: 100%; transition: opacity .15s; }
.inv-ind-bar-seg:hover { opacity: .75; }
.inv-ind-bar-seg[data-ind="SACH"]      { background: var(--blue-600); }
.inv-ind-bar-seg[data-ind="THOITRANG"] { background: #ec4899; }
.inv-ind-bar-seg[data-ind="DOLOT"]     { background: var(--accent); }
.inv-ind-bar-seg[data-ind="GIADUNG"]   { background: var(--success); }
.inv-ind-bar-seg[data-ind="TREND"]     { background: #f97316; }
.inv-ind-bar-seg[data-ind="KHAC"]      { background: var(--text-4); }

.inv-ind-legend { display: flex; flex-wrap: wrap; gap: 5px; }
.inv-ind-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 600;
  background: var(--bg-soft); color: var(--text-3);
  border: 1px solid transparent;
}
.inv-ind-chip[data-ind="SACH"]      { background: var(--blue-50);     color: var(--blue-800); }
.inv-ind-chip[data-ind="THOITRANG"] { background: #fce7f3;            color: #9d174d; }
.inv-ind-chip[data-ind="DOLOT"]     { background: var(--accent-soft); color: var(--accent-strong); }
.inv-ind-chip[data-ind="GIADUNG"]   { background: var(--success-soft); color: var(--success-strong); }
.inv-ind-chip[data-ind="TREND"]     { background: var(--warning-soft); color: var(--warning-strong); }

.inv-drill-arrow {
  position: absolute; top: 14px; right: 14px;
  color: var(--text-5); transition: var(--transition); font-size: 12px;
}
.market-card.inv-market-card:hover .inv-drill-arrow { color: var(--primary); transform: translateX(2px); }

/* Card đầu tiên: tổng toàn cty */
.market-card.inv-grand-card {
  background: linear-gradient(135deg, #0d2347, #1a3461);
  border-color: #0d2347; color: #fff;
}
.market-card.inv-grand-card::before { background: var(--accent); }
.market-card.inv-grand-card .market-head strong,
.market-card.inv-grand-card .inv-market-value { color: #fff; }
.market-card.inv-grand-card .inv-market-sub,
.market-card.inv-grand-card .market-head small { color: rgba(255, 255, 255, .7); }
.market-card.inv-grand-card .inv-ind-bar { background: rgba(255, 255, 255, .15); }
.market-card.inv-grand-card .market-flag { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.market-card.inv-grand-card .inv-ind-chip {
  background: rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(4px);
}

/* Market view — KPI per industry */
.inv-ind-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.inv-ind-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 16px; box-shadow: var(--shadow-xs); display: flex; gap: 11px;
  align-items: center; position: relative; overflow: hidden;
}
.inv-ind-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ind-color, var(--primary));
}
.inv-ind-card[data-ind="SACH"]      { --ind-color: var(--blue-600); }
.inv-ind-card[data-ind="THOITRANG"] { --ind-color: #ec4899; }
.inv-ind-card[data-ind="DOLOT"]     { --ind-color: var(--accent); }
.inv-ind-card[data-ind="GIADUNG"]   { --ind-color: var(--success); }
.inv-ind-card[data-ind="TREND"]     { --ind-color: #f97316; }

/* ============================================================
   Cơ cấu tồn kho — horizontal share bars (theo dự án + danh mục)
   ============================================================ */
.inv-share-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 8px;
}
@media (max-width: 900px) { .inv-share-grid { grid-template-columns: 1fr; } }

.inv-share-card { padding: 14px 16px 12px; }
.inv-share-card .inv-share-empty {
  text-align: center; padding: 28px 0; color: var(--text-3); font-size: 13px;
}
.inv-share-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.inv-share-head h3 {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.inv-share-head h3 i { color: var(--primary); font-size: 12px; }
.inv-share-total { font-size: 11.5px; color: var(--text-3); }
.inv-share-total b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

.inv-share-bars { display: flex; flex-direction: column; gap: 9px; }
.inv-share-row {
  display: grid; grid-template-columns: 38% 62%;
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px;
  transition: background .12s;
}
.inv-share-row.clickable { cursor: pointer; }
.inv-share-row.clickable:hover { background: var(--bg-soft, #f8fafc); }
.inv-share-row.clickable:hover .inv-share-name { color: var(--primary); }

.inv-share-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; min-width: 0;
}
.inv-share-label > i { color: var(--row-color, var(--text-3)); font-size: 11px; flex-shrink: 0; }
.inv-share-name {
  font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
  transition: color .12s;
}
.inv-share-hint {
  font-size: 10.5px; color: var(--text-3);
  white-space: nowrap; flex-shrink: 0;
}

.inv-share-track {
  position: relative; height: 24px;
  background: var(--bg-soft, #f1f5f9);
  border-radius: 12px;
  overflow: hidden;
}
.inv-share-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--row-color, var(--primary)) 0%, color-mix(in srgb, var(--row-color, var(--primary)) 70%, white) 100%);
  border-radius: 12px;
  transition: width .35s cubic-bezier(.2,.7,.4,1);
}
.inv-share-fill.rest {
  background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 5px, #e2e8f0 5px, #e2e8f0 10px);
}
.inv-share-vals {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px rgba(255,255,255,.9);
  pointer-events: none;
}
.inv-share-vals b { font-weight: 800; font-size: 12px; }
.inv-share-vals span { font-size: 10.5px; color: var(--text-3); }

.inv-share-row-rest .inv-share-name { color: var(--text-3); font-style: italic; font-weight: 500; }

/* Industry color tokens for share bars */
.inv-share-row[data-ind="SACH"]      { --row-color: var(--blue-600, #2563eb); }
.inv-share-row[data-ind="THOITRANG"] { --row-color: #ec4899; }
.inv-share-row[data-ind="DOLOT"]     { --row-color: var(--accent, #ea7c3f); }
.inv-share-row[data-ind="GIADUNG"]   { --row-color: var(--success, #16a34a); }
.inv-share-row[data-ind="TREND"]     { --row-color: #f97316; }
.inv-share-row[data-ind="KHAC"]      { --row-color: #64748b; }
.inv-share-fill[data-ind="SACH"]      { background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%); }
.inv-share-fill[data-ind="THOITRANG"] { background: linear-gradient(90deg, #ec4899 0%, #f9a8d4 100%); }
.inv-share-fill[data-ind="DOLOT"]     { background: linear-gradient(90deg, #ea7c3f 0%, #fdba74 100%); }
.inv-share-fill[data-ind="GIADUNG"]   { background: linear-gradient(90deg, #16a34a 0%, #86efac 100%); }
.inv-share-fill[data-ind="TREND"]     { background: linear-gradient(90deg, #f97316 0%, #fdba74 100%); }
.inv-share-fill[data-ind="KHAC"]      { background: linear-gradient(90deg, #64748b 0%, #cbd5e1 100%); }
.inv-ind-card-icon {
  width: 36px; height: 36px; border-radius: var(--r);
  background: var(--bg-soft); color: var(--ind-color, var(--primary));
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.inv-ind-card-val { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.inv-ind-card-lbl { font-size: 10.5px; color: var(--text-3); margin-top: 2px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.inv-ind-card-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; font-weight: 500; }

/* Row click (project list trong market view) */
.inv-rank-table tr.inv-row-click { cursor: pointer; transition: var(--transition); }
.inv-rank-table tr.inv-row-click:hover { background: var(--primary-soft) !important; }
.inv-rank-table tr.inv-row-total td {
  background: var(--bg-alt); border-top: 2px solid var(--border-strong);
  font-weight: 700; color: var(--text);
}
.inv-rank-table tr.inv-row-total td:first-child { color: var(--text-2); }

/* SKU code + project tag chuẩn dashboard */
code.inv-sku {
  background: var(--primary-soft); color: var(--primary);
  padding: 2px 7px; border-radius: 4px; font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px;
}
.inv-project-tag {
  display: inline-block; padding: 2px 8px; background: var(--text);
  color: #fff; border-radius: 4px; font-size: 11px; font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .03em;
}
.inv-cat-chip {
  display: inline-block; padding: 2px 8px; background: var(--bg-soft);
  color: var(--text-2); border-radius: 999px; font-size: 11px; margin: 1px 2px 1px 0;
  border: 1px solid var(--border);
}
.inv-chip-market {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; background: var(--success-soft); color: var(--success-strong);
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.inv-name { max-width: 320px; color: var(--text-2); }
.inv-parent { color: var(--text-4); font-size: 10.5px; }
.inv-cost { color: var(--accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; }

.tone-good   { color: var(--success-strong); font-weight: 700; }
.tone-warn   { color: var(--warning-strong); font-weight: 700; }
.tone-danger { color: var(--danger-strong); font-weight: 700; }

/* Hint banner */
.inv-hint {
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--accent-strong);
}
.inv-hint i { margin-right: 6px; }

/* KPI strip nhỏ (project drill) */
.inv-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }

/* Pager */
.inv-pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding: 12px 14px; font-size: 13px; color: var(--text-3);
  background: var(--bg-alt); border-radius: var(--r); border: 1px solid var(--border);
}
.inv-btn-page {
  padding: 7px 14px; background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px; transition: var(--transition);
}
.inv-btn-page:disabled { opacity: .4; cursor: not-allowed; }
.inv-btn-page:not(:disabled):hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* Section meta footer */
.inv-section-meta {
  padding: 10px 14px; background: var(--bg-alt); border-radius: var(--r);
  color: var(--text-3); font-size: 12px;
}
.inv-section-meta i { color: var(--primary); margin-right: 6px; }

/* ===== Table sort indicator ===== */
.mkt-rank-table th.sortable-th {
  cursor: pointer; user-select: none; position: relative;
}
.mkt-rank-table th.sortable-th:hover { background: var(--primary-soft); color: var(--primary); }
.mkt-rank-table th.sortable-th .sort-i { opacity: .35; margin-left: 4px; font-size: 9px; }
.mkt-rank-table th.sortable-th.active .sort-i { opacity: 1; color: var(--primary); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .inv-filter-bar { padding: 10px; gap: 8px; }
  .inv-filter-group { min-width: 110px; flex: 1; }
  .market-card.inv-market-card .inv-market-value { font-size: 18px; }
}
@media (max-width: 480px) {
  .market-card.inv-market-card { padding: 14px 16px; }
}

/* ═══ Tab "Cây danh mục chuẩn" (2026-07-13) ═══ */
.inv-tree-table tbody tr { transition: background .12s ease; }
.inv-tree-table tbody tr[data-tree-toggle]:hover { background: var(--primary-soft); }
.inv-tree-row-l1 { background: linear-gradient(90deg, rgba(99,102,241,.10), rgba(99,102,241,0) 60%); border-top: 2px solid var(--border); }
.inv-tree-row-l1 td { font-size: 14px; }
.inv-tree-row-l2 { background: rgba(99,102,241,.04); }
.inv-tree-row-l3 td { color: var(--text-2); font-size: 12.5px; }
.inv-tree-row-unclass {
  background: linear-gradient(90deg, rgba(220,38,38,.10), rgba(220,38,38,0) 60%);
  border-top: 2px dashed rgba(220,38,38,.4);
}
.inv-tree-chip {
  display: inline-block; padding: 2px 7px; margin-right: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; font-weight: 700; border-radius: 4px;
  background: rgba(99,102,241,.12); color: #4f46e5;
}
.inv-tree-chip-l1 { background: #6366f1; color: #fff; }
.inv-tree-chip-l2 { background: rgba(99,102,241,.20); color: #4338ca; }
.inv-tree-chip-l3 { background: rgba(99,102,241,.08); color: #6366f1; }

/* Cấp 4 = mã SP master (2026-07-17) — indent sâu, style nhạt hơn L3 */
.inv-tree-row-l4 td { color: var(--text-3); font-size: 12px; background: rgba(148,163,184,.03); }
.inv-tree-chip-l4 { background: rgba(148,163,184,.15); color: #64748b; font-weight: 600; }

/* ═══ Tab "Kho SP" (2026-07-17) — view chính NV/Leader/PL ═══ */
.kho-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.kho-kpi { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.kho-kpi .lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.kho-kpi .val { font-size: 20px; font-weight: 700; margin-top: 4px; color: var(--text-1); }
.kho-kpi .val small { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 2px; }
.kho-kpi .sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.kho-kpi-cost { background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05)); border-color: rgba(99,102,241,.2); }
.kho-kpi-cost .val { color: #6366f1; }
.kho-kpi-alert.kho-kpi-danger { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.25); }
.kho-kpi-alert.kho-kpi-danger .val { color: #dc2626; }
.kho-kpi-alert.kho-kpi-warn { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.25); }
.kho-kpi-alert.kho-kpi-warn .val { color: #d97706; }
.kho-kpi-alert.kho-kpi-good { background: rgba(5,150,105,.06); border-color: rgba(5,150,105,.25); }
.kho-kpi-alert.kho-kpi-good .val { color: #059669; }
.kho-kpi-alert.kho-kpi-stale { background: rgba(234,88,12,.06); border-color: rgba(234,88,12,.25); }
.kho-kpi-alert.kho-kpi-stale .val { color: #ea580c; }

.kho-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kho-pill { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kho-pill:hover { border-color: #6366f1; }
.kho-pill.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.kho-pill-badge { padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 10.5px; font-weight: 700; }
.kho-pill.active .kho-pill-badge { background: rgba(255,255,255,.25); color: #fff; }

.kho-sp-cell { padding: 10px 12px !important; }
.kho-sp-code code { background: rgba(99,102,241,.10); color: #4f46e5; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 700; }
.kho-sp-name { font-weight: 600; font-size: 13px; color: var(--text-1); margin-top: 3px; }
.kho-sp-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kho-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.kho-cat-chip { background: rgba(148,163,184,.15); color: #64748b; padding: 1px 5px; border-radius: 3px; font-size: 10px; }
.kho-noclass { color: #dc2626; font-size: 10.5px; }
.kho-sub { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.kho-risk-badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.kho-days-danger { color: #dc2626; font-weight: 700; }
.kho-days-stale { color: #ea580c; font-weight: 700; }
.kho-truncated { padding: 12px; text-align: center; color: var(--text-3); font-size: 12px; background: var(--bg-soft); }

/* ═══ Kho SP v2 (2026-07-17) — view NV cực đơn giản ═══ */
.khoV2-wrap { max-width: 1200px; margin: 0 auto; padding: 8px 0; }

/* KPI 4 cards */
.khoV2-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.khoV2-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; }
.khoV2-kpi-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(99,102,241,.10); color: #6366f1; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.khoV2-kpi-lbl { font-size: 11.5px; color: var(--text-3, #64748b); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.khoV2-kpi-val { font-size: 22px; font-weight: 800; color: var(--text-1, #0f172a); margin-top: 2px; line-height: 1; }
.khoV2-kpi-sub { font-size: 11px; color: var(--text-3, #94a3b8); margin-top: 4px; }
.khoV2-kpi.khoV2-good .khoV2-kpi-icon { background: rgba(5,150,105,.10); color: #059669; }
.khoV2-kpi.khoV2-good .khoV2-kpi-val { color: #059669; }
.khoV2-kpi.khoV2-bad .khoV2-kpi-icon { background: rgba(220,38,38,.10); color: #dc2626; }
.khoV2-kpi.khoV2-bad .khoV2-kpi-val { color: #dc2626; }
.khoV2-kpi.khoV2-warn .khoV2-kpi-icon { background: rgba(234,88,12,.10); color: #ea580c; }
.khoV2-kpi.khoV2-warn .khoV2-kpi-val { color: #ea580c; }

/* Charts 2 columns */
.khoV2-charts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .khoV2-charts { grid-template-columns: 1fr; } }
.khoV2-chart-card { padding: 16px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; }
.khoV2-chart-title { font-size: 13px; font-weight: 700; color: var(--text-1, #0f172a); margin-bottom: 14px; }
.khoV2-donut-wrap { position: relative; height: 220px; margin-bottom: 12px; }
.khoV2-bar-wrap { position: relative; height: 280px; }
.khoV2-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #f1f5f9); }
.khoV2-leg-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.khoV2-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.khoV2-leg-lbl { flex: 1; color: var(--text-2, #334155); font-weight: 500; }
.khoV2-leg-val { color: var(--text-3, #64748b); font-weight: 600; font-size: 11.5px; }

/* Tabs */
.khoV2-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--border, #e5e7eb); }
.khoV2-tab { padding: 10px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--text-3, #64748b); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; }
.khoV2-tab i { font-size: 12px; }
.khoV2-tab span { background: rgba(0,0,0,.06); padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.khoV2-tab.active { color: #6366f1; border-bottom-color: #6366f1; }
.khoV2-tab.active span { background: rgba(99,102,241,.15); color: #6366f1; }
.khoV2-tab:hover { color: var(--text-1, #0f172a); }

/* SP list — card row */
.khoV2-list { display: flex; flex-direction: column; gap: 8px; }
.khoV2-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 16px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; align-items: center; transition: border-color .15s; }
.khoV2-card:hover { border-color: #c7d2fe; }
.khoV2-card-left { border-left: 3px solid #94a3b8; padding-left: 12px; min-width: 0; }
.khoV2-card-code { font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 700; color: #4f46e5; letter-spacing: .3px; }
.khoV2-card-name { font-size: 13.5px; font-weight: 600; color: var(--text-1, #0f172a); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.khoV2-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; }
.khoV2-cat { background: rgba(99,102,241,.10); color: #4f46e5; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; }
.khoV2-cat-none { background: rgba(220,38,38,.08); color: #dc2626; }
.khoV2-project { color: var(--text-3, #94a3b8); font-weight: 600; }

/* Stats mini */
.khoV2-card-stats { display: flex; gap: 20px; align-items: center; }
.khoV2-stat { text-align: center; min-width: 52px; }
.khoV2-stat-val { font-size: 15px; font-weight: 800; color: var(--text-1, #0f172a); line-height: 1; }
.khoV2-stat-lbl { font-size: 10.5px; color: var(--text-3, #94a3b8); margin-top: 3px; text-transform: uppercase; letter-spacing: .3px; }
.khoV2-cost { color: #6366f1 !important; font-size: 13px !important; }
.khoV2-days-hot { color: #dc2626; }
.khoV2-days-stale { color: #ea580c; }
.khoV2-risk { display: inline-block; padding: 3px 10px; border: 1.5px solid; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }

@media (max-width: 640px) {
  .khoV2-card { grid-template-columns: 1fr; gap: 10px; }
  .khoV2-card-stats { gap: 12px; justify-content: space-between; }
  .khoV2-stat { min-width: auto; }
}

/* ═══ Kho SP v3 Tầng 1 (NV) — action-first (2026-07-18) ═══ */
.khoV2-wrap { max-width: 1240px; margin: 0 auto; padding: 6px 0; }

/* 4 HERO BOXES */
.khoV2-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.khoV2-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-card, #fff); border: 1.5px solid var(--border, #e5e7eb); border-radius: 12px; cursor: pointer; text-align: left; transition: all .15s; font-family: inherit; }
.khoV2-hero:hover { border-color: var(--hero-color); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.khoV2-hero.khoV2-hero-active { border-color: var(--hero-color); background: var(--hero-bg); }
.khoV2-hero-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--hero-bg); color: var(--hero-color); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.khoV2-hero-body { flex: 1; min-width: 0; }
.khoV2-hero-num { font-size: 26px; font-weight: 800; color: var(--hero-color); line-height: 1; }
.khoV2-hero-lbl { font-size: 13.5px; font-weight: 700; color: var(--text-1, #0f172a); margin-top: 4px; }
.khoV2-hero-hint { font-size: 11px; color: var(--text-3, #94a3b8); margin-top: 3px; font-weight: 500; }

/* 2-column: donut trái, list phải */
.khoV2-topRow { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
@media (max-width: 900px) { .khoV2-topRow { grid-template-columns: 1fr; } }

.khoV2-donut-card { padding: 16px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; align-self: start; position: sticky; top: 12px; }
.khoV2-donut-card .khoV2-chart-title { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 12px; }
.khoV2-donut-card .khoV2-donut-wrap { position: relative; height: 200px; margin-bottom: 8px; }
.khoV2-donut-card .khoV2-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11.5px; }

/* List head */
.khoV2-list-wrap { min-width: 0; }
.khoV2-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 4px 4px 4px 0; }
.khoV2-list-title { font-size: 13.5px; font-weight: 700; color: var(--text-1, #0f172a); }
.khoV2-list-reset { padding: 4px 10px; background: transparent; border: 1px solid var(--border); border-radius: 999px; font-size: 11.5px; color: var(--text-3); cursor: pointer; font-family: inherit; }
.khoV2-list-reset:hover { border-color: #dc2626; color: #dc2626; }
.khoV2-hidden { display: none !important; }
.khoV2-list-more { padding: 12px; text-align: center; color: var(--text-3); font-size: 12px; }

/* Card SP mới */
.khoV2-list { display: flex; flex-direction: column; gap: 8px; }
.khoV2-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px 14px; transition: border-color .12s; }
.khoV2-card:hover { border-color: #c7d2fe; }
.khoV2-card-stop { border-left: 3px solid #dc2626; }
.khoV2-card-push { border-left: 3px solid #059669; }
.khoV2-card-keep { border-left: 3px solid #1877f2; }
.khoV2-card-idle { border-left: 3px solid #94a3b8; }
.khoV2-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.khoV2-card-code { background: rgba(24,119,242,.10); color: #155fc8; padding: 2px 8px; border-radius: 5px; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.khoV2-card-action { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.khoV2-card-name { font-size: 13.5px; font-weight: 600; color: var(--text-1, #0f172a); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khoV2-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 12px; align-items: center; padding-bottom: 8px; }
.khoV2-mini { text-align: center; }
.khoV2-mini-lbl { font-size: 10.5px; color: var(--text-3, #94a3b8); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; margin-bottom: 3px; }
.khoV2-mini-val { font-size: 15px; font-weight: 700; color: var(--text-1, #0f172a); line-height: 1; }
.khoV2-mini-val small { font-size: 11px; font-weight: 500; color: var(--text-3); }
.khoV2-mini-cost .khoV2-mini-val { color: #1877f2; font-size: 12.5px; }
.khoV2-days-hot { color: #dc2626; }
.khoV2-days-stale { color: #ea580c; }
.khoV2-mini-spark { display: flex; justify-content: center; padding-top: 12px; }
.khoV2-spark { display: block; }
.khoV2-spark-empty { color: var(--text-3); font-size: 11px; }

.khoV2-card-foot { display: flex; align-items: center; gap: 8px; font-size: 11px; padding-top: 8px; border-top: 1px dashed var(--border, #f1f5f9); }
.khoV2-cat { background: rgba(24,119,242,.10); color: #155fc8; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; }
.khoV2-cat-none { background: rgba(220,38,38,.08); color: #dc2626; }
.khoV2-project { color: var(--text-3, #94a3b8); font-weight: 600; font-size: 11px; }

/* ═══ Kho SP v3 Tầng 2 (Leader+) — heatmap NV×SP + SP tồn đọng ═══ */
.khoV2-tier2 { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.khoV2-tier2-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 16px 18px; }
.khoV2-tier2-title { font-size: 14px; font-weight: 700; color: var(--text-1, #0f172a); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.khoV2-tier2-title i { color: #1877f2; }
.khoV2-tier2-title small { color: var(--text-3); font-weight: 500; font-size: 12px; }

/* Heatmap */
.khoV2-heatmap-wrap { overflow-x: auto; }
.khoV2-heatmap { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.khoV2-heatmap th { padding: 8px 6px; background: rgba(148,163,184,.06); font-weight: 700; color: var(--text-2); text-align: center; border-radius: 4px; }
.khoV2-heatmap th.khoV2-hm-sp { min-width: 48px; font-family: ui-monospace, monospace; font-size: 11px; color: #155fc8; }
.khoV2-heatmap th.khoV2-hm-emp, .khoV2-heatmap th.khoV2-hm-total { min-width: 110px; text-align: left; padding-left: 10px; }
.khoV2-heatmap td { padding: 6px 4px; text-align: center; border-radius: 4px; font-weight: 600; }
.khoV2-hm-emp { text-align: left !important; padding: 6px 10px !important; background: rgba(148,163,184,.03); min-width: 130px; }
.khoV2-hm-emp-code { font-size: 10.5px; color: var(--text-3); font-family: ui-monospace, monospace; }
.khoV2-hm-emp-name { font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.khoV2-hm-total { background: rgba(24,119,242,.06) !important; color: #155fc8; text-align: right !important; padding-right: 12px !important; font-size: 13px !important; }
.khoV2-hm-cell { transition: transform .1s; cursor: default; }
.khoV2-hm-cell:hover { transform: scale(1.15); }

/* SP tồn đọng */
.khoV2-stale-list { display: flex; flex-direction: column; gap: 6px; }
.khoV2-stale-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: rgba(234,88,12,.04); border: 1px solid rgba(234,88,12,.15); border-radius: 8px; font-size: 12.5px; }
.khoV2-stale-name { flex: 1; font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khoV2-stale-remain { color: #ea580c; font-weight: 600; font-size: 12px; }
.khoV2-stale-remain strong { color: #dc2626; }
.khoV2-stale-cost { color: #1877f2; font-weight: 700; font-size: 12px; }

/* ═══ Kho SP v3 Tầng 3 (PL) — ABC + Vốn chôn + GMROI ═══ */
.khoV2-tier3 { margin-top: 24px; padding-top: 20px; border-top: 2px dashed var(--border, #e5e7eb); }
.khoV2-tier3-title { font-size: 15px; font-weight: 700; color: var(--text-1, #0f172a); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.khoV2-tier3-title i { color: #1877f2; }
.khoV2-tier3-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 16px 18px; }
.khoV2-tier3-subtitle { font-size: 13px; font-weight: 700; color: var(--text-1, #0f172a); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.khoV2-tier3-subtitle i { color: #6366f1; font-size: 12px; }
.khoV2-tier3-subtitle small { color: var(--text-3); font-weight: 500; font-size: 11.5px; margin-left: 4px; }
.khoV2-tier3-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .khoV2-tier3-2col { grid-template-columns: 1fr; } }

/* 4 KPI tài chính */
.khoV2-fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.khoV2-fin-kpi { padding: 12px 14px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; }
.khoV2-fin-lbl { font-size: 11px; color: var(--text-3, #94a3b8); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.khoV2-fin-val { font-size: 20px; font-weight: 800; color: var(--text-1, #0f172a); margin-top: 4px; }
.khoV2-fin-sub { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.khoV2-fin-primary { background: linear-gradient(135deg, rgba(24,119,242,.08), rgba(21,95,200,.03)); border-color: rgba(24,119,242,.25); }
.khoV2-fin-primary .khoV2-fin-val { color: #155fc8; }
.khoV2-fin-good .khoV2-fin-val { color: #059669; }
.khoV2-fin-warn .khoV2-fin-val { color: #ea580c; }
.khoV2-fin-bad .khoV2-fin-val { color: #dc2626; }

/* ABC bars */
.khoV2-abc-list { display: flex; flex-direction: column; gap: 12px; }
.khoV2-abc-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); }
.khoV2-abc-a { background: rgba(5,150,105,.05); border-color: rgba(5,150,105,.25); }
.khoV2-abc-b { background: rgba(24,119,242,.05); border-color: rgba(24,119,242,.25); }
.khoV2-abc-c { background: rgba(148,163,184,.05); border-color: rgba(148,163,184,.25); }
.khoV2-abc-letter { font-size: 28px; font-weight: 800; text-align: center; }
.khoV2-abc-a .khoV2-abc-letter { color: #059669; }
.khoV2-abc-b .khoV2-abc-letter { color: #155fc8; }
.khoV2-abc-c .khoV2-abc-letter { color: #64748b; }
.khoV2-abc-label { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.khoV2-abc-label small { color: var(--text-3); font-weight: 500; font-size: 11.5px; }
.khoV2-abc-bars { display: flex; flex-direction: column; gap: 4px; }
.khoV2-abc-bar-row { display: grid; grid-template-columns: 90px 1fr 40px; gap: 8px; align-items: center; font-size: 11px; color: var(--text-3); }
.khoV2-abc-bar-track { height: 8px; background: rgba(148,163,184,.15); border-radius: 999px; overflow: hidden; }
.khoV2-abc-bar-fill { height: 100%; background: #1877f2; border-radius: 999px; transition: width .3s; }
.khoV2-abc-bar-cap { background: #f59e0b; }
.khoV2-abc-pct { text-align: right; font-weight: 700; color: var(--text-2); font-family: ui-monospace, monospace; }
.khoV2-abc-num { font-size: 13px; font-weight: 800; color: var(--text-1); text-align: right; }
.khoV2-abc-num small { display: block; color: var(--text-3); font-weight: 500; font-size: 10.5px; text-transform: uppercase; margin-top: 2px; }

/* Vốn chôn list */
.khoV2-buried-list { display: flex; flex-direction: column; gap: 5px; }
.khoV2-buried-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(220,38,38,.03); border: 1px solid rgba(220,38,38,.15); border-radius: 8px; font-size: 12px; }
.khoV2-buried-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.khoV2-buried-name { color: var(--text-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khoV2-buried-vals { display: flex; gap: 12px; flex-shrink: 0; font-size: 11.5px; }
.khoV2-buried-cap { color: #dc2626; font-weight: 700; }
.khoV2-buried-rev { color: var(--text-3); }
.khoV2-buried-rev b { color: #dc2626; }
.khoV2-buried-cap small, .khoV2-buried-rev small { color: var(--text-3); font-weight: 500; font-size: 10px; margin-right: 3px; }

/* GMROI list */
.khoV2-gmroi-list { display: flex; flex-direction: column; gap: 6px; }
.khoV2-gmroi-row { display: grid; grid-template-columns: 1fr 100px 60px; gap: 10px; align-items: center; padding: 6px 8px; font-size: 12px; }
.khoV2-gmroi-lbl { font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.khoV2-gmroi-lbl code { margin-right: 6px; }
.khoV2-gmroi-track { height: 10px; background: rgba(148,163,184,.15); border-radius: 999px; overflow: hidden; }
.khoV2-gmroi-fill { height: 100%; border-radius: 999px; }
.khoV2-gmroi-good .khoV2-gmroi-fill { background: #059669; }
.khoV2-gmroi-warn .khoV2-gmroi-fill { background: #f59e0b; }
.khoV2-gmroi-bad .khoV2-gmroi-fill { background: #dc2626; }
.khoV2-gmroi-val { text-align: right; font-weight: 700; font-size: 13px; }
.khoV2-gmroi-val small { font-size: 10px; font-weight: 500; color: var(--text-3); }
.khoV2-gmroi-good .khoV2-gmroi-val { color: #059669; }
.khoV2-gmroi-warn .khoV2-gmroi-val { color: #ea580c; }
.khoV2-gmroi-bad .khoV2-gmroi-val { color: #dc2626; }

/* ═══ Tab BOD (Board of Directors) — bird's-eye toàn cty ═══ */
.bod-wrap { max-width: 1400px; margin: 0 auto; padding: 8px 0; }

/* HERO: 4 KPI lớn */
.bod-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.bod-hero-kpi { padding: 18px 20px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; }
.bod-hero-lbl { font-size: 12px; color: var(--text-3, #94a3b8); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.bod-hero-val { font-size: 28px; font-weight: 800; color: var(--text-1, #0f172a); margin-top: 6px; line-height: 1.1; }
.bod-hero-val small { font-size: 16px; color: var(--text-3); font-weight: 500; margin-left: 2px; }
.bod-hero-sub { font-size: 11.5px; color: var(--text-3, #94a3b8); margin-top: 4px; }
.bod-hero-primary { background: linear-gradient(135deg, #1877f2 0%, #155fc8 100%); border: none; }
.bod-hero-primary .bod-hero-lbl, .bod-hero-primary .bod-hero-sub { color: rgba(255,255,255,.85); }
.bod-hero-primary .bod-hero-val { color: #fff; }
.bod-hero-good .bod-hero-val { color: #059669; }
.bod-hero-warn .bod-hero-val { color: #ea580c; }
.bod-hero-bad .bod-hero-val { color: #dc2626; }

/* CARD chung */
.bod-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 20px 22px; margin-bottom: 20px; }
.bod-card-title { font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.bod-card-title i { color: #1877f2; font-size: 14px; }

/* Market phân bổ row */
.bod-market-row { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; }
@media (max-width: 780px) { .bod-market-row { grid-template-columns: 1fr; } }
.bod-market-donut-wrap { position: relative; height: 240px; }
.bod-market-legend { display: flex; flex-direction: column; gap: 10px; }
.bod-market-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; background: rgba(148,163,184,.04); border: 1px solid var(--border); border-left: 3px solid var(--mk-color); border-radius: 8px; }
.bod-market-flag { font-size: 26px; }
.bod-market-name { font-size: 14px; font-weight: 700; color: var(--text-1); }
.bod-market-code { color: var(--text-3); font-weight: 500; font-family: ui-monospace, monospace; font-size: 11px; margin-left: 6px; }
.bod-market-metrics { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.bod-market-metrics b { color: var(--text-1); font-weight: 700; }
.bod-market-gmroi { color: #059669 !important; font-weight: 700; }
.bod-market-sp { font-size: 20px; font-weight: 800; color: var(--mk-color); text-align: right; }
.bod-market-sp small { display: block; font-size: 10px; color: var(--text-3); font-weight: 500; text-transform: uppercase; margin-top: 2px; }

/* Section title giữa các block */
.bod-section-title { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 24px 0 14px; display: flex; align-items: center; gap: 10px; }
.bod-section-title i { color: #1877f2; }

/* Market details grid: 2 cột trên desktop, 1 cột mobile */
.bod-markets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 16px; }
.bod-market-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 16px 18px; border-top: 4px solid var(--mk-color); }
.bod-market-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.bod-market-card-title { font-size: 15px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.bod-market-card-flag { font-size: 22px; }
.bod-market-card-total { text-align: right; }
.bod-market-card-val { font-size: 20px; font-weight: 800; color: var(--mk-color); }
.bod-market-card-share { font-size: 11px; color: var(--text-3); }

.bod-market-card-body { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
@media (max-width: 600px) { .bod-market-card-body { grid-template-columns: 1fr; } }
.bod-market-sublabel { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.bod-c1-donut-wrap { position: relative; height: 140px; margin-bottom: 8px; }
.bod-c1-legend { display: flex; flex-direction: column; gap: 4px; }
.bod-c1-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 11px; }
.bod-c1-dot { width: 8px; height: 8px; border-radius: 50%; }
.bod-c1-name { color: var(--text-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bod-c1-val { color: var(--text-3); font-size: 10.5px; text-align: right; }
.bod-c1-val b { color: var(--text-1); font-size: 11.5px; margin-right: 4px; }

/* Top ngách list */
.bod-c2-list { display: flex; flex-direction: column; gap: 6px; }
.bod-c2-empty { padding: 12px; text-align: center; color: var(--text-3); font-size: 11.5px; background: rgba(220,38,38,.04); border-radius: 6px; }
.bod-c2-row { display: grid; grid-template-columns: 44px 100px 1fr 44px auto; gap: 8px; align-items: center; font-size: 11.5px; padding: 4px 0; }
.bod-c2-code { font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; }
.bod-c2-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.bod-c2-bar { height: 6px; background: rgba(148,163,184,.15); border-radius: 999px; overflow: hidden; }
.bod-c2-bar-fill { height: 100%; border-radius: 999px; }
.bod-c2-pct { color: var(--text-2); font-weight: 700; font-size: 11px; text-align: right; }
.bod-c2-val { color: var(--text-3); font-size: 11px; text-align: right; font-weight: 600; }

/* ═══ Drill-down flow BOD → Market → Ngành → Ngách → SP (2026-07-18) ═══ */
.drill-wrap { max-width: 1400px; margin: 0 auto; padding: 8px 0; }

/* Breadcrumb */
.drill-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 10px 0 16px; flex-wrap: wrap; }
.drill-bc-item { background: rgba(24,119,242,.08); color: #155fc8; border: 1px solid rgba(24,119,242,.2); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.drill-bc-item:hover { background: #155fc8; color: #fff; }
.drill-bc-item i { margin-right: 4px; }
.drill-bc-sep { color: var(--text-3); font-weight: 700; }
.drill-bc-current { background: var(--bg-card); border: 1px solid var(--border); padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-1); }

/* Header per drill level */
.drill-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: var(--bg-card); border: 1px solid var(--border); border-left: 5px solid var(--mk-color); border-radius: 14px; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.drill-header-title { font-size: 20px; font-weight: 800; color: var(--text-1); display: flex; align-items: center; gap: 10px; }
.drill-flag { font-size: 24px; }
.drill-header-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.drill-header-stats b { color: var(--text-1); font-weight: 700; }

/* 2-col layout */
.drill-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .drill-2col { grid-template-columns: 1fr; } }

/* C1 list rows (clickable industry) */
.drill-c1-body { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.drill-c1-donut { position: relative; width: 320px; height: 320px; flex-shrink: 0; }
.drill-c1-list { flex: 0 1 620px; min-width: 320px; }
.drill-c1-list { display: flex; flex-direction: column; gap: 6px; }
.drill-c1-row { display: grid; grid-template-columns: 14px 1fr 60px 50px 90px 20px; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(148,163,184,.04); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-family: inherit; text-align: left; font-size: 12.5px; }
.drill-c1-row:hover { background: rgba(24,119,242,.06); border-color: #1877f2; }
.drill-c1-dot { width: 10px; height: 10px; border-radius: 50%; }
.drill-c1-name { font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-c1-sp { color: var(--text-3); font-size: 11.5px; font-weight: 600; text-align: right; }
.drill-c1-pct { color: var(--text-2); font-weight: 700; text-align: right; font-family: ui-monospace, monospace; }
.drill-c1-val { color: var(--text-1); font-weight: 700; text-align: right; }
.drill-c1-row i { color: var(--text-3); font-size: 10px; }
.drill-niche-code { padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; }
.drill-c1-row .drill-niche-code { width: auto; }

/* Project list */
.drill-project-list { display: flex; flex-direction: column; gap: 6px; }
.drill-project-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: rgba(148,163,184,.04); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; }
.drill-project-code { font-family: ui-monospace, monospace; font-weight: 800; color: #155fc8; background: rgba(24,119,242,.10); padding: 3px 8px; border-radius: 4px; text-align: center; font-size: 12px; }
.drill-project-metrics { display: flex; gap: 12px; color: var(--text-3); font-size: 11.5px; }
.drill-project-roi { font-weight: 700; }
.drill-project-good { color: #059669; }
.drill-project-warn { color: #ea580c; }
.drill-project-bad { color: #dc2626; }
.drill-project-val { font-weight: 800; color: var(--text-1); font-size: 13px; }

/* Market card arrow hint (khi hover trên BOD) */
.bod-market-card { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.bod-market-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.bod-market-card-arrow { color: var(--mk-color); font-size: 12px; margin-left: 8px; opacity: 0; transition: opacity .12s, transform .12s; }
.bod-market-card:hover .bod-market-card-arrow { opacity: 1; transform: translateX(4px); }

/* Project grid (Level 2 Market Detail — dưới ngành hàng) */
.drill-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.drill-project-card { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; border-left: 3px solid #1877f2; }
.drill-project-card .drill-project-code { display: inline-block; font-size: 12px; padding: 3px 10px; margin-bottom: 8px; }
.drill-project-card .drill-project-val { font-size: 16px; font-weight: 800; color: var(--text-1); margin-bottom: 6px; }
.drill-project-card .drill-project-metrics { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10.5px; color: var(--text-3); }
.drill-project-card .drill-project-metrics span { white-space: nowrap; }

/* Tồn theo giá nhập vs giá bán — visual pair */
.bod-hero-retail { background: linear-gradient(135deg, #059669 0%, #047857 100%); border: none; }
.bod-hero-retail .bod-hero-lbl, .bod-hero-retail .bod-hero-sub { color: rgba(255,255,255,.85); }
.bod-hero-retail .bod-hero-val { color: #fff; }

.drill-c1-values { display: flex; flex-direction: column; gap: 2px; text-align: right; min-width: 230px; }
.drill-c1-nhap { color: var(--text-1); font-weight: 700; font-size: 12px; }
.drill-c1-ban { color: #059669; font-weight: 600; font-size: 11.5px; }
.drill-c1-row { grid-template-columns: 14px 1fr 60px 50px 240px 20px !important; }

/* Legend cho donut dự án (dài hơn) */
.drill-project-donut-legend { display: flex; flex-direction: column; gap: 4px; flex: 0 1 500px; min-width: 240px; }

/* Card project — split value nhập/bán */
.drill-project-values { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.drill-pv-row { display: flex; justify-content: space-between; align-items: baseline; }
.drill-pv-lbl { color: var(--text-3); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.drill-pv-val { font-size: 15px; font-weight: 800; color: var(--text-1); }
.drill-pv-retail { color: #059669 !important; font-size: 14px !important; }

/* ═══ 3 nhóm hàng: Nhập mới / Đang chạy / Hàng tồn (2026-07-18) ═══ */
.bod-stock-card { margin-bottom: 20px; }
.bod-stock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bod-stock-box { padding: 14px 16px; background: var(--sk-bg); border: 1px solid var(--sk-color); border-left: 4px solid var(--sk-color); border-radius: 10px; }
.bod-stock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bod-stock-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--sk-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bod-stock-label { font-size: 14px; font-weight: 800; color: var(--sk-color); }
.bod-stock-nums { display: flex; flex-direction: column; gap: 5px; }
.bod-stock-num-row { display: grid; grid-template-columns: 60px 1fr 50px; gap: 8px; align-items: baseline; font-size: 12.5px; }
.bod-stock-num-lbl { color: var(--text-3); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.bod-stock-num-val { color: var(--text-1); font-weight: 800; }
.bod-stock-num-pct { color: var(--text-3); font-family: ui-monospace, monospace; font-size: 11px; text-align: right; font-weight: 700; }

/* Ratio strip */
.bod-stock-ratio { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 14px; background: rgba(148,163,184,.06); border: 1px dashed var(--border); border-radius: 8px; }
.bod-stock-ratio-lbl { font-size: 12px; font-weight: 700; color: var(--text-2); }
.bod-stock-ratio-val { font-size: 24px; font-weight: 800; font-family: ui-monospace, monospace; }
.bod-stock-ratio-good { color: #059669; }
.bod-stock-ratio-warn { color: #ea580c; }
.bod-stock-ratio-bad { color: #dc2626; }
.bod-stock-ratio-hint { font-size: 11px; color: var(--text-3); font-weight: 500; }

/* Mini stack bar cho card project */
.drill-project-stackbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin: 6px 0 4px; background: rgba(148,163,184,.15); }
.drill-stack-seg { height: 100%; }
.drill-stack-new { background: #1877f2; }
.drill-stack-active { background: #059669; }
.drill-stack-stale { background: #dc2626; }
.drill-project-stackmeta { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 4px; }
.drill-stack-lbl { font-size: 10px; font-weight: 700; }
.drill-stack-lbl-new { color: #1877f2; }
.drill-stack-lbl-active { color: #059669; }
.drill-stack-lbl-stale { color: #dc2626; }

/* Project Detail header — tag market */
.drill-project-market-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(148,163,184,.10); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 10px; }