/* ==========================================================================
   css/invitation-mobile.css — Tinh chỉnh riêng cho điện thoại / máy tính bảng nhỏ
   --------------------------------------------------------------------------
   • Khung thiệp luôn khít màn hình (không lòi nền trang ra ngoài).
   • Cao độ lấy từ biến --app-height do js/components/viewport.js ghi lại
     ⇒ bàn phím ảo mở ra KHÔNG làm xô lệch bố cục.
   • Chữ, khoảng cách và các khối (countdown, bản đồ, album, form, lưu bút,
     hộp mừng cưới) được thu gọn để không tràn vào họa tiết của thiệp.
   ========================================================================== */

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    height: var(--app-height, 100svh);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--t-paper, #fbf6ee);
  }

  /* Cố định khung trang: bàn phím mở chỉ phủ lên trên, không co giãn nội dung. */
  body {
    position: fixed;
    inset: 0;
    height: var(--app-height, 100svh);
  }

  #wd-root {
    width: 100%;
    height: var(--app-height, 100svh);
    align-items: stretch;
    justify-content: stretch;
  }

  .inv {
    width: 100%;
    max-width: none;
    height: var(--app-height, 100svh);
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--t-paper, #fbf6ee);
  }

  .intro {
    inset: 0;
    width: 100%;
    max-width: none;
    height: var(--app-height, 100svh);
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .stage-bg__image,
  .intro__poster {
    background-size: 100% 100%;
    background-position: center;
  }

  .stage-bg__video {
    object-fit: fill;
  }

  .candle-stage {
    height: 100%;
    aspect-ratio: auto;
  }

  .candle-art,
  .candle-flowers {
    object-fit: fill;
  }

  .step {
    padding:
      calc(env(safe-area-inset-top, 0px) + 200px) 16px
      calc(env(safe-area-inset-bottom, 0px) + 64px);
  }

  .step-inner {
    max-height: 100%;
    padding-bottom: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* --------------------------- Theme G — Butterfly --------------------- */

  [data-theme='G'] .step {
    padding-left: clamp(20px, 7vw, 30px);
    padding-right: clamp(20px, 7vw, 30px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 46px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  }

  [data-theme='G'] .step-inner {
    max-width: min(100%, 306px);
    gap: 8px;
    transform: translateY(calc(var(--step-shift, 0%) * 0.55));
  }

  /* Nội dung vàng/nhãn nhỏ: tăng tương phản trên màn hình điện thoại */
  [data-theme='G'] .step-eyebrow,
  [data-theme='G'] .cover-eyebrow,
  [data-theme='G'] .cover-guest__label,
  [data-theme='G'] .family__label,
  [data-theme='G'] .msg-foot,
  [data-theme='G'] .gift-bank dt,
  [data-theme='G'] .countdown__box small {
    color: #825a2c;
  }

  /* Trang 1 */
  [data-theme='G'] .cover-name {
    font-size: clamp(29px, 8.8vw, 40px);
    line-height: 1.22;
  }

  [data-theme='G'] .cover-amp {
    font-size: clamp(17px, 5vw, 22px);
    margin: -4px 0;
  }

  [data-theme='G'] .cover-eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.24em;
  }

  [data-theme='G'] .cover-ceremony {
    font-size: clamp(12px, 3.7vw, 14.5px);
  }

  [data-theme='G'] .cover-date {
    font-size: clamp(11.5px, 3.4vw, 13.5px);
    letter-spacing: 0.13em;
  }

  [data-theme='G'] .cover-guest__name {
    font-size: clamp(14px, 4.2vw, 17px);
  }

  /* Trang 2 */
  [data-theme='G'] .step--message .step-inner {
    gap: 7px;
  }

  [data-theme='G'] .msg-title {
    font-size: clamp(17px, 5vw, 21px);
    letter-spacing: 0.09em;
  }

  [data-theme='G'] .msg-lead {
    font-size: clamp(12.5px, 3.6vw, 14px);
    line-height: 1.52;
  }

  [data-theme='G'] .msg-addr {
    font-size: clamp(11.5px, 3.3vw, 13px);
  }

  [data-theme='G'] .family__label {
    font-size: 9.5px;
  }

  [data-theme='G'] .family__names {
    font-size: clamp(11.5px, 3.3vw, 13px);
    line-height: 1.4;
  }

  [data-theme='G'] .msg-foot {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  /* Trang 3 — Ngày cưới */
  .lacy-date-arch-wrap {
    max-width: 196px;
    height: 160px;
  }

  .lacy-date-day-val {
    font-size: clamp(42px, 12.5vw, 50px);
  }

  .lacy-date-month-val {
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 7px;
  }

  .lacy-date-year-val {
    font-size: 13.5px;
  }

  .lacy-date-pills-row {
    max-width: 254px;
    gap: 9px;
  }

  .lacy-date-pill-item {
    height: 40px;
  }

  .lacy-pill-text {
    font-size: 11.5px;
  }

  .lacy-pill-text--time {
    font-size: 13px;
  }

  .lacy-cal-btn {
    min-height: 38px;
    padding: 6px 18px 5px;
    font-size: 10.5px;
  }

  [data-theme='G'] .date-lunar {
    font-size: 11.5px;
  }

  /* Countdown: khung gọn nhưng vẫn có viền kép + ngọc trai */
  [data-theme='G'] .countdown--arched {
    max-width: 300px;
    padding: 11px 7px 9px;
    border-radius: 18px 18px 14px 14px;
  }

  [data-theme='G'] .countdown--arched::before {
    inset: 4px;
    border-radius: 14px 14px 11px 11px;
  }

  [data-theme='G'] .countdown__val {
    font-size: 18px;
  }

  [data-theme='G'] .countdown__lbl {
    font-size: 7.5px;
    letter-spacing: 0.14em;
  }

  [data-theme='G'] .countdown__pearl {
    width: 3.5px;
    height: 3.5px;
    margin-top: 3px;
  }

  /* Trang 4 — Bản đồ */
  [data-theme='G'] .step--map .step-inner {
    max-width: min(100%, 306px);
    gap: 7px;
  }

  .lacy-map-arch-window {
    width: min(208px, 62vw);
    height: min(204px, 26.5dvh);
  }

  .lacy-map-plaque {
    max-width: 236px;
  }

  .lacy-map-plaque-title {
    font-size: 12.5px;
  }

  .lacy-map-addr {
    font-size: 11.5px;
    max-width: 250px;
  }

  .lacy-map-facts {
    max-width: 250px;
    gap: 6px;
  }

  .lacy-map-fact span {
    font-size: 8px;
  }

  .lacy-map-fact strong {
    font-size: 14px;
  }

  .lacy-map-actions {
    gap: 6px;
  }

  .lacy-map-actions .btn {
    min-height: 36px;
    padding: 0 13px;
    font-size: 10px;
  }

  .lacy-map-note {
    font-size: 10.5px;
  }

  /* Trang 5 — Album 2 hàng */
  .album-grid {
    gap: 5px;
  }

  .album-cell {
    border-radius: 8px;
  }

  .gallery-hint {
    font-size: 10px;
  }

  /* Trang 6 — Xác nhận tham dự: thu chữ + thu gọn form */
  [data-theme='G'] .step--rsvp .step-inner,
  [data-theme='G'] .step--wishes .step-inner,
  [data-theme='G'] .step--gift .step-inner {
    max-width: min(100%, 326px);
    padding: 0 0 8px 0;
    border-radius: 0;
    gap: 5px;
  }

  /* Chừa thêm khoảng trống đáy để khối nội dung không đè thanh điều hướng */
  [data-theme='G'] .step--rsvp {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
  }

  [data-theme='G'] .step--rsvp .form-transparent--rsvp {
    gap: 4px;
  }

  /* Không còn khung đóng hộp: bỏ dòng eyebrow để tiêu đề nằm gọn trong vòm thiệp */
  [data-theme='G'] .step--rsvp .step-head .step-eyebrow,
  [data-theme='G'] .step--wishes .step-head .step-eyebrow,
  [data-theme='G'] .step--gift .step-head .step-eyebrow {
    display: none;
  }

  [data-theme='G'] .rsvp-note {
    font-size: 11.5px;
    line-height: 1.45;
    max-width: 32ch;
  }

  [data-theme='G'] .step--rsvp .step-title,
  [data-theme='G'] .step--wishes .step-title,
  [data-theme='G'] .step--gift .step-title {
    font-size: clamp(16px, 4.6vw, 19px);
  }

  .form-transparent--rsvp {
    gap: 5px;
  }

  .form-transparent--rsvp .field > label,
  .form-transparent--rsvp .field > legend,
  .form-transparent--wishes .field > label {
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }

  .form-transparent--rsvp input,
  .form-transparent--rsvp select,
  .form-transparent--rsvp textarea,
  .form-transparent--wishes input,
  .form-transparent--wishes textarea {
    min-height: 34px;
    font-size: 16px; /* giữ 16px để iOS không tự phóng to khi focus */
    padding: 4px 2px;
  }

  .form-transparent--wishes textarea {
    min-height: 48px;
  }

  .attend-option {
    min-height: 33px;
    padding: 5px 9px;
    font-size: 12px;
  }

  .btn--cta {
    min-height: 42px;
    padding: 0 20px;
    font-size: 11px;
    width: 100%;
    max-width: 250px;
  }

  .form-status {
    font-size: 11px;
    margin-top: 2px;
  }

  /* Trang 7 — Sổ lưu bút */
  .wish-tags {
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    left: 6px;
    width: min(54%, 190px);
  }

  .wish-tag {
    padding: 6px 9px 5px;
  }

  .wish-tag__name {
    font-size: 9.5px;
  }

  .wish-tag__msg {
    font-size: 10px;
  }

  .wishes-photo img {
    height: clamp(72px, 13dvh, 108px);
  }

  .wishes-photo figcaption {
    font-size: 8.5px;
    padding-top: 12px;
  }

  /* Trang 8 — Hộp mừng cưới */
  [data-theme='G'] .gift-bank {
    padding: 1px 9px;
    border-radius: 12px;
  }

  [data-theme='G'] .gift-bank > div {
    padding: 6px 0;
  }

  [data-theme='G'] .gift-bank dt {
    font-size: 9px;
  }

  [data-theme='G'] .gift-bank dd {
    font-size: 13.5px;
  }

  [data-theme='G'] .gift-bank__acc {
    font-size: 14px;
  }

  .gift-seal {
    width: 76px;
    height: 76px;
  }

  .gift-seal__monogram {
    font-size: 19px;
  }

  .gift-quote {
    font-size: 11.5px;
  }

  .gift-qr img {
    width: min(148px, 40vw);
  }

  /* Điều hướng dưới đáy */
  .stage-nav--butterfly {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .stage-scroll-down-btn {
    height: 36px;
    padding: 0 18px;
  }

  .scroll-down-text {
    font-size: 10.5px;
  }

  .stage-music-btn {
    width: 36px;
    height: 36px;
    right: 14px;
  }

  .music-fab {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 10px;
  }

  /* Nền Roselie đã có vòm lá ở đỉnh và chỉ cần ~6% lề trên ⇒ hạ padding-top
     200px xuống để nội dung không bị đẩy thấp về đáy màn hình. */
  [data-theme='E'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 108px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  }

  /* Trang Hộp mừng cưới giữ padding riêng (thấp hơn) — khai báo SAU rule trên
     để không bị rule chung của loại E ghi đè. */
  [data-theme='E'] .step--gift {
    padding: calc(env(safe-area-inset-top, 0px) + 40px) 16px
      calc(env(safe-area-inset-bottom, 0px) + 64px);
  }

  /* Loại F: nền ren Serene có vòm ở ~6% ⇒ hạ padding-top để nội dung không
     bị dồn xuống đáy màn hình. */
  [data-theme='F'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 60px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  }
  [data-theme='F'] .serene-panel--date {
    width: min(270px, 100%) !important;
  }
  [data-theme='F'] .step-inner {
        max-height: 100%;
        padding-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        width: min(290px, 100%);
  }
  [data-theme='F'] .serene-panel {
    position: relative;
    width: min(260px, 95%);
    margin: 0 auto;
    aspect-ratio: var(--serene-ratio, 871 / 1411);
  }
}

/* -------------------------- Điện thoại rất hẹp --------------------------- */

@media (max-width: 360px) {
  .step {
    padding-left: 12px;
    padding-right: 12px;
  }

  [data-theme='G'] .step {
    padding-left: 16px;
    padding-right: 16px;
  }

  [data-theme='G'] .step-inner {
    max-width: 100%;
  }

  [data-theme='G'] .cover-name {
    font-size: 28px;
  }

  [data-theme='G'] .step--rsvp .step-inner,
  [data-theme='G'] .step--wishes .step-inner,
  [data-theme='G'] .step--gift .step-inner {
    padding: 0;
  }

  .lacy-map-arch-window {
    width: 188px;
    height: 190px;
  }

  .lacy-map-actions .btn {
    padding: 0 11px;
    font-size: 9.5px;
  }

  .album-grid {
    gap: 4px;
  }
}

/* ---------------------- Màn hình thấp / nằm ngang ------------------------- */

@media (max-width: 767px) and (max-height: 700px) {
  [data-theme='G'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 38px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
  }

  /* Loại E: màn thấp vẫn giữ nội dung trong vòm lá và trên thanh điều hướng */
  [data-theme='E'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 86px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  }

  [data-theme='E'] .step-inner {
    gap: 5px;
  }

  [data-theme='E'] .step--wishes .step-note,
  [data-theme='E'] .step--rsvp .rsvp-note {
    display: none;
  }

  [data-theme='E'] .wishes-photo,
  [data-theme='E'] .wishes-footer-photo {
    height: 112px;
  }

  /* Rule chung phía trên thu ảnh còn 74px ⇒ trả về full chiều cao khung. */
  [data-theme='E'] .wishes-photo img,
  [data-theme='E'] .wishes-footer-photo img {
    height: 100%;
  }

  [data-theme='E'] .step--gallery .gallery-quote {
    display: none;
  }

  [data-theme='E'] .step--date .countdown.countdown--arched {
    margin-top: 4px;
  }

  [data-theme='E'] .step--wishes .form-transparent textarea {
    min-height: 40px;
  }

  [data-theme='F'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 80px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  }

  [data-theme='F'] .step-inner {
    gap: 5px;
  }

  .step--map .step-inner {
    gap: 6px;
  }

  .map-plate--framed {
    max-width: 242px;
  }

  .lacy-map-facts {
    margin-top: 2px;
  }

  .lacy-map-actions {
    margin-top: 2px;
  }

  [data-theme='G'] .step--rsvp .step-inner,
  [data-theme='G'] .step--wishes .step-inner,
  [data-theme='G'] .step--gift .step-inner {
    max-height: 100%;
    overflow-y: auto;
  }

  .lacy-date-arch-wrap {
    height: 146px;
  }

  .lacy-map-arch-window {
    height: min(182px, 25dvh);
  }

  [data-theme='G'] .countdown__val {
    font-size: 16.5px;
  }

  .wishes-photo img {
    height: 74px;
  }
}

/* Loại E — máy rất thấp (≤640px): nén thêm để không phát sinh cuộn nội bộ */
@media (max-width: 767px) and (max-height: 640px) {
  [data-theme='E'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  }

  [data-theme='E'] .step-inner {
    gap: 4px;
  }

  [data-theme='E'] .step-title {
    font-size: 17px;
  }

  [data-theme='E'] .step-eyebrow {
    font-size: 8.5px;
    letter-spacing: 0.16em;
  }

  [data-theme='E'] .step--rsvp .form-transparent {
    gap: 4px;
  }

  [data-theme='E'] .step--rsvp .form-transparent input,
  [data-theme='E'] .step--rsvp .form-transparent select,
  [data-theme='E'] .step--rsvp .form-transparent textarea,
  [data-theme='E'] .step--wishes .form-transparent input,
  [data-theme='E'] .step--wishes .form-transparent textarea {
    min-height: 32px;
    font-size: 13.5px;
  }

  [data-theme='E'] .step--rsvp .form-transparent .field > label,
  [data-theme='E'] .step--rsvp .form-transparent .field > legend,
  [data-theme='E'] .step--wishes .form-transparent .field > label {
    font-size: 9px;
  }

  [data-theme='E'] .step--rsvp .choice--text {
    min-height: 27px;
    font-size: 12.5px;
  }

  [data-theme='E'] .step--rsvp .form-action .btn,
  [data-theme='E'] .step--wishes .form-action .btn {
    min-height: 36px;
  }

  [data-theme='E'] .wishes-photo,
  [data-theme='E'] .wishes-footer-photo {
    height: 96px;
  }

  [data-theme='E'] .step--map .map-plate {
    max-width: 214px;
  }
}

/* Loại E — máy cực thấp (≤600px): đủ chỗ cho form RSVP dài nhất */
@media (max-width: 767px) and (max-height: 600px) {
  [data-theme='E'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 68px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  }

  [data-theme='E'] .step--rsvp .step-inner,
  [data-theme='E'] .step--rsvp .form-transparent {
    gap: 3px;
  }

  [data-theme='F'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 58px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  }

  [data-theme='F'] .step--rsvp .form-transparent,
  [data-theme='F'] .step--wishes .form-transparent {
    gap: 3px;
  }

  [data-theme='F'] .step--rsvp .attend-options,
  [data-theme='F'] .step--rsvp .choice--text {
    min-height: 26px;
    font-size: 12.5px;
  }
}

@media (max-width: 767px) and (max-height: 600px) {
  .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 32px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  }

  .wishes-scroll {
    height: 92px;
    max-height: none;
  }

  [data-theme='G'] .step-inner {
    gap: 5px;
  }

  [data-theme='G'] .step-head {
    gap: 1px;
  }

  .lacy-date-pills-row,
  [data-theme='G'] .date-actions {
    display: none;
  }

  .lacy-map-facts {
    display: none;
  }

  .wish-tags {
    display: none;
  }

  .wishes-photo {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 767px) and (max-height: 520px) {
  [data-theme='G'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 54px);
  }

  [data-theme='G'] .step-inner {
    max-width: min(100%, 560px);
    gap: 4px;
  }

  [data-theme='G'] .step--rsvp .step-inner,
  [data-theme='G'] .step--wishes .step-inner,
  [data-theme='G'] .step--gift .step-inner {
    max-width: min(100%, 620px);
    padding: 0;
  }

  [data-theme='G'] .cover-name {
    font-size: 30px;
  }

  [data-theme='G'] .countdown--arched {
    max-width: 330px;
  }

  /* Album: 2 hàng ảnh ngang để vừa khung landscape, bỏ phần trích dẫn dài */
  .album-cell {
    aspect-ratio: 4 / 3;
  }

  .gallery-quote,
  .step--gallery .star-divider,
  .step--gallery .gallery-hint {
    display: none;
  }

  /* Form RSVP chia 2 cột để không phải cuộn */
  .form-transparent--rsvp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 4px;
  }

  .form-transparent--rsvp > .field,
  .form-transparent--rsvp > .field--choice,
  .form-transparent--rsvp > .field-row,
  .form-transparent--rsvp > .form-action,
  .form-transparent--rsvp > .form-status {
    grid-column: 1 / -1;
  }

  .form-transparent--rsvp > .field:nth-of-type(1),
  .form-transparent--rsvp > .field:nth-of-type(2) {
    grid-column: span 1;
  }

  .form-transparent--rsvp .attend-options {
    grid-template-columns: 1fr 1fr;
  }

  .form-transparent--rsvp .form-action {
    margin-top: 0;
  }

  .form-transparent--rsvp .field > label,
  .form-transparent--rsvp .field > legend {
    font-size: 8.5px;
  }

  .form-transparent--rsvp input,
  .form-transparent--rsvp select {
    min-height: 28px;
    font-size: 15px;
  }

  .attend-option {
    min-height: 28px;
    font-size: 11px;
  }

  /* Ẩn bớt phần dẫn nhập để toàn bộ form vừa 1 màn landscape */
  .rsvp-note,
  [data-theme='G'] .step--rsvp .step-head .step-eyebrow {
    display: none;
  }

  [data-theme='G'] .step--rsvp .step-title {
    font-size: 18px;
  }

  [data-theme='G'] .step--rsvp .step-rule {
    width: 44px;
    margin-top: 2px;
  }

  .form-transparent--rsvp .form-status {
    min-height: 12px;
    margin-top: 0;
  }

  .btn.btn--cta {
    min-height: 36px;
  }
}

/* Theme G — sau khi bỏ khung đóng hộp, chừa khoảng trống trên để tiêu đề các trang
   6/7/8 không bị hoa văn vòm thiệp che mất (chỉ áp dụng khi xoay dọc). */
@media (max-width: 767px) and (orientation: portrait) {
  [data-theme='G'] .step--rsvp,
  [data-theme='G'] .step--wishes,
  [data-theme='G'] .step--gift {
    justify-content: flex-start;
    padding-top: calc(env(safe-area-inset-top, 0px) + 96px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
  }
}

/* Form RSVP là form dài nhất ⇒ nén để nằm trọn giữa vòm thiệp và thanh điều hướng */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 700px) {
  [data-theme='G'] .step--rsvp .form-transparent--rsvp {
    gap: 3px;
  }

  [data-theme='G'] .step--rsvp .form-transparent--rsvp .field > label,
  [data-theme='G'] .step--rsvp .form-transparent--rsvp .field > legend {
    margin-bottom: 0;
  }

  [data-theme='G'] .step--rsvp .form-transparent--rsvp input,
  [data-theme='G'] .step--rsvp .form-transparent--rsvp select,
  [data-theme='G'] .step--rsvp .form-transparent--rsvp textarea {
    min-height: 30px;
    padding: 3px 10px;
  }

  [data-theme='G'] .step--rsvp .attend-option {
    min-height: 30px;
    padding: 3px 10px;
    font-size: 12.5px;
  }

  [data-theme='G'] .step--rsvp .form-status {
    min-height: 10px;
  }
}

/* Theme G — máy rất thấp (≤600px): nén thêm để khối nội dung vẫn vừa 1 màn */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 600px) {
  [data-theme='G'] .step--rsvp,
  [data-theme='G'] .step--wishes,
  [data-theme='G'] .step--gift {
    padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  }

  /* Màn hình thấp: bỏ dòng dẫn nhập để khối nội dung vẫn nằm trong vòm thiệp */
  [data-theme='G'] .step--gift .gift-note {
    display: none;
  }
}

