/* ============================================================
   THIỆP CƯỚI — kiểu dáng: NAM BỘ XƯA
   Lấy từ hai thứ: tấm thiệp kraft "Đám cưới miền Tây" (giấy bổi, chữ đỏ son,
   vẽ tay) và ảnh cưới trong nhà gỗ (áo dài đỏ, khảm trai, ánh đèn dầu).
   Nguyên tắc: nền KHÔNG phải mặt phẳng trắng — nó là một tờ giấy. Mọi màu
   khác phải sống được trên tờ giấy đó.
   ============================================================ */

:root{
  /* ---- GIẤY ---- */
  /* Sắc giấy đã ĐO chứ không chọn bằng mắt.
     ĐỪNG SO MÃ NÀY VỚI MÀU BẠN THẤY TRÊN MÀN HÌNH — hai lớp vân phủ lên làm nền
     tối đi ~8%, nên #E0C6A0 hiện ra mắt đúng bằng #C6AF8D. Con số 8% đó chính là
     lý do trị số này khác hẳn bản trước (#D2B68F): vân cũ chỉ đục ~3% nên gần như
     không làm tối gì; vân mới đậm gấp đôi, phải nâng màu gốc lên đúng phần đã mất,
     không thì chữ phụ tụt xuống 4.35:1 — dưới chuẩn đọc.
     Thứ mắt nhìn thấy thì KHÔNG đổi so với bản trước (#C6AC88 -> #C6AF8D), chỉ có
     chất giấy là thật lên. Đo lại bằng cách ghép ảnh vân lên nền rồi lấy pixel
     (luật 30), đừng đo trên trị số này. */
  --giay:      #E0C6A0;   /* kraft. Sau khi phủ vân hiện ra #C6AF8D */
  --giay-dam:  #CAAC87;   /* mép giấy, bóng đổ */
  --giay-sang: #F0DCBA;   /* khối nổi lên trên giấy */
  --nen:       var(--giay);          /* tên cũ, giữ cho khỏi sót chỗ nào */

  /* ---- GỖ ----
     Mặt gỗ mà tờ thiệp nằm lên, và cũng là nền của hai màn tối. Lấy từ ảnh cưới
     trong nhà gỗ. Chữ trên nền này phải dùng bảng màu riêng — xem .man-toi. */
  --go:        #2F2013;

  /* ---- MỰC ----
     Nâu gỗ rất đậm, KHÔNG dùng đen. Mực đen trên kraft nhìn như in laser lên
     bìa carton; mực nâu mới ra chữ in truyền thống. */
  --muc:       #33220F;
  /* Đo trên màu giấy THẬT SAU KHI phủ vân (#C6AC88), không phải trên --giay
     thuần. Vân làm nền tối đi ~4,5%, đủ để đẩy chữ phụ tụt dưới chuẩn đọc. */
  --muc-nhat:  #503D24;

  /* ---- ĐỎ SON ----
     Màu áo dài cưới, và màu chữ "ĐÁM CƯỚI" trên tấm thiệp mẫu. Đây là màu nhấn
     DUY NHẤT được phép to và đậm. Thêm màu nhấn thứ hai là bắt đầu loè loẹt. */
  --son:       #9B2118;
  --son-dam:   #6E1610;
  --nhan:      var(--son);           /* tên cũ, nay trỏ vào đỏ son */

  /* ---- ĐỒNG / VÀNG CỔ ----
     Ánh đèn dầu, khảm trai, chỉ vàng trên áo. Chỉ dùng cho nét mảnh và nhãn
     chữ nhỏ — tô mảng lớn bằng màu này là thành thiệp vàng mã.
     CHỈ dùng cho NÉT, KHÔNG dùng cho chữ: trên kraft nó chỉ đạt 2.0:1, chữ nhỏ
     màu này coi như không đọc được. Nhãn chữ nhỏ dùng --son-dam. */
  --dong:      #9C6C2B;
  --vang:      #D9B45C;   /* dùng trên nền tối của ảnh bìa */

  --vien:      rgba(51,34,15,.24);
  --vien-son:  rgba(155,33,24,.32);

  --chu-ten: "Cormorant Garamond", Georgia, serif;
  --chu-noi: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  /* Chữ viết tay cho VÀI TỪ nhấn — đúng chỗ chữ "Miền Tây" viết tay trên thiệp
     mẫu. Dùng quá tay là thành thiệp sinh nhật. Cả trang chỉ 2-3 chỗ. */
  --chu-tay: "Dancing Script", "Cormorant Garamond", cursive;

  /* ---- BỀ NGANG ----
     --rong-giay: bề ngang TỜ GIẤY. Dùng min() nên không cần media query: màn hẹp
       hơn 58rem thì giấy tràn viền (điện thoại), rộng hơn thì phần thừa là gỗ.
       58rem = 928px, đủ ôm cả .man-rong (52rem) mà còn chừa 48px lề mỗi bên.
       Hạ trị số này xuống dưới 52rem là album tràn ra ngoài mép giấy.
     --rong-noi: bề ngang CỘT CHỮ bên trong. Mỗi loại màn đặt lại trị số của riêng
       mình, nhờ vậy .man-toi chỉ cần một dòng là ôm đúng cỡ cột của màn đó. */
  --rong-giay: min(58rem, 100%);
  --rong-noi:  34rem;

  /* MỘT loại chuyển động duy nhất cho cả trang. Nếu người xem NHẬN RA
     có animation thì nghĩa là đã quá đà. */
  --chuyen: 780ms cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

/* ===================== BA LỚP NỀN =====================
   Dưới cùng  html          mặt gỗ, phủ kín, cuộn theo trang
   Giữa       body::before  TỜ GIẤY — một cột, có mép, có bóng đổ xuống gỗ
   Trên cùng  body::after   ánh đèn, cố định theo màn hình

   VÌ SAO PHẢI LÀ BA LỚP CHỨ KHÔNG PHẢI MỘT MÀU NỀN
   Bản trước tô kraft tràn viền từ đầu tới cuối, nên tấm thiệp không phải một TỜ
   GIẤY — nó là một lớp sơn tường: không mép, không bóng, không có gì nằm dưới.
   Chủ nhà nói đúng: "về nền nó vẫn cứ đơn giản". Có mặt gỗ ở dưới thì tờ giấy
   mới thành một VẬT THỂ.

   BẪY 1 — VÌ SAO html PHẢI CÓ NỀN VÀ body TUYỆT ĐỐI KHÔNG
   CSS có luật "truyền nền": html không có nền thì nền của body bị lấy ra tô cho
   cả khung nhìn, và body coi như không còn nền riêng — nhờ vậy bản cũ vẫn thấy
   được body::before ở z-index âm. Nay html CÓ nền nên luật truyền tắt đi; để
   body có background thì nền ấy tô kín hộp body và che mất cả hai lớp giả.

   BẪY 2 — VÌ SAO TỜ GIẤY position:absolute CHỨ KHÔNG PHẢI fixed
   fixed thì tờ giấy đứng yên trong khi mặt gỗ cuộn: thớ gỗ trôi sau một tờ giấy
   bất động, nhìn ra ngay là hai lớp rời nhau. absolute cộng body{position:relative}
   thì tờ giấy cao đúng bằng cả trang và cuộn cùng mọi thứ khác.
   Cũng vì vậy KHÔNG được chữa bằng background-attachment:fixed: Safari iOS xử lý
   nó rất tệ — cuộn giật, có máy đứng hẳn hình. */
html{
  -webkit-text-size-adjust:100%;
  background-color:var(--go);
  background-image:url("/tinh/go.jpg");
  background-repeat:repeat; background-size:512px 512px;
}
body{
  /* position:relative để body::before lấy đúng chiều cao cả trang làm khung.
     KHÔNG đặt z-index ở đây — đặt vào là body thành ngữ cảnh xếp lớp riêng, hai
     lớp z-index âm bị nhốt bên trong và chìm hẳn sau nền gỗ. */
  position:relative; margin:0; color:var(--muc);
  font-family:var(--chu-noi); font-weight:300; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ---- Lớp giữa: TỜ GIẤY ----
   Vân giấy là hai ảnh lặp gồm hạt và vệt MỜ trên nền TRONG SUỐT, màu kraft tô
   bên dưới hiện xuyên qua. KHÔNG dùng background-blend-mode — xem ghi chú đầu
   congcu/taogiay.py: blend-mode vừa làm nền tối đi 31% so với màu đã chọn, vừa
   hỏng hẳn trên trình duyệt không hỗ trợ (đáng ngờ nhất là trình duyệt trong
   Zalo, mà đó lại là nơi phần lớn khách mở thiệp).

   Hai ảnh chứ không một, vì giấy thật có hai thang kích thước: hạt và sợi cỡ vài
   px (ô lặp 256px), loang và ố cỡ trăm px (ô 160px phóng lên 780px). Gộp làm một
   thì cứ 256px lại lặp lại đúng vệt ố đó — nhìn ra ca-rô ngay.

   Bốn ảnh SVG còn lại là ĐƯỜNG VIỀN chạy quanh mép tờ giấy, kiểu khung in trên
   thiệp giấy. Màu phải gõ thẳng mã %239C6C2B vì var() không dùng được trong data
   URI — đổi --dong thì nhớ đổi cả bốn chỗ. */
body::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  width:var(--rong-giay); margin-inline:auto;   /* left+right:0 + auto = ra giữa */
  background-color:var(--giay);
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 7.5H48' stroke='%239C6C2B' stroke-opacity='.40'/%3E%3Cpath d='M24 3.5l5 4-5 4-5-4z' fill='%239C6C2B' fill-opacity='.52'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 7.5H48' stroke='%239C6C2B' stroke-opacity='.40'/%3E%3Cpath d='M24 3.5l5 4-5 4-5-4z' fill='%239C6C2B' fill-opacity='.52'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='48'%3E%3Cpath d='M7.5 0V48' stroke='%239C6C2B' stroke-opacity='.40'/%3E%3Cpath d='M7.5 19l4 5-4 5-4-5z' fill='%239C6C2B' fill-opacity='.52'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='48'%3E%3Cpath d='M7.5 0V48' stroke='%239C6C2B' stroke-opacity='.40'/%3E%3Cpath d='M7.5 19l4 5-4 5-4-5z' fill='%239C6C2B' fill-opacity='.52'/%3E%3C/svg%3E"),
    url("/tinh/giay-loang.png"),
    url("/tinh/giay-kraft.png");
  background-position:
    left 0 top 15px, left 0 bottom 15px,
    left 15px top 0, right 15px top 0,
    center, center;
  background-repeat:
    repeat-x, repeat-x, repeat-y, repeat-y, repeat, repeat;
  background-size:
    48px 14px, 48px 14px, 14px 48px, 14px 48px,
    780px 780px, 256px 256px;
  /* Bóng đổ xuống mặt gỗ, cộng mép giấy tự tối lại hai bên. Mép tối là thứ DUY
     NHẤT cho biết "đây là một tờ giấy" khi màn hẹp và giấy tràn kín viền. */
  box-shadow:
    0 0 38px rgba(16,9,3,.60),
    inset 10px 0 18px -13px rgba(35,22,10,.75),
    inset -10px 0 18px -13px rgba(35,22,10,.75);
}

/* ---- Lớp trên: ÁNH ĐÈN ----
   Loang sáng ở trên, tối dần xuống đáy — như tờ giấy đặt dưới ánh đèn.
   fixed theo khung nhìn chứ không theo trang, vì đây là ÁNH SÁNG chiếu vào màn
   hình chứ không phải vết bẩn trên giấy: cuộn tới đâu cũng phải sáng ở trên. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(130% 70% at 50% -12%, rgba(255,247,232,.34), rgba(255,247,232,0) 62%),
    radial-gradient(100% 60% at 50% 112%, rgba(58,36,14,.24), rgba(58,36,14,0) 62%);
}
/* height:auto là BẮT BUỘC. Thẻ <img> mang thuộc tính width/height (để chống giật
   layout khi ảnh đang tải); thiếu height:auto thì chiều cao cố định theo thuộc tính
   HTML và mọi aspect-ratio trong CSS bị vô hiệu. */
img{ max-width:100%; height:auto; display:block; }
[hidden]{ display:none !important; }

/* Mọi chữ số phải dùng kiểu hiện đại. Cormorant mặc định dùng chữ số OLDSTYLE
   (số 1 không chân, số 0 lùn): "108" hiện ra thành "ıo8", trông y như lỗi font. */
.ngay-lon, .gio-le, .dem-nguoc b, .so-tk{
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}

.nhan-nho{
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--son-dam); margin:0 0 1.4rem;
}

