/* ===== Rosé Wedding · Design System (theo bản gốc) =====
   Giữ nguyên thẩm mỹ website gốc; chỉ thay header full-width,
   feature nền trắng và bổ sung style cho các trang/tính năng mới. */
:root{
  --cream:#FAF8F4;
  --pearl:#FFFFFF;
  --paper:#F3EFE8;
  --blush:#EFE3DC;
  --ink:#1E1C1A;
  --muted:#6F685F;
  --gold:#C0A062;
  --gold-deep:#A6884B;
  --line:rgba(192,160,98,.35);
  --shadow:0 24px 60px -28px rgba(30,28,26,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'Montserrat',sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.serif{font-family:'Playfair Display',serif;font-weight:500;line-height:1.15}
.italic{font-style:italic}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
figure{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:800px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.eyebrow.gold{color:var(--gold)}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-14{margin-top:14px}
.mt-24{margin-top:24px}
.mt-48{margin-top:48px}
.desk-only{display:none}
@media(min-width:768px){.desk-only{display:inline}}
.bg-pearl{background:var(--pearl)}

/* Truy cập nhanh cho bàn phím / trình đọc màn hình */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:10px 18px;font-size:13px}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;padding:16px 34px;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:.5s var(--ease);position:relative;overflow:hidden;z-index:1}
.btn::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:.5s var(--ease);z-index:-1}
.btn:hover{color:var(--cream)}
.btn:hover::after{transform:translateY(0)}
.btn-gold{border-color:var(--gold);color:#fff}
.btn-gold::after{background:var(--gold)}
.btn-gold:hover{color:#fff;border-color:var(--gold-deep)}
.btn-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-light::after{background:#fff}
.btn-light:hover{color:var(--ink)}
.btn-block{width:100%}

/* NAV — thanh menu phủ toàn chiều ngang (giữ từ bản mới) */
#header{position:fixed;top:0;left:0;right:0;z-index:60;padding:24px 0;transition:.5s var(--ease)}
#header.solid{background:rgba(250,248,244,.97);border-bottom:1px solid var(--line);padding:14px 0}
#header.static{position:sticky}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'Playfair Display',serif;font-size:30px;letter-spacing:.02em;color:#fff;transition:.5s var(--ease);line-height:1.02;display:flex;align-items:center}
.brand b{font-weight:600}
#header.solid .brand{color:var(--ink);font-size:26px}
/* logo ảnh: bản trắng trên hero, bản đen khi thanh menu nền sáng */
.brand .logo-img{display:block;height:44px;width:auto;transition:.5s var(--ease)}
.brand .logo-light{display:block}
.brand .logo-dark{display:none}
#header.solid .brand .logo-img{height:38px}
#header.solid .brand .logo-light{display:none}
#header.solid .brand .logo-dark{display:block}
.menu{display:flex;gap:32px;align-items:center}
.menu a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:400;position:relative;padding:4px 0;transition:.4s}
#header.solid .menu a{color:var(--ink)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.4s var(--ease)}
.menu a:hover{color:var(--gold)}
.menu a:hover::after{width:100%}
.menu a.active{color:var(--gold)}
.menu .nav-cta{border:1px solid currentColor;padding:11px 20px}
.menu .nav-cta::after{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.burger span{width:26px;height:1.5px;background:#fff;transition:.4s}
#header.solid .burger span{background:var(--ink)}
/* dropdown */
.has-drop{position:relative}
.has-drop>.drop-toggle{cursor:pointer}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--pearl);border:1px solid var(--line);min-width:210px;padding:10px 0;opacity:0;visibility:hidden;transition:.35s var(--ease);box-shadow:var(--shadow)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;color:var(--ink)!important;padding:11px 24px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.drop a::after{display:none}
.drop a:hover{background:var(--paper);color:var(--gold)!important}

/* HERO */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:center}
#slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.slide.active{opacity:1;animation:kenburns 7s linear forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.14)}}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.45) 0%,rgba(20,18,16,.15) 40%,rgba(20,18,16,.55) 100%)}
.hero-inner{position:relative;z-index:5;color:#fff;max-width:920px;padding:0 28px;margin:0 auto;text-align:center;width:100%}
.hero h1{font-size:clamp(30px,6.6vw,80px);font-weight:500;letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.3);margin-top:22px}
.hero h1 .nw{white-space:nowrap}
.hero p{margin:26px auto 38px;max-width:560px;font-weight:300;font-size:16px;letter-spacing:.02em;opacity:.95}
.hero-cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.hero-line{width:1px;height:54px;background:rgba(255,255,255,.6);margin:30px auto 0}
.dots{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:6}
.dots button{width:34px;height:2px;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:.4s}
.dots button.active{background:var(--gold)}

/* SECTIONS */
.pad{padding:120px 0}
.pad-sm{padding:72px 0}
.sec-head{max-width:700px;margin:0 auto 64px}
.sec-head .eyebrow{display:block;margin-bottom:18px}
.sec-head h2{font-size:clamp(30px,4.5vw,50px)}
.sec-head p{margin-top:20px;color:var(--muted);font-size:15.5px;text-wrap:balance}
.page-hero p{text-wrap:balance}
@media(min-width:980px){.sec-head p.one-line{white-space:nowrap;margin-left:-90px;margin-right:-90px}}

/* About */
.about-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about-row + .about-row{margin-top:46px}
.about-ph{display:grid;gap:16px}
.about-ph.duo{grid-template-columns:1fr 1fr}
.about-ph figure{overflow:hidden;aspect-ratio:2/3;background:var(--paper)}
/* Ảnh lớn: hiển thị trọn khung hình gốc, không cắt */
.about-ph.single figure{aspect-ratio:auto}
.about-ph.single img{height:auto}
.about-ph img{transition:1.2s var(--ease)}
.about-ph figure:hover img{transform:scale(1.06)}
.about-tx h2{font-size:clamp(28px,4vw,46px);margin:16px 0 24px}
.about-tx p{color:var(--muted);margin-bottom:20px;font-size:15.5px}
.about-row.rev .about-ph{order:2}
.sign{font-family:'Cormorant Garamond','Playfair Display',serif;font-style:italic;font-weight:500;font-size:30px;color:var(--ink);margin-top:30px;line-height:1.1}
.sign small{display:block;font-family:'Montserrat';font-style:normal;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-deep);margin-top:8px}

/* Quote */
.quote{padding:78px 0;text-align:center;background:#000;color:var(--cream)}
.quote p{font-family:'Playfair Display';font-style:italic;font-size:clamp(18px,2.3vw,27px);max-width:720px;margin:0 auto;line-height:1.5;font-weight:400}
.quote .eyebrow{color:var(--gold);display:block;margin-bottom:22px}
.quote span{display:block;margin-top:24px;font-family:'Montserrat';font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(250,248,244,.6)}
.quote .eyebrow{margin-top:0}

/* Album covers grid */
.albums-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.album-card{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--paper);display:block}
.album-card img{transition:1.4s var(--ease)}
.album-card:hover img{transform:scale(1.08)}
.album-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,0) 40%,rgba(20,18,16,.72) 100%);transition:.5s}
.album-card .meta{position:absolute;left:0;right:0;bottom:0;padding:30px 26px;z-index:2;color:#fff}
.album-card .meta .t{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:8px}
.album-card .meta h3{font-size:25px;color:#fff}
.album-card .meta .go{font-size:11px;letter-spacing:.25em;text-transform:uppercase;margin-top:14px;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.album-card:hover .meta .go{opacity:1;transform:none}

/* Signature concepts (độc bản) */
/* ===== CONCEPT: gallery justified kiểu Flickr + lightbox ===== */
.jg-meta{font-size:12px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)!important;margin-top:18px}
.jg{display:flex;flex-wrap:wrap;gap:8px}
.jg-i{display:block;overflow:hidden;background:var(--paper);position:relative;flex-grow:1}
.jg-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease),opacity .5s var(--ease)}
.jg-i:hover img{transform:scale(1.04)}
.jg-i::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,0);transition:background .4s var(--ease)}
.jg-i:hover::after{background:rgba(20,18,16,.14)}
/* Trước khi JS tính hàng: lưới tạm 3 cột để không nhảy trắng trang */
.jg:not(.ready) .jg-i{width:calc(33.333% - 6px);aspect-ratio:3/2}
@media(max-width:680px){.jg{gap:5px}.jg:not(.ready) .jg-i{width:calc(50% - 3px)}}

