/* ==========================================================================
   LUMI WEDDING — Wedding planner · trang trí · điều phối tiệc cưới
   Bố cục: header trong suốt đè lên hero, logo script ở giữa, nav mảnh cách
   chữ × hero ảnh tràn màn full-height chữ script ở giữa + mũi tên cuộn ×
   body: giới thiệu 2 cột có ảnh chồng lệch, dịch vụ 3 cột có hoa văn chia,
   đám cưới thực tế masonry hover hiện tên cặp đôi, quy trình zigzag dọc,
   trích dẫn dấu ngoặc lớn, gói dịch vụ bảng thanh lịch, form có ngày cưới +
   số khách.
   Font: Great Vibes (script) + Cormorant Garamond + Jost. Màu: blush #F4E1E1,
   sage #9CAF88, champagne #D9B99B, ink #2B2B2B.
   ========================================================================== */
:root{
  --blush:#F4E1E1; --blush-deep:#E8C9C9; --sage:#9CAF88; --sage-deep:#7A9068; --champ:#D9B99B; --champ-deep:#B8956F;
  --ink:#2B2B2B; --muted:#7A7470; --line:#EDE6E0; --cream:#FBF8F4; --ph:#E6DCD3;
  --ff-s:'Great Vibes',cursive; --ff-h:'Cormorant Garamond',Georgia,serif; --ff:'Jost',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);color:var(--ink);background:#fff;line-height:1.7;font-size:15.5px;font-weight:300}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--ff-h);font-weight:500;line-height:1.15;color:var(--ink)}
