/* =========================================================
   LOVE JOURNEY — "Pink Edition"
   Thế giới: tạp chí / báo cắt dán, hồng phấn, mực đen, serif nghiêng
   ========================================================= */
:root{
  --acc:#b83d66;                 /* hồng đậm: nút, điểm nhấn (trắng trên nền này đạt 5:1) */
  --blush:#f7dde4;               /* hồng phấn: bề mặt */
  --petal:#f2b8c9;               /* hồng cánh hoa: chi tiết */
  --ink:#2a1d22;                 /* mực gần đen */
  --ink-2:#6e4f5b;               /* mực phụ, pha từ sắc hồng */
  --paper:#fffaf7;
  --news:#f5f1e8;
  --title:'Playfair Display','Noto Serif Thai',Georgia,serif;
  --serif:'Lora','Noto Serif Thai',Georgia,serif;
  --hand:'Dancing Script','Charm',cursive;
  --mast:'UnifrakturMaguntia','Playfair Display','Noto Serif Thai',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --soft:color-mix(in srgb,var(--acc) 16%,#fff);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Be Vietnam Pro','Noto Sans Thai',system-ui,sans-serif;color:var(--ink);background:#f3e4e7;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;color:inherit}
img{display:block}
::selection{background:var(--petal);color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--acc) 30%,#ead6db) transparent}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input,textarea{caret-color:var(--acc)}
.ico{display:inline-grid;width:16px;height:16px;flex:none}
.ico svg{width:100%;height:100%}

.btn{background:var(--acc);color:#fff;border:0;border-radius:999px;padding:10px 18px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .15s var(--ease),filter .15s}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc)}
.btn.sm{padding:7px 14px;font-size:13px}
.link-btn{background:none;border:0;color:var(--ink-2);font-size:14px}
.note{font-size:12px;color:var(--ink-2);margin:0}
.note.warn{color:#a8361f}

/* ================= SÂN KHẤU ================= */
.stage{position:relative;height:100dvh;overflow:hidden;color:var(--ink);isolation:isolate}
.bg-blush{background:radial-gradient(ellipse at 10% 0%,#fdf0f3 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#f1c4d1 0,transparent 55%),var(--blush)}
.bg-stripes{background:repeating-linear-gradient(90deg,#f6cfdb 0 28px,#fdeef2 28px 56px)}
.bg-paper{background:
  linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 44%,transparent 50%),
  linear-gradient(200deg,transparent 52%,rgba(80,50,20,.05) 58%,transparent 64%),
  linear-gradient(25deg,transparent 18%,rgba(80,50,20,.045) 25%,transparent 31%),#f5eee2}
.bg-gingham{background:
  repeating-linear-gradient(0deg,rgba(236,150,178,.26) 0 16px,transparent 16px 32px),
  repeating-linear-gradient(90deg,rgba(236,150,178,.26) 0 16px,transparent 16px 32px),#fffafb}
.bg-dots{background:radial-gradient(#f2b8c9 2.5px,transparent 3px) 0 0/26px 26px,#fff5f8}
.bg-night{--ink:#f6e9ef;--ink-2:#d9bfcb;background:
  radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 85% 65%,#fff,transparent),radial-gradient(1px 1px at 35% 80%,#fff,transparent),
  linear-gradient(180deg,#231a2e,#4a2840)}

/* ---- 5 phong cách: đổi màu + font cho toàn bộ trang ---- */
.th-mocha{--acc:#7a4b33;--blush:#ecdfcc;--petal:#d6bc9c;--ink:#2b1d16;--ink-2:#6e5444;--paper:#fbf6ee;--news:#efe4d2;
  --title:'Cormorant Garamond','Noto Serif Thai',Georgia,serif;--serif:'Lora','Noto Serif Thai',Georgia,serif;--hand:'Great Vibes','Charm',cursive}
.th-ivory{--acc:#8a6a2e;--blush:#f6f1e6;--petal:#e6d8b8;--ink:#2e2a24;--ink-2:#6f665a;--paper:#fffdf8;--news:#f3ecdc;
  --title:'Noto Serif Display','Noto Serif Thai',Didot,Georgia,serif;--serif:'Cormorant Garamond','Noto Serif Thai',Georgia,serif;--hand:'Great Vibes','Charm',cursive}
.th-editorial{--acc:#c0396a;--blush:#eceae6;--petal:#f2b8c9;--ink:#151515;--ink-2:#57514f;--paper:#fff;--news:#f1eee6;
  --title:'Noto Serif Display','Noto Serif Thai',Didot,Georgia,serif;--serif:'Lora','Noto Serif Thai',Georgia,serif;--hand:'Dancing Script','Charm',cursive}
.th-silver{--acc:#4b4f56;--blush:#e9eaee;--petal:#cfd3da;--ink:#1d1f24;--ink-2:#5d626b;--paper:#fbfbfc;--news:#eef0f3;
  --title:'Cormorant Garamond','Noto Serif Thai',Georgia,serif;--serif:'Lora','Noto Serif Thai',Georgia,serif;--hand:'Great Vibes','Charm',cursive}
.th-ivory .ttl,.th-editorial .ttl{font-weight:500}
.th-mocha .ttl,.th-silver .ttl{font-weight:700;font-size:31px}
.th-editorial .kick{font-family:'Oswald','Noto Sans Thai',sans-serif;letter-spacing:.12em}
.th-silver .next{background:linear-gradient(180deg,#5c6068,#2b2e33)}
.th-ivory .next{background:var(--acc)}

/* nền mới */
.bg-latte{background:radial-gradient(ellipse at 15% 0%,#f8efe2 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#d4b998 0,transparent 55%),#e9dbc6}
.bg-ivory{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(138,106,46,.07) 31px 32px),radial-gradient(ellipse at 50% 0%,#fffdf7,transparent 70%),#f5efe2}
.bg-newsprint{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 7px),
  linear-gradient(90deg,transparent calc(33.3% - 1px),rgba(0,0,0,.08) 33.3%,transparent calc(33.3% + 1px),transparent calc(66.6% - 1px),rgba(0,0,0,.08) 66.6%,transparent calc(66.6% + 1px)),#ecebe7}
.bg-satin{background:linear-gradient(160deg,#f6f7f9 0%,#d7dae0 32%,#f9fafb 52%,#cdd1d8 78%,#eef0f3 100%)}
.bg-roses{background:url(assets/bg/roses.webp) 0 0/240px}
.bg-candy{background:url(assets/bg/stripe-pink.webp) 0 0/300px}
.bg-pinkpaper{background:url(assets/bg/paper-pink.webp) 0 0/420px}

/* nhãn dán dạng ảnh cắt */
.stk.pic img{display:block;pointer-events:none;-webkit-user-drag:none}
.stk.pic{filter:drop-shadow(0 6px 8px rgba(40,22,18,.2))}

.fx{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .32 0 0 0 .22 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E")}
.fx .sp{position:absolute;bottom:-20px;width:7px;height:7px;background:#fff;opacity:0;animation:rise linear infinite;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.85}88%{opacity:.6}100%{transform:translateY(-105dvh) rotate(180deg);opacity:0}}

/* thanh trên cùng: trình phát nhạc + chấm tiến độ (đo chiều cao bằng JS để màn bên dưới không bị che) */
.chrome{position:absolute;left:0;right:0;top:0;z-index:6;padding:max(10px,env(safe-area-inset-top)) 12px 4px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.chrome>*{pointer-events:auto}
.dots{display:flex;gap:6px;justify-content:center;height:6px;pointer-events:none}
.dots i{width:6px;height:6px;border-radius:9px;background:var(--ink);opacity:.18;transition:all .4s var(--ease)}
.dots i.on{width:20px;opacity:1;background:var(--acc)}

.player{width:min(100%,360px);display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px 7px 7px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid #fff;border-radius:16px;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 14%,transparent);backdrop-filter:blur(10px);color:var(--ink)}
.player .cover{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--petal),var(--acc))}
.player .cover .ico{width:20px;height:20px}
.player b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player small{display:block;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .bar{height:3px;background:color-mix(in srgb,var(--petal) 70%,#fff);border-radius:3px;margin-top:6px;overflow:hidden}
.player .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .25s linear}
.player .ctl{display:flex;gap:2px;align-items:center}
.player .ctl button{width:32px;height:32px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.player .ctl button:hover{background:color-mix(in srgb,var(--petal) 45%,transparent)}
.player .ctl .pp{background:var(--ink);color:#fff}
.player .ctl .pp:hover{background:#000}
.player .ctl .ico{width:16px;height:16px}

.scene{position:absolute;left:0;right:0;bottom:0;top:var(--chrome-h,28px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  padding:14px 18px calc(24px + env(safe-area-inset-bottom));z-index:1;animation:sceneIn .7s var(--ease)}
@keyframes sceneIn{from{opacity:0;transform:translateY(16px)}}
.content{margin:auto;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:2}
.ttl{font-family:var(--title);font-style:italic;font-weight:600;font-size:28px;letter-spacing:-.015em;line-height:1.15;text-align:center;margin:0;text-wrap:balance;max-width:100%;overflow-wrap:anywhere;color:var(--ink)}
.hint{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;text-align:center;margin:0;color:var(--ink-2);text-wrap:balance}

.next{position:relative;z-index:2;flex:none;align-self:center;margin-top:24px;transform:translateY(12px);opacity:0;pointer-events:none;visibility:hidden;
  background:var(--ink);color:#fff;border:0;border-radius:999px;padding:13px 30px;font-weight:600;letter-spacing:.01em;box-shadow:0 6px 16px rgba(60,20,35,.2);
  transition:opacity .45s ease,transform .5s var(--ease),visibility 0s .45s}
.bg-night .next{background:#fff;color:#2a1d22}
.next.show{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.next:active{transform:scale(.96)}

/* nhãn dán: nằm DƯỚI nội dung khi xem, nổi lên khi chỉnh để kéo */
.stickers{position:absolute;left:0;top:0;width:100%;min-height:100%;pointer-events:none;z-index:1}
.stk{position:absolute;line-height:1;user-select:none;filter:drop-shadow(0 3px 3px rgba(60,30,20,.16))}
.stickers:not(.edit) .stk{opacity:0;transition:opacity .5s ease}
.stickers.settled .stk{opacity:1}
.stickers.edit{z-index:3}
.stickers.edit .stk{pointer-events:auto;cursor:grab;touch-action:none}
.stickers.edit .stk:active{cursor:grabbing}
.stickers.edit .stk:hover{outline:2px dashed var(--acc);outline-offset:4px;border-radius:8px}
/* tay cầm: góc dưới phải = đổi cỡ, chấm trên = xoay, × = xóa */
.stk .hd{display:none;position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--acc),0 2px 6px rgba(0,0,0,.25);
  font:700 16px/22px system-ui,sans-serif;font-style:normal;text-align:center;color:var(--acc);touch-action:none;z-index:3}
.stickers.edit .stk.sel{outline:2px solid var(--acc);outline-offset:6px;border-radius:6px;z-index:5}
.stickers.edit .stk.sel .hd{display:block}
.stk .hd.rs{right:-17px;bottom:-17px;cursor:nwse-resize}
.stk .hd.rs::after{content:"";position:absolute;inset:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.stk .hd.rt{left:50%;top:-44px;margin-left:-11px;cursor:grab}
.stk .hd.rt::before{content:"";position:absolute;left:10px;top:22px;width:2px;height:16px;background:var(--acc)}
.stk .hd.rt::after{content:"↻";position:absolute;inset:0;font-size:15px}
.stk .hd.dx{right:-17px;top:-17px;color:#c4304e;box-shadow:0 0 0 2px #c4304e,0 2px 6px rgba(0,0,0,.25)}
.stickers.edit .stk.gone{outline:2px dashed #d23a52;outline-offset:3px;border-radius:8px}

/* ================= ĐỒ TRANG TRÍ (đơn vị em → co giãn theo cỡ nhãn) ================= */
.d-sign{position:relative;width:11.5em;height:7.6em;font-family:var(--title)}
.d-sign .pole{position:absolute;left:50%;top:1.6em;bottom:0;width:.55em;transform:translateX(-50%);border-radius:.3em;background:linear-gradient(90deg,#8e949a,#eef0f2 45%,#868c92)}
.d-sign .pl{position:absolute;left:50%;padding:.38em 1.05em;background:#fff;color:#111;font-style:italic;font-weight:800;white-space:nowrap;border-radius:.5em;
  box-shadow:inset 0 0 0 .16em #fff,inset 0 0 0 .3em #111,0 .25em .6em rgba(0,0,0,.18)}
.d-sign .p1{top:.5em;font-size:1.15em;transform:translateX(-50%) rotate(-7deg)}
.d-sign .p2{top:3.1em;font-size:.95em;transform:translateX(-50%) rotate(5deg)}
.d-seal{width:4.8em;height:4.8em;border-radius:50%;display:grid;place-items:center;color:var(--acc);
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--petal) 35%,#fff) 0,var(--petal) 34%,color-mix(in srgb,var(--acc) 45%,var(--petal)) 70%,color-mix(in srgb,var(--acc) 70%,var(--petal)) 100%);
  box-shadow:inset 0 0 0 .42em rgba(255,255,255,.16),inset 0 -.35em .7em rgba(120,30,60,.28),0 .3em .7em rgba(120,30,60,.25)}
.d-seal svg{width:60%;height:60%;filter:drop-shadow(0 .06em 0 rgba(255,255,255,.6))}
.d-ticket{position:relative;width:10em;padding:.65em 2.2em .65em 1.25em;background:var(--petal);color:var(--ink);font-family:'Be Vietnam Pro','Noto Sans Thai',sans-serif;
  -webkit-mask:radial-gradient(circle .55em at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle .55em at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle .55em at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle .55em at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.d-ticket b{display:block;font-family:var(--title);font-style:italic;font-weight:800;font-size:1.3em;line-height:1.1}
.d-ticket span{display:block;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;margin-top:.2em}
.d-ticket i{position:absolute;right:.7em;top:.45em;bottom:.45em;border-left:.12em dashed rgba(58,31,42,.4);padding-left:.35em;writing-mode:vertical-rl;font-style:normal;font-size:.6em;letter-spacing:.12em;display:grid;place-items:center}
.d-tape{display:block;width:7em;height:1.7em;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--petal) 85%,transparent) 0 .6em,rgba(255,255,255,.75) .6em 1.2em)}

/* ================= CÁC MÀN ================= */
/* 1. khóa */
.tags{display:flex;gap:7px;justify-content:center;padding:16px 0 8px;width:100%;container-type:inline-size}
.tag{width:min(46px,calc((100cqw - (var(--n) - 1) * 7px - 8px) / var(--n)));aspect-ratio:46/62;flex:none;display:grid;place-items:center;font-size:min(34px,calc(70cqw / var(--n)));font-weight:700;transform:rotate(var(--r));box-shadow:0 3px 8px rgba(60,30,20,.18);position:relative;transition:transform .3s}
.tag.fill{animation:tagIn .45s var(--ease)}
@keyframes tagIn{from{transform:rotate(var(--r)) scale(.4);opacity:0}}
.t0{background:var(--ink);color:#fff;font-family:var(--title);font-style:italic}
.t1{background:#fff;color:var(--acc);font-family:var(--title);clip-path:polygon(22% 0,78% 0,100% 16%,100% 100%,0 100%,0 16%)}
.t2{background:var(--news);color:#1c1a1a;font-family:var(--mast);border:1px solid #ddd3c2}
.t3{background:var(--petal);color:var(--ink);border-radius:10px;font-family:var(--title);font-style:italic}
.t4{background:color-mix(in srgb,var(--petal) 35%,#fff);color:var(--acc);font-family:var(--title);font-weight:800;border:2px solid var(--acc)}
.t0::before,.t3::before{content:'';position:absolute;top:-8px;left:50%;width:30px;height:13px;transform:translateX(-50%) rotate(-4deg);
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--petal) 90%,transparent) 0 5px,rgba(255,255,255,.8) 5px 10px)}
.tags.ok .tag{animation:hop .55s calc(var(--i)*70ms) var(--ease)}
@keyframes hop{45%{transform:translateY(-14px) rotate(0)}}
.tags.bad{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.pad{display:grid;grid-template-columns:repeat(3,68px);gap:12px;transition:opacity .4s}
.pad.off{opacity:0;pointer-events:none}
.pad button{font-variant-numeric:lining-nums;height:58px;border-radius:18px;border:0;background:rgba(255,255,255,.82);font-family:var(--title);font-size:24px;font-weight:600;color:#2a1d22;box-shadow:0 1px 0 rgba(120,40,70,.06),0 6px 14px rgba(120,40,70,.08);transition:transform .1s,background .15s}
.pad button:active{transform:scale(.92);background:var(--petal)}
.unlocked{font-family:var(--hand);color:var(--acc);font-size:30px;animation:fadeUp .6s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}

/* 2. chat */
.chat{width:100%;display:flex;flex-direction:column;gap:10px}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,250,251,.85);border-radius:16px;color:#2a1d22;backdrop-filter:blur(8px)}
.chat-head .av{width:38px;height:38px;border-radius:50%;background:var(--petal);display:grid;place-items:center;font-size:21px;flex:none;overflow:hidden}
.chat-head .av img{width:100%;height:100%;object-fit:cover;display:block}
.chat-head b{font-family:var(--title);font-size:16px}
.chat-head small{display:block;font-size:11px;color:#2f8a57}
.chat-log{display:flex;flex-direction:column;gap:7px;min-height:260px;padding:4px 2px}
.bub{max-width:78%;padding:9px 14px;border-radius:18px;font-size:15px;line-height:1.45;animation:bubIn .4s var(--ease);color:#2a1d22}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.94)}}
.bub.them{align-self:flex-start;background:#fff;border-bottom-left-radius:6px;box-shadow:0 1px 3px rgba(120,40,70,.08)}
.bub.me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:6px}
.bub.typing{display:flex;gap:4px;padding:13px 14px}
.bub.typing i{width:7px;height:7px;border-radius:50%;background:var(--acc);opacity:.4;animation:blink 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:1;transform:translateY(-3px)}}
.choices{display:flex;flex-direction:column;gap:8px}
.choices button{background:rgba(255,255,255,.9);border:1.5px solid #2a1d22;border-radius:14px;padding:11px;color:#2a1d22;font-weight:500;animation:bubIn .45s backwards var(--ease)}
.choices button:nth-child(2){animation-delay:.07s}.choices button:nth-child(3){animation-delay:.14s}
.choices button:hover{background:#fff}
.choices button:active{background:var(--petal)}

/* 3. tờ báo */
.news{position:relative;width:100%;max-width:360px;background:var(--news);color:#1c1a1a;padding:20px 16px 16px;box-shadow:0 12px 30px rgba(60,30,40,.16);transform:rotate(-1.2deg);animation:fadeUp .8s var(--ease)}
.news .d-tape{position:absolute;top:-11px;left:50%;font-size:14px;transform:translateX(-50%) rotate(3deg)}
.mast{font-family:var(--mast);font-size:32px;text-align:center;line-height:1.1;letter-spacing:.01em}
.n-meta{display:flex;justify-content:space-between;gap:6px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid #1c1a1a;border-bottom:3px double #1c1a1a;padding:5px 0;margin:6px 0 12px}
.kick{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #1c1a1a;margin:0 0 8px;padding-bottom:2px}
.head{font-family:var(--title);font-style:italic;font-weight:800;font-size:40px;line-height:.98;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance;overflow-wrap:anywhere}
.deck{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.45;margin:0 0 12px;color:var(--acc)}
.n-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid #1c1a1a;padding-top:10px}
.n-cols.solo{grid-template-columns:1fr}
.n-cols figure{margin:0}
.n-cols .duo{background:var(--petal)}
.n-cols img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(1.06);mix-blend-mode:multiply}
.n-cols figcaption{font-family:var(--serif);font-style:italic;font-size:10.5px;line-height:1.35;margin-top:5px}
.n-body{font-family:var(--serif);font-size:12.5px;line-height:1.55;margin:0;text-align:justify;hyphens:auto;white-space:pre-wrap}
.n-body::first-letter{font-family:var(--title);font-weight:800;float:left;font-size:3.1em;line-height:.82;padding:3px 5px 0 0;color:var(--acc)}

/* 4. đố vui */
.card{background:var(--paper);color:#2a1d22;border-radius:6px;padding:24px 18px 20px;width:100%;box-shadow:0 12px 30px rgba(60,30,40,.14);position:relative;text-align:center}
.card>.d-tape{position:absolute;top:-10px;left:50%;font-size:14px;transform:translateX(-50%) rotate(-3deg)}
.quiz .qn{font-size:11px;letter-spacing:.14em;color:var(--ink-2)}
.quiz h3{font-family:var(--title);font-size:21px;line-height:1.25;margin:6px 0 16px;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:9px}
.opts button{background:#fff;border:1.5px solid #ead9de;border-radius:12px;padding:11px;font-weight:500;color:#2a1d22;transition:background .2s,border-color .2s;position:relative}
.opts button:hover:not(:disabled){border-color:#2a1d22}
.opts button.right{background:#e3f4e8;border-color:#2f8a57;color:#1e5c39}
.opts button.wrong{background:#fde3e8;border-color:#c43d5b;animation:shake .4s}
.quiz .big{font-family:var(--title);font-style:italic;font-size:46px;color:var(--acc);line-height:1}
.burst{position:absolute;left:50%;top:50%;pointer-events:none;animation:burst .9s ease-out forwards;font-size:16px;color:var(--acc)}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(1.3);opacity:0}}

/* 5. hành trình */
.sc-journey .content{margin-top:0}
.map{width:100%;position:relative}
.map svg{width:100%;height:auto;overflow:visible;display:block}
.path-bg{fill:none;stroke:rgba(255,255,255,.75);stroke-width:16;stroke-linecap:round}
.path-line{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 10;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-11}}
.node{cursor:pointer;opacity:0;transform-box:fill-box;transform-origin:center;animation:nodeIn .7s var(--ease) forwards}
@keyframes nodeIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.node circle.c{fill:#fff;stroke:#2a1d22;stroke-width:2}
.node .emo{font-size:26px;text-anchor:middle;dominant-baseline:central}
.node .lbl{font-size:15px;font-weight:600;font-style:italic;fill:#2a1d22;text-anchor:middle;font-family:var(--title)}
.node .dt{font-size:10.5px;fill:#7a5a66;text-anchor:middle;font-family:'Be Vietnam Pro','Noto Sans Thai',sans-serif;letter-spacing:.06em}
.node .cap-bg{fill:rgba(255,250,248,.95);filter:drop-shadow(0 2px 4px rgba(60,30,40,.12))}
.node.now circle.c{fill:var(--acc);stroke:var(--acc)}
.node .pulse{fill:none;stroke:var(--acc);stroke-width:1.5;animation:ring 2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.7);opacity:0}}
.days-big{font-family:var(--serif);font-style:italic;font-size:16px;text-align:center;margin:0;color:var(--ink-2)}
.days-big b{font-family:var(--title);font-style:italic;font-weight:800;color:var(--acc);font-size:32px;padding:0 4px}

/* 6. máy ảnh */
.cam{width:210px;height:150px;position:relative;z-index:5;cursor:pointer;transition:transform .2s var(--ease)}
.cam:active{transform:scale(.96)}
.cam-top{position:absolute;top:-14px;left:26px;width:64px;height:20px;background:#f3d3dc;border-radius:8px 8px 0 0}
.cam-body{position:absolute;inset:0;background:linear-gradient(#fbe7ed,#f2c9d5);border-radius:26px 26px 18px 18px;box-shadow:0 12px 26px rgba(120,40,70,.22),inset 0 -14px 0 #e9b7c6}
.cam .lens{position:absolute;left:50%;top:44%;width:84px;height:84px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#4a3a52 0 18%,#151015 20% 46%,#2b2528 48% 60%,#fff 62% 70%,#3b3036 72%);box-shadow:0 4px 8px rgba(0,0,0,.25)}
.cam .lens i{position:absolute;left:28%;top:24%;width:14px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);transform:rotate(-30deg)}
.cam .vf{position:absolute;right:18px;top:16px;width:30px;height:20px;border-radius:6px;background:#2a1d22}
.cam .fl{position:absolute;left:18px;top:16px;width:34px;height:20px;border-radius:5px;background:linear-gradient(135deg,#fff,#e7d6dc)}
.cam .rb{position:absolute;left:18px;bottom:30px;width:44px;height:8px;border-radius:4px;background:linear-gradient(90deg,#b83d66,#e48ca8,#f6c3d1,#fff)}
.cam .slot{position:absolute;left:30px;right:30px;bottom:8px;height:6px;border-radius:3px;background:#5a3a46}
.flash{position:absolute;inset:0;background:#fff;z-index:30;pointer-events:none;animation:flash .5s forwards}
@keyframes flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
.pile{position:relative;width:236px;height:290px;margin-top:-6px;cursor:pointer;clip-path:inset(0 -90px -90px -90px)}
.pol{background:#fff;padding:10px 10px 36px;box-shadow:0 8px 20px rgba(60,30,40,.18);position:absolute;left:50%;top:14px;width:200px;transform:translateX(-50%) rotate(var(--r));transition:transform .4s var(--ease),opacity .35s}
.pol img{width:100%;aspect-ratio:1;object-fit:cover;background:#eee}
.pol span{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--hand);font-size:19px;color:#2a1d22;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pol.printing{animation:printOut 1.8s cubic-bezier(.4,.1,.3,1) both}
.pol.printing img{animation:develop 3s ease both}
@keyframes printOut{from{transform:translate(-50%,-108%) rotate(0)}to{transform:translateX(-50%) rotate(var(--r))}}
@keyframes develop{0%{filter:brightness(.15) sepia(1)}50%{filter:brightness(.7) sepia(.6) blur(1px)}100%{filter:none}}
.pol.away{transform:translate(60%,-10%) rotate(18deg);opacity:0}

/* 7. thư ảnh */
.collage{display:flex;flex-direction:column;align-items:center;gap:34px;width:100%;padding:8px 0}
.c-row{display:flex;justify-content:center;gap:22px;width:100%}
.collage .pol{position:relative;left:auto;top:auto;width:min(138px,42%);padding:7px 7px 28px;transform:rotate(var(--r));animation:polIn .7s var(--ease) backwards}
@keyframes polIn{from{opacity:0;transform:rotate(var(--r)) scale(.7)}}
.collage .pol span{font-size:16px;bottom:4px}
.letter{position:relative;width:calc(100% - 24px);background:var(--paper);color:#2a1d22;padding:24px 20px 18px;border-radius:4px;
  box-shadow:0 0 0 1px #f0dfe4,0 0 0 9px #fff,0 0 0 10px #f0c9d5,0 14px 30px rgba(60,30,40,.16);animation:fadeUp .8s .15s var(--ease) backwards}
.letter .d-tape{position:absolute;top:-12px;font-size:12px}
.letter .d-tape.l{left:-18px;transform:rotate(-35deg)}
.letter .d-tape.r{right:-18px;transform:rotate(35deg)}
.letter p{font-family:var(--serif);font-size:15.5px;line-height:1.7;margin:0;white-space:pre-wrap}
.letter b{display:block;text-align:right;font-family:var(--hand);font-size:26px;color:var(--acc);margin-top:6px}

/* 8. phong bì */
.env-label{font-family:var(--hand);color:var(--acc);font-size:36px;margin:0;line-height:1.1}
.env{--e:#2a1d22;width:270px;height:178px;position:relative;cursor:pointer;perspective:900px;margin-top:130px;animation:sway 3s ease-in-out infinite}
.env.open{animation:none}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.e-back,.e-front,.e-flap{position:absolute;inset:0;background:var(--e)}
.e-back{border-radius:6px;filter:brightness(.82)}
.e-front{clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:6px;z-index:3;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
.e-flap{height:62%;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:4;filter:brightness(.92);transition:transform .7s ease,z-index 0s .35s}
.e-letter{position:absolute;left:14px;right:14px;top:8px;height:160px;background:var(--paper);z-index:2;border-radius:3px;padding:18px 14px;font-family:var(--hand);font-size:22px;color:#2a1d22;transition:transform .9s .6s var(--ease);text-align:center}
.e-seal{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:5;font-size:11px;transition:opacity .3s,transform .3s}
.env.open .e-flap{transform:rotateX(180deg);z-index:1}
.env.open .e-letter{transform:translateY(-120px)}
.env.open .e-seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}

.overlay{position:absolute;inset:0;z-index:20;background:rgba(42,29,34,.42);display:grid;place-items:center;padding:20px;animation:fade .3s;backdrop-filter:blur(3px)}
@keyframes fade{from{opacity:0}}
.paper{background:var(--paper);color:#2a1d22;border-radius:4px;padding:28px 22px 22px;max-width:360px;width:100%;max-height:80%;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:fadeUp .5s var(--ease);
  background-image:repeating-linear-gradient(transparent 0 29px,#f3d9e0 29px 30px);text-align:left}
.paper p{font-family:var(--serif);font-size:16px;line-height:30px;margin:0;white-space:pre-wrap}
.paper .sign{display:block;text-align:right;font-family:var(--hand);font-size:28px;color:var(--acc);margin-top:10px}
.paper .when{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.paper h3{margin:0 0 8px;font-family:var(--title);font-style:italic;font-size:22px}
.paper img{width:100%;margin:8px 0 14px;border:8px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.15);transform:rotate(-1.5deg)}
.btn-s{display:block;margin:18px auto 0;background:#2a1d22;color:#fff;border:0;border-radius:99px;padding:9px 24px;font-weight:600}
.empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2);font-family:var(--serif);font-style:italic}

/* ================= TRÌNH CHỈNH SỬA ================= */
#editor{height:100dvh;display:flex;flex-direction:column;background:#f6eef0}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#fff;border-bottom:1px solid #f0e0e5;z-index:5}
.logo{font-family:var(--title);font-style:italic;font-weight:800;color:var(--ink);font-size:22px;white-space:nowrap;letter-spacing:-.02em}
.logo em{color:var(--acc)}
.tabs{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none;padding:2px}
.tabs button{border:0;background:#f8f0f2;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap;color:#6e4f5b;transition:background .2s,color .2s;display:inline-flex;align-items:center;gap:6px}
.tabs button:hover:not(.on){background:#f2e3e8}
.tabs button.on{background:var(--ink);color:#fff}
.tabs button.off{opacity:.45;text-decoration:line-through}
.ed-body{flex:1;display:grid;grid-template-columns:400px minmax(0,1fr);min-height:0}
.form{background:#fff;overflow-y:auto;padding:20px 20px 60px;border-right:1px solid #f0e0e5}
.form h3{font-family:var(--title);font-size:20px;margin:2px 0 14px}
.form .fh{display:flex;align-items:center;gap:9px}
.form .fh .ico{width:20px;height:20px;color:var(--acc)}
.form h4{font-size:11.5px;margin:0 0 9px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.form label{display:block;margin:0 0 12px}
.form label>span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:#5c414c}
.form input:not([type=checkbox]):not([type=file]),.form textarea,.form select{width:100%;padding:9px 12px;border:1.5px solid #eddde2;border-radius:11px;font:inherit;font-size:14px;background:#fffdfd;color:var(--ink);transition:border-color .2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--acc)}
.form textarea{resize:vertical}
.list{background:#fbf5f6;border-radius:16px;padding:12px;margin:14px 0}
.item{background:#fff;border:1px solid #f1e3e7;border-radius:13px;padding:10px;margin-bottom:10px}
.item label{margin-bottom:8px}
.item-h{display:flex;align-items:center;gap:4px;margin-bottom:8px;font-size:13px}
.item-h .sp{flex:1}
.ib{border:0;background:#f8f0f2;border-radius:8px;width:28px;height:28px;font-size:13px}
.ib:hover{background:var(--soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:64px 1fr;gap:8px}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw button{width:38px;height:38px;border-radius:12px;border:2px solid #fff;box-shadow:0 0 0 1.5px #ead6dc}
.sw button.on{box-shadow:0 0 0 3px var(--ink)}
.scene-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #f1e3e7;border-radius:12px;padding:8px 10px;margin-bottom:7px;font-size:14px}
.scene-row .sp{flex:1}
.scene-row .ico{color:var(--acc)}
.toggle{display:flex!important;align-items:center;gap:8px;font-weight:600;font-size:14px;background:var(--soft);padding:10px 12px;border-radius:12px}
.photo-pick{display:flex!important;align-items:center;gap:10px;cursor:pointer}
.photo-pick img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:#eee}
.photo-pick span{font-size:13px;font-weight:600;color:var(--acc)}
.photo-pick input{display:none}
.stk-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.stk-grid button{border:0;background:#fff;border-radius:10px;font-size:22px;aspect-ratio:1;transition:transform .15s,background .15s}
.stk-grid button:hover{transform:scale(1.12);background:var(--soft)}
.deco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}
.deco-grid button{border:1px solid #f1e3e7;background:#fff;border-radius:12px;height:76px;display:grid;grid-template-rows:1fr auto;place-items:center;gap:4px;padding:8px 6px 6px;overflow:hidden;font-size:6px;transition:border-color .15s}
.deco-grid button:hover{border-color:var(--acc)}
.deco-grid small{font-size:11px;color:var(--ink-2)}
/* bảng đồ cắt dán dạng ảnh */
.packs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px 10px;padding:0 12px}
.packs button{flex:none;border:1px solid #efdfe4;background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.packs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pic-grid button{aspect-ratio:1;min-width:0;overflow:hidden;border:1px solid #f1e3e7;background:#fff;border-radius:12px;padding:7px;display:grid;place-items:center;transition:transform .15s var(--ease),border-color .15s}
.pic-grid button:hover{transform:translateY(-2px);border-color:var(--acc)}
.pic-grid img{width:100%;height:100%;object-fit:contain}
.more{margin-top:12px}
.more summary{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:10px}

/* thẻ chọn phong cách */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-bottom:16px}
.themes button{position:relative;height:122px;border:0;border-radius:16px;padding:10px;text-align:left;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 0 0 1.5px #ead6dc;transition:box-shadow .2s,transform .2s var(--ease);isolation:isolate}
.themes button:hover{transform:translateY(-2px)}
.themes button.on{box-shadow:0 0 0 3px var(--ink)}
.themes img{position:absolute;width:58px;height:58px;object-fit:contain;z-index:-1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.themes img:nth-of-type(1){top:6px;left:6px;transform:rotate(-10deg)}
.themes img:nth-of-type(2){top:16px;right:4px;transform:rotate(9deg);width:50px;height:50px}
.themes b{font-family:var(--title);font-style:italic;font-weight:700;font-size:19px;line-height:1;color:var(--ink)}
.themes small{font-size:10.5px;color:var(--ink-2);margin-top:3px}

.pv-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;min-height:0;overflow:auto;background:radial-gradient(circle at 30% 20%,#fff 0,transparent 50%),#f3e4e8}
/* khung iPhone thật (ảnh), màn hình đặt đúng vào ô trong suốt: 25/20/22/19 px trên khung 456×930 */
.phone{width:430px;height:877px;position:relative;flex:none;filter:drop-shadow(0 30px 40px rgba(60,30,40,.22))}
.phone::after{content:"";position:absolute;inset:0;background:url(assets/ui/iphone.webp) center/100% 100% no-repeat;pointer-events:none;z-index:50}
.phone .stage{position:absolute;left:5.48%;right:4.82%;top:2.15%;bottom:2.04%;height:auto;border-radius:13.5%/6.2%;overflow:hidden}
.phone .chrome{padding-top:46px}
.pv-note{font-size:12.5px;color:var(--ink-2);margin:12px 0 0;text-align:center;max-width:375px}
.pv-note.warn{color:#b3263c}

.modal{position:fixed;inset:0;z-index:100;background:rgba(42,29,34,.5);display:grid;place-items:center;padding:16px;overflow:auto;backdrop-filter:blur(4px)}
.modal-card{background:#fff;border-radius:22px;padding:26px 22px;max-width:380px;width:100%;text-align:center;display:flex;flex-direction:column;gap:10px;animation:fadeUp .45s var(--ease)}
.modal-card h2{margin:0;font-family:var(--title);font-style:italic;font-size:24px}
.ok-badge{margin:0 auto;font-size:9px}
#qrc{width:240px;height:240px;margin:4px auto}
.qr-colors{display:flex;gap:8px;justify-content:center}
.qr-colors button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #ddd}
.qr-colors button.on{box-shadow:0 0 0 2.5px #2a1d22}
.modal-card input{width:100%;padding:9px 12px;border:1.5px solid #eddde2;border-radius:11px;font-size:12px;color:var(--ink)}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
details{font-size:13px;text-align:left}
details summary{cursor:pointer;color:var(--ink-2);margin-bottom:6px}

@media (max-width:900px){
  #editor{height:auto;min-height:100dvh}
  .topbar{flex-wrap:wrap}
  .tabs{order:3;flex-basis:100%}
  .ed-body{grid-template-columns:minmax(0,1fr)}
  .form{border-right:0;overflow:visible}
}
/* máy bật giảm chuyển động: chỉ tắt hiệu ứng lặp mãi (lấp lánh bay, phong bì đung đưa, nhịp đập); chuyển động khi bấm vẫn giữ nhưng ngắn lại */
@media (prefers-reduced-motion:reduce){
  .fx .sp,.env,.pulse,.node.now .pulse{animation:none!important}
}

/* ===== iPad / laptop: nội dung nằm trong cột giữa, nền trải kín ===== */
/* cuộn cả màn (thanh cuộn nằm sát mép phải), còn nội dung + nhãn dán gói trong cột giữa 560px */
.stage.wide .scene{padding-left:max(18px,calc(50% - 262px));padding-right:max(18px,calc(50% - 262px))}
.stage.wide .stickers{left:max(0px,calc(50% - 280px));width:min(100%,560px)}
.stage.wide .chrome{left:max(0px,calc(50% - 280px));right:max(0px,calc(50% - 280px))}

/* ===== chọn máy xem trước ===== */
.devs{display:flex;gap:4px;background:#fff;border-radius:999px;padding:4px;box-shadow:0 2px 10px rgba(60,30,40,.08);margin-bottom:14px;flex:none}
.devs button{border:0;background:none;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.devs button.on{background:var(--acc);color:#fff}
.phone.dev-tablet,.phone.dev-laptop{filter:drop-shadow(0 30px 40px rgba(60,30,40,.2))}
.phone.dev-tablet{width:860px;height:1220px}
.phone.dev-tablet::after{background:none;border:20px solid #1d1d20;border-radius:52px;box-shadow:inset 0 0 0 2px #3a3a40}
.phone.dev-laptop{width:1320px;height:872px}
.phone.dev-laptop::after{background:none;border:20px solid #1d1d20;border-bottom-width:20px;border-radius:24px 24px 6px 6px;bottom:32px;box-shadow:inset 0 0 0 2px #3a3a40}
.phone.dev-laptop::before{content:"";position:absolute;left:-40px;right:-40px;bottom:12px;height:20px;border-radius:0 0 22px 22px;background:linear-gradient(#d9d9dd,#a9a9b0);z-index:51}
.phone.dev-tablet .stage,.phone.dev-laptop .stage{left:20px;top:20px;right:auto;bottom:auto;border-radius:32px}
.phone.dev-laptop .stage{border-radius:6px}
.phone.dev-tablet .chrome,.phone.dev-laptop .chrome{padding-top:12px}

/* ===== ngôn ngữ ===== */
select.lang{border:1px solid #ecd9df;background:#fff;border-radius:999px;padding:7px 12px;font:600 13px 'Be Vietnam Pro','Noto Sans Thai',sans-serif;color:var(--ink)}
.lang-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lang-row .btn{margin:0}

/* ===== đồ vật thật theo phong cách (assets/props, assets/paper) ===== */
.th-pink{--pp:"assets/props/pink/";--tape1:url(assets/props/pink/tape-1.webp);--tape2:url(assets/props/pink/tape-2.webp);--paper-news:url(assets/paper/news.webp);--paper-card:url(assets/paper/letter-pink.webp);--paper-letter:url(assets/paper/letter-pink.webp)}
.th-mocha{--pp:"assets/props/mocha/";--tape1:url(assets/props/mocha/tape-1.webp);--tape2:url(assets/props/mocha/tape-2.webp);--paper-news:url(assets/paper/news.webp);--paper-card:url(assets/paper/card-kraft.webp);--paper-letter:url(assets/paper/letter-cream.webp)}
.th-ivory{--pp:"assets/props/mocha/";--tape1:url(assets/props/mocha/tape-1.webp);--tape2:url(assets/props/mocha/tape-2.webp);--paper-news:url(assets/paper/news.webp);--paper-card:url(assets/paper/card-ivory.webp);--paper-letter:url(assets/paper/letter-cream.webp)}
.th-editorial{--pp:"assets/props/editorial/";--tape1:url(assets/props/editorial/tape-1.webp);--tape2:url(assets/props/editorial/tape-2.webp);--paper-news:url(assets/paper/news.webp);--paper-card:url(assets/paper/card-white.webp);--paper-letter:url(assets/paper/card-white.webp)}
.th-silver{--pp:"assets/props/silver/";--tape1:url(assets/props/silver/tape-1.webp);--tape2:url(assets/props/silver/tape-2.webp);--paper-news:url(assets/paper/card-white.webp);--paper-card:url(assets/paper/card-silver.webp);--paper-letter:url(assets/paper/card-white.webp)}
.d-tape{background:var(--tape1) center/100% 100% no-repeat!important;clip-path:none!important;box-shadow:none!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.d-tape:nth-of-type(2n),.letter .d-tape.r{background-image:var(--tape2)!important}
.d-tape::before,.d-tape::after{display:none!important}
.news{background:var(--paper-news) center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 12px 18px rgba(60,30,40,.18))}
.card{background:var(--paper-card) center/100% 100% no-repeat;box-shadow:none;border-radius:0;filter:drop-shadow(0 12px 18px rgba(60,30,40,.16))}
.letter{background:var(--paper-letter) center/100% 100% no-repeat;box-shadow:none;border-radius:0;filter:drop-shadow(0 10px 16px rgba(60,30,40,.16))}
.overlay .paper,.e-letter{background:var(--paper-letter) center/100% 100% no-repeat}
/* máy ảnh thật */
.cam.real{width:230px;height:auto;aspect-ratio:auto}
.cam.real img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 18px rgba(40,20,20,.25));pointer-events:none}
/* phong bì thật */
.env.real{width:280px;height:auto;aspect-ratio:var(--ea,1.6);background:none}
.env.real .r-closed,.env.real .r-open{position:absolute;left:0;bottom:0;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(40,20,20,.22));transition:opacity .45s ease;pointer-events:none}
.env.real .r-open{opacity:0;z-index:3}
.env.real .r-closed{z-index:4}
.env.real .r-seal{position:absolute;left:50%;top:52%;width:70px;transform:translate(-50%,-50%);z-index:5;transition:opacity .3s,transform .4s var(--ease);filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));pointer-events:none}
.env.real .e-letter{left:12%;right:12%;top:auto;bottom:16%;height:70%;overflow:hidden;font-size:18px;z-index:2;transition:transform .9s .45s var(--ease)}
.env.real.open .r-closed{opacity:0}
.env.real.open .r-open{opacity:1}
.env.real.open .r-seal{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-20deg)}
.env.real.open .e-letter{transform:translateY(-75%)}
.pins{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-bottom:8px}
.pins button{border:1px solid #f0e0e5;background:#fff;border-radius:10px;aspect-ratio:1;padding:4px;min-width:0}
.pins button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.pins img{width:100%;height:100%;object-fit:contain}

/* ===== tùy chỉnh từng màn ===== */
.bub.them{background:var(--bub-them,#fff);color:var(--bub-them-ink,#2a1d22)}
.bub.me{background:var(--bub-me,var(--acc));color:var(--bub-me-ink,#fff)}
.solid-paper .news,.solid-paper .card,.solid-paper .letter,.solid-paper .overlay .paper,.solid-paper .e-letter{border-radius:10px}
/* nền họa tiết mới */
.bg-gblue{background:linear-gradient(90deg,rgba(124,160,214,.32) 50%,transparent 50%) 0 0/36px 36px,linear-gradient(rgba(124,160,214,.32) 50%,transparent 50%) 0 0/36px 36px,#f7faff}
.bg-gmint{background:linear-gradient(90deg,rgba(120,190,160,.3) 50%,transparent 50%) 0 0/36px 36px,linear-gradient(rgba(120,190,160,.3) 50%,transparent 50%) 0 0/36px 36px,#f6fcf8}
.bg-clover{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%2389c79a' opacity='.55'%3E%3Cg transform='translate(22 24) rotate(15)'%3E%3Ccircle cx='-4' cy='-4' r='5'/%3E%3Ccircle cx='4' cy='-4' r='5'/%3E%3Ccircle cx='-4' cy='4' r='5'/%3E%3Ccircle cx='4' cy='4' r='5'/%3E%3C/g%3E%3Cg transform='translate(67 66) rotate(-20) scale(.8)'%3E%3Ccircle cx='-4' cy='-4' r='5'/%3E%3Ccircle cx='4' cy='-4' r='5'/%3E%3Ccircle cx='-4' cy='4' r='5'/%3E%3Ccircle cx='4' cy='4' r='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/90px,radial-gradient(ellipse at 50% 0,#fbfff8,transparent 70%),#eef7ea}
.bg-hearts{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath fill='%23f19ab3' opacity='.55' d='M16 22c-3-4-9-3-9 2 0 4 9 9 9 9s9-5 9-9c0-5-6-6-9-2zM48 54c-2-3-7-2-7 1.5 0 3 7 7 7 7s7-4 7-7c0-3.5-5-4.5-7-1.5z'/%3E%3C/svg%3E") 0 0/64px,#fff5f7}
.bg-cherry{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg transform='translate(20 22)'%3E%3Cpath d='M0 12 C2 2 8 -4 14 -6 M10 12 C10 4 12 -2 14 -6' stroke='%236b8f4e' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='0' cy='14' r='5' fill='%23d93a4f'/%3E%3Ccircle cx='10' cy='14' r='5' fill='%23e04a5e'/%3E%3C/g%3E%3Cg transform='translate(58 58) scale(.8)'%3E%3Cpath d='M0 12 C2 2 8 -4 14 -6 M10 12 C10 4 12 -2 14 -6' stroke='%236b8f4e' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='0' cy='14' r='5' fill='%23d93a4f'/%3E%3Ccircle cx='10' cy='14' r='5' fill='%23e04a5e'/%3E%3C/g%3E%3C/svg%3E") 0 0/80px,#fff8f3}
.bg-grid{background:linear-gradient(rgba(90,120,180,.14) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(90,120,180,.14) 1px,transparent 1px) 0 0/22px 22px,#fdfdfb}
.bg-checker{background:conic-gradient(#e9dcfb 25%,#faf6ff 0 50%,#e9dcfb 0 75%,#faf6ff 0) 0 0/44px 44px}
.bg-reddots{background:radial-gradient(#d23a52 3px,transparent 3.5px) 0 0/30px 30px,radial-gradient(#d23a52 3px,transparent 3.5px) 15px 15px/30px 30px,#fbf4ea}
.bg-sky{background:radial-gradient(ellipse 60px 22px at 20% 18%,#fff 60%,transparent 62%),radial-gradient(ellipse 80px 26px at 78% 40%,#fff 60%,transparent 62%),radial-gradient(ellipse 70px 22px at 30% 72%,#fff 60%,transparent 62%),radial-gradient(ellipse 60px 20px at 85% 88%,#fff 60%,transparent 62%),linear-gradient(#bfe0ff,#e8f4ff)}
.bg-lilac{background:radial-gradient(ellipse at 10% 0%,#fbf7ff 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#d9c8f5 0,transparent 55%),#efe6fb}
/* chữ tự gõ */
.txt-stk{display:inline-block;white-space:nowrap;color:var(--tc);font-size:1em;line-height:1.2;padding:.1em .2em}
.ts-label{background:var(--tb);padding:.25em .6em;border-radius:.4em;box-shadow:0 0 0 .08em var(--tc),0 .15em .4em rgba(0,0,0,.12)}
.ts-mark{background:linear-gradient(transparent 45%,var(--tb) 45% 88%,transparent 88%);padding:0 .3em}
.ts-tape{background:var(--tb);padding:.25em .9em;clip-path:polygon(3% 0,100% 6%,97% 100%,0 94%);opacity:.95}
/* bảng tùy chỉnh trong trình sửa */
details.look{background:#fff;border:1px solid #f1e3e7;border-radius:14px;padding:10px 12px;margin:0 0 14px}
details.look summary{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);cursor:pointer;margin-bottom:8px}
.sw button.auto{background:repeating-linear-gradient(135deg,#fff 0 5px,#f1e3e7 5px 7px)!important;position:relative}
.sw button.auto::after{content:"A";position:absolute;inset:0;display:grid;place-items:center;font:700 11px system-ui;color:var(--ink-2)}
.cpick{position:relative;display:inline-grid;width:30px;height:30px;border-radius:50%;overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);cursor:pointer;margin:0}
.cpick input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.font-sel{width:100%;border:1px solid #ecd9df;border-radius:10px;padding:8px;background:#fff;font-size:14px}
.seg{display:flex;gap:2px;background:#f6edf0;border-radius:10px;padding:2px}
.seg button{flex:1;border:0;background:none;border-radius:8px;font-size:12px;padding:6px 2px;min-width:0}
.seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:600}
.text-maker{background:#fff;border:1px solid #f1e3e7;border-radius:14px;padding:10px 12px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.text-maker h5{margin:0;font-size:13px}
.text-maker input[type=text]{width:100%;border:1px solid #ecd9df;border-radius:10px;padding:9px;font-size:15px}
.upload{position:relative;overflow:hidden;margin-top:10px}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.look .sw button,.text-maker .sw button{width:30px;height:30px;border-radius:9px}
.look .sw,.text-maker .sw{gap:6px}

/* ===== khung ảnh polaroid đổi màu ===== */
.pol{background:var(--pol,#fff)}
.pol span{color:var(--pol-ink,#2a1d22)}
/* ===== ô chọn bằng ảnh (máy ảnh, phong bì, sáp) ===== */
.imgpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.imgpick button{border:1.5px solid #f0e0e5;background:#fff;border-radius:12px;aspect-ratio:1;padding:6px;display:grid;place-items:center;min-width:0;position:relative;font-size:22px;color:var(--ink-2)}
.imgpick button img{width:100%;height:100%;object-fit:contain}
.imgpick button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.imgpick button.auto::after{content:"A";position:absolute;right:3px;top:2px;font:700 10px system-ui;color:var(--ink-2)}
.env.real .r-seal.css{width:auto;font-size:12px}
/* ===== chuyển động khi bấm ===== */
.cam.real{transition:transform .25s var(--ease)}
.cam.real:hover{transform:translateY(-3px) rotate(-1deg)}
.cam.real.shoot{animation:shoot .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes shoot{0%{transform:scale(1)}25%{transform:scale(.92,.88) translateY(4px)}60%{transform:scale(1.04,1.06)}100%{transform:none}}
.pol.printing{animation:printOut 1.6s cubic-bezier(.22,1,.36,1) both}
@keyframes printOut{0%{transform:translate(-50%,-108%) rotate(0)}70%{transform:translate(-50%,4%) rotate(calc(var(--r) * 1.4))}100%{transform:translateX(-50%) rotate(var(--r))}}
.pol.away{transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .4s}
.overlay{animation:ovIn .35s ease both}
.overlay .paper{animation:paperIn .6s cubic-bezier(.22,1.2,.36,1) both}
@keyframes ovIn{from{opacity:0;backdrop-filter:blur(0)}}
@keyframes paperIn{0%{opacity:0;transform:translateY(60px) scale(.9) rotate(-3deg)}60%{opacity:1}100%{transform:none}}
.overlay.closing{animation:ovOut .32s ease forwards}
.overlay.closing .paper{animation:paperOut .32s cubic-bezier(.5,0,.75,0) forwards}
@keyframes ovOut{to{opacity:0}}
@keyframes paperOut{to{opacity:0;transform:translateY(40px) scale(.94) rotate(2deg)}}
.env.real{transition:transform .5s var(--ease)}
.env.real:hover{transform:translateY(-4px)}
.env.real.open{transform:none}
.env.real .e-letter{transition:transform 1s .35s cubic-bezier(.22,1,.36,1)}
.env.real.open .r-seal{transition:opacity .35s,transform .5s cubic-bezier(.5,0,.75,0)}
.next.show{transition:opacity .5s ease,transform .6s cubic-bezier(.22,1.2,.36,1)}
.node .badge{fill:#fff;stroke:#2a1d22;stroke-width:1.5}
.node .emo.sm{font-size:14px}
.node .pola .pf{fill:#fff;filter:drop-shadow(0 4px 6px rgba(60,30,40,.22))}
/* thư rút ra phía trước phong bì (ảnh phong bì mở là một khối, thư nằm sau sẽ bị nắp che) */
.env.real .e-letter{transition:transform 1s .35s cubic-bezier(.22,1,.36,1),z-index 0s .35s,box-shadow .6s .5s}
.env.real.open .e-letter{z-index:6;transform:translateY(-62%) rotate(-2deg);box-shadow:0 14px 26px rgba(40,20,20,.22)}