/* Event Online V10.1 – countdown immediately below the invitation heading, four equal actions. */
/* Position countdown as a compact, readable accent beneath “Thư Mời”. */
body.design-v5 .invitation .invite-upper { margin-bottom: 3px; }
body.design-v5 .invitation .event-countdown {
  width: min(100%, 540px);
  margin: 5px auto 20px;
  padding: 12px 14px 13px;
  border-radius: 17px;
  box-sizing: border-box;
}
body.design-v5 .invitation .countdown-kicker {
  font-size: 10px;
  margin-bottom: 9px;
  letter-spacing: .07em;
}
body.design-v5 .invitation .countdown-units { gap: 8px; }
body.design-v5 .invitation .countdown-unit {
  min-height: 62px;
  border-radius: 11px;
  padding: 6px 3px;
}
body.design-v5 .invitation .countdown-unit strong { font-size: clamp(19px, 3vw, 27px); }
body.design-v5 .invitation .countdown-unit span { font-size: 9px; }

/* Four controls in one evenly-spaced row on medium and large layouts. */
body.design-v5 .invitation .card-actions,
body.design-v5 .invitation[data-layout=editorial] .card-actions,
body.design-v5 .invitation[data-layout=asym] .card-actions,
body.design-v5 .invitation[data-layout=split] .card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  column-gap: 8px;
  row-gap: 8px;
  margin: 24px auto 0;
  padding-top: 12px;
  justify-content: stretch;
  align-items: stretch;
}
body.design-v5 .invitation .card-actions:has(.map-action[hidden]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.design-v5 .invitation .card-actions .action-button,
body.design-v5 .invitation .card-actions .guests-action {
  display: inline-flex;
  grid-column: auto;
  min-width: 0;
  min-height: 51px;
  padding: 8px 7px;
  font-size: clamp(9px, 1.2vw, 11px);
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  flex-basis: auto !important;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
}
body.design-v5 .invitation .card-actions .action-button[hidden] { display: none !important; }
body.design-v5 .invitation .card-actions .action-button span { flex-shrink: 0; }

/* iPad and phones: comfortable 2×2 rather than three rows or an oversized guest button. */
@media (max-width: 690px) {
  body.design-v5 .invitation .event-countdown { margin: 5px auto 17px; padding: 11px 10px; border-radius: 14px; }
  body.design-v5 .invitation .countdown-units { gap: 5px; }
  body.design-v5 .invitation .countdown-unit { min-height: 59px; padding: 7px 2px; }
  body.design-v5 .invitation .countdown-unit strong { font-size: clamp(20px, 5vw, 25px); }
  body.design-v5 .invitation .countdown-unit span { font-size: 8px; }
  body.design-v5 .invitation .card-actions,
  body.design-v5 .invitation .card-actions:has(.map-action[hidden]) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  body.design-v5 .invitation .card-actions .action-button,
  body.design-v5 .invitation .card-actions .guests-action {
    min-height: 49px;
    padding: 9px 6px;
    font-size: 10px;
    gap: 5px;
  }
}
@media (max-width: 345px) {
  body.design-v5 .invitation .card-actions,
  body.design-v5 .invitation .card-actions:has(.map-action[hidden]) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  body.design-v5 .invitation .card-actions .action-button,
  body.design-v5 .invitation .card-actions .guests-action { font-size:9px; padding: 8px 5px; min-height:52px; }
}