/* ============================================================================
   Dải quy trình sản phẩm — dùng chung cho mọi màn nằm trên chuỗi
   SKU → Hồ sơ NK → Giấy phép → Batch → Serial → In tem → Nhận tem → Lưu thông
   Trang chỉ khai <div class="flow-rail" data-step="N"></div>, flow.js dựng nội dung.
   ========================================================================== */
.flow-rail {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 4px; margin-bottom: var(--s-lg);
}
.flow-rail::-webkit-scrollbar { height: 6px; }
.flow-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.fr-step {
  flex: 1 0 auto; min-width: 116px; position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px 9px 20px; border-radius: var(--r-md);
  text-decoration: none; color: var(--text-muted);
}
.fr-step + .fr-step::before {           /* mũi tên nối giữa hai bước */
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
  transform: rotate(45deg);
}
.fr-step:first-child { padding-left: 12px; }
.fr-step .n { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fr-step .t { font-size: 13px; font-weight: 600; color: var(--text-secondary); line-height: 1.35; }

a.fr-step:hover { background: var(--surface-muted); }
a.fr-step:hover .t { color: var(--primary-action); }

/* đã qua */
.fr-step.done .n { color: var(--success-strong); }
.fr-step.done .t { color: var(--text-secondary); }
/* đang đứng */
.fr-step.now { background: var(--primary-soft); }
.fr-step.now .n { color: var(--primary-action); }
.fr-step.now .t { color: var(--primary-action); font-weight: 700; }
/* bước có điều kiện — chỉ áp dụng với hàng nhập khẩu */
.fr-step.cond .t::after {
  content: ' *'; color: var(--warning-strong); font-weight: 700;
}
.flow-note {
  font-size: 12px; color: var(--text-muted); line-height: 1.55;
  margin: -12px 0 var(--s-lg); padding-left: 2px;
}
.flow-note b { color: var(--text-secondary); }

@media (max-width: 720px) {
  .fr-step { min-width: 104px; padding: 8px 10px 8px 16px; }
  .fr-step .t { font-size: 12px; }
}