/* Khung chung cho các mẫu dựng theo bộ ewed. Mẫu riêng chỉ ghi đè phần khác. */

.b-ewed {
  --f-save: "Monsieur La Doulaise", cursive;
  --f-script: "Luxurious Script", cursive;
  --f-pinyon: "Pinyon Script", cursive;
  --f-ephesis: "Ephesis", cursive;
  --f-serif: "Noto Serif Display", Georgia, serif;
  --f-cond: "UTM Cafeta", "Oswald", "Arial Narrow", sans-serif;
  --f-upright: "Cormorant Upright", Georgia, serif;
  --f-barlow: "Barlow", Arial, sans-serif;
  --f-roboto: "Roboto", Arial, sans-serif;
  --f-open: "Open Sans", Arial, sans-serif;
  --line: #536077;
  --pink: #f0c1e1;
  --pink-soft: #ffe2f9;
  --gate-bg: #fdf1f6;
  --accent-strong: #d9589a;
}

.b-ewed .s { position: relative; width: 420px; }
.b-ewed .s > * { position: absolute; }

/* ---------- 3. thư mời ---------- */
.s-invite { height: 352px; }
.inv-rule { left: 135px; top: 0; width: 150px; height: 18px; }
.inv-title {
  left: 110px; top: 10px; width: 200px;
  font-family: var(--f-pinyon); font-size: 38px; line-height: 57px; text-align: center;
}
.inv-sub {
  left: 3px; top: 60px; width: 415px;
  font-family: var(--f-upright); font-size: 14px; line-height: 21px; letter-spacing: 1px;
  text-transform: uppercase; text-align: center;
}
.inv-photo--0 { left: 0; top: 112px; width: 122px; height: 183px; }
.inv-photo--1 { left: 131px; top: 93px; width: 160px; height: 240px; }
.inv-photo--2 { left: 298px; top: 112px; width: 122px; height: 183px; }

