/* CSS dung chung cho index.html va invitation.html.
   DE O public/ chu khong phai public/assets/: moi url() ben trong deu la
   'assets/...' tuong doi voi FILE CSS, de trong assets/ se thanh assets/assets/. */
  @font-face{
    font-family:'Snell';
    src:url('assets/fonts/snell.ttf') format('truetype');
    font-weight:400; font-display:swap;
  }
  @font-face{
    font-family:'Snell';
    src:url('assets/fonts/snell-bold.ttf') format('truetype');
    font-weight:700; font-display:swap;
  }

  :root{
    --navy:      #0E2C4E;
    --navy-soft: #677A90;
    --paper:     #FBF8F4;
    --panel:     #173556;
    --loader-bg: #C9C5BF;

    /* Kính ĐỤC: chỉ dành cho nav bar mobile. Thanh nav trôi qua cả khung timeline
       nền navy, kính trong sẽ nuốt mất chữ nên buộc phải có lớp giấy đỡ phía sau. */
    --glass-bg:     rgba(251,248,244,.88);
    --glass-blur:   blur(16px) saturate(1.4);
    --glass-border: rgba(255,255,255,.7);
    --glass-shadow: 0 1px 14px rgba(14,44,78,.10), inset 0 1px 0 rgba(255,255,255,.35);

    /* Kính TRONG: cùng ngôn ngữ với nav desktop — alpha gần như bằng 0, thứ làm
       nên mảng kính là blur chứ không phải nền. Dùng cho nút mũi tên album:
       nút chỉ nằm trên ảnh cưới nên thấy được ảnh chạy qua sau nút mới đẹp.
       Blur cao hơn nav desktop (7px) vì ảnh cưới nhiều chi tiết hơn nền toile. */
    --glass-clear-bg:     rgba(255,255,255,.10);
    --glass-clear-blur:   blur(14px) saturate(1.5);
    --glass-clear-border: rgba(255,255,255,.5);
    --glass-clear-shadow: 0 1px 14px rgba(14,44,78,.05), inset 0 1px 0 rgba(255,255,255,.35);

    /* 1 đơn vị = 1% chiều rộng khung design (3609px ~ 1920). Kẹp thêm theo chiều
       cao để hero không vượt màn hình trên máy màn rộng: hero cao 55.4u = 100vh. */
    --u: min(1vw, 1.805vh);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  /* Nền giấy dùng chung cho cả trang. Ảnh lát gạch ở đúng kích thước gốc —
     KHÔNG phóng to; hết một ảnh thì nối tiếp ảnh sau. Ảnh đã ghép soi gương nên
     mối nối không lộ. */
  body{
    min-height:100%;
    font-family:'Playfair Display', serif;
    color:var(--navy);
    background:var(--paper) url('assets/img/bg-paper.webp') repeat;
  }

  /* Khoá cuộn trong lúc chạy opening. Dùng class chứ KHÔNG dùng style inline:
     gán body.style.overflow='' chỉ xoá inline rồi rơi về quy tắc CSS, vẫn hidden. */
  body.is-opening{ overflow:hidden; }

  /* height:auto bắt buộc — nếu không, thuộc tính height="..." trong HTML thắng
     CSS width và ảnh bị méo. */
  img{ max-width:100%; height:auto; display:block; }

  /* ================= Opening (loading) ================= */

  .opening{
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(18px, 3.4vh, 40px);
    padding:4vh 4vw;
    background:var(--loader-bg) url('assets/bg-desktop.webp') center/cover no-repeat;
    transition:opacity 900ms ease;
  }
  .opening[hidden]{ display:none; }

  .logo{ width:clamp(72px, 5.9vw, 112px); height:auto; }

  .frame{
    height:min(53vh, 41vw);
    width:auto; max-width:88vw;
    opacity:.45;
    will-change:opacity;
  }

  .tagline{ font-size:clamp(19px, 1.55vw, 30px); letter-spacing:.01em; }

  .loader{
    position:relative;
    width:clamp(230px, 21.5vw, 412px);
    margin-top:clamp(26px, 3.6vh, 44px);
  }
  .track{ height:8px; border:1px solid var(--navy); border-radius:999px; overflow:hidden; }
  .fill{ display:block; height:100%; width:25%; background:var(--navy); border-radius:999px; }

  .heart, .pct{ position:absolute; left:25%; transform:translateX(-50%); }
  .heart{ bottom:calc(100% + 10px); width:clamp(22px, 1.5vw, 28px); height:auto; }
  .pct{ top:calc(100% + 9px); font-size:clamp(15px, 1.05vw, 20px); white-space:nowrap; }

  /* ================= Chung ================= */

  .wrap{ width:min(1180px, 88vw); margin:0 auto; }
  .center{ text-align:center; }

  .script{ font-family:'Snell', cursive; font-weight:400; }

  .eyebrow{
    font-size:clamp(13px,1.05vw,17px);
    color:var(--navy-soft);
    letter-spacing:.06em;
  }

  /* Nền toile xanh: MỖI SECTION một ảnh, co theo đúng section đó (không phải một
     ảnh nền trải suốt cả trang). Dùng cover để ảnh luôn phủ kín khung section. */
  .toile{ position:relative; isolation:isolate; }
  .toile::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:url('assets/img/bg-hero.webp') center/cover no-repeat;
    opacity:var(--bg-op, .10);
    pointer-events:none;
  }

  /* Lace phải ĐÈ lên nền của section kế bên, không nằm trên dải giấy riêng —
     nếu không sẽ thấy viền trắng. Ảnh 2049x108 -> cao = 100vw/18.97 = 5.27vw. */
  .lace{
    width:100%; height:auto; display:block;
    position:relative; z-index:3; pointer-events:none;
    margin-bottom:-5.27vw;            /* kéo section dưới lên, lace nằm đè lên */
  }
  /* Hai thứ ĐỘC LẬP nhau, đừng gộp:
     --flip : lật ảnh (rìa ren quay lên)
     --prev : đè lên section TRÊN thay vì section dưới                       */
  .lace--flip{ transform:scaleY(-1); }
  .lace--prev{ margin-bottom:0; margin-top:-5.27vw; }

  /* Hiệu ứng: scroll tới đâu hiện tới đó. Hiện TỪ TRÊN XUỐNG, cùng hướng với
     nav bar (translateY âm -> 0), chậm hơn bản cũ một nhịp. */
  /* reveal chỉ lo trục Y; phần tử nào cần dịch ngang thì đặt --tx.
     Nếu để reveal ghi đè cả transform thì translateX của phần tử bị mất. */
  .reveal{
    opacity:0; transform:translate(var(--tx,0), -26px);
    transition:opacity 1250ms cubic-bezier(.22,.61,.36,1),
               transform 1250ms cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  .reveal.in{ opacity:1; transform:translate(var(--tx,0), 0); }

  /* Phần tử đã có transform riêng (dây hoa lật/xoay) thì chỉ mờ dần, không dịch —
     nếu dùng .reveal thì translate sẽ xoá mất scaleX/rotate của nó. */
  .fade{ opacity:0; transition:opacity 1500ms ease; }
  .fade.in{ opacity:1; }

  /* ================= Navbar (glass) ================= */

  /* Figma: width 920, height 80, padding 12/32, space-between, radius 99,
     bg rgba(240,242,244,α), cách mép trên 93, cách hai bên 500 (khung 1920). */
  .nav{
    position:fixed; z-index:60;
    top:calc(4.84 * var(--u));
    left:50%;
    width:calc(47.92 * var(--u));
    height:calc(4.17 * var(--u));
    padding:calc(.625 * var(--u)) calc(1.667 * var(--u));
    display:flex; justify-content:space-between; align-items:center;
    border-radius:999px;
    /* Kính "trong trẻo": phải thấy được hoạ tiết toile chạy qua sau thanh nav.
       blur cao + brightness>1 mới là thứ xoá nền thành mảng trắng đục, không
       phải alpha của background — nên giữ blur thấp, brightness đúng bằng 1. */
    background:rgba(255,255,255,.04);
    -webkit-backdrop-filter:blur(7px) saturate(1.5);
    backdrop-filter:blur(7px) saturate(1.5);
    border:1px solid rgba(255,255,255,.5);
    box-shadow:0 1px 14px rgba(14,44,78,.05), inset 0 1px 0 rgba(255,255,255,.35);
    opacity:0; transform:translate(-50%, -160%);
    transition:opacity 600ms ease, transform 600ms ease;
  }
  .nav.on{ opacity:1; transform:translate(-50%, 0); }
  .nav a{
    color:var(--navy-soft);
    text-decoration:none;
    font-size:calc(1.2 * var(--u));
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:color 200ms ease;
  }
  @media (hover:hover){ .nav a:hover{ color:var(--navy); } }
  .nav a:focus-visible, .nav a.active{ color:var(--navy); }

  /* ================= Nút nhạc (freeze góc màn hình) ================= */

  .music{
    position:fixed; right:clamp(14px,1.6vw,28px); bottom:clamp(14px,1.6vw,28px);
    z-index:70;
    width:46px; height:46px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(255,255,255,.5);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border:1px solid rgba(14,44,78,.28);
    color:var(--navy); cursor:pointer;
    opacity:0; pointer-events:none;
    transition:opacity 600ms ease, background 200ms ease;
  }
  .music.on{ opacity:1; pointer-events:auto; }
  .music svg{ width:21px; height:21px; }
  .music .wave{ transition:opacity 200ms ease; }
  .music[aria-pressed="false"] .wave{ opacity:.25; }

  /* ================= Hero ================= */

  /* Toạ độ lấy từ Homepage_deskstop.png, đơn vị = % chiều rộng khung design.
     Sửa số ở đây là dịch đúng phần tử đó, không ảnh hưởng phần còn lại. */
  .hero{ position:relative; height:calc(55.4 * var(--u)); overflow:hidden; }
  .hero__stage{
    position:relative;
    width:calc(100 * var(--u));
    height:100%;
    margin:0 auto;
  }
  /* Ảnh cắt nền mới cao hơn ảnh cũ (tỉ lệ 0.937 so với 1.127) nên phải hạ bề
     ngang xuống, nếu giữ 46.4u thì chân bị mép dưới hero cắt mất. */
  .hero__photo{
    position:absolute;
    left:calc(3.5 * var(--u));
    top:calc(9.5 * var(--u));
    width:calc(38.5 * var(--u));
  }
  .hero__text{
    position:absolute;
    left:calc(69.5 * var(--u));      /* tâm khối chữ */
    top:calc(14.0 * var(--u));
    transform:translateX(-50%);
    width:calc(58 * var(--u));
    text-align:center;
  }
  .hero__mono{ width:calc(6 * var(--u)); margin:0 auto; --tx:calc(1 * var(--u)); }
  .hero__save{
    margin-top:calc(3.0 * var(--u));
    font-family:'Snell', cursive;
    font-size:calc(3.95 * var(--u));
    line-height:1;
    color:var(--navy-soft);
  }
  .hero__names{
    margin-top:calc(0.7 * var(--u));
    font-size:calc(3.05 * var(--u));
    font-weight:500;
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:nowrap;
    line-height:1.1;
  }
  .hero__names .amp{
    font-family:'Snell', cursive;
    text-transform:none;
    font-size:.9em;
    color:var(--navy-soft);
    padding:0 .3em;
  }
  .hero__date{
    margin-top:calc(2.6 * var(--u));
    font-family:'Snell', cursive;
    font-size:calc(2.88 * var(--u));
    line-height:1;
    color:var(--navy-soft);
  }
  .hero__dogs{
    position:absolute;
    left:calc(46 * var(--u));        /* bám sát mép đuôi váy của ảnh mới */
    top:calc(35 * var(--u));
    --tx:-50%;
    display:flex; align-items:flex-end;
    gap:0;
  }
  .hero__dog{ text-align:center; }
  .hero__dog span{                    /* tên nằm TRÊN ảnh, như design */
    display:block;
    font-size:calc(.85 * var(--u));
    color:var(--navy);
    margin-bottom:calc(.4 * var(--u));
  }
  .hero__dog--gau  img{ width:calc(11.5 * var(--u)); }
  .hero__dog--milo img{ width:calc(13 * var(--u)); }
  .hero__dog--milo{ margin-left:calc(-2.2 * var(--u)); }   /* chồng mí sang Gấu */

  /* ================= Thiệp mời ================= */

  /* overflow:hidden de day hoa bleed ra mep ma khong gay cuon ngang */
  /* padding-top phải trừ hao 5.27vw mà dải ren đè lên; muốn hở ~6.5vw giữa ren
     và logo thì đặt ~11.8vw. */
  .invite{
    position:relative; overflow:hidden;
    padding:clamp(86px,11.8vw,230px) 0 clamp(50px,8vh,110px);
  }
  /* Dây hoa bám mép, bị mép cắt bớt. Asset: ngọn cuốn mảnh ở trên, cuống ở dưới.
     Trái = 2 bông rời (trên treo ngược, dưới xuôi). Phải = 2 bông chồng mí thành dãy liền. */
  .invite__hoa{
    position:absolute;
    width:calc(10 * var(--u));
    pointer-events:none;
    transform:scaleX(var(--fx,1)) rotate(var(--rot,0deg));
  }
  .invite__hoa.in{ opacity:.95; }   /* đè .fade.in để hoa không đậm quá */
  /* top âm để phần trên dây bị .invite cắt đi, chỉ lộ đoạn nhiều hoa như design */
  .invite__hoa--l1{ top:calc(-13 * var(--u)); left:calc(-2 * var(--u));  --rot:180deg; }
  .invite__hoa--l2{ top:calc(27 * var(--u));  left:calc(-2 * var(--u));  --fx:-1; }
  .invite__hoa--r1{ top:calc(-6 * var(--u));  right:calc(-2 * var(--u)); }
  .invite__hoa--r2{ top:calc(19 * var(--u));  right:calc(-2 * var(--u)); }

  .invite__mono{ width:clamp(56px,4.6vw,88px); margin:0 auto clamp(18px,3vh,40px); }
  .invite__lead{ font-size:clamp(14px,1.1vw,19px); color:var(--navy-soft); }

  .invite__ho{
    display:flex; justify-content:space-between;
    gap:16px; margin:clamp(24px,4vh,52px) auto 0;
    width:min(760px, 78vw);
  }
  .invite__ho h3{
    font-size:clamp(12px,.95vw,16px); font-weight:400;
    letter-spacing:.16em; color:var(--navy-soft); text-transform:uppercase;
  }
  .invite__ho p{
    margin-top:10px;
    font-size:clamp(15px, 1.25vw, 24px);   /* 24px @1920, không teo dưới 15px */
    letter-spacing:.04em;
  }
  .invite__ho b{ font-weight:600; text-transform:uppercase; }

  .invite__type{
    margin-top:clamp(18px,3vh,40px);
    font-family:'Snell', cursive;
    font-size:clamp(30px,3.4vw,62px);
    color:var(--navy-soft);
  }
  .invite__name{
    margin-top:clamp(4px,1vh,12px);
    font-size:clamp(28px,3vw,54px); font-weight:500;
  }
  .invite__rel{
    display:flex; justify-content:center; align-items:center;
    gap:clamp(30px,6vw,110px);
    margin:clamp(10px,1.8vh,22px) 0;
    font-size:clamp(12px,1vw,17px); color:var(--navy-soft);
  }
  .invite__rel .amp{ font-family:'Snell',cursive; font-size:1.5em; color:var(--navy-soft); }

  .invite__when{ margin-top:clamp(24px,4vh,54px); font-size:clamp(13px,1vw,17px); color:var(--navy-soft); }
  .invite__date{
    display:flex; justify-content:center; align-items:center;
    gap:clamp(12px,1.6vw,26px);
    margin-top:clamp(8px,1.4vh,16px);
    font-size:clamp(20px,2.2vw,40px); letter-spacing:.06em;
  }
  .invite__date i{ width:1px; height:1.1em; background:var(--navy-soft); font-style:normal; }
  .invite__lunar{
    margin-top:clamp(8px,1.4vh,16px);
    font-style:italic; font-size:clamp(12px,1vw,17px); color:var(--navy-soft);
  }

  /* Chỉ hiện khi vào bằng link có ?ten= — xem invitation.html */
  .invite__guest{
    margin-top:clamp(22px,3.6vh,44px);
    font-size:clamp(14px,1.1vw,19px); color:var(--navy-soft);
  }
  .invite__guest b{
    display:block; margin-top:6px; font-weight:400;
    font-family:'Snell', cursive; font-size:clamp(26px,2.8vw,48px); color:var(--navy);
  }

  /* ================= Nhà hàng + bản đồ ================= */

  /* Một ảnh nền phủ cover cả section -> liền mạch từ ảnh Pavillon xuống hết bản đồ,
     không bị đứt làm 2 như khi dùng nền lặp. */
  .venue{
    position:relative; isolation:isolate;
    padding:clamp(50px,8vh,110px) 0 clamp(56px,9vh,120px);
  }
  .venue::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:url('assets/img/bg-venue.webp') center/cover no-repeat;
    opacity:.10; pointer-events:none;
  }
  .venue .wrap{ width:min(1340px, 92vw); }   /* rộng hơn wrap chung để ảnh + bản đồ to hơn */
  /* Ảnh nhà hàng nở TO RA khi cuộn tới (nhỏ -> lớn), không phải thu nhỏ lại. */
  .venue__pic{
    width:min(1060px, 88vw); margin:clamp(20px,4vh,50px) auto 0;
    transform:scale(.84);
    transition:transform 1700ms cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
  .venue__pic.in{ transform:scale(1); }

  .venue__kicker{ margin-top:clamp(20px,3.6vh,46px); font-size:clamp(13px,1.05vw,18px); color:var(--navy-soft); }
  .venue__name{
    margin-top:clamp(6px,1vh,14px);
    font-family:'Snell', cursive;
    font-size:clamp(30px,3.6vw,66px);
  }
  .venue__hall{ margin-top:clamp(6px,1vh,14px); font-size:clamp(13px,1.05vw,18px); color:var(--navy-soft); }

  .venue__maps{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(18px,3vw,56px); align-items:center;
    margin-top:clamp(30px,5vh,70px);
  }
  .venue__maps iframe{
    width:100%; aspect-ratio:16/10; border-radius:14px; display:block;
    border:1px solid var(--navy);
  }

  .glass-btn{
    display:inline-block;
    margin-top:clamp(28px,4.6vh,60px);
    padding:clamp(11px,1.2vw,17px) clamp(30px,3.4vw,54px);
    border:1px solid var(--navy);
    border-radius:999px;
    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    backdrop-filter:blur(12px) saturate(1.2);
    color:var(--navy); text-decoration:none;
    font-size:clamp(12px,1vw,16px); letter-spacing:.16em; text-transform:uppercase;
    transition:background 220ms ease, color 220ms ease;
  }
  @media (hover:hover){ .glass-btn:hover{ background:rgba(14,44,78,.9); color:#fff; } }

  /* ================= Countdown ================= */

  /* Nền phủ kín section; khối số căn giữa theo chiều dọc. Chừa thêm đáy đúng
     bằng đoạn nơ bị kéo chồng lên (7.8vw) để số không đụng cánh nơ. */
  .countdown{
    position:relative;
    display:grid; align-items:center;
    min-height:calc(30 * var(--u));
    padding:clamp(56px,10vh,140px) 0 calc(clamp(56px,10vh,140px) + 7.8vw);
  }
  .countdown::before{
    content:''; position:absolute; inset:0;
    background:url('assets/img/bg-timing.webp') center/cover no-repeat;
    opacity:.30; pointer-events:none;
  }
  .countdown .wrap{ position:relative; }
  /* Figma: font-size 128px (=6.67u @1920), weight 400, line-height normal,
     lining-nums proportional-nums. Dấu : CÙNG cỡ chữ với số — vị trí của nó là
     vị trí tự nhiên của glyph, không được tự căn giữa. Dùng grid + align-items:
     baseline để số và dấu : nằm chung một baseline như một dòng chữ liền. */
  .cd{
    display:grid;
    grid-template-columns:repeat(7, auto);
    align-items:baseline;
    justify-content:center;
  }
  .cd__num, .cd__sep{
    font-size:calc(6.67 * var(--u));
    font-weight:400;
    line-height:normal;
    font-variant-numeric:lining-nums proportional-nums;
    color:var(--navy);
  }
  .cd__num{ min-width:calc(7.6 * var(--u)); text-align:center; }
  .cd__sep{ padding:0 calc(3.5 * var(--u)); }
  .cd__lab{
    margin-top:calc(2.8 * var(--u));
    font-size:clamp(12px, 1.9vw, 37px);
    text-align:center;
    color:var(--navy-soft);
  }

  /* ================= Ribbon ================= */

  /* Dải ngang của nơ nằm ở 95..144 / 384px; phần đuôi rủ xuống chiếm 12.5% chiều
     rộng ảnh. Kéo khối kế tiếp lên đúng ngần đó để đuôi nơ đè lên trên, như design. */
  .ribbon{
    width:100%; height:auto; display:block;
    position:relative; z-index:2;
    margin-bottom:-12.5vw;
    pointer-events:none;
  }
  /* Dải ngang của nơ nằm ở 88..150 / 384px ảnh rộng 1920 -> mép dưới dải cách
     đỉnh ảnh 7.8% chiều rộng. Kéo nơ lên đúng ngần đó thì nền countdown chạy
     thẳng tới chân nơ, hết dải giấy trắng hở ở giữa. */
  .countdown + .ribbon{
    margin-top:-7.8vw;
    /* Cho section timeline bắt đầu ĐÚNG tại chân dải nơ (20 - 12.2 = 7.8vw).
       Nếu nhả margin ít hơn thì dải hở nằm ngoài mọi section và lòi nền body ra;
       khoảng cách tới khung navy để .timeline padding-top lo, như vậy dải hở đó
       nằm trong section và được nền toile phủ. */
    margin-bottom:-12.2vw;
  }

  /* ================= Timeline ================= */

  /* padding-top chính là khoảng hở giữa dải nơ và khung navy — nằm TRONG section
     nên được nền toile phủ, không hở nền giấy của body. */
  .timeline{
    position:relative; isolation:isolate;
    padding:2.7vw 0 clamp(50px,8vh,110px);
  }
  .timeline::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:url('assets/img/bg-hero.webp') center/cover no-repeat;
    opacity:.12; pointer-events:none;
  }
  /* Ruột navy cắt sẵn từ "BG Timeline" trên drive — đã đúng màu nên không cần
     trộn blend lên nền đặc như bản cũ nữa. --panel chỉ còn là màu dự phòng. */
  .timeline__panel{
    position:relative; overflow:hidden;
    width:min(1240px, 92vw); margin:0 auto;
    padding:clamp(40px,7vh,96px) clamp(18px,3vw,50px) clamp(46px,8vh,110px);
    background:var(--panel) url('assets/img/bg-timeline.webp') center/cover no-repeat;
  }
  .timeline__panel > *{ position:relative; }
  .timeline__title{
    font-family:'Snell', cursive;
    font-size:clamp(30px,3.6vw,64px);
    color:#fff; text-align:center;
    margin-bottom:clamp(26px,4.6vh,64px);
  }
  .tl{
    display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
    gap:clamp(8px,1.6vw,30px);
  }
  .tl__item{ text-align:center; color:#fff; }
  .tl__item h4{ font-size:clamp(12px,1.05vw,18px); font-weight:400; letter-spacing:.03em; }
  .tl__item img{ width:clamp(54px,6.4vw,120px); height:auto; margin:clamp(10px,1.8vh,22px) auto; }
  .tl__item time{ font-size:clamp(11px,.95vw,17px); color:rgba(255,255,255,.88); }

  /* ================= Câu chuyện ================= */

  .story{ position:relative; padding:clamp(50px,8vh,110px) 0; }
  .story__mono{ width:clamp(67px,6.3vw,133px); margin:0 auto clamp(26px,4.6vh,60px); }
  /* .reveal.in kéo opacity về 1, nên phải ghi đè sau nó mới giữ được 50% */
  .story__mono.in{ opacity:.5; }
  /* Không bọc .wrap -> hai ảnh chạm sát hai mép trang; chữ căn giữa theo chiều dọc */
  .story__row{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);
    gap:clamp(18px,3vw,56px); align-items:center;
  }
  .story__row img{ width:100%; height:auto; }
  .story__txt{ padding:0 clamp(10px,1.6vw,36px); }
  .story__txt p{
    font-size:clamp(13px,1.08vw,18px); line-height:1.85; text-align:center;
  }
  .story__txt p + p{ margin-top:clamp(20px,3.4vh,44px); }

  /* padding trên/dưới = khoảng hở giấy trơn, để ren không lẹm vào ảnh hai bên */
  .quote{
    position:relative;
    padding:clamp(40px,7vh,100px) 0;
    text-align:center;
  }
  /* Hai dải ren nằm trên NỀN GIẤY TRƠN, không đè lên section bên cạnh và không
     dính nền phong cảnh. Chỉ dải băng ở giữa mới có nền. */
  .quote__lace{ width:100%; height:auto; display:block; position:relative; z-index:2; }
  /* Dải băng gọn lại, cao xấp xỉ section đếm ngược — không chiếm trọn màn hình.
     min-height là chỗ duy nhất cần chỉnh nếu muốn dải cao/thấp hơn. */
  .quote__band{
    position:relative; isolation:isolate;
    min-height:29vw;
    display:grid; place-items:center;
    padding:clamp(50px,7vh,100px) 0;
    text-align:center;
  }
  /* Nền này là nền TRANG LOADING, không phải nền section nhà hàng.
     Ảnh vốn đã ngả sepia sẵn nên không cần filter nữa. */
  .quote__band::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:url('assets/bg-desktop.webp') center/cover no-repeat;
    opacity:.9; pointer-events:none;
  }
  .quote__band p{
    font-size:clamp(15px, 1.4vw, 24px);
    line-height:1.5;
    padding:0 6vw;
  }

  /* ================= Album ================= */

  .album{ padding:clamp(34px,6vh,90px) 0 clamp(50px,8vh,110px); }
  .album__full{ width:100%; height:auto; }
  .album__slide{ position:relative; }
  .album__grid{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:clamp(10px,1.8vw,34px);
    padding:clamp(22px,4vh,56px) clamp(12px,2vw,40px);
  }
  .album__grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio:2/3; }
  /* Desktop xem cả 3 ảnh cùng lúc nên không cần mũi tên; chỉ mobile mới trượt. */
  .album__nav{ display:none; }

  /* ================= Lời cảm ơn ================= */

  /* Đuôi nơ thò xuống 12.2vw kể từ mép trên section -> padding-top phải lớn hơn
     ngần đó, không thì chữ cảm ơn nằm lọt dưới hai dải ruy băng. */
  .closing{
    position:relative; isolation:isolate;
    padding:clamp(70px,15vw,290px) 0 clamp(56px,9vh,120px);
    text-align:center;
  }
  .closing::before{                    /* nền BG timing, không phải toile xanh */
    content:''; position:absolute; inset:0; z-index:-1;
    background:url('assets/img/bg-timing.webp') center/cover no-repeat;
    opacity:.30; pointer-events:none;
  }
  .closing p{ font-size:clamp(12px,.95vw,16px); line-height:1.9; color:var(--navy); }
  .closing p + p{ margin-top:clamp(20px,3.2vh,40px); }

  /* ================= Footer ================= */

  /* Section cuối chiếm trọn khung như design (56% chiều rộng), nền toile phủ hết,
     khối chữ căn giữa theo chiều dọc, hai bạn cún đứng thấp gần đáy. */
  .foot{
    position:relative;
    display:grid; align-content:center;
    min-height:56vw;
    padding:clamp(40px,7vh,100px) 0 clamp(50px,8vh,110px);
    text-align:center;
  }
  .foot__mono{ width:clamp(110px,10vw,200px); margin:0 auto clamp(16px,2.6vh,34px); }
  .foot__save{
    font-family:'Snell', cursive; font-weight:700;
    font-size:clamp(30px,3.4vw,62px); color:var(--navy-soft);
    margin-bottom:clamp(14px,2.6vh,34px);
  }
  .foot__names{
    font-size:clamp(18px,2vw,36px); font-weight:500;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .foot__names .amp{
    font-family:'Snell',cursive; text-transform:none;
    font-size:.8em; color:var(--navy-soft); padding:0 .2em;
  }
  .foot__date{
    margin-top:clamp(8px,1.4vh,18px);
    font-family:'Snell',cursive; font-weight:700;
    font-size:clamp(20px,2.2vw,40px); color:var(--navy-soft);
  }
  /* Hai bạn cún đứng hai bên khối chữ. Trong asset Milo hướng trái, Gấu hướng phải
     — tức là quay ra ngoài, nên lật ngang cả hai để quay mặt vào giữa. */
  .foot__dog{
    position:absolute; bottom:calc(13 * var(--u));
    width:calc(16 * var(--u));
    transform:scaleX(-1);
  }
  .foot__dog--l{ left:calc(10.5 * var(--u)); }
  .foot__dog--r{ right:calc(10.5 * var(--u)); }

  /* ================= Mobile ================= */

  @media (max-width: 860px){
    .opening{ background-image:url('assets/bg-mobile.webp'); }
    .frame{ height:auto; width:min(78vw, 420px); max-width:none; }

    /* Bản dọc của các ảnh nền: dùng bản desktop trên màn hẹp thì cover phải
       phóng to và cắt mất hai bên, đúng cái khách kêu "đừng zoom ảnh to". */
    .toile::before,
    .venue::before,
    .timeline::before{ background-image:url('assets/img/bg-hero-m.webp'); }
    /* Bản desktop hết đường cắt ngang là nhờ ảnh bg-venue có vùng trời TRONG SUỐT
       ở đỉnh, nền tự tan vào giấy. Ảnh dọc bản mobile lại đặc kín tới tận mép
       nên lộ một vạch ngang ở đầu section. Thay vì đổi ảnh (ảnh ngang đặt vào
       khung dọc thì hai hàng cây nằm ngoài mép, cắt xong chỉ còn khoảng trời
       trống), làm mềm chính mép trên bằng mask — giữ nguyên bố cục ảnh dọc. */
    .venue::before{
      -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
      mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
    }
    .countdown::before,
    .closing::before{ background-image:url('assets/img/bg-timing-m.webp'); }
    .timeline__panel{ background-image:url('assets/img/bg-timeline-m.webp'); }
    /* nền trang loading cũng có bản dọc riêng */
    .quote__band::before{ background-image:url('assets/bg-mobile.webp'); }

    /* Animation chậm thêm một nhịp nữa trên mobile */
    .reveal{ transition-duration:1450ms; }

    /* Nav bar nằm ĐÁY màn hình; trượt lên từ dưới cho khớp vị trí mới */
    /* Desktop nav luôn nằm trên nền toile sáng cố định nên để kính thật trong
       được. Mobile thì nav trôi qua ảnh cưới và cả khung timeline nền navy —
       kính trong sẽ nuốt mất chữ, nên phải có một lớp giấy mờ đỡ phía sau. */
    .nav{
      top:auto; bottom:14px;
      width:94vw; height:auto; padding:10px 3vw; border-radius:999px;
      transform:translate(-50%, 160%);
      background:var(--glass-bg);
      -webkit-backdrop-filter:var(--glass-blur);
      backdrop-filter:var(--glass-blur);
      border-color:var(--glass-border);
      box-shadow:var(--glass-shadow);
    }
    .nav.on{ transform:translate(-50%, 0); }
    .nav a{ font-size:11px; letter-spacing:.08em; }
    .music{ bottom:calc(14px + 58px); }   /* tránh đè lên nav bar dưới đáy */

    /* Mobile: bỏ toạ độ tuyệt đối, xếp dọc — chữ trên, ảnh dưới.
       Gấu & Milo ĐÈ LÊN ảnh, ngang tầm cô dâu chú rể, không rơi xuống dưới ảnh. */
    .hero{ height:auto; padding-top:clamp(28px,7vw,56px); }
    .hero__stage{
      position:relative;
      width:100%; height:auto;
      display:flex; flex-direction:column; align-items:center;
    }
    .hero__photo, .hero__text{
      position:static; left:auto; top:auto; transform:none; --tx:0;
    }
    .hero__text{ width:100%; padding:0 5vw; order:1; }
    .hero__photo{ width:100%; max-width:560px; order:2; }

    .hero__dogs{
      left:auto; top:auto; right:1vw; bottom:3%;
      --tx:0; gap:0; z-index:2;
    }

    .hero__mono{ --tx:0; width:min(34vw,190px); }
    .hero__save{ font-size:clamp(30px,9vw,52px); margin-top:3vw; }
    .hero__names{ font-size:clamp(20px,6.2vw,38px); white-space:normal; line-height:1.3; margin-top:2vw; }
    .hero__date{ font-size:clamp(20px,6vw,36px); margin-top:2vw; }
    .hero__dog span{ font-size:clamp(10px,2.2vw,13px); margin-bottom:1vw; }
    .hero__dog--gau  img{ width:min(28vw,164px); }
    .hero__dog--milo img{ width:min(30vw,178px); }
    .hero__dog--milo{ margin-left:-2vw; }

    .invite{ padding-top:clamp(56px,16vw,140px); }
    /* Mobile hẹp: chỉ giữ một bông mỗi bên, neo theo mép trên/dưới của section */
    .invite__hoa{ width:clamp(64px,19vw,120px); }
    .invite__hoa.in{ opacity:.65; }
    .invite__hoa--l1{ top:-42px; left:-16px; }
    .invite__hoa--r1{ top:auto; bottom:-30px; right:-16px; }
    .invite__hoa--l2, .invite__hoa--r2{ display:none; }
    /* Nhà trai – nhà gái đứng NGANG nhau, không xếp chồng lên nhau */
    .invite__ho{ width:100%; padding:0 4vw; gap:4vw; text-align:center; }
    .invite__ho > div{ flex:1 1 0; }
    .invite__ho h3{ font-size:clamp(10px,2.7vw,14px); letter-spacing:.1em; }
    /* 2.8vw là mức lớn nhất mà "Mẹ HỒ THỊ XUÂN HƯƠNG" — chuỗi dài nhất ở đây —
       còn nằm gọn một dòng trong cột 38% bề ngang máy (148px @390). 2.9vw vẫn đủ
       nhưng chạm sát mép, hụt dung sai khi máy khách render font lệch đi một chút.
       Đáy clamp hạ xuống 10px, nếu giữ 12px thì dưới ~430px chữ bị ghim lại to
       hơn cột và rớt dòng trở lại. */
    .invite__ho p{ font-size:clamp(10px,2.8vw,18px); margin-top:8px; }

    .venue__maps{ grid-template-columns:1fr; }
    .venue__pic{ transform:scale(.9); }

    /* Đồng hồ đếm ngược: số to hẳn lên cho khớp thiết kế mobile */
    .countdown{ min-height:0; padding:clamp(46px,12vw,110px) 0 calc(clamp(46px,12vw,110px) + 7.8vw); }
    .cd{ gap:0; }
    .cd__num, .cd__sep{ font-size:11.5vw; }
    .cd__num{ min-width:13vw; }
    .cd__sep{ padding:0 1.6vw; }
    .cd__lab{ margin-top:3.4vw; font-size:4.2vw; }

    /* Timeline: mỗi mục một dòng ngang — giờ bên trái, icon giữa, tên bên phải */
    .timeline__panel{ padding:clamp(40px,10vw,90px) 5vw clamp(50px,12vw,100px); }
    .tl{ grid-template-columns:1fr; gap:clamp(12px,3vw,26px); }
    .tl__item{
      display:grid; grid-template-columns:1fr auto 1fr;
      align-items:center; gap:3vw;
    }
    .tl__item time{ order:1; text-align:left;  font-size:clamp(15px,4.6vw,26px); }
    .tl__item img { order:2; width:min(26vw,150px); margin:0; }
    .tl__item h4  { order:3; text-align:right; font-size:clamp(15px,4.6vw,26px); }

    /* Story: ảnh trên nhỏ, ảnh dưới tràn viền; chữ thu vào giữa hơn */
    .story__mono{ width:min(18.2vw,105px); }
    .story__row{ grid-template-columns:1fr; gap:clamp(26px,7vw,52px); }
    .story__row img{ width:100%; margin:0; }
    .story__row img:first-of-type{ width:min(62%,330px); margin:0 auto; }
    .story__txt{ padding:0 9vw; }

    /* Màn hẹp không đủ chỗ đứng hai bên dòng tên -> cho xuống dưới, xếp ngang.
       Vẫn giữ scaleX(-1) nên hai bạn quay mặt vào nhau.
       Phải trả .foot về display:block: grid của bản desktop biến hai bé cún
       thành hai hàng riêng, xếp dọc chứ không đứng cạnh nhau. */
    .foot{ display:block; min-height:0; }
    .foot__dog{
      position:static; display:inline-block; vertical-align:bottom;
      width:min(34vw,170px); bottom:auto; left:auto; right:auto;
      margin:clamp(14px,3vh,28px) .3vw 0;
    }

    .quote__band{ min-height:48vw; padding:clamp(40px,10vw,90px) 0; }

    /* Album: 1 ảnh ngang tràn viền + 1 ảnh dọc trượt ngang, cùng concept.
       Dùng lại đúng khối .album__grid của desktop, chỉ đổi cách bày. */
    .album__grid{
      display:flex; gap:0;
      /* chừa cả đáy, nếu không ảnh dọc dính sát ảnh ngang của nhóm kế tiếp */
      padding:clamp(18px,4vw,34px) 0;
      overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
      scrollbar-width:none; -ms-overflow-style:none;
    }
    .album__grid::-webkit-scrollbar{ display:none; }
    .album__grid img{
      flex:0 0 92vw; margin:0 4vw; scroll-snap-align:center;
      aspect-ratio:2/3;
    }
    .album__nav{
      display:grid; place-items:center;
      position:absolute; top:50%; transform:translateY(-50%);
      width:44px; height:44px; border-radius:50%;
      color:var(--navy); cursor:pointer; z-index:2; padding:0;
      background:var(--glass-clear-bg);
      -webkit-backdrop-filter:var(--glass-clear-blur);
      backdrop-filter:var(--glass-clear-blur);
      border:1px solid var(--glass-clear-border);
      box-shadow:var(--glass-clear-shadow);
    }
    /* Kính trong không còn là nền sáng đỡ mũi tên nữa; quầng trắng mảnh quanh
       nét vẽ giữ mũi tên navy đọc được cả khi sau nút là tán cây tối. */
    .album__nav svg{
      width:22px; height:22px;
      filter:drop-shadow(0 0 2px rgba(255,255,255,.85));
    }
    .album__nav--prev{ left:10px; }
    .album__nav--next{ right:10px; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .reveal{ opacity:1; transform:none; }
    .venue__pic{ transform:none; }
  }