/* Ngày ở đầu trang quay số như đồng hồ cơ (dựng bởi js/hero-date-roll.js).
   Mỗi chữ số là 1 ô cao 1em, che phần thừa; dải số bên trong trượt lên tới số thật. */
.hero__date.is-rolling { white-space: nowrap; }
.roll {
  position: relative; display: inline-block;
  height: 1em; line-height: 1; overflow: hidden; vertical-align: bottom;
  /* chừa chút trên/dưới để dấu mũ, chân số không bị cắt */
  padding-block: .08em; margin-block: -.08em; box-sizing: content-box;
}
.roll__size { visibility: hidden; }
.roll__strip {
  position: absolute; left: 0; right: 0; top: .08em;
  display: flex; flex-direction: column; text-align: left; /* khớp khoảng chữ (letter-spacing) với số thật */
  transition: transform 1.3s cubic-bezier(.16, .84, .24, 1);
}
.roll__strip > span { height: 1em; line-height: 1; }
/* Mờ nhẹ phía trên/dưới ô số → cảm giác số lăn qua mặt cong */
.roll { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.js-motion.is-open .roll__strip { transform: translateY(var(--roll-to)); }

/* Hai ngày trên một dòng: chữ khít hơn để vừa điện thoại; vạch "|" ngăn giữa hai ngày mảnh và nhạt */
.hero__date--multi { letter-spacing: .16em; font-size: clamp(1.1rem, 4.6vw, var(--fs-h3)); white-space: nowrap; }
.roll-sep--bar { margin: 0 .35em; color: var(--gold); }
/* Màn rất hẹp (≤360px): thu chữ để 2 ngày + lề hai bên vẫn nằm trong màn */
@media (max-width: 360px) {
  .hero__date--multi { font-size: .9rem; letter-spacing: .08em; }
  .hero__date--multi .roll-sep--bar { margin: 0 .2em; }
}

/* Dấu "." và vạch "|" nảy ra sau khi các số dừng */
.roll-sep { display: inline-block; opacity: 0; transform: scale(0); transition: opacity .4s ease 1.5s, transform .6s cubic-bezier(.34, 1.56, .64, 1) 1.5s; }
.js-motion.is-open .roll-sep { opacity: 1; transform: none; }
/* Số đã dừng thì bỏ lớp mờ để chữ nét như bình thường */
.js-motion.is-open .roll { animation: roll-unmask 0s linear 2.3s forwards; }
@keyframes roll-unmask { to { -webkit-mask-image: none; mask-image: none; } }