/* ==========================================================================
   Thư Tay · thiệp cưới dạng một lá thư
   Màu đổi liên tục theo --n (0 = ngày, 1 = đêm), do js/core.js đặt theo cuộn
   và nút Ngày/Đêm. Các mặt giấy (thư, bưu thiếp, hộ chiếu, vé) giữ màu giấy sáng.
   ========================================================================== */

:root {
  --n: 0;
  --blue: #2346c8;
  --red: #d4472f;
  --letter: #1f2f73;             /* mực viết tay trên giấy */
  --card: #fbf9f2;               /* giấy sáng */
  --card-2: #f1ede1;
  --paper-d: #e9e7e1;  --paper-n: #0c1636;      /* màu mặt bàn (vải lanh) ngày / đêm */
  --ink-d:   #2346c8;  --ink-n:   #e8ecfb;
  --mute-d:  #7d84a6;  --mute-n:  #96a2d2;

  --paper: color-mix(in oklab, var(--paper-d), var(--paper-n) calc(var(--n) * 100%));
  --ink:   color-mix(in oklab, var(--ink-d),   var(--ink-n)   calc(var(--n) * 100%));
  --mute:  color-mix(in oklab, var(--mute-d),  var(--mute-n)  calc(var(--n) * 100%));
  --faint: color-mix(in oklab, var(--ink) 24%, transparent);
  --card-faint: rgba(35, 70, 200, .22);

  --display: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
  --hand: 'Mynerve', 'Patrick Hand', cursive;        /* chữ viết bút bi: lời thư, bưu thiếp, nội dung */
  --script: 'Ephesis', 'Mynerve', cursive;          /* chữ bút máy: tiêu đề, tên, chữ ký */
  /* vùng an toàn của iPhone (tai thỏ, thanh home): viewport-fit=cover nên phải tự chừa */
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --pad: max(clamp(20px, 5.5vw, 88px), var(--sl), var(--sr));
  --bar: calc(60px + var(--st));
  /* ---- vật liệu: mọi tờ giấy = màu nhuộm × cùng một texture sợi giấy, dưới cùng một nguồn sáng (trên trái) ---- */
  --tex-paper: url(../assets/img/tex-paper.webp);
  --tex-linen: url(../assets/img/tex-linen.webp);
  --ts: 360px;                                                       /* cỡ một ô texture giấy */
  --lit: linear-gradient(152deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%, rgba(60, 45, 20, .07));
  --p-cream: #f6f1e3;    /* thư, vé, thư hồi âm */
  --p-white: #faf8f2;    /* bưu thiếp, ảnh in, tem */
  --p-env: #f5f1e6;      /* phong bì thư máy bay */
  --p-kraft: #e7dcc3;    /* phong bì thứ chín */
  --p-manila: #ead9ae;   /* thẻ hành lý */
  --p-sec: #edf0e6;      /* giấy bảo an của hộ chiếu */
  /* bóng: cùng màu (nâu ấm, không đen tuyền), cùng hướng (lệch phải-xuống) */
  --sh-1: 0 0 0 .5px rgba(60, 45, 25, .10), .5px 1px 1.5px rgba(60, 45, 25, .16), 3px 8px 14px -6px rgba(50, 38, 20, .30);
  --sh-2: 0 0 0 .5px rgba(60, 45, 25, .10), 1px 2px 3px rgba(60, 45, 25, .16), 10px 26px 40px -16px rgba(40, 30, 15, .42);
  --cut: drop-shadow(1px 2px 1.5px rgba(50, 38, 20, .32)) drop-shadow(6px 14px 12px rgba(40, 30, 15, .22));
  --cut-flat: drop-shadow(.5px 1px .6px rgba(50, 38, 20, .30)) drop-shadow(2px 4px 4px rgba(40, 30, 15, .12));   /* hoa ép nằm sát mặt giấy */
  --shadow: var(--sh-2);
  color-scheme: light;
}
@supports not (color: color-mix(in oklab, red, blue)) {
  :root { --paper: var(--paper-d); --ink: var(--ink-d); --mute: var(--mute-d); --faint: rgba(35, 70, 200, .24); }
  :root.is-night { --paper: var(--paper-n); --ink: var(--ink-n); --mute: var(--mute-n); --faint: rgba(232, 236, 251, .24); }
}
:root.is-night { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* chặn mọi phần tử tràn ngang làm điện thoại thu nhỏ cả trang */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--hand); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, label, input, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--paper); }
.js body.is-loading { overflow: hidden; }
.js .env { visibility: hidden; }          /* JS đặt trạng thái đầu xong mới hiện, tránh nháy */

.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 99px; text-decoration: none; }
.skip:focus { top: 12px; }

