/* ==========================================================
   Thiệp mời — lật sách.
   Bấm -> bìa lật sang trái quanh gáy, lộ trang trong -> vào trang.

   ┌────────────────────────────────────────────────────────┐
   │  THIỆP CHỈ HIỆN TRÊN MOBILE (màn hình dưới 768px)      │
   │  Trên máy tính khách vào thẳng trang, không có thiệp.  │
   └────────────────────────────────────────────────────────┘
   Chỉnh kích cỡ thiệp — sửa 2 số dưới đây là đủ.
   Thiệp luôn giữ tỉ lệ 2:3 (dọc), chiều rộng lấy số NHỎ HƠN:

     --ci-w-mobile  : % bề ngang màn hình  (vw)
     --ci-max-mobile: tối đa bao nhiêu px
   ========================================================== */

:root {
  --ci-w-mobile: 74vw;      /* 74% bề ngang màn hình */
  --ci-max-mobile: 340px;   /* nhưng không quá 340px  */
}

html.ci-lock, html.ci-lock body { overflow: hidden !important; }

/* Thiệp chỉ dùng trên mobile. Trên PC ẩn hẳn và bỏ khoá scroll —
   phòng trường hợp JS chưa chạy kịp (JS cũng tự xoá overlay). */
@media (min-width: 768px) {
  #ci-overlay { display: none !important; }
  html.ci-lock, html.ci-lock body { overflow: visible !important; }
}

#ci-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: #f8f2e7;
  cursor: pointer;
  transition: opacity .7s ease .5s, visibility .7s ease .5s;
}
#ci-overlay.ci-done { opacity: 0; visibility: hidden; pointer-events: none; }

.ci-room {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 66% at 50% 44%, #fdfaf3 0%, #f8f2e7 52%, #efe4d3 100%);
  pointer-events: none;
}

/* ---------- khung sách ---------- */
/* Perspective đặt ở đây (không ở phần tử quay) để bìa lật có chiều sâu thật. */
.ci-card {
  position: relative;
  z-index: 1;
  width: min(var(--ci-w-mobile), var(--ci-max-mobile));
  aspect-ratio: 2 / 3;
  /* không cao quá màn hình: tỉ lệ 2:3 nên cao = rộng x 1.5 */
  max-height: calc(100vh - 90px);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 1500px;
  perspective-origin: 100% 50%;
  transition: transform .9s cubic-bezier(.4,0,.2,1), opacity .55s ease .45s;
  animation: ci-rise .9s cubic-bezier(.2,.7,.3,1) both;
  /* .ci-card là <button>: chặn style theme áp cho button
     (margin-right:16px làm thiệp lệch khỏi tâm) */
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  font: inherit;
  line-height: normal;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
.ci-card * { text-transform: none; }
/* Theme áp transition:all -> mọi thay đổi bị animate, tốn tính toán khi lật */
.ci-inner, .ci-inner *, .ci-cover-front, .ci-cover-back, .ci-cover-front * { transition: none !important; }
@keyframes ci-rise {
  from { opacity: 0; transform: translateY(24px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
.ci-card:focus-visible { outline: 2px solid #8d6a3f; outline-offset: 10px; }

/* ---------- trang trong (nằm dưới bìa) ---------- */
.ci-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px 3px 3px 2px;
  background: #2c2a26;
  box-shadow:
    0 1px 3px rgba(94,74,44,.10),
    0 16px 36px -20px rgba(94,74,44,.30);
}
.ci-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ci-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28,24,18,.28) 0%,
    rgba(28,24,18,.08) 24%,
    rgba(26,22,16,.34) 54%,
    rgba(20,16,11,.80) 80%,
    rgba(16,13,9,.92) 100%);
}
.ci-rule {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255,248,235,.38);
  pointer-events: none;
}
/* Bóng của bìa đang lật, đổ lên trang trong. Nằm trên lớp không quay
   nên không phải repaint mỗi frame; mờ dần khi bìa đi xa. */
.ci-castshadow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(20,14,8,.5) 0%, rgba(20,14,8,.22) 42%, rgba(20,14,8,0) 78%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .85s ease .18s;
}
#ci-overlay.ci-open .ci-castshadow { opacity: 0; }

/* nếp gáy: trang trong tối lại ở sát gáy bên trái */
.ci-gutter {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 26px;
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0));
  pointer-events: none;
}