/* Lightbox xem ảnh lớn */
.lb{position:fixed;inset:0;z-index:120;background:rgba(13,12,11,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.lb-count{position:absolute;top:22px;left:28px;color:rgba(250,248,244,.75);font-size:11.5px;letter-spacing:.28em;font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;background:none;border:none;color:rgba(250,248,244,.8);cursor:pointer;padding:18px;transition:color .3s;line-height:1}
.lb-btn:hover{color:var(--gold)}
.lb-close{top:10px;right:14px;font-size:30px;font-weight:300}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:44px;font-weight:200}
.lb-prev{left:8px}
.lb-next{right:8px}
@media(max-width:680px){
  .lb-prev,.lb-next{font-size:34px;padding:14px 10px}
  .lb img{max-width:100vw;max-height:80vh}
}
@media(prefers-reduced-motion:reduce){.lb{transition:none}.jg-i img{transition:none}}

/* Đường nối trượt duy nhất của trang chủ: khối Ảnh Cưới ghim lại (top do JS tính
   để đáy khối luôn chạm đáy màn hình), frame Concept tối trượt lên phủ dần.
   Bóng hắt lên trên cho mép frame nổi khỏi khối bị đè */
.seam-pin{position:sticky;top:0;will-change:transform,filter}
.seam-cover{position:relative;z-index:2;box-shadow:0 -40px 90px -40px rgba(13,12,11,.55)}
@media(prefers-reduced-motion:reduce){.seam-pin{position:static;transform:none!important;filter:none!important}}

.signature{background:#000}
.signature .sec-head h2,.signature .sec-head p{color:var(--cream)}
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.sig-card{position:relative;overflow:hidden;aspect-ratio:4/5;display:block;background:#000}
.sig-card img{transition:1.6s var(--ease);opacity:.86}
.sig-card:hover img{transform:scale(1.06);opacity:1}
.sig-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.1) 30%,rgba(10,9,8,.82) 100%)}
.sig-card .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px 44px;color:#fff}
.sig-card .meta .t{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.sig-card .meta h3{font-size:38px;margin-bottom:12px}
.sig-card .meta p{font-size:13.5px;color:rgba(255,255,255,.82);max-width:440px;margin-bottom:16px}
.sig-card .meta .go{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:#fff}

/* Service process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.steps .st{padding:30px 22px;border-top:2px solid var(--line)}
.steps .st .n{font-family:'Playfair Display';font-style:italic;font-size:30px;color:var(--gold);line-height:1}
.steps .st h3{font-size:17px;margin:14px 0 10px;font-family:'Montserrat';font-weight:600;letter-spacing:.01em}
.steps .st p{color:var(--muted);font-size:13.5px}

/* Biến thể nền đen (Quy trình thay chỗ dải quote cũ) —
   quy mô khiêm tốn như dải quote gốc: padding 78px, chữ nhỏ tinh tế */
.pad.dark{background:#000;padding:78px 0}
.pad.dark .eyebrow{color:var(--gold)}
.pad.dark .sec-head{margin-bottom:40px}
.pad.dark .sec-head h2{color:var(--cream);font-size:clamp(21px,2.6vw,30px)}
.pad.dark .sec-head p{color:rgba(250,248,244,.62);font-size:13.5px;margin-top:14px}
.pad.dark .steps .st{border-top-color:rgba(192,160,98,.4);padding:22px 16px 0}
.pad.dark .steps .st .n{font-size:22px}
.pad.dark .steps .st h3{color:var(--cream);font-size:14.5px;margin:10px 0 8px}
.pad.dark .steps .st p{color:rgba(250,248,244,.55);font-size:12.5px}

/* Split feature (Váy cưới / Phóng sự) — chữ gọn trên nền trắng (giữ từ bản mới) */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;background:var(--pearl)}
.feature .ph{height:100%;min-height:520px;overflow:hidden}
.feature .ph img{transition:1.4s var(--ease)}
.feature:hover .ph img{transform:scale(1.05)}
.feature .tx{padding:80px 70px;max-width:640px;justify-self:center}
.feature .tx .eyebrow{display:block}
.feature .tx h2{font-size:clamp(28px,3.6vw,44px);margin:14px 0 22px}
.feature .tx p{color:var(--muted);font-size:15px;margin-bottom:16px;line-height:1.75}
.feature .tx.reorder{order:-1}

/* Video */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video-grid .v{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);border:1px solid var(--line);cursor:pointer}
.video-grid iframe{width:100%;height:100%;border:0;display:block}
.video-grid .v img{transition:.6s var(--ease)}
.video-grid .v:hover img{transform:scale(1.04);opacity:.85}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:44px;background:rgba(20,18,16,.78);border-radius:10px;transition:.3s var(--ease)}
.yt-play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.video-grid .v:hover .yt-play{background:var(--gold)}
.video-grid .cap{margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center}

