/* Gia An V1 — trang Khách đoàn: hero ảnh thật, tab dính, 3 thẻ ảnh, combo, 4 không gian tiệc (thư viện ảnh), lịch trình mẫu, phòng, FAQ, form báo giá.
   Dùng chung ../assets/css/style.css + ../assets/css/rooms.css; file này chỉ thêm phần riêng của trang. */

/* ───── Nav: current page ───── */
.nav__links a.is-current{opacity:1;border-bottom:1px solid currentColor}

/* ───── Hero ───── */
.ghero{position:relative;min-height:78svh;display:grid;align-items:end;padding:150px var(--gutter) 70px;color:var(--white);overflow:hidden;background:var(--ink)}
.ghero__bg{position:absolute;inset:0}
.ghero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.ghero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,21,16,.5),rgba(42,21,16,0) 70%),linear-gradient(180deg,rgba(42,21,16,.62),rgba(42,21,16,.22) 38%,rgba(42,21,16,.88))}
.ghero__c{text-shadow:0 2px 28px rgba(42,21,16,.55)}
.ghero__c{position:relative;z-index:2;max-width:900px}
.ghero .eyebrow{color:var(--gold);opacity:1}
.ghero__title{font-family:var(--display);font-weight:400;font-size:clamp(38px,5.6vw,82px);line-height:1.02;letter-spacing:.01em;margin:6px 0 20px;max-width:18ch}
.ghero__lead{font-size:clamp(17px,1.35vw,21px);max-width:56ch;opacity:.92;font-weight:300;margin-bottom:32px}
.ghero__actions{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.ghero__actions .btn--pill{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.ghero__actions .btn--pill:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.ghero .reveal.in:nth-child(2){transition-delay:.15s}
.ghero .reveal.in:nth-child(3){transition-delay:.3s}
.ghero .reveal.in:nth-child(4){transition-delay:.45s}
html:lang(zh) .ghero__title{letter-spacing:.06em}

/* ───── Sticky tabs (cùng kiểu trang Hạng phòng) ───── */
.rtabs{position:sticky;top:0;z-index:40;background:rgba(243,236,226,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(42,21,16,.1)}
.rtabs ul{list-style:none;display:flex;gap:4px;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rtabs ul::-webkit-scrollbar{display:none}
.rtabs a{display:block;white-space:nowrap;padding:18px 14px 16px;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.rtabs a:hover{color:var(--ink)}
.rtabs a.is-active{color:var(--ink);border-color:var(--gold)}
[data-tab]{scroll-margin-top:56px}

/* ───── Section heads ───── */
.section{padding:clamp(70px,9vw,120px) var(--gutter)}
.section__head{margin-bottom:clamp(36px,5vw,60px)}
.section .eyebrow{display:flex;align-items:center;gap:14px;color:var(--gold);opacity:1}
.section .eyebrow span:first-child{font-family:var(--display);font-size:20px;letter-spacing:.08em;color:var(--ink);opacity:.5}
.section .eyebrow span:first-child::after{content:'';display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-left:14px}
.section__lead{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.25vw,20px);max-width:62ch;color:rgba(42,21,16,.8);margin:-8px 0 0}
.combo .eyebrow span:first-child,.gquote .eyebrow span:first-child{color:var(--cream)}

/* ───── Why: 3 photo cards + stats ───── */
.why{padding-bottom:clamp(70px,9vw,120px)}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.why__card{display:grid;gap:12px;align-content:start}
.why__img{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--cream-2);margin-bottom:8px}
.why__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.why__card:hover .why__img img{transform:scale(1.05)}
.why__card h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.1vw,32px);line-height:1.1;letter-spacing:.01em}
.why__card p{font-weight:300;font-size:16px;color:rgba(42,21,16,.78);max-width:40ch}
.facts--4{flex-wrap:wrap;margin-top:clamp(50px,7vw,90px)}
.facts--4 li{flex:1 1 160px}

/* ───── Combo (dark band) ───── */
.combo{background:var(--ink);color:var(--cream)}
.combo__min{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-top:-10px}
.combo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
.combo__card{border:1px solid rgba(243,236,226,.16);background:rgba(243,236,226,.03);display:flex;flex-direction:column;transition:border-color .6s var(--ease)}
.combo__card:hover{border-color:rgba(184,154,98,.75)}
.combo__card--hi{border-color:rgba(184,154,98,.55);background:rgba(243,236,226,.06)}
.combo__img{aspect-ratio:16/10;overflow:hidden}
.combo__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.combo__card:hover .combo__img img{transform:scale(1.04)}
.combo__body{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:12px;flex:1}
.combo__num{font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--gold)}
.combo__card h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,46px);letter-spacing:.12em;line-height:1}
.combo__sub{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;max-width:none}
.combo__label{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:14px;padding-top:18px;border-top:1px solid rgba(243,236,226,.14);max-width:none}
.combo__list{list-style:none;display:grid;gap:8px}
.combo__list li{position:relative;padding-left:26px;font-size:clamp(17px,1.2vw,19px);font-weight:300}
.combo__list li::before{content:'';position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--gold)}
.combo__nofee{font-size:14.5px;font-style:italic;opacity:.62;margin-top:4px;max-width:none}
.combo__body .btn--line{align-self:flex-start;margin-top:auto;color:var(--cream);border-color:rgba(243,236,226,.45)}
.combo__note{margin-top:clamp(28px,4vw,48px);font-style:italic;font-weight:300;opacity:.72;max-width:62ch}