/* Đường triện: hai nét mảnh nhạt dần, hình thoi đỏ son ở giữa. Kiểu hoa văn
   ngăn khối trên thiệp cưới in truyền thống, thay cho gạch ngang trơn.
   Hình thoi là SVG nội tuyến nên màu phải gõ thẳng — var() không dùng được
   trong data URI. Đổi --son thì nhớ đổi cả mã %239B2118 dưới đây. */
.gach{
  width:auto; height:auto; opacity:1; background:none;
  display:flex; align-items:center; justify-content:center;
  gap:.75rem; min-height:9px; margin:2.1rem auto;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5z' fill='%239B2118'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.gach::before, .gach::after{
  content:""; height:1px; width:clamp(26px,8vw,52px);
  background:linear-gradient(to right, rgba(155,33,24,0), var(--son));
}
.gach::after{ background:linear-gradient(to left, rgba(155,33,24,0), var(--son)); }

/* ===================== MÀN HÌNH MỞ THIỆP ===================== */
.bia{
  position:fixed; inset:0; z-index:10; overflow:hidden;
  transition:transform 1100ms cubic-bezier(.65,0,.35,1), opacity 900ms ease;
}
.bia-anh{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
@media (min-width:820px){
  /* Ảnh bìa PC là ảnh ngang, chủ thể nằm giữa nên không cần kéo lên như bản dọc */
  .bia-anh{ object-position:center 42%; }
  .bia-chu{ padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0px)); }
  /* Màn PC rộng gấp ba điện thoại nên chữ giữ nguyên cỡ sẽ trông lọt thỏm */
  .ten-khach{ font-size:3.7rem; }
  .bia-dan{ font-size:1rem; }
  .bia-phu{ background:linear-gradient(to top,
      rgba(26,22,18,.84) 0%, rgba(26,22,18,.52) 32%,
      rgba(26,22,18,.12) 62%, rgba(26,22,18,0) 100%); }
}

