/* ===== Màu lấy từ config.js (được gán vào :root bởi script.js) ===== */
:root{
  --chinh:#3f6b4f; --phu:#c9a86a; --nen:#f7f3ea; --chu:#3a3a34;
  --script:'Great Vibes',cursive;
  --serif:'Playfair Display',serif;
  --sans:'Be Vietnam Pro',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--chu);background:#e9e4d8;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

/* Khung giữa giống điện thoại trên máy tính */
.cover,.detail{max-width:480px;margin:0 auto;background:var(--nen);position:relative}
.detail{box-shadow:0 0 40px rgba(0,0,0,.08);overflow:hidden}

/* Ảnh nền trang chi tiết (bật trong config.js → nenTrang) */
.detail.has-bg{background:transparent}
.page-bg{
  position:fixed;top:0;bottom:0;left:50%;width:min(480px,100%);transform:translateX(-50%);
  z-index:-1;background-size:cover;background-position:center;background-repeat:no-repeat;
}
.page-bg.tile{background-size:auto;background-repeat:repeat}
.page-bg::after{content:"";position:absolute;inset:0;background:var(--nen);opacity:var(--doMo,.6)}
.has-bg .block:nth-of-type(even){background:rgba(255,255,255,.35)}

.btn{
  display:inline-block;border:none;border-radius:999px;padding:12px 30px;
  background:var(--chinh);color:#fff;letter-spacing:.08em;font-size:14px;
  text-transform:uppercase;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.btn-outline{background:transparent;color:var(--chinh);border:1px solid var(--chinh);box-shadow:none}
.ornament{color:var(--phu);font-size:26px;line-height:1;margin:10px 0}
.amp{font-family:var(--script);color:var(--phu);display:block;font-size:.8em;line-height:1.1}

/* ===== Hoa văn sen (SVG chèn bằng JS) ===== */
.lotus{position:absolute;width:130px;color:var(--chinh);opacity:.85;pointer-events:none}
.lotus svg{width:100%;height:auto}
.lotus-tl{top:-10px;left:-14px;transform:rotate(-12deg)}
.lotus-br{bottom:-10px;right:-14px;transform:rotate(168deg)}
.lotus-c{position:static;margin:0 auto 6px;width:70px;opacity:.9}
/* Icon hoa sen dạng ảnh màu nước */
.lotus img{width:100%;height:auto;display:block}
.lotus-img .lotus{opacity:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.08))}
.lotus-img .lotus-tl{width:150px;top:-18px;left:-26px;transform:rotate(-8deg)}
.lotus-img .lotus-br{width:150px;bottom:-16px;right:-26px;transform:scaleX(-1) rotate(-8deg)}
.lotus-img .lotus-c{width:110px;margin:0 auto 10px;animation:lotusFloat 5s ease-in-out infinite}
@keyframes lotusFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ===================== TRANG BÌA ===================== */
.cover{
  min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:28px 20px;overflow:hidden;
  transition:transform 1s cubic-bezier(.7,0,.3,1),opacity 1s;
}
.cover-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.92)}
.cover-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,243,234,.25),rgba(247,243,234,.75))}
.cover-card{
  position:relative;z-index:1;width:100%;text-align:center;
  background:rgba(247,243,234,.92);border:1px solid var(--phu);
  outline:1px solid var(--phu);outline-offset:-10px;
  padding:56px 24px 44px;border-radius:4px;overflow:hidden;
  animation:floatIn 1.4s ease both;
}
.cover-small{font-family:var(--serif);font-style:italic;color:var(--phu);letter-spacing:.1em}
.cover-names{font-family:var(--serif);font-weight:600;color:var(--chinh);font-size:clamp(30px,9vw,42px);letter-spacing:.06em;line-height:1.2;margin:10px 0}
.cover-names .amp{font-size:56px;margin:4px 0}
.cover-date{font-family:var(--serif);font-size:18px;letter-spacing:.05em}
.cover-invite{font-family:var(--script);font-size:32px;color:var(--chinh);margin:10px 0 24px}
.btn-open{animation:pulse 2s infinite}
.cover.open{transform:translateY(-100%);opacity:0}

@keyframes floatIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,107,79,.45)}50%{box-shadow:0 0 0 14px rgba(63,107,79,0)}}

