/* co chu — khach chinh duoc trong trang sua thiep */
.text-\[10\.5px\] {
  font-size: 0.65625rem;
}
.text-\[10px\] {
  font-size: 0.625rem;
}
.text-\[11px\] {
  font-size: 0.6875rem;
}
.text-\[12\.5px\] {
  font-size: 0.78125rem;
}
.text-\[12px\] {
  font-size: 0.75rem;
}
.text-\[13\.5px\] {
  font-size: 0.84375rem;
}
.text-\[13px\] {
  font-size: 0.8125rem;
}
.text-\[14px\] {
  font-size: 0.875rem;
}
.text-\[15px\] {
  font-size: 0.9375rem;
}
.text-\[27px\] {
  font-size: 1.6875rem;
}
.text-\[clamp\(0\.95rem\,4\.5vw\,1\.15rem\)\] {
  font-size: clamp(.95rem,calc(4.5vw * var(--thiep-ti, 1)),1.15rem);
}
.text-\[clamp\(1\.3rem\,5vw\,1\.6rem\)\] {
  font-size: clamp(1.3rem,calc(5vw * var(--thiep-ti, 1)),1.6rem);
}
.text-\[clamp\(1\.8rem\,4vw\,2\.5rem\)\] {
  font-size: clamp(1.8rem,calc(4vw * var(--thiep-ti, 1)),2.5rem);
}
.text-\[clamp\(1\.9rem\,4vw\,2\.7rem\)\] {
  font-size: clamp(1.9rem,calc(4vw * var(--thiep-ti, 1)),2.7rem);
}
.text-\[clamp\(1\.9rem\,4vw\,2\.8rem\)\] {
  font-size: clamp(1.9rem,calc(4vw * var(--thiep-ti, 1)),2.8rem);
}
.text-\[clamp\(2\.1rem\,5vw\,3\.2rem\)\] {
  font-size: clamp(2.1rem,calc(5vw * var(--thiep-ti, 1)),3.2rem);
}
.text-\[clamp\(2\.4rem\,6vw\,3\.7rem\)\] {
  font-size: clamp(2.4rem,calc(6vw * var(--thiep-ti, 1)),3.7rem);
}
.text-\[clamp\(2\.4rem\,8vw\,3\.2rem\)\] {
  font-size: clamp(2.4rem,calc(8vw * var(--thiep-ti, 1)),3.2rem);
}
.text-\[clamp\(2\.5rem\,8vw\,3\.5rem\)\] {
  font-size: clamp(2.5rem,calc(8vw * var(--thiep-ti, 1)),3.5rem);
}
.text-\[clamp\(2rem\,8vw\,2\.6rem\)\] {
  font-size: clamp(2rem,calc(8vw * var(--thiep-ti, 1)),2.6rem);
}

