/* =========================================================
   Trung Hiếu & Uyên Phương — Wedding Site
   Modern rebuild — design tokens + global styles
   ========================================================= */

/* Font được nạp động ở <head> theo cài đặt trong /admin (xem inc/theme.php) */

:root{
  /* ---- palette ---- */
  --ink:        #2A1D1B;   /* warm espresso-black text */
  --ink-soft:   #6b5a55;   /* secondary text */
  --paper:      #FBF4EC;   /* warm ivory background */
  --paper-2:    #F3E9DD;   /* slightly deeper paper for alt sections */
  --wine:       #7A0F2B;   /* primary brand accent */
  --wine-deep:  #3E0A18;   /* dark wine, footer/night sections */
  --wine-soft:  #9c3550;
  --sage:       #6F9C93;   /* muted teal-sage accent */
  --sage-soft:  #cfe0dc;
  --gold:       #C6A15B;   /* soft metallic gold */
  --gold-soft:  #e8d7b1;
  --white:      #ffffff;
  --line:       rgba(42,29,27,.12);
  --ivory:      #FBF4EC;   /* fixed light color for text/icons on permanently-dark surfaces (hero, footer, lightbox) — never themed */

  /* ---- type ---- */
  --f-script: 'Great Vibes', cursive;
  --f-serif:  'Cormorant Garamond', serif;
  --f-sans:   'Montserrat', sans-serif;

  /* ---- misc ---- */
  --container: 1180px;
  --radius: 4px;
  --shadow-soft: 0 18px 50px -20px rgba(42,20,15,.35);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- giá trị dự phòng: /admin ghi đè các biến này qua <style> trong <head> ---- */
  --t-scale: 1;         /* hệ số phóng chữ toàn site */
  --t-weight: 400;      /* độ đậm chữ nội dung */
  --t-lh: 1.75;         /* giãn dòng */
  --t-ls: 0px;          /* giãn chữ */
  --h-weight: 500;      /* độ đậm tiêu đề */
  --g-row: 260px;       /* chiều cao hàng của lưới ảnh kiểu justified */
  --g-gap: 14px;        /* khoảng cách giữa các ảnh */
  --g-radius: 6px;      /* bo góc ảnh */
  --g-cols: 4;          /* số cột cho kiểu masonry / lưới vuông */
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  font-family:var(--f-sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:500; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; scroll-snap-type:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader .seal{
  width:84px; height:84px; border-radius:50%;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-script); font-size:28px; color:var(--wine);
  animation:pulseSeal 1.6s ease-in-out infinite;
}
@keyframes pulseSeal{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.08); opacity:.7;} }

/* ============ SECTION TITLES ============ */
.eyebrow{
  display:block; font-family:var(--f-sans); font-size:11px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  margin-bottom:14px;
}
.section-title{ text-align:center; margin-bottom:56px; }
.section-title h2{
  font-family:var(--f-serif); font-size:clamp(30px,4vw,46px);
  color:var(--wine-deep); letter-spacing:.01em;
}
.section-title h2 i{ font-style:italic; color:var(--sage); }
.section-title p{
  margin-top:10px; color:var(--ink-soft); font-size:15px;
  font-family:var(--f-serif); font-style:italic; font-size:19px;
}
.divider-mark{
  width:70px; height:14px; margin:16px auto 0; position:relative;
}
.divider-mark::before,.divider-mark::after{
  content:""; position:absolute; top:50%; width:26px; height:1px; background:var(--gold);
}
.divider-mark::before{ left:0; }
.divider-mark::after{ right:0; }
.divider-mark span{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
  width:7px; height:7px; border:1px solid var(--gold);
}
.section-title.on-dark h2{ color:var(--ivory); }
.section-title.on-dark p{ color:var(--gold-soft); }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-delay-1.in-view{ transition-delay:.1s; }
.reveal-delay-2.in-view{ transition-delay:.2s; }
.reveal-delay-3.in-view{ transition-delay:.3s; }

