/* ==========================================================================
   THIỆP CƯỚI ONLINE — Phương Nguyễn Studio
   File giao diện (CSS). Anh/chị KHÔNG cần sửa file này.
   Muốn đổi tên, ngày cưới, địa chỉ… thì sửa ở đầu file script.js
   ========================================================================== */

/* ---------- BẢNG MÀU & BIẾN DÙNG CHUNG ---------- */
:root {
  --kem:        #F6F8FD;   /* nền trắng xanh nhạt chính */
  --kem-sau:    #E9EFF9;   /* nền xanh đậm hơn một chút, xen kẽ */
  --trang:      #FFFFFF;
  --champagne:  #C9A96A;   /* vàng champagne — đường viền, hoa văn */
  --champagne-nhat: #E4D3B0;
  --xanh-dam:    #2B4C9B;   /* xanh dương đậm — điểm nhấn (tên, trái tim), cùng tông thiệp giấy */
  --chu:        #24304F;   /* màu chữ chính */
  --chu-nhat:   #4F5B7A;   /* màu chữ phụ (đủ đậm để người lớn tuổi đọc rõ) */
  --vien:       #D6DFF0;

  --font-viet:  'Dancing Script', 'Segoe Script', cursive;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-than:  'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --bo-goc:     4px;
  --bong:       0 10px 30px rgba(43, 76, 155, .08);
  --chuyen:     .45s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- ĐẶT LẠI MẶC ĐỊNH ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;        /* cuộn mượt */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-than);
  font-weight: 300;
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.85;
  color: var(--chu);
  background: var(--kem);
  overflow-x: hidden;             /* không cho tràn ngang */
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;   /* các chữ số cao bằng nhau cho dễ đọc */
}

/* Khoá cuộn khi chưa mở thiệp */
body.chua-mo { overflow: hidden; height: 100%; }

img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.an { display: none !important; }

/* ---------- KHUNG NỘI DUNG ---------- */
.khung {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 22px;
  text-align: center;
}
.khung--rong      { max-width: 860px; }
.khung--rat-rong  { max-width: 1080px; }

/* ---------- CÁC KHỐI SECTION ---------- */
.phan { padding: clamp(64px, 11vw, 110px) 0; position: relative; }
.phan--kem { background: var(--kem); }
.phan--be  { background: var(--kem-sau); }

/* Đường lượn mềm ngăn cách 2 khối màu */
.phan--be::before,
.phan--be::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 26px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, var(--kem) 99%, transparent 100%);
}
.phan--be::before { top: -1px; transform: rotate(180deg); }
.phan--be::after  { bottom: -1px; }

