/* marquee.css — nạp SAU kiosk.css. Băng chuyền card cho màn hình #board */
.mq { position: relative; width: 100%; overflow: hidden; margin-top: 1.2rem; }

/* marquee.js tính sẵn: --gap (16px), --mq-col-w, --mq-card-w, --mq-font. Card cao theo lượng chữ. */
.mq-col {
  position: absolute; top: 0; left: 0; height: 100%;
  width: var(--mq-col-w);
  display: flex; flex-direction: column; justify-content: center; /* đổi thành flex-start nếu muốn các card dính sát mép trên */
  align-items: center;
  gap: var(--gap);
  padding: 0 calc(var(--gap) / 2); box-sizing: border-box;
  will-change: transform;
}

.mq .pnote {
  flex: 0 0 auto; box-sizing: border-box; margin: 0;
  width: var(--mq-card-w); height: auto;
  font-size: var(--mq-font);
  border-radius: 0.9em;
  animation: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.mq .pnote.mq-enter { opacity: 0; transform: translateX(90px) scale(.88); }
.mq .pnote.mq-leave { opacity: 0; transform: scale(.9); transition-duration: .3s; }
.mq .pnote.mq-glow { animation: glow 1.8s ease-out; }   /* @keyframes glow có sẵn trong kiosk.css */

.mq:empty::before {
  content: 'No posts yet. Be the first to share a next step!';
  display: block; background: rgba(255,255,255,.1); color: #fff;
  font-size: 2rem; padding: 4rem 2rem; border-radius: 1.5rem;
}