/* ═══════════════════════════════════════════════
   THIỆP CƯỚI — styles.css
   Chất liệu: lụa tím trên giấy ngà.
   Không góc vuông, không nét thẳng — mọi cạnh đều
   là một đường cong chậm.
   ═══════════════════════════════════════════════ */

/* ─── 1. RESET ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, blockquote, dl, dd, fieldset, legend { margin: 0; padding: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, iframe, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
fieldset { border: 0; }
a { color: inherit; }

/* ─── 2. TOKEN ─────────────────────────────── */
:root {
  --giay:    #faf7fc;
  --giay-2:  #f3eef8;
  --muc:     #332c40;
  --muc-2:   #736a85;
  --tim:     #7f63aa;
  --vien:    #e3daef;
  --nhu:     #ab8c4c;

  /* Phông khai trong fonts.css. Mắt xích thứ hai của mỗi
     dòng là bản dự phòng đã nắn metric — giữ chỗ đúng bằng
     phông thật trong lúc chờ tải. */
  --f-hien: 'Lora', 'Lora lui', Georgia, 'Times New Roman', serif;
  --f-doc:  'Be Vietnam Pro', 'BVP lui', system-ui, -apple-system, sans-serif;

  /* nhịp chuyển động: chậm, không giật, kết thúc rất êm */
  --ease: cubic-bezier(.19, .72, .24, 1);
  --lua:  cubic-bezier(.28, .86, .22, 1);

  --le:  clamp(20px, 6vw, 76px);
  --doc: clamp(96px, 13.5vw, 176px);

  /* bo góc — mỗi loại khối một dáng riêng, bán kính elip cho mềm */
  --r-the:  30px / 44px;
  --r-anh:  16px;
  --r-vom:  999px 999px 20px 20px;
}

/* ─── 3. NỀN ───────────────────────────────── */
body {
  background: var(--giay);
  color: var(--muc);
  font-family: var(--f-doc);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ánh lụa: hai vùng sáng rất lớn, rất nhạt, trôi trong 46 giây */
#lua {
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 32% at 24% 24%, rgba(150, 118, 199, .16), transparent 70%),
    radial-gradient(44% 36% at 76% 66%, rgba(200, 170, 120, .12), transparent 72%),
    radial-gradient(30% 26% at 58% 92%, rgba(150, 118, 199, .10), transparent 74%);
  filter: blur(28px);
  animation: troi 46s ease-in-out infinite alternate;
}
@keyframes troi {
  to { transform: translate3d(-3.5%, 2.5%, 0) scale(1.07); }
}

/* vân giấy — phá cái "sạch quá mức" */
#giay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
#giay::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  background: radial-gradient(125% 95% at 50% 45%, transparent 58%, rgba(51, 44, 64, .45) 100%);
}

/* ─── 4. CHỮ ───────────────────────────────── */
/* Lora nhẹ nhất là cân 400 — xin 300 sẽ ra chữ giả-mảnh.
   Tracking để 0: tracking âm làm dấu chữ này chạm chữ kia. */
.tieu-de,
.hero-ten,
.tm-khach,
.mach-chu h3,
.kien h3,
.ket-cam,
.odo,
.hero-ngay b {
  font-family: var(--f-hien);
  font-weight: 400;
  letter-spacing: 0;
}

.nhan {
  font-size: .688rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muc-2);
  line-height: 1.7;
}

.tieu-de {
  font-size: clamp(2.05rem, 4.5vw, 3.4rem);
  line-height: 1.3;
  margin-top: .3em;
}

p { max-width: 62ch; }

/* ─── 5. KHUNG TRANG ───────────────────────── */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--le); }
.wrap.hep { max-width: 760px; }

.sec { padding: var(--doc) 0; position: relative; }

/* dải màu xen kẽ, hai mép là cung tròn rất thoải — nếp lụa */
.moi-sec, .kien-sec {
  background: var(--giay-2);
  border-radius: 50% / 3.4rem;
  padding-block: calc(var(--doc) + 2.2rem);
}

.dau { margin-bottom: clamp(50px, 7vw, 92px); }
.dau-phu { margin-top: 1.5em; color: var(--muc-2); font-size: .938rem; }

/* ─── 6. NÉT PHÂN CÁCH — nét cong, mỗi phần một kiểu ─── */
.net {
  display: block;
  position: relative;
  height: 18px;
  margin-top: 1.7em;
  background-repeat: no-repeat;
  background-position: left center;
}
.net.a {
  width: 118px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='118' height='18' viewBox='0 0 118 18'><path d='M1,12.5 C22,3 40,15 62,9 C80,4 98,8 117,5.5' fill='none' stroke='%23ab8c4c' stroke-width='1' stroke-linecap='round'/></svg>");
}
.net.b {
  width: min(300px, 72%);
  margin-inline: auto;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='18' viewBox='0 0 300 18'><path d='M1,11 C34,3 66,15 100,10 C118,7.2 128,7.2 138,8.4 M162,8.4 C172,7.2 182,7.2 200,10 C234,15 266,3 299,11' fill='none' stroke='%23ab8c4c' stroke-width='1' stroke-linecap='round'/><path d='M150,3.6 C156.5,7 156.5,7 150,14.4 C143.5,7 143.5,7 150,3.6 Z' fill='none' stroke='%23ab8c4c' stroke-width='1'/></svg>");
}
.net.c {
  width: 15px;
  height: 15px;
  background: var(--nhu);
  border-radius: 100% 0 100% 0;
  transform: rotate(-10deg);
  opacity: .85;
}
.net.d {
  width: 186px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='186' height='18' viewBox='0 0 186 18'><path d='M1,7 C30,14 58,3 88,8 C112,12 140,12 168,9' fill='none' stroke='%23ab8c4c' stroke-width='1' stroke-linecap='round'/><circle cx='178' cy='9' r='4' fill='none' stroke='%23ab8c4c' stroke-width='1'/></svg>");
}

