*{box-sizing:border-box;}
:root{--kyyeu-accent:#8B5E3C; --kyyeu-heading-font:'Cormorant Garamond',serif; --kyyeu-heading-scale:1;}
html{background:#F2E9DA;}
body{margin:0; background:var(--kyyeu-bg,#F2E9DA); color:#3B2F24; font-family:'Literata',serif; line-height:1.7; overflow-x:hidden;}
.wrap{max-width:700px; margin:0 auto;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important; transition-duration:.001s !important;} }

/* HỘP KHÓA */
.vault-stage{position:fixed; inset:0; z-index:100; background:#241C15; display:flex; align-items:center; justify-content:center; transition:opacity .8s ease;}
.vault-stage.opened{opacity:0; pointer-events:none;}
.vault-box{text-align:center; position:relative;}
.vault-lid{
  width:230px; height:150px; margin:0 auto 20px; border-radius:6px;
  background:linear-gradient(160deg,#6B4A32,#4A3222);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.3), 0 20px 40px rgba(0,0,0,.5);
  border:3px solid #8B5E3C; position:relative;
  transform-origin:bottom center; transition:transform 1s cubic-bezier(.6,0,.3,1);
}
.vault-lid::before{content:""; position:absolute; inset:14px; border:1px dashed rgba(212,175,122,.4); border-radius:3px;}
.vault-stage.opened .vault-lid{transform:rotateX(-105deg);}
.vault-key{
  background:none; border:none; color:#D4AF7A; cursor:pointer; padding:8px;
  transition:transform .8s cubic-bezier(.6,0,.3,1);
}
.vault-key:hover{color:#F0D9A8;}
.vault-stage.opened .vault-key{transform:rotate(180deg); opacity:0;}
.vault-hint{color:#A08B70; font-size:13px; font-style:italic; margin-top:6px;}

/* COVER */
.cover{padding:56px 24px 24px; text-align:center;}
.eyebrow{font-size:11.5px; letter-spacing:.25em; color:var(--kyyeu-accent); margin-bottom:16px;}
.cover-photo{width:160px; height:160px; margin:0 auto 18px; border-radius:4px; overflow:hidden; border:8px solid #fff; box-shadow:0 14px 30px rgba(59,47,36,.22); transform:rotate(-1.5deg);}
.cover-photo img{width:100%; height:100%; object-fit:cover;}
.cover h1{font-family:var(--kyyeu-heading-font); font-weight:600; font-size:calc(40px * var(--kyyeu-heading-scale)); margin:0 0 8px; color:var(--kyyeu-accent);}
.cover p{margin:0; font-size:14px; color:#6E5B49;}
.wax-seal{
  display:inline-block; margin-top:18px; padding:8px 20px; border-radius:30px;
  background:#8C2F2F; color:#F5E4C8; font-size:11.5px; letter-spacing:.2em;
  box-shadow:0 4px 10px rgba(140,47,47,.3); transform:rotate(-2deg);
}

.section{padding:46px 24px 8px;}
.section-head{text-align:center; margin-bottom:26px;}
.section h2{font-family:var(--kyyeu-heading-font); font-weight:600; font-size:calc(28px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 4px;}
.section .sub{font-size:13px; color:#8A7660;}

/* KHO LƯU TRỮ ẢNH */
.archive-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.archive-item{margin:0; background:#fff; padding:6px 6px 22px; box-shadow:0 8px 18px rgba(59,47,36,.14); opacity:0; animation:fadeUp .6s ease forwards; animation-delay:var(--d);}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.archive-item img{width:100%; height:80px; object-fit:cover; display:block;}
.archive-item figcaption{font-size:10.5px; text-align:center; margin-top:6px; color:#7A6754;}
@media(min-width:600px){.archive-item img{height:110px;}}
@media(max-width:480px){.archive-grid{grid-template-columns:repeat(2,1fr);}}

.see-full{text-align:center; margin:24px 0 0;}
.see-full a{font-family:var(--kyyeu-heading-font); font-size:15px; color:var(--kyyeu-accent); text-decoration:none; border-bottom:1px solid var(--kyyeu-accent);}

/* THƯ NIÊM PHONG */
.sealed-letters{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:560px; margin:0 auto;}
.sealed-letter{cursor:pointer; perspective:900px;}
.letter-front, .letter-back{
  border-radius:4px; padding:20px 18px; transition:opacity .4s ease, transform .4s ease;
}
.letter-front{
  background:#F7EEDC; border:1px solid #D9C7A8; text-align:center;
  box-shadow:0 6px 16px rgba(59,47,36,.12);
}
.letter-stamp{display:block; font-size:24px; color:#8C2F2F; margin-bottom:8px;}
.letter-to{display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15.5px; color:#3B2F24;}
.letter-from{display:block; font-size:12px; color:#8A7660; margin-top:6px;}
.letter-back{display:none; background:#fff; border-left:3px solid var(--kyyeu-accent); box-shadow:0 6px 16px rgba(59,47,36,.12);}
.letter-back p{margin:0; font-size:14px; color:#3B2F24;}
.sealed-letter.open .letter-front{display:none;}
.sealed-letter.open .letter-back{display:block; animation:fadeUp .4s ease;}
@media(max-width:560px){.sealed-letters{grid-template-columns:1fr;}}

.notes{max-width:520px; margin:0 auto;}
.note{background:#fff; border-radius:4px; padding:16px 20px; margin-bottom:14px; box-shadow:0 6px 14px rgba(59,47,36,.08);}
.note p{margin:0 0 8px; font-size:14.5px;}
.note cite{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13.5px; color:var(--kyyeu-accent);}

.share{margin:50px 24px 30px; padding:36px 24px; text-align:center; border-radius:4px; background:#4A3222; color:#F2E9DA;}
.share h2{font-family:var(--kyyeu-heading-font); font-size:26px; margin:0 0 6px; color:#E8CFA8;}
.share p{font-size:13px; margin:0 0 18px; color:#C4AE92;}
#qrcode{background:#fff; display:inline-block; padding:8px; margin-bottom:14px;}
.link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px;}
.link-row code{background:rgba(242,233,218,.12); padding:6px 12px; color:#E8CFA8;}
.link-row button{background:#D4AF7A; color:#3B2F24; border:none; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer;}

.foot{text-align:center; font-size:12px; color:#8A7660; padding:0 20px 40px;}

/* DANH MỤC HIỆN VẬT */
.inventory{max-width:520px; margin:0 auto; background:#FFFDF7; border:1px solid #E4DCC6;}
.inventory-row{display:flex; gap:14px; align-items:baseline; padding:12px 18px; border-bottom:1px dashed #EDE4CE;}
.inventory-row:last-child{border-bottom:none;}
.inv-no{font-family:'Cormorant Garamond',serif; color:var(--kyyeu-accent); font-size:14px; width:26px; flex-shrink:0;}
.inv-name{font-size:14.5px; color:#3B2F24; flex:1;}
.inv-desc{font-size:12.5px; color:#8A7660; font-style:italic; text-align:right; max-width:45%;}

/* ĐẾM NGƯỢC MỞ HỘP */
.vault-countdown{display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
.cd-cell{background:#4A3222; color:#F2E9DA; border-radius:6px; padding:14px 18px; min-width:72px; text-align:center;}
.cd-cell strong{display:block; font-family:'Cormorant Garamond',serif; font-size:28px; color:#E8CFA8;}
.cd-cell span{font-size:10px; letter-spacing:.1em; color:#C4AE92;}

/* CHỮ KÝ NIÊM PHONG */
.seal-signatures{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 20px; max-width:560px; margin:0 auto;}
.seal-sig{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--kyyeu-accent); opacity:.9;}
.seal-sig:nth-child(3n){color:#8C2F2F;}