/* ===================== CHI TIẾT ===================== */
.detail{animation:fadeIn 1s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ----- Phần đầu trang chi tiết ----- */
.hero{padding:34px 26px 30px;text-align:center;position:relative}
.hero-head{position:relative;height:132px;margin:0 4px 6px}
.hero-amp{
  position:absolute;left:22%;top:-28px;font-family:var(--script);font-size:170px;line-height:1;
  color:var(--chinh);opacity:.13;pointer-events:none;animation:ampIn 2s ease both
}
@keyframes ampIn{from{opacity:0;transform:scale(.8)}to{opacity:.13;transform:none}}
.hn{
  position:absolute;margin:0;font-family:var(--serif);font-style:italic;font-weight:600;
  color:var(--chinh);font-size:clamp(20px,6vw,26px);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap
}
.hn-bride{left:10%;top:28px}
.hn-groom{right:4%;top:84px}
.hero-photo{position:relative;width:88%;margin:0 auto}
.hero-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 12px 22px rgba(0,0,0,.12))}
.hero-img{transform-origin:center;animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* Hoa trang trí ở góc */
.hero-flower{position:absolute;pointer-events:none;z-index:3}
.hero-flower img,.hero-flower svg{width:100%;height:auto;display:block}
.fl-top{top:-26px;right:1px;width:25%;transform-origin:top right;animation:sway 6s ease-in-out infinite}
.fl-bottom{left:-17%;bottom:-11%;width:40%;transform-origin:bottom left;animation:sway 7s ease-in-out infinite reverse}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}

.countdown{display:flex;justify-content:center;gap:10px;margin-top:20px}
.countdown div{width:64px;padding:10px 0;border:1px solid var(--phu);border-radius:8px;background:#fff}
.countdown b{display:block;font-family:var(--serif);font-size:24px;color:var(--chinh)}
.countdown span{font-size:11px;text-transform:uppercase;letter-spacing:.08em}

.block{padding:46px 22px;text-align:center;position:relative}
.block:nth-of-type(even){background:rgba(255,255,255,.55)}
.title{font-family:var(--serif);font-weight:600;color:var(--chinh);font-size:26px;letter-spacing:.12em;text-transform:uppercase}
.title-script{font-family:var(--script);font-weight:400;font-size:42px;letter-spacing:0;text-transform:none}
.sub{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}

/* Gia đình */
.parents{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.parents h4{font-family:var(--serif);color:var(--phu);font-weight:400;font-style:italic;font-size:16px}
.parents p{font-size:14px}
.parents .pl{display:block}
.parents small{display:block;font-size:12px;opacity:.75;margin-top:4px}
.announce{font-size:13px;letter-spacing:.12em;margin:10px 0 18px}
.person h3{font-family:var(--script);font-weight:400;color:var(--chinh);font-size:38px;line-height:1.2}
.person p{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--phu)}

/* Khối ngày giờ */
.datebox{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,3vw,18px);margin:20px -6px 10px;font-family:var(--serif)}
.datebox .side{flex:1;padding:14px 0;border-top:1.5px solid var(--phu);border-bottom:1.5px solid var(--phu);font-size:clamp(16px,4.6vw,21px);line-height:1.55;letter-spacing:.08em;font-weight:600;color:var(--chinh)}
.datebox .day{flex:none;font-size:clamp(72px,22vw,100px);color:var(--chinh);line-height:.9;font-weight:600;padding:0 4px}
.lunar{font-size:clamp(14px,3.8vw,16px);font-style:italic;opacity:.85}

/* Album */
.album-slider{position:relative;margin:24px 0 12px;overflow:hidden;border-radius:10px;aspect-ratio:4/5;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.album-track{display:flex;height:100%;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.album-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.album-dots{display:flex;justify-content:center;gap:6px;margin-bottom:16px}
.album-dots i{width:8px;height:8px;border-radius:50%;background:var(--phu);opacity:.35;transition:.3s;cursor:pointer}
.album-dots i.on{opacity:1;width:22px;border-radius:5px}
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.album-grid img{aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:zoom-in;transition:transform .3s}
.album-grid img:hover{transform:scale(1.04)}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.75);color:var(--chinh);display:flex;align-items:center;justify-content:center;z-index:20;transition:transform .2s}
.slide-arrow:hover{transform:translateY(-50%) scale(1.1)}
.slide-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slide-arrow.prev{left:10px}.slide-arrow.next{right:10px}