/* Lớp phủ tối dần từ dưới lên. Đây là lý do chữ trắng đọc được trên ảnh:
   đặt chữ lên vùng sáng lốm đốm thì không đọc nổi, dù font đẹp đến mấy. */
.bia-phu{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(26,22,18,.86) 0%, rgba(26,22,18,.62) 26%,
    rgba(26,22,18,.18) 54%, rgba(26,22,18,.05) 100%);
}
.bia-chu{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 1.6rem calc(3.2rem + env(safe-area-inset-bottom,0px));
  text-align:center; color:#fff;
}
.bia-chu .nhan-nho{ color:var(--vang); margin-bottom:.9rem; opacity:.9; }
.ten-khach{
  font-family:var(--chu-ten); font-weight:300;
  font-size:clamp(1.95rem,7.4vw,3.15rem); line-height:1.22;
  margin:0 0 .7rem; letter-spacing:.012em;
}
/* Câu dẫn viết tay — đúng chỗ chữ "Miền Tây" viết tay trên tấm thiệp mẫu */
.bia-dan{ margin:0 0 2.3rem; font-family:var(--chu-tay); font-weight:400;
          font-size:1.35rem; color:rgba(248,238,220,.9); }
.nut-mo{
  font-family:var(--chu-noi); font-size:.68rem; font-weight:300;
  letter-spacing:.3em; text-transform:uppercase; color:#fff;
  background:transparent; border:1px solid rgba(217,180,92,.62);
  padding:.95rem 2.5rem; border-radius:1px; cursor:pointer;
  transition:background .45s ease, border-color .45s ease, color .45s ease;
}
.nut-mo:hover, .nut-mo:focus-visible{
  background:rgba(217,180,92,.16); border-color:var(--vang); color:var(--vang);
}
.bia.dong{ transform:translateY(-101%); opacity:0; pointer-events:none; }

/* ===================== KHUNG CHUNG ===================== */
/* Khoảng trắng là thứ phân biệt sang và chợ. Giữ tỉ lệ trống ~60-70%.
   Bề ngang đi qua biến --rong-noi chứ không gõ thẳng, để .man-toi (màn nền gỗ)
   ôm đúng cỡ cột chữ của từng loại màn mà không phải chép lại ba trị số. */
.man{ --dem:13vh; max-width:var(--rong-noi); margin:0 auto;
       padding:var(--dem) 1.7rem; text-align:center; }
.man-rong{ --rong-noi:52rem; }

/* ---- NHỊP KHOẢNG TRỐNG ----
   Trước đây cả chín màn đệm đúng 15vh trên và 15vh dưới, không sai một pixel.
   Đo ra là 117px/117px chín lần liền. Đó chính là thứ làm trang "đơn điệu": nền
   có thể đổi, ảnh có thể khác, nhưng nhịp cuộn thì đều như gõ nhịp, và não đọc
   ra cái đều đó sau ba màn rồi thôi không nhìn nữa.
   Khoảng trống chỉ có nghĩa khi so với nhau. Màn thoáng đứng cạnh màn chật thì
   màn thoáng mới THÀNH thoáng; đều nhau thì không màn nào thoáng cả.
   Nhịp cố ý, đọc từ trên xuống: 21 - 13 - [ảnh lớn] - 13 - 17 - 6 - 6 - 9 - 13
   - 6 - 19. Ba chỗ nở (mở đầu, Lễ, kết) và ba chỗ bó (Đếm ngược, Album, Lời chúc).
   Đổi số ở đây thì nhớ: khung viền màn Lễ bám theo --dem, không phải số cứng. */
.man-ten  { --dem:21vh; }   /* mở đầu phải thoáng, đây là chỗ đọc tên hai người */
.man-le   { --dem:17vh; }   /* khối quan trọng nhất cả tấm thiệp */
.man-dem  { --dem:6vh;  }   /* bốn con số, không cần thở */
.man-album{ --dem:6vh;  }   /* ảnh tự chiếm chỗ rồi */
.man-clip { --dem:9vh;  }
#loi-chuc { --dem:6vh;  }
/* --rong-noi rộng hơn hẳn các màn khác: cột 34rem với chữ 105px chỉ chứa nổi
   năm ký tự một dòng, câu ngắn cũng vỡ thành ba dòng và hết là "một câu lớn",
   thành một khối chữ. 46rem cho khoảng 15 ký tự mỗi dòng — đúng hai dòng. */
