/*! Hái Lộc Thánh – © hailocthanh.com. Bảo lưu mọi quyền. All rights reserved. */
/* ==========================================================================
   Lộc Thánh – hiệu ứng hái lộc Lời Chúa
   Mọi class đều có tiền tố "lt-" để tránh đụng CSS của website khi gắn vào.
   ========================================================================== */

.lt-root,
.lt-portal {
  --lt-red: #b3121c;
  --lt-red-deep: #7a0910;
  --lt-gold: #f1c35b;
  --lt-gold-deep: #c8922e;
  --lt-cream: #fff4dc;
  --lt-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lt-font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --lt-font-script: 'Dancing Script', 'Brush Script MT', cursive;
}

.lt-root *,
.lt-root *::before,
.lt-root *::after,
.lt-portal *,
.lt-portal *::before,
.lt-portal *::after {
  box-sizing: border-box;
}

.lt-root {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--lt-cream);
  font-family: var(--lt-font-body);
  background: radial-gradient(ellipse 85% 65% at 50% 38%, #a8141e 0%, #6e070e 55%, #360206 100%);
  -webkit-tap-highlight-color: transparent;
}

:where(.lt-root, .lt-portal) :where(p, h1) {
  margin: 0;
}

.lt-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(241, 195, 91, 0.12) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 80%);
}

/* ---------- Nút ---------- */

.lt-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.8em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--lt-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--lt-red-deep);
  background: linear-gradient(180deg, #fff1bd 0%, #f1c35b 48%, #d6992a 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(130, 70, 0, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.lt-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.lt-btn:active {
  transform: translateY(0);
}

.lt-btn:focus-visible,
.lt-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.lt-btn:disabled {
  cursor: progress;
  opacity: 0.7;
}

.lt-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-18deg);
  animation: lt-btn-shine 3.6s ease-in-out infinite;
}

.lt-btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.lt-btn--hero {
  padding: 1em 2.5em;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  animation: lt-pulse 2.2s ease-out infinite;
}

@keyframes lt-btn-shine {
  0%, 70% { left: -40%; }
  100% { left: 130%; }
}

@keyframes lt-pulse {
  0% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(241, 195, 91, 0.6); }
  100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 22px rgba(241, 195, 91, 0); }
}

/* ---------- Màn hình mở đầu ---------- */

.lt-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  text-align: center;
}

.lt-intro__cross {
  width: 30px;
  margin-bottom: 1.1rem;
  color: var(--lt-gold);
  filter: drop-shadow(0 0 14px rgba(241, 195, 91, 0.7));
}

.lt-intro__logo {
  width: 88px;
  height: 88px;
  margin-bottom: 1rem;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 3px var(--lt-gold), 0 0 24px rgba(241, 195, 91, 0.55);
}

.lt-intro__sub {
  margin: -0.15em 0 0.9em;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lt-gold);
}

.lt-intro__kicker {
  font-family: var(--lt-font-script);
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 600;
  color: var(--lt-gold);
}

.lt-intro__title {
  margin: 0.15em 0 0.35em;
  font-family: var(--lt-font-display);
  font-size: clamp(2.7rem, 8vw, 5.2rem);
  font-weight: 700;
  line-height: 1.08;
  color: transparent;
  background: linear-gradient(180deg, #fff3c8 0%, #f1c35b 50%, #c8922e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35));
}

.lt-intro__lead {
  max-width: 34rem;
  margin-bottom: 2.4rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 240, 215, 0.88);
}

/* ---------- Cây lộc ---------- */

.lt-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  /* Giữ chậu và dòng tên miền cách đáy viewport ít nhất 12px + safe-area iPhone. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.lt-scene__head {
  position: relative;
  z-index: 2;
  flex: none;
  padding: clamp(14px, 3.5vh, 36px) 16px 0;
  text-align: center;
}

.lt-scene__title {
  font-family: var(--lt-font-display);
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  font-weight: 700;
  color: var(--lt-gold);
}

.lt-scene__hint {
  margin-top: 0.35rem;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-style: italic;
  color: rgba(255, 240, 215, 0.85);
}

/* Chiều cao an toàn cho cây: viewBox thật của SVG là 1000x1000.
   Cây chiếm đúng phần chiều cao còn lại sau khối tiêu đề (flex: 1),
   không bao giờ vượt đáy viewport. */
.lt-tree-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.lt-tree {
  position: relative;
  flex: none;
  height: 100%;
  height: min(100%, 100vw);
  width: auto;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}

/* Màn hình dọc (điện thoại): phóng to cây, cắt bớt mép cành hai bên */
@media (max-aspect-ratio: 4/5) {
  .lt-tree {
    height: min(100%, 122vw);
  }
}