/* ───── Venues: info + mini gallery (same .gal family as /phong/) ───── */
.venues .section__head{margin-bottom:clamp(10px,2vw,24px)}
.venue{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.5fr);gap:clamp(28px,5vw,72px);padding:clamp(44px,6vw,80px) 0;border-top:1px solid rgba(42,21,16,.1);scroll-margin-top:56px}
.venue:nth-of-type(even) .venue__info{order:2}
.venue__info{position:sticky;top:90px;align-self:start}
.venue__eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;gap:10px;align-items:center;max-width:none}
.venue__eyebrow::before{content:'';width:28px;height:1px;background:var(--gold);flex:none}
.venue__title{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,52px);line-height:1.02;margin-bottom:14px}
.venue__desc{font-size:18px;line-height:1.65;color:rgba(42,21,16,.82);margin-bottom:22px;max-width:44ch;font-weight:300}
.btn--ink{color:var(--ink);border-color:rgba(42,21,16,.45)}

.gal{min-width:0}
.gal__main{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--cream-2);cursor:zoom-in;box-shadow:0 30px 60px -30px rgba(42,21,16,.35)}
.gal__main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s}
.gal__main img.is-loading{opacity:.4}
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(42,21,16,.35);backdrop-filter:blur(8px);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .3s;z-index:2}
.gal__nav:hover{background:rgba(42,21,16,.65)}
.gal__nav:active{transform:translateY(-50%) scale(.94)}
.gal__prev{left:14px}.gal__next{right:14px}
.gal__count{position:absolute;left:16px;bottom:14px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:#fff;background:rgba(42,21,16,.55);backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;z-index:2}
.gal__full{position:absolute;right:16px;bottom:14px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(42,21,16,.55);backdrop-filter:blur(8px);border:0;padding:8px 14px;border-radius:999px;cursor:pointer;z-index:2;display:inline-flex;gap:8px;align-items:center;transition:background .3s}
.gal__full svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.gal__full:hover{background:rgba(42,21,16,.8)}
.gal__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:rgba(42,21,16,.3) transparent}
.gal__thumbs button{flex:0 0 auto;width:108px;aspect-ratio:4/3;overflow:hidden;border-radius:3px;border:0;padding:0;background:var(--cream-2);cursor:pointer;scroll-snap-align:start;outline:2px solid transparent;outline-offset:2px;transition:outline-color .3s,opacity .3s;opacity:.72}
.gal__thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.gal__thumbs button:hover{opacity:1}
.gal__thumbs button.is-active{opacity:1;outline-color:var(--gold)}
.gal__thumbs button:focus-visible{outline-color:var(--ink)}
.gal__hint{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:6px;max-width:none}

