/* S10b · Bảng lời chúc (wishes.js): giấy note màu kem ghim trên bảng xanh; các cột cuộn lên liên tục */
.wishes { padding-top: 64px; padding-bottom: 72px; }
.wishes .title { margin-bottom: 10px; }
.wishes__count { min-height: 1.6em; margin-bottom: 18px; font: 500 11px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.board {
  position: relative; padding: 20px 14px; border-radius: 10px;
  background: var(--green); box-shadow: inset 0 0 0 6px #0a3d22, inset 0 8px 24px rgba(0, 0, 0, .35);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* chạm giữ để đọc không bôi chọn chữ */
  overflow-anchor: none; /* dán note vào bảng không làm trình duyệt tự dịch vị trí cuộn (neo cuộn), trang đang tự cuộn không bị dừng */
}
.board:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } /* bàn phím: focus vào bảng thì bảng dừng để đọc */
.board__view { display: flex; gap: 12px; align-items: flex-start; min-height: 150px; max-height: min(520px, 70vh); overflow: hidden; }
.board.is-loading .board__view { height: min(520px, 70vh); } /* giữ sẵn chỗ khi đang tải: lời chúc hiện ra không đẩy trang */
.board.is-looping .board__view { /* tờ note vào và ra ở mép trên/dưới thì mờ dần */
  -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.board__view > .note { width: min(100%, 260px); margin: 12px auto; } /* tờ note mời gửi lời chúc đầu tiên */
.board__col { flex: 1; min-width: 0; }
.board__track { display: flex; flex-direction: column; padding-top: 12px; } /* flex: lề dưới mỗi tờ không bị gộp, vòng lặp khớp từng px */
.board.is-looping .board__track { animation: wishes-loop var(--loop-t) linear infinite; }
.board.is-held .board__track, .board.is-offscreen .board__track, .board:focus-within .board__track { animation-play-state: paused; }
@media (hover: hover) { .board:hover .board__track { animation-play-state: paused; } }
@keyframes wishes-loop { to { transform: translate3d(0, calc(-1 * var(--loop-h)), 0); } }

.note {
  position: relative; margin: 0 0 16px; padding: 24px 12px 12px;
  transform: rotate(var(--r, 0deg)); text-align: left;
  background: var(--cream); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .45), 0 2px 3px rgba(0, 0, 0, .1);
}
.note[data-tone="1"] { background: #f6ecd9; }
.note[data-tone="2"] { background: #e7efe3; }
.note[data-tone="3"] { background: #fbf8f1; }
.note::before { /* đinh ghim */
  content: ''; position: absolute; top: 7px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1d9a0, #b98a3c 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.note.is-new { box-shadow: 0 0 0 2px #c9a24a, 0 8px 16px -8px rgba(0, 0, 0, .45); } /* lời chúc khách vừa gửi */
.note__text { margin: 0; font: italic 500 16px/1.35 var(--italic); color: #2b2a24; overflow-wrap: anywhere; }
.note__name { margin-top: 10px; font: 600 10px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #5d4f3a; text-align: right; overflow-wrap: anywhere; }
.wishes__status { min-height: 1.5em; margin-top: 12px; font-size: 12.5px; color: var(--muted); }

/* Giảm chuyển động: không cuộn, bảng thành khung kéo được */
@media (prefers-reduced-motion: reduce) { .board__view { overflow-y: auto; } }