/* ============ HEADER / NAV ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0;
  transition:background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-header.is-scrolled{
  background:rgba(251,244,236,.92); backdrop-filter:blur(10px);
  padding:12px 0; box-shadow:0 8px 24px -18px rgba(0,0,0,.4);
}
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand .names{
  font-family:var(--f-script); font-size:30px; color:var(--ivory);
  transition:color .45s var(--ease);
}
.brand .sub{
  font-family:var(--f-sans); font-size:9px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold-soft); margin-top:2px; transition:color .45s var(--ease);
}
.site-header.is-scrolled .brand .names{ color:var(--wine-deep); }
.site-header.is-scrolled .brand .sub{ color:var(--wine-soft); }

.nav-list{ display:flex; gap:34px; align-items:center; }
.nav-list a{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ivory); position:relative; padding:6px 0; transition:color .3s;
}
.site-header.is-scrolled .nav-list a{ color:var(--ink); }
.nav-list a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .3s var(--ease);
}
.nav-list a:hover::after,.nav-list a.active::after{ width:100%; }
.nav-list a.active{ color:var(--gold); }

.nav-toggle{
  display:none; width:42px; height:42px; border:1px solid var(--gold); border-radius:50%;
  background:transparent; position:relative; z-index:600;
}
.nav-toggle span{
  position:absolute; left:50%; top:50%; width:16px; height:1px; background:var(--ivory);
  transform:translate(-50%,-4px);
  box-shadow:0 8px 0 var(--ivory); transition:all .3s var(--ease);
}
.nav-toggle span::after{
  content:""; position:absolute; left:0; top:8px; width:16px; height:1px; background:var(--ivory);
}
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle span::after{ background:var(--wine-deep); }
.site-header.is-scrolled .nav-toggle span{ box-shadow:0 8px 0 var(--wine-deep); }

@media (max-width:900px){
  .nav-list{
    position:fixed; inset:0 0 0 30%; background:var(--wine-deep);
    flex-direction:column; justify-content:center; gap:26px;
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .nav-list.is-open{ transform:translateX(0); }
  .nav-list a{ color:var(--ivory) !important; font-size:14px; }
  .nav-toggle{ display:block; }
}
@media (max-width:480px){
  .brand .names{ font-size:21px; }
  .brand .sub{ letter-spacing:.28em; font-size:8px; }
  .site-header{ padding:16px 0; }
}

/* ============ HERO ============ */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease);
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 14s ease-in-out infinite alternate;
}
@keyframes kenburns{ 0%{ transform:scale(1);} 100%{ transform:scale(1.09);} }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,8,10,.25) 0%, rgba(20,8,10,.15) 35%, rgba(20,8,10,.78) 100%);
  z-index:1;
}
.hero-content{
  position:relative; z-index:2; width:100%; padding-bottom:64px; text-align:center; color:var(--ivory);
}
.hero-content .eyebrow{ color:var(--gold-soft); }
.hero-content h1{
  font-family:var(--f-script); font-size:clamp(48px,9vw,104px); line-height:1;
  margin-bottom:6px;
}
.hero-content .amp{ display:inline-block; color:var(--gold); font-size:.55em; margin:0 10px; vertical-align:middle; }
.hero-content .tagline{
  font-family:var(--f-serif); font-style:italic; font-size:18px; letter-spacing:.04em; color:var(--ivory);
  opacity:.9;
}
.hero-date{
  margin:26px auto 0; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); border-top:1px solid rgba(230,210,170,.4); border-bottom:1px solid rgba(230,210,170,.4);
  padding:10px 0;
}

.hero-status{
  margin-top:28px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}
.time-chip{
  min-width:64px; padding:10px 6px; border:1px solid rgba(230,210,170,.35);
  border-radius:var(--radius); backdrop-filter:blur(4px); background:rgba(20,8,10,.25);
}
.time-chip strong{ display:block; font-size:24px; font-family:var(--f-serif); color:var(--ivory); }
.time-chip span{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); }
.hero-elapsed{
  font-family:var(--f-serif); font-style:italic; font-size:19px; color:var(--ivory);
}