/* ----- Album kiểu 3D coverflow ----- */
.album-slider.cf{overflow:visible;box-shadow:none;border-radius:0;aspect-ratio:auto;height:clamp(280px,80vw,400px);margin:28px -22px 16px}
.cf .album-track{position:relative;height:100%;perspective:1100px;transform-style:preserve-3d}
.cf .album-track img{
  position:absolute;top:0;left:50%;width:52%;height:100%;object-fit:cover;
  border-radius:14px;border:3px solid rgba(255,255,255,.9);
  box-shadow:0 14px 34px rgba(0,0,0,.22);cursor:pointer;user-select:none;
  transition:transform .8s cubic-bezier(.22,.8,.3,1),opacity .8s,filter .8s;
}
.cf .album-track img.active{cursor:zoom-in}
.cf .slide-arrow{background:rgba(40,50,40,.55);color:#fff;left:auto;right:auto}
.cf .slide-arrow.prev{left:calc(24% - 19px)}
.cf .slide-arrow.next{right:calc(24% - 19px)}
.album-dots i.on{background:var(--chinh)}

/* Chuyện tình */
.timeline{position:relative;margin-top:26px;text-align:left}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--phu)}
.tl-item{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:28px;position:relative}
.tl-item::after{content:"♥";position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--nen);color:var(--chinh);font-size:14px;padding:2px}
.tl-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.tl-item .tl-date{font-family:var(--serif);color:var(--phu);font-style:italic}
.tl-item h4{font-family:var(--serif);color:var(--chinh);font-size:17px;margin:2px 0}
.tl-item p{font-size:13px}
.tl-item:nth-child(even) .tl-text{order:-1;text-align:right}

