/* mizustory.vn, hướng "Giấy & Mực": một xưởng giấy thiệp. Nền giấy ngà có vân sợi, mực nâu đen, điểm nhấn đỏ sáp;
   đồ vật thật của ngày cưới (phong bì, dấu sáp, tem, hoa ép, nhẫn) làm thành phần giao diện; nắng xuyên lá phủ lên mặt bàn.
   Màu lấy từ chính các thiệp (nắng mật trong phòng 3D, giấy ngà, sáp đỏ). Chân trang là mặt sau phong bì, gắn dấu sáp. */
:root {
  --paper: #f3ede2;
  --paper-2: #e9e0cf;
  --card: #f9f5ec;
  --kraft: #e4d6bd;
  --kraft-2: #d8c6a6;
  --ink: #1d1611;
  --ink-2: #5e4d3c;
  --muted: #7a6a58;
  --line: rgba(29, 22, 17, .14);
  --line-2: rgba(29, 22, 17, .3);
  --accent: #8c1d18;
  --honey: #c0913f;
  --stamp-blue: #2443a8;
  --ok: #2f6b45;
  --warn: #9a6a12;
  --serif: 'Newsreader', 'Noto Serif', 'Times New Roman', serif;
  --hand: 'Playwrite VN', 'Segoe Script', cursive;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(16px, 2.4vw, 36px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --bar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* vân sợi giấy dó (không phải hạt nhiễu): một lớp cố định, rất nhạt */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(m/fibre.webp) 0 0 / 640px 640px repeat; opacity: .38; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
code, .code { font: 500 12.5px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--paper-2); padding: 2px 6px; border-radius: 3px; word-break: break-all; }

/* chữ-nút: gạch chân mảnh chạy từ trái sang khi rê chuột */
.link { position: relative; display: inline-block; white-space: nowrap; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.link:hover::after, .link[aria-pressed='true']::after, .link.is-on::after { transform: scaleX(1); transform-origin: left; }
.link.under::after { transform: scaleX(1); opacity: .35; }
.link.under:hover::after { opacity: 1; }
[data-magnetic] { will-change: transform; }
.arrow { display: inline-block; transition: transform .45s var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

/* nút chính: khối mực, nền giấy lướt vào từ dưới khi rê chuột */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden; isolation: isolate;
  padding: 14px 22px; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans); white-space: nowrap; cursor: pointer; border: 1px solid var(--ink);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover::before { transform: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost::before { background: var(--ink); }
.btn.ghost:hover { color: var(--paper); }
.btn.small { padding: 9px 14px; font-size: 13px; }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
.danger { color: var(--accent); }
.inline { display: inline; }

/* ---------- màn mở đầu ---------- */
.loader { display: none; }
.js .loader { position: fixed; inset: 0; z-index: 100; display: block; background: var(--paper); animation: loader-fail 0s 9s forwards; }
@keyframes loader-fail { to { visibility: hidden; } }
.loader__frame { position: absolute; left: 50%; top: 50%; width: clamp(200px, 21vw, 340px); aspect-ratio: 16 / 10; transform: translate(-50%, -50%); overflow: hidden; background: var(--paper-2); }
.loader__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loader__name { position: absolute; left: 50%; top: calc(50% + clamp(200px, 21vw, 340px) * .3125 + 16px); transform: translateX(-50%); color: var(--muted); white-space: nowrap; }
.loader__count { position: absolute; left: var(--pad); bottom: calc(var(--pad) * .2); font: 300 clamp(96px, 17vw, 280px)/1 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow: hidden; }
.loader__count span { display: inline-block; }
.loader__mark { position: absolute; left: var(--pad); top: 20px; font-weight: 500; font-size: 15px; }
.loader__tag { position: absolute; right: var(--pad); top: 20px; color: var(--ink-2); }

/* ---------- con trỏ ---------- */
.cursor { display: none; }
.has-cursor .cursor { position: fixed; left: 0; top: 0; z-index: 90; display: block; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.has-cursor .cursor.is-label { mix-blend-mode: normal; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: currentColor; transition: opacity .2s; }
.cursor__ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; border: 1px solid currentColor; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s, border-color .3s, opacity .3s; }
.cursor.is-link .cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor.is-link .cursor__dot { opacity: 0; }
.cursor.is-label .cursor__ring { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--ink); border-color: var(--ink); }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor__label { font-size: 13px; color: var(--paper); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .45s var(--ease); text-align: center; line-height: 1.2; }
.cursor.is-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-hidden { opacity: 0; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-cursor], .has-cursor summary { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.has-cursor .viewer, .has-cursor .viewer a, .has-cursor .viewer button { cursor: pointer; }
.has-cursor .viewer input { cursor: text; }

/* ---------- thanh trên ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); transition: transform .6s var(--ease); }
.bar.is-hidden { transform: translateY(-100%); }
.bar::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(243, 237, 226, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: opacity .3s; }
.bar.is-stuck::before, .pg-app .bar::before { opacity: 1; }
.bar__mark { font-weight: 500; font-size: 15px; letter-spacing: -.01em; justify-self: start; }
.bar__nav { display: flex; gap: 26px; color: var(--ink-2); }
.bar__nav a:hover, .bar__nav a.is-on { color: var(--ink); }
.bar__me { justify-self: end; display: flex; align-items: center; gap: 22px; }
.bar__me form { display: inline; }
.bar__cta { position: relative; padding: 9px 14px; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; }
.bar__cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease); }
.bar__cta:hover::before { transform: none; }
.bar__burger { display: none; width: 34px; height: 34px; position: relative; }
.bar__burger span { position: absolute; left: 6px; right: 6px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.bar__burger span:first-child { top: 13px; }
.bar__burger span:last-child { top: 20px; }
.menu-open .bar__burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .bar__burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 35; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--bar-h) + 24px) var(--pad) 32px; clip-path: inset(0 0 100% 0); transition: clip-path .8s cubic-bezier(.76, 0, .24, 1); visibility: hidden; }
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-open .bar { color: var(--paper); }
.menu-open .bar::before { opacity: 0; }
.menu-open .bar__cta { background: var(--paper); color: var(--ink); }
.menu a.menu__big { display: block; font: 300 clamp(44px, 12vw, 96px)/1.02 var(--serif); letter-spacing: -.03em; overflow: hidden; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 36px; color: rgba(241, 239, 234, .65); }

/* ---------- phim chiếu đầu trang ---------- */
.reel { overflow-x: clip; --top: calc(var(--bar-h) + 12px); --bottom: clamp(20px, 3vh, 36px); display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: clamp(24px, 3vw, 56px); min-height: 100vh; min-height: 100svh; padding: var(--top) var(--pad) var(--bottom); }
.reel__side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-top: 4px; min-width: 0; }
.reel__kicker { color: var(--ink-2); max-width: 22em; }
.reel__kicker b { font-weight: 500; color: var(--ink); }
.reel__count { display: flex; font-variant-numeric: tabular-nums; color: var(--muted); margin-bottom: 14px; }
.roll { display: inline-block; overflow: hidden; vertical-align: top; }
.roll span { display: inline-block; }
.reel__of { margin: 0 .35em; opacity: .6; }
.reel__title { font: 400 clamp(42px, 4.8vw, 82px)/.98 var(--serif); letter-spacing: -.025em; padding-bottom: .08em; text-wrap: balance; }
#reel-name { display: block; }
.reel__line { margin-top: 16px; max-width: 22em; color: var(--ink-2); }
.reel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 22px; }
.reel__badge { display: inline-block; margin-top: 14px; color: var(--ink-2); }
.reel__badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 2px; }
.reel__badge.is-custom::before { background: var(--muted); }
.reel__controls { display: flex; gap: 22px; color: var(--ink-2); }
.reel__main { align-self: end; width: min(calc((100vw - 2 * var(--pad)) * .72), calc((100svh - var(--top) - var(--bottom) - 26px) * 1.6)); }
.reel__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1a1916; touch-action: pan-y; cursor: pointer; }
.reel__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.reel__layer.is-on { opacity: 1; }
.reel__layer img, .reel__layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__layer video { opacity: 0; transition: opacity .5s; }
.reel__layer video.is-live { opacity: 1; }
.reel__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.gl .reel__gl { opacity: 1; }
.reel__ticks { display: flex; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.reel__ticks li { flex: 1; }
.reel__ticks button { position: relative; display: block; width: 100%; height: 22px; }
.reel__ticks button::before, .reel__ticks button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; }
.reel__ticks button::before { background: var(--line); transition: background .2s, transform .3s var(--ease); }
.reel__ticks button:hover::before { background: var(--ink-2); transform: scaleY(3); }
.reel__ticks button::after { background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.reel__ticks button.is-done::after { --p: 1; opacity: .35; }

/* ---------- đoạn giới thiệu, chữ đổ mực theo cuộn ---------- */
.intro { padding: clamp(110px, 15vw, 240px) var(--pad) clamp(70px, 9vw, 150px); }
.intro__text { max-width: 19em; font: 400 clamp(30px, 4.1vw, 66px)/1.1 var(--serif); letter-spacing: -.018em; }
.pill { display: inline-block; position: relative; width: 1.85em; height: .8em; margin: 0 .08em 0 .16em; vertical-align: -.04em; border-radius: .4em; overflow: hidden; background: var(--paper-2); }
.pill video, .pill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px 36px; margin-top: clamp(32px, 3.4vw, 56px); color: var(--ink-2); }