/* ==========================================================================
   Theme H (Lora) — Tinh chỉnh riêng cho màn hình di động
   ========================================================================== */

@media (max-width: 767px) {
  .intro--theme-H .intro__monogram--lora {
    width: clamp(118px, 37vw, 158px);
  }

  .intro--theme-H .intro__luxury-btn {
    top: 76%;
  }

  [data-theme='H'] .step {
    padding:
      calc(env(safe-area-inset-top, 0px) + 70px) 18px
      calc(env(safe-area-inset-bottom, 0px) + 72px);
  }

  [data-theme='H'] .step-inner {
    max-width: 92%;
    padding-bottom: 4px;
  }

  [data-theme='H'] .step--cover .step-inner {
    --step-shift: -3.5%;
  }

  [data-theme='H'] .step--message .step-inner,
  [data-theme='H'] .step--gallery .step-inner {
    --step-shift: -2.5%;
  }

  [data-theme='H'] .step--date .step-inner {
    --step-shift: -1.5%;
  }

  [data-theme='H'] .step--map .step-inner,
  [data-theme='H'] .step--rsvp .step-inner,
  [data-theme='H'] .step--wishes .step-inner {
    --step-shift: -2%;
  }

  [data-theme='H'] .lora-date-cartouche {
    width: clamp(98px, 27vw, 114px);
  }

  [data-theme='H'] .lora-date-plaque {
    width: clamp(160px, 46vw, 188px);
  }

  [data-theme='H'] .lora-map-plate {
    width: clamp(198px, 58vw, 240px);
  }

  [data-theme='H'] .lora-map-actions .btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 10.5px;
  }

  [data-theme='H'] .step--rsvp .form-transparent--rsvp {
    gap: 5px;
  }

  [data-theme='H'] .step--rsvp .form-transparent--rsvp input,
  [data-theme='H'] .step--rsvp .form-transparent--rsvp select,
  [data-theme='H'] .step--rsvp .form-transparent--rsvp textarea {
    min-height: 32px;
    padding: 4px 9px;
    font-size: 14px;
  }

  [data-theme='H'] .step--wishes .lora-ticker {
    max-width: 100%;
    height: 30px;
  }
}