/* ─── 7. BA HIỆU ỨNG HIỆN ──────────────────── */
/* ① vén chữ theo từng dòng */
/* Ô che phải chừa chỗ cho dấu chồng kiểu Ầ Ế Ữ ộ ợ.
   Lora cao 100.6% em phía trên + 27.4% phía dưới = 128%,
   trong khi tiêu đề chạy line-height 1.16–1.3 — phần dư
   tràn ra ngoài hộp dòng. Chừa thiếu là dấu bị cắt cụt.
   Margin âm khớp y hệt padding nên bố cục không đổi. */
.js .da-tach .dg {
  display: block;
  overflow: hidden;
  padding: .36em 0 .30em;
  margin: -.36em 0 -.30em;
}
.js .da-tach .dg-i {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1.25s var(--lua);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 110ms);
}
.js .da-tach.in .dg-i { transform: none; }

/* ② tấm voan trượt khỏi ảnh — mép mờ dần, không phải cạnh thẳng */
.js [data-hien="anh"] .dich {
  -webkit-mask-image: linear-gradient(102deg, #000 0 48%, rgba(0, 0, 0, 0) 68%);
          mask-image: linear-gradient(102deg, #000 0 48%, rgba(0, 0, 0, 0) 68%);
  -webkit-mask-size: 230% 100%;
          mask-size: 230% 100%;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: -webkit-mask-position 1.7s var(--lua), mask-position 1.7s var(--lua);
  transition-delay: var(--d, 0ms);
}
.js [data-hien="anh"].in .dich {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}
.js [data-hien="anh"] img {
  transform: scale(1.08);
  transition: transform 1.9s var(--lua);
  transition-delay: var(--d, 0ms);
}
/* Sau khi hiện xong, cỡ ảnh do biến --phong quyết định. Đi qua
   biến thay vì viết thêm luật :hover là để khỏi phải đấu độ ưu
   tiên với chính luật này. */
.js [data-hien="anh"].in img {
  transform: scale(var(--phong, 1));
  transition-duration: 1.4s;
  transition-delay: 0ms;
}
@media (hover: hover) and (pointer: fine) {
  .khung:hover { --phong: 1.045; }
}

/* Ảnh hiện theo tay kéo — JS ghi thẳng mask-position mỗi khung hình
   (xem anhSau trong script.js). Phải bỏ transition, không thì mỗi
   lần ghi lại khởi động một chuyển tiếp 1.7s và tấm voan lết theo
   sau con lăn cả giây. Đặt sau luật .in để thắng ở thế cân bằng
   độ ưu tiên. */
.js [data-hien="anh"].cuon .dich { transition: none; }

/* ③ trồi nhẹ cho khối phụ */
.js [data-hien="len"] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.15s var(--lua), transform 1.15s var(--lua);
  transition-delay: var(--d, 0ms);
}
.js [data-hien="len"].in { opacity: 1; transform: none; }

/* nét cong tự vẽ dần từ trái sang */
.js .net[data-hien="len"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 101% 0 0);
  transition: clip-path 1.5s var(--lua);
}
.js .net[data-hien="len"].in { clip-path: inset(0 -3% 0 0); }

/* Nét đã dựng thành SVG (xem veNet trong script.js): bỏ ảnh nền
   và bỏ luôn kiểu quét clip-path, đổi sang chạy đầu bút thật. */
.js .net.ve {
  background-image: none;
  clip-path: none;
  transition: none;
}
.js .net.ve svg { width: 100%; height: 100%; overflow: visible; }
.js .net.ve path {
  fill: none;
  stroke: var(--nhu);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dashoffset: var(--dai, 0);
  transition: stroke-dashoffset 1.7s var(--lua);
  transition-delay: var(--d, 0ms);
}
.js .net.ve.in path { stroke-dashoffset: 0; }
/* ba nét của kiểu b nối nhau: hai nhánh rồi mới tới hạt kim cương */
.js .net.b.ve path:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 120ms); }
.js .net.b.ve path:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 620ms); }
.js .net.d.ve path:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 540ms); }
.js .net.c[data-hien="len"] {
  clip-path: none;
  opacity: 0;
  transform: scale(.2) rotate(-70deg);
  transition: opacity 1s var(--lua), transform 1.2s var(--lua);
}
.js .net.c[data-hien="len"].in { opacity: .85; transform: scale(1) rotate(-10deg); }