/* ---------- tiêu đề mục có vạch kẻ chạy ---------- */
.sec { padding: 0 var(--pad) clamp(100px, 12vw, 200px); }
.sec__head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; margin-bottom: clamp(40px, 5vw, 84px); flex-wrap: wrap; }
.sec__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; }
.sec__head h2 { font: 500 14px/1.5 var(--sans); }
.sec__head sup { font-size: 10px; color: var(--muted); margin-left: 2px; }
.sec__tools { display: flex; gap: 26px; color: var(--ink-2); flex-wrap: wrap; }
.sec__tools > span { display: flex; gap: 16px; }
.sec__tools .link[aria-pressed='true'] { color: var(--ink); }
.big { font: 300 clamp(40px, 6.4vw, 108px)/.98 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.big em { font-style: italic; }

/* ---------- cách làm: ba dòng lớn, khung clip bên phải ---------- */
.how__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--line); }
.how__row:last-child { border-bottom: 1px solid var(--line); }
.how__step { color: var(--muted); margin-bottom: 14px; }
.how__title { font: 400 clamp(30px, 3.6vw, 56px)/1.05 var(--serif); letter-spacing: -.022em; }
.how__text { margin-top: 14px; max-width: 34em; color: var(--ink-2); font-size: 15px; }
.how__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.how__media video, .how__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- index tác phẩm ---------- */
.works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(64px, 9vw, 150px); align-items: start; }
.works[hidden], .list[hidden] { display: none; }
.work:nth-child(6n + 1) { grid-column: 1 / span 7; }
.work:nth-child(6n + 2) { grid-column: 9 / span 4; align-self: end; }
.work:nth-child(6n + 3) { grid-column: 2 / span 4; }
.work:nth-child(6n + 4) { grid-column: 7 / span 6; margin-top: clamp(40px, 9vw, 160px); }
.work:nth-child(6n + 5) { grid-column: 1 / span 6; }
.work:nth-child(6n + 6) { grid-column: 8 / span 5; margin-top: clamp(60px, 13vw, 230px); }
.work { margin: 0; cursor: pointer; }
.work[hidden] { display: none; }
.work__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); transform: skewY(var(--skew, 0deg)); transform-origin: center; }
.work__inner { position: absolute; left: 0; right: 0; top: -7%; height: 114%; }
.work__zoom { position: absolute; inset: 0; }
.work__inner img, .work__inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work__inner img { transition: transform 1.6s var(--ease); }
.work__inner video { opacity: 0; transition: opacity .45s; }
.work.is-playing .work__inner video { opacity: 1; }
.work:hover .work__inner img { transform: scale(1.03); }
.work__flag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 9px; background: var(--paper); color: var(--ink); font-size: 12px; }
.work__cap { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 8px; padding-top: 14px; }
.work__no { grid-row: 1 / span 4; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .55em; }
.work__name { font: 400 clamp(24px, 2.1vw, 32px)/1.12 var(--serif); letter-spacing: -.012em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .55s var(--ease); justify-self: start; }
.work:hover .work__name { background-size: 100% 1px; }
.work__line { margin-top: 4px; color: var(--ink-2); }
.work__meta { margin-top: 2px; color: var(--muted); }
.work__act { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 18px; }
.work__act a { color: var(--ink); }