/* mau chung — khach doi duoc trong trang sua thiep */
:root {
  --color-primary: var(--thiep-nhan, #690101);
  --color-bg: var(--thiep-nen, #fff);
  --color-page: var(--thiep-nen-dam, #efece8);
  --color-fg: var(--thiep-chu, #1a1a1a);
  --color-ink: var(--thiep-chu, #3a2e2b);
  --color-soft: var(--thiep-phu, #7a6b66);
  --color-line: var(--thiep-vien, #e7e1d8);
}

.inv-in {
  animation-fill-mode: backwards;
}

/* ---------- màn mở thiệp: hai cánh rẽ từ giữa ra hai bên ---------- */

.env-overlay {
  background-color: transparent;
  transition: none;
}

.env-overlay::before,
.env-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;
  z-index: -1;
  background-color: var(--color-bg, #fff);
  background-image:
    radial-gradient(118% 72% at 50% 30%, rgba(255, 248, 238, 0.92), rgba(255, 248, 238, 0) 58%),
    radial-gradient(84% 50% at 50% 112%, rgba(105, 1, 1, 0.07), rgba(105, 1, 1, 0) 72%);
  background-repeat: no-repeat;
  background-size: 199.2% 100%;
  box-shadow: 0 0 0 rgba(105, 1, 1, 0);
  transition:
    transform 0.9s cubic-bezier(0.7, 0, 0.2, 1),
    box-shadow 0.45s ease;
}

.env-overlay::before {
  left: 0;
  background-position: left center;
}

.env-overlay::after {
  right: 0;
  background-position: right center;
}

.env-overlay.leaving {
  opacity: 1;
  filter: none;
  transform: none;
}

.env-overlay.leaving::before {
  transform: translate3d(-100%, 0, 0);
  box-shadow: 16px 0 38px rgba(105, 1, 1, 0.2);
}

.env-overlay.leaving::after {
  transform: translate3d(100%, 0, 0);
  box-shadow: -16px 0 38px rgba(105, 1, 1, 0.2);
}

.env-overlay > div {
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.env-overlay.leaving > div {
  opacity: 0;
  transform: scale(1.06);
}

.env-overlay button {
  cursor: pointer;
}

.env-overlay h1 {
  position: relative;
}

.env-overlay h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.9rem;
  width: 104px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0), rgba(201, 162, 39, 0.7), rgba(201, 162, 39, 0));
}

.env-overlay .text-primary.uppercase {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: rgba(105, 1, 1, 0.72);
  text-shadow: none;
  animation: env-hint 2.8s ease-in-out infinite;
}

@keyframes env-hint {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- phong bì ---------- */

.envelope-scene {
  perspective: 1500px;
}

.envelope-scene:not(.is-open) {
  animation: env-float 6.5s ease-in-out infinite;
}

@keyframes env-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.envelope {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.env-overlay button:hover .envelope:not(.is-open) {
  transform: translateY(-7px) rotateX(4deg);
}

.env-overlay button:active .envelope:not(.is-open) {
  transform: translateY(-2px) scale(0.985);
}

.envelope-body {
  border-radius: 5px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0) 28%),
    radial-gradient(130% 90% at 50% -10%, #96201f, #6d0303 52%, #420000);
  box-shadow:
    0 30px 58px rgba(74, 0, 0, 0.3),
    0 10px 20px rgba(74, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(201, 162, 39, 0.3);
}

.envelope-body::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(214, 178, 88, 0.3);
  border-radius: 2px;
}

.envelope:not(.is-open) .envelope-body::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    rgba(255, 245, 214, 0) 40%,
    rgba(255, 245, 214, 0.32) 50%,
    rgba(255, 245, 214, 0) 60%
  );
  animation: env-sheen 6.5s ease-in-out 1.4s infinite;
}

.envelope.is-open .envelope-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 62%,
    rgba(255, 240, 205, 0.95),
    rgba(255, 228, 165, 0.38) 34%,
    rgba(255, 216, 135, 0) 68%
  );
  animation: env-bloom 1.15s ease-out 0.3s;
}

@keyframes env-bloom {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  42% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes env-sheen {
  0%,
  64% {
    transform: translateX(-130%);
  }
  90%,
  100% {
    transform: translateX(130%);
  }
}

.envelope-pocket {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0) 38%),
    linear-gradient(#7d1414 0%, #560000 100%);
}

.envelope-flap {
  background: linear-gradient(#e0c063, #ad821f 55%, #7a5a10);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.26);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.envelope-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0.9% 1.4%, 99.1% 1.4%, 50% 97.4%);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%),
    linear-gradient(#a02929 0%, #6d0303 68%, #4e0000);
}

/* ---------- xi gắn ---------- */

.envelope-seal {
  top: 35%;
  width: 62px;
  height: 62px;
  margin-top: -10px;
  margin-left: -31px;
  rotate: -6deg;
  border-radius: 47% 53% 51% 49% / 54% 46% 54% 46%;
  background: radial-gradient(circle at 36% 30%, #fae9b8 0%, #e2c060 26%, #b98c22 58%, #8b681199 78%, #6b4f0c 100%);
  box-shadow:
    0 10px 22px rgba(105, 1, 1, 0.45),
    0 2px 5px rgba(60, 40, 0, 0.4),
    inset 0 3px 4px rgba(255, 255, 255, 0.6),
    inset 0 -8px 12px rgba(74, 46, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.envelope-seal::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 45% 55% 52% 48% / 56% 44% 56% 44%;
  background: radial-gradient(circle at 40% 36%, rgba(203, 160, 48, 0.55), rgba(141, 107, 18, 0) 72%);
  filter: blur(3px);
}

.envelope:not(.is-open) .envelope-seal::before {
  animation: env-seal-glow 3.6s ease-in-out infinite;
}

@keyframes env-seal-glow {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.envelope-seal svg {
  rotate: 6deg;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

/* ---------- thiếp trong phong bì ---------- */

.letter-card {
  inset: 57% 15% auto;
  padding: 0.55rem 0.7rem 0.6rem;
  border-radius: 2px;
  background: linear-gradient(#fffdf7, #f6eee0);
  transform: translateY(0);
  transition:
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
  box-shadow:
    0 8px 18px rgba(80, 0, 0, 0.18),
    inset 0 0 0 1px rgba(201, 162, 39, 0.45),
    inset 0 0 0 4px rgba(255, 255, 255, 0.6),
    inset 0 0 0 5px rgba(201, 162, 39, 0.2);
}

.letter-card p {
  font-size: 0.95rem;
  line-height: 1.35;
}

.letter-card p + p {
  margin-top: 0.05rem;
}

/* ---------- lúc mở ---------- */

@keyframes env-recede {
  to {
    filter: brightness(1.05);
    transform: scale(1.42) translateY(-2%);
  }
}

.envelope.is-open {
  animation-duration: 1.15s;
  animation-delay: 0.35s;
  animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
}

.letter-card.opening {
  transform: translateY(-50%) scale(1.03);
}

.letter-card.leaving {
  transform: translateY(-96%) scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .env-overlay::before,
  .env-overlay::after,
  .env-overlay > div {
    transition: none;
  }

  .env-overlay .text-primary.uppercase,
  .envelope-scene:not(.is-open),
  .envelope:not(.is-open) .envelope-body::before,
  .envelope:not(.is-open) .envelope-seal::before {
    animation: none;
  }

  .env-overlay .text-primary.uppercase {
    opacity: 1;
  }
}

/* Nut va o nhap khong tu thua ke font, khong dat lai thi trinh duyet rot ve Arial */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Cho mau 1 nhan bo font khach chon; khong chon thi giu nguyen font goc cua mau */
body,
.font-sans {
  font-family: var(--thiep-than, Montserrat, ui-sans-serif, system-ui, sans-serif);
}

.font-display,
.font-serif,
h1,
h2,
h3 {
  font-family: var(--thiep-de, "Cormorant Garamond", ui-serif, Georgia, serif);
}

/* anh story: de portrait day du, khong crop theo 4/3 */
#cau-chuyen article img {
  aspect-ratio: auto !important;
  object-position: top !important;
}