/* ---------- Phong bì ---------- */
.env-stage{position:relative;width:520px;height:340px;transform-origin:50% 50%}
.env{--env:#e8d9bd;position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.env-front,.env-wall{box-shadow:0 18px 30px -6px rgba(60,40,20,.3),0 2px 4px rgba(60,40,20,.12)}
.env.flipped{transform:rotateY(180deg)}
.env-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;background:var(--env)}
.env-back{transform:rotateY(180deg);perspective:2200px;overflow:visible;background:transparent}
.env-face.t-kraft,.env-back.t-kraft .env-wall,.env-back.t-kraft .pocket,.env-back.t-kraft .flap-out{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .08' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E")}
.env-front.t-airmail:before{content:'';position:absolute;inset:0;border:11px solid transparent;border-radius:4px;pointer-events:none;
  border-image:repeating-linear-gradient(-45deg,#c2433a 0 13px,transparent 13px 20px,#2c5c9c 20px 33px,transparent 33px 40px) 11}

/* Mặt trước */
.stamp{position:absolute;right:26px;top:24px;width:64px;height:80px;padding:5px;background:#fffdf7;
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,transparent 2.4px,#000 2.8px) -4px -4px/8px 8px;
  mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,transparent 2.4px,#000 2.8px) -4px -4px/8px 8px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));transform:rotate(2deg)}
.stamp svg,.stamp img{width:100%;height:100%;display:block;object-fit:cover}
.postmark{position:absolute;right:62px;top:34px;width:150px;height:76px;pointer-events:none;mix-blend-mode:multiply;opacity:.78;transform:rotate(-8deg)}
.postmark.stamping{animation:thud .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes thud{0%{opacity:0;transform:rotate(-8deg) scale(1.6)}60%{opacity:.9}100%{opacity:.78;transform:rotate(-8deg) scale(1)}}
.addr-from{position:absolute;left:30px;top:28px;font:13px/1.45 var(--letter-font,var(--hand));color:#3a302a;max-width:46%}
.addr-from small{display:block;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.addr-to{position:absolute;left:44%;right:28px;top:150px;color:#2b231f}
.addr-to small{display:block;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:2px}
.addr-to .name{font:30px/1.25 var(--letter-font,var(--hand));border-bottom:1px dotted rgba(60,45,35,.45);padding-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr-to .line{height:30px;border-bottom:1px dotted rgba(60,45,35,.3)}
.addr-sign{position:absolute;left:28px;bottom:22px;width:120px;height:46px;opacity:.75}
.addr-sign svg{width:100%;height:100%;overflow:visible}
.addr-sign .typed{font:28px var(--sign)}
.lock-tag{position:absolute;left:28px;bottom:24px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wine);border:1.5px solid var(--wine);padding:4px 8px;border-radius:3px;transform:rotate(-4deg);opacity:.85}

/* Mặt sau */
.env-wall{position:absolute;inset:0;border-radius:4px;background:color-mix(in srgb,var(--env) 82%,#000)}
.liner{position:absolute;inset:8px 8px 40%;border-radius:2px;opacity:.9}
.l-none .liner{display:none}
.l-dots .liner,.l-dots .flap-in{background:radial-gradient(circle,var(--liner-ink,#9e3b33) 2px,transparent 2.5px) 0 0/14px 14px,var(--liner-bg,#f6eadc)}
.l-stripes .liner,.l-stripes .flap-in{background:repeating-linear-gradient(90deg,var(--liner-ink,#9e3b33) 0 6px,var(--liner-bg,#f6eadc) 6px 16px)}
.l-floral .liner,.l-floral .flap-in{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='%23c46a5c' opacity='.75'%3E%3Ccircle cx='9' cy='6' r='3'/%3E%3Ccircle cx='13' cy='10' r='3'/%3E%3Ccircle cx='9' cy='14' r='3'/%3E%3Ccircle cx='5' cy='10' r='3'/%3E%3C/g%3E%3Ccircle cx='9' cy='10' r='2' fill='%23e8b64c'/%3E%3Cpath d='M26 24q4-6 8 0q-4 6-8 0' fill='%237d8c6a'/%3E%3C/svg%3E") 0 0/36px 36px,#f7ede0}
.l-stars .liner,.l-stars .flap-in{background:radial-gradient(circle,#f3d27a 1.2px,transparent 1.6px) 0 0/18px 18px,radial-gradient(circle,#fff 1px,transparent 1.4px) 9px 9px/18px 18px,#24324f}
.env-slot{position:absolute;inset:0;z-index:2;clip-path:inset(-300% -60% 0 -60%)}
.pocket{position:absolute;inset:0;border-radius:4px;background:var(--env);z-index:3}
.pocket.left{clip-path:polygon(0 0,51% 57%,0 100%);background-color:color-mix(in srgb,var(--env) 93%,#000)}
.pocket.right{clip-path:polygon(100% 0,49% 57%,100% 100%);background-color:color-mix(in srgb,var(--env) 92%,#fff)}
.pocket.bottom{clip-path:polygon(0 100%,50% 46%,100% 100%);background-color:color-mix(in srgb,var(--env) 97%,#000);filter:drop-shadow(0 -2px 3px rgba(0,0,0,.08))}
.flap{position:absolute;left:0;top:0;width:100%;height:50%;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.2,1);z-index:5}
.flap>div{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-out{background:color-mix(in srgb,var(--env) 96%,#fff);filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))}
/* Mặt trong của nắp: sau khi lật lên, đáy tam giác nằm ở mép phong bì, đỉnh hướng lên trên */
.flap .flap-in{transform:rotateX(180deg);clip-path:polygon(0 100%,100% 100%,50% 0);background:linear-gradient(0deg,color-mix(in srgb,var(--env) 80%,#000),color-mix(in srgb,var(--env) 90%,#fff))}
.env.open .flap{transform:rotateX(172deg)}
.env.open.flap-behind .flap{z-index:1}
.seal{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;z-index:6;transition:transform .3s,opacity .5s;touch-action:none}
.seal svg{width:100%;height:100%;overflow:visible;display:block}
.seal.pressing{transform:scale(.94)}
.seal .half{transition:transform 1s cubic-bezier(.4,0,.6,1),opacity 1s}
.seal.broken .half.a{transform:translate(-30px,140px) rotate(-40deg);opacity:0}
.seal.broken .half.b{transform:translate(34px,150px) rotate(35deg);opacity:0}
.seal.peeled{transform:translate(60px,-30px) rotate(40deg) scale(.8);opacity:0;transition:transform .8s,opacity .8s}
.env.open .seal{pointer-events:none}
.env-note{position:absolute;left:0;right:0;bottom:22px;text-align:center;z-index:4;font:22px var(--letter-font,var(--hand));color:#3a2f29;padding:0 40px;pointer-events:none}
.env-shadow-in{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%)}

@media (max-width:600px){.env-note{font-size:18px}}