.man-cau  { --dem:20vh; --rong-noi:46rem; }
.man-cuoi { --dem:19vh; }   /* kết, để lại một khoảng lặng */
.man-cuoi{ padding-bottom:calc(var(--dem) * .65 + env(safe-area-inset-bottom,0px)); }

.cap-ten{
  font-family:var(--chu-ten); font-weight:400;
  font-size:clamp(2.5rem,11.5vw,4.6rem); line-height:1.16;
  margin:0 0 2.2rem; letter-spacing:.01em; color:var(--son-dam);
}
.cap-ten span{ display:block; }
/* Chữ "và" viết tay, nghiêng nhẹ — chỗ nhấn thứ hai trong ba chỗ dùng font tay */
.cap-ten .va{
  font-family:var(--chu-tay); font-weight:400; color:var(--son);
  font-size:.5em; margin:.3rem 0; transform:rotate(-2deg);
}

.ngay-lon{ font-family:var(--chu-ten); font-size:clamp(1.25rem,5vw,1.7rem);
           margin:0 0 .35rem; letter-spacing:.06em; }
.am-lich{ margin:0; font-size:.8rem; color:var(--muc-nhat); }

/* ===================== ẢNH NỔI BẬT =====================
   Một tấm duy nhất được làm nhân vật chính, rộng hết khổ giấy.
   VÌ SAO CẦN: đo ra 12 trong 14 ảnh của trang đều đúng một cỡ 165x247 trên điện
   thoại — toàn con tem, không tấm nào đủ lớn để dừng mắt lại. Trang ảnh cưới mà
   không có lấy một tấm ảnh lớn thì cuộn qua như xem danh mục.

   height cố định + object-fit:cover, KHÔNG dùng aspect-ratio: ảnh nguồn là 2:3
   (mọi ảnh trong repo đều 900x1350), để aspect-ratio 2/3 thì trên PC rộng 928px
   sẽ cao 1392px — chiếm 160% chiều cao màn hình, đúng cái bẫy luật 10.
   Đây là chỗ hiếm hoi được đè lên img{height:auto} toàn cục, và đè có chủ đích.
   object-position 28% giữ phần trên khung hình: mặt người nằm ở đó. */
.man-noi-bat{ max-width:var(--rong-giay); margin:0 auto; }
.man-noi-bat picture{ display:block; }
.man-noi-bat img{
  width:100%; height:min(66vh, 620px); min-height:280px;
  object-fit:cover; object-position:center 28%;
  box-shadow:0 2px 22px rgba(51,34,15,.30);
}

/* ===================== HAI HỌ ===================== */
.hai-ho{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,5vw,3rem); }
@media (max-width:620px){ .hai-ho{ grid-template-columns:1fr; gap:3.6rem; } }
/* Nhà thứ hai tụt xuống một quãng trên màn rộng. Hai cột cao bằng nhau, cùng cỡ
   ảnh, cùng kiểu chữ, đặt cạnh nhau cân đối tuyệt đối — nhìn thành bảng biểu.
   Tụt lệch đi thì mắt phải đi theo hình chữ Z thay vì quét ngang một lượt.
   CHỈ so le theo CHIỀU DỌC, không đổi thứ tự hay bề ngang: nhà trai bên trái,
   nhà gái bên phải là quy ước, không phải lựa chọn thẩm mỹ.
   Đã cân nhắc kiểu "ảnh trái / chữ phải rồi đảo lại": không làm được. Ở PC mỗi
   cột chỉ rộng 368px, tách đôi thành ảnh 170 + chữ 190 thì bóp chết cả hai. */
@media (min-width:820px){
  .hai-ho > :nth-child(2){ margin-top:4.5rem; }
}
/* Không để ảnh chân dung cao quá màn hình: trên PC cột rộng 380px nhân tỉ lệ 2:3
   thành 570px, đẩy tên bố mẹ xuống dưới tầm nhìn. */
.mot-ho{ max-width:19rem; margin:0 auto; }
.anh-ho{
  width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; object-position:center 20%;
  margin-bottom:1.5rem;
  /* Vẫn không bo góc, không đóng khung — khung ảnh là dấu hiệu template. Chỉ
     thêm bóng đổ để ảnh NẰM TRÊN mặt giấy chứ không bị chìm vào nền nâu. */
  box-shadow:0 2px 16px rgba(51,34,15,.26);
}
.vai-ho{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
         color:var(--son-dam); margin:0 0 .9rem; }
.ten-cha-me{ margin:0 0 .15rem; font-size:.97rem; }
.dia-chi-ho{ margin:.7rem 0 0; font-size:.78rem; color:var(--muc-nhat); }
.con-cai{
  font-family:var(--chu-ten); font-size:1.45rem; margin:1.1rem 0 0;
  padding-top:1rem; border-top:1px solid rgba(156,108,43,.5);   /* nét đồng */
  color:var(--son-dam);
}

/* ===================== LỄ ===================== */
/* Khung viền đôi quanh ĐÚNG MỘT khối — khối lễ, phần quan trọng nhất của tấm
   thiệp. Đóng khung mọi khối là thành ca-ta-lô; không đóng khung khối nào thì
   trang trôi tuột, không biết đâu là phần chính. */
.man-le{ position:relative; }
.man-le::before, .man-le::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
  border:1px solid var(--vien-son);
}
/* Khung thụt vào 6/10 phần đệm. Buộc phải tính từ --dem chứ không gõ 9vh:
   .man-le nay đệm 17vh, để 9vh thì khung lệch hẳn xuống dưới khối chữ. */
.man-le::before{ left:.75rem; right:.75rem;
                 top:calc(var(--dem) * .6); bottom:calc(var(--dem) * .6); }