/* ---------- KIỂU CHỮ CHUNG ---------- */
.chu-nho-gian {
  font-size: clamp(10px, 2.4vw, 11.5px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 500;
  margin: 0 0 14px;
}

.tieu-de-viet {
  font-family: var(--font-viet);
  font-weight: 600;
  font-size: clamp(34px, 8vw, 52px);
  line-height: 1.25;
  color: var(--chu);
  margin: 0 0 6px;
}

.doan {
  font-size: clamp(15px, 3.6vw, 16.5px);
  line-height: 2;
  color: var(--chu-nhat);
  margin: 22px auto 0;
  max-width: 34em;
}
.doan--nhe { color: var(--chu-nhat); font-style: italic; }

.doan-mo-dau {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.75;
  color: var(--chu);
  margin: 26px auto 0;
  max-width: 22em;
}

.ghi-chu-nho {
  font-size: clamp(12.5px, 3vw, 13.5px);
  color: var(--chu-nhat);
  margin: 28px 0 0;
  font-style: italic;
}

.lien-ket { color: var(--xanh-dam); text-decoration: none; border-bottom: 1px solid var(--champagne-nhat); }
.lien-ket:hover { border-bottom-color: var(--xanh-dam); }

/* Hoa văn trang trí */
.hoa-van {
  display: block;
  width: clamp(150px, 40vw, 200px);
  height: auto;
  margin: 18px auto 4px;
  color: var(--champagne);
}
.hoa-van--sang { color: var(--champagne-nhat); }

/* ---------- TÊN CÔ DÂU & CHÚ RỂ ---------- */
.ten-cap {
  font-family: var(--font-viet);
  font-weight: 600;
  margin: 0;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ten-cap__and {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
  font-size: .48em;
  line-height: 1;
  margin: 4px 0;
}
.ten-cap--mo   { font-size: clamp(46px, 15vw, 78px); color: var(--chu); }
.ten-cap--bia  { font-size: clamp(46px, 15vw, 82px); color: var(--trang); text-shadow: 0 2px 24px rgba(16, 26, 58, .32); }
.ten-cap--cuoi { font-size: clamp(34px, 10vw, 46px); color: var(--chu); margin: 18px 0 0; }

/* ==========================================================================
   1. MÀN HÌNH MỞ THIỆP
   ========================================================================== */
.man-hinh-mo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kem);
  overflow: hidden;
  transition: opacity .9s ease, transform .9s ease, visibility .9s;
}
.man-hinh-mo__anh {
  position: absolute; inset: 0;
  background: var(--kem-sau) center/cover no-repeat;
  transform: scale(1.06);
  animation: thoNhe 18s ease-in-out infinite alternate;
}
.man-hinh-mo__phu {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(246, 248, 253, .82) 0%, rgba(246, 248, 253, .93) 55%, rgba(233, 239, 249, .97) 100%);
}
.man-hinh-mo__noi-dung {
  position: relative;
  text-align: center;
  padding: 34px 24px;
  max-width: 560px;
  animation: hienLen 1.2s ease both;
}
.man-hinh-mo__ghi-chu {
  font-size: 12.5px;
  color: var(--chu-nhat);
  margin: 16px 0 0;
  letter-spacing: .06em;
}
.ngay-cuoi-mo {
  font-family: var(--font-serif);
  font-size: clamp(15px, 3.8vw, 18px);
  letter-spacing: .2em;
  color: var(--chu-nhat);
  margin: 14px 0 30px;
}
.nut--mo-thiep { animation: nhipTim 2.8s ease-in-out infinite; }

/* Trạng thái đang mở → mờ dần rồi ẩn hẳn */
.man-hinh-mo.dang-mo {
  opacity: 0;
  transform: scale(1.08);
  visibility: hidden;
  pointer-events: none;
}

@keyframes thoNhe { from { transform: scale(1.06); } to { transform: scale(1.16); } }
@keyframes hienLen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nhipTim {
  0%, 100% { box-shadow: 0 6px 22px rgba(201, 169, 106, .28); }
  50%      { box-shadow: 0 6px 30px rgba(201, 169, 106, .55); }
}

/* ==========================================================================
   NÚT BẤM
   ========================================================================== */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;                      /* đủ lớn để bấm trên điện thoại */
  padding: 13px 34px;
  border: 1px solid var(--champagne);
  border-radius: 100px;
  font-family: var(--font-than);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--chuyen);
  -webkit-tap-highlight-color: transparent;
}
.nut svg { width: 17px; height: 17px; flex: none; }

.nut--chinh {
  background: var(--champagne);
  color: var(--trang);
  box-shadow: 0 6px 22px rgba(201, 169, 106, .28);
}
.nut--chinh:hover { background: #BC9A57; border-color: #BC9A57; transform: translateY(-2px); }

.nut--vien { background: transparent; color: var(--chu); }
.nut--vien:hover { background: var(--champagne); color: var(--trang); }

.nut--rong { width: 100%; margin-top: 8px; }
.nut--nho { min-height: 42px; padding: 9px 22px; font-size: 13px; }
.nut:active { transform: scale(.97); }
.nut__icon { font-size: 12px; opacity: .85; }

/* ---------- NÚT TRÒN CỐ ĐỊNH (nhạc & lên đầu trang) ---------- */
.nut-tron {
  position: fixed;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--vien);
  border-radius: 100px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--chu);
  cursor: pointer;
  box-shadow: var(--bong);
  transition: var(--chuyen);
  -webkit-tap-highlight-color: transparent;
}
.nut-tron svg { width: 19px; height: 19px; flex: none; }
.nut-tron:hover { border-color: var(--champagne); color: var(--xanh-dam); }
.nut-tron:active { transform: scale(.94); }

