*{box-sizing:border-box;}
:root{--kyyeu-accent:#8C5A72; --kyyeu-heading-font:'Cormorant Garamond',serif; --kyyeu-heading-scale:1;}
html{background:#F7EFF2;}
body{margin:0; color:#3A2E36; font-family:'Literata',serif; line-height:1.8; overflow-x:hidden;
  background:var(--kyyeu-bg,
    radial-gradient(ellipse 65% 45% at 50% 0%, rgba(140,90,114,.08), transparent 60%),
    #F7EFF2);
}
.wrap{max-width:700px; margin:0 auto; position:relative; z-index:2;}
@media (prefers-reduced-motion: reduce){ .carousel-3d, .note{animation:none !important;} }

.note-field{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.note{position:absolute; color:var(--kyyeu-accent); font-size:18px; opacity:0; animation:floatNote 7s ease-in-out infinite;}
@keyframes floatNote{
  0%{opacity:0; transform:translateY(0) rotate(0);}
  20%{opacity:.55;}
  100%{opacity:0; transform:translateY(-160px) translateX(var(--dx,20px)) rotate(24deg);}
}

/* HỘP NHẠC */
.cover{padding:50px 20px 30px; text-align:center; position:relative; z-index:2;}
.music-box{position:relative; width:300px; margin:0 auto 30px; perspective:1000px;}
.box-lid{
  height:80px; background:linear-gradient(160deg,#A87088,#7A4A60);
  border-radius:8px 8px 3px 3px; border:2px solid #C99AAE;
  box-shadow:0 10px 24px rgba(58,46,54,.28);
  transform-origin:bottom center; transition:transform 1.1s cubic-bezier(.6,0,.3,1);
  position:relative; z-index:3;
}
.lid-inlay{position:absolute; inset:12px; border:1px dashed rgba(247,239,242,.45); border-radius:4px;}
.music-box.open .box-lid{transform:rotateX(-118deg);}
.box-interior{
  height:250px; background:linear-gradient(180deg,#F2E4EA,#E4D0DA);
  border:2px solid #C99AAE; border-top:none; border-radius:0 0 8px 8px;
  box-shadow:inset 0 6px 18px rgba(122,74,96,.18), 0 14px 30px rgba(58,46,54,.2);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s ease .5s;
}
.music-box.open .box-interior{opacity:1;}
.carousel-3d{
  position:relative; width:130px; height:130px; transform-style:preserve-3d;
  animation:spinBox 26s linear infinite; animation-play-state:paused;
}
.music-box.open .carousel-3d{animation-play-state:running;}
@keyframes spinBox{from{transform:rotateY(0);} to{transform:rotateY(360deg);}}
.carousel-card{
  position:absolute; inset:0; border-radius:6px; overflow:hidden;
  border:2px solid #fff; box-shadow:0 6px 14px rgba(58,46,54,.25); backface-visibility:hidden;
}
.carousel-card img{width:100%; height:100%; object-fit:cover;}
.box-mirror{position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(transparent, rgba(255,255,255,.35)); pointer-events:none;}
.box-crank{
  position:absolute; right:-14px; top:104px; z-index:4;
  background:none; border:none; color:#7A4A60; cursor:pointer; padding:6px;
  transition:transform 1s ease;
}
.music-box.open .box-crank{transform:rotate(540deg); opacity:.35;}
.crank-hint{font-size:12.5px; color:#8A7480; font-style:italic; margin-top:14px;}
.music-box.open ~ .cover-text{opacity:1; transform:translateY(0);}

.cover-text{opacity:0; transform:translateY(14px); transition:opacity .7s ease .9s, transform .7s ease .9s;}
.eyebrow{font-size:10.5px; letter-spacing:.32em; color:var(--kyyeu-accent); margin-bottom:14px;}
.cover h1{font-family:var(--kyyeu-heading-font); font-style:italic; font-weight:600; font-size:calc(42px * var(--kyyeu-heading-scale)); margin:0 0 10px; color:var(--kyyeu-accent);}
.melody-line{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:16px; color:#8A6478; margin:0 0 12px; letter-spacing:.04em;}
.cover-meta{margin:0; font-size:13.5px; color:#8A7480;}

.section{padding:54px 24px 8px; position:relative; z-index:2;}
.section-head{text-align:center; margin-bottom:30px;}
.section h2{font-family:var(--kyyeu-heading-font); font-style:italic; font-weight:600; font-size:calc(28px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 6px;}
.section .sub{font-size:12.5px; color:#8A7480;}

/* DANH SÁCH NHẠC */
.playlist{max-width:520px; margin:0 auto; background:#fff; border-radius:12px; padding:8px 0; box-shadow:0 10px 26px rgba(140,90,114,.1);}
.playlist-row{display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px dashed #F0E2E8;}
.playlist-row:last-child{border-bottom:none;}
.pl-note{color:var(--kyyeu-accent); font-size:15px; flex-shrink:0;}
.pl-name{flex:1; font-size:14.5px; color:#3A2E36;}
.pl-when{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:13px; color:#8A7480; text-align:right; max-width:45%;}

/* ẢNH TĨNH */
.still-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.still-grid figure{margin:0;}
.still-grid img{width:100%; height:130px; object-fit:cover; border-radius:10px; display:block; box-shadow:0 8px 18px rgba(140,90,114,.14);}
.still-grid figcaption{text-align:center; font-family:var(--kyyeu-heading-font); font-style:italic; font-size:13px; color:#8A7480; margin-top:8px;}
@media(max-width:560px){.still-grid{grid-template-columns:repeat(2,1fr);}}

.see-full{text-align:center; margin:34px 0 0;}
.see-full a{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:15px; color:var(--kyyeu-accent); text-decoration:none; border-bottom:1px solid rgba(140,90,114,.4); padding-bottom:2px;}

/* KÝ ỨC ÂM THANH */
.sound-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:560px; margin:0 auto;}
.sound-card{background:#fff; border-radius:14px; padding:18px 20px; box-shadow:0 8px 20px rgba(140,90,114,.1);}
.sound-wave{display:flex; align-items:flex-end; gap:3px; height:20px; margin-bottom:10px;}
.sound-wave span{width:3px; background:var(--kyyeu-accent); border-radius:2px; animation:wave 1.4s ease-in-out infinite;}
.sound-wave span:nth-child(1){height:8px; animation-delay:0s;}
.sound-wave span:nth-child(2){height:16px; animation-delay:.15s;}
.sound-wave span:nth-child(3){height:20px; animation-delay:.3s;}
.sound-wave span:nth-child(4){height:12px; animation-delay:.45s;}
.sound-wave span:nth-child(5){height:17px; animation-delay:.6s;}
@keyframes wave{0%,100%{transform:scaleY(.45);} 50%{transform:scaleY(1);}}
.sound-card strong{display:block; font-size:14.5px; color:#3A2E36; margin-bottom:4px;}
.sound-desc{font-size:13px; color:#8A7480; font-style:italic;}
@media(max-width:560px){.sound-grid{grid-template-columns:1fr;}}

/* LỜI GHI NẮP HỘP */
.lid-notes{max-width:520px; margin:0 auto;}
.lid-note{background:#fff; border-radius:12px; border-left:3px solid var(--kyyeu-accent); padding:18px 22px; margin-bottom:15px; box-shadow:0 8px 18px rgba(140,90,114,.09);}
.lid-note p{margin:0 0 8px; font-size:14.5px; color:#3A2E36;}
.lid-note cite{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:13.5px; color:var(--kyyeu-accent);}

.share{margin:60px 24px 30px; padding:42px 26px; text-align:center; border-radius:20px; background:linear-gradient(150deg,#A87088,#7A4A60); color:#F7EFF2;}
.share h2{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:26px; margin:0 0 8px;}
.share p{font-size:13px; margin:0 0 20px; opacity:.85;}
#qrcode{background:#fff; display:inline-block; padding:9px; border-radius:10px; margin-bottom:16px;}
.link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:12.5px;}
.link-row code{background:rgba(247,239,242,.16); padding:7px 13px; border-radius:20px;}
.link-row button{background:#F7EFF2; color:#7A4A60; border:none; padding:7px 15px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer;}

.foot{text-align:center; font-size:11.5px; color:#9A8490; padding:0 20px 44px; position:relative; z-index:2;}

/* ============ HIỆU ỨNG ĐỘNG BỔ SUNG ============ */

/* 1. THANH ĐIỀU KHIỂN TỐC ĐỘ XOAY */
.box-controls{display:flex; justify-content:center; align-items:center; gap:14px; margin-top:16px; opacity:0; transition:opacity .6s ease .8s;}
.music-box.open ~ .box-controls, .box-controls.show{opacity:1;}
.speed-btn{background:none; border:1px solid rgba(140,90,114,.4); color:var(--kyyeu-accent);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:13px; transition:background .3s ease, transform .3s ease;}
.speed-btn:hover{background:rgba(140,90,114,.12); transform:scale(1.1);}
.speed-label{font-size:11.5px; color:#8A7480; letter-spacing:.08em; min-width:70px;}

/* 2. THANH SÓNG NHẠC TỰ CHƠI DƯỚI HỘP */
.equalizer{display:flex; justify-content:center; align-items:flex-end; gap:4px; height:26px; margin-top:18px;}
.equalizer span{width:4px; border-radius:2px; background:linear-gradient(180deg,var(--kyyeu-accent),#C99AAE);
  animation:eqPlay 1.1s ease-in-out infinite; animation-play-state:paused;}
.music-box.open ~ .equalizer span, .equalizer.playing span{animation-play-state:running;}
.equalizer span:nth-child(1){height:9px; animation-delay:0s;}
.equalizer span:nth-child(2){height:20px; animation-delay:.12s;}
.equalizer span:nth-child(3){height:26px; animation-delay:.24s;}
.equalizer span:nth-child(4){height:14px; animation-delay:.36s;}
.equalizer span:nth-child(5){height:22px; animation-delay:.48s;}
.equalizer span:nth-child(6){height:11px; animation-delay:.6s;}
.equalizer span:nth-child(7){height:24px; animation-delay:.72s;}
@keyframes eqPlay{0%,100%{transform:scaleY(.35);} 50%{transform:scaleY(1);}}

/* 3. ẢNH TRONG VÒNG XOAY: BẤM ĐỂ PHÓNG TO */
.carousel-card{cursor:zoom-in; transition:filter .3s ease;}
.carousel-card:hover{filter:brightness(1.15);}
.box-zoom{position:fixed; inset:0; z-index:120; background:rgba(58,46,54,.93); display:none; align-items:center; justify-content:center; padding:26px;}
.box-zoom.open{display:flex; animation:zoomFade .4s ease;}
@keyframes zoomFade{from{opacity:0;} to{opacity:1;}}
.box-zoom img{max-width:100%; max-height:80vh; border-radius:12px; border:5px solid #fff; box-shadow:0 26px 60px rgba(0,0,0,.5); animation:zoomIn .45s cubic-bezier(.2,.9,.3,1);}
@keyframes zoomIn{from{transform:scale(.85); opacity:0;} to{transform:scale(1); opacity:1;}}

/* 4. DANH SÁCH NHẠC: DÒNG SÁNG LÊN + NỐT NHẢY KHI DI CHUỘT */
.playlist-row{transition:background .35s ease, transform .35s ease;}
.playlist-row:hover{background:rgba(140,90,114,.06); transform:translateX(5px);}
.playlist-row:hover .pl-note{animation:noteBounce .6s ease;}
@keyframes noteBounce{0%,100%{transform:translateY(0);} 40%{transform:translateY(-7px) rotate(-12deg);}}

/* 5. ẢNH TĨNH HIỆN LẦN LƯỢT KHI CUỘN */
.still-grid figure{opacity:0; transform:translateY(20px) scale(.96);}
.still-grid figure.appeared{opacity:1; transform:translateY(0) scale(1); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.85,.3,1);}