/* ─── 8. KHUNG ẢNH ─────────────────────────── */
.khung {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--giay-2);
  border-radius: var(--r-anh);
  perspective: 900px;   /* để tấm ảnh bên trong xoay được theo cuộn */
}
.khung.vom { border-radius: var(--r-vom); }
/* thừa ra hai bên 3%: khi xoay rotateY, mép xa lùi lại mà vẫn
   không hở ra nền dưới */
.khung .dich {
  display: block;
  position: absolute;
  inset: -9% -3%;
  will-change: transform;
}
.khung img { width: 100%; height: 100%; object-fit: cover; }

/* ─── 9. PHONG BÌ ──────────────────────────── */
#envelope { display: none; }
.js #envelope {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 36px;
  background: var(--giay-2);
  transition: opacity 1.1s var(--lua);
}
html.env-dong, html.env-dong body { overflow: hidden; }
#envelope.tan { opacity: 0; pointer-events: none; }

/* perspective đặt ở đây thì rotateX của nắp mới có chiều sâu
   thật. Thiếu nó — như trước — nắp chỉ bị bẹp theo chiều dọc,
   trông như tấm giấy xẹp xuống chứ không phải mở ra.
   Để transform-style mặc định (flat): các mảnh phong bì vẫn
   xếp lớp theo z-index cho chắc, chỉ riêng nắp lấy chiều sâu. */
.env {
  position: relative;
  width: min(78vw, 420px);
  aspect-ratio: 3 / 2;
  perspective: 1400px;
}
.env-lung, .env-truoc, .env-nap {
  position: absolute;
  inset: 0;
  border: 1px solid var(--vien);
  background: var(--giay);
  border-radius: 18px / 26px;
}
.env-lung { z-index: 1; }

.env-thiep {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 8%;
  z-index: 2;
  padding: clamp(20px, 4vw, 32px) clamp(14px, 3vw, 26px);
  background: var(--giay);
  border: 1px solid var(--vien);
  border-radius: 46% 46% 14px 14px / 22% 22% 14px 14px;
  text-align: center;
  transition: transform 1.35s var(--lua), box-shadow 1.35s var(--lua);
}
/* trồi lên VÀ tiến về phía người xem — nhờ perspective ở .env,
   translateZ làm tấm thiệp lớn dần lên như đang được rút ra */
#envelope.mo .env-thiep {
  transform: translate3d(0, -56%, 46px);
  box-shadow: 0 30px 54px -34px rgba(51, 44, 64, .5);
}
.et-nhan {
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muc-2);
}
.et-ten {
  font-family: var(--f-hien);
  font-weight: 400;
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  line-height: 1.42;
  margin-top: .3em;
}
.et-ten i { color: var(--nhu); font-style: italic; font-size: .8em; }
.et-net {
  display: block;
  width: 52px; height: 8px;
  margin: .9em auto;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='8' viewBox='0 0 52 8'><path d='M1,5.5 C14,1.5 26,7 38,3.5 C43,2.2 47,2.6 51,3.4' fill='none' stroke='%23ab8c4c' stroke-width='1' stroke-linecap='round'/></svg>");
}
.et-ngay { font-size: .75rem; letter-spacing: .22em; color: var(--muc-2); }

.env-truoc {
  z-index: 3;
  /* mép túi cong lên chứ không gập thẳng */
  clip-path: polygon(0 34%, 12% 44%, 30% 56%, 50% 62%, 70% 56%, 88% 44%, 100% 34%, 100% 100%, 0 100%);
  background: var(--giay);
}
.env-nap {
  z-index: 4;
  transform-origin: top;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 88% 42%, 70% 56%, 50% 62%, 30% 56%, 12% 42%, 0 30%);
  background: var(--giay);
  transition: transform 1.15s var(--lua),
              background-color 1.15s var(--lua),
              box-shadow 1.15s var(--lua);
}
/* lật qua khỏi mép trên, để lộ mặt trong — tô đậm hơn một chút
   và thêm bóng đổ để mắt tin là tờ giấy có hai mặt */
#envelope.mo .env-nap {
  transform: rotateX(-172deg);
  background-color: #efe8f7;
  box-shadow: 0 16px 30px -20px rgba(51, 44, 64, .55);
}

.env-niem {
  position: absolute;
  left: 50%; top: 56%;
  z-index: 5;
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  border: 1px solid var(--nhu);
  border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;
  background: var(--giay);
  font-family: var(--f-hien);
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--muc);
  transition: transform .9s var(--lua), opacity .7s var(--lua);
}
.env-niem::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--vien);
  border-radius: inherit;
}
.env-niem i { color: var(--nhu); font-style: italic; }
.env-niem:hover { transform: scale(1.07); }
#envelope.mo .env-niem { opacity: 0; transform: scale(.72); }

.env-goi {
  font-size: .688rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muc-2);
  transition: opacity .6s;
}
#envelope.mo .env-goi { opacity: 0; }