.hero-play{
  margin:30px auto 0; width:60px; height:60px; border-radius:50%;
  border:1px solid rgba(250,244,236,.6); background:rgba(20,8,10,.25);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.hero-play::before{
  content:""; position:absolute; inset:-8px; border:1px solid rgba(250,244,236,.35); border-radius:50%;
  animation:ringPulse 2.6s ease-out infinite;
}
@keyframes ringPulse{ 0%{ transform:scale(.85); opacity:.9;} 100%{ transform:scale(1.35); opacity:0;} }
.hero-play svg{ width:16px; height:16px; fill:var(--ivory); margin-left:2px; }

.scroll-cue{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2;
  color:var(--gold-soft); display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:9px; letter-spacing:.25em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:26px; background:linear-gradient(var(--gold),transparent); animation:cueMove 1.8s ease-in-out infinite; }
@keyframes cueMove{ 0%{ opacity:0; transform:translateY(-6px);} 50%{ opacity:1;} 100%{ opacity:0; transform:translateY(10px);} }

/* ============ ABOUT ============ */
.about{
  min-height:100svh; padding:104px 0 36px; background:var(--paper);
  display:flex; align-items:center;
}
.about .container{ width:100%; }
.about-duo{ display:grid; grid-template-columns:1fr auto 1fr; gap:38px; align-items:center; margin-top:8px; }
.about-person{ text-align:center; }
.about-photo{
  position:relative; width:168px; margin:0 auto; border-radius:6px; overflow:hidden; box-shadow:var(--shadow-soft);
}
.about-photo::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.55); pointer-events:none; }
.about-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .8s var(--ease); }
.about-photo:hover img{ transform:scale(1.06); }
.about-person .eyebrow{ display:block; margin-top:16px; }
.about-person h3{ font-family:var(--f-serif); font-size:25px; color:var(--wine-deep); margin:6px 0 8px; }
.about-person p{ color:var(--ink-soft); line-height:1.65; font-size:13px; max-width:30ch; margin:0 auto; }
.about-social{ display:flex; gap:9px; margin-top:14px; justify-content:center; }
.about-social a{
  width:32px; height:32px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.about-social a:hover{ background:var(--wine); border-color:var(--wine); color:var(--ivory); }
.about-social svg{ width:13px; height:13px; fill:currentColor; }
.about-divider{ display:flex; flex-direction:column; align-items:center; gap:12px; align-self:stretch; }
.about-divider .ad-line{ width:1px; flex:1; min-height:30px; background:linear-gradient(var(--gold-soft),var(--gold),var(--gold-soft)); }
.about-divider .ad-amp{ font-family:var(--f-script); font-size:32px; color:var(--gold); line-height:1; }

@media (max-width:760px){
  .about{ padding:96px 0 32px; }
  .about-duo{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    gap:0; padding:0 7vw; margin-top:4px;
  }
  .about-duo::-webkit-scrollbar{ display:none; }
  .about-person{ flex:0 0 86%; scroll-snap-align:center; padding:0 10px; }
  .about-divider{ display:none; }
  .about-photo{ width:132px; }
  .about-person p{ font-size:12.5px; }
}

/* ============ STORY / TIMELINE ============ */
.story{
  min-height:100svh; padding:104px 0 36px; background:var(--paper-2); position:relative;
  display:flex; flex-direction:column; justify-content:center;
}
.story-rail{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 24px 10px;
  scrollbar-width:none; margin-top:14px;
  justify-content:safe center;
}
.story-rail::-webkit-scrollbar{ display:none; }
.s-item{ flex:0 0 auto; width:min(74vw,250px); scroll-snap-align:center; text-align:center; }
.s-dot{
  width:10px; height:10px; margin:0 auto 10px; border-radius:50%; background:var(--wine);
  border:2px solid var(--gold);
}
.s-date{ font-family:var(--f-serif); font-style:italic; font-weight:600; color:var(--wine-deep); font-size:15px; margin-bottom:10px; }
.s-card{ background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); text-align:left; }
.s-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.s-card .s-body{ padding:14px 16px 18px; }
.s-card h4{ font-family:var(--f-serif); font-size:19px; color:var(--wine-deep); }
.s-card p{ margin-top:6px; font-size:13.5px; color:var(--ink); line-height:1.6; min-height:1.2em; }