/* Pricing teaser cards */
.price-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.price-cards a{background:var(--cream);border:1px solid var(--line);padding:38px 24px 30px;text-align:center;transition:.5s var(--ease);position:relative;display:block}
.price-cards a::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.5s var(--ease)}
.price-cards a:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--gold)}
.price-cards a:hover::before{transform:scaleX(1)}
.price-cards .pi{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--gold);display:block;margin-bottom:12px}
.price-cards h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;margin-bottom:8px}
.price-cards p{font-size:12.5px;color:var(--muted);margin-bottom:18px;min-height:34px}
.price-cards .go{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}

/* Vì sao chọn Rosé */
.commit{background:var(--paper)}
.commit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.commit-grid .it{background:var(--pearl);padding:38px 28px;border:1px solid transparent;transition:.5s var(--ease)}
.commit-grid .it:hover{border-color:var(--line);box-shadow:var(--shadow);transform:translateY(-6px)}
.commit-grid .n{font-family:'Playfair Display';font-style:italic;font-size:20px;color:var(--gold)}
.commit-grid h3{font-size:19px;margin:12px 0 10px;font-weight:600;font-family:'Montserrat';letter-spacing:.01em}
.commit-grid p{color:var(--muted);font-size:13.5px}
.commit.mini{padding:76px 0}
.commit.mini .sec-head{margin-bottom:44px}
.commit.mini .sec-head h2{font-size:clamp(24px,3.2vw,36px)}
.commit.mini .commit-grid{gap:20px}
.commit.mini .it{padding:28px 24px}
.commit.mini .it .n{font-size:17px}
.commit.mini .it h3{font-size:16px;margin:9px 0 8px}
.commit.mini .it p{font-size:12.5px}

