/* Thiệp sinh nhật động (assets/thiep.js): trang thiep/ của người nhận và màn Xem thử trong ngôi sao Sinh nhật.
   Tệp riêng, không nằm trong app.css: trang thiep/ chỉ nạp đúng phần này cho nhẹ — người nhận thường mở lần đầu, trong
   trình duyệt của Zalo hay Messenger, bằng mạng di động. Màu lấy từ biến do thiep.js đặt theo kiểu thiệp. */
.thiep{position:fixed;inset:0;z-index:33;display:none;overflow:hidden;color:var(--chu,#fff3df);
  background:linear-gradient(180deg,var(--n0,#2c2060) 0%,var(--n1,#191238) 55%,var(--n2,#0b0918) 100%);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.thiep.hien{display:block}
.thiep [hidden]{display:none!important}
.tp-nen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.tp-tieng,.tp-dong{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);width:38px;height:38px;padding:0;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;font:inherit;font-size:16px;line-height:1;color:var(--chu);
  border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.45)}
.tp-toi .tp-tieng,.tp-toi .tp-dong{border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.3)}
.tp-tieng{left:16px}
.tp-dong{right:16px}
.tp-tieng.tat{opacity:.5;text-decoration:line-through}
.tp-thu{position:absolute;z-index:6;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 21px);margin:0;
  max-width:calc(100% - 140px);padding:5px 12px;border-radius:999px;font-size:12px;line-height:1.35;text-align:center;
  background:rgba(0,0,0,.38);color:#fff}

.tp-bia,.tp-noi,.tp-hong{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 64px) 22px calc(env(safe-area-inset-bottom,0px) + 26px)}
.tp-cot{margin:auto;width:100%;max-width:520px}

/* ---------- bìa: hộp quà ---------- */
.tp-bia{transition:opacity .55s ease,visibility 0s .55s}
.tp-hien-noi .tp-bia{opacity:0;visibility:hidden;pointer-events:none}
.tp-bia-gui,.tp-chuc{margin:0;font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--nhan)}
.tp-bia-gui{animation:tp-len .9s .1s both}
.tp-bia-ten,.tp-ten{margin:6px 0 0;font:600 min(var(--co-ten,60px),14vw)/1.06 "Cormorant Garamond",Georgia,serif;color:var(--chu);
  text-wrap:balance;overflow-wrap:anywhere}
.tp-bia-ten{animation:tp-len .9s .25s both}
.tp-qua{display:block;width:min(54vw,220px);aspect-ratio:1;margin:22px auto 4px;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.32));animation:tp-nhun 2.6s ease-in-out infinite}
.tp-qua:focus-visible{outline:2px solid var(--nhan);outline-offset:6px;border-radius:22px}
.tp-hop{display:block;width:100%;height:100%;overflow:visible}
.tp-hop-no{fill:var(--no)}
.tp-hop-no2{fill:rgba(0,0,0,.18)}
.tp-hop-bong{fill:rgba(0,0,0,.22)}
.tp-hop-nap,.tp-hop-than{transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.75,.3,1),opacity .55s ease}
.tp-bia-cham{margin:14px 0 0;font-size:14px;color:var(--mo);animation:tp-tho 2.2s ease-in-out infinite}
.tp-bia-tu{margin:16px 0 0;font:italic 400 21px/1.3 "Cormorant Garamond",Georgia,serif;color:var(--nhan)}
.tp-bia-tu:empty,.tp-ky:empty{display:none}
.tp-dang-mo .tp-qua{animation:tp-rung .48s linear both}
.tp-bung .tp-qua{animation:none;transform:scale(1.1)}
.tp-bung .tp-hop-nap{transform:translate(-14px,-170px) rotate(-34deg);opacity:0}
.tp-bung .tp-hop-than{transform:translateY(8px) scale(.9);opacity:0;transition-delay:.12s}
.tp-bung .tp-hop-bong{opacity:0;transition:opacity .4s}