/* ─── 10. THANH ĐIỀU HƯỚNG ─────────────────── */
.thanh {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px var(--le) 19px;
  background: var(--giay);
  border-radius: 0 0 50% 50% / 0 0 1.4rem 1.4rem;
  transform: translateY(-101%);
  transition: transform .95s var(--lua);
}
.thanh.hien { transform: none; }
.thanh-mono {
  font-family: var(--f-hien);
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-decoration: none;
}
.thanh-mono i { color: var(--nhu); font-style: italic; }
.thanh ul { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.thanh a {
  font-size: .688rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muc-2);
  text-decoration: none;
  transition: color .6s var(--lua);
}
/* gạch chân là một nét bút cong chạy ra, không phải vạch kẻ */
.thanh li a {
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
}
.thanh li a::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px;
  bottom: 0;
  height: 6px;
  background: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M1,4.2 C22,1 40,5.4 60,2.8 C74,1.2 88,2.6 99,2' fill='none' stroke='%23ab8c4c' stroke-width='1' stroke-linecap='round'/></svg>");
  clip-path: inset(0 101% 0 0);
  transition: clip-path .85s var(--lua);
}
.thanh li a:hover, .thanh li a.dang { color: var(--tim); }
.thanh li a:hover::after, .thanh li a.dang::after { clip-path: inset(0 -3% 0 0); }
@media (max-width: 860px) { .thanh ul { display: none; } }

/* ─── 11. NÚT NHẠC ─────────────────────────── */
#music-btn {
  position: fixed;
  right: var(--le);
  bottom: 26px;
  z-index: 55;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vien);
  border-radius: 54% 46% 48% 52% / 48% 52% 48% 52%;
  background: var(--giay);
  transition: border-color .6s var(--lua), transform .8s var(--lua);
}
#music-btn:hover { border-color: var(--nhu); transform: rotate(6deg); }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 12px; }
.eq i { width: 1px; height: 4px; background: var(--muc-2); transition: height .4s; }
#music-btn.chay .eq i { animation: eq 1.1s ease-in-out infinite alternate; }
#music-btn.chay .eq i:nth-child(2) { animation-delay: .28s; }
#music-btn.chay .eq i:nth-child(3) { animation-delay: .56s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }

/* ─── 12. CUỘN MƯỢT ────────────────────────── */
html.muot #silk-scroll {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html.muot #silk-inner { will-change: transform; }

/* ─── 13. HERO ─────────────────────────────── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 14vh, 150px) 0 clamp(72px, 10vh, 110px);
  position: relative;
}
.hero-luoi {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--le);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: end;
}
/* Lora rộng hơn Cormorant Garamond đáng kể: "Vinh Đào" chiếm
   4.23em, ở cỡ cũ là 488px trong cột 519px — sát quá, chỉ cần
   màn hẹp đi chút là vỡ. Hạ cỡ để lúc nào cũng dư ~9%. */
.hero-ten {
  font-size: clamp(2.9rem, 9.8vw, 7rem);
  line-height: 1.16;
  margin: .26em 0 0;
  letter-spacing: -.004em;
}
/* Phải là con TRỰC TIẾP. Để bộ chọn hậu duệ thì các <span> mà
   tachDong() bọc quanh từng chữ cũng dính display:block, thành ra
   mỗi chữ rơi một dòng và hàm đo tưởng câu đã xuống dòng thật —
   "Vinh Đào" bị xé làm đôi dù thừa chỗ. */
.hero-ten > span { display: block; }
.hero-ten .amp {
  font-style: italic;
  font-size: .34em;
  color: var(--nhu);
  margin: .1em 0 .06em .22em;
  letter-spacing: 0;
}
.hero-noi {
  color: var(--muc-2);
  font-size: .875rem;
  line-height: 2.1;
  margin-top: 1.9em;
  max-width: 34ch;
}

.hero-anh {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
}
.hero-anh .khung { aspect-ratio: 3 / 4; }
.hero-ngay {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 20px;
  background: no-repeat top left/100% 8px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='8' viewBox='0 0 300 8' preserveAspectRatio='none'><path d='M0,5 C60,1 120,7 180,4 C230,1.6 265,3 300,2' fill='none' stroke='%23e3daef' stroke-width='1'/></svg>");
}
.hero-ngay b {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
}
.hero-ngay span {
  font-size: .688rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muc-2);
}