/* Booking */
/* Đoạn dẫn bó hẹp hơn tiêu đề để xuống dòng gọn */
.booking{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.booking .info h2{font-size:clamp(24px,3vw,36px);margin:14px 0 20px}
.booking .info p{color:var(--muted);font-size:15.5px;margin-bottom:0;max-width:42ch}
.contact-row{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line);font-size:14px;align-items:center}
.contact-row b{font-weight:500;min-width:92px;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--gold-deep)}
.contact-row a:hover{color:var(--gold-deep)}
#bookForm{display:grid;gap:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field label span{color:var(--gold-deep)}
.field input,.field select,.field textarea{width:100%;background:var(--pearl);border:1px solid var(--line);padding:14px 16px;font-family:'Montserrat';font-size:14px;font-weight:300;color:var(--ink);transition:.4s}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.form-msg{font-size:13px;color:var(--gold-deep);min-height:18px;letter-spacing:.05em}
.form-msg.err{color:#a4392a}
.form-msg.ok{color:var(--gold-deep)}
.map-outer{margin-top:44px}
.map-wrap{border:1px solid var(--line);overflow:hidden;background:var(--paper)}
.map-wrap iframe{width:100%;height:280px;border:0;display:block;filter:grayscale(.2) contrast(.95)}

/* Footer */
footer{background:var(--ink);color:rgba(250,248,244,.78);padding:54px 0 26px}
.foot{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;padding-bottom:30px;border-bottom:1px solid rgba(250,248,244,.12)}
.foot .brand{color:#fff;font-size:34px}
.foot-tagline{font-size:12px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.foot h4{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-family:'Montserrat';font-weight:500}
.foot a{display:block;padding:6px 0;font-size:14px;transition:.3s;color:rgba(250,248,244,.78)}
.foot a:hover{color:var(--gold)}
.foot p{font-size:14px;max-width:340px;margin-top:18px;color:rgba(250,248,244,.6)}
.copy{padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;letter-spacing:.1em;color:rgba(250,248,244,.5)}

/* reveal */
.reveal{opacity:0;transform:translateY(36px);transition:1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Elegant ampersand */

/* ===== Trang con: hero chữ ===== */
.page-hero{padding:180px 0 70px}
.page-hero.tall{padding-bottom:130px}
.page-hero .eyebrow{display:block;margin-bottom:16px}
.page-hero h1{font-size:clamp(34px,5.5vw,64px)}
.page-hero p{color:var(--muted);max-width:640px;margin:20px auto 0;font-size:15.5px}
.page-hero .album-desc{max-width:760px}
.page-hero.has-bg{position:relative;color:#fff;padding:210px 0 90px;overflow:hidden}
.page-hero.has-bg h1{color:#fff}
.page-hero.has-bg p{color:rgba(255,255,255,.9)}
.page-hero-bg{position:absolute;inset:0;z-index:-2}
.page-hero.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,16,.5),rgba(20,18,16,.62))}

/* ===== Album: masonry + lightbox ===== */
.masonry{columns:3;column-gap:18px}
.masonry figure{break-inside:avoid;margin-bottom:18px;overflow:hidden;background:var(--paper)}
.masonry img{transition:1.4s var(--ease);cursor:zoom-in;height:auto}
.masonry figure:hover img{transform:scale(1.06)}
.lightbox{position:fixed;inset:0;background:rgba(18,16,14,.94);z-index:200;display:flex;align-items:center;justify-content:center;padding:30px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-close,.lb-prev,.lb-next{position:absolute;background:none;border:0;color:#fff;font-family:'Playfair Display';line-height:1;opacity:.75;transition:.3s;min-width:48px;min-height:48px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:1;color:var(--gold)}
.lb-close{top:24px;right:30px;font-size:34px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%);font-size:40px;padding:20px}
.lb-next{right:10px;top:50%;transform:translateY(-50%);font-size:40px;padding:20px}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.25em}

/* ===== Bảng giá: tabs + gói ===== */
.price-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:34px 28px 12px}
.price-tabs a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:11px 20px;border:1px solid transparent;color:var(--muted);transition:.4s}
.price-tabs a:hover{color:var(--ink)}
.price-tabs a.active{color:var(--ink);border-color:var(--line);background:var(--pearl)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.tier{background:var(--pearl);border:1px solid var(--line);padding:44px 34px;transition:.5s var(--ease);position:relative}
.tier:hover{transform:translateY(-6px)}
.tier.hl{border-color:var(--gold);box-shadow:var(--shadow)}
.tier-badge{position:absolute;top:0;right:0;background:var(--gold);color:#fff;font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px}
.tier h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-family:'Montserrat';font-weight:500}
.tier .price{font-family:'Playfair Display';font-size:34px;margin:14px 0 4px}
.tier .note{color:var(--muted);font-size:13px}
.tier ul{list-style:none;border-top:1px solid var(--line);padding-top:20px;margin:22px 0 26px}
.tier li{color:var(--muted);font-size:13.5px;padding:7px 0 7px 22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}
/* Trong thẻ giá (nền sáng) nút vàng phải có nền đặc, nếu không chữ trắng sẽ tàng hình */
.tier .btn-gold{background:var(--gold)}
.tier .btn-gold::after{background:var(--gold-deep)}
.pricing-note{text-align:center;color:var(--muted);font-size:13px;margin-top:34px;letter-spacing:.02em}
.pricing-zalo{text-align:center;margin-top:14px;font-size:13.5px}
.pricing-zalo a{color:var(--gold-deep);font-weight:500;letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:2px;transition:.3s}
.pricing-zalo a:hover{border-bottom-color:var(--gold-deep)}

/* ===== Tin tức ===== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post-card{display:flex;flex-direction:column;background:var(--pearl);border:1px solid var(--line);transition:.5s var(--ease)}
.post-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.post-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.post-card .ph img{transition:1.4s var(--ease)}
.post-card:hover .ph img{transform:scale(1.06)}
.post-card .meta{padding:28px 26px 32px;display:flex;flex-direction:column;flex:1}
.post-card .t{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.post-card h3{font-size:21px;margin:12px 0;line-height:1.3}
.post-card p{color:var(--muted);font-size:14px;margin-bottom:16px}
.post-card .go{margin-top:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.post-card:hover .go{color:var(--gold-deep)}
.post-head{padding-top:180px;margin-bottom:44px}
.post-head .eyebrow{display:block;margin-bottom:14px}
.post-head h1{font-size:clamp(30px,4.4vw,54px);max-width:820px;margin:0 auto}
.post-cover{overflow:hidden;margin-bottom:48px;aspect-ratio:16/9}
.post-body p{color:var(--muted);font-size:16.5px;line-height:1.85;margin-bottom:24px}
/* Sapo: đoạn mở đầu nổi hơn phần còn lại */
.post-body>p:first-of-type{font-size:18.5px;color:var(--ink);font-weight:400}
.post-body h2{font-size:clamp(24px,3vw,32px);margin:44px 0 16px}
.post-body h3{font-size:clamp(19px,2.2vw,23px);margin:34px 0 12px}
.post-body strong{color:var(--ink);font-weight:600}
.post-body a{color:var(--gold-deep);border-bottom:1px solid var(--gold)}
.post-body blockquote{border-left:2px solid var(--gold);padding:6px 0 6px 26px;margin:30px 0;font-family:'Cormorant Garamond','Playfair Display',serif;font-style:italic;font-size:21px;line-height:1.6;color:var(--ink)}
.post-body .pb-img{margin:34px -60px}
.post-body .pb-img img{height:auto}
.post-body .pb-img figcaption{text-align:center;font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin-top:10px}
@media(max-width:920px){.post-body .pb-img{margin:26px 0}}

/* ===== Câu chuyện ===== */
.story-block{margin-bottom:64px}
.story-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:52px;color:var(--gold);line-height:1;display:block;margin-bottom:14px}
.story-block h2{font-size:clamp(26px,3vw,38px);margin-bottom:18px}
.story-block .lead{font-family:'Playfair Display';font-style:italic;font-size:20px;color:var(--ink);margin-bottom:14px}
.story-block p{color:var(--muted);font-size:15.5px;margin-bottom:14px}
.story-block a{color:var(--gold-deep);border-bottom:1px solid var(--gold)}
.story-img{margin-bottom:64px;overflow:hidden}
.story-img img{height:auto}
.quote-inline{border-left:2px solid var(--gold);padding-left:34px;margin-top:50px}
.quote-inline p{font-family:'Playfair Display';font-style:italic;font-size:clamp(19px,2.3vw,26px);line-height:1.55;color:var(--ink)}
.quote-inline .sign{margin-top:20px;font-size:26px}

/* ===== Portfolio (trang Về Rosé): mỗi trang một khung tràn màn hình ===== */
.portfolio-pages{display:grid;gap:14px;padding-bottom:14px}
.portfolio-pages figure{background:var(--paper)}
.portfolio-pages img{width:100%;height:auto;display:block;cursor:zoom-in}
@media(max-width:680px){.portfolio-pages{gap:8px;padding-bottom:8px}}

/* Dải số liệu dưới chữ ký (chỉ hiện khi điền trong admin):
   cùng font và màu với dòng số liệu nguyên bản (Montserrat, vàng đồng),
   chỉ nâng cỡ số và ngăn các ô bằng đường chỉ mảnh */
.about-stats{margin-top:30px;display:flex;flex-wrap:wrap}
.about-stats .stat-i{padding:2px 24px 2px 0;margin-right:24px;border-right:1px solid var(--line)}
.about-stats .stat-i:last-child{border-right:0;margin-right:0;padding-right:0}
.about-stats b{display:block;font-family:'Montserrat',sans-serif;font-weight:400;font-size:clamp(21px,2.1vw,27px);letter-spacing:.06em;line-height:1.2;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.about-stats .suf{font-size:.6em;color:var(--gold);vertical-align:.25em;margin-left:2px}
.about-stats small{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);opacity:.85}
@media(max-width:680px){.about-stats{gap:12px 0}.about-stats .stat-i{padding-right:16px;margin-right:16px}}

/* Cảm nhận khách VIP trong thẻ */
.vip-card .q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14.5px;color:rgba(255,255,255,.85);margin-top:8px;line-height:1.5}

