/* ---------- Dải lịch tĩnh ngay dưới đầu trang ---------- */
.date-strip {
  display: flex; justify-content: center;
  padding: 1.5rem 16px;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  background: var(--bg);
  text-align: center;
}
.date-strip__item {
  flex: 1 1 0; max-width: 300px; padding: .35rem .5rem;
  color: inherit; text-decoration: none; border-radius: 8px;
  transition: background .2s;
}
.date-strip__item:hover, .date-strip__item:focus-visible { background: rgba(194, 165, 126, .12); }
.date-strip__item:hover .date-strip__date, .date-strip__item:focus-visible .date-strip__date { color: #c93a4d; }
.date-strip__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.date-strip__item + .date-strip__item { border-left: 1px solid var(--gold); }
.date-strip__date {
  display: block;
  font: 400 var(--fs-h2)/1 var(--serif);
  font-variant-numeric: lining-nums; letter-spacing: .04em;
  color: var(--accent);
  transition: color .2s;
}
.date-strip__title {
  display: block; margin-top: .45rem;
  font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500;
}
.date-strip__place { display: block; margin-top: .2rem; font-size: var(--fs-sm); color: var(--muted); text-wrap: balance; }

/* ---------- Đếm ngược: nền ảnh làm tối · 4 ô viền vàng · số lật · ngày giờ + nút lịch ---------- */
.countdown-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 4rem 16px 3.5rem;
  text-align: center;
  background: var(--ink);
  color: var(--bg);
}
.countdown-band__bg, .countdown-band__bg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.countdown-band__bg img { object-fit: cover; object-position: var(--cd-focus-mobile, 50% 40%); filter: grayscale(.2); }
@media (min-width: 900px) {
  .countdown-band__bg img { object-position: var(--cd-focus-desktop, 50% 38%); }
  /* Màn rộng: khối cao dần theo bề ngang → ảnh ngang không bị phóng sát vào mặt */
  .countdown-band--photo { min-height: clamp(400px, 30vw, 560px); display: grid; align-content: center; }
}
.countdown-band--photo .countdown-band__bg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(var(--dark-rgb) / .76); }
.countdown-band .eyebrow { color: var(--champagne); margin-bottom: 1.5rem; }
.countdown { display: flex; justify-content: center; gap: clamp(.5rem, 2.5vw, 1rem); }
.countdown__cell {
  display: flex; flex-direction: column; align-items: center;
  width: clamp(68px, 19vw, 104px); padding: .95rem 0 .8rem;
  border: 1px solid rgba(230, 211, 187, .45); border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.countdown__value {
  font: 400 var(--fs-h1)/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Số vừa đổi trượt xuống nhẹ — như lịch lật */
.countdown__value.is-flip { animation: flip .35s cubic-bezier(.2, .7, .3, 1); }
@keyframes flip { from { transform: translateY(-40%); opacity: 0; } }
.countdown__label {
  margin-top: .5rem;
  font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(247, 244, 239, .7);
}
.countdown__when { margin: 1.75rem 0 0; letter-spacing: .12em; color: rgba(247, 244, 239, .9); }
.countdown__done { font: italic var(--fs-h3) var(--serif); margin: 0; }
@media (prefers-reduced-motion: reduce) { .countdown__value.is-flip { animation: none; } }