.list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) minmax(0, 14em) auto; align-items: baseline; gap: 16px; padding: clamp(14px, 1.6vw, 24px) 0; border-top: 1px solid var(--line); cursor: pointer; transition: opacity .4s var(--ease); }
.row[hidden] { display: none; }
.list:hover .row:not(:hover) { opacity: .28; }
.row__no { color: var(--muted); font-variant-numeric: tabular-nums; }
.row__name { font: 400 clamp(34px, 5vw, 86px)/1 var(--serif); letter-spacing: -.025em; transition: transform .6s var(--ease); }
.row:hover .row__name { transform: translateX(.18em); }
.row__tags { color: var(--muted); }
.row__mode { color: var(--ink-2); white-space: nowrap; }
.float { position: fixed; left: 0; top: 0; z-index: 41; width: clamp(260px, 25vw, 420px); aspect-ratio: 16 / 10; pointer-events: none; visibility: hidden; }
.float__inner { position: absolute; inset: 0; overflow: hidden; background: #1a1916; }
.float__inner img, .float__inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.float__inner video { opacity: 0; transition: opacity .3s; }
.float__inner video.is-live { opacity: 1; }

/* ---------- tính năng: tiêu đề dính bên trái, danh sách bên phải ---------- */
.feats { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.feats__title { position: sticky; top: calc(var(--bar-h) + 24px); }
.feats__list { margin: 0; padding: 0; list-style: none; }
.feats__list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.feats__list li:last-child { border-bottom: 1px solid var(--line); }
.feats__list h3 { font: 400 clamp(22px, 1.9vw, 28px)/1.15 var(--serif); letter-spacing: -.01em; }
.feats__list p { color: var(--ink-2); font-size: 14.5px; }

/* ---------- bảng giá ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px clamp(16px, 2vw, 32px) 30px 0; }
.plan + .plan { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.plan__name { color: var(--ink-2); }
.plan__price { font: 300 clamp(44px, 5vw, 84px)/.95 var(--serif); letter-spacing: -.035em; font-variant-numeric: lining-nums; }
.plan__price small { font: 400 15px/1 var(--sans); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.plan__line { font: 400 20px/1.3 var(--serif); max-width: 18em; }
.plan ul { margin: 6px 0 0; padding: 0; list-style: none; color: var(--ink-2); }
.plan li { padding: 8px 0; border-top: 1px solid var(--line); }
.plan__go { margin-top: auto; padding-top: 10px; }
.plans-note { margin-top: 26px; color: var(--muted); max-width: 46em; }

/* ---------- khối làm riêng: clip tràn khung, chữ đè ---------- */
.spot { position: relative; margin: 0 var(--pad) clamp(100px, 12vw, 200px); height: min(92vh, 860px); overflow: hidden; background: #1a1916; color: var(--paper); }
.spot__media { position: absolute; inset: -8% 0; }
.spot__media video, .spot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 8, .78), rgba(10, 9, 8, .1) 58%, rgba(10, 9, 8, .25)); }
.spot__text { position: absolute; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.spot__text .big { color: var(--paper); max-width: 11em; }
.spot__text p { color: rgba(241, 239, 234, .78); max-width: 30em; margin-top: 16px; font-size: 15px; }
.spot__go { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }

/* ---------- hỏi đáp ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: clamp(18px, 2vw, 28px) 0; font: 400 clamp(22px, 2.4vw, 38px)/1.15 var(--serif); letter-spacing: -.015em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 28px; height: 28px; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 4px; right: 4px; top: 13.5px; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq__a { max-width: 44em; padding: 0 0 26px; color: var(--ink-2); font-size: 15.5px; }

/* ---------- cuối trang ---------- */
.foot { position: relative; overflow: hidden; background: var(--kraft); color: var(--ink); padding: clamp(150px, 15vw, 230px) var(--pad) 0; }
.foot::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(m/fibre.webp) 0 0 / 640px 640px repeat; opacity: .55; }
.foot__flap { position: absolute; left: 0; right: 0; top: 0; height: clamp(110px, 12vw, 190px); filter: drop-shadow(0 6px 10px rgba(60, 40, 15, .16)); pointer-events: none; }
.foot__flap i { position: absolute; inset: 0; background: var(--kraft-2); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.foot__flap i::after { content: ''; position: absolute; inset: 0; background: url(m/fibre.webp) 0 0 / 640px 640px repeat; opacity: .5; }
.foot__seal { position: absolute; left: 50%; top: calc(clamp(110px, 12vw, 190px) - clamp(46px, 4.4vw, 66px)); width: clamp(92px, 8.8vw, 132px); translate: -50% 0; transform: rotate(-8deg); filter: drop-shadow(0 6px 8px rgba(60, 10, 5, .3)); }
.foot__cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-bottom: clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line-2); }
.foot__cta .big { max-width: 12em; }
.foot__hand { display: block; margin-bottom: 18px; font: 400 clamp(15px, 1.3vw, 19px)/2 var(--hand); color: var(--accent); }
.foot__cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 0; color: var(--ink-2); }
.foot__cols p { margin-bottom: 6px; }
.foot__cols a:hover { color: var(--ink); }
.foot__cols b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.foot__mark { position: relative; margin-top: clamp(30px, 5vw, 80px); font: 300 20.4vw/.8 var(--serif); letter-spacing: -.045em; white-space: nowrap; transform: translateY(.04em); user-select: none; color: var(--ink); }
.foot__mark .ch { display: inline-block; }
.zalo-fab { position: fixed; right: 18px; bottom: 18px; z-index: 30; padding: 11px 16px; background: var(--ink); color: var(--paper); font-weight: 500; }