.ci-text {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(22px, 5%, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0 11%;
  text-align: center;
  color: #fffaf0;
}
.ci-eyebrow {
  font-family: Questrial, system-ui, sans-serif;
  font-size: clamp(8px, 2.2vmin, 10px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,246,232,.82);
}
.ci-names {
  font-family: "Snell Roundhand", "Dancing Script", "Segoe Script";
  font-weight: 600;
  font-size: clamp(23px, 6.2vmin, 34px);
  line-height: 1.14;
  text-shadow: 0 1px 10px rgba(20,14,8,.5);
}
.ci-hr { width: 44px; height: 1px; background: rgba(255,246,232,.5); margin: 3px 0 1px; }
.ci-date {
  font-family: Questrial, system-ui, sans-serif;
  font-size: clamp(10px, 2.6vmin, 13px);
  letter-spacing: .24em;
  color: rgba(255,246,232,.94);
  font-variant-numeric: tabular-nums;
}
.ci-mono {
  position: absolute;
  top: clamp(24px, 6.5%, 42px);
  left: 0; right: 0;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(24px, 6vmin, 34px);
  letter-spacing: .16em;
  color: rgba(255,248,236,.95);
  text-shadow: 0 1px 8px rgba(20,14,8,.45);
}

/* ---------- bìa (lật sang trái quanh gáy) ---------- */
.ci-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: left center;   /* gáy sách bên trái */
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 1.15s cubic-bezier(.42,.06,.35,1);
}
.ci-cover-front, .ci-cover-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 2px 3px 3px 2px;
}
/* ---------------- MẶT TRƯỚC BÌA: giấy kem, viền đỏ ---------------- */
.ci-cover-front {
  background: linear-gradient(168deg, #fdf9f0 0%, #f4ecdc 62%, #efe6d3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #7c5f3a;
  padding: 9.5% 9% 14%;
  box-shadow:
    0 1px 3px rgba(94,74,44,.12),
    0 16px 36px -18px rgba(94,74,44,.34);
}
/* Viền + hoa văn góc: dùng ảnh vien.svg phủ kín mặt bìa.
   SVG tỉ lệ 523.5x749.25 (1:1.43) còn bìa 2:3 (1:1.5) -> dùng
   object-fit:fill để viền luôn khít mép, lệch tỉ lệ không đáng kể. */
.ci-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}


/* Chữ Song Hỉ 囍 (U+56CD). Dùng Noto Serif SC tải riêng chỉ ký tự này,
   vì nhiều máy khách không có font CJK -> sẽ ra ô vuông trống. */
.ci-songhi {
  position: relative;
  z-index: 2;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-weight: 500;
  font-size: clamp(30px, 8.6vmin, 52px);
  line-height: 1;
  color: #b08b55;
  margin-bottom: 6%;
}

.ci-fs {
  position: relative;
  z-index: 2;
  font-family: Questrial, system-ui, sans-serif;
  font-size: clamp(9.5px, 2.5vmin, 13px);
  /* Questrial chỉ có weight 400 -> không đặt font-weight, tránh
     browser giả lập làm chữ ra bệt. */
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #78603c;   /* tương phản 4.6:1 trên giấy kem */
  margin-bottom: 6%;
}
/* tên cô dâu chú rể */
/* Tên cô dâu chú rể: hai dòng, trái tim ở giữa.
   weight 600 đã được tải thật (không để browser giả lập). */
.ci-couple {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2%;
  line-height: 1.04;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 8.2vmin, 48px);
  color: #966d2a;
  text-align: center;
}
.ci-couple .ci-n {
  white-space: nowrap;
  display: block;
  max-width: 100%;
}
/* dự phòng cuối: khung tên không bao giờ rộng hơn vùng chữ của bìa */
.ci-couple {
  max-width: 100%;
  overflow-wrap: normal;
}
/* Cụm hoa giữa hai tên (and.svg) — đứng ở chỗ dấu "&" trước đây */
.ci-amp-img {
  width: 1.05em;     /* theo cỡ chữ tên, tự co giãn cùng */
  height: auto;
  flex: none;
  margin: .02em 0;
  display: block;
}

/* bó hoa giữa bìa (ảnh hoa.png, nền trong suốt) */
.ci-bouquet {
  position: relative;
  z-index: 2;
  width: 25%;
  max-width: 96px;
  height: auto;
  margin: 5% 0 auto;
  display: block;
}