.script{font-family:var(--ff-s);font-weight:400;color:var(--champ-deep)}
.container{width:min(1140px,92%);margin:0 auto}
.ph{background:var(--img,var(--ph)) center/cover no-repeat}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;border:1px solid var(--ink);transition:.25s;cursor:pointer}
.btn--ink{background:var(--ink);color:#fff}.btn--ink:hover{background:var(--sage-deep);border-color:var(--sage-deep)}
.btn--line{color:var(--ink)}.btn--line:hover{background:var(--ink);color:#fff}
.btn--white{border-color:#fff;color:#fff}.btn--white:hover{background:#fff;color:var(--ink)}
.btn--sage{background:var(--sage);border-color:var(--sage);color:#fff}.btn--sage:hover{background:var(--sage-deep)}

/* ---------- Header trong suốt ---------- */
.header{position:absolute;top:0;left:0;right:0;z-index:50;color:#fff}
.header--solid{position:sticky;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100px}
.nav{display:flex;gap:34px}
.nav--right{justify-content:flex-end}
.nav a{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;opacity:.9}
.nav a:hover,.nav a.is-active{border-color:currentColor;opacity:1}
.logo{font-family:var(--ff-s);font-size:40px;line-height:1;padding:0 30px;text-align:center}
.logo small{display:block;font-family:var(--ff);font-size:9px;letter-spacing:.4em;text-transform:uppercase;margin-top:6px;opacity:.85}
.burger{display:none;background:none;border:0;cursor:pointer;color:inherit}
.burger svg{width:28px;height:28px}

/* ---------- Hero tràn màn ---------- */
.hero{position:relative;min-height:min(100vh,860px);display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.hero .ph{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,43,43,.45),rgba(43,43,43,.25) 50%,rgba(43,43,43,.55))}
.hero__in{position:relative;z-index:1;padding:120px 0 80px}
.hero__kicker{font-size:11.5px;letter-spacing:.4em;text-transform:uppercase;margin-bottom:22px;opacity:.9}
.hero h1{font-size:clamp(44px,6vw,86px);color:#fff;font-weight:400;line-height:1.05}
.hero h1 .script{display:block;font-size:clamp(50px,7vw,110px);color:#fff;margin-top:-6px}
.hero p{max-width:520px;margin:22px auto 34px;font-size:16px;opacity:.92}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:1;font-size:10px;letter-spacing:.4em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.85}
.scroll::after{content:"";width:1px;height:44px;background:#fff;animation:sc 1.8s ease-in-out infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Ornament ---------- */
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--champ);margin:0 auto 18px}
.orn::before,.orn::after{content:"";width:60px;height:1px;background:var(--champ)}
.orn svg{width:16px;height:16px;stroke-width:1.2}

/* ---------- Sections ---------- */
.section{padding:110px 0}
.section--cream{background:var(--cream)}
.section--blush{background:var(--blush)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h2,.section--ink h3{color:#fff}
.section__head{text-align:center;max-width:640px;margin:0 auto 60px}
.section__kicker{display:block;font-family:var(--ff-s);font-size:34px;color:var(--champ-deep);margin-bottom:-4px}
.section__title{font-size:clamp(34px,4vw,54px);font-weight:400}
.section__head p{color:var(--muted);margin-top:14px;font-size:16px}
.section--ink .section__head p{color:#C9C4BF}

/* ---------- Giới thiệu ảnh chồng ---------- */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.intro__imgs{position:relative;padding:0 60px 60px 0}
.intro__imgs .ph:first-child{aspect-ratio:4/5}
.intro__imgs .ph:last-child{position:absolute;right:0;bottom:0;width:55%;aspect-ratio:1;border:10px solid #fff;box-shadow:0 20px 50px rgba(43,43,43,.12)}
.intro__txt .section__kicker{text-align:left}
.intro__txt h2{font-size:clamp(32px,3.6vw,48px);font-weight:400;margin-bottom:20px}
.intro__txt p{color:var(--muted);margin-bottom:14px}
.intro__sig{font-family:var(--ff-s);font-size:34px;color:var(--champ-deep);margin-top:22px}
.intro__sig small{display:block;font-family:var(--ff);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:-4px}

/* ---------- Dịch vụ 3 cột ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.service{padding:0 40px;text-align:center;border-right:1px solid var(--line)}
.service:last-child{border-right:0}
.service .ph{aspect-ratio:3/4;margin-bottom:26px}
.service .no{font-family:var(--ff-s);font-size:34px;color:var(--champ-deep);display:block}
.service h3{font-size:28px;margin:4px 0 12px;font-weight:400}
.service p{color:var(--muted);font-size:14.5px}
.service a{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;border-bottom:1px solid var(--champ);padding-bottom:4px}

/* Trang dịch vụ: hàng xen kẽ */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:60px 0}
.svc-row:nth-child(even) .svc-row__img{order:2}
.svc-row__img .ph{aspect-ratio:4/5;max-width:440px}
.svc-row:nth-child(even) .svc-row__img .ph{margin-left:auto}
.svc-row h2{font-size:clamp(30px,3.4vw,44px);font-weight:400;margin:4px 0 16px}
.svc-row p{color:var(--muted);margin-bottom:14px}
.svc-row ul{display:grid;gap:8px;font-size:14.5px;margin:18px 0 24px}
.svc-row ul li{padding-left:22px;position:relative}
.svc-row ul li::before{content:"✦";position:absolute;left:0;color:var(--champ);font-size:11px;top:4px}
.svc-row .from{font-family:var(--ff-h);font-size:22px;color:var(--ink)}
.svc-row .from b{font-weight:500;color:var(--champ-deep)}

/* ---------- Đám cưới thực tế masonry ---------- */
.weddings{columns:3;column-gap:20px}
.wedding{break-inside:avoid;margin-bottom:20px;position:relative;overflow:hidden;display:block}
.wedding .ph{width:100%;transition:.6s}
.wedding:hover .ph{transform:scale(1.04)}
.wedding__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;background:linear-gradient(180deg,transparent 40%,rgba(43,43,43,.7));opacity:0;transition:.4s}
.wedding:hover .wedding__cap{opacity:1}
.wedding__cap .script{color:#fff;font-size:34px;line-height:1}
.wedding__cap span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.9}
.w-tall{aspect-ratio:3/4}.w-wide{aspect-ratio:4/3}.w-sq{aspect-ratio:1}

/* ---------- Quy trình zigzag ---------- */
.process{position:relative;max-width:900px;margin:0 auto}
.process::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--champ);opacity:.6}
.pstep{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:30px;margin-bottom:50px}
.pstep:last-child{margin-bottom:0}
.pstep__no{width:60px;height:60px;border-radius:50%;background:#fff;border:1px solid var(--champ);display:grid;place-items:center;font-family:var(--ff-s);font-size:26px;color:var(--champ-deep);grid-column:2}
.pstep__txt{grid-column:1;text-align:right;grid-row:1}
.pstep:nth-child(even) .pstep__txt{grid-column:3;text-align:left}
.pstep__txt h3{font-size:26px;font-weight:400;margin-bottom:6px}
.pstep__txt p{color:var(--muted);font-size:14.5px}
.pstep__txt small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--champ-deep);margin-bottom:6px}

/* ---------- Trích dẫn ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:50px}
.quote{position:relative;padding:40px 36px 30px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.quote::before{content:"“";position:absolute;left:24px;top:-30px;font-family:var(--ff-h);font-size:110px;line-height:1;color:var(--champ)}
.quote p{font-family:var(--ff-h);font-size:22px;line-height:1.5;font-style:italic;color:#F1EDE8}
.quote .who{margin-top:22px;display:flex;align-items:center;gap:14px}
.quote .who .ph{width:48px;height:48px;border-radius:50%}
.quote .who b{display:block;font-family:var(--ff-s);font-size:24px;font-weight:400;color:var(--champ)}
.quote .who small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#C9C4BF}

/* ---------- Gói dịch vụ bảng ---------- */
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.pack{background:#fff;padding:40px 34px;text-align:center;border:1px solid var(--line);display:flex;flex-direction:column;position:relative}
.pack--hot{border-color:var(--champ);box-shadow:0 20px 50px rgba(217,185,155,.25)}
.pack__tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--champ);color:#fff;font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:6px 16px}
.pack .script{font-size:36px;display:block}
.pack h3{font-size:26px;font-weight:400;margin:-6px 0 6px}
.pack .desc{color:var(--muted);font-size:14px;margin-bottom:22px}
.pack .price{font-family:var(--ff-h);font-size:40px;line-height:1;color:var(--ink)}
.pack .price small{display:block;font-family:var(--ff);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.pack ul{margin:26px 0;display:grid;gap:10px;font-size:14px;flex:1;text-align:left}
.pack ul li{padding-left:22px;position:relative}
.pack ul li::before{content:"✦";position:absolute;left:0;color:var(--champ);font-size:10px;top:5px}
.pack ul li.off{color:#B9B3AD}.pack ul li.off::before{content:"—"}

/* ---------- Đối tác ---------- */
.vendors{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vendors span{font-family:var(--ff-h);font-size:22px;letter-spacing:.06em;color:#B9B3AD;text-transform:uppercase}

/* ---------- Form ---------- */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:start}
.contact__info h2{font-size:clamp(30px,3.4vw,44px);font-weight:400;margin-bottom:16px}
.contact__info p{color:var(--muted);margin-bottom:22px}
.contact__row{padding:16px 0;border-top:1px solid var(--line);font-size:14.5px}
.contact__row b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--champ-deep);font-weight:400;margin-bottom:2px}
.form{background:#fff;padding:44px;border:1px solid var(--line)}
.form h3{font-size:30px;font-weight:400;margin-bottom:6px}
.form>p{color:var(--muted);font-size:14px;margin-bottom:26px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.field input,.field select,.field textarea{border:0;border-bottom:1px solid var(--ink);background:transparent;padding:10px 0;font:inherit;font-size:15px;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--champ-deep);border-bottom-width:2px}
.field textarea{min-height:90px;resize:vertical}
.form .btn{margin-top:30px;width:100%;justify-content:center}
.form .note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}

/* ---------- Pagehead ---------- */
.pagehead{position:relative;min-height:440px;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.pagehead .ph{position:absolute;inset:0}
.pagehead::after{content:"";position:absolute;inset:0;background:rgba(43,43,43,.5)}
.pagehead__in{position:relative;z-index:1;padding-top:100px}
.pagehead .script{color:#fff;font-size:44px;display:block}
.pagehead h1{color:#fff;font-size:clamp(40px,5vw,66px);font-weight:400;margin-top:-10px}
.pagehead p{max-width:560px;margin:14px auto 0;opacity:.92}

/* ---------- CTA ---------- */
.cta{text-align:center;padding:100px 0;background:var(--blush)}
.cta .script{font-size:44px;display:block}
.cta h2{font-size:clamp(32px,4vw,52px);font-weight:400;margin:-8px 0 14px}
.cta p{color:var(--muted);max-width:520px;margin:0 auto 30px}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#C9C4BF;padding:70px 0 26px;text-align:center}
.footer .logo{color:#fff;font-size:48px;padding:0;margin-bottom:22px}
.footer__nav{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.footer__nav a{font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.footer__nav a:hover{color:var(--champ)}
.footer p{font-size:13.5px;max-width:560px;margin:0 auto}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:20px;font-size:12px;letter-spacing:.06em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.weddings{columns:2}}
@media (max-width:980px){.header__in{grid-template-columns:auto 1fr auto;height:80px}.logo{order:-1;padding:0;text-align:left;font-size:32px}.nav{display:none}.burger{display:block;justify-self:end}.nav.is-open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;color:var(--ink);padding:10px 4% 16px;gap:2px;border-bottom:1px solid var(--line)}.nav--right.is-open{top:calc(100% + 168px)}.intro,.svc-row,.contact,.quotes{grid-template-columns:1fr}.svc-row:nth-child(even) .svc-row__img{order:0}.services{grid-template-columns:1fr;gap:50px}.service{border:0;padding:0;max-width:440px;margin:0 auto}.packages{grid-template-columns:1fr;max-width:480px;margin:0 auto}.pstep{grid-template-columns:60px 1fr}.pstep__no{grid-column:1}.pstep__txt,.pstep:nth-child(even) .pstep__txt{grid-column:2;text-align:left}.process::before{left:30px}}
@media (max-width:640px){.section{padding:70px 0}.weddings{columns:1}.form{padding:26px}.form__grid{grid-template-columns:1fr}.intro__imgs{padding:0}.intro__imgs .ph:last-child{display:none}.hero{min-height:620px}}

/* Mobile nav: 2 link mỗi bên nên nav phải nối sát dưới nav trái (thay vì 168px cho 3 link) */
@media (max-width:980px){.nav#nav.is-open{border-bottom:0;padding-bottom:0}.nav--right.is-open{top:calc(100% + 78px);padding-top:0}}