/* Slogan ở footer */
.foot p.foot-slogan{font-family:'Cormorant Garamond','Playfair Display',serif;font-style:italic;font-size:19px;color:rgba(250,248,244,.92);margin-top:14px;max-width:none}
.foot-slogan + p{margin-top:10px}

/* Hàng mạng xã hội dưới slogan */
/* Lưới 2 cột cố định, thẻ bằng nhau thẳng hàng, không hiệu ứng chuyển động */
.foot-social{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px;max-width:320px}
.foot-social a{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 10px;border:1px solid rgba(192,160,98,.45);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,248,244,.85);transition:color .3s,border-color .3s}
.foot-social a svg{width:15px;height:15px;flex:none}
.foot-social a:hover{color:var(--gold);border-color:var(--gold)}

/* Dòng thông tin tĩnh trong cột footer (không phải link) */
/* Cụm Liên hệ kiểu hàng nhãn + giá trị + kẻ chân mảnh — cùng ngôn ngữ với
   khối Đặt lịch (STUDIO | địa chỉ), kẻ chạy hết cột nên tự đóng khung tới mép phải */
.foot .foot-row{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(250,248,244,.1);color:rgba(250,248,244,.78);transition:.3s}
.foot .foot-row:last-child{border-bottom:0;padding-bottom:0}
.foot .foot-row b{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
.foot .foot-row span{font-size:14px;font-variant-numeric:tabular-nums}
.foot a.foot-row:hover span{color:var(--gold)}

/* ===== Banner full-bleed (Phóng sự) ===== */
.banner{position:relative;min-height:76vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.banner-bg{position:absolute;inset:0}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.38),rgba(20,18,16,.56))}
.banner-inner{position:relative;z-index:2;color:#fff;padding-top:90px;padding-bottom:90px}
.banner-inner .eyebrow{display:block;margin-bottom:18px}
.banner-inner h2{color:#fff;font-size:clamp(34px,5.2vw,64px);font-weight:500;text-shadow:0 2px 26px rgba(0,0,0,.3)}
.banner-inner p{margin-top:16px;color:rgba(255,255,255,.92);font-size:15.5px;letter-spacing:.02em}

/* ===== Khách VIP / người nổi tiếng ===== */
.vip-carousel{position:relative}
.vip-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vip-track::-webkit-scrollbar{display:none}
.vip-card{position:relative;flex:0 0 min(430px,80vw);aspect-ratio:16/11;overflow:hidden;background:var(--paper);scroll-snap-align:start;display:block}
.vip-card img{transition:1.2s var(--ease)}
.vip-card:hover img{transform:scale(1.05)}
.vip-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,0) 45%,rgba(20,18,16,.74) 100%)}
.vip-card .meta{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;z-index:2;color:#fff}
.vip-card .t{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.vip-card h3{font-size:21px;color:#fff}
.vip-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border:1px solid var(--line);background:var(--pearl);color:var(--ink);font-size:24px;font-family:'Playfair Display',serif;line-height:1;transition:.3s var(--ease)}
.vip-nav:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.vip-nav.prev{left:-14px}
.vip-nav.next{right:-14px}
@media(max-width:680px){.vip-nav{display:none}}

/* ===== Liên hệ nhanh: khối nút trong section Đặt lịch ===== */
/* Cụm nút thu gọn ~25% để cân tỉ trọng với cột chữ bên trái,
   vẫn giữ mỗi nút cao ≥52px cho vùng bấm thoải mái */
.quick-contact{display:grid;gap:10px;align-content:start}
.qc-lead{color:var(--muted);font-size:14.5px;margin-bottom:2px}
.qc-btn{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--pearl);padding:12px 20px;transition:.4s var(--ease)}
.qc-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
.qc-btn svg{width:22px;height:22px;flex-shrink:0}
.qc-btn em{font-style:normal;font-weight:700;font-size:14px;letter-spacing:.02em;flex-shrink:0;width:22px;text-align:center;line-height:1}
.qc-btn span{font-size:12.5px;color:var(--muted)}
.qc-btn span b{display:block;font-weight:500;color:var(--ink);font-size:15.5px;margin-top:1px}
.qc-call svg{color:var(--gold-deep)}
.qc-zalo em{color:#0068FF}
.qc-mess svg{color:#8b5cf6}
.qc-note{font-size:13px;margin-top:6px}

/* ===== Nút liên hệ nhanh nổi (mọi trang) ===== */
.quick-dock{position:fixed;left:16px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px}
.qd{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px -6px rgba(30,28,26,.45);transition:.3s var(--ease);font-weight:700;font-size:12.5px;letter-spacing:.01em}
.qd:hover{transform:translateY(-3px) scale(1.05)}
.qd svg{width:23px;height:23px}
.qd-call{background:var(--gold)}
.qd-zalo{background:#0068FF}
.qd-mess{background:linear-gradient(135deg,#0099FF,#A033FF,#FF5280)}
.qd-call{animation:qd-ring 2.6s ease-in-out infinite}
@keyframes qd-ring{0%,100%{transform:rotate(0)}4%{transform:rotate(-14deg)}8%{transform:rotate(12deg)}12%{transform:rotate(-9deg)}16%{transform:rotate(6deg)}20%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.qd-call{animation:none}}
@media(max-width:680px){.quick-dock{left:12px;bottom:14px}.qd{width:44px;height:44px}}

/* ===== CTA band (trang con) ===== */
.cta-band{background:#000;color:var(--cream);padding:88px 0;text-align:center}
.cta-band h2{color:var(--cream);font-size:clamp(26px,3.6vw,44px)}
.cta-band p{color:rgba(250,248,244,.72);max-width:560px;margin:14px auto 0;font-size:15px}

/* ===== Responsive ===== */
@media(max-width:980px){
  .booking{grid-template-columns:1fr;gap:46px}
  .albums-grid{grid-template-columns:1fr 1fr}
  .commit-grid{grid-template-columns:1fr 1fr}
  .feature{grid-template-columns:1fr}
  .feature .tx{padding:56px 34px}
  .feature .tx.reorder{order:0}
  .feature .ph{min-height:420px}
  .masonry{columns:2}
  .foot{grid-template-columns:1fr;gap:36px}
  .video-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr}
  .sig-grid{grid-template-columns:1fr}
  .sig-card .meta{padding:34px 28px}
  .sig-card .meta h3{font-size:30px}
  .price-cards{grid-template-columns:1fr 1fr}
  .post-grid{grid-template-columns:1fr}
  .about-row{grid-template-columns:1fr;gap:36px}
  .about-row.rev .about-ph{order:0}
}
@media(max-width:680px){
  /* Ẩn bằng mờ dần thay vì đẩy sang phải: tránh tạo vùng tràn ngang trên trang con.
     pointer-events chặn "click xuyên" khi menu đang mờ dần đóng lại */
  /* justify-content:flex-start + margin auto ở mục đầu/cuối: nội dung vẫn nằm giữa
     màn hình khi đủ chỗ, nhưng khi mở menu con dài thì cuộn được tới mọi mục
     (flexbox center + overflow sẽ cắt cụt phần đầu, không cuộn lên được) */
  .menu{position:fixed;inset:0;z-index:65;background:var(--cream);flex-direction:column;justify-content:flex-start;gap:26px;opacity:0;transform:scale(.98);transition:.45s var(--ease);overflow-y:auto;padding:80px 0;visibility:hidden;pointer-events:none}
  .menu>:first-child{margin-top:auto}
  .menu>:last-child{margin-bottom:auto}
  .menu.open{opacity:1;transform:none;visibility:visible;pointer-events:auto}
  .menu a{color:var(--ink)!important;font-size:15px}
  /* Menu con: thu gọn mặc định, chạm vào mục cha mới mở */
  .drop{display:none;position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:6px 0 0;min-width:0}
  .has-drop{text-align:center}
  .has-drop.open .drop{display:block}
  /* Mũi tên đặt tuyệt đối bên phải chữ để chữ của mục cha căn giữa
     thẳng hàng với các mục con (nằm trong luồng sẽ đẩy chữ lệch trái) */
  .has-drop>.drop-toggle{display:block;width:max-content;margin:0 auto;position:relative}
  .has-drop>.drop-toggle::after{content:"\203A";position:absolute;left:100%;margin-left:10px;top:50%;bottom:auto;width:auto;height:auto;background:none;font-size:15px;line-height:1;color:var(--gold-deep);transform:translateY(-55%) rotate(90deg);transition:transform .3s var(--ease)}
  .has-drop>.drop-toggle:hover::after{width:auto}
  .has-drop.open>.drop-toggle::after{transform:translateY(-55%) rotate(-90deg)}
  .drop a{color:var(--muted)!important;font-size:12px;padding:8px 0;text-align:center}
  /* Ẩn nút liên hệ nổi khi menu đang mở để không đè lên menu */
  body.menu-open .quick-dock{opacity:0;pointer-events:none}
  .burger{display:flex;z-index:70}
  .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);background:var(--ink)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);background:var(--ink)}

  /* Gọn chiều dọc: giảm khoảng thở, lưới 2 cột thay vì 1 cột dài dằng dặc */
  .pad{padding:54px 0}
  .pad.dark{padding:54px 0}
  .pad-sm{padding:48px 0}
  .sec-head{margin-bottom:34px}
  .sec-head p{font-size:14px;margin-top:14px}
  .mt-48{margin-top:28px}
  .hero p{margin:20px auto 28px}

  .albums-grid{grid-template-columns:1fr 1fr;gap:10px}
  .album-card .meta{padding:14px 12px}
  .album-card .meta .t{font-size:8.5px;letter-spacing:.18em;margin-bottom:4px}
  .album-card .meta h3{font-size:15px}
  .album-card .meta .go{display:none}

  .commit-grid{grid-template-columns:1fr}
  .masonry{columns:2;column-gap:10px}
  .masonry figure{margin-bottom:10px}

  .sig-card .meta{padding:22px 18px}
  .sig-card .meta h3{font-size:24px;margin-bottom:8px}
  .sig-card .meta p{font-size:12.5px;margin-bottom:10px}

  .steps{grid-template-columns:1fr;gap:0}
  .steps .st{padding:16px 0 12px;border-top:1px solid var(--line)}
  .steps .st .n{font-size:20px}
  .steps .st h3{font-size:15px;margin:8px 0 5px}
  .pad.dark .steps .st{padding:14px 0 10px}

  .feature .ph{min-height:300px}
  .feature .tx{padding:40px 26px}
  .about-row{gap:26px}
  .about-row + .about-row{margin-top:30px}

  .video-grid{gap:14px}
  .price-cards{grid-template-columns:1fr 1fr;gap:10px}
  .price-cards a{padding:24px 14px 20px}
  .price-cards p{min-height:0;margin-bottom:12px}

  .booking{gap:34px}
  .map-outer{margin-top:26px}
  .map-wrap iframe{height:200px}
  footer{padding:56px 0 30px}
  .foot{gap:28px;padding-bottom:36px}

  .f-row{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:center}
  .page-hero{padding:140px 0 48px}
}