@media (max-width:760px){
  .story{ padding:96px 0 32px; }
}

/* ============ GALLERY ============ */
.gallery-section{
  min-height:100svh; padding:104px 0 36px; background:var(--wine-deep); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.gallery-section::before{
  content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  background:url('/uploads/site/ptn-bg.jpg') center/cover;
}
.gallery-rail{
  position:relative; z-index:1;
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 24px 26px;
  scrollbar-width:none;
  justify-content:safe center;
}
.gallery-rail::-webkit-scrollbar{ display:none; }
.gallery-rail .g-item{
  flex:0 0 auto; width:min(72vw,260px); aspect-ratio:2/3; scroll-snap-align:center;
  border-radius:var(--radius); overflow:hidden; position:relative; cursor:zoom-in;
  box-shadow:var(--shadow-soft);
}
.gallery-rail .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-rail .g-item:hover img{ transform:scale(1.08); }
.gallery-rail .g-item .p-zoom{
  position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%;
  background:rgba(251,244,236,.9); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px); transition:all .3s var(--ease);
}
.gallery-rail .g-item:hover .p-zoom{ opacity:1; transform:none; }
.gallery-rail .g-item .p-zoom svg{ width:13px; height:13px; }
.gallery-nav{ display:flex; justify-content:center; gap:14px; margin-top:8px; position:relative; z-index:1; }
.rail-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-soft); background:transparent;
  color:var(--gold-soft); display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.rail-btn:hover{ background:var(--gold); color:var(--wine-deep); }
.rail-btn svg{ width:14px; height:14px; fill:currentColor; }
.rail-btn.on-light{ border-color:var(--wine); color:var(--wine); }
.rail-btn.on-light:hover{ background:var(--wine); color:var(--ivory); }

/* ============ ALBUM LINKS ============ */
.albums{
  min-height:100svh; padding:104px 0 36px; background:var(--paper);
  display:flex; align-items:center;
}
.albums .container{ width:100%; }
.album-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.album-card{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
}
.album-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.album-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,8,10,.85) 0%, rgba(20,8,10,.1) 55%);
}
.album-card:hover img{ transform:scale(1.09); }
.album-label{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px 16px; text-align:center; color:var(--ivory);
}
.album-label .a-name{ font-family:var(--f-serif); font-size:19px; letter-spacing:.02em; }
.album-label .a-count{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-top:6px; }
.album-label .a-arrow{ display:inline-block; margin-top:10px; width:26px; height:26px; border:1px solid rgba(251,244,236,.5); border-radius:50%; line-height:24px; transition:all .3s; }
.album-card:hover .a-arrow{ background:var(--gold); border-color:var(--gold); }
.album-card:hover .a-arrow svg{ fill:var(--wine-deep); }
.album-label svg{ width:11px; height:11px; fill:var(--ivory); }