/* ---------- xem thử ---------- */
.viewer { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; display: none; flex-direction: column; overflow: hidden; }
.viewer[open] { display: flex; }
.viewer::backdrop { background: transparent; }
.viewer__bg { position: absolute; inset: 0; background: #0d0c0b; }
.viewer__bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; padding: 14px var(--pad); }
.viewer__title { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.viewer__title span { font: 400 22px/1.1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.viewer__title a { color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__guest { display: flex; align-items: baseline; gap: 12px; }
.viewer__guest[hidden] { display: flex; visibility: hidden; }
.viewer__guest label { color: rgba(255, 255, 255, .55); }
.viewer__guest input { width: 220px; padding: 4px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); border-radius: 0; background: none; color: #fff; font: inherit; }
.viewer__guest input::placeholder { color: rgba(255, 255, 255, .35); }
.viewer__guest input:focus { outline: none; border-bottom-color: #fff; }
.viewer__tools { justify-self: end; display: flex; align-items: center; gap: 22px; }
.viewer__device { display: flex; gap: 14px; }
.viewer__device .link { color: rgba(255, 255, 255, .55); }
.viewer__device .link[aria-pressed='true'] { color: #fff; }
.viewer__go { padding: 9px 14px; background: var(--paper); color: var(--ink); font-weight: 500; white-space: nowrap; }
.viewer__go:hover { background: var(--accent); color: var(--paper); }
.viewer__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 var(--pad) var(--pad); overflow: hidden; }
.viewer__frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.viewer__stage[data-device='phone'] .viewer__frame { width: 390px; height: 844px; flex: none; border-radius: 40px; outline: 8px solid #262420; transform: scale(var(--s, 1)); }
.viewer iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.viewer__cover { position: absolute; inset: 0; background: #0d0c0b; transition: opacity .6s var(--ease); }
.viewer__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer__status { position: absolute; left: 16px; bottom: 14px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.viewer__cover.is-done { opacity: 0; pointer-events: none; }
.viewer__fly { position: fixed; left: 0; top: 0; z-index: 5; object-fit: cover; pointer-events: none; visibility: hidden; }

/* ---------- trang nội dung (bảng giá, hỏi đáp, điều khoản, form…) ---------- */
.page { padding: calc(var(--bar-h) + clamp(40px, 7vw, 120px)) var(--pad) clamp(90px, 11vw, 180px); }
.page__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: clamp(48px, 6vw, 100px); }
.page__kicker { color: var(--ink-2); }
.page__title { font: 300 clamp(48px, 8vw, 132px)/.95 var(--serif); letter-spacing: -.04em; text-wrap: balance; }
.page__lead { max-width: 30em; font: 400 clamp(20px, 2vw, 28px)/1.35 var(--serif); letter-spacing: -.005em; color: var(--ink-2); }
.page__cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.page__aside { position: sticky; top: calc(var(--bar-h) + 24px); color: var(--ink-2); }
.prose { max-width: 42em; font-size: 15.5px; line-height: 1.7; }
.prose h2 { font: 400 clamp(26px, 2.6vw, 38px)/1.12 var(--serif); letter-spacing: -.015em; margin: 1.8em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 1em; }
.prose ul { padding-left: 1.1em; }
.prose a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.crumb { margin-bottom: clamp(16px, 2.2vw, 34px); color: var(--ink-2); }
.crumb a:hover { color: var(--ink); }

/* trang mẫu */
.tp { padding: calc(var(--bar-h) + clamp(24px, 4vw, 64px)) var(--pad) clamp(90px, 11vw, 180px); }
.tp__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: clamp(24px, 3vw, 44px); }
.tp__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1a1916; }
.tp__screen video, .tp__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.tp__info dt { color: var(--muted); margin-bottom: 6px; }
.tp__info dd { margin: 0; font: 400 20px/1.3 var(--serif); }
.tp__more { margin-top: clamp(70px, 9vw, 140px); }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26vw, 400px); gap: clamp(16px, 2vw, 28px); overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; }
.strip a { display: grid; gap: 10px; }
.strip img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--paper-2); transition: transform 1.2s var(--ease); }
.strip a:hover img { transform: scale(1.03); }
.strip span { font: 400 22px/1.15 var(--serif); }
.strip small { color: var(--muted); font-size: 13px; }