.nut-nhac {
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.nut-nhac__nhan { font-size: 12.5px; letter-spacing: .05em; }
.icon-nhac--on { display: none; }
.nut-nhac.dang-phat .icon-nhac--on  { display: block; }
.nut-nhac.dang-phat .icon-nhac--off { display: none; }
.nut-nhac.dang-phat { color: var(--xanh-dam); border-color: var(--champagne-nhat); }
.nut-nhac.dang-phat svg { animation: xoayNhe 3.5s linear infinite; }
@keyframes xoayNhe { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.nut-len-dau {
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 46px;
  padding: 0;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.nut-len-dau.hien { opacity: 1; visibility: visible; transform: none; }

/* Ẩn 2 nút khi chưa mở thiệp */
body.chua-mo .nut-tron { opacity: 0; visibility: hidden; }

/* ==========================================================================
   2. ẢNH BÌA
   ========================================================================== */
.thiep { opacity: 0; transition: opacity 1s ease .25s; }
body:not(.chua-mo) .thiep { opacity: 1; }

.bia {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.bia__anh {
  position: absolute; inset: 0;
  background: var(--kem-sau) center 22%/cover no-repeat;
  transform: scale(1.04);
  animation: thoNhe 24s ease-in-out infinite alternate;
}
.bia__phu {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(18, 30, 66, .28) 0%, rgba(18, 30, 66, 0) 28%, rgba(18, 30, 66, .38) 52%, rgba(16, 26, 58, .74) 100%);
}
.bia__noi-dung {
  position: relative;
  padding: 0 22px clamp(90px, 16vw, 130px);
  width: 100%;
  max-width: 680px;
}
.bia__noi-dung .chu-nho-gian { color: rgba(255, 255, 255, .88); }
.bia__noi-dung .hoa-van { color: rgba(255, 255, 255, .8); }

.bia__ngay {
  font-family: var(--font-serif);
  font-size: clamp(16px, 4.2vw, 20px);
  letter-spacing: .22em;
  color: var(--trang);
  margin: 12px 0 0;
  text-shadow: 0 2px 14px rgba(16, 26, 58, .4);
}
.bia__cau-chu-de {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14.5px, 3.6vw, 17px);
  color: rgba(255, 255, 255, .9);
  margin: 14px 0 0;
  text-shadow: 0 2px 14px rgba(16, 26, 58, .45);
}

/* Mũi tên gợi ý cuộn xuống */
.bia__mui-ten {
  position: absolute;
  left: 50%;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.75));
  overflow: hidden;
}
.bia__mui-ten span {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 16px;
  background: var(--trang);
  animation: chayXuong 2.2s ease-in-out infinite;
}
@keyframes chayXuong {
  0%   { transform: translateY(-18px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ==========================================================================
   4. ĐỒNG HỒ ĐẾM NGƯỢC
   ========================================================================== */
.dem-nguoc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2.4vw, 16px);
  max-width: 500px;
  margin: 34px auto 0;
}
.dem-nguoc__o {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: clamp(14px, 3.4vw, 22px) 4px;
  box-shadow: var(--bong);
}
.dem-nguoc__so {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 8.4vw, 44px);
  line-height: 1;
  color: var(--chu);
  font-variant-numeric: lining-nums tabular-nums;
}
.dem-nguoc__nhan {
  display: block;
  margin-top: 8px;
  font-size: clamp(10px, 2.5vw, 11.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
}
.dem-nguoc__xong {
  font-family: var(--font-viet);
  font-size: clamp(28px, 7vw, 40px);
  color: var(--xanh-dam);
  margin: 34px auto 0;
  max-width: 12em;
  line-height: 1.35;
}

/* ==========================================================================
   5. HAI GIA ĐÌNH
   ========================================================================== */
.hai-nha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 34px;
}
.nha {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: clamp(26px, 5.5vw, 36px) 20px;
  box-shadow: var(--bong);
}
.nha__nhan {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--champagne);
  margin: 0 0 16px;
  font-weight: 500;
}
.nha__dong { margin: 3px 0; font-size: 14.5px; color: var(--chu-nhat); }
.nha__dong span { font-size: 13px; }
.nha__dong b { font-weight: 500; color: var(--chu); letter-spacing: .02em; }
.nha__dia-chi {
  font-size: 13px;
  font-style: italic;
  color: var(--chu-nhat);
  margin: 10px 0 0;
  line-height: 1.6;
}
.nha__con {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 20px 0 2px;
}
.nha__ten-con {
  font-family: var(--font-viet);
  font-size: clamp(27px, 7vw, 36px);
  color: var(--xanh-dam);
  margin: 0;
  line-height: 1.3;
}
.hai-nha__tim { color: var(--champagne); display: flex; justify-content: center; }
.hai-nha__tim svg { width: 26px; height: 26px; }