.hero-cuon {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 1px;
  height: 56px;
  background: var(--vien);
  overflow: hidden;
  border-radius: 1px;
}
.hero-cuon i {
  position: absolute;
  inset: 0;
  background: var(--nhu);
  animation: cuon 3.2s var(--lua) infinite;
}
@keyframes cuon {
  0%   { transform: translateY(-100%); }
  65%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ─── 14. ĐẾM NGƯỢC ───────────────────────── */
.dem-sec { padding-block: clamp(68px, 9vw, 116px); }
.dem { display: grid; grid-template-columns: repeat(4, 1fr); }
.dem-o {
  position: relative;
  padding: clamp(18px, 3vw, 30px) 10px;
  text-align: center;
  perspective: 620px;   /* cho con số lật quanh trục ngang */
}
/* ngăn cách bằng một cánh hoa nhỏ, không phải vạch kẻ */
.dem-o + .dem-o::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--vien);
  border-radius: 100% 0 100% 0;
  transform: rotate(-12deg);
}
.odo {
  display: block;
  font-size: clamp(2.1rem, 5.6vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dem-o span {
  display: block;
  margin-top: 1em;
  font-size: .625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muc-2);
}
/* con số lật quanh mép trên như tấm thẻ giấy rơi xuống chỗ */
.odo.lat { animation: lat .72s var(--lua); transform-origin: 50% 12%; }
@keyframes lat {
  0%   { transform: rotateX(-82deg); opacity: 0; filter: blur(4px); }
  46%  { opacity: 1; filter: blur(0); }
  100% { transform: rotateX(0deg); opacity: 1; filter: blur(0); }
}
.dem-noi {
  margin-top: 2.2em;
  text-align: center;
  color: var(--muc-2);
  font-size: .938rem;
  max-width: none;
}

/* ─── 15. LỜI MỜI ─────────────────────────── */
.the-moi-san { perspective: 1250px; }
.the-moi {
  position: relative;
  transition: box-shadow .9s var(--lua);
  padding: clamp(74px, 11vw, 130px) clamp(26px, 5vw, 68px) clamp(48px, 7vw, 80px);
  background: var(--giay);
  border: 1px solid var(--vien);
  border-radius: 46% 46% 26px 26px / 15% 15% 34px 34px;
  box-shadow: 0 42px 90px -60px rgba(51, 44, 64, .55);
  text-align: center;
}
.the-moi::after {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid var(--vien);
  border-radius: inherit;
  pointer-events: none;
}
.the-moi .nhan { display: block; }
.tm-khach {
  font-size: clamp(1.9rem, 5.4vw, 3.1rem);
  line-height: 1.34;
  margin-top: .26em;
  color: var(--tim);
}
.tm-than { margin: 2em auto 0; max-width: 46ch; color: var(--muc-2); }
.tm-nha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 54px);
  margin-top: 3.2em;
  text-align: center;
}
.tm-ben { position: relative; display: flex; flex-direction: column; gap: .2em; }
.tm-ben + .tm-ben::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(13px, 2vw, 27px));
  top: 12%; bottom: 12%;
  width: 12px;
  background: no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='200' viewBox='0 0 12 200' preserveAspectRatio='none'><path d='M6,2 C11,40 1,70 6,100 C11,130 1,160 6,198' fill='none' stroke='%23e3daef' stroke-width='1'/></svg>");
}
.tm-ben .nhan { margin-bottom: .9em; }
.tm-ben b {
  font-family: var(--f-hien);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.55;
}
.tm-dc { margin-top: .8em; font-size: .813rem; color: var(--muc-2); line-height: 1.8; }
.tm-cam {
  margin: 2.9em auto 0;
  font-family: var(--f-hien);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--muc-2);
  max-width: none;
}

/* Lời nhắn riêng cho từng khách — tách hẳn ra bằng một nét cong nhỏ
   để người đọc thấy ngay đây là câu viết cho riêng mình. */
.tm-nhan {
  position: relative;
  margin: 2.4em auto 0;
  padding-top: 2em;
  max-width: 42ch;
  font-size: .938rem;
  line-height: 1.9;
  color: var(--tim);
}
.tm-nhan::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 74px; height: 10px;
  margin-left: -37px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='74' height='10' viewBox='0 0 74 10'><path d='M1,6.5 C18,2 34,8 50,4.5 C58,2.8 66,3.4 73,4.2' fill='none' stroke='%23ab8c4c' stroke-width='1' stroke-linecap='round'/></svg>");
}

/* ─── 16. CÂU CHUYỆN ──────────────────────── */
.mach { position: relative; }
/* sợi chỉ lụa uốn dọc theo câu chuyện */
.chi {
  position: absolute;
  left: 50%; top: 0;
  width: 40px;
  height: 100%;
  margin-left: -20px;
  overflow: visible;
}
/* path gần như thẳng đứng nên tỉ lệ ngang giữ nét luôn mảnh 1px */
.chi path {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
}
.chi-mo  { stroke: var(--vien); }
.chi-dam { stroke: var(--nhu); }

.mach-o {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 88px);
  align-items: center;
  position: relative;
}
.mach-o + .mach-o { margin-top: clamp(60px, 9vw, 124px); }
.mach-o .khung { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
.mach-chu { grid-column: 2; grid-row: 1; }
.mach-o:nth-of-type(even) .khung { grid-column: 2; }
.mach-o:nth-of-type(even) .mach-chu { grid-column: 1; text-align: right; }
/* ảnh nghiêng cánh hoa, hai bên ngược chiều nhau */
.mach-o:nth-of-type(odd)  .khung { border-radius: 130px 18px 130px 18px; }
.mach-o:nth-of-type(even) .khung { border-radius: 18px 130px 18px 130px; }
.mach-chu h3 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.4;
  margin: .3em 0 .65em;
}
.mach-chu p { color: var(--muc-2); font-size: .938rem; }
.mach-o:nth-of-type(even) .mach-chu p { margin-left: auto; }