/* ---------- form ---------- */
.narrow { max-width: 520px; }
.form { display: grid; gap: 18px; max-width: 640px; }
.form label { display: grid; gap: 7px; color: var(--ink-2); font-size: 13px; }
.form label small { color: var(--muted); }
.form input, .form select, .form textarea, .search input, .stack input, .stack select, .inline-label input, .msg-tpl textarea {
  width: 100%; font: 400 15px/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 10px 0; transition: border-color .3s;
}
.form textarea, .msg-tpl textarea { border: 1px solid var(--line-2); padding: 12px; background: var(--card); resize: vertical; }
.form select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23141311'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 20px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form input[disabled] { color: var(--muted); }
.form label.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.form label.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--ink); }
.form .btn { justify-self: start; margin-top: 6px; }
fieldset { border: 0; margin: 0; padding: 26px 0 8px; border-top: 1px solid var(--line); display: grid; gap: 18px; }
legend { float: left; width: 100%; padding: 0 0 4px; font: 400 clamp(22px, 2vw, 30px)/1.15 var(--serif); letter-spacing: -.01em; }
legend + * { clear: both; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.g3.tight { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.3fr); }
.g2.top { align-items: start; }
.or { display: flex; align-items: center; gap: 14px; color: var(--muted); margin: 26px 0 16px; max-width: 520px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.alt-login { display: grid; gap: 10px; max-width: 520px; margin-bottom: 22px; }
.alt-login .btn { justify-content: center; }
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.auth__art { display: flex; flex-direction: column; gap: 22px; padding: calc(var(--bar-h) + 6px) 0 var(--pad) var(--pad); }
.auth__frame { position: relative; flex: 1; min-height: 420px; overflow: hidden; background: #1a1916; }
.auth__frame video, .auth__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth__art p { max-width: 20ch; color: var(--ink); font: 300 clamp(26px, 2.4vw, 40px)/1.08 var(--serif); letter-spacing: -.02em; }
.auth__art small { display: block; margin-top: 8px; color: var(--ink-2); font: 400 13px/1.4 var(--sans); letter-spacing: 0; }
.auth__body { padding: calc(var(--bar-h) + clamp(32px, 6vw, 90px)) var(--pad) 60px; display: flex; flex-direction: column; justify-content: center; }
.auth__body h1 { font: 300 clamp(44px, 5vw, 80px)/.98 var(--serif); letter-spacing: -.035em; margin-bottom: 16px; }
.auth__body > p { color: var(--ink-2); }
.auth__body .form { margin-top: 28px; }
.auth__switch { margin-top: 22px; color: var(--ink-2); }
.auth__switch a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- thông báo ---------- */
.flash { position: fixed; left: 50%; top: calc(var(--bar-h) + 12px); z-index: 45; transform: translateX(-50%); max-width: min(640px, calc(100vw - 32px)); padding: 12px 18px; background: var(--ink); color: var(--paper); box-shadow: 0 10px 40px rgba(0, 0, 0, .18); animation: flash-in .6s var(--ease) both, flash-out .5s 6s forwards; }
.flash.err { background: var(--accent); }
.flash.warn { position: static; transform: none; animation: none; box-shadow: none; max-width: none; background: transparent; color: var(--ink); border-left: 2px solid var(--warn); padding: 10px 14px; margin: 0 0 22px; }
@keyframes flash-in { from { opacity: 0; transform: translate(-50%, -14px); } }
@keyframes flash-out { to { opacity: 0; visibility: hidden; } }

/* ---------- khu vực của khách và CRM ---------- */
.app { padding: calc(var(--bar-h) + clamp(28px, 4vw, 56px)) var(--pad) 120px; max-width: 1360px; margin: 0 auto; }
.app.narrow-app { max-width: 920px; }
.app h1 { font: 300 clamp(38px, 4.6vw, 72px)/1 var(--serif); letter-spacing: -.03em; }
.app h1 .muted { font-size: .5em; letter-spacing: -.01em; }
.app h2 { font: 400 clamp(24px, 2.4vw, 34px)/1.15 var(--serif); letter-spacing: -.015em; margin: 44px 0 14px; }
.app h3 { font: 500 14px/1.4 var(--sans); margin-bottom: 8px; }
.app .lead { font: 400 clamp(19px, 1.8vw, 24px)/1.4 var(--serif); color: var(--ink-2); max-width: 34em; margin: 14px 0 22px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.head-row h1, .head-row h2 { margin: 0; }
.acts { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; color: var(--ink-2); }
.acts a, .acts .linkish { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.acts a:hover { color: var(--ink); text-decoration-color: currentColor; }
.acts a.btn { text-decoration: none; color: var(--paper); }
.card { background: var(--card); border: 1px solid var(--line); padding: 22px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 22px; }
.sites { display: grid; gap: 0; }
.site { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.site__thumb { display: block; overflow: hidden; background: var(--line); aspect-ratio: 16 / 10; }
.site__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.site:hover .site__thumb img { transform: scale(1.06); }
.site h2 { margin: 0 0 6px; font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); }
.site p { color: var(--ink-2); margin: 2px 0; }
.site .acts { justify-content: flex-end; }
.shot { margin: 22px 0; }
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.checkout__main { order: -1; max-width: 560px; }
.checkout__art { position: sticky; top: calc(var(--bar-h) + 24px); }
.checkout__art .shot { margin: 0 0 12px; }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.tbl { overflow-x: auto; margin: 14px 0 28px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 0 14px 10px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(29, 22, 17, .03); }
td.num { text-align: right; white-space: nowrap; }
tr.total td { font-weight: 600; border-top: 1px solid var(--ink); }
.row-acts { display: flex; gap: 14px; flex-wrap: wrap; white-space: nowrap; }
.clip { max-width: 320px; max-height: 6em; overflow: auto; }
.strike { text-decoration: line-through; }
.badge { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; font-family: var(--sans); letter-spacing: 0; vertical-align: middle; }
.badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: var(--muted); vertical-align: 2px; }
.s-published::before, .s-paid::before, .s-active::before, .s-won::before { background: var(--ok); }
.s-pending::before, .s-draft::before, .s-new::before, .s-due::before { background: var(--honey); }
.s-cancelled::before, .s-lost::before, .s-disabled::before, .s-archived::before { background: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 22px 0 30px; }
.stats div { padding: 18px 18px 14px 0; }
.stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.stats dt { font: 300 clamp(34px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -.03em; }
.stats dd { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; }
.stats.small dt { font-size: clamp(24px, 2.2vw, 32px); }
.filters { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); margin: 0 0 16px; }
.filters a.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.search { display: flex; gap: 14px; max-width: 520px; margin-bottom: 14px; align-items: end; }
.stack { display: grid; gap: 6px; min-width: 190px; }
.inline-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.inline-label input { width: 56px; padding: 4px 0; }
.copy-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* trình sửa thiệp */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(28px, 4vw, 64px); align-items: start; }
.editor-form { max-width: none; }
.editor-preview { position: sticky; top: calc(var(--bar-h) + 16px); display: grid; gap: 12px; color: var(--ink-2); }
.phone { width: 390px; height: min(780px, calc(100vh - var(--bar-h) - 120px)); border: 10px solid var(--ink); border-radius: 38px; overflow: hidden; background: #000; }
.phone iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.editor-nav { position: sticky; top: var(--bar-h); z-index: 5; display: flex; gap: 18px; overflow-x: auto; padding: 12px 0; margin-bottom: 8px; background: var(--paper); border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; scrollbar-width: none; }
.editor-nav a:hover { color: var(--ink); }
.editor-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); padding-right: 48px; }
.form label.check span a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lost { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2vw, 26px); }
.lost .crumb, .lost .cta { margin: 0; }
td code { white-space: nowrap; }
.lost .page__title { max-width: 12ch; }
.save-bar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 18px; align-items: center; padding: 16px 0; background: linear-gradient(transparent, var(--paper) 35%); }
.story-item { position: relative; display: grid; gap: 14px; padding: 18px 0 8px 46px; border-top: 1px dashed var(--line); }
.story-item .idx { position: absolute; left: 0; top: 16px; font: 300 30px/1 var(--serif); color: var(--muted); }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; }
.ph { display: grid; gap: 8px; align-content: start; }
.ph-img { position: relative; overflow: hidden; background: var(--paper-2); border: 1px dashed var(--line-2); display: grid; place-items: center; max-height: 300px; }
.ph-img img { width: 100%; height: 100%; object-fit: cover; }
.ph-img span { font-size: 12px; color: var(--muted); padding: 12px; text-align: center; }
.ph p { font-size: 13px; }
.ph label.btn { justify-self: start; }
.story-item .ph { grid-template-columns: 120px minmax(0, 1fr); align-items: start; column-gap: 16px; }
.story-item .ph .ph-img { grid-row: span 4; }
.slug-row { display: flex; align-items: baseline; gap: 6px; }
.slug-row span { color: var(--muted); white-space: nowrap; }
.msg-tpl { margin: 12px 0 18px; }
.pay { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 22px; }
.pay img { background: #fff; border: 1px solid var(--line); }
.pay p { margin-bottom: 10px; }

/* ---------- màn hình vừa và nhỏ ---------- */
@media (max-width: 1100px) {
  .editor { grid-template-columns: 1fr; }
  .editor-preview { position: static; order: -1; }
  .phone { width: 100%; max-width: 390px; height: 640px; }
}
@media (max-width: 1000px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work:nth-child(n) { grid-column: auto; align-self: start; margin-top: 0; }
  .work:nth-child(even) { margin-top: clamp(60px, 14vw, 140px); }
  .reel { grid-template-columns: 1fr; min-height: 0; gap: 20px; }
  .reel__main { order: -1; width: 100%; }
  .reel__side { gap: 24px; }
  .row { grid-template-columns: 3em minmax(0, 1fr); }
  .row__tags, .row__mode { grid-column: 2; }
  .viewer__bar { grid-template-columns: 1fr auto; }
  .viewer__guest { grid-column: 1 / -1; grid-row: 2; }
  .feats, .page__cols, .how__row { grid-template-columns: 1fr; }
  .feats__title, .page__aside { position: static; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth__art { order: 2; padding: 0 var(--pad) var(--pad); }
  .auth__frame { min-height: 0; aspect-ratio: 4 / 3; flex: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tp__info { grid-template-columns: 1fr 1fr; }
  .spot__text { grid-template-columns: 1fr; }
  .spot__go { align-items: flex-start; }
}
@media (max-width: 760px) {
  :root { --bar-h: 58px; }
  body { font-size: 13.5px; }
  .bar { grid-template-columns: 1fr auto; }
  .bar__nav, .bar__me .hide-s { display: none; }
  .bar__burger { display: block; }
  .reel { padding-inline: 0; }
  .reel__side { padding: 0 var(--pad); }
  .reel__ticks { padding: 0 var(--pad); }
  .works { grid-template-columns: 1fr; row-gap: 56px; }
  .work:nth-child(even) { margin-top: 0; }
  .sec__tools .views { display: none; }
  .g2, .g3, .g3.tight, .feats__list li, .foot__cta { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr; }
  .site { grid-template-columns: 1fr; }
  .site .acts { justify-content: flex-start; }
  .pay { grid-template-columns: 1fr; }
  .tp__head { grid-template-columns: 1fr; }
  .spot { height: 78vh; }
  .story-item { padding-left: 0; }
  .story-item .idx { position: static; }
  .story-item .ph { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__layer, .work__inner img, .menu { transition: none; }
  .viewer__status, .flash { animation: none; }
}

/* Mặt nạ của chữ tách dòng (SplitText mask) cắt mất dấu chồng của chữ hoa tiếng Việt (Ấ, Ổ, Ể…): nới vùng hiện lên trên và xuống dưới */
#reel-name > div, [data-split] > div, [data-intro-title] > div { padding: .36em 0 .1em; margin: -.36em 0 -.1em; }

@media (max-width: 760px) {
  .tbl table { min-width: 660px; }
  .tbl { margin-right: calc(var(--pad) * -1); padding-right: var(--pad); }
  .site { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; }
  .site .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .phone { max-width: 300px; height: 560px; margin: 0 auto; }
  .checkout { grid-template-columns: 1fr; }
  .checkout__art { position: static; }
}


/* ================= Giấy & Mực: đồ vật của ngày cưới ================= */
.hand { font: 400 clamp(14px, 1.15vw, 17px)/2 var(--hand); color: var(--ink-2); letter-spacing: 0; }
.hand.red { color: var(--accent); }
.hand svg { display: inline-block; width: 2.4em; height: 1.3em; vertical-align: -.35em; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* tem: mép răng cưa đục lỗ, in một màu mực */
.stamp { --hole: 3px; --gap: 11px; position: relative; display: block; padding: 9px; background: #fbf8f1;
  -webkit-mask: radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + .5px)) calc(var(--gap) / -2) calc(var(--gap) / -2) / var(--gap) var(--gap) round, linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + .5px)) calc(var(--gap) / -2) calc(var(--gap) / -2) / var(--gap) var(--gap) round, linear-gradient(#000 0 0) content-box; }
.stamp img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.stamp.sq img { aspect-ratio: 1; }
.stamp b, .stamp i { position: absolute; font: 600 8.5px/1 var(--sans); letter-spacing: .08em; color: #fbf8f1; text-shadow: 0 0 3px rgba(0, 0, 0, .35); font-style: normal; }
.stamp b { left: 15px; top: 15px; }
.stamp i { right: 15px; bottom: 15px; font-size: 10px; }
.stamp-wrap { position: relative; display: block; filter: drop-shadow(0 3px 5px rgba(60, 40, 15, .18)); }
.postmark { position: absolute; width: 74%; aspect-ratio: 1; color: rgba(29, 22, 17, .62); mix-blend-mode: multiply; pointer-events: none; }
.postmark svg { width: 100%; height: 100%; overflow: visible; }

/* đồ vật đặt trên mặt bàn: bóng đổ mềm như chụp dưới nắng */
.obj { position: absolute; display: block; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(60, 40, 15, .22)) drop-shadow(0 2px 2px rgba(60, 40, 15, .18)); }
.obj img { width: 100%; height: auto; }
.leaves { position: absolute; pointer-events: none; background: url(m/leaves.webp) center / cover no-repeat; mix-blend-mode: multiply; opacity: .2; animation: sway 16s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translate3d(-1.2%, -.6%, 0) rotate(-1.2deg) scale(1.02); } to { transform: translate3d(1.4%, .8%, 0) rotate(1deg) scale(1.04); } }

/* ---------- đầu trang: màn hình như một tấm thiệp đặt trên bàn, có hoa ép, dấu sáp, nhẫn ---------- */
.reel__desk { position: relative; }
.reel__screen { box-shadow: 0 0 0 clamp(6px, .7vw, 11px) var(--card), 0 30px 50px -24px rgba(60, 40, 15, .45), 0 2px 6px rgba(60, 40, 15, .12); }
.reel__desk .obj { z-index: 3; }
.reel__desk .obj.under { z-index: 0; }
.reel__desk .reel__screen { z-index: 1; }
.reel__desk .leaves { z-index: 4; inset: -14% -8% -16% -4%; opacity: .15; }
.p-sprig { left: -6%; bottom: -16%; width: 13%; transform: rotate(-38deg); }
.p-seal { right: -3.2%; top: -6%; width: 10.5%; transform: rotate(9deg); }
.p-rings { left: -19%; bottom: -2%; width: 14%; }
.reel__hint { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 2; white-space: nowrap; }

/* màn mở đầu: dấu sáp ấn xuống khi tải xong */
.loader__seal { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(84px, 7vw, 118px); opacity: 0; translate: -50% -50%; filter: drop-shadow(0 6px 8px rgba(60, 10, 5, .3)); }

/* ---------- "Một phong bì cho từng khách": mặt bàn đồ cưới, chú thích viết tay ---------- */
.desk__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 80px); align-items: end; margin-bottom: clamp(30px, 4vw, 64px); }
.desk__head p { color: var(--ink-2); font-size: 15.5px; max-width: 30em; }
.desk__stage { position: relative; aspect-ratio: 16 / 9.4; margin: 0 calc(var(--pad) * -1); overflow: hidden; }
.desk__stage .leaves { inset: -10%; opacity: .2; z-index: 5; }
.di { position: absolute; }
.di .note { position: absolute; z-index: 6; width: max-content; white-space: nowrap; }
.note .arw { display: inline-block; width: 2.6em; height: 1.25em; vertical-align: -.3em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paper { position: relative; background: var(--card); box-shadow: 0 1px 1px rgba(60, 40, 15, .12), 0 14px 26px -12px rgba(60, 40, 15, .35); }
.paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(m/fibre.webp) 0 0 / 640px 640px repeat; opacity: .45; }
.deckle { clip-path: polygon(0 1%, 3% 0, 7% .8%, 12% .2%, 18% 1%, 24% .3%, 31% .9%, 38% .1%, 45% .8%, 52% .2%, 60% 1%, 67% .3%, 74% .9%, 81% .2%, 88% .8%, 94% .1%, 100% .9%, 99.4% 6%, 100% 13%, 99.3% 21%, 100% 30%, 99.5% 39%, 100% 48%, 99.3% 57%, 100% 66%, 99.4% 75%, 100% 84%, 99.4% 93%, 100% 99%, 94% 100%, 88% 99.2%, 81% 100%, 74% 99.3%, 67% 100%, 60% 99.1%, 52% 100%, 45% 99.3%, 38% 100%, 31% 99.2%, 24% 100%, 18% 99.3%, 12% 100%, 6% 99.2%, 0 100%, .6% 93%, 0 84%, .7% 75%, 0 66%, .5% 57%, 0 48%, .7% 39%, 0 30%, .6% 21%, 0 13%, .7% 6%); }