/* Tiệc */
.schedule{display:flex;justify-content:center;gap:12px;margin:18px 0}
.schedule div{padding:10px 18px;border:1px dashed var(--phu);border-radius:8px;font-size:13px}
.schedule b{display:block;font-family:var(--serif);color:var(--chinh);font-size:18px}
.calendar{background:#fff;border-radius:12px;padding:16px;margin:20px 0;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.calendar h4{font-family:var(--serif);color:var(--chinh);margin-bottom:10px;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:13px}
.cal-grid .wd{font-weight:500;color:var(--phu);font-size:12px}
.cal-grid span{padding:6px 0;border-radius:50%}
.cal-grid .hl{background:var(--chinh);color:#fff;position:relative;animation:beat 1.4s infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.venue{margin-top:30px}
.venue h4{font-family:var(--serif);color:var(--chinh);font-size:20px;font-weight:600}
.map{margin:16px 0;border-radius:12px;overflow:hidden;border:1px solid var(--phu);aspect-ratio:4/3}
.map iframe{width:100%;height:100%;border:0}

/* Lưu bút */
.wish-form{display:grid;gap:10px;margin:22px 0}
.wish-list{display:grid;gap:10px;max-height:360px;overflow:auto;text-align:left;padding:4px}
.wish{background:#fff;border-left:3px solid var(--phu);padding:10px 14px;border-radius:6px;font-size:14px;animation:floatIn .6s both}
.wish b{color:var(--chinh);display:block;font-family:var(--serif)}
input,select,textarea{
  width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid #d9d1bd;border-radius:8px;background:#fff;color:var(--chu)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--phu);border-color:transparent}

/* Quà */
.gift-box{width:150px;margin:24px auto 10px;cursor:pointer;animation:wiggle 2.4s ease-in-out infinite;color:var(--chinh)}
.gift-box svg{width:100%;height:auto}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
.gift-list{display:grid;gap:22px}
.gift-item{border:1px solid #eee3cc;border-radius:12px;padding:16px}
.gift-item h4{font-family:var(--serif);color:var(--chinh);margin-bottom:8px}
.gift-item img{width:200px;margin:0 auto 10px;border-radius:8px}
.gift-item p{font-size:14px}
.gift-item .acc{font-family:var(--serif);font-size:20px;letter-spacing:.06em;color:var(--chinh)}

/* Footer */
.footer{padding:40px 26px 70px;text-align:center}
.footer p{font-size:14px}
.footer-names{font-family:var(--script);font-size:34px;color:var(--chinh);margin-top:10px}

/* ===================== POPUP ===================== */
.modal,.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s}
.modal{background:rgba(30,30,25,.55);padding:20px}
.modal-box{position:relative;width:100%;max-width:400px;max-height:90vh;overflow:auto;background:var(--nen);border-radius:14px;padding:28px 22px;text-align:center;animation:floatIn .4s}
.modal-box h3{font-family:var(--serif);color:var(--chinh);margin-bottom:16px}
.modal-box form{display:grid;gap:10px}
.modal-close,.lb-close{position:absolute;top:8px;right:12px;border:none;background:none;font-size:30px;line-height:1;color:inherit}
.lightbox{background:rgba(0,0,0,.92);color:#fff;flex-direction:column}
.lb-stage{width:100%;max-width:900px;flex:1;display:flex;align-items:center;justify-content:center;padding:50px 50px 10px;min-height:0}
.lb-stage img{max-height:100%;max-width:100%;object-fit:contain;animation:fadeIn .4s}
.lb-close{z-index:2;color:#fff}
.lb-count{position:absolute;top:14px;left:16px;font-size:14px;opacity:.8}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.12);color:#fff;font-size:34px;width:46px;height:46px;border-radius:50%;z-index:2}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-thumbs{display:flex;gap:6px;padding:12px;overflow-x:auto;max-width:100%}
.lb-thumbs img{width:54px;height:54px;object-fit:cover;border-radius:4px;opacity:.45;cursor:pointer;flex:none}
.lb-thumbs img.on{opacity:1;outline:2px solid var(--phu)}

/* Nút nhạc */
.music-btn{
  position:fixed;right:16px;bottom:16px;z-index:90;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--phu);background:var(--nen);color:var(--chinh);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18)
}
.music-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.music-btn.playing{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,20px);background:var(--chinh);color:#fff;padding:10px 20px;border-radius:999px;font-size:14px;opacity:0;transition:.4s;z-index:200;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Hoa rơi */
#petals{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.petal{position:absolute;top:-30px;width:14px;height:14px;background:#f3c6cf;border-radius:14px 0;opacity:.8;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}

/* Hiệu ứng hiện dần khi cuộn */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
.reveal.from-left{transform:translateX(-50px)}
.reveal.from-right{transform:translateX(50px)}
.reveal.zoom{transform:scale(.85)}
.reveal.show{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

.hero .countdown{margin-top:64px;position:relative;z-index:4}

/* ===== Dải ảnh trích dẫn ===== */
.quote-band{
  position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;
  padding:60px 30px;background-size:cover;background-position:center 25%;text-align:center;overflow:hidden
}
.quote-band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,40,32,.25),rgba(30,40,32,.62))}
.quote-inner{position:relative;color:#fff;max-width:360px}
.quote-mark{display:block;font-family:var(--serif);font-size:90px;line-height:.6;color:var(--phu);height:40px}
.quote-inner p{font-family:var(--serif);font-style:italic;font-size:clamp(19px,5.4vw,24px);line-height:1.55;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.quote-by{display:block;margin-top:16px;font-family:var(--script);font-size:30px;color:#f3e3c0}

/* ===== Nút đặt thiệp (demo quảng cáo) ===== */
.cta-btn{
  position:fixed;left:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:8px;
  padding:11px 18px 11px 14px;border-radius:999px;background:var(--phu);color:#fff;text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:.02em;box-shadow:0 6px 18px rgba(0,0,0,.22);
  animation:ctaPulse 2.6s ease-in-out infinite
}
.cta-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
@keyframes ctaPulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.22),0 0 0 0 rgba(201,168,106,.55)}50%{box-shadow:0 6px 18px rgba(0,0,0,.22),0 0 0 12px rgba(201,168,106,0)}}
@media (min-width:520px){.cta-btn{left:calc(50% - 240px + 16px)}}
.footer-credit{margin-top:18px;font-size:12px !important;letter-spacing:.04em;opacity:.7}
.footer-credit a{color:inherit}