/* ─── 17. ALBUM ───────────────────────────── */
.luoi-anh {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.6vw, 36px);
}
.ph { position: relative; }
.ph .khung { width: 100%; cursor: pointer; }
.ph figcaption {
  margin-top: 1em;
  font-size: .688rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muc-2);
}
.p1 { grid-column: 1 / 6; }
.p1 .khung { aspect-ratio: 3 / 4; }
.p2 { grid-column: 6 / 10; margin-top: 14%; }
.p2 .khung { aspect-ratio: 1 / 1; border-radius: 130px 18px 130px 18px; }
.p3 { grid-column: 10 / 13; margin-top: 36%; }
.p3 .khung { aspect-ratio: 3 / 4; }
.p4 { grid-column: 2 / 8; margin-top: clamp(24px, 5vw, 74px); }
.p4 .khung { aspect-ratio: 4 / 3; border-radius: 24px / 44px; }
.p5 { grid-column: 8 / 12; margin-top: clamp(48px, 10vw, 150px); }
.p5 .khung { aspect-ratio: 3 / 4; border-radius: 18px 130px 18px 130px; }
.p6 { grid-column: 4 / 10; margin-top: clamp(24px, 5vw, 74px); }
.p6 .khung { aspect-ratio: 4 / 5; }

/* ─── 18. SỰ KIỆN ─────────────────────────── */
.luoi-kien {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
  align-items: start;
}
.kien { padding: clamp(30px, 4vw, 52px) clamp(20px, 2.4vw, 34px); }
/* tiệc chính nằm trên một tấm lụa sáng hơn */
.kien.chinh {
  background: var(--giay);
  border-radius: 34px / 52px;
  box-shadow: 0 36px 80px -60px rgba(51, 44, 64, .5);
}
/* Lễ bên nhà khách — đánh dấu bằng một cánh hoa nhỏ ở đầu nhãn,
   đủ để mắt bắt được mà không phá nhịp của cả hàng. */
.kien.cua-minh .nhan { color: var(--nhu); }
.kien.cua-minh .nhan::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: .7em;
  vertical-align: baseline;
  background: var(--nhu);
  border-radius: 100% 0 100% 0;
  transform: rotate(-12deg);
}

/* Khách không được mời đủ ba lễ thì thu lưới lại cho cân, đừng để
   mấy thẻ còn lại dồn sang trái chừa một mảng trống bên phải. */
html.le-1 .luoi-kien,
html.le-2 .luoi-kien { justify-content: center; }
html.le-1 .luoi-kien { grid-template-columns: minmax(0, 520px); }
html.le-2 .luoi-kien { grid-template-columns: repeat(2, minmax(0, 400px)); }

.kien h3 {
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  line-height: 1.4;
  margin: .32em 0 .55em;
}
.kien-gio { font-size: .813rem; letter-spacing: .05em; color: var(--tim); }
.kien-noi { margin-top: .9em; font-size: .875rem; line-height: 1.95; color: var(--muc-2); }
.kien-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.9em; }
.nut-net {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  font-size: .688rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muc-2);
  text-decoration: none;
  background: transparent;
  transition: border-color .7s var(--lua), color .7s var(--lua);
}
/* vệt mực dâng lên từ đáy nút, mép tan dần — thay cho kiểu
   đổi màu nền cứng một nhát */
.nut-net::before,
.chip span::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(125% 165% at 50% 132%, rgba(171, 140, 76, .22), rgba(171, 140, 76, 0) 72%);
  opacity: 0;
  transform: translateY(38%);
  transition: opacity .9s var(--lua), transform 1.15s var(--lua);
}
.nut-net:hover { border-color: var(--nhu); color: var(--muc); }
.nut-net:hover::before,
.chip:hover input:not(:checked) + span::before { opacity: 1; transform: none; }

/* Bản đồ nằm ngay trong thẻ lễ — ba lễ ba chỗ khác nhau, để chung
   một bản đồ dưới chân trang thì hai lễ kia coi như không có.
   Xám sẵn cho khỏi chọi màu với tấm lụa, chạm vào mới lên màu. */
.kien-ban-do {
  margin-top: 1.6em;
  border: 1px solid var(--vien);
  border-radius: 22px / 34px;
  overflow: hidden;
  background: var(--giay);
}
.kien-ban-do iframe {
  width: 100%;
  height: clamp(150px, 15vw, 190px);
  border: 0;
  filter: grayscale(1) contrast(.9) opacity(.82);
  transition: filter 1.1s var(--lua);
}
.kien-ban-do:hover iframe { filter: none; }
/* Thẻ tiệc chính đã sáng hơn nền, viền bản đồ phải đậm lên chút
   không thì tan vào giấy */
