@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Great+Vibes&family=Marcellus&display=swap');

:root{
  /* Tông đỏ trầm. Nền là hai sắc đỏ, chữ là kem và vàng sáng.
     Vàng đậm cũ (#9c703c) bỏ hẳn — trên nền đỏ chỉ đạt 2.7:1, đọc không ra.
     Chữ kem trên nền đỏ trầm: 10.1:1. Vàng sáng trên nền đỏ trầm: 6.8:1. */
  --cream:#6e1420;      /* nền chính (tên biến giữ nguyên cho khỏi phải sửa khắp nơi) */
  --cream-2:#5a0f19;    /* nền trầm hơn, dùng cho trang 2 và 3 */
  --gold:#e3c07f;       /* vàng sáng — viền, hoa văn */
  --gold-deep:#e8cd93;  /* vàng sáng hơn — tiêu đề, số đếm ngược, nút */
  --ink:#f7edda;        /* chữ chính */
  --ink-soft:#e2c9b4;   /* chữ phụ */
  --line:#a9744a;       /* đường kẻ */
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Cormorant Garamond', serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}

.script{font-family:'Great Vibes', cursive; font-weight:400;}
.serif-alt{font-family:'Marcellus', serif;}

a{color:inherit; text-decoration:none;}

/* --------- decorative svg --------- */
.corner-flourish{stroke:var(--gold); position:absolute; width:110px; height:110px; opacity:.55; pointer-events:none;}
.corner-flourish.tl{top:14px; left:14px;}
.corner-flourish.tr{top:14px; right:14px; transform:scaleX(-1);}
.corner-flourish.bl{bottom:14px; left:14px; transform:scaleY(-1);}
.corner-flourish.br{bottom:14px; right:14px; transform:scale(-1,-1);}

.divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:22px auto; width:min(300px, 70%);
  color:var(--gold);
}
.divider .line{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent);}
.divider svg{width:22px; height:22px;}

/* --------- 4 TRANG --------- 
   Mỗi .page cao đúng một màn hình, cuộn dọc lần lượt 1 → 4.
   Nội dung nằm trong .page-inner để JS đo và co cho vừa (xem fitPages). */
.page{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px, 6vh, 60px) 0;
}
.page--1{padding:0;}
.page--3:last-child, .page--4{padding-bottom:0;}
.page + .page{border-top:1px solid var(--line);}
.page--2{background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);}
.page--3{background:var(--cream-2);}
.page--4{background:linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);}

.page-inner{width:100%;}

section{
  position:relative;
  padding:34px 20px;
  max-width:900px;
  margin:0 auto;
  width:100%;
}

.fade-up{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s ease, transform .9s ease;
}
.fade-up.in{opacity:1; transform:translateY(0);}

.section-title{
  text-align:center; font-size:clamp(30px,5vw,42px); color:var(--gold-deep);
}