/* phong bì mặt trước, đề tên khách */
.d-env { left: 3%; top: 46%; width: 32%; transform: rotate(-4deg); }
.env { aspect-ratio: 1.45; background: #f6efe1; padding: 8% 9%; display: flex; flex-direction: column; justify-content: flex-end; }
.env__to { position: relative; z-index: 1; }
.env__to small { display: block; font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.env__to strong { display: block; font: 400 clamp(20px, 2.3vw, 34px)/1.9 var(--hand); color: var(--stamp-blue); }
.env__to span { display: block; font: 400 clamp(11px, .95vw, 14px)/2 var(--hand); color: var(--ink-2); }
.env .stamp-wrap { position: absolute; right: 7%; top: 9%; width: 19%; transform: rotate(3deg); }
.env .postmark { right: 18%; top: 6%; width: 30%; transform: rotate(-12deg); }
.n-env { left: 9%; bottom: calc(100% + 10px); }
.n-env .arw { transform: rotate(75deg); }

/* phong bì mặt sau, nắp mở lót giấy toile, tấm thiệp đặt lên */
.d-open { left: 40%; top: 36%; width: 28%; transform: rotate(2.5deg); }
.open { aspect-ratio: 1.45; background: #efe5d2; }
.open__flap { position: absolute; left: 0; right: 0; bottom: 100%; height: 62%; background: #efe5d2; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.open__flap::after { content: ''; position: absolute; inset: 7% 6% 0; background: url(m/toile.webp) center / 160% auto; clip-path: polygon(0 100%, 50% 0, 100% 100%); opacity: .95; }
.open__hy { position: absolute; left: 79%; top: 56%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(m/hy-deboss.webp) center / contain no-repeat; opacity: .8; }
.open::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 49.7%, rgba(60, 40, 15, .1) 50%, transparent 50.5%), linear-gradient(to top left, transparent 49.7%, rgba(60, 40, 15, .1) 50%, transparent 50.5%); }
.d-card { left: 35%; top: 6%; width: 20%; transform: rotate(-3deg); z-index: 2; }
.card { aspect-ratio: .72; padding: 13% 11%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6em; background: #fbf8f1; }
.card > * { position: relative; }
.card small { font: 500 9px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.card h4 { font: 300 clamp(22px, 2.2vw, 34px)/1.25 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.card .names { font: 400 clamp(13px, 1.15vw, 17px)/2.1 var(--hand); color: var(--accent); border-bottom: 1px dashed var(--line-2); padding: 0 .4em; }
.card .when { font: 400 clamp(12px, 1vw, 14px)/1.45 var(--serif); color: var(--ink); }
.card .lunar { font: italic 400 clamp(11px, .9vw, 13px)/1.4 var(--serif); color: var(--ink-2); }
.card hr { width: 26%; border: 0; border-top: 1px solid var(--line-2); margin: .3em 0; }
.d-card .seal { position: absolute; left: 50%; bottom: -7%; width: 26%; transform: translateX(-50%) rotate(-10deg); filter: drop-shadow(0 4px 5px rgba(60, 10, 5, .3)); }
.n-card { right: calc(100% + 16px); top: 26%; text-align: right; }

/* thiệp hồi âm */
.d-rsvp { left: 63%; top: 5%; width: 15.5%; transform: rotate(5deg); }
.rsvp { padding: 9% 10% 11%; aspect-ratio: .78; background: #fbf8f1; }
.rsvp h5 { position: relative; font: 300 clamp(16px, 1.5vw, 23px)/1.2 var(--serif); margin: 0 0 8%; text-align: center; }
.rsvp p { position: relative; display: flex; align-items: baseline; gap: .5em; padding: 5% 0; border-bottom: 1px solid var(--line); font-size: clamp(10px, .85vw, 12.5px); color: var(--ink-2); }
.rsvp p .hand { font-size: 1.15em; line-height: 1.6; color: var(--stamp-blue); }
.rsvp .box { position: relative; width: 1.1em; height: 1.1em; border: 1px solid var(--ink-2); flex: none; align-self: center; }
.rsvp .box svg { position: absolute; left: -.15em; top: -.45em; width: 1.6em; height: 1.6em; stroke: var(--stamp-blue); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.n-rsvp { left: calc(100% + 18px); top: 24%; }
.n-rsvp .arw { transform: scaleX(-1); }

/* thiệp mừng cưới: QR hai nhà */
.d-qr { left: 69%; top: 47%; width: 23%; transform: rotate(-3.5deg); }
.qr { padding: 7% 8% 8%; background: #f8f2e6; }
.qr h5 { position: relative; font: 300 clamp(15px, 1.4vw, 21px)/1.2 var(--serif); margin: 0 0 6%; }
.qr__two { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.qr__two figure { margin: 0; text-align: center; font-size: clamp(9px, .8vw, 11.5px); color: var(--ink-2); }
.qr__two svg { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 5%; background: #fff; padding: 6%; }
.n-qr { left: 2%; top: calc(100% + 10px); }
.n-qr .arw { transform: rotate(-75deg); }

.d-rings { left: 45%; top: 70%; width: 12%; }
.d-sprig { left: 5%; top: 1%; width: 10%; transform: rotate(-24deg); }
.d-sprig2 { left: 60%; top: 63%; width: 5.5%; transform: rotate(64deg); }
.desk__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); margin: clamp(30px, 4vw, 60px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.desk__more li { list-style: none; padding: 20px 0; }
.desk__more h3 { font: 400 clamp(20px, 1.7vw, 25px)/1.2 var(--serif); margin-bottom: 6px; }
.desk__more p { color: var(--ink-2); }

/* ---------- bảng giá: mỗi gói một con tem ---------- */
.plan__head { display: flex; align-items: flex-end; gap: 16px; min-height: 84px; }
.plan__stamp { flex: none; width: 54px; transform: rotate(var(--r, 4deg)); transition: transform .6s var(--ease); }
.plan__stamp .stamp { --hole: 2.4px; --gap: 9px; padding: 6px; }
.plan__stamp .stamp b, .plan__stamp .stamp i { display: none; }
.plan:hover .plan__stamp { transform: rotate(0deg) translateY(-4px); }
.plan__stamp .postmark { left: 52%; top: 18%; width: 120%; transform: rotate(-14deg); }

@media (max-width: 1000px) {
  .desk__head { grid-template-columns: 1fr; }
  .desk__stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px 20px; padding: 40px var(--pad) 30px; overflow: visible; overflow-x: clip; }
  .desk__stage .leaves, .d-sprig, .d-sprig2, .d-open { display: none; }
  .di { position: relative; left: auto; top: auto; width: auto; }
  .d-env { grid-column: 1 / -1; width: min(100%, 460px); }
  .d-card { transform: rotate(-2deg); }
  .d-qr { grid-column: 1 / -1; width: min(100%, 420px); }
  .di .note { position: relative; left: auto; right: auto; top: auto; bottom: auto; display: block; margin-top: 18px; text-align: left; max-width: none; white-space: normal; width: auto; }
  .di .note .arw { transform: rotate(-75deg); }
  .desk__more { grid-template-columns: 1fr; }
  .p-rings { display: none; }
  .d-rings { position: relative; right: auto; top: auto; width: 44%; margin: -20px 0 0 auto; }
  .d-card .note { margin-top: 48px; }
  .rsvp { aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .desk__stage { grid-template-columns: 1fr; }
  .d-card, .d-rsvp { width: min(78%, 300px); }
  .d-rsvp { margin-left: auto; }
  .p-sprig { left: -2%; bottom: -10%; width: 22%; }
  .p-seal { width: 17%; right: 2%; top: -5%; }
  .reel__hint { display: none; }
  .reel__desk .leaves { inset: 0; }
}

/* thiệp + dấu sáp cùng một khối để dấu luôn bám mép dưới tấm thiệp */
.card-wrap { position: relative; }
.d-card .seal { bottom: -7%; }

/* trang mẫu, trang đăng nhập: màn hình thành tấm thiệp đặt trên bàn */
.tp__desk, .auth__desk { position: relative; }
.tp__screen, .auth__frame { box-shadow: 0 0 0 clamp(6px, .7vw, 11px) var(--card), 0 30px 50px -24px rgba(60, 40, 15, .45), 0 2px 6px rgba(60, 40, 15, .12); }
.tp__desk .tp__screen, .auth__desk .auth__frame { z-index: 1; }
.tp__desk .obj, .auth__desk .obj { z-index: 2; }
.tp__desk .obj.under, .auth__desk .obj.under { z-index: 0; }
.tp__desk .p-sprig { left: -3%; bottom: -12%; width: 11%; }
.tp__desk .p-seal { right: -2%; top: -5%; width: 8%; }
.auth__desk { flex: 1; display: flex; }
.auth__desk .auth__frame { flex: 1; }
.auth__desk .p-sprig { left: -4%; bottom: -8%; width: 22%; transform: rotate(-28deg); }
.auth__desk .p-seal { right: -4%; top: -4%; width: 16%; }

/* đặt làm: mẫu đơn là một lá thư */
.letter { position: relative; padding: clamp(26px, 3.4vw, 52px); background: var(--card); box-shadow: 0 1px 1px rgba(60, 40, 15, .1), 0 22px 40px -22px rgba(60, 40, 15, .4); }
.letter::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(m/fibre.webp) 0 0 / 640px 640px repeat; opacity: .45; }
.letter > * { position: relative; }
.letter__to { font-size: clamp(18px, 1.6vw, 24px); margin: -6px 0 6px; }
.letter .stamp-wrap.letter__stamp { position: absolute; right: clamp(16px, 2.4vw, 34px); top: clamp(16px, 2.4vw, 34px); width: clamp(56px, 5vw, 76px); transform: rotate(4deg); }
.letter__stamp .postmark { left: -70%; top: 20%; width: 120%; }
.thanks__seal { width: clamp(96px, 9vw, 140px); margin: 28px 0 26px; transform: rotate(-10deg); filter: drop-shadow(0 6px 8px rgba(60, 10, 5, .3)); }
@media (max-width: 760px) {
  .tp__desk .p-seal { width: 14%; }
  .tp__desk .p-sprig { width: 18%; }
  .auth__desk .p-sprig { display: none; }
  .auth__desk .p-seal { width: 18%; right: 0; }
}