.kien.chinh .kien-ban-do { border-color: #ded3ec; }

/* ─── 19. RSVP ────────────────────────────── */
/* Không còn là tờ khai: chỉ một câu mời, một câu hỏi và một
   khoảng trống để khách viết. Mọi thứ khác đã biết từ link riêng. */
.form { display: flex; flex-direction: column; gap: clamp(34px, 4.5vw, 52px); }
.o { display: block; }

.rsvp-moi { max-width: 40ch; font-size: 1.02rem; }

/* Câu hỏi đặt bằng phông hiển thị, cỡ chữ như lời nói —
   không phải nhãn ô nhập viết hoa toàn phần */
.o > span.rsvp-hoi,
.f-chon legend.rsvp-hoi {
  display: block;
  margin-bottom: .85em;
  font-family: var(--f-hien);
  font-size: clamp(1.28rem, 2.4vw, 1.62rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--muc);
}

.rsvp-gui { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.rsvp-gui .nut-chinh { align-self: auto; }
.rsvp-gui .form-bao { margin: 0; }

.rsvp-han {
  max-width: 42ch;
  font-size: .813rem;
  line-height: 1.9;
  color: var(--muc-2);
  opacity: .8;
}
.o > span {
  display: block;
  font-size: .688rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muc-2);
  margin-bottom: .7em;
}
.o > span i { color: var(--nhu); font-style: normal; }
.o input, .o select, .o textarea {
  width: 100%;
  padding: 9px 14px;
  background: rgba(243, 238, 248, .55);
  border: 1px solid transparent;
  border-bottom-color: var(--vien);
  border-radius: 16px / 22px;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color .6s var(--lua), background-color .6s var(--lua);
}
.o textarea { resize: vertical; line-height: 1.8; }
.o select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muc-2) 50%),
    linear-gradient(135deg, var(--muc-2) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.o input::placeholder, .o textarea::placeholder { color: #b6adc4; }
.o input:focus, .o select:focus, .o textarea:focus {
  outline: none;
  border-color: var(--nhu);
  background: var(--giay);
}
.f-chon legend {
  margin-bottom: 1em;
  font-size: .688rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muc-2);
}
.f-chip { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-block; cursor: pointer; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  font-size: .813rem;
  color: var(--muc-2);
  transition: border-color .7s var(--lua), color .7s var(--lua), background-color .7s var(--lua);
}
.chip input:checked + span { border-color: var(--tim); color: var(--giay); background: var(--tim); }
.chip input:focus-visible + span { outline: 2px solid var(--nhu); outline-offset: 3px; }

.nut-chinh {
  align-self: flex-start;
  position: relative;
  z-index: 0;
  padding: 15px 42px;
  border: 1px solid var(--muc);
  border-radius: 999px;
  overflow: hidden;
  font-size: .688rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color .8s var(--lua);
}
.nut-chinh::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--muc);
  transform: translateX(-101%);
  transition: transform .9s var(--lua);
}
.nut-chinh:hover { color: var(--giay); }
.nut-chinh:hover::before { transform: none; }
.nut-chinh:disabled { opacity: .45; cursor: default; }

/* Hiện thay cho form khi trang mở bằng link chung — không biết ai
   đang xác nhận thì thà nói thẳng còn hơn nhận một dòng vô danh */
.rsvp-thay {
  margin: 0 auto;
  max-width: 46ch;
  text-align: center;
  color: var(--muc-2);
  font-size: .938rem;
  line-height: 2;
}

.form-bao { font-size: .875rem; min-height: 1.6em; }
.form-bao.duoc { color: var(--tim); }
.form-bao.hong { color: #b4453f; }

/* ─── 20. KẾT ─────────────────────────────── */
.ket {
  padding: calc(var(--doc) + 2rem) 0 clamp(74px, 9vw, 116px);
  background: var(--giay-2);
  border-radius: 50% 50% 0 0 / 3.4rem 3.4rem 0 0;
  text-align: center;
}
.ket .wrap { display: flex; flex-direction: column; align-items: center; }
.ket-mono { font-family: var(--f-hien); font-size: 1.55rem; letter-spacing: .1em; }
.ket-mono i { color: var(--nhu); font-style: italic; }
.ket-cam { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.34; margin-top: .5em; }
.ket-phu { margin-top: 1.6em; color: var(--muc-2); font-size: .938rem; line-height: 2.1; }
.ket .net { margin-top: 2.4em; }
.ket-cuoi {
  margin-top: 2.4em;
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muc-2);
}

/* ─── 21. LIGHTBOX ────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(40, 34, 50, .94);
  padding: clamp(20px, 5vw, 60px);
}
.lightbox.mo { display: flex; }
html.khoa, html.khoa body { overflow: hidden; }
.lb-khung { max-width: min(1000px, 100%); }
.lb-khung img {
  max-height: 78vh;
  max-width: 100%;
  width: auto;
  margin: 0 auto;
  border-radius: 22px / 32px;
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .85);
  animation: lbHien 1s var(--lua);
}
/* ảnh ngả nhẹ về sau rồi dựng thẳng lên, kèm mờ tan dần —
   perspective() nằm ngay trong transform nên không cần đụng
   tới phần tử cha */
@keyframes lbHien {
  from { opacity: 0; transform: perspective(1500px) rotateX(7deg) translateZ(-110px); filter: blur(7px); }
  to   { opacity: 1; transform: perspective(1500px) rotateX(0deg) translateZ(0); filter: blur(0); }
}
.lb-khung figcaption {
  margin-top: 1.5em;
  text-align: center;
  color: rgba(250, 247, 252, .66);
  font-size: .688rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.lb-dong, .lb-di {
  position: absolute;
  color: var(--giay);
  font-size: 1.4rem;
  line-height: 1;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 247, 252, .22);
  border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;
  transition: border-color .6s var(--lua);
}
.lb-dong:hover, .lb-di:hover { border-color: rgba(250, 247, 252, .7); }
.lb-dong { top: 24px; right: 24px; }
.lb-di { top: 50%; margin-top: -24px; font-size: 1.8rem; }
.lb-di.truoc { left: 18px; }
.lb-di.sau { right: 18px; }

