@charset "UTF-8";
/* ==========================================================================
   16. PROCESS — timeline có progress line
   ========================================================================== */
.nexdata-widget .nex-process__track { position: relative; }
/* Đường tiến trình ngang (desktop) */
.nexdata-widget .nex-process__track::before {
  content: "";
  position: absolute; top: 34px; left: 12%; right: 12%;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--nex-blue), var(--nex-cyan));
  opacity: .28;
}
.nexdata-widget .nex-process__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nex-sp-6); position: relative;
}
.nexdata-widget .nex-step { text-align: center; }
.nexdata-widget .nex-step__dot {
  width: 68px; height: 68px; margin: 0 auto var(--nex-sp-5);
  display: grid; place-items: center;
  border-radius: var(--nex-r-lg);
  background: #fff;
  border: 1px solid var(--nex-line);
  box-shadow: var(--nex-sh-sm);
  color: var(--nex-blue);
  position: relative;
  transition: transform var(--nex-dur) var(--nex-ease), box-shadow var(--nex-dur) var(--nex-ease);
}
.nexdata-widget .nex-step:hover .nex-step__dot { transform: translateY(-4px); box-shadow: var(--nex-sh-md); }
.nexdata-widget .nex-step.is-active .nex-step__dot {
  border-color: transparent;
  background: var(--nex-grad-brand);
  color: #fff;
  box-shadow: var(--nex-sh-brand);
}
.nexdata-widget .nex-step__dot .nex-icon { width: 28px; height: 28px; }
.nexdata-widget .nex-step__num {
  position: absolute; top: -9px; right: -9px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--nex-grad-brand); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  border: 2.5px solid #fff;
}
.nexdata-widget .nex-step__t { font-size: var(--nex-fs-h3); margin-bottom: var(--nex-sp-2); }
.nexdata-widget .nex-step__d { font-size: var(--nex-fs-sm); color: var(--nex-ink-3); max-width: 30ch; margin-inline: auto; }

@media (max-width: 900px) {
  .nexdata-widget .nex-process__track::before { display: none; }
  .nexdata-widget .nex-process__grid { grid-template-columns: 1fr; gap: 0; }
  .nexdata-widget .nex-step {
    position: relative;
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: var(--nex-sp-5);
    padding-bottom: var(--nex-sp-7);
    text-align: left;
  }
  .nexdata-widget .nex-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 76px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--nex-blue), rgba(22, 200, 232, .25));
  }
  .nexdata-widget .nex-step__dot { margin: 0; }
  .nexdata-widget .nex-step__d { margin-inline: 0; max-width: none; }

  [dir="rtl"] .nexdata-widget .nex-step { text-align: right; }
  [dir="rtl"] .nexdata-widget .nex-step:not(:last-child)::after { left: auto; right: 34px; }
}