.lt-tree::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 4%;
  bottom: 22%;
  background: radial-gradient(closest-side, rgba(255, 200, 90, 0.3), transparent);
  pointer-events: none;
}

.lt-tree__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lt-tree__hangs {
  position: absolute;
  inset: 0;
}

/* ---------- Bao lộc treo trên cây ---------- */

.lt-hang {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4em;
  margin-left: -2em;
  font-size: clamp(8px, 1.5cqw, 15px);
  transform-origin: 50% 0;
}

.lt-hang__string {
  position: relative;
  display: block;
  width: max(1px, 0.14em);
  height: calc(var(--len) * 0.1cqw);
  margin: 0 auto;
  background: linear-gradient(#ffe39a, #c8922e);
  transform-origin: 50% 0;
}

.lt-hang__string::before {
  content: '';
  position: absolute;
  top: -0.22em;
  left: 50%;
  width: 0.45em;
  height: 0.45em;
  margin-left: -0.225em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c4, #d9a03a);
}

.lt-env {
  position: relative;
  display: block;
  width: 4em;
  height: 6.2em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.4em;
  background: none;
  font: inherit;
  cursor: pointer;
}

.lt-env:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.lt-root.is-picking .lt-env {
  pointer-events: none;
}

.lt-env__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0.4em;
  background: linear-gradient(165deg, #ec3a3f 0%, #c3141f 45%, #8f0b14 100%);
  box-shadow: 0 0.35em 0.7em rgba(40, 0, 0, 0.45), inset 0 0 0 0.14em var(--lt-gold);
  transition: transform 0.25s ease, filter 0.25s ease;
}

.lt-env:hover .lt-env__inner,
.lt-env:focus-visible .lt-env__inner {
  transform: scale(1.1);
  filter: brightness(1.12) drop-shadow(0 0 0.6em rgba(255, 210, 110, 0.75));
}

.lt-env__inner::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-15deg);
  animation: lt-env-shine 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes lt-env-shine {
  0%, 82% { left: -60%; }
  100% { left: 130%; }
}

.lt-env__flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44%;
  background: var(--lt-gold);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%);
}

.lt-env__flap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #d81e28, #a90f19);
  clip-path: polygon(4% 0, 96% 0, 96% 38%, 50% 93%, 4% 38%);
}

.lt-env__seal {
  position: absolute;
  left: 50%;
  top: 29%;
  width: 1.3em;
  height: 1.3em;
  margin-left: -0.65em;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M10 0h4v9h8v4h-8v19h-4V13H2V9h8z' fill='%23a8101a'/%3E%3C/svg%3E") center / 42% no-repeat,
    radial-gradient(circle at 35% 30%, #fff1b8, #f1c35b 45%, #b97f1f);
  box-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.4);
}

.lt-env__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  font-family: var(--lt-font-script);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #ffd86b;
  text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.35);
}

/* ---------- Sân khấu (lớp phủ toàn màn hình) ---------- */

.lt-fx {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lt-stage {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  visibility: hidden;
  color: var(--lt-cream);
  font-family: var(--lt-font-body);
}

.lt-stage.is-open {
  visibility: visible;
}

.lt-stage__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(120, 8, 16, 0.84), rgba(25, 0, 3, 0.95));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lt-stage__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 96vmin;
  height: 96vmin;
  margin: -48vmin 0 0 -48vmin;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 120, 0.5), rgba(255, 180, 60, 0.14) 55%, transparent);
}

.lt-stage__rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  opacity: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, 0.17) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 8%, transparent 62%);
  animation: lt-spin 70s linear infinite;
}

@keyframes lt-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Phong bao lớn (khi đã hái xuống) ---------- */

.lt-big-env {
  --ew: min(240px, 56vw, 30vh);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ew);
  height: calc(var(--ew) * 1.6);
  margin: calc(var(--ew) * -0.8) 0 0 calc(var(--ew) * -0.5);
  font-size: calc(var(--ew) / 16);
  perspective: 1000px;
  visibility: hidden;
  filter: drop-shadow(0 1.2em 1.6em rgba(0, 0, 0, 0.45));
}