@media (min-width: 760px) {
  .hai-nha { grid-template-columns: 1fr auto 1fr; gap: 18px; }
}

/* ==========================================================================
   6. LỊCH TRÌNH LỄ CƯỚI
   ========================================================================== */
.the-le {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 34px;
}
@media (min-width: 760px) { .the-le { grid-template-columns: 1fr 1fr; gap: 24px; } }

.le {
  background: var(--trang);
  border-radius: var(--bo-goc);
  padding: 9px;
  box-shadow: var(--bong);
}
.le__vien {
  border: 1px solid var(--champagne-nhat);
  border-radius: 2px;
  padding: clamp(28px, 6vw, 38px) 20px clamp(26px, 5vw, 34px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.le__ten {
  font-family: var(--font-viet);
  font-size: clamp(30px, 7.5vw, 38px);
  color: var(--xanh-dam);
  margin: 0 0 20px;
  line-height: 1.2;
}
.le__ngay {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.le__thu, .le__thang {
  font-size: clamp(10px, 2.5vw, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chu-nhat);
  max-width: 6.5em;
  line-height: 1.5;
  text-align: center;
}
.le__so {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(46px, 12vw, 60px);
  line-height: 1;
  color: var(--chu);
  padding: 0 14px;
  border-left: 1px solid var(--vien);
  border-right: 1px solid var(--vien);
}
.le__am-lich { font-size: 12.5px; font-style: italic; color: var(--chu-nhat); margin: 0; }
.le__gach { width: 40px; height: 1px; background: var(--champagne-nhat); margin: 20px 0; }
.le__gio {
  font-family: var(--font-serif);
  font-size: clamp(21px, 5vw, 26px);
  letter-spacing: .12em;
  color: var(--chu);
  margin: 0 0 10px;
}
.le__gio b { font-weight: 500; }
.le__dia-diem {
  font-family: var(--font-viet);
  font-size: clamp(24px, 6vw, 30px);
  color: var(--chu);
  margin: 0 0 6px;
  line-height: 1.3;
}
.le__dia-chi {
  font-size: 13.5px;
  color: var(--chu-nhat);
  margin: 0 0 22px;
  line-height: 1.7;
  max-width: 20em;
}
.le .nut { margin-top: auto; }

/* ---------- Lễ cưới chỉ có MỘT buổi: thẻ lễ + lịch tháng ---------- */
.the-le--mot { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
@media (min-width: 860px) {
  .the-le--mot { grid-template-columns: 1fr 1fr; max-width: 940px; }
  .the-le--mot .lich-the { order: -1; }          /* lịch nằm bên trái như thiệp giấy */
}

.lich-the {
  background: var(--trang);
  border-radius: var(--bo-goc);
  padding: 9px;
  box-shadow: var(--bong);
}
.lich {
  border: 1px solid var(--champagne-nhat);
  border-radius: 2px;
  height: 100%;
  padding: clamp(24px, 5vw, 32px) clamp(12px, 3.5vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lich__tieu-de {
  font-family: var(--font-serif);
  font-size: clamp(22px, 5.6vw, 27px);
  letter-spacing: .02em;
  color: var(--chu);
  text-align: center;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--xanh-dam);
}
.lich__luoi {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
  text-align: center;
}
.lich__thu {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--chu);
  padding: 4px 0 10px;
}
.lich__ngay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(38px, 10vw, 46px);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(17px, 4.6vw, 20px);
  color: var(--chu-nhat);
}
/* Ngày cưới: chữ xanh nằm trong hình trái tim, giống thiệp giấy */
.lich__ngay--cuoi {
  color: var(--xanh-dam);
  font-weight: 700;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 4 18 18'%3E%3Cpath d='M12 20s-7-4.6-7-9.4A4.1 4.1 0 0 1 12 7.7a4.1 4.1 0 0 1 7 2.9C19 15.4 12 20 12 20z' fill='%23EAF0FB' stroke='%232B4C9B' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.loi-ket {
  font-family: var(--font-viet);
  font-size: clamp(27px, 7vw, 33px);
  color: var(--xanh-dam);
  margin: 16px 0 0;
  line-height: 1.3;
}

/* ==========================================================================
   7. CÂU CHUYỆN TÌNH YÊU (dòng thời gian)
   ========================================================================== */
.dong-thoi-gian {
  list-style: none;
  margin: 40px 0 0;
  padding: 0 0 0 30px;
  position: relative;
  text-align: left;
}
.dong-thoi-gian::before {
  content: '';
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--champagne-nhat) 12%, var(--champagne-nhat) 88%, transparent);
}
.moc { position: relative; padding-bottom: 34px; }
.moc:last-child { padding-bottom: 0; }
.moc__cham {
  position: absolute;
  left: -30px; top: 9px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--kem);
  border: 1.5px solid var(--champagne);
}
.moc__cham::after {
  content: '';
  position: absolute; inset: 2.5px;
  border-radius: 50%;
  background: var(--champagne);
}
.moc__tieu-de {
  font-family: var(--font-viet);
  font-size: clamp(24px, 6vw, 30px);
  color: var(--xanh-dam);
  margin: 0 0 4px;
  line-height: 1.3;
}
.moc__noi-dung {
  margin: 0;
  font-size: clamp(14.5px, 3.5vw, 15.5px);
  line-height: 1.95;
  color: var(--chu-nhat);
}