/* dòng mời + tên khách (lấy từ URL) */
.ci-invite {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.ci-invite-label {
  font-family: Questrial, system-ui, sans-serif;
  font-size: clamp(9.5px, 2.4vmin, 12.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #78603c;   /* tương phản 4.6:1 trên giấy kem */
}
.ci-guest {
  font-family: "Snell Roundhand", "Dancing Script", "Segoe Script";
  font-weight: 600;
  font-size: clamp(17px, 4.4vmin, 26px);
  line-height: 1.2;
  color: #8d1122;
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
  /* gạch chân nét đứt như dòng để điền tên */
  padding-bottom: 4px;
  border-bottom: 1px dotted rgba(150,118,72,.62);
  min-width: 62%;
}

/* gáy: vệt sẫm ở mép trái bìa */
/* mặt sau bìa: giấy trong, thấy khi bìa đã lật qua */
.ci-cover-back {
  transform: rotateY(180deg);
  background: linear-gradient(192deg, #e9dfca 0%, #f2e9d7 100%);
}

/* mở: bìa lật sang trái */
#ci-overlay.ci-open .ci-card  { animation: none; }
#ci-overlay.ci-open .ci-cover { transform: rotateY(-158deg); }
#ci-overlay.ci-zoom .ci-card  { transform: scale(1.85); opacity: 0; }

/* ---------- lời mời bấm ---------- */
/* Nhieu khach dung o trang bia roi thoat vi khong nhan ra la bam duoc.
   Van giu kieu chu tran cho hop bia, chi to hon / dam hon / nhay nhanh hon
   mot chut de mat bat duoc. */
.ci-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(4.5vh, 26px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: Questrial, system-ui, sans-serif;
  font-size: clamp(11px, 1.8vmin, 13px);
  font-weight: 450;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #5a442b;   /* dam hon #6b5539 mot chut */
  text-align: center;
  pointer-events: none;
  transition: opacity .35s ease;
}
.ci-hint span { animation: ci-pulse 2s ease-in-out infinite; }
/* Day day mo nhat len 0.62 => khong con luc gan nhu tang hinh. */
@keyframes ci-pulse { 0%,100%{opacity:.62} 50%{opacity:1} }
.ci-hint svg { width: 15px; height: 15px; opacity: .5; }
#ci-overlay.ci-open .ci-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ci-card { animation: none; }
  .ci-card, .ci-cover, #ci-overlay { transition-duration: .2s !important; }
  .ci-hint span { animation: none; }
}

/* ---------------------------------------------------------------
   #comingSoonBtn: text dai ("Xem anh ki niem sau dam cuoi") bi tran
   tren man hinh nho. Flatsome dat .button line-height:2.4em + padding
   ngang co dinh, nen khi chu xuong dong nut phinh cao va lem ra ngoai.
   Cho phep xuong dong goi gang, co chu/padding co gian theo viewport.
   --------------------------------------------------------------- */
#comingSoonBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  max-width: 100%;
  /* bo line-height 2.4em cua theme: chieu cao do padding quyet dinh */
  line-height: 1.35;
  min-height: 0;
  padding: .85em 1.6em;
  margin-right: 0;             /* theme co margin-right:1em -> lech tam */
  white-space: normal;         /* cho phep xuong dong */
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

#comingSoonBtn > span {
  display: inline;             /* theme dat inline-block -> khong wrap dep */
  line-height: 1.35;
}

#comingSoonBtn > i {
  flex: 0 0 auto;              /* icon khong bi bop */
}

/* Man hinh hep: thu nho chu va padding cho nut vua khung */
@media (max-width: 480px) {
  #comingSoonBtn {
    font-size: .82em;
    padding: .8em 1.15em;
    letter-spacing: .01em;
  }
}

@media (max-width: 360px) {
  #comingSoonBtn {
    font-size: .76em;
    padding: .75em .9em;
  }
}

/* ---------------------------------------------------------------
   Trang /gai + /trai: hai cot trong cung mot row la HAI su kien khac
   nhau — HON LE (thanh duong) o tren, TIEC RUOU (nha hang) o duoi.
   Chung cung nen kem (255,252,242) va box-shadow-1 cua theme qua mo
   nen nhin lien mach nhu mot khoi, khach de doc nham dia diem/gio.
   Them mot dai phan cach co hoa van + gian khoang cach de tach bach.
   --------------------------------------------------------------- */
#col-1775364715 > .col-inner {
  position: relative;
  /* day noi dung xuong, chua cho dai phan cach o tren */
  margin-top: 18px;
  padding-top: 20px !important;
}

/* Duong ke mo dan ve hai dau — mem hon mot gach ngang cung */
#col-1775364715 > .col-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(153, 51, 0, 0),
    rgba(153, 51, 0, .34) 22%,
    rgba(153, 51, 0, .34) 78%,
    rgba(153, 51, 0, 0)
  );
}

/* Hoa van giua duong ke: hinh thoi nho, nen kem de "cat" duong ke */
#col-1775364715 > .col-inner::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: rgb(255, 252, 242);   /* trung nen row -> che duong ke ben duoi */
  border: 1px solid rgba(153, 51, 0, .45);
}

@media (min-width: 550px) {
  #col-1775364715 > .col-inner {
    margin-top: 24px;
    padding-top: 28px !important;
  }
  #col-1775364715 > .col-inner::before { left: 18%; right: 18%; }
}

/* Tu 850px tro len (large-5 + large-7) hai cot nam CANH NHAU, nen doi
   duong ke ngang thanh vach doc o canh trai cot phai. */
@media (min-width: 850px) {
  #col-1775364715 > .col-inner {
    margin-top: 0;
    padding-top: 0 !important;
  }
  #col-1775364715 > .col-inner::before {
    top: 8%;
    bottom: 8%;
    left: 0;
    right: auto;
    height: auto;
    width: 1px;
    background: linear-gradient(
      to bottom,
      rgba(153, 51, 0, 0),
      rgba(153, 51, 0, .3) 20%,
      rgba(153, 51, 0, .3) 80%,
      rgba(153, 51, 0, 0)
    );
  }
  #col-1775364715 > .col-inner::after {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}