/* ─── 22. CÁNH HOA CHÚC MỪNG ──────────────── */
.canh {
  position: fixed;
  top: -30px;
  z-index: 250;
  width: 10px;
  height: 14px;
  border-radius: 100% 0 100% 0;
  pointer-events: none;
  animation: roi linear forwards;
}
/* cánh rắc thưa ở màn mở: nhỏ hơn, và nằm dưới thanh điều hướng */
.canh.thua { z-index: 40; width: 8px; height: 11px; }
@keyframes roi {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translateY(105vh) translateX(var(--dat, 40px)) rotate(400deg); opacity: 0; }
}

/* ─── 23. MÀN HÌNH NHỎ ────────────────────── */
@media (max-width: 980px) {
  .hero-luoi { grid-template-columns: 1fr; align-items: start; }
  .hero-anh { max-width: 380px; margin-left: 0; }
  .hero-ten { font-size: clamp(2.9rem, 13vw, 5rem); }

  .chi { left: 4px; margin-left: 0; width: 26px; }
  .mach-o { grid-template-columns: 1fr; gap: 22px; padding-left: 46px; }
  .mach-o .khung, .mach-o:nth-of-type(even) .khung { grid-column: 1; grid-row: 1; }
  .mach-chu, .mach-o:nth-of-type(even) .mach-chu { grid-column: 1; grid-row: 2; text-align: left; }
  .mach-o:nth-of-type(even) .mach-chu p { margin-left: 0; }

  .luoi-anh { grid-template-columns: repeat(2, 1fr); }
  .ph { grid-column: auto !important; margin-top: 0 !important; }
  .ph:nth-child(even) { margin-top: clamp(20px, 5vw, 50px) !important; }

  .luoi-kien { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 600px) {
  .moi-sec, .kien-sec, .ket { border-radius: 50% / 1.8rem; }
  .ket { border-radius: 50% 50% 0 0 / 1.8rem 1.8rem 0 0; }

  .dem { grid-template-columns: repeat(2, 1fr); }
  .dem-o:nth-child(3)::before { display: none; }

  .the-moi { border-radius: 40% 40% 22px 22px / 8% 8% 26px 26px; }
  .tm-nha { grid-template-columns: 1fr; gap: 34px; }
  .tm-ben + .tm-ben::before {
    left: 25%; right: 25%;
    top: -20px; bottom: auto;
    width: auto; height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2,6 C40,1 70,11 100,6 C130,1 160,11 198,6' fill='none' stroke='%23e3daef' stroke-width='1'/></svg>");
  }

  .luoi-anh { grid-template-columns: 1fr; }
  .ph:nth-child(even) { margin-top: 0 !important; }

  #music-btn { bottom: 18px; }
}

/* ─── 24. TÔN TRỌNG prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #lua { animation: none; }
  .js #envelope { display: none; }
  .js [data-hien="len"] { opacity: 1 !important; transform: none !important; }
  .js .net[data-hien="len"] { opacity: .85 !important; clip-path: none !important; transform: none !important; }
  .js .net.c[data-hien="len"] { transform: rotate(-10deg) !important; }
  .js .da-tach .dg-i { transform: none !important; }
  .js [data-hien="anh"] .dich {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .js [data-hien="anh"] img { transform: none !important; }
  .hero-cuon { display: none; }

  /* nét vẽ tay: hiện sẵn trọn nét, không chạy đầu bút */
  .js .net.ve path { stroke-dashoffset: 0 !important; }
  /* các khối 3D: JS đã không ghi transform khi bật chế độ này,
     đây chỉ là chốt chặn thứ hai */
  .the-moi, .khung .dich { transform: none !important; }
  .thanh li a::after { clip-path: none !important; }
  .canh { display: none !important; }
}

/* ─── 25. IN THIỆP ────────────────────────── */
@media print {
  #envelope, #giay, #lua, .thanh, #music-btn, .lightbox, .hero-cuon,
  .form, .kien-ban-do, .kien-nut, .dem-sec, .canh { display: none !important; }

  html.muot #silk-scroll { position: static; overflow: visible; }
  html.muot #silk-inner { transform: none !important; }
  body { background: #fff; color: #000; height: auto !important; }

  .sec, .ket { padding: 18mm 0; background: #fff !important; border-radius: 0; }
  .the-moi { box-shadow: none; border: 1px solid #999; border-radius: 0; }
  .kien.chinh { box-shadow: none; }
  .hero { min-height: auto; page-break-after: always; }
  .luoi-anh, .mach { page-break-inside: avoid; }

  .js [data-hien="len"], .js .net[data-hien="len"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js .da-tach .dg-i { transform: none !important; }
  .js [data-hien="anh"] .dich {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .js [data-hien="anh"] img { transform: none !important; }

  /* nét vẽ trọn, thẻ mời thôi nghiêng, ảnh về đúng khung */
  .js .net.ve path { stroke-dashoffset: 0 !important; }
  .the-moi, .khung .dich { transform: none !important; }
  .the-moi { box-shadow: none !important; }
}