/* KineMotion · demo trên web (Tạp hoá). Cửa sổ tối giống panel thật, đặt trên trang sáng. */
.km-demo { margin: 2.5rem 0; }
.km-demo__head { margin-bottom: 1rem; }
.km-demo__head h2 { margin: 0 0 .35rem; font-size: 1.5rem; letter-spacing: -.02em; color: #0b1220; }
.km-demo__head p { margin: 0; color: #5b6475; font-size: .95rem; }

.km-win {
  border-radius: 16px; overflow: hidden; background: #161616; color: #e9eef6;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px -24px rgba(15,23,42,.55), 0 0 0 4px rgba(85,136,240,.06);
  font-family: Inter, -apple-system, "SF Pro Text", sans-serif;
}
.km-bar { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; background: #1c1c1c; border-bottom: 1px solid #262626; font-size: .82rem; }
.km-bar b { font-weight: 700; }
.km-bar-sub { color: #8a93a3; }
.km-dots { display: inline-flex; gap: 6px; margin-right: .3rem; }
.km-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; display: block; }

.km-body { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .km-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }

.km-stage-wrap { padding: 1rem; border-bottom: 1px solid #262626; }
@media (min-width: 900px) { .km-stage-wrap { border-bottom: none; border-right: 1px solid #262626; } }
.km-stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 70% 10%, rgba(46,110,220,.35), transparent 60%), #0b0c10;
  display: flex; align-items: center; justify-content: center;
}
.km-text {
  font-weight: 800; font-size: clamp(22px, 5.2vw, 52px); line-height: 1.15; text-align: center;
  letter-spacing: -.03em; color: #fff; padding: 0 6%; max-width: 100%;
}
.km-line { display: block; white-space: nowrap; }
.km-line + .km-line { font-size: .62em; font-weight: 600; color: #b9c7dc; margin-top: .25em; }
.km-word, .km-char, .km-line { will-change: transform, opacity, filter; }
.km-word, .km-char { display: inline-block; }
.km-info { position: absolute; left: .75rem; bottom: .65rem; max-width: 70%; }
.km-info-name { font-size: .85rem; font-weight: 700; }
.km-info-meta { font-size: .72rem; color: #9fb0c8; margin-top: .1rem; }
.km-replay {
  position: absolute; right: .65rem; bottom: .6rem; border: none; cursor: pointer;
  padding: .4rem .8rem; border-radius: 999px; font: 600 .78rem Inter, sans-serif; color: #fff;
  background: linear-gradient(180deg, #5588f0 0%, #3466e2 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -4px rgba(52,102,226,.6);
}
.km-field { display: flex; flex-direction: column; gap: .3rem; margin-top: .8rem; font-size: .75rem; color: #8a93a3; }
.km-field textarea {
  resize: none; background: #222; color: #fff; border: 1px solid #2f2f2f; border-radius: 8px;
  padding: .5rem .65rem; font: 500 .9rem Inter, sans-serif; outline: none;
}
.km-field textarea:focus { border-color: #4f86f0; }

.km-side { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.km-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.km-tab, .km-chip {
  border: 1px solid #2f2f2f; background: #222; color: #c9d2df; cursor: pointer;
  border-radius: 999px; padding: .32rem .7rem; font: 600 .75rem Inter, sans-serif;
}
.km-tab.on { background: linear-gradient(180deg, #5588f0 0%, #3466e2 100%); color: #fff; border-color: transparent; }
.km-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.km-chip { font-weight: 500; padding: .25rem .6rem; }
.km-chip.on { border-color: #4f86f0; color: #fff; }
.km-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem;
  max-height: 300px; overflow-y: auto; padding-right: .2rem;
}
@media (min-width: 900px) { .km-grid { max-height: 340px; } }
.km-card {
  display: flex; align-items: center; gap: .45rem; text-align: left; cursor: pointer;
  background: #1f1f1f; border: 1px solid #2c2c2c; border-radius: 9px; padding: .5rem .55rem;
  color: #dfe6f0; font: 500 .74rem/1.25 Inter, sans-serif; border-top: 2px solid #3b6fd9;
}
.km-card.is-out { border-top-color: #d9534f; }
.km-card:hover { border-color: #4f86f0; }
.km-card.on { background: #1e2a44; border-color: #4f86f0; }
.km-card-arrow { color: #7fb2ff; font-weight: 700; width: 1em; flex: none; text-align: center; }
.km-card.is-out .km-card-arrow { color: #ff8a85; }
.km-empty { color: #8a93a3; font-size: .8rem; padding: .5rem; }