@media (min-width: 700px) {
  .dong-thoi-gian { padding-left: 40px; }
  .moc__cham { left: -40px; }
}

/* ==========================================================================
   8. ALBUM ẢNH
   ========================================================================== */
.luoi-anh {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.8vw, 14px);
  margin-top: 36px;
}
@media (min-width: 700px)  { .luoi-anh { grid-template-columns: repeat(3, 1fr); } }

.o-anh {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  border-radius: 3px;
  background: var(--kem-sau);
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
  box-shadow: 0 4px 14px rgba(43, 76, 155, .07);
  -webkit-tap-highlight-color: transparent;
}
/* Ảnh cao (chiếm 2 hàng) và ảnh ngang (chiếm 2 cột) để bố cục sinh động */
.o-anh--cao   { aspect-ratio: 3 / 4; grid-row: span 2; }
.o-anh--ngang { aspect-ratio: 3 / 2; grid-column: span 2; }

.o-anh img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.o-anh:hover img { transform: scale(1.06); }

.o-anh::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,30,66,.2), transparent 45%);
  opacity: 0;
  transition: opacity .4s ease;
}
.o-anh:hover::after { opacity: 1; }

/* Ảnh cao chỉ áp dụng ở màn hình rộng cho gọn gàng */
@media (max-width: 699px) {
  .o-anh--cao { grid-row: span 1; }
}