/* --------- HERO --------- */
#hero{
  /* Cỡ tên cô dâu chú rể — tên khách mời dùng đúng cỡ này.
     --time-size: cỡ dòng giờ ngày, dùng luôn cho dòng "Trân trọng kính mời". */
  --name-size:clamp(40px, 8.4vw, 76px);
  --time-size:clamp(18px, 3.6vw, 23px);
  max-width:760px;   /* đủ rộng để "Phi Hùng ♥ Bích Ngọc" nằm trọn một dòng */
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:40px 20px;
  background:transparent;
}
.page--1{
  background:
    radial-gradient(circle at 50% 18%, rgba(181,137,90,.10), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}

/* --------- LOGO H & N (SVG vector hoá, xem assets/logo.js) --------- */
.logo-holder{ display:flex; justify-content:center; margin-bottom:14px; }
.logo{ width:min(330px, 80vw); }
.logo-holder--sm .logo{ width:132px; }
.logo .logo-svg{ display:block; width:100%; height:auto; }

/* màu ăn theo bảng màu của site; riêng hai chữ cái giữ gradient mạ vàng trong SVG */
.logo .hn-line{ fill:#e3c07f; }
.logo .hn-pale{ fill:#f2e6d2; }

.kicker{
  letter-spacing:.35em;
  font-size:13px;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-family:'Marcellus', serif;
  margin-bottom:6px;
  text-align:center;
}

/* Dòng "Trân trọng kính mời" trên trang 1 — bằng cỡ dòng "11:00 · Thứ Năm…" */
#hero > .kicker{
  font-size:var(--time-size);
  letter-spacing:.2em;
  line-height:1.3;
  margin-bottom:8px;
  color:var(--ink-soft);
}

/* tên khách mời (?ten=) — bằng đúng cỡ tên cô dâu chú rể */
.guest-name{
  font-family:'Great Vibes', cursive;
  font-size:var(--name-size);
  color:var(--gold-deep);
  line-height:1.3;
  margin:2px 0 4px;
}

.invite-line{
  font-size:15px;
  letter-spacing:.06em;
  max-width:480px;
  color:var(--ink-soft);
  margin:18px 0 6px;
  font-style:italic;
}

.couple-names{
  font-family:'Great Vibes', cursive;
  font-size:var(--name-size);
  color:var(--gold-deep);
  line-height:1.25;
  margin:10px 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  max-width:100%;
}
/* mỗi tên là một khối liền — không bao giờ bị ngắt giữa chừng */
.couple-names .nm{white-space:nowrap;}
.amp{
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 .22em;
  color:var(--gold);
}
/* Chữ Great Vibes có chân chữ dài, tim canh giữa hộp sẽ trông hơi cao
   -> hạ xuống một chút cho cân mắt. */
.amp svg{
  width:.38em; height:.38em;
  display:block;
  transform:translateY(.04em);
}
/* điện thoại: xếp tên / & / tên thành ba dòng cho gọn */
@media(max-width:560px){
  .couple-names{flex-direction:column; line-height:1.2;}
  /* xếp dọc: tim thành một dòng riêng, cần khoảng thở kẻo chạm chân chữ */
  .amp{margin:.1em 0;}
  .amp svg{width:.42em; height:.42em; transform:none;}
}

.date-badge{
  margin-top:20px;
  font-family:'Marcellus', serif;
  font-size:clamp(20px, 4vw, 26px);
  letter-spacing:.12em;
  color:var(--ink);
  padding:10px 26px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.date-badge + .date-badge{margin-top:12px;}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.25em; color:var(--ink-soft);
  text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* thông tin ngày giờ ngay trang đầu */
.hero-when{
  margin-top:26px;
  display:grid; gap:16px;
  width:min(560px, 100%);
}
.when-block{
  padding:14px 12px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.when-title{
  font-family:'Marcellus', serif;
  letter-spacing:.2em; text-transform:uppercase;
  font-size:12px; color:var(--gold-deep);
  margin-bottom:7px;
}
.when-time{
  font-family:'Marcellus', serif;
  font-size:var(--time-size);
  letter-spacing:.08em; color:var(--ink);
}
.when-where{font-size:15px; color:var(--ink-soft); margin-top:6px;}
.when-note{font-size:13.5px; color:var(--ink-soft); font-style:italic; margin-top:3px;}

/* --------- PHOTO (trang 2) --------- */
#photo{text-align:center;}
.photo-frame{
  position:relative;
  width:min(420px, 62vh);
  aspect-ratio:2 / 3;
  margin:20px auto 0;
  padding:14px;
  border:1px solid var(--gold);
}
.photo-frame::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid var(--gold);
  opacity:.5;
  pointer-events:none;
  z-index:2;
}
.slide{
  position:absolute; inset:14px;
  opacity:0; transition:opacity .9s ease;
  background-size:cover; background-position:center;   /* ảnh mờ 20px làm nền chờ */
}
.slide.on{opacity:1;}
.slide img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
/* nút chuyển ảnh — nằm đè lên hai mép ảnh */
.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:38px; height:38px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  background:rgba(110,20,32,.55);
  color:var(--gold-deep);
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.nav svg{width:18px; height:18px;}
.nav.prev{left:20px;}
.nav.next{right:20px;}
.nav:hover{background:var(--gold-deep); color:#6e1420;}
@media(hover:none){ .nav{background:rgba(110,20,32,.62);} }

.dots{
  display:flex; gap:9px; justify-content:center;
  margin-top:16px;
}
.dot{
  width:8px; height:8px; padding:0;
  border:1px solid var(--gold); border-radius:50%;
  background:transparent; cursor:pointer;
  transition:background .3s ease;
}
.dot.on{background:var(--gold);}
.dot:hover{background:var(--gold-deep);}

/* gợi ý vuốt, chỉ hiện trên máy cảm ứng */
.swipe-hint{display:none;}
@media(hover:none){
  .swipe-hint{
    display:block; margin-top:8px;
    font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-soft); opacity:.75;
  }
}
.photo-caption{
  margin-top:16px;
  font-family:'Great Vibes', cursive;
  font-size:clamp(26px,4.2vw,34px);
  color:var(--gold-deep);
}

/* --------- COUNTDOWN --------- */
#countdown{text-align:center;}
.count-groups{
  display:grid; gap:26px;
  margin-top:20px;
}
@media(min-width:760px){
  .count-groups{grid-template-columns:1fr 1fr; gap:34px;}
}
.count-title{
  font-family:'Marcellus', serif;
  letter-spacing:.18em; text-transform:uppercase;
  font-size:12.5px; color:var(--gold-deep);
}
.count-grid{
  display:flex; gap:clamp(8px,2.4vw,18px); justify-content:center; flex-wrap:wrap;
  margin-top:14px;
}
.count-box{
  min-width:74px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 10px;
}
.count-num{
  font-family:'Marcellus', serif;
  font-size:clamp(26px,4.4vw,36px);
  color:var(--gold-deep);
}
.count-label{
  font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:4px;
}

/* --------- NÚT --------- */
.btn{
  display:inline-block; margin-top:16px;
  padding:12px 32px;
  border:1px solid var(--gold-deep);
  color:var(--gold-deep);
  font-family:'Marcellus', serif;
  letter-spacing:.12em;
  font-size:13.5px;
  text-transform:uppercase;
  border-radius:2px;
  transition:background .3s ease, color .3s ease;
  cursor:pointer;
  background:transparent;
}
.btn:hover{background:var(--gold-deep); color:var(--cream);}
.btn:disabled{opacity:.5; cursor:default;}
.btn:disabled:hover{background:transparent; color:var(--gold-deep);}
.btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:4px;}

/* --------- RSVP --------- */
#rsvp{text-align:center;}
.rsvp-form{
  max-width:460px; margin:30px auto 0;
  display:grid; gap:16px; text-align:left;
}
.field{display:grid; gap:6px;}
.field label{
  font-family:'Marcellus', serif; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep);
}
.field input, .field select, .field textarea{
  font-family:'Cormorant Garamond', serif;
  font-size:17px; color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:3px;
  padding:11px 13px;
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-deep);
}
.field textarea{resize:vertical; min-height:82px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:480px){ .field-row{grid-template-columns:1fr;} }
/* bẫy bot: người thật không bao giờ nhìn thấy ô này */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.rsvp-note{
  margin-top:8px; font-size:14.5px; color:var(--ink-soft); font-style:italic;
}
.rsvp-status{
  margin-top:16px; font-size:16px; min-height:24px;
}
.rsvp-status.ok{color:var(--gold-deep);}
.rsvp-status.err{color:#a4453a;}
.rsvp-done{
  font-family:'Great Vibes', cursive;
  font-size:clamp(26px,4.2vw,34px);
  color:var(--gold-deep);
  margin-top:24px;
}

/* --------- MESSAGE --------- */
#message{text-align:center;}
#message p.big{
  font-family:'Great Vibes', cursive;
  font-size:clamp(28px,4.2vw,36px);
  color:var(--gold-deep);
}
#message p.small{font-size:16px; color:var(--ink-soft); margin-top:10px;}

