/* ===== Tông màu ===== */
:root, [data-theme="kem"] { --bg:#fcf0f1; --card:#fff8f8; --paper:#fffdfc; --ink:#573a43; --muted:#98787f; --accent:#d9708f; --accent2:#f8d6df; --accent3:#f3dac3; --line:#f3d9dd; --ticket:#ffdf8f; --n1:#ffb8cf; --n2:#a8e3c4; --n3:#cdb9fa; }
[data-theme="bachha"] { --bg:#ecf4ef; --card:#f8fcf9; --paper:#fdfefd; --ink:#2d443d; --muted:#6b857b; --accent:#5a9c8a; --accent2:#d0e7de; --accent3:#efe3c4; --line:#d3e5da; --ticket:#ffc9a8; --n1:#9fe0c8; --n2:#ffd98f; --n3:#d7c2f7; }
[data-theme="oaihuong"] { --bg:#f1edf8; --card:#faf8ff; --paper:#fefeff; --ink:#3b3552; --muted:#7a7495; --accent:#8470c2; --accent2:#ddd5f2; --accent3:#efdfd6; --line:#ddd6ee; --ticket:#ffd29a; --n1:#cdb8f5; --n2:#a6e2cf; --n3:#ffb9cc; }
[data-theme="nau"] { --bg:#f5ede4; --card:#fcf7f0; --paper:#fffcf8; --ink:#44352b; --muted:#8a7563; --accent:#b4764d; --accent2:#ecd6c4; --accent3:#e9dcc0; --line:#e4d3c0; --ticket:#b9d9a6; --n1:#f2c99b; --n2:#b8d8b0; --n3:#f4b8ae; }
[data-theme="dem"] { --bg:#1c1f2e; --card:#272b3f; --paper:#2f3349; --ink:#f3eef4; --muted:#aaa7bd; --accent:#f09bb0; --accent2:#4b4060; --accent3:#f3dfc9; --line:#3b4058; --ticket:#ffdc9a; --n1:#f7b8cc; --n2:#c9bdf7; --n3:#a7e3c8; }
[data-theme="dao"] { --bg:#fdf0e9; --card:#fffaf6; --paper:#fffdfb; --ink:#523a34; --muted:#977c72; --accent:#e0805f; --accent2:#fbd9c9; --accent3:#e6dcf3; --line:#f5dccf; --ticket:#a8dde2; --n1:#ffbd9f; --n2:#cdbdf3; --n3:#d3e8a4; }
[data-theme="bien"] { --bg:#eaf2f9; --card:#f7fafd; --paper:#fdfeff; --ink:#2f4258; --muted:#6d84a0; --accent:#5b8fc7; --accent2:#d0e2f4; --accent3:#f1ddd0; --line:#d5e4f1; --ticket:#ffc3a5; --n1:#a9d0f5; --n2:#ffd99a; --n3:#f7b9c7; }
[data-theme="matcha"] { --bg:#f1f4e8; --card:#fafcf4; --paper:#fdfef9; --ink:#38452f; --muted:#7a8a6c; --accent:#7e9f68; --accent2:#dde9cd; --accent3:#f1e8c8; --line:#dfe7d0; --ticket:#ffc9ae; --n1:#b9dc9a; --n2:#f8bcd4; --n3:#ffe08f; }
[data-theme="man"] { --bg:#faedf3; --card:#fff8fb; --paper:#fffcfd; --ink:#4d2a3b; --muted:#8d6a7b; --accent:#a94f78; --accent2:#f3d3e2; --accent3:#f1dcc9; --line:#efd5e1; --ticket:#ffe08a; --n1:#f3b1cd; --n2:#a9e0d0; --n3:#cbbaf2; }
[data-theme="vietquat"] { --bg:#eef0fb; --card:#f9faff; --paper:#fdfdff; --ink:#34376b; --muted:#7b80ad; --accent:#6f7bd6; --accent2:#d8def9; --accent3:#f6dfe8; --line:#dce0f5; --ticket:#ffbcd0; --n1:#b3c0fa; --n2:#ffd8a0; --n3:#a9e3cf; }

[data-font="a"] { --head:'Noto Serif', Georgia, serif; --text:'Noto Serif', Georgia, serif; }
[data-font="b"] { --head:'Noto Serif', Georgia, serif; --text:'Noto Sans', system-ui, sans-serif; }
[data-font="c"] { --head:'Lora', Georgia, serif; --text:'Nunito', system-ui, sans-serif; }
:root { --hand:'Noto Serif', Georgia, serif; --r:20px; }
body { --deep:color-mix(in srgb, var(--accent) 68%, #000); }

* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { background:var(--bg); color:var(--ink); font-family:var(--text); line-height:1.6; min-height:100vh; position:relative; transition:background .4s,color .4s; }
/* nền: vệt màu mềm + hạt giấy */
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(420px 420px at 8% 6%, color-mix(in srgb,var(--accent2) 70%,transparent), transparent 70%),
             radial-gradient(520px 520px at 100% 40%, color-mix(in srgb,var(--accent3) 40%,transparent), transparent 70%),
             radial-gradient(460px 460px at 0% 100%, color-mix(in srgb,var(--accent2) 60%,transparent), transparent 70%); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[hidden] { display:none !important; }
h1,h2,h3 { font-family:var(--head); font-weight:600; line-height:1.15; }
h1 { font-size:clamp(1.8rem,7vw,2.6rem); letter-spacing:-.01em; }
.sub,.hint { color:var(--muted); font-size:.95rem; }
.hint { margin-top:1.6rem; font-family:var(--hand); font-style:italic; font-size:1.05rem; }
.msg { min-height:1.4em; margin-top:.8rem; color:var(--accent); font-size:.95rem; }

/* nhãn chữ viết tay */
.eyebrow { font-family:var(--hand); font-style:italic; font-size:1.1rem; color:var(--accent); font-weight:700; line-height:1; margin-bottom:.5rem; transform:rotate(-2deg); display:inline-block; }
.hero .eyebrow, .center .eyebrow { display:inline-block; }
h2 { font-size:1.65rem; margin-bottom:1.3rem; position:relative; display:inline-block; padding-bottom:.55rem; }
h2::after { content:""; position:absolute; left:0; right:0; bottom:0; height:9px; background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left/26px 9px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='9' viewBox='0 0 40 9'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left/26px 9px; }

/* ===== Nút & ô nhập ===== */
.btn { background:var(--accent); color:#fff; border:2px solid var(--deep); border-radius:999px; padding:.7rem 1.6rem; font:700 1rem var(--text); cursor:pointer; box-shadow:0 4px 0 var(--deep); transition:transform .12s, box-shadow .12s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 5px 0 var(--deep); }
.btn:active { transform:translateY(4px); box-shadow:0 0 0 var(--deep); }
.btn.ghost { background:var(--card); color:var(--deep); }
:focus-visible { outline:3px solid var(--accent3); outline-offset:3px; }
input, textarea { width:100%; font:inherit; color:var(--ink); background:var(--paper); border:2px solid var(--line); border-radius:14px; padding:.7rem .95rem; margin-bottom:.7rem; transition:border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent); }
form.inline { display:flex; gap:.6rem; } form.inline input { margin:0; }

/* ===== Các lớp mở quà ===== */
.stage { min-height:100vh; display:grid; place-items:center; padding:1.5rem; position:relative; overflow:hidden; }
.center { text-align:center; max-width:420px; width:100%; position:relative; z-index:1; }
.fade-in { animation:fade .7s ease both; } @keyframes fade { from { opacity:0; transform:translateY(14px) scale(.98);} to { opacity:1; transform:none; } }

/* thẻ câu đố: giấy có đường khâu */
.card.center { background:var(--card); border-radius:26px; padding:2.4rem 1.6rem 2rem; box-shadow:0 2px 0 var(--line), 0 24px 50px -28px color-mix(in srgb,var(--deep) 60%,transparent); position:relative; transform:rotate(-1deg); }
.card.center::before { content:""; position:absolute; inset:9px; border:2px dashed var(--line); border-radius:19px; pointer-events:none; }
.card.center::after { content:""; position:absolute; top:-16px; left:50%; width:96px; height:30px; margin-left:-48px; transform:rotate(3deg); background:color-mix(in srgb,var(--accent3) 85%,transparent); box-shadow:0 2px 6px rgba(0,0,0,.08);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,16% 10%,84% 10%,88% 0,92% 10%,96% 0,100% 8%,100% 92%,96% 100%,92% 90%,88% 100%,84% 90%,16% 90%,12% 100%,8% 90%,4% 100%,0 92%); }
.quiz-q { margin:1rem 0 1.4rem; font-family:var(--head); font-size:1.25rem; }

/* sao lấp lánh trang trí */
.spark { position:absolute; width:22px; height:22px; background:var(--accent); opacity:.55; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); animation:twinkle 3.2s ease-in-out infinite; }
.s1 { top:12%; left:12%; } .s2 { top:20%; right:14%; width:14px; height:14px; animation-delay:.8s; background:var(--accent3); opacity:.9; }
.s3 { bottom:16%; left:18%; width:16px; height:16px; animation-delay:1.6s; background:var(--accent3); opacity:.9; } .s4 { bottom:22%; right:12%; animation-delay:2.2s; }
@keyframes twinkle { 50% { transform:scale(.6) rotate(20deg); opacity:.25; } }

/* hộp quà có nơ */
.giftbox { display:block; position:relative; width:220px; height:230px; margin:2rem auto 0; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; animation:bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(-8px) rotate(1deg); } }
.giftbox .body { position:absolute; bottom:0; left:14px; right:14px; height:128px; z-index:2; border-radius:8px 8px 16px 16px; background:repeating-linear-gradient(135deg,var(--accent) 0 14px,color-mix(in srgb,var(--accent) 88%,#fff) 14px 28px); border:2px solid var(--deep); box-shadow:0 18px 0 -8px rgba(0,0,0,.06), 0 22px 30px -12px rgba(0,0,0,.35); }
.giftbox .lid { position:absolute; bottom:122px; left:2px; right:2px; height:50px; z-index:3; border-radius:12px; background:var(--accent); border:2px solid var(--deep); transform-origin:left bottom; transition:transform .9s cubic-bezier(.3,1.5,.5,1); }
.giftbox .ribbon-v { position:absolute; bottom:0; left:50%; width:34px; margin-left:-17px; height:178px; z-index:4; background:var(--accent3); border:2px solid var(--deep); border-radius:4px; transition:opacity .4s; }
.giftbox .bow { position:absolute; bottom:166px; left:50%; width:90px; height:46px; margin-left:-45px; z-index:5; transition:transform .9s cubic-bezier(.3,1.5,.5,1), opacity .5s; transform-origin:center bottom; }
.giftbox .bow::before, .giftbox .bow::after { content:""; position:absolute; top:0; width:42px; height:38px; background:var(--accent3); border:2px solid var(--deep); }
.giftbox .bow::before { left:0; border-radius:100% 0 100% 12%; transform:rotate(-8deg); }
.giftbox .bow::after { right:0; border-radius:0 100% 12% 100%; transform:rotate(8deg); }
.giftbox .knot { position:absolute; bottom:162px; left:50%; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:var(--accent3); border:2px solid var(--deep); z-index:6; transition:opacity .4s; }
.giftbox .envelope { position:absolute; bottom:70px; left:40px; right:40px; height:96px; z-index:1; background:var(--paper); border:2px solid var(--deep); border-radius:6px; transition:transform 1s .35s ease; }
.giftbox .flap { position:absolute; inset:0 0 auto 0; height:52px; background:var(--accent2); clip-path:polygon(0 0,100% 0,50% 100%); }
.giftbox:hover .lid { transform:rotate(-3deg); }
.giftbox.open { animation:none; }
.giftbox.open .lid { transform:translate(-44px,-56px) rotate(-42deg); }
.giftbox.open .bow { transform:translate(-44px,-60px) rotate(-30deg); opacity:.0; }
.giftbox.open .knot, .giftbox.open .ribbon-v { opacity:0; }
.giftbox.open .envelope { transform:translateY(-112px) rotate(-3deg); }

/* phong thư lớn */
.env-big { display:block; position:relative; width:260px; height:176px; margin:0 auto; background:var(--accent2); border:2px solid var(--deep); border-radius:12px; cursor:pointer; box-shadow:0 5px 0 var(--deep), 0 24px 34px -18px rgba(0,0,0,.45); transition:transform .3s; animation:bob 3s ease-in-out infinite; }
.env-big:hover { transform:translateY(-4px) rotate(-1deg); }
.env-flap { position:absolute; inset:0 0 auto 0; height:104px; background:var(--accent); border-radius:10px 10px 0 0; clip-path:polygon(0 0,100% 0,50% 100%); }
.env-seal { position:absolute; left:50%; top:76px; width:40px; height:40px; margin-left:-20px; border-radius:50%; background:var(--accent3); border:2px solid var(--deep); box-shadow:inset 0 0 0 5px var(--accent3), inset 0 0 0 7px color-mix(in srgb,var(--deep) 40%,transparent); }
.env-big.open { transform:scale(1.2) rotate(-4deg); opacity:0; transition:.6s; animation:none; }

/* ===== Trang chính ===== */
main { max-width:700px; margin:0 auto; padding:0 1.1rem 3rem; }
.hero { text-align:center; padding:3.2rem 0 2rem; }
.hero h1 { margin-bottom:1.6rem; }
/* khung vòm cho đồng hồ */
.arch { position:relative; width:min(330px,86%); margin:0 auto; padding:2.6rem 1rem 1.6rem; background:var(--card); border:2px solid var(--deep); border-radius:999px 999px 24px 24px; box-shadow:7px 8px 0 var(--accent2); }
.arch::before { content:""; position:absolute; inset:9px; border:2px dashed color-mix(in srgb,var(--accent) 50%,transparent); border-radius:999px 999px 16px 16px; pointer-events:none; }
.big-count { font-family:var(--head); color:var(--accent); line-height:.95; }
.big-count span { font-size:clamp(4.4rem,22vw,6.4rem); font-weight:600; text-shadow:3px 3px 0 var(--accent2); }
.big-count small { display:block; font-family:var(--hand); font-style:italic; font-size:1.2rem; color:var(--deep); margin-top:.2rem; }
.arch .sub { font-size:.85rem; margin-top:.3rem; }
/* vé kỷ niệm tiếp theo */
.next-card { margin:2.2rem auto 1.4rem; max-width:320px; text-align:center; display:grid; gap:.05rem; padding:1rem 1.2rem; background:var(--accent3); color:#4a3a1c; border-radius:14px; position:relative; transform:rotate(1.5deg);
  -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat; }
.next-card span { font-family:var(--hand); font-style:italic; font-size:.95rem; opacity:.85; } .next-card strong { font-family:var(--head); font-size:1.2rem; } .next-card em { font-style:normal; font-weight:600; font-size:.9rem; }
.block { margin-top:3.4rem; }
.foot { text-align:center; margin-top:4rem; color:var(--muted); font-family:var(--hand); font-style:italic; font-size:1.05rem; }

/* ===== Dòng thời gian: polaroid dán băng keo ===== */
.timeline { list-style:none; padding:0 0 0 1.6rem; border-left:2px dashed var(--accent); display:grid; gap:2.2rem; margin-left:.4rem; }
.timeline li { position:relative; background:var(--paper); border-radius:6px; padding:.8rem .8rem 1.1rem; box-shadow:0 1px 0 var(--line), 0 16px 26px -16px rgba(60,30,30,.45); transform:rotate(1.2deg); }
.timeline li:nth-child(even) { transform:rotate(-1.3deg); }
.timeline li::before { content:""; position:absolute; left:calc(-1.6rem - 9px); top:1.4rem; width:16px; height:16px; border-radius:50%; background:var(--accent); border:4px solid var(--bg); box-shadow:0 0 0 2px var(--accent); }
.timeline li::after { content:""; position:absolute; top:-12px; left:50%; width:84px; height:24px; margin-left:-42px; transform:rotate(-3deg); background:color-mix(in srgb,var(--accent3) 80%,transparent); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.timeline li:nth-child(even)::after { transform:rotate(4deg); background:color-mix(in srgb,var(--accent2) 85%,transparent); }
.timeline time { display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--accent); border-radius:999px; padding:.1rem .7rem; margin-bottom:.45rem; }
.timeline h3 { font-size:1.25rem; margin-bottom:.25rem; }
.timeline p { color:var(--muted); font-size:.95rem; }
.timeline .by { font-family:var(--hand); font-style:italic; font-size:.9rem; margin-top:.4rem; color:var(--accent); }
.polaroid { display:block; width:100%; aspect-ratio:4/3; border-radius:3px; margin-bottom:.8rem; background:linear-gradient(135deg,var(--accent2),color-mix(in srgb,var(--accent3) 70%,var(--accent2))); position:relative; overflow:hidden; }
.polaroid::after { content:""; position:absolute; left:50%; top:50%; width:44px; height:38px; margin:-19px 0 0 -22px; background:#fff; opacity:.55; clip-path:polygon(50% 100%,5% 45%,5% 20%,25% 0,50% 18%,75% 0,95% 20%,95% 45%); }
.add { margin-top:1.6rem; background:var(--card); border:2px dashed var(--accent); border-radius:var(--r); padding:.95rem 1.1rem; }
.add summary { cursor:pointer; color:var(--deep); font-weight:700; list-style:none; }
.add summary::before { content:"+"; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:.55rem; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; }
.add[open] summary::before { content:"–"; }
.add form { margin-top:1rem; }

#map { height:300px; border-radius:6px; border:8px solid var(--paper); outline:1px solid var(--line); box-shadow:0 16px 26px -16px rgba(60,30,30,.5); transform:rotate(-.8deg); z-index:0; }

/* ===== Hũ điều ước: giấy nhớ ===== */
.wishes { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:1.3rem; }
@media (max-width:420px) { .wishes { grid-template-columns:1fr; } }
.wishes li:nth-child(3n+1) label { background:var(--accent3); } .wishes li:nth-child(3n+2) label { background:var(--accent2); } .wishes li:nth-child(3n) label { background:color-mix(in srgb,var(--accent) 22%,var(--paper)); }
.wishes li:nth-child(odd) { transform:rotate(-1.5deg); } .wishes li:nth-child(even) { transform:rotate(1.4deg); }
.wishes label { display:flex; gap:.6rem; align-items:flex-start; min-height:90px; padding:.9rem .9rem; border-radius:3px 3px 14px 3px; cursor:pointer; color:#3f3226; box-shadow:0 10px 16px -10px rgba(60,30,30,.5); font-family:var(--hand); font-style:italic; font-size:1rem; line-height:1.35; }
[data-theme="dem"] .wishes label { color:#2a2433; }
.wishes input { appearance:none; flex:none; width:22px; height:22px; margin:2px 0 0; padding:0; border:2px solid #3f3226; border-radius:50%; background:transparent; display:grid; place-items:center; cursor:pointer; }
.wishes input:checked { background:#3f3226; }
.wishes input:checked::after { content:"✓"; color:#fff; font:700 .8rem var(--text); }
.wishes .done span { text-decoration:line-through; text-decoration-thickness:2px; opacity:.55; }

/* ===== Kế hoạch: vé ===== */
.plans { list-style:none; padding:0; display:grid; gap:.9rem; margin-bottom:1.3rem; }
.plans li { position:relative; background:var(--paper); padding:.85rem 1rem .85rem 5.2rem; border-radius:12px; border:2px solid var(--line); min-height:68px; }
.plans li::before { content:"VÉ"; position:absolute; left:0; top:0; bottom:0; width:4rem; display:grid; place-items:center; background:var(--accent); color:#fff; font:700 .8rem var(--text); letter-spacing:.15em; border-radius:10px 0 0 10px; }
.plans li::after { content:""; position:absolute; left:4rem; top:8px; bottom:8px; border-left:2px dashed var(--accent); }
.plans b { font-family:var(--head); font-weight:600; font-size:1.08rem; display:block; }
.plans small { color:var(--accent); font-weight:700; }
.plans .by { color:var(--muted); display:block; font-family:var(--hand); font-style:italic; font-size:.85rem; }
form.stack { display:block; }

/* ===== Tâm thư: giấy kẻ dòng ===== */
.locked { text-align:center; background:var(--card); border:2px dashed var(--accent); border-radius:var(--r); padding:2.2rem 1rem; }
.locked::before { content:""; display:block; width:34px; height:34px; margin:0 auto .6rem; background:var(--accent); clip-path:polygon(20% 40%,20% 25%,35% 5%,65% 5%,80% 25%,80% 40%,95% 40%,95% 100%,5% 100%,5% 40%); }
.locked strong { display:block; font-family:var(--head); font-size:1.6rem; color:var(--accent); margin:.3rem 0; }
.letter { position:relative; background:var(--paper) repeating-linear-gradient(transparent 0 2.07rem, color-mix(in srgb,var(--accent2) 80%,transparent) 2.07rem calc(2.07rem + 2px)); border-radius:6px; padding:1.4rem 1.2rem 1.4rem 3.6rem; font-family:var(--hand); font-style:italic; font-size:1.08rem; line-height:calc(2.07rem + 2px); white-space:pre-line; box-shadow:0 1px 0 var(--line), 0 20px 30px -18px rgba(60,30,30,.5); transform:rotate(-.6deg); }
.letter::before { content:""; position:absolute; left:2.6rem; top:0; bottom:0; border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent); }
.letter::after { content:""; position:absolute; top:-12px; right:1.4rem; width:70px; height:24px; transform:rotate(5deg); background:color-mix(in srgb,var(--accent3) 85%,transparent); }

/* ===== Trình chiếu ===== */
.slideshow { position:fixed; inset:0; background:radial-gradient(circle at 50% 40%,#2b2540,#14131c); display:grid; place-items:center; z-index:50; padding:1.5rem; }
.slide { text-align:center; color:#fff; max-width:400px; width:100%; background:var(--paper); color:var(--ink); padding:1rem 1rem 1.6rem; border-radius:6px; transform:rotate(-2deg); box-shadow:0 30px 60px -20px #000; animation:fade .8s ease both; }
.slide h3 { font-size:1.5rem; } .slide p { color:var(--muted); font-family:var(--hand); font-style:italic; font-size:1rem; }
.close { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:999px; padding:.5rem 1.1rem; cursor:pointer; font:600 .9rem var(--text); }

/* ===== Bảng chọn giao diện ===== */
.style-btn { position:fixed; top:.8rem; right:.8rem; z-index:20; background:var(--card); color:var(--deep); border:2px solid var(--deep); border-radius:999px; padding:.35rem 1rem; font:700 .85rem var(--text); cursor:pointer; box-shadow:0 3px 0 var(--deep); }
.style-panel { position:fixed; top:3.6rem; right:.8rem; z-index:20; width:250px; background:var(--card); border:2px solid var(--deep); border-radius:var(--r); padding:1rem; box-shadow:5px 6px 0 var(--accent2); }
.label { font-family:var(--hand); font-style:italic; font-size:.95rem; color:var(--accent); margin:.2rem 0; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.chip { border:2px solid var(--line); background:var(--paper); color:var(--ink); border-radius:999px; padding:.25rem .75rem; font:600 .82rem var(--text); cursor:pointer; }
.chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent2); }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

/* ===== Tông màu tự chọn ===== */
[data-theme="tuychon"] { --accent:var(--base,#de6b8f); --bg:color-mix(in srgb,var(--base,#de6b8f) 9%,#fff); --card:color-mix(in srgb,var(--base,#de6b8f) 5%,#fff); --paper:#fffefe; --ink:color-mix(in srgb,var(--base,#de6b8f) 22%,#1f1418); --muted:color-mix(in srgb,var(--base,#de6b8f) 30%,#7a6a70); --accent2:color-mix(in srgb,var(--base,#de6b8f) 28%,#fff); --accent3:#fdeab9; --line:color-mix(in srgb,var(--base,#de6b8f) 22%,#fff); }

/* ===== Bảng chọn màu bằng ô màu ===== */
.swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.8rem; }
.sw { display:grid; justify-items:center; gap:.2rem; background:none; border:0; padding:.2rem; cursor:pointer; color:var(--ink); font:600 .72rem var(--text); border-radius:12px; }
.sw i { display:block; width:38px; height:38px; border-radius:50%; border:3px solid var(--paper); box-shadow:0 0 0 2px var(--line); }
.sw[aria-pressed="true"] i { box-shadow:0 0 0 3px var(--accent); }
.sw[aria-pressed="true"] { background:var(--accent2); }
.custom-color { display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.8rem; color:var(--muted); margin-bottom:.4rem; }
.custom-color input { width:46px; height:34px; padding:0; margin:0; border-radius:10px; cursor:pointer; }
.field { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.8rem; }
select { width:100%; margin-top:.3rem; font:inherit; color:var(--ink); background:var(--paper); border:2px solid var(--line); border-radius:14px; padding:.65rem .8rem; }

/* ===== Nhạc ===== */
.note { margin:-.5rem 0 1rem; }
.songs { list-style:none; padding:0; display:grid; gap:.6rem; }
.songs li { display:flex; align-items:center; gap:.8rem; background:var(--paper); border:2px solid var(--line); border-radius:14px; padding:.65rem .8rem; }
.songs li.now { border-color:var(--accent); background:var(--accent2); }
.songs .disc { flex:none; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; background:radial-gradient(circle,var(--paper) 0 6px,var(--accent) 7px); box-shadow:0 0 0 2px var(--deep); }
.songs li.now .disc { animation:spin 3s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.songs b { display:block; font-size:.95rem; line-height:1.3; }
.songs small { color:var(--muted); font-size:.78rem; }
.timeline .song-tag { display:inline-block; margin-left:.4rem; font-size:.74rem; color:var(--deep); background:var(--accent2); border-radius:999px; padding:.1rem .6rem; }

.musicbar { position:fixed; left:50%; bottom:.9rem; transform:translateX(-50%); z-index:30; width:min(380px,calc(100% - 1.6rem)); display:flex; align-items:center; gap:.7rem; background:var(--card); border:2px solid var(--deep); border-radius:999px; padding:.4rem .5rem .4rem .45rem; box-shadow:0 4px 0 var(--deep), 0 18px 30px -14px rgba(0,0,0,.35); }
.mb-btn { flex:none; width:42px; height:42px; border-radius:50%; border:2px solid var(--deep); background:var(--accent); color:#fff; font-size:1rem; cursor:pointer; }
.mb-btn.small { width:34px; height:34px; background:var(--card); color:var(--deep); font-size:.85rem; }
.mb-info { flex:1; min-width:0; line-height:1.25; }
.mb-info small { display:block; color:var(--muted); font-size:.7rem; }
.mb-info strong { display:block; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ytWrap { position:fixed; left:-9999px; top:0; width:200px; height:200px; }
main { padding-bottom:6rem; }

/* ===== Viền chuyển động: nơ, kẹo, gấu, thỏ ===== */
.block::before { content:""; display:block; height:52px; margin-bottom:1rem; background:url(img/strip.svg) repeat-x 0 50% / 440px 52px; animation:march 24s linear infinite; }
@keyframes march { to { background-position:-440px 50%; } }
.foot-deco { display:block; width:440px; max-width:100%; margin:0 auto .6rem; }
.foot p { margin:0; }

/* nhân vật quanh khung đồng hồ */
.arch { overflow:visible; }
.hero h1 { margin-bottom:4rem; }
.deco { position:absolute; pointer-events:none; user-select:none; }
.d-bear { width:74px; top:-52px; left:50%; margin-left:-37px; animation:peek 3.4s ease-in-out infinite; transform-origin:50% 100%; }
.d-bunny { width:56px; left:-20px; bottom:-12px; transform:rotate(-10deg); animation:wave 2.6s ease-in-out infinite; transform-origin:50% 90%; }
.d-lolli { width:34px; right:-12px; bottom:-14px; transform:rotate(14deg); animation:sway 3.2s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes peek { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(3deg); } }
@keyframes wave { 0%,100% { transform:rotate(-10deg); } 50% { transform:rotate(-2deg) translateY(-3px); } }
@keyframes sway { 0%,100% { transform:rotate(8deg); } 50% { transform:rotate(22deg); } }

/* hình bay lơ lửng ở các màn mở quà */
.float { position:absolute; width:46px; pointer-events:none; opacity:.95; animation:drift 6s ease-in-out infinite; z-index:0; }
@keyframes drift { 0%,100% { transform:translateY(0) rotate(var(--r,0deg)); } 50% { transform:translateY(-14px) rotate(calc(var(--r,0deg) + 8deg)); } }

/* thư gấp kín */
.letter-cover { display:block; position:relative; width:min(300px,100%); height:170px; margin:0 auto; background:var(--accent2); border:2px solid var(--deep); border-radius:12px; cursor:pointer; box-shadow:0 5px 0 var(--deep), 0 22px 30px -18px rgba(0,0,0,.45); transition:transform .25s; font:inherit; color:var(--deep); }
.letter-cover:hover { transform:translateY(-3px) rotate(-1deg); }
.lc-flap { position:absolute; inset:0 0 auto 0; height:100px; background:var(--accent); border-radius:10px 10px 0 0; clip-path:polygon(0 0,100% 0,50% 100%); }
.lc-seal { position:absolute; left:50%; top:72px; width:38px; height:38px; margin-left:-19px; border-radius:50%; background:var(--accent3); border:2px solid var(--deep); box-shadow:inset 0 0 0 5px var(--accent3), inset 0 0 0 7px color-mix(in srgb,var(--deep) 40%,transparent); }
.lc-text { position:absolute; left:0; right:0; bottom:16px; font-style:italic; font-weight:600; font-size:1rem; }
.letter.unfold { animation:unfold .7s cubic-bezier(.2,1.2,.4,1) both; transform-origin:50% 0; }
@keyframes unfold { from { opacity:0; transform:scaleY(.2) rotate(-2deg); } to { opacity:1; transform:rotate(-.6deg); } }
.fold { display:block; margin:1.1rem auto 0; }

/* ===== Slogan chân trang ===== */
.foot p { font-family:var(--head); font-style:italic; font-size:1.15rem; color:var(--deep); padding:0 .5rem; }
.foot form { display:grid; gap:.5rem; max-width:340px; margin:.4rem auto; } .foot form input { margin:0; text-align:center; }
.linkbtn { background:none; border:0; color:var(--muted); font:inherit; font-size:.8rem; text-decoration:underline; cursor:pointer; margin-top:.6rem; }
.d-mochi { width:48px; right:18px; top:-22px; transform:rotate(8deg); animation:peek 3s ease-in-out infinite .6s; }

/* ===== Tâm thư: giấy viết thư thanh lịch (ghi đè bản cũ) ===== */
.letter { background:linear-gradient(180deg, color-mix(in srgb,var(--accent2) 22%,var(--paper)), var(--paper) 40%); font-family:var(--text); font-style:normal; font-size:1rem; line-height:1.95; letter-spacing:.005em; white-space:normal; padding:2.2rem 1.6rem 1.8rem; border-radius:4px; color:var(--ink); transform:rotate(-.4deg); box-shadow:0 1px 0 var(--line), 0 22px 34px -20px rgba(60,30,30,.45); }
.letter::before { inset:10px; left:10px; right:10px; top:10px; bottom:10px; border:1.5px solid color-mix(in srgb,var(--accent) 35%,transparent); border-left-width:1.5px; border-radius:2px; pointer-events:none; }
.letter::after { top:-12px; right:1.4rem; }
.letter p { margin:0; }
.lt-greet { font-family:var(--head); font-weight:600; font-size:1.3rem; line-height:1.4; color:var(--deep); margin-bottom:1rem !important; }
.lt-body p { margin-bottom:.9rem !important; text-wrap:pretty; }
.lt-body p:first-child::first-letter { font-family:var(--head); font-weight:600; font-size:2.1em; float:left; line-height:.9; padding:.12em .12em 0 0; color:var(--accent); }
.lt-sign { text-align:right; font-family:var(--head); font-style:italic; font-weight:500; font-size:1.1rem; color:var(--deep); margin-top:1.1rem !important; }
.lt-sign::before { content:"— "; color:var(--accent); }
.lt-body p:first-child::first-letter { all:unset; }

/* ===== Kim tuyến nền ===== */
#glitter { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
#glitter img { position:absolute; opacity:.0; animation:glit 3.6s ease-in-out infinite; }
@keyframes glit { 0%,100% { opacity:0; transform:scale(.4) rotate(0); } 50% { opacity:.85; transform:scale(1) rotate(25deg); } }
.spark { background:#ffe08a !important; opacity:.8; }

/* ===== Nút mở thư & giấy thư: bản tinh tế ===== */
.letter-cover { width:min(310px,100%); height:196px; background:linear-gradient(180deg,#fffaf2,#f5eadc); border:1px solid color-mix(in srgb,var(--accent) 26%,#d8c4ae); border-radius:6px; box-shadow:inset 0 1px 0 #fff, 0 20px 36px -20px rgba(90,50,40,.5), 0 3px 8px -4px rgba(90,50,40,.25); color:var(--ink); perspective:600px; transition:transform .35s ease, box-shadow .35s ease; overflow:visible; }
.letter-cover:hover { transform:translateY(-4px); box-shadow:inset 0 1px 0 #fff, 0 28px 40px -20px rgba(90,50,40,.5), 0 4px 10px -4px rgba(90,50,40,.25); }
.letter-cover::before { content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:linear-gradient(to top right, transparent calc(50% - .6px), color-mix(in srgb,var(--accent) 24%,#d8c4ae) 50%, transparent calc(50% + .6px)) left bottom / 50% 58% no-repeat,
             linear-gradient(to top left, transparent calc(50% - .6px), color-mix(in srgb,var(--accent) 24%,#d8c4ae) 50%, transparent calc(50% + .6px)) right bottom / 50% 58% no-repeat; }
.lc-flap { height:116px; border-radius:6px 6px 0 0; background:color-mix(in srgb,var(--accent) 26%,#d8c4ae); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:50% 0; transition:transform .45s ease; }
.lc-flap::after { content:""; position:absolute; left:0; right:0; top:0; height:calc(100% - 1.5px); background:linear-gradient(180deg,#fdf4e8,#f3e5d3); clip-path:polygon(1px 0,calc(100% - 1px) 0,50% calc(100% - 1px)); }
.letter-cover:hover .lc-flap { transform:rotateX(26deg); }
.lc-seal { width:46px; height:46px; margin-left:-23px; top:90px; border:0; border-radius:52% 48% 50% 50% / 50% 52% 48% 50%; background:radial-gradient(circle at 34% 28%, #ecaab6, #cf6f84 62%, #b9566d); box-shadow:0 3px 6px -1px rgba(120,40,60,.45), inset 0 -2px 3px rgba(120,30,50,.35), inset 0 1px 2px rgba(255,255,255,.4); display:grid; place-items:center; animation:seal 3.2s ease-in-out infinite; }
.lc-seal::before { content:""; position:absolute; inset:6px; border-radius:50%; border:1px solid rgba(255,235,240,.55); }
.lc-seal::after { content:"✦"; color:rgba(255,240,244,.9); font-size:.95rem; text-shadow:0 1px 1px rgba(120,30,50,.4); }
@keyframes seal { 50% { transform:scale(1.06); } }
.lc-to { position:absolute; left:0; right:0; bottom:46px; font-family:var(--head); font-style:italic; font-size:1.05rem; color:var(--ink); }
.lc-text { bottom:18px; font-style:normal; font-weight:500; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }

.letter { background:linear-gradient(180deg, color-mix(in srgb,var(--paper) 78%,#f6ead7), color-mix(in srgb,var(--paper) 90%,#f1e3cc)); color:var(--ink); transform:none; border-radius:3px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 24px 40px -24px rgba(90,50,40,.5); padding:2.4rem 1.7rem 2.2rem; }
.letter::before { inset:9px; border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius:2px; }
.letter::after { top:auto; right:auto; left:50%; bottom:-15px; width:30px; height:30px; margin-left:-15px; transform:none; border-radius:52% 48% 50% 50% / 50% 52% 48% 50%; background:radial-gradient(circle at 34% 28%, #ecaab6, #cf6f84 62%, #b9566d); box-shadow:0 2px 4px rgba(120,40,60,.4); }
.lt-greet { color:var(--ink); font-size:1.25rem; }
.lt-greet::after { content:""; display:block; width:34px; height:1.5px; margin-top:.5rem; background:var(--accent); opacity:.7; }
.lt-sign { color:var(--ink); }
.btn.fold { background:none; border:0; box-shadow:none; color:var(--muted); font-weight:500; font-size:.85rem; text-decoration:underline; text-underline-offset:3px; margin-top:1.6rem; }
.btn.fold:hover { transform:none; box-shadow:none; color:var(--ink); }
.lc-seal { top:78px; }
.lc-to { bottom:40px; }
.songs .rm { margin-left:auto; flex:none; width:28px; height:28px; border-radius:50%; border:0; background:none; color:var(--muted); font-size:1.2rem; line-height:1; cursor:pointer; }
.songs .rm:hover { background:var(--accent2); color:var(--deep); }
.add .sub { margin-bottom:.7rem; }

/* ===== Vai trò: người nhận không thấy danh sách nhạc ===== */
body[data-role="guest"] .owner-only { display:none !important; }
body[data-role="guest"] .song-tag { display:none; }
body[data-role="guest"] .mb-info small { visibility:hidden; height:0; }

/* ===== Form sửa đầu trang ===== */
.hero-form { max-width:340px; margin:1rem auto 0; text-align:left; background:var(--card); border:2px dashed var(--accent); border-radius:var(--r); padding:1rem 1.1rem; }
.hero-form .field { margin-bottom:.5rem; } .hero-form input { margin:.25rem 0 0; }
.hf-actions { display:flex; gap:.6rem; justify-content:center; margin-top:.8rem; }
.hero .linkbtn { display:block; margin:.9rem auto 0; }

/* ===== Chế độ đêm: thẻ vàng và giấy nhớ vẫn sáng pastel ===== */
[data-theme="dem"] .wishes label { color:#3f3226; }
[data-theme="dem"] .wishes input { border-color:#3f3226; }
.style-panel { max-height:78vh; overflow:auto; }
[data-theme="dem"]::before { background:radial-gradient(420px 420px at 8% 6%, rgba(240,155,176,.16), transparent 70%), radial-gradient(520px 520px at 100% 45%, rgba(150,130,220,.18), transparent 70%), radial-gradient(460px 460px at 0% 100%, rgba(240,155,176,.12), transparent 70%); }
[data-theme="dem"]::after { mix-blend-mode:screen; opacity:.04; }

/* ===== Thẻ kỷ niệm tiếp theo + giấy nhớ: màu lấy từ bộ màu đang chọn ===== */
.next-card { background:var(--ticket); color:#3f3236; border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
.next-card span { color:color-mix(in srgb,var(--accent) 70%,#3f3236); }
.next-card em { color:color-mix(in srgb,var(--accent) 80%,#3f3236); }
.wishes li:nth-child(3n+1) label { background:var(--n1); }
.wishes li:nth-child(3n+2) label { background:var(--n2); }
.wishes li:nth-child(3n) label { background:var(--n3); }
.wishes label { color:#3f3236; border:1px solid color-mix(in srgb,var(--accent) 16%,transparent); box-shadow:0 10px 16px -12px rgba(60,30,40,.45); }
.wishes input { border-color:#3f3236; }
.wishes input:checked { background:#3f3236; }
[data-theme="tuychon"] { --accent3:color-mix(in srgb,var(--base,#de6b8f) 14%,#f4e6d3); --ticket:color-mix(in srgb,var(--base,#de6b8f) 12%,#f6e8d8); --n1:color-mix(in srgb,var(--base,#de6b8f) 20%,#fff); --n2:color-mix(in srgb,var(--base,#de6b8f) 10%,#f6e8d8); --n3:color-mix(in srgb,var(--base,#de6b8f) 14%,#ece6f4); }

/* ===== Hình trang trí đổi sắc theo bộ màu đang chọn ===== */
[data-theme="bachha"] { --hue:180deg; } [data-theme="oaihuong"] { --hue:275deg; } [data-theme="nau"] { --hue:45deg; }
[data-theme="dao"] { --hue:35deg; } [data-theme="bien"] { --hue:230deg; } [data-theme="matcha"] { --hue:120deg; }
[data-theme="man"] { --hue:-8deg; } [data-theme="vietquat"] { --hue:255deg; }

.next-card span { color:color-mix(in srgb,var(--accent) 50%,#3f3236); }
.next-card em { color:color-mix(in srgb,var(--accent) 60%,#3f3236); }

/* ===== Màu phối nhiều tông cho thẻ và giấy nhớ (tự chọn màu) ===== */
[data-theme="tuychon"] { --ticket:#f6e3d9; --n1:color-mix(in srgb,var(--base,#de6b8f) 20%,#fff); --n2:#fbe8c9; --n3:#d9ecdf; }

/* ===== Hình trang trí nổi như sticker, giữ màu riêng, không ăn theo màu thiệp ===== */
.block::before, .foot-deco, .deco, .float { filter:drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff) drop-shadow(0 6px 7px rgba(70,35,50,.28)); }
.block::before { height:56px; }
body[data-decor="sweets"] .block::before { background-image:url(img/strip-sweets.svg); }
body[data-decor="space"] .block::before { background-image:url(img/strip-space.svg); }
body[data-decor="garden"] .block::before { background-image:url(img/strip-garden.svg); }
body[data-decor="sweets"] .block::before, body[data-decor="space"] .block::before, body[data-decor="garden"] .block::before { background-size:460px 56px; animation-name:march460; }
@keyframes march460 { to { background-position:-460px 50%; } }
.foot-deco { width:460px; }

/* ===== Nút xem thử vai trò (chỉ có ở bản mẫu) ===== */
.demo-role { position:fixed; top:.8rem; left:.8rem; z-index:20; display:flex; align-items:center; gap:.25rem; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.2rem .3rem .2rem .7rem; font-size:.7rem; color:var(--muted); box-shadow:0 2px 8px -4px rgba(0,0,0,.25); }
.demo-role button { border:0; background:none; color:var(--ink); font:600 .72rem var(--text); border-radius:999px; padding:.25rem .6rem; cursor:pointer; }
.demo-role button[aria-pressed="true"] { background:var(--accent2); color:var(--ink); }

/* ===== Thẻ kỷ niệm + giấy nhớ: sáng, nổi khỏi nền ===== */
[data-theme="tuychon"] { --ticket:#ffdf8f; --n1:color-mix(in srgb,var(--base,#de6b8f) 45%,#fff); --n2:#a9e0d0; --n3:#cbbaf2; }
.next-card { background:linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), var(--ticket); border:0; filter:drop-shadow(0 10px 12px rgba(70,35,50,.28)); }
.wishes label { background-image:linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); border:2px solid rgba(255,255,255,.75); box-shadow:0 12px 18px -10px rgba(60,30,40,.5), 0 2px 0 rgba(60,30,40,.08); }
.wishes li:nth-child(3n+1) label { background-color:var(--n1); }
.wishes li:nth-child(3n+2) label { background-color:var(--n2); }
.wishes li:nth-child(3n) label { background-color:var(--n3); }
.next-card span, .next-card em { color:#5a3d48; }
.next-card strong { color:#3a2630; }

/* ===== Chế độ thật: đăng nhập, tạo trang, thông báo ===== */
.real .demo-role { display:none !important; }
.auth-card { max-width:440px; }
.auth-card .sub { margin:.6rem 0 1.2rem; }
.auth-card form { text-align:left; margin-top:1rem; }
.auth-card .field { margin-bottom:.7rem; }
.auth-card .field input, .auth-card .field textarea { margin:.25rem 0 0; }
.auth-list { display:grid; gap:.6rem; margin-top:1rem; }
.auth-list:empty { display:none; }
.auth-card .linkbtn { display:block; margin:1rem auto 0; }
#toast { position:fixed; left:50%; bottom:5.2rem; transform:translate(-50%,20px); background:var(--ink); color:var(--card); padding:.6rem 1rem; border-radius:999px; font-size:.85rem; opacity:0; pointer-events:none; transition:.3s; z-index:60; max-width:calc(100% - 2rem); text-align:center; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.reply { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; margin-top:.7rem; }
.reply p { margin:0; } .reply .by { font-size:.78rem; color:var(--muted); margin-bottom:.2rem; }

/* ===== Sửa / xóa ===== */
#ownerSettings { display:none; }
.real #ownerSettings { display:block; }
.item-actions { position:absolute; top:.45rem; right:.5rem; display:flex; gap:.2rem; z-index:2; }
.ia { width:28px; height:28px; border-radius:50%; border:0; background:rgba(255,255,255,.75); color:var(--ink); font-size:.95rem; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(60,30,40,.25); }
.ia:hover { background:#fff; }
.timeline li, .wishes li, .plans li { position:relative; }
.wishes li .item-actions { top:.35rem; right:.4rem; }
.dlg { position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:rgba(40,20,30,.45); padding:1rem; }
.dlg[hidden] { display:none !important; }
.dlg-card { width:min(420px,100%); max-height:90vh; overflow:auto; background:var(--card); border:2px solid var(--deep); border-radius:var(--r); padding:1.2rem 1.2rem 1rem; box-shadow:6px 8px 0 var(--accent2); }
.dlg-card h3 { margin-bottom:.8rem; }
.dlg-card .field { margin-bottom:.6rem; } .dlg-card input, .dlg-card textarea, .dlg-card select { margin:.25rem 0 0; }
.add.danger { border-color:#d96b6b; }
.add.danger summary { color:#b04545; }
.add.danger summary::before { background:#d96b6b; }
.add.danger .btn { background:#c95555; border-color:#7a2b2b; box-shadow:0 4px 0 #7a2b2b; }
#ownerSettings .field { display:block; }

/* ===== Ảnh kỷ niệm ===== */
.polaroid.has-photo { background-size:cover; background-position:center; background-repeat:no-repeat; }
.polaroid.has-photo::after { display:none; }
.photo-field input[type=file] { padding:.55rem .7rem; }
.photo-field small { display:block; margin-top:.2rem; }
#ownerSettings .photo-field { display:block; }

/* ===== Mã QR ===== */
#qrCanvas { display:block; width:min(300px,100%); height:auto; margin:1rem auto .6rem; border-radius:14px; box-shadow:0 14px 26px -16px rgba(60,30,40,.5); background:#fffaf6; }
.qr-link { word-break:break-all; font-size:.78rem; text-align:center; }
#qrBox .btn { display:block; margin:.8rem auto 0; }

/* ===== Chọn điểm trên bản đồ ===== */
.real-only { display:none; }
.real .real-only { display:block; }
.pick-row { display:flex; align-items:center; gap:.8rem; margin:.1rem 0 .3rem; }
.pick-row .btn { padding:.45rem 1rem; font-size:.9rem; }
.pick-row .linkbtn { margin:0; }
.pick-info, #mPickInfo { display:block; margin-bottom:.7rem; }
.map-card { width:min(560px,100%); }
.map-card form.inline { margin-bottom:.5rem; }
#pickMap { height:320px; border-radius:12px; border:1px solid var(--line); margin:.5rem 0 .8rem; z-index:0; }
.dlg .field .pick-row { margin-top:.35rem; }

/* ===== Trang thử / chuyển trang ===== */
.auth-actions { display:grid; gap:.6rem; margin-top:1rem; }
.auth-actions .btn { font-size:.92rem; }
.switch-row { margin:0 0 1.2rem; }
.switch-row .btn { width:100%; }