/* ---------- KHUNG XEM ẢNH LỚN ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 18, 34, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 14px;
  animation: hienNhanh .3s ease;
  -webkit-tap-highlight-color: transparent;
}
@keyframes hienNhanh { from { opacity: 0; } to { opacity: 1; } }

.lightbox__khung { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__khung img {
  max-width: 100%;
  max-height: calc(100svh - 130px);
  max-height: calc(100vh - 130px);
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: anhVao .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes anhVao { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.lightbox__dem {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: lining-nums tabular-nums;
}

.lightbox__nut {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: var(--chuyen);
}
.lightbox__nut svg { width: 21px; height: 21px; }
.lightbox__nut:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255,255,255,.5); }
.lightbox__nut:active { transform: scale(.92); }

.lightbox__dong  { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.lightbox__truoc { left: 12px;  top: 50%; transform: translateY(-50%); }
.lightbox__sau   { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__truoc:active, .lightbox__sau:active { transform: translateY(-50%) scale(.92); }

@media (min-width: 900px) {
  .lightbox__truoc { left: 34px; }
  .lightbox__sau   { right: 34px; }
}

/* ==========================================================================
   9 & 10. BIỂU MẪU (xác nhận tham dự / lời chúc)
   ========================================================================== */
.bieu-mau {
  max-width: 460px;
  margin: 36px auto 0;
  text-align: left;
}
.bieu-mau--gon { margin-bottom: 8px; }

.o-nhap { margin-bottom: 18px; }
.o-nhap > label,
.o-nhap legend {
  display: block;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chu-nhat);
  margin-bottom: 8px;
  padding: 0;
}
.bat-buoc { color: var(--xanh-dam); }

.o-nhap input,
.o-nhap select,
.o-nhap textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  background: var(--trang);
  color: var(--chu);
  font-weight: 300;
  transition: border-color .3s ease, box-shadow .3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.o-nhap textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.o-nhap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377887A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.o-nhap input:focus,