@media (max-width: 360px) {
  [data-theme='H'] .step {
    padding-left: 14px;
    padding-right: 14px;
  }

  [data-theme='H'] .lora-date-cartouche {
    width: 108px;
  }

  [data-theme='H'] .lora-date-plaque {
    width: 164px;
  }

  [data-theme='H'] .lora-map-plate {
    width: 184px;
  }

  [data-theme='H'] .lora-map-actions .btn {
    padding: 0 11px;
    font-size: 10px;
  }
}

@media (max-width: 767px) and (orientation: portrait) and (max-height: 700px) {
  [data-theme='H'] .step--date .step-head,
  [data-theme='H'] .step--map .step-head {
    gap: 1px;
  }

  [data-theme='H'] .lora-date-cartouche {
    width: 104px;
  }

  [data-theme='H'] .lora-date-plaque {
    width: 160px;
  }

  [data-theme='H'] .lora-countdown {
    padding: 7px 6px 5px;
  }

  [data-theme='H'] .lora-map-plate {
    width: 180px;
  }

  [data-theme='H'] .step--rsvp .form-transparent--rsvp {
    gap: 3px;
  }

  [data-theme='H'] .step--rsvp .form-transparent--rsvp input,
  [data-theme='H'] .step--rsvp .form-transparent--rsvp select,
  [data-theme='H'] .step--rsvp .form-transparent--rsvp textarea {
    min-height: 29px;
    padding: 3px 8px;
  }

  [data-theme='H'] .step--wishes .wishes-photo,
  [data-theme='H'] .step--wishes .wishes-footer-photo {
    height: 88px;
  }
}