/* ---------- 4. lễ thành hôn ---------- */
.s-ceremony { height: 264px; font-family: Arial, var(--f-roboto); }
.s-ceremony p { text-align: center; }
.cer-title { left: 19px; top: 17px; width: 383px; font-size: 17px; line-height: 25.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cer-at { left: 0; top: 40px; width: 420px; font-size: 15px; line-height: 22.5px; letter-spacing: 1px; }
.cer-weekday { left: 115px; top: 75px; width: 185px; font-size: 16px; line-height: 24px; letter-spacing: 3px; }
.cer-day { left: 115px; top: 89px; width: 185px; font-size: 35px; line-height: 52.5px; font-weight: 700; letter-spacing: 3px; }
.cer-month { left: 115px; top: 140px; width: 185px; font-size: 16px; line-height: 24px; letter-spacing: 3px; }
.cer-time { left: -9px; top: 108px; width: 185px; font-size: 16px; line-height: 24px; letter-spacing: 1px; }
.cer-year { left: 245px; top: 108px; width: 185px; font-size: 16px; line-height: 24px; letter-spacing: 1px; }
.cer-bar { top: 84px; width: 1px; height: 65px; background: #111; }
.cer-bar--l { left: 128px; }
.cer-bar--r { left: 283px; }
.cer-lunar { left: 0; top: 173px; width: 420px; font-size: 15px; line-height: 22.5px; font-style: italic; letter-spacing: 1px; }
.cer-place { left: 8px; top: 208px; width: 405px; font-size: 15px; line-height: 22.5px; }

/* ---------- 5. tiệc mừng ---------- */
.s-party { height: 264px; font-family: Arial, var(--f-roboto); }
.s-party p { left: 23px; width: 375px; text-align: center; }
.party-box {
  left: 18px; top: 26px; width: 384px; height: 213px;
  border: 1px solid #111; border-radius: 16px;
  background: rgba(240, 193, 225, .08);
}
.party-title { top: 44px; font-size: 17px; line-height: 25.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.party-time { top: 84px; font-family: var(--f-roboto); font-size: 17px; line-height: 25.5px; }
.party-date { top: 111px; font-family: var(--f-roboto); font-size: 17px; line-height: 25.5px; font-weight: 700; letter-spacing: 7px; }
.party-lunar { top: 146px; font-size: 15px; line-height: 22.5px; font-style: italic; letter-spacing: 1px; }
.party-venue { top: 177px; font-size: 16px; line-height: 24px; }

/* ---------- 6. lịch ---------- */
.s-calendar { height: 396px; }
.cal-head, .cal-month {
  left: 26px; width: 370px;
  font-family: var(--f-serif); font-size: 18px; line-height: 23.4px; letter-spacing: 1px;
  text-align: center; text-transform: uppercase;
}
.cal-head { top: 0; }
.cal-month { top: 25px; }
.cal-grid { left: 26px; top: 57px; width: 370px; font-family: var(--f-open); font-size: 14px; }
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-row span { position: relative; display: grid; place-items: center; height: 48px; line-height: 21px; }
.cal-row--head { background: rgb(243, 208, 215); }
.cal-row--head span { height: 30px; font-weight: 700; }
.cal-row .is-sun { font-weight: 700; }
.cal-heart {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 42px; margin: -22px 0 0 -22px;
  animation: vela-heart 4s ease-in-out infinite;
}
.cal-flourish { left: 150px; top: 355px; width: 270px; height: 41px; }

/* ---------- 7. địa điểm ---------- */
.s-venue { height: 606px; overflow: hidden; }
.venue-arch {
  left: 13px; top: 22px; width: 399px; height: 760px;
  border-radius: 200px 200px 0 0;
  background: linear-gradient(#ffeff5, #fff0f7);
}
.venue-title {
  left: 71px; top: 81px; width: 280px;
  font-family: var(--f-pinyon); font-size: 35px; line-height: 52.5px; text-align: center;
}
.venue-pin { left: 17px; top: 167px; width: 82px; height: 82px; }
.venue-info { left: 89px; top: 172px; width: 309px; }
.venue-name { font-family: var(--f-cond); font-size: 24px; line-height: 36px; text-transform: uppercase; }
.venue-addr { font-family: var(--f-barlow); font-size: 16px; line-height: 24px; }
.venue-map {
  left: 33px; top: 270px; width: 120px; height: 30px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  font-family: var(--f-barlow); font-size: 15px; color: #111; text-decoration: none;
}

/* ---------- 8. album ---------- */
.s-album { padding: 55px 20px 9px; }
.s-album > .album-grid { position: static; }
.album-title {
  left: 0; top: 2px; width: 193px;
  font-family: var(--f-ephesis); font-size: 32px; line-height: 48px; text-align: center;
}
.album-rule { left: 190px; top: 12px; width: 230px; height: 30px; }
.album-grid {
  display: grid;
  grid-template-columns: 187px 187px;
  grid-auto-rows: 135.5px;
  gap: 9px 6px;
}
.album-item { overflow: hidden; background: #eee; }
.album-item img { width: 100%; height: 100%; object-fit: cover; }
.album-item--tall { grid-row: span 2; }

/* ---------- 9. kết ---------- */
.s-closing { height: 631px; }
.closing-photo { left: 0; top: 0; width: 420px; height: 631px; }
.closing-btn {
  height: 50px;
  border: 0; border-radius: 10px;
  font-family: var(--f-roboto); font-size: 16px; font-weight: 700; text-transform: uppercase;
  color: #111;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
}
.closing-btn--rsvp {
  left: 90px; top: 352px; width: 241px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(218, 215, 209, .8) 50%, rgb(161, 159, 155) 100%);
}
.closing-btn--gift { left: 123px; top: 422px; width: 175px; background: var(--pink); }

.s-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px;
  font-family: var(--f-roboto); font-size: 14px; color: #444;
}
.footer-heart { color: #e5484d; font-size: 18px; }

/* ---------- 6b. lịch kiểu năm in to ---------- */
.caly-month { left: 25px; top: 5px; font-family: var(--f-pinyon); font-size: 45px; line-height: 54px; color: var(--cal-ink, #7b6252); }
.caly-year { left: 210px; top: 0; width: 185px; font-family: "Abril Fatface", Georgia, serif; font-size: 80px; line-height: 64px; text-align: right; color: var(--cal-ink, #7b6252); }
.s-calendar--year .cal-grid { top: 63px; left: 25px; border: 1px solid #e5dbd4; }
.cal-grid--lined .cal-row { border-top: 1px solid #e5dbd4; }
.cal-grid--lined .cal-row:first-child { border-top: 0; }
.cal-grid--lined .cal-row span + span { border-left: 1px solid #e5dbd4; }
.cal-grid--lined .cal-row--head { background: var(--cal-ink, #7b6252); color: #fff; font-size: 12px; }
.cal-grid--lined .cal-row--head span + span { border-left: 0; }
.cal-grid--lined .cal-row span { color: var(--cal-ink, #7b6252); height: 48px; }
.cal-grid--lined .cal-row--head span { color: #fff; height: 30px; }

/* ---------- 7b. địa điểm kiểu khung bản đồ ---------- */
.s-venue--map { height: 556px; }
.s-venue--map .venue-title { left: 69px; top: 0; width: 283px; font-size: 38px; line-height: 57px; }
.vmap-box { left: 16px; top: 66px; width: 388px; height: 466px; border-radius: 20px; background: #e9e9e9; }
.vmap-box > * { position: absolute; }
.vmap-name {
  left: 15px; top: 12px; width: 358px;
  font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 1px;
  text-align: center; text-transform: uppercase;
}
.vmap-addr {
  left: 7px; top: 60px; width: 374px;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; letter-spacing: 1px; text-align: center;
}
.vmap-frame { left: 12px; top: 112px; width: 364px; height: 290px; border: 0; border-radius: 12px; background: #ddd; }
.vmap-btn {
  left: 81px; top: 413px; width: 222px; height: 29px;
  display: grid; place-items: center;
  border-radius: 6px; background: #4d4d4d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-roboto); font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none;
}

/* tháng có 6 tuần: thu hàng lại cho vừa khung */
.cal-grid--six .cal-row:not(.cal-row--head) span { height: 40px !important; }