/* --------- MỪNG CƯỚI (trang 4) ---------
   Cô dâu bên trái, chú rể bên phải — luôn hai cột, kể cả trên điện thoại,
   vì khách thường quét bằng máy khác hoặc chụp màn hình lại. */
#gift{text-align:center;}
.gift-note{
  max-width:560px; margin:10px auto 0;
  font-size:16px; color:var(--ink-soft); line-height:1.55;
}
.gift-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 4vw, 40px);
  max-width:620px; margin:22px auto 0;
}
.gift-card{display:flex; flex-direction:column; align-items:center; min-width:0;}
.gift-who{display:flex; flex-direction:column; align-items:center; margin-bottom:10px;}
.gift-role{
  /* Marcellus thiếu dấu tiếng Việt chồng hai tầng (Ể, Ầ…) -> dùng Cormorant */
  font-family:'Cormorant Garamond', serif; font-weight:600; font-size:14px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}
.gift-name{font-size:clamp(26px, 4.4vw, 34px); color:var(--gold-deep); line-height:1.15;}
.gift-qr{
  display:block; width:100%; max-width:260px; height:auto;
  border-radius:14px; border:1px solid var(--gold);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  background:#f4f7e6;
}
.gift-acc{
  margin-top:10px; font-size:14px; color:var(--ink-soft); line-height:1.4;
  display:flex; flex-direction:column;
}
.gift-acc b{font-family:'Marcellus', serif; font-weight:400; color:var(--ink); letter-spacing:.06em; font-size:15px;}
.btn--sm{padding:8px 18px; font-size:12px; margin-top:8px;}

