/* ==========================================================================
   Typography — thiệp-4, bê nguyên font + size từ thiệp-1 theo từng khối.
   Giá trị px đo từ thiệp-1: mobile (390px) làm mặc định, desktop ở >= 768px.
   Loaded last → ghi đè theme-match + responsive.
   ========================================================================== */

:root {
  --t-cormorant: "Cormorant Garamond", Georgia, serif;
  --t-playfair: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --t-lora: "Lora", "Segoe UI", Arial, serif;
  --t-sans: "Montserrat", "Segoe UI", Arial, sans-serif;
}

html[lang="zh"],
body.lang-zh {
  --t-cormorant: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --t-playfair: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --t-lora: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --t-sans: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  font-family: var(--t-cormorant);
  font-size: 16px;
  line-height: 1.45;
}

/* —— Cover (↔ thiệp-1 envelope) —— */
.cover-names .c-name {
  font-family: var(--font-script);
  font-size: 29.6px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.16;
  -webkit-text-stroke: 0;
}

.cover-names .c-amp {
  font-family: var(--font-script);
  font-size: 22.4px;
  font-weight: 400;
  -webkit-text-stroke: 0;
}

.cover-sub-title {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 700;
  letter-spacing: 0.25em;
}

.cover-date {
  font-family: var(--t-cormorant);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.cover-invite-label,
.cover-guest-prefix,
.cover-guest-name {
  font-family: var(--t-cormorant);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03em;
}

.cover-guest-name {
  font-weight: 600;
}

.btn-cover-open {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* —— Intro / SAVE THE DATE (↔ hero) —— */
.card-heading-title.card-intro-heading,
.card-intro-label {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 700;
  letter-spacing: 0.25em;
}

.card1-script-names,
.card1-script-names .groom-short-name,
.card1-script-names .bride-short-name {
  font-family: var(--font-script);
  font-size: 37.6px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.18;
  -webkit-text-stroke: 0;
}

.card1-script-names .amp {
  font-family: var(--font-script);
  font-size: 25.6px;
  font-weight: 400;
}

.intro-guest-prefix,
.intro-guest-name {
  font-family: var(--t-cormorant);
  font-size: 18.4px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
}

.intro-couple-message {
  font-family: var(--t-cormorant);
  font-size: 18.4px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* Tiếng Trung: Noto Serif SC nhìn to hơn cùng px → giảm rõ so với VI/EN */
html[lang="zh"] .intro-couple-message,
body.lang-zh .intro-couple-message {
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

/* —— Nhà trai / nhà gái (↔ ceremony-note / role-badge / groom-name) —— */
.couple-side-family {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.couple-side-role {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.couple-side-name {
  font-family: var(--font-script);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  -webkit-text-stroke: 0;
}

/* —— Tiêu đề khối —— */
.card-heading-title,
.reception-lead-c2 {
  font-family: var(--t-cormorant);
  font-size: 18.4px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.gallery-block-c2 .card-heading-title {
  font-size: 17.92px;
  letter-spacing: 0.08em;
}

.venue-bottom-c2 .card-heading-title,
.countdown-block-c3 .card-heading-title,
.guestbook-block-c3 .card-heading-title,
.gift-block-c3 .card-heading-title {
  letter-spacing: 0.08em;
}

.venue-bottom-c2 .card-heading-title {
  font-size: 20px;
}

.guestbook-block-c3 .card-heading-title {
  font-size: 20px;
}

.gift-block-c3 .card-heading-title {
  font-size: 21.12px;
}

/* —— Thông tin lễ cưới (↔ red-card) —— */
.parents-col small {
  font-family: var(--t-cormorant);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.parents-col h4 {
  font-family: var(--t-playfair);
  font-size: 15.04px;
  font-weight: 600;
  line-height: 1.5;
}

.parents-col p {
  font-family: var(--t-cormorant);
  font-size: 12.8px;
  font-weight: 400;
  line-height: 1.35;
}

.announcement-c1 {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.55;
  white-space: normal;
}

.couple-person .full-name {
  font-family: var(--font-script);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  -webkit-text-stroke: 0;
}

.couple-person .role-badge {
  font-family: var(--t-cormorant);
  font-size: 11.84px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.couple-names-c1 .amp-symbol {
  font-family: var(--font-script);
  font-size: 21.6px;
  font-weight: 400;
}

.ceremony-intro-lbl,
.ceremony-loc-lbl {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.ceremony-at-lbl,
.ceremony-time-c1,
.ceremony-date-bar,
.ceremony-year-lbl {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ceremony-date-bar .big-day {
  font-family: var(--t-playfair);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.ceremony-lunar-c1 {
  font-family: var(--t-cormorant);
  font-size: 13.76px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

.card1-welcome-footer {
  font-family: var(--t-cormorant);
  font-size: 14.4px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

/* —— Thông tin tiệc cưới (↔ reception-card) —— */
.reception-big-time-c2 {
  font-family: var(--t-playfair);
  font-size: 13.44px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.info-white-panel--reception .ceremony-date-bar,
.info-white-panel--reception .ceremony-year-lbl {
  font-family: var(--t-cormorant);
  font-size: 12.48px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.info-white-panel--reception .ceremony-date-bar .big-day {
  font-family: var(--t-playfair);
  font-size: 46.4px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.reception-lunar-c2 {
  font-family: var(--t-playfair);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
}

.time-col-c2 small {
  font-family: var(--t-cormorant);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.time-col-c2 strong {
  font-family: var(--t-playfair);
  font-size: 20px;
  font-weight: 600;
}

.cal-title {
  font-family: var(--t-playfair);
  font-size: 21.6px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

.cal-weekdays-row,
.cal-weekdays-row span {
  font-family: var(--t-sans);
  font-size: 10.88px;
  font-weight: 600;
}

.cal-days-grid,
.cal-days-grid span {
  font-family: var(--t-playfair);
  font-size: 12px;
  font-weight: 400;
}

.cal-days-grid .wedding-day {
  font-weight: 700;
}

.btn-pill-calendar {
  font-family: var(--t-cormorant);
  font-size: 12.8px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.btn-pill-rsvp {
  font-family: var(--t-cormorant);
  font-size: 12.48px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* —— Địa điểm (↔ venue-card) —— */
.venue-name-c2,
.venue-bottom-name {
  font-family: var(--t-playfair);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

.venue-addr-c2,
.venue-bottom-addr {
  font-family: var(--t-cormorant);
  font-size: 14.72px;
  font-weight: 500;
}

.map-direction-btn-c2 {
  font-family: var(--t-playfair);
  font-size: 14.4px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* —— Dress code —— */
.dresscode-note {
  font-family: var(--t-cormorant);
  font-size: 15.36px;
  font-weight: 400;
  font-style: italic;
}

.dresscode-subnote {
  font-family: var(--t-cormorant);
  font-size: 13.6px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.dresscode-item .color-name {
  font-family: var(--t-cormorant);
  font-size: 11.52px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* —— Timeline —— */
.tl-time {
  font-family: var(--t-playfair);
  font-size: 16.32px;
  font-weight: 500;
}

.tl-text {
  font-family: var(--t-cormorant);
  font-size: 16.64px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* —— Countdown —— */
.countdown-box-c3 .cd-num {
  font-family: var(--t-playfair);
  font-size: 28.8px;
  font-weight: 700;
}

.countdown-box-c3 .cd-lbl {
  font-family: var(--t-cormorant);
  font-size: 11.52px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* —— Sổ lưu bút —— */
.guestbook-input-c3,
.guestbook-textarea-c3 {
  font-family: var(--t-lora);
  font-size: 16px;
}

.btn-submit-wish-c3 {
  font-family: var(--t-cormorant);
  font-size: 12.8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.wish-header-c3 .wish-author {
  font-family: var(--t-cormorant);
  font-size: 15.2px;
  font-weight: 700;
}

.wish-header-c3 .wish-time {
  font-family: var(--t-playfair);
  font-size: 11.84px;
  font-weight: 400;
}

.wish-item-c3 .wish-msg {
  font-family: var(--t-cormorant);
  font-size: 14.72px;
  font-weight: 500;
  line-height: 1.5;
}

/* —— Hộp quà —— */
.gift-thankyou-note {
  font-family: var(--t-cormorant);
  font-size: 18.56px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
}

.brand-footer-text {
  font-family: var(--t-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.thumb-with-more .thumb-overlay-more {
  font-family: var(--t-playfair);
  font-size: 20px;
}

/* —— Modal quà / RSVP / gợi ý lời chúc —— */
.gift-modal-title {
  font-family: var(--t-cormorant);
  font-size: 16.8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.gift-person-title {
  font-family: var(--t-cormorant);
  font-size: 16px;
  font-weight: 400;
}

.gift-bank-name {
  font-family: var(--t-cormorant);
  font-size: 12.16px;
  font-weight: 600;
}

.gift-bank-number {
  font-family: var(--t-lora);
  font-size: 14.4px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.gift-bank-owner {
  font-family: var(--t-cormorant);
  font-size: 11.84px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.btn-copy-acc,
.btn-save-qr {
  font-family: var(--t-cormorant);
  font-size: 11.68px;
  font-weight: 600;
}

.rsvp-modal-title,
.wish-modal-header h3 {
  font-family: var(--t-cormorant);
  font-size: 24.8px !important;
  font-weight: 700;
}

.rsvp-modal-subtitle,
.wish-modal-subtitle,
.wish-suggestion-item,
.rsvp-field-group label,
.rsvp-radio-label,
.rsvp-option-label {
  font-family: var(--t-cormorant);
  font-size: 15.68px;
  font-weight: 400;
}

.rsvp-field-group input.rsvp-input,
.rsvp-field-group textarea.rsvp-textarea,
.rsvp-field-group select.rsvp-select,
#rsvp-modal-form .rsvp-input,
#rsvp-modal-form .rsvp-select,
#rsvp-modal-form .rsvp-textarea {
  font-family: var(--t-sans) !important;
  font-size: 16px !important; /* giữ ≥16px để Safari iOS không auto-zoom */
}

#rsvp-modal-form .rsvp-input::placeholder,
#rsvp-modal-form .rsvp-textarea::placeholder {
  font-size: 16px !important;
  color: #b89aa0;
  opacity: 1;
}

/* Không dùng transform:scale — làm các ô co lệch so với radio/nút full-width */

/* —— Nút ngôn ngữ —— */
.lang-trigger-btn,
.lang-btn {
  font-family: var(--t-cormorant);
  font-size: 10.88px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* —— Viết hoa / thường theo thiệp-1 —— */
.announcement-c1,
.couple-person .role-badge,
.ceremony-intro-lbl,
.ceremony-loc-lbl,
.reception-lunar-c2,
.countdown-box-c3 .cd-lbl,
.dresscode-subnote {
  text-transform: uppercase;
}

.couple-person .full-name,
.rsvp-modal-title,
.gift-person-title,
.btn-pill-calendar,
.btn-pill-rsvp {
  text-transform: none;
}

/* —— Desktop (thiệp-1 ở >= 768px) —— */
@media (min-width: 768px) {
  .cover-names .c-name { font-size: 44px; }
  .cover-names .c-amp { font-size: 31.2px; }
  .cover-sub-title { font-size: 21.6px; }
  .cover-date,
  .cover-invite-label,
  .cover-guest-prefix,
  .cover-guest-name { font-size: 24px; }

  .card-heading-title.card-intro-heading,
  .card-intro-label { font-size: 21.6px; }
  .card1-script-names,
  .card1-script-names .groom-short-name,
  .card1-script-names .bride-short-name { font-size: 52px; }
  .card1-script-names .amp { font-size: 34.4px; }
  .intro-guest-prefix,
  .intro-guest-name { font-size: 23.2px; }
  .intro-couple-message { font-size: 20.8px; }

  html[lang="zh"] .intro-couple-message,
  body.lang-zh .intro-couple-message { font-size: 15px; }

  .couple-side-family { font-size: 16.8px; }
  .couple-side-role { font-size: 16.8px; }
  .couple-side-name { font-size: 37.6px; }

  .card-heading-title,
  .reception-lead-c2 { font-size: 20px; }
  .gallery-block-c2 .card-heading-title { font-size: 20.48px; }
  .venue-bottom-c2 .card-heading-title { font-size: 21.6px; }
  .guestbook-block-c3 .card-heading-title { font-size: 20.8px; }
  .gift-block-c3 .card-heading-title { font-size: 21.6px; }

  .parents-col small { font-size: 13.44px; }
  .parents-col h4 { font-size: 16.8px; }
  .parents-col p { font-size: 13.76px; }
  .announcement-c1 { font-size: 16.8px; }
  .couple-person .full-name { font-size: 37.6px; }
  .couple-person .role-badge { font-size: 13.12px; }
  .ceremony-intro-lbl,
  .ceremony-loc-lbl,
  .ceremony-at-lbl,
  .ceremony-time-c1,
  .ceremony-date-bar,
  .ceremony-year-lbl { font-size: 16.8px; }
  .ceremony-date-bar .big-day { font-size: 32px; }
  .ceremony-lunar-c1 { font-size: 15.04px; }

  .reception-big-time-c2 { font-size: 16.32px; }
  .info-white-panel--reception .ceremony-date-bar,
  .info-white-panel--reception .ceremony-year-lbl { font-size: 14.08px; }
  .info-white-panel--reception .ceremony-date-bar .big-day { font-size: 54.4px; }
  .reception-lunar-c2 { font-size: 15.04px; }
  .time-col-c2 small { font-size: 13.6px; }
  .time-col-c2 strong { font-size: 23.2px; }
  .cal-title { font-size: 23.2px; }
  .cal-weekdays-row,
  .cal-weekdays-row span { font-size: 11.84px; }
  .cal-days-grid,
  .cal-days-grid span { font-size: 13.12px; }
  .btn-pill-calendar { font-size: 14.72px; }
  .btn-pill-rsvp { font-size: 14.08px; }

  .map-direction-btn-c2 { font-size: 15.2px; }
  .dresscode-item .color-name { font-size: 13.12px; }

  .tl-time { font-size: 18.4px; }
  .tl-text { font-size: 18.88px; }
  .countdown-box-c3 .cd-num { font-size: 38.4px; }

  .wish-header-c3 .wish-author { font-size: 16.32px; }
  .wish-header-c3 .wish-time { font-size: 13.12px; }
  .wish-item-c3 .wish-msg { font-size: 16.8px; }

  .gift-thankyou-note { font-size: 18.88px; }
  .gift-modal-title { font-size: 18.4px; }
  .gift-bank-name { font-size: 12.8px; }
  .gift-bank-number { font-size: 15.04px; }
  .gift-bank-owner,
  .btn-copy-acc,
  .btn-save-qr { font-size: 12.16px; }
  .lang-trigger-btn,
  .lang-btn { font-size: 11.52px; }
}

/* —— Layout mobile (không đổi size) —— */
@media (max-width: 768px) {
  .intro-guest-invite {
    margin-top: 28px;
    max-width: 100%;
    width: 100%;
    padding-inline: 12px;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 4px 6px;
  }

  .cover-invite-label {
    flex-wrap: wrap;
    white-space: normal;
    max-width: 100%;
    padding-inline: 10px;
  }

  .cover-guest-invite-inner {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    max-width: 100%;
  }
}