.mono { font-family: var(--mono); }
.lbl { font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.lbl small { font-size: 10px; text-transform: none; letter-spacing: .02em; opacity: .75; }
.hand { font-family: var(--hand); }
.title { margin: .08em 0 0; font: 400 clamp(68px, 10vw, 176px)/.95 var(--script); }
.title em, .title-i { font-style: normal; }
.ch-mask { padding: .2em .04em .12em; margin: -.2em -.04em -.12em; }
/* mỗi từ được viết bằng một mặt nạ quét trái → phải (--p: 0 → 1, js/core.js write()).
   Đệm rộng ra bốn phía để nét bay của chữ viết tay và dấu tiếng Việt không bị cắt. */
.w-ink { text-indent: 0; padding: .4em .35em .32em; margin: -.4em -.35em -.32em;   /* không thừa hưởng thụt đầu dòng của đoạn văn */
 
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p, 1) * (100% + 1.6em) - 1.6em), transparent calc(var(--p, 1) * (100% + 1.6em)));
          mask-image: linear-gradient(90deg, #000 calc(var(--p, 1) * (100% + 1.6em) - 1.6em), transparent calc(var(--p, 1) * (100% + 1.6em))); }

/* tem có răng cưa: phần ruột (content-box) đặc, phần đệm là lưới lỗ tròn → mép lượn sóng */
.perf {
  --r: 3.4px; --t: 11px;
  padding: calc(var(--t) / 2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 92%, #000 98%) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t);
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 92%, #000 98%) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t);
}

/* dấu bưu điện */
.pm { overflow: visible; }
.pm circle { fill: none; stroke: currentColor; }
.pm .pm-o { stroke-width: 2.2; }
.pm .pm-i { stroke-width: 1.2; }
.pm .pm-t { fill: currentColor; font: 600 8.4px var(--mono); letter-spacing: .14em; }
.pm .pm-c { fill: currentColor; font: italic 600 17px var(--display); text-anchor: middle; }
.pm .pm-c2 { font: 500 9px var(--mono); letter-spacing: .2em; }
.pm-waves path, .loader-waves path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.barcode { display: block; fill: currentColor; }

/* ==========================================================================
   Vật liệu
   Mặt bàn vải lanh cố định; mọi vật bằng giấy nằm trên đó. Lớp .light (js/light.js) nhân
   ánh sáng lên tất cả. Mỗi tờ giấy: nền = màu nhuộm + vệt sáng xiên; ::after = texture sợi
   giấy nhân (multiply) lên cả nền lẫn chữ/mực in trên nó, nên chữ trông như in thật.
   ========================================================================== */
.desk { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--tex-linen) 0 0 / 560px 560px, var(--paper); background-blend-mode: multiply; }
.light { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; mix-blend-mode: multiply; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.letter-paper::after, .pc-front::after, .pc-back::after, .pp::after, .ticket::after, .tag-card::after, .rcard::after, .thanks::after, .print::after,
.stamp::after, .eb-body::after, .eb-front::after, .eb-flap::after, .eb-slip::after, .env::after, .credits::after, .r-stamp span::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: var(--tex-paper) 0 0 / var(--ts) var(--ts); mix-blend-mode: multiply;
}
/* mực: dấu bưu điện, vạch huỷ tem, mã vạch, con dấu — loang nhẹ, chỗ đậm chỗ nhạt, thấm vào giấy */
.pm, .pm-waves, .loader-waves, .visa, .barcode, .tk-grid-code { filter: url(#ink); }
.pp-mrz, .pp-head, .tk-head { filter: url(#ink-soft); }
.barcode, .tk-grid-code, .pp-mrz, .visa, .pm-env, .pc-pm, .pc-waves, .pm-waves, .pm-sent { mix-blend-mode: multiply; }
/* khối màu in (nút, nhãn, tem chữ): mực xanh in trên giấy, có hạt */
.btn, .brand-stamp, .env-label, .loader, .menu, .r-chips input:checked + span, .r-stamp input:checked + span {
  background-image: var(--tex-paper); background-size: var(--ts) var(--ts); background-blend-mode: multiply;
}

/* ==========================================================================
   Màn chờ
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background-color: var(--blue); color: var(--card); }
.no-loader .loader, .loader.is-done { display: none; }
.loader-mark { position: relative; display: flex; align-items: center; }
.pm-loader { width: clamp(130px, 14vw, 170px); }
.loader-pct { position: absolute; left: 0; width: clamp(130px, 14vw, 170px); top: 50%; translate: 0 -50%; margin: 0; text-align: center; font: 500 26px/1 var(--mono); font-variant-numeric: tabular-nums; }
.loader-waves { width: clamp(140px, 16vw, 220px); height: 56px; margin-left: -12px; }
.loader-cap { position: absolute; bottom: 12svh; left: 0; right: 0; margin: 0; text-align: center; font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .8; }

/* ==========================================================================
   Thanh trên cùng, menu, vận đơn
   ========================================================================== */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); padding: var(--st) max(clamp(16px, 2.6vw, 40px), var(--sr)) 0 max(clamp(16px, 2.6vw, 40px), var(--sl)); color: var(--ink); }
.bar::before { content: ''; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; background: linear-gradient(var(--paper) 40%, color-mix(in oklab, var(--paper) 0%, transparent)); opacity: var(--bar-bg, 0); transition: opacity .4s; }
.brand { text-decoration: none; }
.brand-stamp { --r: 2.4px; --t: 7px; display: inline-grid; place-items: center; grid-auto-flow: column; gap: 3px; width: 54px; height: 38px; background-color: var(--ink); color: var(--paper); font: italic 500 16px/1 var(--display); background-clip: content-box; }
.brand-stamp { padding: 3.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 92%, #000 98%) -3.5px -3.5px / 7px 7px; mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 92%, #000 98%) -3.5px -3.5px / 7px 7px; }
.brand-stamp i { font-style: normal; font-size: 10px; color: var(--red); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav a { position: relative; padding: 8px 0; text-decoration: none; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav .nav-cta { padding: 9px 16px; border: 1px solid currentColor; border-radius: 99px; }
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover, .nav .nav-cta.is-active { background: var(--ink); color: var(--paper); }
.theme { display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.t-k { position: relative; width: 34px; height: 18px; border: 1px solid currentColor; border-radius: 99px; }
.t-k::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: translate .5s cubic-bezier(.2, .8, .2, 1); }
[data-theme="night"] .t-k::after { translate: 16px 0; box-shadow: inset 3px -2px 0 0 var(--paper); }
.t-d, .t-n { opacity: .45; transition: opacity .3s; }
[data-theme="day"] .t-d, [data-theme="night"] .t-n { opacity: 1; }
.menu-btn { display: none; margin-left: auto; padding: 9px 15px; border: 1px solid currentColor; border-radius: 99px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: calc(14px + var(--st)) max(20px, var(--sr)) calc(24px + var(--sb)) max(20px, var(--sl)); overflow-y: auto; overscroll-behavior: contain; background-color: var(--blue); color: var(--card); }
.menu-head { display: flex; justify-content: space-between; align-items: center; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.menu-head button { padding: 9px 15px; border: 1px solid currentColor; border-radius: 99px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.menu nav { margin: auto 0; display: grid; gap: 2px; }
.menu nav a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font: 400 clamp(34px, min(12.5vw, 8.2svh), 70px)/1.15 var(--script); }
.menu nav a i { font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .12em; opacity: .7; }
.theme-lg { align-self: flex-start; font-size: 11px; }

.track { position: fixed; left: calc(clamp(16px, 2.6vw, 40px) + 72px); top: var(--st); z-index: 51; height: calc(var(--bar) - var(--st)); display: flex; align-items: center; gap: 14px; color: var(--ink); pointer-events: none; }
.track-code { margin: 0; padding-left: 14px; border-left: 1px solid var(--faint); font: 500 9.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.track-code b { display: block; font-weight: 500; }
.track-status { margin: 0; font: 400 17px/1 var(--hand); white-space: nowrap; }
.track-bar { position: fixed; left: 0; right: 0; top: 0; height: 2px; }
.track-bar i { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--tp, 0)); }

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sb)); z-index: 80; translate: -50% 0; margin: 0; padding: 12px 20px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 99px; border: 1px solid var(--blue); background-color: var(--blue); color: var(--card); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, translate .3s; }
@media (hover: hover) { .btn:hover { translate: 0 -2px; } }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:not(:hover) { background-image: none; }
.btn-ghost:hover { background-color: var(--blue); background-image: var(--tex-paper); color: var(--card); }
.link { font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ==========================================================================
   Cảnh ghim (ScrollTrigger pin: true lo phần giữ đứng yên)
   ========================================================================== */
.scene { position: relative; height: 100svh; overflow: clip; }

/* ==========================================================================
   00 · Phong bì
   ========================================================================== */
.env { --ww: clamp(240px, 26vw, 420px); --pc: var(--p-env); background: var(--lit), var(--pc); background-blend-mode: soft-light; }
.env::after { z-index: 5; }
.env-frame { position: absolute; inset: 10px; z-index: 0; border: 7px solid transparent; pointer-events: none;
  border-image: repeating-linear-gradient(-45deg, var(--blue) 0 12px, transparent 12px 19px, var(--red) 19px 31px, transparent 31px 38px) 7; opacity: .9; }
.env-from { position: absolute; left: clamp(30px, 5vw, 80px); top: calc(var(--bar) + 2.5svh); z-index: 4; display: grid; gap: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.env-from p { margin: 0; }
.env-from .lbl { margin-bottom: 4px; opacity: .6; }

.env-stamp { position: absolute; right: clamp(30px, 6vw, 96px); top: calc(var(--bar) + 1.5svh); z-index: 4; width: clamp(108px, 10.5vw, 168px); rotate: 3deg; }
.stamp { --pc: var(--p-white); position: relative; background: var(--lit), var(--pc); background-blend-mode: soft-light; filter: var(--cut); }
.stamp-in { position: relative; aspect-ratio: 5 / 6; overflow: hidden; outline: 1px solid rgba(35, 70, 200, .35); outline-offset: -5px; background: #f7f3e8; }
.stamp-in img { width: 100%; height: 100%; object-fit: cover; }
.stamp-val { position: absolute; left: 7px; top: 6px; padding: 1px 5px 2px; background: var(--p-white); color: var(--blue); font: italic 600 clamp(13px, 1.3vw, 19px)/1 var(--display); }
.stamp-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 0 5px; background: var(--p-white); color: var(--blue); font: 500 clamp(6.5px, .6vw, 8.5px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.env-stamp .stamp { --r: 3.6px; --t: 12px; }
.pm-env { position: absolute; width: 112%; left: -62%; top: 46%; rotate: -14deg; color: var(--letter); opacity: .82; mix-blend-mode: multiply; }
.pm-waves { position: absolute; right: 92%; top: 60%; width: clamp(110px, 15vw, 240px); height: 46px; color: var(--letter); opacity: .7; mix-blend-mode: multiply; }

.env-label { position: absolute; right: calc(clamp(30px, 6vw, 96px) + clamp(108px, 10.5vw, 168px) + 3.5vw); top: calc(var(--bar) + 7svh); z-index: 4; margin: 0; padding: 8px 14px 9px; border-radius: 6px; background-color: var(--blue); color: var(--card); rotate: -6deg;
  font: italic 500 clamp(17px, 1.5vw, 22px)/1.05 var(--display); font-variation-settings: 'SOFT' 60, 'WONK' 1; outline: 1px dashed rgba(251, 249, 242, .6); outline-offset: -5px; }
.env-label small { font: 500 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; opacity: .85; }

.env-slot { position: absolute; visibility: hidden; pointer-events: none; }
.env-window, .env-slot { left: 54%; top: calc(50% - var(--ww) * 1.25 * .46); width: var(--ww); height: calc(var(--ww) * 1.25); }
.env-window { position: absolute; z-index: 2; margin: 0; width: var(--ww); height: calc(var(--ww) * 1.25); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
/* (js/envelope.js tính lại đúng các con số này để phóng cửa sổ ra toàn màn hình) */
.env-window-in { position: absolute; inset: 0; }
.env-window-in img { width: 100%; height: 100%; object-fit: cover; }
.env-window::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .28), transparent 34%, transparent 70%, rgba(255, 255, 255, .12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), inset 0 0 40px rgba(20, 40, 120, .18); }
.env-window-shade { position: absolute; inset: 0; background: #0a1238; opacity: 0; }

.env-names { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; font-weight: 300; }
.env-n1, .env-n2 { position: absolute; font: 400 clamp(118px, 17.5vw, 330px)/.9 var(--script); }
.env-n1 { left: clamp(26px, 4.6vw, 76px); top: 20svh; }
.env-n2 { left: calc(clamp(26px, 4.6vw, 76px) + 6.4vw); top: 42svh; }
.env-amp { position: absolute; left: clamp(26px, 4.6vw, 76px); top: 46svh; color: var(--red); font: 400 clamp(64px, 8vw, 150px)/1 var(--script); }
.env-hoasua { position: absolute; left: calc(54% - 8vw); top: 50svh; z-index: 6; width: clamp(120px, 12.5vw, 220px); rotate: -24deg; filter: var(--cut-flat); pointer-events: none; }

.env-kicker { position: absolute; left: clamp(30px, 5vw, 80px); top: calc(42svh + clamp(92px, 15vw, 280px) * .86); z-index: 4; margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.env-kicker i { font-style: normal; color: var(--red); margin: 0 .4em; }
.env-to { position: absolute; left: clamp(30px, 5vw, 80px); bottom: 7svh; z-index: 4; width: min(32vw, 440px); }
.env-to .lbl { opacity: .6; }
.env-to p { margin: 2px 0 0; font-size: clamp(30px, 3vw, 48px); line-height: 1.15; color: var(--letter); }
.is-night .env-to p { color: var(--ink); }
.env-to i { display: block; height: 1px; margin-top: 16px; background: var(--faint); }
.env-code { position: absolute; right: clamp(30px, 6vw, 96px); bottom: 7svh; z-index: 4; display: grid; justify-items: end; gap: 6px; }
.env-code .barcode { width: clamp(140px, 13vw, 200px); height: 40px; }
.env-code p { margin: 0; font-size: 10.5px; letter-spacing: .24em; }
.env-open { position: absolute; left: 50%; bottom: 5svh; z-index: 4; translate: -50% 0; display: grid; justify-items: center; gap: 8px; text-decoration: none; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.env-open svg { width: 40px; height: 40px; padding: 9px; border: 1px solid currentColor; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- 01 · Lá thư (trong cùng cảnh) ---------- */
.letter { position: absolute; inset: 0; z-index: 6; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;   /* hàng lưới = đúng khung nhìn: tờ thư dài hơn vẫn được căn giữa rồi JS thu nhỏ */
  padding: calc(var(--bar) + 1svh) 16px 2svh; pointer-events: none; }
.letter-paper { --rule: 2rem; position: relative; width: min(640px, 92vw); padding: 40px 46px 38px 78px; color: var(--letter); pointer-events: auto; rotate: -1.2deg;
  --pc: var(--p-cream);
  background:
    linear-gradient(90deg, transparent 56px, rgba(212, 71, 47, .5) 56px 57px, transparent 57px),
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), rgba(35, 70, 200, .16) calc(var(--rule) - 1px) var(--rule)),
    var(--lit), var(--pc);
  background-position: 0 0, 0 16px, 0 0, 0 0;
  background-blend-mode: multiply, multiply, soft-light;
  border-radius: 3px; box-shadow: var(--sh-2); }
.letter-date { margin: 0; text-align: right; font-size: 19px; line-height: var(--rule); }
.letter-hi { margin: 0; font-size: 25px; line-height: var(--rule); }
.letter-body { font: 400 19px/var(--rule) var(--hand); }
.letter-body p { margin: 0; text-indent: 1.6em; }
.letter-sign { display: grid; justify-items: end; margin: 0; line-height: var(--rule); font-size: 22px; padding-right: 70px; }
.letter-names { font: 400 46px/1.1 var(--script); }
.letter-seal { position: absolute; left: 20px; bottom: -42px; z-index: 4; width: 104px; rotate: -10deg; filter: var(--cut); }
.letter-flower { position: absolute; right: -34px; top: -84px; z-index: 4; width: 84px; rotate: 18deg; filter: var(--cut-flat); pointer-events: none; }

/* ==========================================================================
   02 · Hộ chiếu
   ========================================================================== */
.about { position: relative; padding: 20svh var(--pad) 16svh; overflow-x: clip; }
.sec-head { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto 8svh; }
.sec-head .title-i { padding-left: 9vw; margin-top: 0; }
.sec-sub { max-width: 52ch; margin: 22px 0 0; font-size: 19px; }

.passports { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4.5vw; max-width: 1240px; margin: 0 auto; }
.pp { position: relative; container-type: inline-size; aspect-ratio: 1.42; padding: 4.2cqw 4.6cqw; border-radius: 14px; --pc: var(--p-sec); background: var(--lit), var(--pc); background-blend-mode: soft-light; color: var(--blue); overflow: hidden; box-shadow: var(--sh-1), inset 0 0 0 1px rgba(35, 70, 200, .12); }
.pp:nth-child(1) { rotate: -2.5deg; }
.pp:nth-child(2) { rotate: 2deg; margin-top: 9svh; }
.pp-guilloche { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pp-guilloche path { fill: none; stroke: rgba(40, 120, 110, .2); stroke-width: .6; }
.pp-head { position: relative; display: flex; justify-content: space-between; padding-bottom: 1.8cqw; border-bottom: 1px solid var(--card-faint); font-size: max(10px, 1.95cqw); letter-spacing: .14em; text-transform: uppercase; }
.pp-body { position: relative; display: grid; grid-template-columns: 30% 1fr; gap: 4.2cqw; margin-top: 3.4cqw; }
.pp-photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 1cqw; }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; mix-blend-mode: multiply; filter: contrast(1.06) saturate(.8); }   /* ảnh in thẳng lên giấy bảo an */
.pp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw 3.2cqw; margin: 0; align-content: start; }
.pp-fields div { grid-column: 1 / -1; }
.pp-fields .half { grid-column: auto; }
.pp-fields dt { font: 500 max(10px, 1.7cqw)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.pp-fields dd { margin: .2cqw 0 0; font: 500 3.1cqw/1.15 var(--display); font-variation-settings: 'opsz' 24; }
.pp-fields .sig dd { font: 400 6.4cqw/1 var(--script); color: var(--letter); }
.pp-ghost { position: absolute; right: 0; bottom: 2cqw; width: 11cqw; aspect-ratio: 3 / 4; object-fit: cover; opacity: .16; filter: grayscale(1) contrast(1.5); mix-blend-mode: multiply; }
.pp-mrz { position: absolute; left: 4.6cqw; right: 4.6cqw; bottom: 3.4cqw; margin: 0; font-size: 2.05cqw; line-height: 1.45; letter-spacing: .1em; white-space: nowrap; overflow: hidden; opacity: .8; }
.pp-holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light; opacity: .55;
  background: linear-gradient(115deg, transparent 32%, rgba(140, 190, 255, .9) 42%, rgba(255, 160, 210, .8) 50%, rgba(160, 255, 220, .8) 57%, transparent 66%); background-size: 280% 100%; background-position: var(--hp, 100%) 0; }
.visa { position: absolute; left: 50%; top: 52%; z-index: 3; width: clamp(150px, 15vw, 236px); translate: -50% -50%; color: var(--red); pointer-events: none; overflow: visible; }
.visa circle { fill: none; stroke: currentColor; }
.visa .v-o { stroke-width: 3; }
.visa .v-i { stroke-width: 1.6; }
.visa .v-t { fill: currentColor; font: 600 11px var(--mono); letter-spacing: .16em; }
.visa .v-c { fill: currentColor; font: italic 600 30px var(--display); text-anchor: middle; }
.visa .v-c2 { font: 600 14px var(--mono); letter-spacing: .3em; }

.print { --pc: var(--p-white); position: relative; width: min(900px, 90vw); margin: 18svh auto 0; padding: 16px 16px 66px; background: var(--lit), var(--pc); background-blend-mode: soft-light; box-shadow: var(--sh-1); rotate: -1.6deg; }
.print-photo { aspect-ratio: 3 / 2; overflow: hidden; }
.print-photo img { width: 100%; height: 100%; object-fit: cover; }
.print figcaption { position: absolute; left: 24px; bottom: 18px; font-size: clamp(18px, 1.7vw, 24px); color: var(--letter); }
.tape { position: absolute; z-index: 3; width: 124px; height: 32px; background: var(--tex-paper) 0 0 / 180px, rgba(200, 210, 236, .58); background-blend-mode: multiply; mix-blend-mode: multiply;
  clip-path: polygon(0 4%, 4% 0, 8% 6%, 12% 0, 16% 5%, 84% 0, 88% 6%, 92% 0, 96% 5%, 100% 0, 100% 96%, 96% 100%, 92% 94%, 88% 100%, 84% 95%, 16% 100%, 12% 94%, 8% 100%, 4% 95%, 0 100%); }   /* băng giấy washi, hai đầu xé răng cưa */
.tape-a { left: -24px; top: 18px; rotate: -38deg; }
.tape-b { right: -24px; top: 18px; rotate: 38deg; }

/* ==========================================================================
   03 · Tám bưu thiếp
   ========================================================================== */
.cards-head { position: absolute; left: var(--pad); top: calc(var(--bar) + 3svh); z-index: 4; max-width: 330px; }
.cards-head .title { font-size: clamp(52px, 5.6vw, 96px); }
.cards-hint { margin: 14px 0 0; font-size: 17px; color: var(--mute); }
.stack { position: absolute; left: calc(50% + 180px); top: 50%; z-index: 2; width: min(100vw - 2 * var(--pad) - 400px, 780px, 88svh * 1.5); aspect-ratio: 3 / 2; translate: -50% -52%; perspective: 2200px; }
.pc { position: absolute; inset: 0; container-type: inline-size; transform-style: preserve-3d; }
.pc-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.pc-front, .pc-back { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: var(--sh-1), 0 1px 3px rgba(8, 16, 52, .12); }
/* rotateY(0) + isolation: mặt trước có ngữ cảnh xếp lớp riêng như mặt sau; thiếu nó, lớp hạt giấy
   (multiply) nằm trong khối 3D bị vẽ đè đặc lên ảnh */
.pc-front { transform: rotateY(0deg); isolation: isolate; --pc: var(--p-white); display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 2.4cqw 2.4cqw 0; background: var(--lit), var(--pc); background-blend-mode: soft-light; }
.pc-photo { position: relative; min-height: 0; overflow: hidden; border-radius: 1.5px; box-shadow: inset 0 0 0 1px rgba(40, 30, 15, .08); }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-strip { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; height: 9.6cqw; padding: 0 .8cqw 0 1.2cqw; }
.pc-place { margin: 0; font: 400 6.4cqw/1 var(--script); color: var(--letter); white-space: nowrap; }   /* tên nơi chốn: viết tay bằng mực xanh */
.pc-cap { margin: 0; font: 500 max(10px, 1.3cqw)/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-align: right; color: var(--blue); opacity: .7; }
.pc-back { transform: rotateY(180deg); display: grid; grid-template-columns: 1.12fr 1px .88fr; gap: 4cqw; padding: 4.4cqw 4.6cqw; color: var(--letter);
  --pc: var(--p-white); background: var(--lit), var(--pc); background-blend-mode: soft-light; }
.pc-l { display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.6cqw; min-width: 0; }
.pc-kind { margin: 0; font: 500 max(10px, 1.5cqw)/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); opacity: .75; }
.pc-date { margin: 0; font: 400 2.5cqw/1 var(--hand); color: var(--blue); }
.pc-msg { margin: 0; font: 400 3.4cqw/1.38 var(--hand); }
.pc-sign { margin: 0; text-align: right; font: 400 5.4cqw/1 var(--script); }
.pc-div { background: rgba(35, 70, 200, .25); }
.pc-r { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.pc-stamp { justify-self: end; width: 15cqw; rotate: 3deg; --r: 2.6px; --t: 8px; }
.pc-stamp .stamp-in { aspect-ratio: 5 / 6; }
.pc-stamp .stamp-in img { filter: saturate(.8) contrast(1.05); }
.pc-stamp .stamp-val { left: .6cqw; top: .6cqw; font-size: 1.8cqw; padding: .1cqw .5cqw; }
.pc-pm { position: absolute; right: 10cqw; top: 6cqw; width: 15cqw; rotate: -16deg; color: var(--letter); opacity: .78; mix-blend-mode: multiply; }
.pc-pm .pm-c { font-size: 15px; }
.pc-waves { position: absolute; right: 21cqw; top: 9cqw; width: 14cqw; height: 4cqw; color: var(--letter); opacity: .55; mix-blend-mode: multiply; }
.pc-addr { align-self: end; display: grid; gap: .3cqw; }
.pc-addr .lbl { font-size: max(10px, 1.4cqw); color: var(--blue); opacity: .7; }
.pc-to { margin: 0; font: 400 4.4cqw/1.2 var(--hand); border-bottom: 1px solid rgba(35, 70, 200, .22); }
.pc-addr i { display: block; height: 3.6cqw; border-bottom: 1px solid rgba(35, 70, 200, .22); }

.cards-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 3.5svh; z-index: 4; display: flex; align-items: center; gap: 3vw; }
.route { position: relative; flex: 1; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.route::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; border-top: 1px dashed var(--faint); }
.route::after { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(var(--rp, 0)); }
.route li { position: relative; z-index: 1; }
.route button { display: grid; justify-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.route button::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); transition: background .3s, scale .3s; }
.route .is-on button::before { background: var(--ink); }
.route .is-cur button::before { scale: 1.5; background: var(--red); border-color: var(--red); }
.route button span { opacity: .55; transition: opacity .3s; white-space: nowrap; }
.route .is-cur button span { opacity: 1; }
.cards-ctl { display: flex; gap: 8px; }
.cards-ctl button, .cards-ctl a { padding: 9px 14px; border: 1px solid var(--faint); border-radius: 99px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
@media (hover: hover) { .cards-ctl button:hover, .cards-ctl a:hover { border-color: currentColor; } }
.cards-ctl [aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cards-ctl [aria-pressed="true"] .off, .cards-ctl [aria-pressed="false"] .on { display: none; }

/* ==========================================================================
   Phong bì thứ chín
   ========================================================================== */
.ninth-text { position: absolute; left: 8vw; top: 50%; z-index: 3; translate: 0 -50%; font: 400 clamp(28px, 3.2vw, 52px)/1.2 var(--hand); }
.ninth-text p { margin: 0; }
.ninth-text .ninth-big { font: 400 clamp(60px, 8vw, 140px)/1 var(--script); margin-top: .1em; }
.ninth-text .ninth-big:first-of-type { margin-top: .5em; }
.env-back { position: absolute; right: 9vw; top: 52%; z-index: 2; width: clamp(260px, 30vw, 480px); aspect-ratio: 3 / 2; translate: 0 -50%; perspective: 1400px; }
.eb-body, .eb-front, .eb-flap { position: absolute; inset: 0; border-radius: 8px; }
.eb-body { --pc: var(--p-kraft); background: var(--lit), var(--pc); background-blend-mode: soft-light; box-shadow: var(--sh-2); }
.eb-slip { position: absolute; left: 7%; right: 7%; top: 9%; height: 82%; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 5% 6%; border-radius: 6px; --pc: var(--p-cream); background: var(--lit), var(--pc); background-blend-mode: soft-light; color: var(--blue); box-shadow: var(--sh-1); }
.eb-slip span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.eb-slip b { font: 400 clamp(44px, 5.2vw, 84px)/1 var(--script); }
.eb-front { z-index: 2; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); --pc: var(--p-kraft); background: linear-gradient(160deg, rgba(255, 255, 255, .25), transparent 50%, rgba(80, 60, 30, .08)), var(--pc); }
.eb-flap { z-index: 3; clip-path: polygon(0 0, 100% 0, 50% 60%); --pc: var(--p-kraft); background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(80, 60, 30, .12)), var(--pc); transform-origin: 50% 0; -webkit-backface-visibility: visible; backface-visibility: visible; }
.eb-seal { position: absolute; left: 50%; top: 58%; z-index: 4; width: 24%; translate: -50% -50%; filter: var(--cut); }

/* ==========================================================================
   04 · Vé mời
   ========================================================================== */
.tix { position: relative; padding: 16svh var(--pad) 12svh; overflow-x: clip; }
.printer { position: relative; max-width: 1080px; margin: 4svh auto 0; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .25)) drop-shadow(10px 26px 30px rgba(0, 0, 0, .4)); }   /* vé bị mask khoét lỗ nên bóng đổ đặt ở khung ngoài */
.printer-slot { position: relative; z-index: 2; height: 20px; margin: 0 -2.5%; border-radius: 99px; background: linear-gradient(#030716, #121c40); box-shadow: 0 1px 0 rgba(255, 255, 255, .12), inset 0 2px 6px rgba(0, 0, 0, .8); }
.printer-slot i { position: absolute; left: 3%; right: 3%; top: 9px; height: 2px; border-radius: 2px; background: #000; }
.ticket { --stub: 260px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); margin-top: -3px; border-radius: 0 0 18px 18px; --pc: var(--p-cream); background: var(--lit), var(--pc); background-blend-mode: soft-light; color: var(--blue); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7);
  -webkit-mask: radial-gradient(circle 15px at calc(100% - var(--stub)) 100%, #0000 97%, #000); mask: radial-gradient(circle 15px at calc(100% - var(--stub)) 100%, #0000 97%, #000); }
.tk-main { display: grid; gap: 22px; padding: 30px 38px 30px; min-width: 0; }
.tk-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--card-faint); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.tk-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.tk-big { margin: 0; font: 340 clamp(62px, 9vw, 150px)/.82 var(--display); letter-spacing: -.035em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.tk-to .tk-big { font-style: italic; color: var(--red); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.tk-route .lbl { margin-top: 10px; opacity: .65; }
.tk-plane { width: 100%; height: 24px; overflow: visible; }
.tk-dash { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 4 6; }
.tk-star { fill: var(--red); }
.tk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 18px 0; border-top: 1px dashed var(--card-faint); border-bottom: 1px dashed var(--card-faint); }
.tk-grid dt { font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.tk-grid dd { margin: 4px 0 0; font: 400 clamp(19px, 1.7vw, 24px)/1.2 var(--display); }
.tk-venue { display: flex; justify-content: space-between; align-items: end; gap: 22px; flex-wrap: wrap; }
.tk-place { margin: 6px 0 4px; font: 400 clamp(26px, 2.4vw, 36px)/1.05 var(--display); }
.tk-place em { font-variation-settings: 'SOFT' 80, 'WONK' 1; }
.tk-addr { margin: 0; font-size: 14px; }
.tk-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-barcode { width: 100%; height: 44px; opacity: .9; }
.tk-stub { display: grid; align-content: space-between; gap: 16px; padding: 36px 28px 30px; border-left: 2px dashed var(--card-faint); background: rgba(120, 95, 50, .07); }
.tk-stub-name { margin: 0; font: 400 40px/1.05 var(--script); color: var(--letter); }
.tk-stub-date { margin: 0; font-size: 11px; letter-spacing: .14em; }
.tk-grid-code { width: 112px; height: 112px; fill: var(--blue); }
.btn-stub { width: 100%; }

.board { max-width: 1080px; margin: 10svh auto 0; text-align: center; }
.board .lbl { opacity: .7; }
.board-row { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 2.4vw, 30px); margin-top: 16px; }
.board-u { display: grid; justify-items: center; gap: 8px; }
.board-u span { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.flaps { display: flex; gap: 5px; perspective: 300px; }
.flap { position: relative; width: clamp(34px, 4vw, 56px); height: clamp(48px, 5.6vw, 78px); display: grid; place-items: center; border-radius: 7px; background: linear-gradient(#24346e 50%, #1c2a5e 50%); color: #fff; border: 1px solid rgba(255, 255, 255, .14); font: 500 clamp(26px, 3vw, 44px)/1 var(--mono); font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 20px -10px rgba(0, 0, 0, .7); transform-origin: 50% 50%; }
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }

.families { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4vw; max-width: 760px; margin: 12svh auto 0; text-align: center; font: 400 clamp(20px, 1.8vw, 26px)/1.5 var(--hand); }
.families p { margin: 0; }
.families .lbl { margin-bottom: 10px; opacity: .7; }
.families svg { width: 18px; fill: var(--red); }

/* ==========================================================================
   05 · Hành lý
   ========================================================================== */
.tags { position: relative; padding: 14svh var(--pad) 12svh; overflow-x: clip; }
.tag-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 46px); max-width: 1180px; margin: 2svh auto 0; }
.tag { position: relative; padding-top: 104px; transform-origin: 50% 0; filter: var(--cut); }
.tag-string { position: absolute; left: 50%; top: 0; z-index: 4; width: 40px; height: 130px; translate: -50% 0; overflow: visible; }
.tag-string path { fill: none; stroke: #9c8a6a; stroke-width: 2.4; stroke-linecap: round; }
.tag-string .tw { stroke: #d9c9a5; stroke-width: 1.2; stroke-dasharray: 1.6 2.6; }   /* sợi xoắn của dây gai */
.tag-card { position: relative; padding: 52px 28px 30px; border-radius: 12px; --pc: var(--p-manila); background: var(--lit), var(--pc); background-blend-mode: soft-light; color: var(--blue);
  clip-path: polygon(16% 0, 84% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
  -webkit-mask: radial-gradient(circle 8px at 50% 26px, #0000 96%, #000); mask: radial-gradient(circle 8px at 50% 26px, #0000 96%, #000); }   /* lỗ xỏ dây thật: nhìn xuyên xuống mặt bàn */
.tag-ring { position: absolute; left: 50%; top: 26px; z-index: 3; width: 34px; height: 34px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, transparent 8.5px, #d8c38e 9px, #e2d0a0 15px, rgba(0, 0, 0, .12) 16px, transparent 17px); }
.tag-card .lbl { opacity: .6; }
.tag-card h3 { margin: 8px 0 10px; font: 400 clamp(38px, 3.2vw, 50px)/1 var(--script); }
.tag-card p { margin: 0; font-size: 17px; line-height: 1.5; }

/* ==========================================================================
   06 · Hồi âm
   ========================================================================== */
.reply { position: relative; padding: 14svh var(--pad) 16svh; overflow-x: clip; }
.reply-wrap { position: relative; max-width: 1120px; margin: 0 auto; }
.rcard { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); padding: clamp(24px, 3.4vw, 46px); border-radius: 14px; --pc: var(--p-cream); background: var(--lit), var(--pc); background-blend-mode: soft-light; color: var(--blue); box-shadow: var(--sh-2); }
.rcard-left { display: grid; gap: 26px; padding-right: clamp(20px, 3vw, 44px); align-content: start; }
.rcard-right { display: grid; gap: 22px; align-content: start; padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--card-faint); }
.rcard fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rcard legend { padding: 0; margin-bottom: 12px; opacity: .7; }
.r-attend { display: flex; flex-wrap: wrap; gap: 16px; }
.r-attend legend { width: 100%; }
.r-stamp { position: relative; cursor: pointer; }
.r-stamp input, .r-chips input, .r-check input { position: absolute; opacity: 0; pointer-events: none; }
.r-stamp span { --r: 3.2px; --t: 10px; display: grid; place-content: center; gap: 4px; width: clamp(124px, 12vw, 150px); aspect-ratio: 5 / 6; padding: 5px; text-align: center; position: relative; background: #e9e2cf content-box; color: var(--blue); transition: background-color .4s, color .4s, rotate .5s cubic-bezier(.2, .8, .2, 1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 92%, #000 98%) -5px -5px / 10px 10px; mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle var(--r), #0000 92%, #000 98%) -5px -5px / 10px 10px; }
.r-stamp span { background-color: #e9e2cf; }
.r-stamp b { font: italic 400 28px/1 var(--display); font-variation-settings: 'SOFT' 80, 'WONK' 1; }
.r-stamp small { font: 500 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.r-stamp input:checked + span { background-color: var(--blue); color: var(--card); rotate: -5deg; }
.r-stamp-b input:checked + span { background-color: var(--red); rotate: 4deg; }
.r-stamp input:focus-visible + span { outline: 2px solid var(--blue); }
.r-attend.is-bad .r-stamp span { background-color: #f3d6c9; }
.r-field { display: grid; gap: 4px; }
.r-field input, .r-field textarea { width: 100%; padding: 6px 2px; border: 0; border-bottom: 1px dashed rgba(35, 70, 200, .35); border-radius: 0; background: transparent; color: var(--letter); font-size: 22px; line-height: 1.4; }
.r-field textarea { resize: vertical; min-height: 120px; background: repeating-linear-gradient(transparent 0 calc(1.4em - 1px), rgba(35, 70, 200, .18) calc(1.4em - 1px) 1.4em); border-bottom: 0; line-height: 1.4; }
.r-field input:focus, .r-field textarea:focus { outline: none; border-bottom-color: var(--blue); border-bottom-style: solid; }
.r-field ::placeholder { color: rgba(35, 70, 200, .35); }
.r-field.is-bad input { border-bottom: 1.5px solid var(--red); }
.r-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.r-chips legend { width: 100%; }
.r-chips label { cursor: pointer; }
.r-chips span { display: inline-block; padding: 10px 15px; border: 1px solid var(--card-faint); border-radius: 99px; font-size: 14px; line-height: 1; transition: background .3s, color .3s, border-color .3s; }
.r-chips input:checked + span { background-color: var(--blue); color: var(--card); border-color: var(--blue); }
.r-chips input:focus-visible + span { outline: 1.5px solid var(--blue); outline-offset: 3px; }
.r-row { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--card-faint); border-radius: 99px; }
.stepper button { width: 42px; height: 42px; font-size: 20px; color: var(--blue); }
.stepper input { width: 40px; border: 0; padding: 0; text-align: center; background: transparent; color: var(--letter); font: 400 22px/1 var(--hand); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.r-check { position: relative; display: flex; align-items: center; cursor: pointer; font-size: 14px; }
.r-check span::before { content: ''; display: inline-block; vertical-align: -5px; width: 20px; height: 20px; margin-right: 12px; border: 1px solid var(--blue); border-radius: 6px; transition: background .3s; }
.r-check input:checked + span::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23fbf9f2' stroke-width='2'/%3E%3C/svg%3E") center/contain; }
.r-check input:focus-visible + span::before { outline: 1.5px solid var(--blue); outline-offset: 3px; }
.rcard.is-no [data-when-attend] { display: none; }
.r-stampbox { justify-self: end; display: grid; place-items: center; width: 86px; height: 104px; border: 1.5px dashed var(--card-faint); text-align: center; font-size: 9px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.r-addr { font-size: 22px; line-height: 1.5; color: var(--letter); }
.r-addr .lbl { display: block; color: var(--blue); }
.r-error { margin: -8px 0 0; color: var(--red); font-size: 14px; }
.btn-send { width: 100%; padding: 17px; font-size: 11px; }
.btn-send[disabled] { opacity: .6; cursor: progress; }
.r-demo { margin: -8px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .75; }
.r-demo code { font-size: 11.5px; }
.r-flower { position: absolute; left: -92px; top: 18%; z-index: -1; width: clamp(130px, 12vw, 180px); rotate: -32deg; filter: var(--cut-flat); pointer-events: none; }
.pm-sent { position: absolute; right: 9%; top: 6%; width: clamp(130px, 14vw, 190px); color: var(--red); opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.thanks { display: grid; justify-items: center; gap: 10px; max-width: 640px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 30px; border-radius: 14px; position: relative; --pc: var(--p-cream); background: var(--lit), var(--pc); background-blend-mode: soft-light; color: var(--blue); text-align: center; box-shadow: var(--sh-2); }
.thanks img { position: relative; z-index: 3; width: 110px; rotate: -10deg; filter: var(--cut); }
.thanks h3 { margin: 6px 0 0; font: 400 clamp(50px, 5.4vw, 76px)/1 var(--script); }
.thanks p { margin: 0 0 14px; max-width: 38ch; }

/* ==========================================================================
   Hết thư
   ========================================================================== */
.foot { padding: 14svh var(--pad) 30px; text-align: center; }
.foot-end { margin: 0; font: 400 clamp(110px, 17vw, 300px)/.95 var(--script); }
.foot-ps { margin: 4svh auto 0; max-width: 30ch; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; }
.foot-names { margin: 10svh 0 8svh; font: 400 clamp(52px, 7vw, 116px)/1 var(--script); }
.foot-names em { color: var(--red); font-style: normal; }
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 18px; border-top: 1px solid var(--faint); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

.credits { width: min(560px, calc(100vw - 32px)); padding: clamp(26px, 4vw, 44px); border: 0; border-radius: 14px; --pc: var(--p-cream); background: var(--lit), var(--pc); background-blend-mode: soft-light; color: var(--blue); }
.credits::backdrop { background: rgba(6, 12, 40, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.credits h2 { margin: 0 0 20px; font: 400 60px/1 var(--script); }
.credits dl { display: grid; grid-template-columns: 100px 1fr; gap: 12px 18px; margin: 0 0 26px; font-size: 14px; }
.credits dt { font: 500 10px/2 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.credits dd { margin: 0; }

/* ==========================================================================
   Màn hình vừa và nhỏ
   ========================================================================== */
@media (max-width: 1240px) {
  .track-code { display: none; }
}
@media (max-width: 1100px) {
  .env-label { display: none; }
  .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ==========================================================================
   Responsive
   · ≤900px: menu gọn, một cột cho hộ chiếu, thẻ hành lý, vé, thư hồi âm
   · MÀN DỌC (điện thoại, tablet dựng đứng; hoặc cửa sổ rất hẹp): bố cục dọc cho các cảnh ghim. Kích thước tính theo
     --u = min(1vw, .55svh) nên co theo cả bề ngang lẫn chiều cao: máy dài hay máy ngắn đều vừa.
   · ĐIỆN THOẠI (≤700px): cỡ chữ, vé, bảng giờ, thư hồi âm
   · MÀN NGANG THẤP (điện thoại xoay ngang): bố cục ngang gọn theo svh
   · ≤560px: hộ chiếu dạng trang dọc, chữ to hơn
   · Chạm (pointer: coarse): mọi vùng bấm ≥ 44px
   js/core.js dùng đúng câu điều kiện MÀN DỌC cho TT.mobile().
   ========================================================================== */
@media (max-width: 900px) {
  :root { --bar: calc(56px + var(--st)); }
  .nav, .bar > .theme, .track-code, .track-status { display: none; }
  .menu-btn { display: inline-block; }
  .passports { grid-template-columns: 1fr; gap: 7svh; max-width: 620px; }
  .pp:nth-child(2) { margin-top: 0; }
  .visa { top: 50%; left: 66%; }
  .tag-row { grid-template-columns: 1fr; max-width: 460px; }
  .rcard { grid-template-columns: 1fr; }
  .rcard-left { padding-right: 0; }
  .rcard-right { padding-left: 0; border-left: 0; padding-top: 26px; border-top: 1px solid var(--card-faint); }
  .ticket { --stub: 0px; grid-template-columns: 1fr; -webkit-mask: none; mask: none; border-radius: 0 0 20px 20px; }
  .tk-stub { border-left: 0; border-top: 2px dashed var(--card-faint); grid-template-columns: 1fr auto; align-items: center; }
  .tk-stub .btn-stub { grid-column: 1 / -1; }
  .tk-grid-code { width: 84px; height: 84px; grid-row: 1 / 4; grid-column: 2; }
}

/* ---------- MÀN DỌC ---------- */
@media (orientation: portrait) and (max-width: 1100px), (max-width: 560px) {
  /* phong bì: chồng dọc — người gửi + tem, tên, dòng thư mời, cửa sổ ảnh, "Gửi …" */
  .env { --u: min(1vw, .55svh); --ww: calc(var(--u) * 48);
    --wt: calc((var(--bar) + var(--u) * 72 + 100svh - var(--sb) - var(--u) * 26) / 2 - var(--ww) * .625); }
  .env-frame { inset: 6px; border-width: 5px; }
  .env-from { left: 6vw; top: calc(var(--bar) + var(--u) * 2.5); font-size: 10px; letter-spacing: .06em; }
  .env-stamp { right: 6vw; top: calc(var(--bar) + var(--u) * 1.5); width: calc(var(--u) * 23); }
  .pm-env { width: 104%; left: -64%; }
  .pm-waves { width: calc(var(--u) * 18); height: calc(var(--u) * 8); }
  .env-label { display: none; }
  .env-n1, .env-n2 { font-size: calc(var(--u) * 27); }
  .env-n1 { left: 5vw; top: calc(var(--bar) + var(--u) * 17); }
  .env-n2 { left: calc(5vw + var(--u) * 9); top: calc(var(--bar) + var(--u) * 41); }
  .env-amp { left: 5vw; top: calc(var(--bar) + var(--u) * 45); font-size: calc(var(--u) * 12); }
  .env-kicker { left: 6vw; top: calc(var(--bar) + var(--u) * 68); font-size: 10px; letter-spacing: .1em; }
  .env-window, .env-slot { left: calc(100% - 6vw - var(--ww)); top: var(--wt); }
  .env-hoasua { left: calc(100% - 6vw - var(--ww) - var(--u) * 19); top: calc(var(--wt) + var(--ww) * .5); width: calc(var(--u) * 27); }
  .env-to { left: 6vw; bottom: calc(var(--sb) + var(--u) * 6); width: calc(var(--u) * 50); }
  .env-to p { font-size: max(24px, calc(var(--u) * 7)); }
  .env-to i { margin-top: 8px; }
  .env-code { display: none; }
  .env-open { left: auto; right: 6vw; bottom: calc(var(--sb) + var(--u) * 5); translate: none; }
  .env-open span { display: none; }

  .letter { padding: calc(var(--bar) + 1svh) 12px calc(var(--sb) + 2svh); }

  /* bưu thiếp: tiêu đề một dòng trên cùng, thẻ dọc 4:5 ở giữa, hành trình + nút ở dưới */
  .cards { --ct: calc(var(--bar) + 30px + clamp(44px, 11vw, 72px)); --cb: calc(var(--sb) + 2svh + 132px); }
  .cards-head { top: calc(var(--bar) + 8px); left: var(--pad); right: var(--pad); max-width: none; }
  .cards-head .title { font-size: clamp(44px, 11vw, 72px); white-space: nowrap; }
  .cards-head .title br, .cards-hint { display: none; }
  .stack { left: 50%; top: calc(var(--ct) + (100svh - var(--ct) - var(--cb)) / 2); width: min(88vw, 560px, (100svh - var(--ct) - var(--cb) - 12px) * .8); aspect-ratio: 4 / 5; translate: -50% -50%; }
  .pc-front { padding: 3.4cqw 3.4cqw 0; }
  .pc-strip { height: 15cqw; }
  .pc-place { font-size: 10.5cqw; }
  .pc-back { grid-template-columns: 1fr; grid-template-rows: 1.2fr 1px .8fr; gap: 3.4cqw; padding: 6cqw; }
  .pc-l { gap: 2.2cqw; }
  .pc-date { font-size: max(13px, 4cqw); }
  .pc-msg { font-size: max(14px, 5.3cqw); }
  .pc-sign { font-size: 6.4cqw; }
  .pc-r { grid-template-columns: 1fr auto; grid-template-rows: none; align-items: end; gap: 4cqw; }
  .pc-stamp { order: 2; width: 21cqw; align-self: start; }
  .pc-pm { right: 15cqw; top: 2cqw; width: 22cqw; }
  .pc-waves { display: none; }
  .pc-to { font-size: 6cqw; }
  .pc-addr i { height: 5.4cqw; }
  .cards-foot { flex-direction: column; align-items: stretch; gap: 10px; bottom: calc(var(--sb) + 2svh); }
  .route button span { display: none; }
  .route .is-cur button span { display: block; position: absolute; top: 20px; left: 50%; translate: -50% 0; font-size: 10.5px; }
  .cards-ctl { justify-content: center; margin-top: 10px; }

  /* phong bì thứ chín: chữ trên, phong bì dưới */
  .ninth { --u: min(1vw, .55svh); }
  .ninth-text { left: 7vw; right: 7vw; top: calc(var(--bar) + var(--u) * 6); translate: none; font-size: calc(var(--u) * 7); }
  .ninth-text .ninth-big { font-size: calc(var(--u) * 11.5); }
  .env-back { right: auto; left: 50%; top: auto; bottom: calc(var(--sb) + var(--u) * 9); width: calc(var(--u) * 74); translate: -50% 0; }
}

/* ---------- ĐIỆN THOẠI ---------- */
@media (max-width: 700px) {
  .letter-paper { --rule: 1.66rem; padding: 24px 20px 26px 40px; rotate: -.6deg;
    background: linear-gradient(90deg, transparent 30px, rgba(212, 71, 47, .5) 30px 31px, transparent 31px), repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), rgba(35, 70, 200, .16) calc(var(--rule) - 1px) var(--rule)), var(--lit), var(--pc);
    background-position: 0 0, 0 10px, 0 0, 0 0; }
  .letter-date { font-size: 15px; }
  .letter-hi { font-size: 22px; }
  .letter-body { font-size: 16.5px; }
  .letter-sign { font-size: 18px; padding-right: 54px; }
  .letter-names { font-size: 34px; }
  .letter-seal { width: 72px; left: 8px; bottom: -30px; }
  .letter-flower { width: 58px; right: -6px; top: -60px; }

  .sec-head .title-i { padding-left: 0; }
  .print { padding: 10px 10px 54px; }
  .tape { width: 92px; height: 26px; }
  .tape-a { left: -14px; top: 10px; }
  .tape-b { right: -14px; top: 10px; }

  .tk-main { padding: 26px 22px 22px; }
  .tk-big { font-size: 19vw; }
  .tk-grid dd { font-size: 18px; }
  .board-row { --fw: min(46px, calc((100vw - 2 * var(--pad) - 76px) / 9)); gap: 10px; }
  .flaps { gap: 4px; }
  .flap { width: var(--fw); height: calc(var(--fw) * 1.42); font-size: calc(var(--fw) * .74); border-radius: 5px; }
  .families { grid-template-columns: 1fr; gap: 20px; }
  .families svg { justify-self: center; }
  .r-row { grid-template-columns: 1fr; }
  .r-stamp small { font-size: 10px; }
  .r-flower { left: auto; right: 18px; top: -86px; width: 96px; rotate: 14deg; }
  .foot { padding-bottom: calc(24px + var(--sb)); }
  .foot-row { justify-content: center; }
}

/* ---------- MÀN NGANG THẤP (điện thoại xoay ngang) ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --bar: calc(48px + var(--st)); }
  .env { --ww: min(26vw, 46svh); }
  .env-frame { inset: 6px; border-width: 5px; }
  .env-from, .env-label, .env-code { display: none; }
  .env-stamp { top: calc(var(--bar) + 2svh); right: max(4vw, var(--sr)); width: 15svh; }
  .env-n1, .env-n2 { font-size: 30svh; }
  .env-n1 { left: max(5vw, var(--sl)); top: calc(var(--bar) + 1svh); }
  .env-n2 { left: calc(max(5vw, var(--sl)) + 8svh); top: calc(var(--bar) + 25svh); }
  .env-amp { left: max(5vw, var(--sl)); top: calc(var(--bar) + 28svh); font-size: 13svh; }
  .env-kicker { left: max(5vw, var(--sl)); top: calc(var(--bar) + 55svh); font-size: 10px; }
  .env-window, .env-slot { left: 56%; top: calc(var(--bar) + (100svh - var(--bar) - var(--ww) * 1.25) / 2); }
  .env-hoasua { left: calc(56% - 7vw); top: 50svh; width: 11vw; }
  .env-to { left: max(5vw, var(--sl)); bottom: 5svh; width: 36vw; }
  .env-to p { font-size: max(22px, 7svh); }
  .env-to i { margin-top: 6px; }
  .env-open { left: auto; right: max(4vw, var(--sr)); bottom: 5svh; translate: none; }
  .env-open span { display: none; }

  .letter { padding: calc(var(--bar) + 1svh) 16px 2svh; }
  /* màn thấp: tờ thư rộng ra, dòng kẻ dày hơn để chỉ phải thu nhỏ ít */
  .letter-paper { width: min(980px, 92vw); --rule: 1.5rem; padding: 16px 28px 16px 66px; }
  .letter-date { font-size: 15px; }
  .letter-hi { font-size: 20px; }
  .letter-body { font-size: 16px; }
  .letter-sign { font-size: 17px; }
  .letter-names { font-size: 30px; }

  .cards-head { top: calc(var(--bar) + 6px); max-width: 30vw; }
  .cards-head .title { font-size: 40px; }
  .cards-hint { display: none; }
  .stack { left: 62%; top: calc(var(--bar) + (100svh - var(--bar) - 70px) / 2); width: min(56vw, (100svh - var(--bar) - 86px) * 1.5); translate: -50% -50%; }
  .cards-foot { bottom: calc(var(--sb) + 6px); gap: 14px; }
  .route button span { display: none; }
  .route .is-cur button span { display: block; position: absolute; top: 20px; left: 50%; translate: -50% 0; }
  .cards-ctl { gap: 6px; }
  .cards-ctl button, .cards-ctl a { padding: 0 12px; }

  .ninth-text { left: max(6vw, var(--sl)); max-width: 50vw; font-size: 6.5svh; }
  .ninth-text .ninth-big { font-size: 12.5svh; }
  .env-back { right: max(5vw, var(--sr)); width: min(36vw, 52svh * 1.5); }
}

/* ---------- hộ chiếu trên điện thoại: trang dọc, chữ to ---------- */
@media (max-width: 560px) {
  .pp { aspect-ratio: auto; padding: 5cqw 5cqw 4.5cqw; border-radius: 12px; }
  .pp-head { flex-wrap: wrap; gap: 2px 12px; font-size: max(10px, 2.9cqw); padding-bottom: 2.6cqw; }
  .pp-body { grid-template-columns: 34% 1fr; gap: 5cqw; margin-top: 4cqw; }
  .pp-fields { gap: 2.4cqw 4cqw; }
  .pp-fields dt { font-size: max(10px, 2.9cqw); }
  .pp-fields dd { font-size: 4.6cqw; }
  .pp-fields .sig dd { font-size: 10cqw; }
  .pp-ghost { display: none; }
  .pp-mrz { position: static; margin-top: 4cqw; font-size: 2.75cqw; letter-spacing: 0; }
  .visa { width: 36vw; left: 72%; }
}

/* ---------- chạm: vùng bấm ≥ 44px ---------- */
@media (pointer: coarse) {
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-btn, .menu-head button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; }
  .theme { min-height: 44px; }
  .btn { min-height: 46px; }
  .cards-ctl button, .cards-ctl a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
  .route button { min-width: 40px; min-height: 44px; align-content: start; }
  .foot-row .link { display: inline-flex; align-items: center; min-height: 44px; }
  .r-chips span { padding: 14px 16px; }
  .r-check { min-height: 44px; }
  .stepper button { width: 46px; height: 46px; }
  .env-open svg { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}