@media (max-width:820px){ .album-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============ WEDDING EVENTS (3 rites) ============ */
.rites{
  min-height:100svh; padding:104px 0 36px; background:var(--paper-2);
  display:flex; align-items:center;
}
.rites .container{ width:100%; }
.rite-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.rite-card{
  background:var(--paper); padding:34px 26px; text-align:center; border-radius:var(--radius);
  box-shadow:var(--shadow-soft); position:relative; transition:transform .4s var(--ease);
}
.rite-card:hover{ transform:translateY(-8px); }
.rite-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.rite-icon svg{ width:23px; height:23px; stroke:var(--wine); fill:none; stroke-width:1.4; }
.rite-card h3{ font-family:var(--f-serif); font-size:21px; color:var(--wine-deep); }
.rite-card .r-time{ font-size:11.5px; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; margin:9px 0 12px; font-weight:600; }
.rite-card p{ color:var(--ink-soft); font-size:13.5px; line-height:1.6; }

@media (max-width:820px){
  .rite-grid{
    display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:0 7vw 6px;
  }
  .rite-grid::-webkit-scrollbar{ display:none; }
  .rite-card{ flex:0 0 84%; scroll-snap-align:center; padding:28px 22px; }
  .rite-nav{ display:flex; justify-content:center; gap:14px; margin-top:16px; }
}
@media (min-width:821px){ .rite-nav{ display:none; } }

/* ============ EVENTS / MAP CARDS ============ */
.events{
  min-height:100svh; padding:104px 0 36px; background:var(--paper);
  display:flex; align-items:center;
}
.events .container{ width:100%; }
.event-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.event-card{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); background:var(--paper-2); }
.event-card .e-img{ overflow:hidden; background:var(--paper-2); }
.event-card .e-img img{ width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
.event-card:hover .e-img img{ transform:scale(1.07); }
.event-card .e-body{ padding:18px 20px 22px; }
.event-card h4{ font-family:var(--f-serif); font-size:17px; color:var(--wine-deep); margin-bottom:7px; }
.event-card p{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; min-height:2.4em; }
.e-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--wine); border-bottom:1px solid var(--wine); padding-bottom:2px;
}
.e-link svg{ width:11px; height:11px; fill:currentColor; }

@media (max-width:820px){
  .event-grid{
    display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:0 7vw 6px;
  }
  .event-grid::-webkit-scrollbar{ display:none; }
  .event-card{ flex:0 0 84%; scroll-snap-align:center; }
  .event-card p{ min-height:0; }
  .event-nav{ display:flex; justify-content:center; gap:14px; margin-top:16px; }
}
@media (min-width:821px){ .event-nav{ display:none; } }

/* ============ FOOTER ============ */
.site-footer{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--wine-deep); color:var(--ivory); text-align:center; padding:24px;
}
.footer-seal{
  width:70px; height:70px; margin:0 auto 22px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-script); font-size:26px; color:var(--gold);
}
.site-footer h2{ font-family:var(--f-serif); font-size:clamp(30px,5vw,44px); }
.site-footer .f-names{ margin-top:10px; font-family:var(--f-script); font-size:26px; color:var(--gold-soft); }
.site-footer .f-note{ margin-top:18px; font-size:12.5px; color:rgba(251,244,236,.6); letter-spacing:.03em; }

/* ============ FLOATING CONTROLS ============ */
.fab{
  position:fixed; z-index:400; width:48px; height:48px; border-radius:50%;
  background:var(--wine); color:var(--ivory); border:1px solid var(--gold-soft);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:all .35s var(--ease);
}
.fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.fab svg{ width:16px; height:16px; fill:currentColor; }
#backToTop{ right:22px; bottom:22px; }
#musicToggle{ left:22px; bottom:22px; opacity:1; pointer-events:auto; transform:none; }
#musicToggle .disc{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; }
#musicToggle.is-playing .disc{ animation:spinDisc 5s linear infinite; }
@keyframes spinDisc{ to{ transform:rotate(360deg);} }