/* ───── Sample day (timeline on cream-2) ───── */
.sched{background:var(--cream-2)}
.sched__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,56px) clamp(18px,2.5vw,36px)}
.sched__step{display:grid;gap:10px;align-content:start}
.sched__img{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--cream);margin-bottom:6px}
.sched__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.sched__step:hover .sched__img img{transform:scale(1.05)}
.sched__time{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);max-width:none}
.sched__n{font-family:var(--display);font-size:24px;letter-spacing:.04em;color:var(--ink);opacity:.55}
.sched__time::after{content:'';flex:1;height:1px;background:rgba(42,21,16,.15)}
.sched__step h3{font-family:var(--display);font-weight:400;font-size:clamp(23px,2vw,30px);line-height:1.1}
.sched__step>p:last-child{font-weight:300;font-size:16px;color:rgba(42,21,16,.78);max-width:38ch}

/* ───── Process ───── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.steps li{padding-top:22px;border-top:1px solid rgba(42,21,16,.15)}
.steps__num{display:block;font-family:var(--display);font-size:clamp(40px,4.2vw,66px);line-height:1;color:var(--gold)}
.steps h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,32px);margin:14px 0 10px;letter-spacing:.02em}
.steps p{font-weight:300;font-size:16px;opacity:.8}
.process .facts{margin-top:clamp(50px,7vw,90px)}

/* ───── Rooms for groups: 5 photo triggers ───── */
.grooms{border-top:1px solid rgba(42,21,16,.1)}
.roomgrid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:40px}
.roomgrid button{width:100%;height:100%;text-align:left;display:grid;gap:8px;align-content:start;padding:0 0 16px;border-bottom:1px solid rgba(42,21,16,.15);transition:border-color .5s var(--ease)}
.roomgrid button:hover,.roomgrid button:focus-visible{border-color:var(--gold);outline:0}
.roomgrid__img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--cream-2);margin-bottom:6px}
.roomgrid__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.roomgrid button:hover .roomgrid__img img{transform:scale(1.06)}
.roomgrid__name{font-family:var(--display);font-size:clamp(20px,1.5vw,24px);line-height:1.1}
.roomgrid__meta{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.roomgrid__more{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.roomgrid__more::after{content:' +'}

/* ───── FAQ ───── */
.faq__list{max-width:880px}
.faq details{border-top:1px solid rgba(42,21,16,.15)}
.faq details:last-child{border-bottom:1px solid rgba(42,21,16,.15)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 0;font-family:var(--display);font-size:clamp(21px,2vw,28px);line-height:1.2;letter-spacing:.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font-family:var(--serif);font-size:30px;line-height:1;color:var(--gold);transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 28px;font-weight:300;opacity:.85;max-width:64ch}

/* ───── Quote form (reuses .contact) ───── */
#groupForm{scroll-margin-top:90px}
.gquote .contact__info>p{font-weight:300;opacity:.85;margin-top:-4px}
.contact__form .row--3{grid-template-columns:1fr 1fr 1fr}
.contact__form select{font-family:var(--serif);font-size:17px;color:var(--white);background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);padding:8px 0;outline:0;color-scheme:dark;letter-spacing:.02em}
.contact__form select option{color:var(--ink)}
.contact__form select:focus{border-color:var(--white)}
.contact__form input[type=number]{-moz-appearance:textfield}

/* ───── Responsive ───── */
@media (max-width:1100px){
  .roomgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .why__grid,.combo__grid,.steps{grid-template-columns:1fr}
  .why__grid{gap:40px}
  .venue{grid-template-columns:minmax(0,1fr);gap:26px}
  .venue__info{position:static}
  .venue:nth-of-type(even) .venue__info{order:0}
  .venue .gal{order:-1}
  .sched__list{grid-template-columns:1fr 1fr}
  .roomgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .ghero{min-height:74svh;padding:130px var(--gutter) 48px}
  .ghero__title{font-size:clamp(34px,10vw,44px)}
  .ghero__shade{background:linear-gradient(180deg,rgba(42,21,16,.62),rgba(42,21,16,.5) 40%,rgba(42,21,16,.92))}
  .sched__list{grid-template-columns:1fr}
  .gal__thumbs button{width:84px}
  .gal__nav{width:40px;height:40px;font-size:22px}
  .gal__full span{display:none}
  .contact__form .row--3{grid-template-columns:1fr}
  .facts--4 li{flex:1 1 120px}
  .roomgrid{gap:12px}
  .roomgrid__name{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.gal__main img,.gal__thumbs button,.gal__nav,.why__img img,.combo__img img,.sched__img img,.roomgrid__img img{transition:none}}