/* ══════════════════════════════════════════════
   Luvia Concept & Decor — Stylesheet trang nội dung
   Dùng cho các trang dịch vụ / concept.
   Kế thừa design token từ index.html
   ══════════════════════════════════════════════ */

:root{
  --bg:       #F6EFE6;
  --bg2:      #EFE6D9;
  --bg3:      #FAF6F0;
  --brown:    #5C3D2E;
  --brown-md: #8B6348;
  --brown-lt: #C4A882;
  --text:     #2D1F14;
  --text-md:  #7A6454;
  --text-lt:  #B0917A;
  --white:    #FDFAF6;
  --fs:       cubic-bezier(.4,0,.2,1);
  --serif:    'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:     'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* height:auto là BẮT BUỘC. Mọi <img> đều khai width/height thật trong HTML
   (để browser reserve đúng chỗ, tránh layout shift). Nhưng thuộc tính height
   là presentational hint tạo ra chiều cao definite, và khi cả hai chiều đã
   definite thì `aspect-ratio` bị BỎ QUA hoàn toàn.
   Trước đây aspect-ratio trong .gal chưa bao giờ hoạt động — nó chỉ trông
   đúng vì width/height khai cứng 800×1000 và 900×1125, tình cờ bằng 4:5. */
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto}

/* ── NAV ───────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:999;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 6vw;background:rgba(246,239,230,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(92,61,46,.09);
}
.nav-logo{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:1.5px;color:var(--brown);text-transform:uppercase}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-md);font-weight:400;transition:color .3s var(--fs);white-space:nowrap}
.nav-links a:hover{color:var(--brown)}
.nav-cta{
  border:1px solid var(--brown-lt);padding:9px 20px;border-radius:100px;
  font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:400;
  color:var(--brown)!important;transition:all .3s var(--fs);white-space:nowrap;flex:0 0 auto
}
.nav-cta:hover{background:var(--brown);color:var(--white)!important;border-color:var(--brown)}

/* Hẹp hơn desktop rộng: KHÔNG ẩn link (traffic ngành cưới phần lớn là mobile).
   Xếp 2 hàng — hàng 1 logo + điện thoại, hàng 2 link cuộn ngang.

   Ngưỡng 1150px chứ không phải 900px: với 8 link + nút điện thoại, layout 1 hàng
   cần ~980px nội dung cộng 2×6vw padding. Dưới 1150px nút điện thoại bị đẩy
   ra ngoài viewport và bị cắt (đã kiểm ở 940px và 1024px). */
@media(max-width:1150px){
  .nav{flex-wrap:wrap;padding:14px 5vw 0;align-items:center}
  .nav-logo{order:1;flex:1}
  .nav-cta{order:2;padding:8px 16px;font-size:11px}
  .nav-links{
    order:3;width:100%;margin-top:12px;padding:11px 0;gap:22px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-top:1px solid rgba(92,61,46,.09)
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:0 0 auto}
}

/* ── BREADCRUMB ────────────────────────── */
.crumb{padding:104px 0 0;font-size:12px;letter-spacing:.4px;color:var(--text-lt)}
@media(max-width:1150px){.crumb{padding-top:128px}}
.crumb a{color:var(--text-md);transition:color .25s}
.crumb a:hover{color:var(--brown)}
.crumb span{margin:0 8px;opacity:.5}

/* ── PAGE HERO ─────────────────────────── */
.phero{padding:44px 0 56px;border-bottom:1px solid rgba(92,61,46,.1)}
.phero .eyebrow{
  font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--brown-lt);margin-bottom:20px;font-weight:500
}
.phero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,5.2vw,60px);line-height:1.12;
  color:var(--brown);letter-spacing:.4px;max-width:15ch
}
.phero .lede{
  margin-top:24px;max-width:60ch;font-size:16.5px;line-height:1.85;
  color:var(--text-md);font-weight:300
}
.phero .en{
  margin-top:18px;font-family:var(--serif);font-style:italic;
  font-size:17px;color:var(--text-lt);font-weight:300
}

/* ── SECTION ───────────────────────────── */
section{padding:72px 0}
.sec-label{
  font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--brown-lt);margin-bottom:16px;font-weight:500
}
h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(27px,3.4vw,42px);line-height:1.2;
  color:var(--brown);letter-spacing:.3px;margin-bottom:22px
}
h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);line-height:1.3;
  color:var(--brown);margin-bottom:12px
}
p{font-size:16px;line-height:1.88;color:var(--text-md);font-weight:300;margin-bottom:18px}
p strong{color:var(--brown);font-weight:500}
.prose > *:last-child{margin-bottom:0}

