@font-face{font-family:"LoraVN";src:url(../fonts/lora.ttf) format("truetype");font-weight:400 700;font-display:swap}
:root{--rose:#e0607e;--bg:#fff6f3;--ink:#4a2a30;--soft:#fbd9d9;--gold:#c9923a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"LoraVN","Segoe UI",Tahoma,Arial,sans-serif;line-height:1.6}
section,.hero,footer{max-width:960px;margin:auto;padding:48px 16px;text-align:center}
.hero{padding-top:72px}.eyebrow{letter-spacing:.3em;color:var(--gold);font-size:1.4rem;margin:0}
h1{font-size:clamp(1.8rem,6vw,3rem);color:var(--rose);margin:.3em 0}h2{color:var(--rose)}h3{text-align:left;margin:28px 0 8px}
.lead{max-width:640px;margin:auto;font-size:1.1rem}.sub{color:#8a6a70}
.cta,.btn,.bar button{display:inline-block;background:var(--rose);color:#fff;border:0;border-radius:99px;padding:12px 24px;font:inherit;text-decoration:none;cursor:pointer;margin:6px}
.cta{margin-top:20px}.bar button:last-child{background:var(--gold)}.btn{background:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:16px}
.card{border:0;background:none;padding:0;perspective:900px;height:300px;cursor:pointer;font:inherit;color:inherit}
.inner{display:block;position:relative;height:100%;transition:transform .6s;transform-style:preserve-3d}.card.open .inner{transform:rotateY(180deg)}
.face,.msg{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;background:#fff;box-shadow:0 4px 14px #e0607e33;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;gap:6px}
.face img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:4px solid var(--soft)}.face i{font-style:normal;color:var(--rose);font-size:.9rem}
.msg{transform:rotateY(180deg);background:var(--soft);font-size:.95rem}.msg b{color:var(--rose);font-size:1.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.grid button{border:0;padding:0;background:none;cursor:pointer}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
dialog{border:0;background:#000d;padding:0;max-width:96vw;max-height:96vh;margin:auto}dialog::backdrop{background:#000b}dialog img{max-width:96vw;max-height:92vh;display:block}
#x{position:absolute;right:6px;top:6px;border:0;background:#fff;border-radius:50%;width:36px;height:36px;font-size:1rem;cursor:pointer}
.ball{font-size:5rem;background:none;border:0;cursor:pointer}.hop{animation:hop .7s}@keyframes hop{30%{transform:translateY(-60px) rotate(180deg)}60%{transform:translateY(0)}80%{transform:translateY(-20px)}}
footer{color:#8a6a70;font-size:.9rem}
.yt{max-width:560px;margin:12px auto;aspect-ratio:16/9}.yt iframe{width:100%;height:100%;border:0;border-radius:12px}.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.vids video{width:100%;border-radius:12px;background:#000;max-height:80vh}
.fam{width:min(100%,640px);border-radius:16px;margin-top:20px;box-shadow:0 6px 20px #e0607e44}
button,input{font-family:inherit}