.lt-big-env__back {
  position: absolute;
  inset: 0;
  border-radius: 0.6em;
  background: linear-gradient(#4e050a, #7d0a12);
}

.lt-big-env__paper {
  position: absolute;
  left: 8%;
  top: 24%;
  z-index: 3;
  width: 84%;
  height: 70%;
  border-radius: 0.25em;
}

.lt-big-env__front {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 0.6em;
  background: radial-gradient(ellipse at 50% 70%, #e4313a 0%, #c0121d 50%, #8c0a13 100%);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 1.5em, #000 calc(1.5em + 1px));
  mask: radial-gradient(circle at 50% 0, transparent 1.5em, #000 calc(1.5em + 1px));
}

.lt-big-env__frame {
  position: absolute;
  inset: 0.6em;
  border: 0.12em solid var(--lt-gold);
  border-radius: 0.4em;
}

.lt-big-env__frame::before {
  content: '';
  position: absolute;
  inset: 0.3em;
  border: 0.05em solid rgba(241, 195, 91, 0.7);
  border-radius: 0.25em;
}

.lt-big-env__decor {
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--lt-gold);
}

.lt-big-env__cross {
  width: 1.5em;
  filter: drop-shadow(0 0 0.4em rgba(255, 210, 110, 0.6));
}

.lt-big-env__title {
  margin-top: 0.15em;
  font-family: var(--lt-font-script);
  font-size: 3.1em;
  font-weight: 700;
  line-height: 1.1;
  color: #ffd86b;
  text-shadow: 0 0.06em 0.12em rgba(0, 0, 0, 0.35);
}

.lt-big-env__year {
  font-family: var(--lt-font-display);
  font-size: 0.95em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.lt-big-env__sprig {
  width: 72%;
  margin-top: 0.6em;
}

.lt-big-env__flap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 42%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}

.lt-big-env__flap-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lt-big-env__flap-face--front {
  background: var(--lt-gold);
  clip-path: polygon(0 0, 100% 0, 100% 42%, 50% 100%, 0 42%);
}

.lt-big-env__flap-face--front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #db242d, #a70f19);
  clip-path: polygon(2.5% 0, 97.5% 0, 97.5% 41%, 50% 96%, 2.5% 41%);
}

.lt-big-env__flap-face--back {
  transform: rotateX(180deg);
  background: linear-gradient(0deg, #5e060c, #8f0f19);
  clip-path: polygon(50% 0, 100% 58%, 100% 100%, 0 100%, 0 58%);
}

.lt-big-env__seal {
  position: absolute;
  left: 50%;
  top: 62%;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  margin: -1.7em 0 0 -1.7em;
  border-radius: 50%;
  color: #a8101a;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f1c35b 45%, #b47a1c 100%);
  box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.4), inset 0 0 0 0.18em rgba(160, 100, 20, 0.5);
}

.lt-big-env__seal svg {
  width: 1.3em;
}

/* ---------- Mặt sau tờ lộc (khi còn gấp) ---------- */

.lt-paper-back {
  background-color: #f7e8c4;
  background-image: radial-gradient(rgba(190, 130, 30, 0.28) 1px, transparent 1.6px);
  background-size: 0.9em 0.9em;
  box-shadow: inset 0 0 0 0.3em #f7e8c4, inset 0 0 0 0.38em rgba(196, 140, 40, 0.65), inset 0 0 1.5em rgba(150, 100, 20, 0.18);
}

.lt-paper-seal::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M10 0h4v9h8v4h-8v19h-4V13H2V9h8z' fill='%23f6cf6e'/%3E%3C/svg%3E") center / 40% no-repeat,
    radial-gradient(circle at 35% 30%, #e43a3a, #a40f18 60%, #6d070d);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(255, 210, 120, 0.55);
}

/* ---------- Tờ Lộc Thánh ---------- */

.lt-card {
  --cw: min(86vw, 420px, calc(72vh * 0.75));
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--cw);
  height: calc(var(--cw) * 4 / 3);
  margin: calc(var(--cw) * -2 / 3) 0 0 calc(var(--cw) * -0.5);
  font-size: calc(var(--cw) / 24);
  perspective: 1600px;
  visibility: hidden;
  filter: drop-shadow(0 1em 1.6em rgba(0, 0, 0, 0.45));
}

.lt-card__half,
.lt-card__flap,
.lt-card__q {
  position: absolute;
}

.lt-card__half--bottom {
  left: 0;
  top: 50%;
  width: 100%;
  height: 50%;
  overflow: hidden;
  border-radius: 0 0 0.45em 0.45em;
}