/* ── LIST ──────────────────────────────── */
.ul{list-style:none;margin:26px 0}
.ul li{
  position:relative;padding-left:26px;margin-bottom:15px;
  font-size:15.5px;line-height:1.8;color:var(--text-md);font-weight:300
}
.ul li::before{
  content:'';position:absolute;left:0;top:12px;
  width:7px;height:7px;border:1px solid var(--brown-lt);
  transform:rotate(45deg)
}
.ul li b{color:var(--brown);font-weight:500}

/* ── ITEM GRID (hạng mục) ──────────────── */
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:rgba(92,61,46,.12);margin-top:36px}
.igrid > div{background:var(--bg);padding:30px 26px}
.igrid h3{font-size:19px;margin-bottom:9px}
.igrid p{font-size:14.5px;line-height:1.75;margin:0}

/* ── 3D TRUST MODULE ───────────────────── */
.mod3d{
  background:var(--brown);color:var(--white);
  padding:52px 6vw;margin:0
}
.mod3d .inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.mod3d .sec-label{color:var(--brown-lt)}
.mod3d h2{color:var(--white);margin-bottom:16px}
.mod3d p{color:rgba(253,250,246,.78);margin-bottom:14px}
/* p strong mặc định là màu nâu — trên nền nâu sẽ vô hình. Phải override. */
.mod3d p strong,.mod3d strong{color:var(--white);font-weight:500}
.mod3d .claim{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,27px);
  line-height:1.45;color:var(--white);font-weight:300
}
.mod3d .steps{list-style:none;counter-reset:s}
.mod3d .steps li{
  counter-increment:s;position:relative;padding-left:44px;
  margin-bottom:17px;font-size:15px;line-height:1.7;
  color:rgba(253,250,246,.82);font-weight:300
}
.mod3d .steps li::before{
  content:'0' counter(s);position:absolute;left:0;top:1px;
  font-family:var(--serif);font-size:14px;color:var(--brown-lt);letter-spacing:1px
}
.mod3d .steps li.hl{color:var(--white);font-weight:400}
.mod3d .steps li.hl::before{color:var(--white)}
@media(max-width:860px){.mod3d .inner{grid-template-columns:1fr;gap:34px}}

/* ── GALLERY ───────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;margin-top:38px}
.gal figure{margin:0;overflow:hidden;background:var(--bg2)}
.gal img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform .8s var(--fs)
}
.gal figure:hover img{transform:scale(1.045)}

/* Ảnh NGANG: ép vào khung 4:5 như ảnh dọc thì mất 43–53% chiều rộng —
   với ảnh toàn cảnh sảnh tiệc đó là mất đúng phần cần thấy.
   Cho span 2 cột và giữ tỷ lệ 3:2. Dưới 620px grid chỉ còn 1 cột nên
   phải trả về span 1, nếu không item sẽ tràn sang cột ngầm. */
.gal figure.land{grid-column:span 2}
.gal figure.land img{aspect-ratio:3/2}
@media(max-width:620px){
  .gal figure.land{grid-column:span 1}
}
.gal figcaption{
  padding:11px 2px 0;font-size:12px;letter-spacing:.5px;
  color:var(--text-lt);font-weight:300
}
.gal figcaption b{color:var(--text-md);font-weight:500}

/* ── CONCEPT CARDS ─────────────────────── */
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:38px 26px;margin-top:44px}
.ccard img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--bg2)}
.ccard .tone{
  display:flex;gap:6px;margin:14px 0 10px
}
.ccard .tone i{width:15px;height:15px;border-radius:50%;display:block;border:1px solid rgba(92,61,46,.14)}
.ccard h3{font-size:21px;margin-bottom:7px}
.ccard p{font-size:14.5px;line-height:1.72;margin:0}
.ccard .kw{
  margin-top:11px;font-size:11px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--brown-lt)
}