/* --------- FOOTER --------- */
footer{
  text-align:center; padding:30px 20px 46px;
}
footer .thanks{margin-top:14px; font-size:15px; color:var(--ink-soft); letter-spacing:.04em;}
footer .side-switch{
  margin-top:18px; font-size:14px; color:var(--ink-soft);
}
footer .side-switch a{
  color:var(--gold-deep); border-bottom:1px solid var(--line);
}

noscript .ns{
  max-width:560px; margin:40px auto; padding:24px; text-align:center;
  border:1px solid var(--line); background:var(--cream-2);
}

/* --------- TRANG 1 TRÊN ĐIỆN THOẠI ---------
   Mốc chuẩn: iPhone 15 (393 x 852, vùng thấy được ~700px sau thanh Safari).
   Logo thu nhỏ và các khoảng cách bóp lại để khối tiệc Hạ Long vẫn nằm trọn
   trong màn hình đầu tiên, không phải cuộn mới thấy. */
@media(max-width:700px){
  #hero{padding:20px 18px;}
  .logo{width:min(172px, 44vw);}
  .logo-holder{margin-bottom:8px;}
  .kicker{font-size:12px; margin-bottom:4px;}
  #hero > .kicker{margin-bottom:6px;}
  .guest-name{margin:0;}
  .invite-line{font-size:14px; margin:10px 0 2px;}
  #hero{--name-size:clamp(32px, 8vw, 40px); --time-size:17px;}
  .couple-names{line-height:1.12; margin:4px 0;}
  .hero-when{margin-top:14px; gap:10px; width:100%;}
  .when-block{padding:9px 8px;}
  .when-title{font-size:11px; letter-spacing:.16em; margin-bottom:4px;}
  .when-where{font-size:13px; line-height:1.45; margin-top:4px;}
  .scroll-cue{bottom:8px; font-size:10px;}

  .count-box{min-width:66px; padding:12px 8px;}
  .btn{padding:10px 22px; font-size:12.5px; margin-top:12px;}
  footer{padding:22px 20px 30px;}
  .logo-holder--sm .logo{width:104px;}
}

/* máy nhỏ hơn nữa (SE, màn hình chia đôi): bỏ luôn dòng "cuộn xuống" lấy chỗ */
@media(max-width:700px) and (max-height:700px){
  .logo{width:min(132px, 36vw);}
  .scroll-cue{display:none;}
}

/* laptop màn thấp: logo ăn theo chiều cao cửa sổ */
@media(min-width:701px) and (max-height:820px){
  .logo{width:min(330px, 30vh);}
}

@media(max-width:480px){
  section{padding:28px 16px;}
  .corner-flourish{width:70px; height:70px;}
}