/* ===== Journey demo — bản mô phỏng dashboard "Hành trình khách" cho landing ===== */
.jd {
  --jd-blue:#027BFF; --jd-purple:#6d5cff; --jd-up:#16a34a; --jd-down:#ef4444;
  --jd-cus:#d97706; --jd-ink:#0f172a; --jd-muted:#7b8698; --jd-line:#eef2f8; --jd-bg:#f7f9fd;
  font-family: inherit; color: var(--jd-ink);
  background:#fff; border:1px solid var(--jd-line); border-radius:1.8rem;
  box-shadow:0 3rem 6rem -2.4rem rgba(15,23,42,.22); overflow:hidden;
}
.jd * { box-sizing:border-box; }
.jd-topbar { display:flex; align-items:center; gap:1rem; padding:1.6rem 2rem; border-bottom:1px solid var(--jd-line); }
.jd-topbar .ic { width:3.2rem;height:3.2rem;border-radius:.9rem;background:linear-gradient(135deg,var(--jd-blue),var(--jd-purple));color:#fff;display:grid;place-items:center;font-size:1.5rem;}
.jd-topbar strong{font-size:1.7rem;} .jd-topbar span{display:block;font-size:1.2rem;color:var(--jd-muted);}
.jd-live{margin-left:auto;display:inline-flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:700;color:var(--jd-up);background:rgba(22,163,74,.1);padding:.5rem 1.1rem;border-radius:999px;}
.jd-live .p{width:.8rem;height:.8rem;border-radius:50%;background:var(--jd-up);animation:jd-pulse 1.6s infinite;}
@keyframes jd-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 .7rem rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

.jd-body{padding:1.6rem;display:flex;flex-direction:column;gap:1.4rem;background:var(--jd-bg);}
.jd-card{background:#fff;border:1px solid var(--jd-line);border-radius:1.2rem;padding:1.4rem;}
.jd-card h5{margin:0 0 .3rem;font-size:1.45rem;display:flex;align-items:center;gap:.6rem;}
.jd-card .sub{font-size:1.15rem;color:var(--jd-muted);margin-bottom:1rem;}
.jd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}

/* KPI */
.jd-kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem;}
.jd-kpi{background:#fff;border:1px solid var(--jd-line);border-radius:1rem;padding:1.1rem;}
.jd-kpi.bump{animation:jd-bump .5s cubic-bezier(.22,1.4,.4,1);}
@keyframes jd-bump{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
.jd-kpi .lbl{font-size:1.05rem;color:var(--jd-muted);font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.4rem;text-transform:uppercase;}
.jd-kpi .val{font-size:2.4rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;}
.jd-kpi .foot{font-size:1.05rem;color:var(--jd-muted);}
.jd-kpi .d{font-size:1.05rem;font-weight:800;margin-left:.4rem;}
.jd-kpi .d.up{color:var(--jd-up);} .jd-kpi .d.down{color:var(--jd-down);}
.jd-kpis-wide{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.jd-kpi.big .val{font-size:3rem;}
.jd-kpi.rose{border-color:rgba(225,29,72,.25);}
.jd-kpi.rose .val{color:#e11d48;}

/* Cảm xúc chips */
.jd-emo-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem;}
.jd-emo-row .who{font-size:1.1rem;font-weight:800;min-width:8rem;}
.jd-emo-row .who.cus{color:var(--jd-cus);} .jd-emo-row .who.me{color:var(--jd-blue);}
.jd-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;font-size:1.2rem;font-weight:800;}
.jd-chip.cus{background:rgba(217,119,6,.12);border:1px solid rgba(217,119,6,.3);}
.jd-chip.me{background:rgba(2,123,255,.1);border:1px solid rgba(2,123,255,.25);}

/* Phễu */
.jd-funnel-row{display:grid;grid-template-columns:9rem 1fr 4rem;align-items:center;gap:1rem;margin-bottom:.7rem;font-size:1.25rem;}
.jd-funnel-row .name{color:var(--jd-muted);display:flex;align-items:center;gap:.5rem;}
.jd-track{height:1.8rem;background:#eef2f8;border-radius:.5rem;overflow:hidden;}
.jd-fill{height:100%;border-radius:.5rem;background:var(--jd-blue);transition:width .9s cubic-bezier(.22,.9,.3,1);display:flex;align-items:center;color:#fff;font-weight:800;font-size:1.1rem;padding-left:.6rem;}
.jd-fill.green{background:var(--jd-up);} .jd-fill.orange{background:var(--jd-cus);}
.jd-funnel-row .pct{text-align:right;font-weight:800;}

/* Donut */
.jd-donut-wrap{display:flex;align-items:center;gap:1.6rem;}
.jd-donut{position:relative;width:14rem;height:14rem;border-radius:50%;flex:none;}
.jd-donut .hole{position:absolute;inset:2.4rem;background:#fff;border-radius:50%;display:grid;place-items:center;text-align:center;}
.jd-donut .hole b{font-size:2.6rem;} .jd-donut .hole span{font-size:1.1rem;color:var(--jd-muted);}
.jd-legend{flex:1;font-size:1.2rem;}
.jd-legend .lg{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;}
.jd-legend .lg .dot{width:1rem;height:1rem;border-radius:.3rem;}
.jd-legend .lg .n{margin-left:auto;font-weight:800;}

/* Phân bố hành động */
.jd-act-row{display:grid;grid-template-columns:8.5rem 1fr 3rem;align-items:center;gap:.8rem;margin-bottom:.55rem;font-size:1.2rem;}
.jd-act-row .name{color:var(--jd-muted);text-align:right;}
.jd-act-track{height:1.5rem;background:#eef2f8;border-radius:.4rem;overflow:hidden;}
.jd-act-fill{height:100%;background:var(--jd-blue);border-radius:.4rem;transition:width .8s cubic-bezier(.22,.9,.3,1);}
.jd-act-fill.o{background:var(--jd-cus);}
.jd-act-row .c{text-align:right;font-weight:800;}

/* Nguồn khách */
.jd-src{width:100%;border-collapse:collapse;font-size:1.2rem;}
.jd-src th{text-align:left;color:var(--jd-muted);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;padding:.5rem .4rem;border-bottom:1px solid var(--jd-line);}
.jd-src td{padding:.6rem .4rem;border-bottom:1px solid var(--jd-line);}
.jd-src td.r{text-align:right;font-weight:800;}
.jd-badge{padding:.2rem .7rem;border-radius:.6rem;font-weight:800;font-size:1.05rem;}
.jd-badge.g{background:rgba(22,163,74,.12);color:var(--jd-up);} .jd-badge.r{background:rgba(239,68,68,.1);color:var(--jd-down);}

/* Xu hướng line */
.jd-line{width:100%;height:16rem;}
.jd-line-legend{display:flex;gap:1.6rem;font-size:1.15rem;color:var(--jd-muted);margin-top:.6rem;}
.jd-line-legend i{display:inline-block;width:1rem;height:1rem;border-radius:50%;margin-right:.5rem;vertical-align:middle;}

/* Chiều vào */
.jd-split{display:flex;height:2.2rem;border-radius:.6rem;overflow:hidden;font-size:1.15rem;font-weight:800;color:#fff;}
.jd-split .a{background:var(--jd-blue);display:grid;place-items:center;} .jd-split .b{background:var(--jd-cus);display:grid;place-items:center;}

/* Heatmap */
.jd-heat{display:grid;grid-template-columns:2.4rem repeat(24,1fr);gap:.25rem;}
.jd-heat .h{font-size:.95rem;color:var(--jd-muted);display:flex;align-items:center;}
.jd-heat .cell{aspect-ratio:1;border-radius:.25rem;background:#eef2f8;}

/* Bảng NV */
.jd-staff{width:100%;border-collapse:collapse;font-size:1.2rem;}
.jd-staff th{text-align:right;color:var(--jd-muted);font-size:1rem;text-transform:uppercase;padding:.5rem .6rem;border-bottom:1px solid var(--jd-line);}
.jd-staff th:first-child{text-align:left;}
.jd-staff td{padding:.7rem .6rem;border-bottom:1px solid var(--jd-line);text-align:right;font-weight:700;}
.jd-staff td:first-child{text-align:left;display:flex;align-items:center;gap:.7rem;}
.jd-staff .av{width:2.6rem;height:2.6rem;border-radius:.7rem;background:var(--jd-blue);color:#fff;display:grid;place-items:center;font-size:1.05rem;font-weight:800;}
.jd-staff .rose{color:#e11d48;}

@media (max-width:960px){
  .jd-kpis{grid-template-columns:repeat(3,1fr);}
  .jd-grid2{grid-template-columns:1fr;}
  .jd-heat{grid-template-columns:2.4rem repeat(12,1fr);}
}
@media (prefers-reduced-motion:reduce){
  .jd-kpi.bump,.jd-live .p{animation:none;}
  .jd-fill,.jd-act-fill{transition:none;}
}