/* ── BẢNG SO SÁNH ──────────────────────── */
/* Bọc trong .tablewrap để bảng tự cuộn ngang trên mobile,
   thân trang không bao giờ cuộn ngang. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:32px 0;position:relative}
/* Trên màn hẹp, bảng bị cắt cạnh mà không có dấu hiệu gì cho biết cuộn được. */
.tablehint{display:none;font-size:12px;letter-spacing:.5px;color:var(--text-lt);margin:0 0 10px;font-weight:300}
@media(max-width:820px){.tablehint{display:block}}
.tablewrap table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.tablewrap th,.tablewrap td{
  text-align:left;padding:14px 16px;vertical-align:top;
  border-bottom:1px solid rgba(92,61,46,.13);line-height:1.7
}
.tablewrap thead th{
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--brown-lt);font-weight:500;border-bottom:1px solid rgba(92,61,46,.24);
  white-space:nowrap
}
.tablewrap tbody th{
  font-family:var(--serif);font-size:17px;font-weight:400;
  color:var(--brown);white-space:nowrap
}
.tablewrap td{color:var(--text-md);font-weight:300}
.tablewrap tbody tr:last-child th,.tablewrap tbody tr:last-child td{border-bottom:none}

/* ── PULLQUOTE / NOTE ──────────────────── */
.note{
  border-left:2px solid var(--brown-lt);padding:6px 0 6px 26px;
  margin:34px 0;font-family:var(--serif);font-style:italic;
  font-size:19px;line-height:1.6;color:var(--brown);font-weight:300
}
.callout{
  background:var(--bg3);border:1px solid rgba(92,61,46,.1);
  padding:30px 32px;margin:34px 0
}
.callout h3{font-size:19px;margin-bottom:10px}
.callout p:last-child{margin-bottom:0}

/* ── FAQ ───────────────────────────────── */
.faq{margin-top:36px;border-top:1px solid rgba(92,61,46,.13)}
.faq details{border-bottom:1px solid rgba(92,61,46,.13)}
.faq summary{
  padding:22px 34px 22px 0;cursor:pointer;position:relative;
  font-size:16px;font-weight:400;color:var(--brown);
  list-style:none;line-height:1.55
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:4px;top:20px;
  font-size:20px;font-weight:200;color:var(--brown-lt);
  transition:transform .3s var(--fs)
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 34px 24px 0}
.faq details p{font-size:15.5px;margin-bottom:13px}
.faq details p:last-child{margin-bottom:0}

/* ── LINK ROW (internal linking) ───────── */
.lrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:rgba(92,61,46,.12);margin-top:38px}
.lrow a{
  background:var(--bg);padding:28px 26px;
  transition:background .35s var(--fs);display:block
}
.lrow a:hover{background:var(--bg3)}
.lrow .t{font-family:var(--serif);font-size:20px;color:var(--brown);margin-bottom:7px;display:block}
.lrow .d{font-size:13.5px;line-height:1.7;color:var(--text-md);font-weight:300}
.lrow .go{
  margin-top:12px;display:block;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--brown-lt)
}

/* ── CTA ───────────────────────────────── */
.cta{background:var(--bg2);text-align:center;padding:88px 24px}
.cta h2{max-width:22ch;margin:0 auto 20px}
.cta p{max-width:52ch;margin:0 auto 32px}
.btn{
  display:inline-block;padding:15px 38px;border-radius:100px;
  background:var(--brown);color:var(--white);
  font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;
  transition:all .35s var(--fs)
}
.btn:hover{background:var(--text);transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid var(--brown-lt);color:var(--brown);margin-left:10px}
.btn.ghost:hover{background:var(--brown);color:var(--white);border-color:var(--brown)}
@media(max-width:560px){.btn.ghost{margin:12px 0 0}}

/* ── FOOTER ────────────────────────────── */
footer{background:var(--brown);color:var(--white);padding:66px 6vw 30px}
.fgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px}
footer .fl{font-family:var(--serif);font-size:22px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
footer p{font-size:14px;line-height:1.8;color:rgba(253,250,246,.66);font-weight:300}
footer p strong,footer strong{color:var(--white);font-weight:500}
footer h4{
  font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--brown-lt);margin-bottom:18px;font-weight:500
}
footer ul{list-style:none}
footer li{margin-bottom:11px}
footer li a{font-size:14px;color:rgba(253,250,246,.72);font-weight:300;transition:color .3s}
footer li a:hover{color:var(--white)}
.fbot{
  max-width:1180px;margin:52px auto 0;padding-top:24px;
  border-top:1px solid rgba(253,250,246,.14);
  font-size:12px;color:rgba(253,250,246,.45);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap
}
@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:36px}}

/* ── REDUCED MOTION ────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}