/* Nét trong mảnh hơn và lùi vào 5px — đúng kiểu khung in hai nét trên thiệp giấy */
.man-le::after{
  left:calc(.75rem + 5px); right:calc(.75rem + 5px);
  top:calc(var(--dem) * .6 + 5px); bottom:calc(var(--dem) * .6 + 5px);
  border-color:rgba(155,33,24,.16);
}
/* Chữ phải nổi lên trên khung, không thì viền vẽ đè lên chữ */
.man-le > *{ position:relative; z-index:1; }
.gio-le{
  font-family:var(--chu-ten); font-size:clamp(2.6rem,12vw,3.9rem);
  line-height:1; margin:0 0 1rem; color:var(--nhan);
}
.noi-le{ font-family:var(--chu-ten); font-size:1.5rem; margin:0 0 .3rem; }
.dia-chi-le{ margin:0 0 2.1rem; font-size:.85rem; color:var(--muc-nhat); }

.nut-vien{
  display:inline-block; font-size:.66rem; font-weight:300; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muc); text-decoration:none;
  background:transparent; border:1px solid var(--muc); border-radius:1px;
  padding:.85rem 2.2rem; cursor:pointer; font-family:var(--chu-noi);
  transition:background .4s ease, color .4s ease;
}
.nut-vien{ border-color:var(--son); color:var(--son); }
.nut-vien:hover, .nut-vien:focus-visible{ background:var(--son); color:var(--giay-sang); }

/* ===================== ĐẾM NGƯỢC ===================== */
.dem-nguoc{ display:flex; justify-content:center; gap:clamp(1rem,6vw,2.6rem); }
.dem-nguoc b{
  display:block; font-family:var(--chu-ten); font-weight:400;
  font-size:clamp(1.9rem,8vw,2.9rem); line-height:1;
  font-variant-numeric:lining-nums tabular-nums;   /* tabular: số không nhảy ngang */
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.dem-nguoc span{ display:block; margin-top:.5rem; font-size:.6rem;
                 letter-spacing:.24em; text-transform:uppercase; color:var(--muc-nhat); }

/* ===================== MÀN ẢNH PHỦ KÍN =====================
   Ảnh phủ kín, phủ tối dần từ dưới lên, chữ trắng và vàng nằm trên. Đúng công
   thức của màn bìa — và đó là chủ đích: màn bìa là màn mạnh nhất của cả trang,
   mà nó lại là màn DUY NHẤT thuộc loại này. Chín màn còn lại chỉ là chín biến
   thể của cùng một khuôn (nền giấy, một cột chữ căn giữa), nên đổi màu hay đổi
   nhịp đến mấy vẫn ra cảm giác lặp.

   height cố định chứ không 100vh: 100vh trên iOS tính cả phần thanh địa chỉ sẽ
   trượt đi, nên màn bị hụt hoặc dư một quãng ngay lúc khách vừa cuộn tới.
   min(88vh, 820px) vừa chừa lại một dải giấy ở mép trên để người xem biết mình
   vẫn đang ở trong tấm thiệp chứ không phải vừa nhảy sang trang khác. */
.man-anh-day{
  position:relative; overflow:hidden;
  max-width:var(--rong-giay);          /* rộng bằng TỜ GIẤY, không bằng màn hình */
  height:min(88vh, 820px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 1.7rem calc(9vh + env(safe-area-inset-bottom,0px));
}
.anh-day-nen{ position:absolute; inset:0; display:block; }
/* Đè lên img{height:auto} toàn cục, có chủ đích: đây là ảnh nền phải phủ kín
   khung chứ không phải ảnh chạy theo tỉ lệ của chính nó. */
.anh-day-nen img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
}
/* Lý do chữ đọc được trên ảnh. Không có lớp này thì chữ trắng rơi vào vùng sáng
   lốm đốm của ảnh là mất hút, dù cỡ chữ có to đến đâu. */
.anh-day-phu{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(26,22,18,.88) 0%, rgba(26,22,18,.62) 30%,
    rgba(26,22,18,.18) 62%, rgba(26,22,18,.04) 100%);
}
.man-anh-day > .dem-nguoc{ position:relative; z-index:1; }
/* Đo trên trường hợp xấu nhất — ảnh trắng xoá dưới lớp phủ .88 (ra #363330):
   vàng đồng 6.6:1, ngà 11.9:1. Cả hai vẫn đạt. */
.man-anh-day .dem-nguoc b{ color:var(--vang); }
.man-anh-day .dem-nguoc span{ color:rgba(248,238,220,.80); }

/* ===================== CÂU LỚN VIẾT TAY =====================
   Khoảnh khắc TO duy nhất của trang. 16vw nên trên điện thoại 390px ra ~62px,
   trên PC chạm trần 6.6rem = 105px — gấp đôi chữ to nhất trước đây.
   Dùng --son chứ không --son-dam: luật 31 cho phép, vì đây là chữ lớn (chuẩn
   3.0, đo được 3.65). --son-dam ở cỡ này nhìn thành nâu xỉn, mất hẳn màu áo dài.
   Dancing Script chỉ tải hai nét 500 và 600; ghi 400 là trình duyệt tự bóp giả,
   ở cỡ 100px nhìn ra ngay. */
.cau-lon{
  margin:0; font-family:var(--chu-tay); font-weight:600;
  font-size:clamp(4rem, 16vw, 6.6rem);
  /* 1.04 là quá chặt cho chữ viết tay: nét hất xuống của chữ "y" dòng trên đâm
     vào dấu của dòng dưới. Chữ chân phương thì 1.04 đẹp, chữ tay thì không. */
  line-height:1.16; letter-spacing:-.005em; color:var(--son);
}

/* ===================== ALBUM ===================== */
.album{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
         grid-auto-flow:row dense; }
/* BỎ cột thứ tư ở màn rộng (trước đây ≥900px là 4 cột). Hai lý do, cả hai đo được:
   - 4 cột trên màn 1280 cho ô rộng 188px. Đang chữa đúng cái bệnh ảnh quá nhỏ mà
     lại chia thêm cột thì ngược hướng. 3 cột cho ô 254px, tấm lớn 516px.
   - 12 ảnh với 2 tấm chiếm 2x2 là 18 ô. Chia 3 vừa đúng 6 hàng; chia 4 dư 2 ô,
     hàng cuối cụt một nửa. */
@media (max-width:620px){ .album{ grid-template-columns:repeat(2,1fr); gap:.4rem; } }
.o-anh{ display:block; }