/* ---------- thiệp: tên, bánh, lời chúc ---------- */
.tp-noi{visibility:hidden;pointer-events:none}
.tp-hien-noi .tp-noi{visibility:visible;pointer-events:auto}
.tp-noi .tp-cot>*{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1)}
.tp-hien-noi .tp-chuc{opacity:1;transform:none;transition-delay:.05s}
.tp-hien-noi .tp-ten{opacity:1;transform:none;transition-delay:.18s}
.tp-hien-noi .tp-banh{opacity:1;transform:none;transition-delay:.4s}
.tp-hien-noi .tp-loi{opacity:1;transform:none;transition:none}
.tp-hien-noi .tp-ky{opacity:1;transform:none;transition-delay:var(--tre-ky,2.5s)}
.tp-viet-xong .tp-ky{transition-delay:0s}
.tp-ten{background:linear-gradient(100deg,var(--chu) 0 42%,var(--sang) 50%,var(--chu) 58% 100%);background-size:300% 100%;
  background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tp-hien-noi .tp-ten{animation:tp-loe 5s ease-in-out 1.3s infinite}
.tp-toi .tp-ten{filter:drop-shadow(0 0 18px rgba(243,207,122,.28))}
.tp-banh{display:block;width:min(78vw,360px,calc(38vh * 1.05));height:auto;aspect-ratio:600/570;margin:4px auto 0;cursor:pointer}
.tp-loi{margin:6px auto 0;max-width:30em;font:italic 400 min(var(--co-loi,24px),6.6vw)/1.38 "Cormorant Garamond",Georgia,serif;
  color:var(--chu);text-wrap:pretty;overflow-wrap:anywhere}
.tp-loi span{display:inline-block;opacity:0;transform:translateY(.4em)}
.tp-dang-viet .tp-loi span{animation:tp-chu .7s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--tre-chu,1.5s) + var(--i,0) * var(--buoc,.07s))}
.tp-viet-xong .tp-loi span{animation:none;opacity:1;transform:none}
.tp-ky{margin:12px 0 0;font-size:15px;letter-spacing:.04em;color:var(--nhan)}

.tp-goi,.tp-het{display:none;margin:18px 0 0}
.tp-cho .tp-goi{display:block;opacity:1;transform:none;animation:tp-len .7s both}
.tp-xong .tp-het{display:block;opacity:1;transform:none;animation:tp-len .8s .25s both}
.tp-goi-chu{margin:0;font-size:14.5px;line-height:1.55;color:var(--chu);animation:tp-tho2 2.4s ease-in-out infinite}
.tp-uoc{margin:0;font:italic 400 23px/1.3 "Cormorant Garamond",Georgia,serif;color:var(--nhan)}
.tp-nut{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.tp-nut button,.tp-nut a,.tp-mic,.tp-hong a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;
  box-sizing:border-box;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.55);color:var(--chu);
  font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
.tp-mic{margin-top:10px}
.tp-mic:disabled{opacity:.6;cursor:default}
.tp-toi .tp-nut button,.tp-toi .tp-nut a,.tp-toi .tp-mic{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
.tp-nut .tp-lam,.tp-hong a{border-color:transparent;background:var(--nhan);color:#fff;font-weight:600}
.tp-toi .tp-nut .tp-lam,.tp-toi.thiep .tp-hong a{background:linear-gradient(#ffe39a,#f0b955);color:#2a1a05}
.tp-nut button:disabled{opacity:.6;cursor:default}
.tp-xem-thu .tp-nut .tp-lam,.thiep:not(.tp-xem-thu) .tp-sua{display:none}
.tp-goi-phao{margin:12px 0 0;font-size:12.5px;color:var(--mo)}

/* ---------- link hỏng ---------- */
.tp-hong-hinh{margin:0;font-size:44px}
.tp-hong h1{margin:8px 0 10px;font:600 34px/1.15 "Cormorant Garamond",Georgia,serif}
.tp-hong p{max-width:22em;margin:0 auto 18px;font-size:14.5px;line-height:1.6;color:var(--mo)}

/* ---------- ảnh để giữ vào lưu (trình duyệt trong Zalo, Messenger không tải tệp được) ---------- */
.tp-anh{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 20px);
  background:rgba(8,6,14,.9)}
.tp-anh img{max-width:100%;max-height:72vh;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.6);
  -webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.tp-anh p{margin:0;font-size:13.5px;color:#f4efe6}
.tp-anh-nut{display:flex;gap:8px}
.tp-anh-nut a,.tp-anh-nut button{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#f4efe6;font:inherit;font-size:14px;text-decoration:none;cursor:pointer}

@keyframes tp-len{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tp-chu{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes tp-nhun{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-1.5deg)}}
@keyframes tp-tho{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes tp-tho2{0%,100%{opacity:.68}50%{opacity:1}}
@keyframes tp-loe{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@keyframes tp-rung{0%{transform:rotate(0) scale(1)}12%{transform:rotate(-8deg) scale(1.04)}26%{transform:rotate(7deg) scale(1.06)}
  40%{transform:rotate(-6deg) scale(1.07)}54%{transform:rotate(5deg) scale(1.08)}68%{transform:rotate(-3deg) scale(1.09)}
  84%{transform:rotate(2deg) scale(1.1)}100%{transform:rotate(0) scale(1.1)}}

@media (prefers-reduced-motion:reduce){
  .tp-qua,.tp-dang-mo .tp-qua,.tp-bia-cham,.tp-goi-chu,.tp-hien-noi .tp-ten,.tp-bia-gui,.tp-bia-ten{animation:none}
  .tp-noi .tp-cot>*,.tp-hop-nap,.tp-hop-than{transition:none}
  .tp-loi span{opacity:1;transform:none}
  .tp-dang-viet .tp-loi span{animation:none}
}