/* Memory Cinema: layered opening/finale + a distinctive music box. */
.memory-opening{z-index:900!important;isolation:isolate;overflow:hidden;padding:clamp(18px,4vw,48px);background:radial-gradient(circle at 18% 15%,#ffd8e6 0,transparent 33%),radial-gradient(circle at 82% 76%,#dcd7ff 0,transparent 34%),linear-gradient(145deg,#fff8ed,#f8e3ec 52%,#efe7ff);pointer-events:auto!important;opacity:1!important}
.memory-opening::before{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:"";position:absolute;inset:-20%;z-index:-2;background:conic-gradient(from 40deg,#fff0 0 12%,#fff8 16%,#fff0 23% 45%,#ffdbe766 52%,#fff0 62% 100%);animation:opening-light-turn 24s linear infinite}.opening-aurora{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#fff9 0,transparent 42%),linear-gradient(115deg,transparent 22%,#fff7 48%,transparent 74%);mix-blend-mode:soft-light;animation:opening-aurora 7s ease-in-out infinite alternate}.opening-letter{position:relative;z-index:4;width:min(680px,92vw);padding:clamp(34px,6vw,68px) clamp(26px,6vw,70px);text-align:center;background:linear-gradient(150deg,#fffdf7f2,#fff6f9ee);border:1px solid #d7b6c7;border-radius:30px 9px 34px 11px;box-shadow:0 35px 100px #6f425d32,0 0 0 9px #fff7 inset;transform:rotate(-.35deg);overflow:hidden}.opening-letter::before{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:"";position:absolute;left:50%;top:-18px;translate:-50% 0;width:118px;height:36px;background:#efd6beaa;rotate:-2deg;box-shadow:0 2px 5px #654c5b12}.opening-letter::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:"♡  ✦  ♡";position:absolute;right:24px;bottom:17px;color:#c98aa9aa;letter-spacing:.35em;font-size:13px}.opening-seal{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff5,#c96f9d),#d986aa;color:white;font:42px/1 var(--display);box-shadow:0 14px 30px #a95c7c38;animation:opening-heart 2.8s ease-in-out infinite}.opening-letter .kicker{letter-spacing:.18em;color:#9b617f}.opening-letter h1{font:clamp(38px,6vw,72px)/1.03 var(--display);color:#5e4054;margin:14px auto 18px;max-width:590px}.opening-copy{font:clamp(17px,2vw,21px)/1.75 var(--body);color:#6d5665;max-width:590px;margin:0 auto}.opening-note{font:clamp(18px,2.1vw,23px)/1.6 var(--note);color:#9a6981;margin:18px auto 26px;max-width:520px}.opening-enter{min-height:54px;padding-inline:26px;box-shadow:0 14px 32px #a95d7f24}.opening-ready{display:block;margin-top:14px;color:#a38494;font-size:11px;letter-spacing:.08em}.memory-opening.ready .opening-ready{color:#8d5874}.opening-memory-cloud{position:absolute;inset:0;z-index:1;pointer-events:none}.opening-memory-frame{position:absolute;width:clamp(105px,14vw,190px);padding:8px 8px 23px;margin:0;background:#fffaf0;border:1px solid #d8c6c8;box-shadow:0 18px 45px #593b4d30;border-radius:5px;opacity:.88;animation:opening-frame-float 8s ease-in-out infinite}.opening-memory-frame img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}.opening-memory-frame figcaption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:11px var(--note);color:#785e6e;margin-top:6px}.opening-memory-1{left:3%;top:8%;rotate:-9deg}.opening-memory-2{right:4%;top:5%;rotate:8deg;animation-delay:-2s}.opening-memory-3{left:7%;bottom:7%;rotate:7deg;animation-delay:-5s}.opening-memory-4{right:6%;bottom:5%;rotate:-7deg;animation-delay:-3s}.opening-memory-5{left:24%;top:-6%;rotate:4deg;scale:.85;animation-delay:-6s}.opening-memory-6{right:24%;bottom:-9%;rotate:-3deg;scale:.88;animation-delay:-1s}.opening-memory-7{right:-2%;top:42%;rotate:10deg;scale:.72;animation-delay:-4s}.opening-sparkles i{position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 20px #fff,0 0 35px #e997bb;animation:opening-spark 3.6s ease-in-out infinite}.opening-sparkles i:nth-child(1){left:18%;top:28%}.opening-sparkles i:nth-child(2){right:18%;top:24%;animation-delay:-.7s}.opening-sparkles i:nth-child(3){left:24%;bottom:21%;animation-delay:-1.8s}.opening-sparkles i:nth-child(4){right:22%;bottom:25%;animation-delay:-2.6s}.opening-sparkles i:nth-child(5){left:48%;top:9%;animation-delay:-1.1s}.opening-sparkles i:nth-child(6){right:44%;bottom:9%;animation-delay:-3s}.memory-opening.done{opacity:0!important;transform:scale(1.025);transition:opacity .85s ease,transform .9s ease}

.finale-overture{position:relative;width:min(1120px,92vw);margin:35px auto 50px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr);gap:clamp(24px,4vw,58px);align-items:center;border:1px solid #d8bdca;border-radius:34px 10px 34px 10px;background:linear-gradient(145deg,#fffaf3e8,#f9edf5ee 55%,#eeeaffea);box-shadow:0 28px 80px #69495c20;overflow:hidden}.finale-overture::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:"";position:absolute;width:220px;height:220px;right:-80px;top:-100px;border-radius:50%;background:radial-gradient(circle,#f4bfd65c,transparent 70%);animation:ending-breathe 7s ease-in-out infinite}.finale-overture-copy{position:relative;z-index:2}.finale-overture-copy h2{font:clamp(34px,4.7vw,62px)/1.08 var(--display);color:#62465a;margin:12px 0 18px}.finale-overture-copy>p:last-child{font:18px/1.75 var(--body);color:#7b6473}.finale-overture-strip{position:relative;min-height:360px;perspective:900px}.ending-memory-frame{position:absolute;width:clamp(105px,12vw,160px);padding:7px 7px 19px;background:#fffaf1;border:1px solid #dbc7cc;box-shadow:0 16px 36px #5e3f5226;border-radius:5px;overflow:hidden;transform-origin:center;transition:transform .35s ease}.ending-memory-frame img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}.ending-memory-1{left:2%;top:5%;rotate:-7deg}.ending-memory-2{left:27%;top:22%;rotate:5deg}.ending-memory-3{left:52%;top:3%;rotate:-3deg}.ending-memory-4{right:0;top:28%;rotate:8deg}.ending-memory-5{left:18%;bottom:0;rotate:3deg}.ending-memory-6{right:22%;bottom:-4%;rotate:-6deg}.ending-memory-7{right:-4%;bottom:4%;rotate:5deg}.ending-video-mark{position:absolute;right:12px;bottom:27px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#5e4058cc;color:#fff;font-size:10px}.finale-overture-empty{display:grid;place-items:center;height:320px;font:100px var(--display);color:#d59bb8}.emotional-ending[data-memory-cinema="true"]{isolation:isolate;overflow:hidden;max-width:min(880px,94vw);min-height:min(620px,86dvh);padding:clamp(24px,5vw,58px)!important;background:radial-gradient(circle at 50% 32%,#fff9f0 0,#f7dfe9 50%,#e5def3 100%)!important}.ending-cinematic-glow{position:absolute;z-index:-2;inset:-30%;background:conic-gradient(from 20deg,#fff0 0 15%,#fff8 24%,#f8bcd64a 32%,#fff0 47% 62%,#d7c8ff55 75%,#fff0 90%);filter:blur(18px);animation:ending-glow-turn 22s linear infinite}.ending-memory-cloud{position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.52}.ending-memory-cloud .ending-memory-frame{width:clamp(82px,12vw,140px)}.ending-memory-cloud .ending-memory-1{left:-2%;top:6%}.ending-memory-cloud .ending-memory-2{left:7%;bottom:4%;top:auto}.ending-memory-cloud .ending-memory-3{left:auto;right:2%;top:7%}.ending-memory-cloud .ending-memory-4{right:3%;bottom:7%;top:auto}.ending-memory-cloud .ending-memory-5{left:38%;top:-6%}.ending-memory-cloud .ending-memory-6{left:42%;bottom:-10%;right:auto}.ending-memory-cloud .ending-memory-7{display:none}.emotional-ending[open] .ending-memory-frame{animation:ending-frame-drift 8s ease-in-out infinite}.emotional-ending[open] .ending-memory-frame:nth-child(2n){animation-delay:-3s}.ending-final-whisper{position:relative;z-index:2;max-width:580px;margin:22px auto 4px;font:20px/1.6 var(--note);color:#8b637a}.memory-ending-live .living-atmosphere,.memory-ending-live #seasonParticles{opacity:.22;transition:opacity 1s}

.music-dock{width:min(430px,calc(100vw - 32px));max-width:none!important;padding:0!important;border:1px solid #d0aabe!important;border-radius:26px 8px 26px 8px!important;background:linear-gradient(150deg,#fffdf8f5,#fff2f7f2 56%,#f0ecfff2)!important;box-shadow:0 28px 68px #59384d35,0 0 0 1px #fff inset!important;overflow:hidden!important;color:#66485a!important}.music-dock>summary{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:14px 16px;list-style:none;cursor:pointer;font:700 15px var(--body)!important;color:#754e65!important;background:linear-gradient(90deg,#f8d7e4aa,#fff8ef88);border-bottom:1px dashed transparent}.music-dock[open]>summary{border-bottom-color:#d2adbd}.music-dock>summary::-webkit-details-marker{display:none}.music-summary-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ce7fa1;color:#fff;font:20px var(--display);box-shadow:0 6px 18px #a9608135}.music-summary-eq{display:flex;align-items:end;gap:2px;height:20px}.music-summary-eq i{width:3px;height:8px;border-radius:4px;background:#bd6d91;opacity:.5}.music-is-playing .music-summary-eq i{animation:music-eq .85s ease-in-out infinite alternate}.music-is-playing .music-summary-eq i:nth-child(2){animation-delay:-.35s;height:15px}.music-is-playing .music-summary-eq i:nth-child(3){animation-delay:-.6s;height:11px}.music-now{display:grid;grid-template-columns:96px 1fr;gap:15px;align-items:center;padding:17px 17px 8px}.music-vinyl{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#4f3e4d 0 3px,#342936 4px 6px);box-shadow:0 10px 24px #4b33433a}.music-vinyl::before{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:"";width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#fff7ef 0 15%,#d884a7 16% 100%);box-shadow:0 0 0 2px #fff5 inset}.music-vinyl>span{position:absolute;z-index:2;color:#fff;font-size:16px}.music-is-playing .music-vinyl{animation:music-vinyl-turn 8s linear infinite}.music-track-index{display:block;letter-spacing:.15em;color:#a1748a;font-size:9px}.music-dock .music-track{margin:5px 0!important;font:clamp(16px,2vw,20px)/1.25 var(--display)!important;color:#604354!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.music-dock .music-memory-note{max-height:86px;overflow:auto}.music-primary-controls{display:grid;grid-template-columns:44px 1fr 44px 44px;gap:7px;padding:10px 17px}.music-primary-controls button,.music-secondary-controls button{min-height:42px;border:1px solid #d4b3c2;border-radius:13px;background:#fff9f3;color:#6b4c5e;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.music-primary-controls button:hover,.music-secondary-controls button:hover{transform:translateY(-2px);background:#f8dce8;box-shadow:0 8px 18px #7a4d6420}.music-play-main{background:linear-gradient(135deg,#d780a5,#b66f94)!important;color:#fff!important;border-color:#b66f94!important;font-weight:800}.music-slider{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:10px;padding:5px 17px;font-size:10px;letter-spacing:.03em;color:#8b6b7c}.music-slider input{width:100%;accent-color:#bf7297}.music-time-row{display:flex;justify-content:space-between;align-items:center;padding:0 17px 3px;color:#98798a}.music-time-row>span{font-size:9px;letter-spacing:.18em;color:#c18ba6}.music-secondary-controls{padding:4px 17px 8px!important;margin:0!important;display:grid!important;grid-template-columns:repeat(3,1fr);gap:7px!important}.music-secondary-controls button{font-size:11px}.music-status{min-height:18px;margin:0!important;padding:0 17px 13px;font-size:10px!important;color:#8f7081!important}.music-dock[open]{max-height:min(72dvh,620px);overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin}.music-dock::before{display:none!important}

@keyframes opening-light-turn{to{transform:rotate(360deg)}}@keyframes opening-aurora{to{transform:translate3d(2%,-1%,0) scale(1.04);opacity:.65}}@keyframes opening-heart{50%{transform:translateY(-5px) scale(1.045);box-shadow:0 19px 38px #a95c7c48}}@keyframes opening-frame-float{50%{translate:0 -10px}}@keyframes opening-spark{50%{scale:1.8;opacity:.35}}@keyframes ending-breathe{50%{transform:scale(1.18) translate(-8px,8px);opacity:.55}}@keyframes ending-glow-turn{to{transform:rotate(360deg)}}@keyframes ending-frame-drift{50%{translate:0 -8px;rotate:1deg}}@keyframes music-eq{to{height:18px;opacity:1}}@keyframes music-vinyl-turn{to{transform:rotate(360deg)}}
@media(max-width:760px){.memory-opening{padding:12px}.opening-letter{width:min(92vw,560px);padding:34px 22px}.opening-letter h1{font-size:42px}.opening-memory-frame{opacity:.4;width:105px}.opening-memory-5,.opening-memory-6,.opening-memory-7{display:none}.finale-overture{grid-template-columns:1fr;padding:25px 18px}.finale-overture-strip{min-height:300px}.music-dock{left:8px!important;right:8px!important;width:auto!important;bottom:122px!important}.music-now{grid-template-columns:76px 1fr}.music-vinyl{width:70px;height:70px}.music-slider{grid-template-columns:92px 1fr}.emotional-ending[data-memory-cinema="true"]{min-height:min(570px,84dvh)}}
@media(max-width:430px){.opening-memory-frame{display:none}.opening-letter h1{font-size:36px}.opening-copy{font-size:16px}.finale-overture-strip{min-height:245px}.finale-overture-strip .ending-memory-frame{width:100px}.ending-memory-4,.ending-memory-5{display:none}.music-primary-controls{grid-template-columns:40px 1fr 40px}.music-primary-controls [data-music-mute]{grid-column:1/-1}.music-secondary-controls{grid-template-columns:1fr 1fr!important}.music-secondary-controls [data-playlist]{grid-column:1/-1}.music-slider{grid-template-columns:1fr;gap:5px}}
@media(prefers-reduced-motion:reduce){.memory-opening::before,.opening-aurora,.opening-seal,.opening-memory-frame,.opening-sparkles i,.finale-overture::after,.ending-cinematic-glow,.emotional-ending[open] .ending-memory-frame,.music-summary-eq i,.music-vinyl{animation:none!important}.memory-opening.done{filter:none;transform:none}}

/* One-shot past reel before the opening letter */
.opening-enter:disabled{opacity:.42;cursor:wait;transform:none!important;box-shadow:none}.opening-past-cinema{position:absolute;inset:0;z-index:8;display:grid;place-items:end center;overflow:hidden;opacity:0;visibility:hidden;background:#211822;transition:opacity .7s ease,visibility .7s}.past-playing .opening-past-cinema{opacity:1;visibility:visible}.opening-past-visual{position:absolute;inset:0;display:grid;place-items:center;background:#211822}.opening-past-visual img{display:block;width:100%;height:100%;object-fit:contain}.opening-past-frame{position:absolute;inset:18px;border:1px solid #fff5;border-radius:28px;box-shadow:inset 0 0 0 1px #2d1d2928,0 0 0 9999px #2417240a;pointer-events:none}.opening-past-frame::before,.opening-past-frame::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:"";position:absolute;width:86px;height:1px;background:#fff9;top:28px}.opening-past-frame::before{left:28px}.opening-past-frame::after{right:28px}.opening-past-copy{position:relative;z-index:2;width:min(920px,90vw);margin-bottom:clamp(28px,6vh,62px);padding:24px 26px 26px;text-align:center;color:#fff8f2;text-shadow:0 3px 18px #1e101c;background:linear-gradient(180deg,#24162408,#241624aa);border:1px solid #fff2;border-radius:28px}.opening-past-copy .kicker{color:#f4d9e5;font-size:10px;letter-spacing:.24em}.opening-past-title{font:clamp(40px,7vw,88px)/1 var(--display);margin:12px 0 12px;color:#fff9f5}.opening-past-memory{margin:0 0 12px;color:#f4dce7;font:700 10px/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase}.opening-past-line{font:clamp(21px,3vw,34px)/1.4 var(--note);margin:0 auto;color:#fff7f4;max-width:760px}.opening-past-count{display:block;margin-top:15px;font:700 10px var(--body);letter-spacing:.2em;color:#f3d9e5}.opening-past-progress{display:block;width:min(420px,70vw);height:2px;margin:12px auto 0;background:#fff3;overflow:hidden}.opening-past-progress i{display:block;width:0;height:100%;background:#fff7;transition:width .7s ease}.opening-past-closing{position:relative;z-index:3;align-self:center;width:min(760px,88vw);margin:auto;text-align:center;color:#fff8f2;text-shadow:0 3px 20px #21121d}.opening-past-closing span{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 22px;border:1px solid #fff7;border-radius:50%;font:40px var(--display);background:#5b354d88}.opening-past-closing p{margin:0;font:clamp(28px,4.6vw,58px)/1.25 var(--display)}.past-playing .opening-letter,.past-playing .opening-memory-cloud,.past-playing .opening-sparkles{opacity:0;transform:scale(.97);pointer-events:none}.opening-letter,.opening-memory-cloud,.opening-sparkles{transition:opacity .8s ease,transform .8s ease}.past-complete .opening-letter{animation:opening-letter-arrive-v2 1s cubic-bezier(.2,.8,.2,1) both}.past-complete .opening-memory-frame{animation:opening-frame-float 8s ease-in-out infinite,opening-frame-arrive-v2 .9s ease both}.past-complete .opening-memory-frame:nth-child(2n){animation-delay:-2s,.08s}.past-complete .opening-memory-frame:nth-child(3n){animation-delay:-5s,.16s}@keyframes opening-frame-arrive-v2{from{opacity:0;transform:translateY(30px) scale(.9)}}@keyframes opening-letter-arrive-v2{from{opacity:0;transform:translateY(30px) scale(.96) rotate(-.35deg)}to{opacity:1;transform:rotate(-.35deg)}}
.finale-overture-caption{grid-column:1/-1;max-width:760px;margin:-8px auto 0!important;padding-top:18px;border-top:1px dashed #d8bdc8;color:#8d697c!important;text-align:center;font:17px/1.7 var(--note)!important}
@media(max-width:760px){.opening-past-copy{padding-bottom:72px}.opening-past-title{font-size:48px}.opening-past-line{font-size:24px}}
@media(max-width:430px){.opening-past-title{font-size:38px}.opening-past-copy{padding-inline:18px;padding-bottom:58px}.opening-past-line{font-size:21px}}
@media(prefers-reduced-motion:reduce){.past-complete .opening-letter,.past-complete .opening-memory-frame,.opening-past-visual img,.opening-past-copy{animation:none!important}}
@media(max-width:760px){.opening-past-copy{margin-bottom:24px;padding:18px 16px 20px}.opening-past-frame{inset:8px;border-radius:18px}.opening-past-memory{font-size:9px}.finale-overture-caption{margin-top:5px!important}}

/* Intro v3: luôn có nút Bắt đầu rõ ràng trước khi thước phim ký ức chạy. */
.memory-opening .opening-start-gate[hidden],
.memory-opening .opening-past-cinema[hidden],
.memory-opening .opening-letter[hidden]{display:none!important}
.memory-opening[data-opening-stage="start"]{overflow-x:hidden!important;overflow-y:auto!important;justify-content:flex-start}
.memory-opening[data-opening-stage="letter"]{overflow:hidden!important;justify-content:center}
.memory-opening[data-opening-stage="cinema"]{overflow:hidden!important}
.memory-opening[data-opening-stage="start"] .opening-start-gate{display:block;opacity:1;visibility:visible;pointer-events:auto}
.memory-opening[data-opening-stage="cinema"] .opening-past-cinema{display:grid;opacity:1;visibility:visible;pointer-events:auto}
.memory-opening[data-opening-stage="letter"] .opening-letter{display:flex;flex-direction:column;opacity:1;visibility:visible;pointer-events:auto;max-height:calc(100dvh - 48px);overflow:hidden}
.memory-opening[data-opening-stage="start"] .opening-start-gate,
.memory-opening[data-opening-stage="letter"] .opening-letter{flex:none;margin:auto 0}
.opening-letter-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:1px 4px 4px}
.opening-letter-actions{position:relative;z-index:5;flex:none;padding:14px 0 2px;background:linear-gradient(180deg,#fff8,rgba(255,249,246,.98) 32%);box-shadow:0 -14px 28px #fff8}
.opening-letter-actions .opening-ready{margin-bottom:0}
.opening-start-gate{position:relative;z-index:12;width:min(720px,92vw);padding:clamp(34px,6vw,70px) clamp(24px,6vw,68px);text-align:center;border:1px solid #d7b6c7;border-radius:34px 10px 34px 10px;background:linear-gradient(150deg,#fffdf8f4,#fff4f8ef 58%,#f5effff0);box-shadow:0 35px 110px #5f405332,0 0 0 10px #fff7 inset;transition:opacity .42s ease,transform .42s ease}
.opening-start-gate.leaving{opacity:0;transform:translateY(-10px) scale(.975);pointer-events:none}
.opening-start-heart{display:grid;place-items:center;width:82px;height:82px;margin:0 auto 20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7,#c9719f),#d986aa;color:#fff;font:46px/1 var(--display);box-shadow:0 16px 36px #a95c7c3d;animation:opening-heart 2.8s ease-in-out infinite}
.opening-start-gate .kicker{color:#9f6883;letter-spacing:.2em}
.opening-start-gate h2{max-width:640px;margin:14px auto 18px;color:#5b4051;font:clamp(38px,6vw,72px)/1.04 var(--display)}
.opening-start-gate>p:not(.kicker){max-width:570px;margin:0 auto 28px;color:#755d6c;font:clamp(16px,2vw,20px)/1.75 var(--body)}
.opening-start{min-width:190px;min-height:56px;padding-inline:28px;font-weight:800;box-shadow:0 16px 38px #a25f8128}
.opening-letter[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none}
.opening-letter[aria-hidden="false"]{opacity:1;visibility:visible;pointer-events:auto}
@media(max-width:600px){.opening-start-gate{padding:34px 20px}.opening-start-gate h2{font-size:40px}.opening-start-heart{width:70px;height:70px;font-size:40px}}
/* Màn hình laptop thấp: giữ trọn nút vào album trong viewport, vẫn cho phép cuộn nếu nội dung dài hơn. */
@media(max-height:850px){
 .memory-opening{padding-top:16px;padding-bottom:16px}
 .opening-letter{width:min(680px,92vw);padding:22px 38px 16px}
 .opening-seal{width:58px;height:58px;margin-bottom:10px;font-size:34px}
 .opening-letter .kicker{font-size:9px}
 .opening-letter h1{font-size:clamp(36px,6.1vh,52px);line-height:1.02;margin:9px auto 11px}
 .opening-copy{font-size:16px;line-height:1.48}
 .opening-note{font-size:17px;line-height:1.4;margin:10px auto 14px}
 .opening-enter{min-height:48px}
 .opening-ready{margin-top:8px}
 .opening-letter-actions{padding-top:10px}
}
@media(max-height:650px){
 .opening-letter{padding:18px 28px 16px}
 .opening-seal{width:48px;height:48px;margin-bottom:7px;font-size:29px}
 .opening-letter h1{font-size:clamp(31px,6.5vh,42px)}
 .opening-copy{font-size:14px;line-height:1.4}
 .opening-note{font-size:15px;margin:7px auto 10px}
}

/* Intro v5: 10 ký ức giữ đúng tỉ lệ thật; ảnh dọc dùng panel chữ bên phải,
   ảnh ngang/vuông dùng caption nổi phía dưới để hình luôn đủ lớn và dễ nhìn. */
.opening-past-cinema{background:linear-gradient(160deg,#171116,#241923 58%,#171116)}
.opening-past-visual{
 box-sizing:border-box;
 padding:clamp(18px,3vh,32px) clamp(18px,3vw,42px) clamp(180px,24vh,218px);
 background:radial-gradient(circle at 50% 42%,#76566b45,transparent 62%)
}
.opening-past-visual img{
 display:block;width:auto;height:auto;max-width:100%;max-height:100%;
 object-fit:contain;object-position:center;background:#120e12;
 border:1px solid #fff4;border-radius:24px 8px 24px 8px;
 box-shadow:0 30px 90px #0009,0 0 0 8px #fff1;
 filter:none!important
}
.opening-past-copy{
 width:min(900px,90vw);margin-bottom:clamp(16px,3vh,30px);padding:16px 22px 18px;
 background:linear-gradient(180deg,#2c1d2870,#241624e8);border-color:#fff3;border-radius:22px;
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 50px #0004
}
.opening-past-title{font-size:clamp(31px,4.5vw,58px);margin:7px 0 8px}
.opening-past-memory{margin-bottom:8px}
.opening-past-line{font-size:clamp(18px,2.1vw,27px);line-height:1.34}
.opening-past-count{margin-top:11px}.opening-past-progress{margin-top:10px}
.opening-past-cinema[data-media-shape="portrait"] .opening-past-visual{padding:clamp(18px,3vh,30px) min(36vw,470px) clamp(18px,3vh,30px) clamp(18px,4vw,54px);place-items:center}
.opening-past-cinema[data-media-shape="portrait"] .opening-past-visual img{max-height:calc(100dvh - 44px);max-width:100%;border-radius:18px 6px 18px 6px}
.opening-past-cinema[data-media-shape="portrait"] .opening-past-copy{position:absolute;right:clamp(22px,3.5vw,54px);top:50%;bottom:auto;transform:translateY(-50%);width:min(410px,31vw);margin:0;padding:22px 22px 24px;text-align:left}
.opening-past-cinema[data-media-shape="portrait"] .opening-past-title{font-size:clamp(31px,3.6vw,52px)}
.opening-past-cinema[data-media-shape="portrait"] .opening-past-line{font-size:clamp(18px,1.8vw,25px)}
.opening-past-closing{padding:24px}
.playlist-summary{margin:8px 0 16px;color:#806273;font-size:13px}
.playlist-filter{display:block;margin:0 0 18px}
.playlist-filter input{box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border:1px solid #d6b7c7;border-radius:12px;background:#fffaf6;color:#614759;font:inherit}
.playlist-tracks button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left}
.playlist-duration{flex-shrink:0;color:#917184;font-size:12px;font-variant-numeric:tabular-nums}
.playlist-tracks li[hidden]{display:none!important}
.opening-past-closing p{max-width:900px;margin-inline:auto}
@media(max-width:760px){
 .opening-past-visual,.opening-past-cinema[data-media-shape="portrait"] .opening-past-visual{padding:12px 10px 178px;place-items:center}
 .opening-past-visual img{border-radius:18px 7px 18px 7px}
 .opening-past-copy,.opening-past-cinema[data-media-shape="portrait"] .opening-past-copy{position:relative;right:auto;top:auto;bottom:auto;transform:none;width:min(94vw,680px);margin-bottom:10px;padding:13px 14px 14px;text-align:center}
 .opening-past-title,.opening-past-cinema[data-media-shape="portrait"] .opening-past-title{font-size:36px}.opening-past-line,.opening-past-cinema[data-media-shape="portrait"] .opening-past-line{font-size:19px}
}