/* Cứ sáu tấm thì một tấm to gấp đôi. Khối album cao 1788px — hơn hai màn hình
   toàn ô giống hệt nhau, là khối đơn điệu nhất cả trang.
   Chọn nth-child chứ không gắn class trong HTML: album sinh từ vòng lặp trong
   noidung.ANH["album"], thêm bớt ảnh là danh sách đổi, gắn tay thì có ngày tấm
   được phóng to lại rơi vào tấm chụp hụt.
   Chiếm 2 cột VÀ 2 hàng nên tỉ lệ vẫn đúng 2:3 như mọi tấm khác — chỉ to lên,
   không méo. grid-auto-flow:dense để những tấm sau lấp kín chỗ trống quanh nó,
   không thì lưới thủng lỗ chỗ. */
.o-anh:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; }
@media (max-width:620px){
  /* Hai cột: span 2 là hết bề ngang. Giữ luôn span 2 hàng thì tấm ấy cao 585px
     = 75% màn hình điện thoại, nuốt trọn một màn. Hạ xuống 1 hàng và cắt sang
     khổ ngang — vừa phá được lưới, vừa không chiếm hết màn. */
  .o-anh:nth-child(6n+1){ grid-row:span 1; }
  .o-anh:nth-child(6n+1) img{ aspect-ratio:4/3; }
}
/* Giu dung ty le 2:3 cua anh goc. Ep sang 3/4 la tu cat mat khung hinh
   ma tho chup da can. */
.o-anh img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
             box-shadow:0 1px 10px rgba(51,34,15,.22); }

/* Ảnh album ngả màu thời gian — CHỈ album, không đụng ảnh nổi bật, ảnh hai họ
   hay ảnh nền đếm ngược. Được hai thứ cùng lúc:
   1. Album thành "ảnh kỷ niệm" khác hẳn "ảnh chính". Trước đây cả 14 tấm cùng
      một cách xử lý, nên dù to nhỏ khác nhau vẫn đọc ra là một dãy.
   2. Hết vênh chất liệu. Ảnh chụp số hiện đại, xanh lá và hồng rực, đặt lên tờ
      giấy kraft cũ là hai thời đại nằm cạnh nhau. Ngả ấm và nhạt bớt thì ảnh
      chịu nằm xuống dưới tông của giấy.
   Rất nhẹ tay: sepia .26 chứ không .6. Quá tay thành ảnh cũ giả, mà cô dâu thì
   muốn thấy đúng màu áo mình mặc.
   filter được GPU lo, không tốn gì lúc cuộn; chạy cả trên WebView cũ. */
.album .o-anh img{
  filter:sepia(.26) saturate(.86) contrast(1.03) brightness(1.03);
}

/* ===================== XÁC NHẬN THAM DỰ ===================== */
.loi-moi{ font-size:1rem; margin:0 0 2.4rem; }
.hop-rsvp{ text-align:left; max-width:23rem; margin:0 auto; }
.dong{ display:block; margin-bottom:1.35rem; }
.nhan-o{ display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
         color:var(--muc-nhat); margin-bottom:.5rem; }
.hop-rsvp select, .hop-rsvp input, .hop-rsvp textarea{
  width:100%; font-family:var(--chu-noi); font-size:.95rem; font-weight:300;
  color:var(--muc); background:transparent;
  border:0; border-bottom:1px solid var(--vien); border-radius:0;
  padding:.55rem .1rem; -webkit-appearance:none; appearance:none;
}
.hop-rsvp select{
  /* mũi tên tự vẽ bằng SVG nội tuyến: không phụ thuộc file ngoài */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B5233' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
}
.hop-rsvp textarea{ resize:vertical; line-height:1.65; }
.hop-rsvp :focus-visible{ outline:none; border-bottom-color:var(--nhan); }
.nut-gui{ width:100%; margin-top:.9rem; }
.loi-form{ margin:.9rem 0 0; font-size:.83rem; color:#9B4B3A; text-align:center; }

.hop-cam-on{ max-width:23rem; margin:0 auto; }
.da-xong{ font-size:1rem; margin:0 0 1.2rem; color:var(--muc); }
.nut-chu{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--chu-noi);
  font-size:.76rem; color:var(--muc-nhat); text-decoration:underline;
  text-underline-offset:4px;
}

/* ===================== SONG HỶ ===================== */
/* Chữ 囍 chìm sau lời cảm ơn — con dấu quen thuộc trên thiệp cưới Việt.
   Để RẤT nhạt: đủ để nhận ra, không đủ để đọc. Đậm hơn là thành hình nền.
   Dùng font hệ thống, Windows/iOS/Android đều có sẵn chữ Hán. */
.man-cuoi{ position:relative; }
.man-cuoi::before{
  content:"囍"; position:absolute; left:50%; top:5vh;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  font-family:"Songti SC","SimSun",serif; line-height:1;
  font-size:clamp(7rem,32vw,13rem); color:var(--son); opacity:.075;
}
.man-cuoi > *{ position:relative; z-index:1; }

/* ===================== MỪNG CƯỚI ===================== */
.ghi-nho{ font-size:.85rem; color:var(--muc-nhat); margin:0 0 2.4rem; }
.hai-qr{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,5vw,3rem); }
@media (max-width:620px){ .hai-qr{ grid-template-columns:1fr; gap:3rem; } }
.anh-qr{ width:min(228px,72%); margin:0 auto 1.3rem; background:#fff; padding:.5rem; }
.so-tk{ margin:.3rem 0 0; font-size:.8rem; color:var(--muc-nhat);
        font-variant-numeric:lining-nums tabular-nums; }

.ky-ten{ font-family:var(--chu-ten); font-size:1.6rem; margin:0; color:var(--nhan); }

/* ===================== NÚT NHẠC ===================== */
.nut-nhac{
  position:fixed; z-index:9;
  top:calc(1rem + env(safe-area-inset-top,0px)); right:1rem;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:rgba(217,194,160,.9); border:1px solid var(--vien-son);
  backdrop-filter:blur(6px);
}
/* Biểu tượng loa vẽ bằng CSS, không dùng ảnh hay emoji */
.nut-nhac::before{
  content:""; position:absolute; left:12px; top:13px;
  width:0; height:0; border:6px solid transparent;
  border-right:8px solid var(--muc);
}
.nut-nhac::after{
  content:""; position:absolute; right:9px; top:16px;
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--muc); border-left-color:transparent; border-bottom-color:transparent;
  opacity:0; transition:opacity .3s ease;
}
.nut-nhac[aria-pressed="true"]::after{ opacity:1; }