.o-nhap select:focus,
.o-nhap textarea:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgba(201, 169, 106, .16);
}
.o-nhap input::placeholder,
.o-nhap textarea::placeholder { color: #8B96B0; }
.o-nhap input.sai, .o-nhap textarea.sai { border-color: var(--xanh-dam); }

/* Ô chọn tham dự */
.o-nhap--chon { border: none; margin: 0 0 18px; padding: 0; }
.the-chon { display: block; cursor: pointer; margin-bottom: 9px; }
.the-chon input { position: absolute; opacity: 0; width: 0; height: 0; }
.the-chon__hop {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  background: var(--trang);
  font-size: 14.5px;
  transition: var(--chuyen);
}
.the-chon__dau {
  width: 18px; height: 18px; flex: none;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  position: relative;
  transition: var(--chuyen);
}
.the-chon input:checked + .the-chon__hop { border-color: var(--champagne); background: #F1F5FC; }
.the-chon input:checked + .the-chon__hop .the-chon__dau { background: var(--champagne); box-shadow: inset 0 0 0 3px var(--trang); }
.the-chon input:focus-visible + .the-chon__hop { box-shadow: 0 0 0 3px rgba(201, 169, 106, .22); }

.bieu-mau__loi {
  color: var(--xanh-dam);
  font-size: 13.5px;
  margin: 12px 0 0;
  text-align: center;
}

/* Dòng nhắc "bấm gửi thì Zalo sẽ mở ra" ngay trên nút gửi */
.bieu-mau__mach {
  font-size: 13px;
  line-height: 1.7;
  color: var(--chu-nhat);
  background: #F1F5FC;
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: 12px 16px;
  margin: 0 0 16px;
  text-align: center;
}
.bieu-mau__mach b { color: var(--chu); font-weight: 500; }

/* Thông báo cảm ơn sau khi gửi */
.thong-bao {
  max-width: 460px;
  margin: 36px auto 0;
  padding: 40px 26px;
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  text-align: center;
  animation: hienLen .6s ease both;
}
.thong-bao__tim { color: var(--xanh-dam); display: flex; justify-content: center; margin-bottom: 12px; }
.thong-bao__tim svg { width: 40px; height: 40px; animation: nhipNhe 1.8s ease-in-out infinite; }
@keyframes nhipNhe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.thong-bao__chu {
  font-family: var(--font-viet);
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.5;
  color: var(--chu);
  margin: 0 0 22px;
}

/* Nút nhắn Zalo trong hộp cảm ơn */
.nut--zalo {
  background: #0068FF;
  border-color: #0068FF;
  color: #fff;
  margin-bottom: 14px;
}
.nut--zalo:hover { background: #0056D6; border-color: #0056D6; transform: translateY(-2px); }
.thong-bao__mach {
  font-size: 13px;
  line-height: 1.7;
  color: var(--chu-nhat);
  margin: 0 0 18px;
}

/* ---------- DANH SÁCH LỜI CHÚC ---------- */
.dan-loi-chuc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 34px;
  text-align: left;
}
@media (min-width: 720px) { .dan-loi-chuc { grid-template-columns: 1fr 1fr; } }

.the-chuc {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: 22px 22px 20px;
  box-shadow: 0 4px 14px rgba(43, 76, 155, .06);
  position: relative;
  animation: hienLen .55s ease both;
}
.the-chuc::before {
  content: '“';
  position: absolute;
  top: 4px; left: 16px;
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: 1;
  color: var(--champagne-nhat);
}
.the-chuc__noi-dung {
  margin: 12px 0 14px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--chu-nhat);
  font-style: italic;
  position: relative;
}
.the-chuc__ten {
  margin: 0;
  font-family: var(--font-viet);
  font-size: 21px;
  color: var(--xanh-dam);
}
.the-chuc__ten::before { content: '— '; color: var(--champagne); }
.the-chuc--moi { border-color: var(--champagne); }

/* ==========================================================================
   11. MỪNG CƯỚI
   ========================================================================== */
.dan-the-ngan-hang {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 36px;
}
@media (min-width: 760px) { .dan-the-ngan-hang { grid-template-columns: 1fr 1fr; gap: 22px; } }

.the-ngan-hang {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: clamp(24px, 5vw, 32px) 22px;
  box-shadow: var(--bong);
  text-align: center;
}
.the-ngan-hang__vai-tro {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 16px;
}
.the-ngan-hang__qr {
  width: 148px; height: 148px;
  margin: 0 auto 18px;
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  background: var(--kem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 7px;
}
.the-ngan-hang__qr img { width: 100%; height: 100%; object-fit: contain; }
.the-ngan-hang__qr-trong {
  font-size: 11.5px;
  line-height: 1.7;
  color: #8B96B0;
  letter-spacing: .06em;
  padding: 0 8px;
}
.the-ngan-hang__dong { margin: 3px 0; font-size: 14px; color: var(--chu-nhat); }
.the-ngan-hang__dong b { font-weight: 500; color: var(--chu); }
/* Số tài khoản: dùng font không chân, giãn chữ rộng.
   Khách phải đọc từng chữ số để nhập vào app ngân hàng nên ưu tiên
   rõ ràng tuyệt đối, không dùng font kiểu cách. */
.the-ngan-hang__so {
  font-family: var(--font-than);
  font-size: clamp(21px, 5.2vw, 25px);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--chu);
  margin: 12px 0 16px;
  font-variant-numeric: lining-nums tabular-nums;
  word-break: break-all;
}
.nut-chep { min-height: 46px; padding: 11px 26px; font-size: 13px; }
.nut-chep.da-chep { background: var(--champagne); color: var(--trang); border-color: var(--champagne); }

/* ==========================================================================
   12. CUỐI TRANG
   ========================================================================== */
.cuoi-trang {
  background: linear-gradient(to bottom, var(--kem-sau), #D3DEF2);
  padding: clamp(64px, 11vw, 96px) 0 calc(clamp(72px, 12vw, 96px) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  position: relative;
}
.cuoi-trang__cam-on {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 4.2vw, 19px);
  line-height: 1.9;
  color: var(--chu-nhat);
  margin: 16px 0 0;
}
.thuong-hieu {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid rgba(201, 169, 106, .3);
}
.thuong-hieu__tang { font-size: 12.5px; color: var(--chu-nhat); margin: 0 0 6px; font-style: italic; }
.thuong-hieu__ten {
  font-size: clamp(13px, 3.4vw, 15px);
  letter-spacing: .26em;
  font-weight: 500;
  color: var(--chu);
  margin: 0 0 12px;
}
.thuong-hieu__dong { font-size: 13px; color: var(--chu-nhat); margin: 2px 0; line-height: 1.75; }
.thuong-hieu__slogan {
  font-family: var(--font-viet);
  font-size: 21px;
  color: var(--champagne);
  margin: 14px 0 0;
}

/* ==========================================================================
   HIỆU ỨNG HIỆN DẦN KHI CUỘN TRANG
   ========================================================================== */
.hien-dan {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1);
}
.hien-dan.da-hien { opacity: 1; transform: none; }

/* ---------- CÁNH HOA RƠI NHẸ ---------- */
/* Khung chứa cánh hoa — cắt gọn trong màn hình để không bị tràn ngang */
.vuon-hoa {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.canh-hoa {
  position: absolute;
  top: -6vh;
  pointer-events: none;
  border-radius: 60% 10% 60% 10%;
  background: linear-gradient(135deg, #FFFFFF, #D3E0F5);
  filter: blur(.6px);            /* làm mềm, trông như bụi nắng chứ không phải đốm trắng */
  opacity: .4;
  animation: hoaRoi linear infinite;
}
@keyframes hoaRoi {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  12%  { opacity: .4; }
  88%  { opacity: .28; }
  100% { transform: translateY(112vh) translateX(70px) rotate(420deg); opacity: 0; }
}

/* ---------- TÔN TRỌNG CHẾ ĐỘ GIẢM CHUYỂN ĐỘNG ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hien-dan { opacity: 1; transform: none; }
  .vuon-hoa { display: none; }
}

/* ---------- HIỂN THỊ KHI IN THIỆP ---------- */
@media print {
  .man-hinh-mo, .nut-tron, .lightbox, .bia__mui-ten, .bieu-mau { display: none !important; }
  body { background: #fff; }
  .thiep { opacity: 1 !important; }
  .hien-dan { opacity: 1 !important; transform: none !important; }
}

/* ---------- Tên khách trên màn hình mở thiệp (link có ?khach=) ---------- */
.khach-moi {
  margin: 18px auto 24px;
  max-width: 20em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.khach-moi__nhan {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--chu-nhat);
}
.khach-moi__ten {
  font-family: var(--font-viet);
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.25;
  color: var(--xanh-dam);
  overflow-wrap: anywhere;
}

/* ---------- Tên khách ngay trên bìa thiệp (ảnh lớn), link có ?khach= ---------- */
.bia__khach {
  margin: 10px auto 14px;
  max-width: 19em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bia__khach-ten {
  font-family: var(--font-viet);
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.2;
  color: var(--trang);
  text-shadow: 0 2px 16px rgba(16, 26, 58, .55);
  overflow-wrap: anywhere;
}
.bia__khach-nhan {
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 12px rgba(16, 26, 58, .55);
}