/* ------------------ Theme I (Bohem), J (Swan Lake), K (Lacy Deluxe) — Mobile ------------------ */
@media (max-width: 767px) {
  /* Theme I — Bohem */
  [data-theme='I'] .step {
    padding:
      calc(env(safe-area-inset-top, 0px) + 60px) 18px
      calc(env(safe-area-inset-bottom, 0px) + 66px);
  }

  [data-theme='I'] .step-inner {
    max-width: 90%;
    gap: 6px;
    padding-bottom: 4px;
    --step-shift: -3%;
  }

  [data-theme='I'] .step--cover .step-inner {
    --step-shift: -4.5%;
  }

  [data-theme='I'] .step--rsvp .form-transparent--rsvp,
  [data-theme='I'] .step--wishes .form-transparent--wishes {
    gap: 5px;
  }

  [data-theme='I'] .form-transparent input[type='text'],
  [data-theme='I'] .form-transparent input[type='tel'],
  [data-theme='I'] .form-transparent select,
  [data-theme='I'] .form-transparent textarea {
    min-height: 32px;
    padding: 4px 9px;
    font-size: 14px;
  }

  [data-theme='I'] .step--wishes .bohem-ticker {
    max-width: 100%;
    height: 30px;
  }

  [data-theme='I'] .step--wishes .wishes-photo {
    height: clamp(82px, 13.5dvh, 114px);
  }

  /* Theme J — Swan Lake */
  [data-theme='J'] .step {
    padding:
      calc(env(safe-area-inset-top, 0px) + 54px) 18px
      calc(env(safe-area-inset-bottom, 0px) + 68px);
  }

  [data-theme='J'] .step-inner {
    max-width: 90%;
    gap: 6px;
    padding-bottom: 4px;
    --step-shift: -5.5%;
  }

  [data-theme='J'] .step--cover .step-inner {
    --step-shift: -6.5%;
  }

  [data-theme='J'] .step--rsvp .form-transparent--rsvp,
  [data-theme='J'] .step--wishes .form-transparent--wishes {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    gap: 5px;
  }

  [data-theme='J'] .form-transparent input,
  [data-theme='J'] .form-transparent select,
  [data-theme='J'] .form-transparent textarea {
    min-height: 32px;
    padding: 4px 9px;
    font-size: 14px;
  }

  [data-theme='J'] .step--wishes .swan-ticker {
    max-width: 100%;
    height: 30px;
  }

  [data-theme='J'] .step--wishes .wishes-photo {
    height: clamp(80px, 13dvh, 112px);
  }

  /* Theme K — Lacy Deluxe */
  [data-theme='K'] .step {
    padding:
      calc(env(safe-area-inset-top, 0px) + 64px) 18px
      calc(env(safe-area-inset-bottom, 0px) + 66px);
  }

  [data-theme='K'] .step-inner {
    max-width: 90%;
    gap: 6px;
    padding-bottom: 4px;
    --step-shift: -2%;
  }

  [data-theme='K'] .step--date .step-inner {
    gap: 5px;
    --step-shift: -2.5%;
  }

  [data-theme='K'] .lacy-k-date-frames {
    gap: 6px;
  }

  [data-theme='K'] .lacy-k-main-card {
    width: clamp(104px, 30vw, 122px);
  }

  [data-theme='K'] .lacy-k-sub-card {
    width: clamp(80px, 23.5vw, 94px);
  }

  [data-theme='K'] .step--rsvp .form-transparent--rsvp,
  [data-theme='K'] .step--wishes .form-transparent--wishes {
    gap: 5px;
  }

  [data-theme='K'] .form-transparent input,
  [data-theme='K'] .form-transparent select,
  [data-theme='K'] .form-transparent textarea {
    min-height: 32px;
    padding: 4px 9px;
    font-size: 14px;
  }

  [data-theme='K'] .step--wishes .lacy-ticker {
    max-width: 100%;
    height: 30px;
  }

  [data-theme='K'] .step--wishes .wishes-photo {
    height: clamp(82px, 13.5dvh, 114px);
  }
}