.lt-card__flap--top {
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.lt-card__q--base {
  left: 0;
  top: 50%;
  width: 50%;
  height: 50%;
  border-radius: 0 0 0 0.45em;
}

.lt-card__flap--right {
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}

.lt-card__side {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lt-card__flap--top .lt-card__side {
  border-radius: 0.45em 0.45em 0 0;
}

.lt-card__flap--top .lt-card__side--back {
  transform: rotateX(180deg);
}

.lt-card__flap--right .lt-card__side {
  border-radius: 0 0 0.45em 0;
}

.lt-card__flap--right .lt-card__side--back {
  transform: rotateY(180deg);
}

.lt-card__creases,
.lt-card__shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0.45em;
  pointer-events: none;
}

.lt-card__creases {
  opacity: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1.5px), rgba(120, 80, 20, 0.16) 50%, transparent calc(50% + 1.5px)),
    linear-gradient(180deg, transparent calc(50% - 1.5px), rgba(120, 80, 20, 0.2) 50%, transparent calc(50% + 1.5px));
}

.lt-card__shine {
  visibility: hidden;
}

.lt-card__shine span {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 30%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-12deg);
}

.lt-face {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 200%;
  padding: 2.3em 2.6em 2.1em;
  text-align: center;
  color: #5a1a10;
  background: radial-gradient(ellipse 90% 70% at 50% 42%, #fffdf5 0%, #fbf1d9 60%, #f1dfb4 100%);
  box-shadow: inset 0 0 0 0.6em #a8131c, inset 0 0 0 0.72em #e2b04a, inset 0 0 0 0.98em #fffaf0, inset 0 0 0 1.04em #e2b04a;
}

.lt-card__half--bottom .lt-face {
  top: -100%;
}

.lt-face__corner {
  position: absolute;
  width: 2.1em;
  height: 2.1em;
}

.lt-face__corner--tl { top: 1.25em; left: 1.25em; }
.lt-face__corner--tr { top: 1.25em; right: 1.25em; transform: rotate(36deg); }
.lt-face__corner--bl { bottom: 1.25em; left: 1.25em; transform: rotate(18deg); }
.lt-face__corner--br { bottom: 1.25em; right: 1.25em; transform: rotate(54deg); }

.lt-face__cross {
  display: block;
  width: 1.25em;
  margin: 0 auto 0.5em;
  color: #c8922e;
}

.lt-face__kicker {
  padding-left: 0.28em;
  font-family: var(--lt-font-display);
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a8131c;
}

.lt-face__year {
  margin-top: 0.1em;
  font-family: var(--lt-font-script);
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.2;
  color: #b47a1c;
}

.lt-face__divider {
  position: relative;
  display: block;
  width: 8em;
  height: 1em;
  margin-top: 0.4em;
  background: linear-gradient(90deg, transparent, #d9a441 30%, #d9a441 70%, transparent) center / 100% 1px no-repeat;
}

.lt-face__divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5em;
  height: 0.5em;
  background: #d9a441;
  transform: translate(-50%, -50%) rotate(45deg);
}

.lt-face__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0.6em 0;
}

.lt-face__verse {
  font-family: var(--lt-font-body);
  font-size: 1.45em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
  color: #5a160e;
  text-wrap: balance;
}

.lt-card[data-size='m'] .lt-face__verse { font-size: 1.28em; }
.lt-card[data-size='l'] .lt-face__verse { font-size: 1.12em; }
.lt-card[data-size='xl'] .lt-face__verse { font-size: 1em; }

.lt-face__ref {
  margin-top: 0.9em;
  font-family: var(--lt-font-display);
  font-size: 1.05em;
  font-style: italic;
  font-weight: 700;
  color: #a8131c;
}

.lt-face__ref::before {
  content: '— ';
}

.lt-face__greet {
  font-family: var(--lt-font-script);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
  color: #a8131c;
}

.lt-face__site {
  margin-top: 0.3em;
  font-size: 0.72em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a07a3a;
}

/* ---------- Nút trên sân khấu ---------- */

.lt-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, 3.5vh);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  visibility: hidden;
}

.lt-close {
  position: absolute;
  top: max(12px, 2vh);
  right: max(12px, 2vw);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--lt-cream);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(241, 195, 91, 0.65);
  visibility: hidden;
  transition: background 0.2s ease;
}

.lt-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lt-close svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .lt-btn::after,
  .lt-btn--hero,
  .lt-env__inner::after,
  .lt-stage__rays {
    animation: none;
  }
}

/* ---------- Hái Lộc Thánh (web): người nhận, chân lộc (giáo xứ / thương hiệu), nút phụ ---------- */

.lt-card {
  --cw: min(86vw, 420px, calc(72vh * 0.75), calc((100dvh - 170px) * 0.75));
}

.lt-face__body {
  min-height: 0;
}

.lt-face__to {
  margin-top: 0.2em;
}

.lt-face__to[hidden] {
  display: none;
}

.lt-face__to-label {
  display: block;
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a07a3a;
}