/* ===================== LỜI NHẮN RIÊNG ===================== */
/* Câu chủ nhà viết riêng cho đúng người này. Để trống thì cả khối biến mất.
   Đây là thứ nền tảng làm thiệp không làm được, vì nó đòi chính bạn ngồi viết. */
.man-nhan{ --dem:9vh; }
.loi-rieng{
  font-family:var(--chu-ten); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,4.6vw,1.5rem); line-height:1.62;
  margin:0 0 1.5rem; color:var(--muc);
}
.ky-nho{ margin:0; font-size:.72rem; letter-spacing:.2em;
         text-transform:uppercase; color:var(--son-dam); }

/* ===================== THẢ TIM ===================== */
/* Một tương tác nhẹ ở cuối trang, KHÔNG phải thanh công cụ dính đáy kiểu app.
   Đặt sau lời cảm ơn để không cắt ngang mạch đọc. */
.nut-tim{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:2.6rem;
  background:none; border:0; padding:.4rem .2rem; cursor:pointer;
  font-family:var(--chu-noi); font-size:.82rem; color:var(--muc-nhat);
  font-variant-numeric:lining-nums tabular-nums;
}
.nut-tim svg{ fill:none; stroke:var(--muc-nhat); stroke-width:1.3;
              transition:fill .35s ease, stroke .35s ease, transform .35s ease; }
.nut-tim:hover svg{ stroke:var(--nhan); }
.nut-tim.da-tim svg{ fill:var(--nhan); stroke:var(--nhan); }
.nut-tim.vua-bam svg{ transform:scale(1.22); }
.nut-tim.da-tim{ color:var(--nhan); }

/* ===================== KHUNG NHẠC ===================== */
.khung-nhac{
  position:fixed; z-index:9;
  top:calc(1rem + env(safe-area-inset-top,0px)); right:1rem;
  display:flex; align-items:center; gap:.5rem; max-width:min(84vw,26rem);
}
/* Tên bài hát chỉ hiện khi nhạc đang chạy, và tự mờ đi sau vài giây */
.ten-bai{
  font-size:.63rem; color:var(--muc); background:rgba(217,194,160,.92);
  border:1px solid var(--vien-son); border-radius:2px; padding:.28rem .6rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
  backdrop-filter:blur(6px); order:-1;
}
.ten-bai.ro{ opacity:1; transform:none; }


/* ===================== CÂU CHUYỆN HAI NGƯỜI ===================== */
/* Mốc thời gian dọc, một đường mảnh nối các mốc. Không phải timeline giờ lễ —
   cái đó trùng thông tin phía trên và chính là lỗi của trang thiệp mẫu. */
.man-chuyen{ --rong-noi:33rem; }
.moc-chuyen{
  list-style:none; margin:0; padding:0 0 0 1.7rem; text-align:left;
  border-left:1px solid rgba(156,108,43,.45);   /* nét đồng chạy dọc dòng thời gian */
}
.mot-moc{ position:relative; padding-bottom:2.9rem; }
.mot-moc:last-child{ padding-bottom:0; }
/* Chấm tròn nhỏ nằm đúng trên đường kẻ */
.mot-moc::before{
  content:""; position:absolute; left:calc(-1.7rem - 3.5px); top:.62rem;
  width:6px; height:6px; border-radius:50%;
  background:var(--giay-sang); border:1px solid var(--son);
}
.moc-nam{
  display:block; font-size:.64rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--son-dam); margin-bottom:.35rem;
}
.moc-tieu-de{
  font-family:var(--chu-ten); font-weight:400; font-size:1.42rem;
  margin:0 0 .45rem; line-height:1.3;
}
.moc-noi-dung{ margin:0; font-size:.93rem; color:var(--muc-nhat); line-height:1.72; }

/* ===================== CLIP KỶ NIỆM ===================== */
.khung-video{
  width:100%; max-width:34rem; margin:0 auto; display:block;
  aspect-ratio:16/9; background:#1A1614; object-fit:cover;
}

/* ===================== LỜI CHÚC ===================== */
/* Lời khách gửi, hiện cho người đến sau đọc. Thiệp từ tờ giấy một chiều
   thành chỗ mọi người tụ lại. */
.dan-chuc{ columns:2; column-gap:1rem; text-align:left; }
@media (max-width:640px){ .dan-chuc{ columns:1; } }
.mot-chuc{
  break-inside:avoid; margin:0 0 1rem;
  padding:1.05rem 1.15rem;
  /* Mảnh giấy sáng hơn đặt lên tờ giấy nền. Để #fff là thành ô nhập liệu. */
  background:var(--giay-sang);
  border:1px solid var(--vien-son); border-radius:2px;
  box-shadow:0 1px 6px rgba(51,34,15,.14);
}
.mot-chuc p{
  margin:0 0 .6rem; font-size:.93rem; line-height:1.68;
  font-family:var(--chu-ten); font-style:italic;
  font-size:1.03rem; color:var(--muc);
}
.mot-chuc cite{
  font-style:normal; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--son-dam);
}

/* ===================== CHỮ KÝ TAY ===================== */
.anh-chu-ky{
  width:min(16rem,62%); margin:.3rem auto 0; display:block;
  /* PNG nền trong suốt, nét đen. Đổi sang màu mực của trang cho hoà vào nền giấy. */
  filter:brightness(0) saturate(100%) invert(18%) sepia(8%) saturate(760%) hue-rotate(340deg);
  /* Giấy kraft tối hơn nền ngà cũ nên nét phải đậm lên mới đọc ra */
  opacity:.95;
}