@media (max-width: 360px) {
  [data-theme='I'] .step,
  [data-theme='J'] .step,
  [data-theme='K'] .step {
    padding-left: 14px;
    padding-right: 14px;
  }

  [data-theme='K'] .lacy-k-date-frames {
    gap: 4px;
  }

  [data-theme='K'] .lacy-k-main-card {
    width: 98px;
  }

  [data-theme='K'] .lacy-k-day {
    font-size: 26px;
  }

  [data-theme='K'] .lacy-k-sub-card {
    width: 76px;
  }

  [data-theme='K'] .lacy-k-sub-card__text.date-weekday {
    font-size: 8.5px;
  }

  [data-theme='K'] .lacy-k-sub-card__text.date-time {
    font-size: 12.5px;
  }
}

@media (max-width: 767px) and (orientation: portrait) and (max-height: 700px) {
  [data-theme='I'] .step,
  [data-theme='J'] .step,
  [data-theme='K'] .step {
    padding-top: calc(env(safe-area-inset-top, 0px) + 46px);
  }

  [data-theme='K'] .lacy-k-main-card {
    width: 96px;
  }

  [data-theme='K'] .lacy-k-sub-card {
    width: 74px;
  }

  [data-theme='I'] .step--rsvp .form-transparent input,
  [data-theme='I'] .step--rsvp .form-transparent select,
  [data-theme='I'] .step--rsvp .form-transparent textarea,
  [data-theme='J'] .step--rsvp .form-transparent input,
  [data-theme='J'] .step--rsvp .form-transparent select,
  [data-theme='J'] .step--rsvp .form-transparent textarea,
  [data-theme='K'] .step--rsvp .form-transparent input,
  [data-theme='K'] .step--rsvp .form-transparent select,
  [data-theme='K'] .step--rsvp .form-transparent textarea {
    min-height: 29px;
    padding: 3px 8px;
  }

  [data-theme='I'] .step--wishes .wishes-photo,
  [data-theme='J'] .step--wishes .wishes-photo,
  [data-theme='K'] .step--wishes .wishes-photo {
    height: 78px;
  }
}