.lt-face__name {
  font-family: var(--lt-font-script);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.15;
  color: #a8131c;
  overflow-wrap: anywhere;
}

.lt-face__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 82%;
  margin-top: 0.7em;
  padding-top: 0.75em;
  border-top: 1px solid rgba(217, 164, 65, 0.6);
  text-align: left;
}

.lt-face__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  overflow: hidden;
  border-radius: 50%;
  color: #e2b04a;
  background: #a8131c;
  box-shadow: 0 0 0 0.12em #e2b04a;
}

.lt-face__logo svg {
  width: 0.7em;
}

.lt-face__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lt-face__org {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lt-face__org-name {
  font-family: var(--lt-font-display);
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1.2;
  color: #5a1a10;
}

.lt-face__org-slogan {
  font-size: 0.64em;
  font-style: italic;
  line-height: 1.3;
  color: #8a6f55;
}

.lt-face__org-slogan:empty {
  display: none;
}

.lt-face__org-sub {
  font-size: 0.48em;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #a8131c;
}

.lt-face__org-sub:empty {
  display: none;
}

.lt-theme-neutral .lt-face__org-sub {
  color: #1f3a5f;
}

.lt-face__meta {
  margin-top: 0.55em;
  font-size: 0.56em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a07a3a;
}

.lt-btn[hidden] {
  display: none;
}

.lt-btn--ghost {
  color: var(--lt-cream);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
}

/* ---------- Theme trung tính (ngoài mùa Tết) ---------- */

.lt-theme-neutral {
  --lt-red: #1f3a5f;
  --lt-red-deep: #142844;
  --lt-gold: #e2c27a;
  --lt-gold-deep: #b8862b;
}

.lt-root.lt-theme-neutral {
  background: radial-gradient(ellipse 85% 65% at 50% 38%, #2c4f7c 0%, #1a3354 55%, #0d1b2e 100%);
}

.lt-theme-neutral .lt-env__inner {
  background: linear-gradient(165deg, #fffdf6 0%, #f3ead6 50%, #ddcfb2 100%);
  box-shadow: 0 0.35em 0.7em rgba(0, 10, 30, 0.45), inset 0 0 0 0.14em var(--lt-gold-deep);
}

.lt-theme-neutral .lt-env__flap { background: var(--lt-gold-deep); }
.lt-theme-neutral .lt-env__flap::before { background: linear-gradient(180deg, #fbf5e8, #e6dac0); }
.lt-theme-neutral .lt-env__label { color: #1f3a5f; }

.lt-theme-neutral .lt-stage__backdrop {
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 40, 70, 0.86), rgba(4, 10, 20, 0.95));
}

.lt-theme-neutral .lt-big-env__back { background: linear-gradient(#cdbf9f, #e6dbc2); }
.lt-theme-neutral .lt-big-env__front { background: radial-gradient(ellipse at 50% 70%, #fffdf6 0%, #f1e7d1 55%, #dccdae 100%); }
.lt-theme-neutral .lt-big-env__flap-face--front::before,
.lt-theme-neutral .lt-big-env__flap-face--front::after { background: linear-gradient(180deg, #fbf5e8, #e6dac0); }
.lt-theme-neutral .lt-big-env__flap-face--back { background: linear-gradient(0deg, #cdbf9f, #e2d6bb); }
.lt-theme-neutral .lt-big-env__title,
.lt-theme-neutral .lt-big-env__year,
.lt-theme-neutral .lt-big-env__cross { color: #1f3a5f; }

.lt-theme-neutral .lt-face {
  color: #2a2420;
  background: radial-gradient(ellipse 90% 70% at 50% 42%, #fffefa 0%, #f8f3e8 60%, #ece3d0 100%);
  box-shadow: inset 0 0 0 0.6em #1f3a5f, inset 0 0 0 0.72em #c8a45a, inset 0 0 0 0.98em #fffefa, inset 0 0 0 1.04em #c8a45a;
}

.lt-theme-neutral .lt-face__kicker,
.lt-theme-neutral .lt-face__ref,
.lt-theme-neutral .lt-face__greet,
.lt-theme-neutral .lt-face__name { color: #1f3a5f; }
.lt-theme-neutral .lt-face__org-name { color: #2a2420; }
.lt-theme-neutral .lt-face__logo { background: #1f3a5f; color: #e2c27a; box-shadow: 0 0 0 0.12em #c8a45a; }
.lt-theme-neutral .lt-face__foot { border-top-color: rgba(200, 164, 90, 0.6); }
.lt-theme-neutral .lt-face__verse { color: #2a2420; }
.lt-theme-neutral .lt-face__year { color: #8a6a2e; }