/* ===================== MÀN NỀN GỖ ===================== */
/* VÌ SAO PHẢI CÓ MÀN TỐI
   Chín màn cùng một sắc kraft từ đầu tới cuối thì cuộn tới màn thứ năm mắt đã
   hết đọc ra ranh giới — chủ nhà gọi đúng tên: "đơn điệu". Không phải vì màu
   xấu, mà vì KHÔNG CÓ NHỊP. Hai màn đổi hẳn sang nền gỗ là hai chỗ nghỉ: cuộn
   tới đó biết ngay mình đã sang phần khác.
   Chỉ HAI màn, và chọn đúng hai màn đáng được nhấn: Lễ (thông tin quan trọng
   nhất cả tấm thiệp) và Clip (nền tối vốn là nền đúng của video). Thêm màn thứ
   ba là nhịp biến thành sọc.

   CÁCH LÀM: ĐỔI BIẾN, KHÔNG ĐỔI TỪNG QUY TẮC
   Cả trang đã đi qua --muc/--son/--dong rồi, nên chỉ cần đặt lại mấy biến đó
   ngay trên .man-toi là mọi thứ bên trong tự đổi màu theo. Viết lại từng quy tắc
   cho nền tối là chắc chắn có ngày sửa bản sáng quên bản tối.
   Phải có color:var(--muc) trên chính .man-toi: body đã tính xong màu chữ bằng
   --muc của :root và truyền xuống dưới dạng MÀU ĐÃ TÍNH, đổi biến không kéo
   ngược màu ấy về được.

   ĐÃ ĐO, KHÔNG ĐOÁN (luật 30, đo trên vùng SÁNG nhất của gỗ vì chữ ở đây sáng):
     ngà  #F2E5CE 11.1:1   vàng #D9B45C 7.0:1   ngà mờ #D6C0A0 7.8:1
   Đỏ son #9B2118 chỉ còn 1.3:1 trên gỗ — gần như không đọc được. Vì vậy trong
   màn tối, màu nhấn chuyển hẳn sang VÀNG ĐỒNG, đúng tông khảm trai và ánh đèn
   dầu trong ảnh nhà gỗ. */
.man-toi{
  --muc:       #F2E5CE;   /* ngà */
  --muc-nhat:  #D6C0A0;
  --son:       #D9B45C;   /* trên gỗ, màu nhấn là vàng đồng chứ không phải đỏ */
  --son-dam:   #D9B45C;
  --nhan:      #D9B45C;
  --dong:      #C79A52;
  --giay-sang: #4A3322;   /* khối "nổi lên" giờ phải SÁNG HƠN GỖ, không phải hơn giấy */
  --vien:      rgba(242,229,206,.26);
  --vien-son:  rgba(217,180,92,.34);

  max-width:var(--rong-giay);      /* rộng bằng TỜ GIẤY, không bằng màn hình:
                                      tràn ra ngoài mép giấy là tờ thiệp bị cắt
                                      làm ba khúc, không còn là một tờ liền */
  color:var(--muc);
  background-color:var(--go);
  background-image:url("/tinh/go.jpg");
  background-repeat:repeat; background-size:512px 512px;
  border-top:1px solid rgba(217,180,92,.26);
  border-bottom:1px solid rgba(217,180,92,.26);
  /* Trên/dưới tối dần: tấm ván trông như LÕM XUỐNG mặt giấy chứ không phải một
     hình chữ nhật dán đè lên.
     Trái/phải cũng tối dần, và phải ĐÚNG BẰNG mép tờ giấy (10px/-13px, xem
     body::before). Thiếu hai nét này thì trên PC màn gỗ liền tù tì với mặt gỗ
     phía sau, cột giấy đang chạy dọc trang bỗng đứt mất một khúc — chỉ còn phân
     biệt được nhờ hai ô vân gỗ tình cờ lệch pha nhau. */
  box-shadow:
    inset 0 18px 32px -20px rgba(0,0,0,.95),
    inset 0 -18px 32px -20px rgba(0,0,0,.95),
    inset 10px 0 18px -13px rgba(0,0,0,.72),
    inset -10px 0 18px -13px rgba(0,0,0,.72);
}
/* Cột chữ bên trong vẫn hẹp như cũ, chỉ nền là rộng ra.
   Hai dòng, hai mức ưu tiên khác nhau, CỐ Ý:
   - margin phải THẮNG (.nhan-nho có margin:0 0 1.4rem, không thắng thì mọi đoạn
     dạt hết sang trái trong khung 58rem).
   - max-width phải THUA (.khung-video tự đặt 34rem của nó, thắng ở đây là video
     bị kéo rộng ra 52rem). :where() cho ưu tiên bằng 0 nên mọi quy tắc riêng
     của từng khối đều thắng nó. */
.man-toi > *{ margin-inline:auto; }
:where(.man-toi) > *{ max-width:var(--rong-noi); }

/* Hình thoi giữa đường triện: đỏ son chìm nghỉm trên gỗ, phải đổi sang vàng.
   var() không dùng được trong data URI nên mã màu gõ thẳng — đổi --son của màn
   tối thì nhớ đổi cả %23D9B45C dưới đây. */
.man-toi .gach{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5z' fill='%23D9B45C'/%3E%3C/svg%3E");
}
.man-toi .gach::before{ background:linear-gradient(to right, rgba(217,180,92,0), var(--son)); }
.man-toi .gach::after{  background:linear-gradient(to left,  rgba(217,180,92,0), var(--son)); }

/* Khung của màn Lễ khi nằm trên gỗ.
   Bản sáng kẻ khung theo mép màn (left:.75rem) vì màn rộng đúng bằng cột chữ.
   Nay .man-toi nới màn ra 58rem, giữ nguyên thì khung ôm cả khoảng trống hai
   bên — nhìn như cái hộp chứ không phải khung thiệp. Nên khung phải bám theo
   CỘT CHỮ. Và bỏ hẳn nét thứ hai: hai nét mảnh sát nhau trên nền gỗ sẫm nhoè
   thành một nét dày, được cái rối mà không được cái gì. */
.man-le.man-toi::before{
  left:50%; right:auto; transform:translateX(-50%);
  width:min(var(--rong-noi), 100% - 1.5rem);
}
.man-le.man-toi::after{ display:none; }

/* ===== Chuyển động duy nhất: mờ dần + nhích lên 18px khi cuộn tới ===== */
.hien{ opacity:0; transform:translateY(18px);
       transition:opacity var(--chuyen), transform var(--chuyen); }
.hien.vao{ opacity:1; transform:none; }

/* Tôn trọng người đã tắt hiệu ứng trong cài đặt hệ điều hành */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .hien{ opacity:1; transform:none; }
  .bia.dong{ display:none; }
}