/* ============ VIDEO MODAL ============ */
.modal-backdrop{
  position:fixed; inset:0; z-index:1000; background:rgba(15,6,8,.9);
  display:flex; align-items:center; justify-content:center; padding:22px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal-backdrop.is-open{ opacity:1; visibility:visible; }
.modal-frame{ width:100%; max-width:900px; aspect-ratio:16/9; position:relative; background:#000; }
.modal-frame iframe{ width:100%; height:100%; border:0; }
.modal-close{
  position:absolute; top:-42px; right:0; width:32px; height:32px; border-radius:50%;
  background:transparent; border:1px solid rgba(251,244,236,.5); color:var(--ivory);
  display:flex; align-items:center; justify-content:center;
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(12,5,6,.95);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-stage{ position:relative; max-width:92vw; max-height:80vh; }
.lightbox-stage img{ max-width:92vw; max-height:80vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox-counter{ margin-top:16px; color:var(--gold-soft); font-size:12px; letter-spacing:.15em; }
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute; width:44px; height:44px; border-radius:50%; border:1px solid rgba(251,244,236,.4);
  background:rgba(251,244,236,.06); color:var(--ivory); display:flex; align-items:center; justify-content:center;
}
.lightbox-close{ top:22px; right:22px; }
.lightbox-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:16px; top:50%; transform:translateY(-50%); }
.lightbox-close svg,.lightbox-prev svg,.lightbox-next svg{ width:14px; height:14px; fill:var(--ivory); }
@media (max-width:600px){ .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } }

/* ============ SUB-GALLERY PAGES ============ */
.sub-hero{
  position:relative; padding:180px 24px 90px; text-align:center; background:var(--wine-deep); color:var(--ivory); overflow:hidden;
}
.sub-hero::before{ content:""; position:absolute; inset:0; opacity:.22; background:url('/uploads/site/ptn-bg.jpg') center/cover; mix-blend-mode:overlay; }
.sub-hero .container{ position:relative; z-index:1; }
.sub-back{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:22px; border:1px solid rgba(230,210,170,.35); padding:8px 16px; border-radius:30px;
}
.sub-back svg{ width:10px; height:10px; fill:currentColor; }
.sub-hero h1{ font-family:var(--f-script); font-size:clamp(38px,7vw,64px); }
.sub-hero p{ margin-top:10px; font-family:var(--f-serif); font-style:italic; color:var(--gold-soft); }

/* =========================================================
   LƯỚI ẢNH ALBUM — 3 bố cục, chọn trong /admin tab Giao diện
   Nguyên tắc chung: mỗi ô biết trước tỉ lệ ảnh (--ar) nên
   trình duyệt chừa đúng chỗ ngay từ đầu, không giật layout.
   ========================================================= */
.pgal{
  max-width:var(--container); margin:0 auto; padding:70px 24px 110px;
  gap:var(--g-gap);
}
.pgal-empty{ text-align:center; padding:80px 24px; color:var(--ink-soft); font-family:var(--f-serif); font-style:italic; }

.pgal .p-item{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--g-radius); cursor:zoom-in;
  background:var(--paper-2);
  box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pgal .p-item img{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform .6s var(--ease), opacity .5s ease;
}

/* nút phóng to */
.pgal .p-zoom{
  position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:50%;
  background:rgba(251,244,236,.92); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.pgal .p-zoom svg{ width:12px; height:12px; fill:var(--wine-deep); }
.pgal .p-item:hover .p-zoom,
.pgal .p-item:focus-visible .p-zoom{ opacity:1; transform:none; }
.pgal .p-item:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* kiểu hover */
.pgal.hov-zoom .p-item:hover img{ transform:scale(1.06); }
.pgal.hov-lift .p-item:hover{ transform:translateY(-6px); box-shadow:0 26px 60px -24px rgba(42,20,15,.55); }

/* ---------- 1. JUSTIFIED (mặc định) ----------
   Mỗi hàng lấp đầy chiều ngang, ảnh giữ nguyên tỉ lệ gốc, không cắt xén.
   flex-grow tỉ lệ thuận với độ rộng ảnh -> ảnh ngang chiếm nhiều chỗ hơn ảnh dọc. */
.pgal.is-justified{ display:flex; flex-wrap:wrap; align-items:stretch; }
.pgal.is-justified .p-item{
  flex-grow:calc(var(--ar, 1.5) * 100);
  flex-basis:calc(var(--ar, 1.5) * var(--g-row));
  height:var(--g-row);
}
.pgal.is-justified .p-item img{ object-fit:cover; }
/* hàng cuối thiếu ảnh: ô co giãn này hút phần dư nên ảnh không bị kéo méo */
.pgal-fill{ flex-grow:1000000; flex-basis:0; height:0; }

@media (max-width:900px){
  .pgal.is-justified .p-item{ flex-basis:calc(var(--ar, 1.5) * var(--g-row) * .72); height:calc(var(--g-row) * .72); }
}
@media (max-width:560px){
  /* màn hình hẹp: một ảnh mỗi hàng, giữ đúng tỉ lệ gốc, không cắt */
  .pgal.is-justified .p-item{ flex:0 0 100%; height:auto; aspect-ratio:var(--ar, 1.5); }
}

/* ---------- 2. MASONRY ----------
   Lưới so le, ô cao thấp theo tỉ lệ ảnh thật. Dùng grid + row-span
   nên thứ tự đọc là TRÁI SANG PHẢI (khác column-count kiểu cũ đọc dọc). */
.pgal.is-masonry{
  display:grid;
  grid-template-columns:repeat(var(--g-cols), 1fr);
  grid-auto-rows:8px;
  align-items:start;
}
.pgal.is-masonry .p-item{
  /* số dòng chiếm = chiều cao ô / 8px, tính từ tỉ lệ ảnh */
  grid-row-end:span calc(round(up, (100 / var(--g-cols)) / var(--ar, 1.5) * 0.16, 1));
  height:100%;
}
/* trình duyệt chưa hỗ trợ round(): quay về aspect-ratio, vẫn đẹp và không vỡ */
@supports not (height: round(up, 1px, 1px)){
  .pgal.is-masonry{ grid-auto-rows:auto; }
  .pgal.is-masonry .p-item{ grid-row-end:auto; aspect-ratio:var(--ar, 1.5); }
}
@media (max-width:1000px){ .pgal.is-masonry{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){  .pgal.is-masonry{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 3. LƯỚI ĐỀU ----------
   Mọi ô vuông bằng nhau, gọn gàng nhất, ảnh được cắt cho vừa khung. */
.pgal.is-grid{
  display:grid;
  grid-template-columns:repeat(var(--g-cols), 1fr);
}
.pgal.is-grid .p-item{ aspect-ratio:1; }
@media (max-width:1000px){ .pgal.is-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){  .pgal.is-grid{ grid-template-columns:repeat(2,1fr); } }

/* Bỏ hiệu ứng khi người dùng chọn giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .pgal .p-item, .pgal .p-item img, .pgal .p-zoom{ transition:none; }
  .pgal.hov-zoom .p-item:hover img,
  .pgal.hov-lift .p-item:hover{ transform:none; }
}

/* theme: black album */
body.theme-black{ --paper:#161011; --paper-2:#1d1616; --ink:#f2e9e4; --ink-soft:#b9a9a3; }
body.theme-black .sub-hero{ background:#0c0808; }
body.theme-black .site-footer{ background:#0c0808; }

/* theme: white album */
body.theme-white{ --paper:#ffffff; --paper-2:#faf7f4; }
body.theme-white .sub-hero{ background:linear-gradient(160deg,#f4e9dd,#efe0cf); color:var(--wine-deep); }
body.theme-white .sub-hero .sub-back,body.theme-white .sub-hero p{ color:var(--wine); }
body.theme-white .sub-hero::before{ display:none; }

/* subpage back-to-home footer link */
.sub-footer-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-soft); border-bottom:1px solid rgba(230,210,170,.4); padding-bottom:3px;
}

/* subpage header: independent of the homepage's scroll-driven header state */
.subpage-header{
  position:relative; background:var(--paper); padding:16px 0;
  box-shadow:0 2px 16px -8px rgba(20,8,10,.25);
}
.subpage-header .brand .names{ color:var(--wine); }
.subpage-header .brand .sub{ color:var(--ink-soft); }
body.theme-black .subpage-header .brand .names{ color:var(--gold); }
body.theme-black .subpage-header .brand .sub{ color:var(--gold-soft); }
.subpage-nav{ display:flex; gap:22px; }
.subpage-nav a{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink); transition:color .3s;
}
.subpage-nav a:hover{ color:var(--wine); }
body.theme-black .subpage-nav a:hover{ color:var(--gold); }
@media (max-width:480px){
  .subpage-nav{ gap:14px; }
  .subpage-nav a{ font-size:9.5px; }
}

/* ============ UTILITIES ============ */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
