/* ===========================================================
   Homepage — "Voucher đang được canh" live showcase
   Markup: include/partials/voucher-showcase-section.php
   Chart : include/partials/voucher-showcase-svg.php (inline SVG)

   The SVG is stretched (preserveAspectRatio="none") inside .vshow-canvas, so
   the chart height is set here and every stroke uses non-scaling-stroke.
   Axis labels + the "now" marker are HTML overlays positioned in the same
   0–100% space as the viewBox, so text never distorts.
   All colours are theme tokens → light/dark both work.
   =========================================================== */

.vshow { padding: 2.25rem 0 2.75rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }

.vshow-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  box-shadow: var(--card-glow);
  overflow: hidden;
}

/* ---------- Head: live badge + title + CTA ---------- */
.vshow-head {
  display: flex; flex-wrap: wrap; gap: .85rem;
  align-items: center; justify-content: space-between;
  padding: 1.05rem 1.15rem .95rem;
  border-bottom: 1px solid var(--color-border);
}
.vshow-live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-teal);
  background: var(--color-teal-dim);
  border-radius: var(--radius-pill);
  padding: .28rem .6rem;
}
.vshow-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-teal) 60%, transparent);
  animation: vshowPulse 2s infinite;
}
@keyframes vshowPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-teal) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.vshow-title {
  margin: .45rem 0 .2rem;
  font-size: clamp(1.02rem, .5vw + .85rem, 1.35rem);
  font-weight: 700; letter-spacing: -.015em;
}
.vshow-code {
  font-family: var(--font-mono); font-size: .92em; font-weight: 700;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border-radius: 8px; padding: .05em .4em;
}
.vshow-rawcode {
  display: inline-block; margin-left: .35rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  color: var(--color-muted); background: var(--color-surface-2);
  border-radius: 6px; padding: .1rem .4rem; vertical-align: middle;
}
.vshow-rawcode:empty { display: none; }
.vshow-chip { max-width: 100%; }
.vshow-chip { font-family: var(--font-body); font-size: .78rem; }

.vshow-sub { margin: 0; font-size: .82rem; color: var(--color-muted); line-height: 1.4; max-width: 42rem; }
.vshow-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .95rem; border-radius: var(--radius-pill);
  background: var(--color-cta); color: #fff; font-size: .85rem; font-weight: 600;
  white-space: nowrap; transition: background var(--transition-fast), transform var(--transition-fast);
}
.vshow-cta:hover { background: var(--color-cta-hover); color: #fff; text-decoration: none; transform: translateY(-1px); }

/* ---------- Voucher switcher chips ---------- */
.vshow-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .7rem 1.15rem; border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.vshow-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--color-border); background: var(--color-bg-card);
  color: var(--color-soft); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  padding: .3rem .75rem; transition: border-color var(--transition-fast), color var(--transition-fast);
}
.vshow-chip:hover { border-color: var(--color-accent); color: var(--color-text); }
.vshow-chip.is-active { border-color: var(--color-accent); background: var(--color-accent-dim); color: var(--color-accent); }
.vshow-chip em { width: 7px; height: 7px; border-radius: 50%; background: var(--color-muted); }
.vshow-chip em.is-in  { background: var(--color-success); }
.vshow-chip em.is-out { background: var(--color-danger); }

/* ---------- Panels (only one visible at a time) ---------- */
.vshow-panel { display: none; }
.vshow-panel.is-active { display: block; }

/* ---------- KPI tiles (1px gaps read as hairline rules) ---------- */
.vshow-kpis {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) { .vshow-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .vshow-kpis { grid-template-columns: repeat(5, 1fr); } }
.vshow-kpi { background: var(--color-bg-card); padding: .8rem 1rem; }
.vshow-kpi__num {
  font-family: var(--font-mono); font-weight: 700; line-height: 1.1;
  font-size: clamp(.92rem, 1vw, 1.08rem); color: var(--color-text);
}
.vshow-kpi__num.is-in  { color: var(--color-success); }
.vshow-kpi__num.is-out { color: var(--color-danger); }
.vshow-kpi__lab { margin-top: .2rem; font-size: .7rem; letter-spacing: .04em; color: var(--color-muted); }

/* ---------- Projected restock banner ---------- */
.vshow-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .3rem .6rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-danger) 7%, var(--color-bg));
  text-align: center;
}
.vshow-next.is-in { background: color-mix(in srgb, var(--color-success) 9%, var(--color-bg)); }
.vshow-next i { font-size: 1.05rem; line-height: 1; color: var(--color-danger); }
.vshow-next.is-in i { color: var(--color-success); }
.vshow-next__lab { font-size: .85rem; color: var(--color-soft); }
.vshow-next__time {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.05;
  color: var(--color-danger);
}
.vshow-next.is-in .vshow-next__time { color: var(--color-success); }
.vshow-next__eta { font-size: .85rem; color: var(--color-muted); }

/* ---------- Plot ---------- */
/* --vshow-h lives on the row so the y-axis column can match the canvas height. */
.vshow-plot { --vshow-h: clamp(150px, 22vw, 250px); display: flex; gap: .55rem; padding: 1rem 1.15rem .4rem; }
.vshow-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  height: var(--vshow-h); font-family: var(--font-mono); font-size: .66rem; color: var(--color-muted);
}
.vshow-yaxis span:first-child { margin-top: -.4em; }
.vshow-yaxis span:last-child  { margin-bottom: -.4em; }
.vshow-plotcol { flex: 1; min-width: 0; }

.vshow-canvas {
  position: relative; height: var(--vshow-h);
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
/* overflow visible keeps the 100%-line stroke from being clipped in half. */
.vshow-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* "Now" marker — HTML so it stays a circle under the stretched SVG. */
.vshow-now {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent);
}
.vshow-now.is-out { background: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent); }

/* Hover readout: guide line + sample dot + tooltip (all driven by
   /js/home-voucher-showcase.js, positioned in the same 0–100% space). */
.vshow-canvas { cursor: crosshair; }
.vshow-guide {
  position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px;
  background: color-mix(in srgb, var(--color-text) 30%, transparent);
  pointer-events: none;
}
.vshow-hit {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--color-success);
  border: 2px solid var(--color-bg-card); pointer-events: none;
}
.vshow-hit.is-out { background: var(--color-danger); }
.vshow-tip {
  position: absolute; top: .4rem; transform: translateX(.5rem);
  display: flex; flex-direction: column; gap: .05rem;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: var(--card-glow);
  padding: .4rem .6rem; font-size: .72rem; color: var(--color-muted);
  white-space: nowrap; pointer-events: none; z-index: 2;
}
.vshow-tip.flip { transform: translateX(-100%) translateX(-.5rem); }
.vshow-tip b { font-family: var(--font-mono); font-size: .74rem; color: var(--color-text); font-weight: 700; }
.vshow-tip .is-in  { color: var(--color-success); font-weight: 600; }
.vshow-tip .is-out { color: var(--color-danger); font-weight: 600; }

.vshow-xaxis { position: relative; height: 1.15rem; margin-top: .3rem; }
.vshow-xaxis span {
  position: absolute; top: 0; font-family: var(--font-mono); font-size: .66rem; color: var(--color-muted);
  transform: translateX(-50%); white-space: nowrap;
}
.vshow-xaxis span:first-child { transform: none; }
.vshow-xaxis span:last-child  { transform: translateX(-100%); }

/* ---------- Availability rail + legend ---------- */
.vshow-foot { padding: .35rem 1.15rem 1.05rem; }
.vshow-rail {
  display: flex; height: 7px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--color-surface-2);
}
.vshow-rail i { display: block; height: 100%; }
.vshow-rail i.is-in  { background: var(--color-success); }
.vshow-rail i.is-out { background: var(--color-danger); }
.vshow-legend {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .55rem;
  font-size: .74rem; color: var(--color-muted);
}
.vshow-legend b { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
.vshow-legend b::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: currentColor; }
.vshow-legend b.is-in  { color: var(--color-success); }
.vshow-legend b.is-out { color: var(--color-danger); }

/* ---------- SVG paint (classes only — tokens keep it theme-aware) ---------- */
.vshow-grid { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.vshow-band { fill: color-mix(in srgb, var(--color-danger) 7%, transparent); }
.vshow-bandrail { fill: color-mix(in srgb, var(--color-danger) 55%, transparent); }
.vshow-area { fill: url(#vshowFill); }
.vshow-stop-a { stop-color: color-mix(in srgb, var(--color-teal) 15%, transparent); }
.vshow-stop-b { stop-color: color-mix(in srgb, var(--color-teal) 0%, transparent); }
.vshow-line {
  fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.vshow-line.is-in  { stroke: var(--color-success); }
.vshow-line.is-out { stroke: var(--color-danger); }

@media (prefers-reduced-motion: reduce) { .vshow-live i { animation: none; } }
@media (max-width: 575.98px) {
  .vshow-head { padding: .9rem 1rem .8rem; }
  .vshow-plot { padding: .85rem .9rem .3rem; }
  .vshow-foot { padding: .3rem .9rem .9rem; }
  .vshow-cta { width: 100%; justify-content: center; }
}