/* lelahome.vn · bản 2.1 (06/10/2026) · ảnh quán, bìa bài, máy nghe nhạc, chuyển trang, bấm nút. Nạp sau them.css. */

/* 1 · sticker góc đầu trang không đè chữ trên điện thoại (anh soát 06/10) */
@media (max-width:760px){
  .dau-trang .bao{display:flex;flex-direction:column;align-items:flex-start}
  .dau-trang .meo-goc{position:static;margin:4px 0 0 auto;width:84px}
}

/* 2 · bấm nút có cử động nhẹ (~150 ms), tôn trọng giảm chuyển động */
.nut,.chip.lk,.goi,.bai-the,.the-muc a,.phong-the{transition:transform 150ms var(--ease),box-shadow var(--cham) var(--ease),background var(--cham),border-color var(--cham)}
.nut:active,.chip.lk:active,.goi:active,.bai-the:active,.the-muc a:active,.phong-the:active{transform:scale(.97)}
.st-bo.nut:active{transform:scale(.97) rotate(-3deg)}

/* 3 · chuyển trang: trang mới hiện dần, trang cũ mờ đi trước khi đi (~300 ms) */
main{animation:hien var(--cham) var(--ease) both}
@keyframes hien{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.roi main{opacity:0;transform:translateY(-6px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}

/* 4 · ảnh quán trong card */
.quan .anh-quan{margin:-16px -18px 10px;border-radius:20px 20px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--kraft-2);position:relative}
.quan .anh-quan img{width:100%;height:100%;object-fit:cover}
.quan .anh-quan figcaption{position:absolute;right:8px;bottom:8px;font-size:11.5px;font-weight:700;background:rgba(255,248,236,.86);color:var(--olive);padding:3px 8px;border-radius:999px}
.quan .anh-trong{margin:-16px -18px 10px;height:64px;border-radius:20px 20px 0 0;background:var(--kraft-2);display:flex;align-items:center;justify-content:center;gap:10px;opacity:.7}
.quan .anh-trong img{width:28px;height:28px;opacity:.5}
.bai .quan .anh-quan,.bai .quan .anh-trong{margin:-18px -20px 12px}
.quan .so-tt{top:10px;right:10px;z-index:2}
.menu-quan{display:grid;gap:4px;margin-top:4px;font-size:14.5px;background:var(--kraft-2);border-radius:14px;padding:10px 12px}
.menu-quan li{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.menu-quan li span:last-child{font-variant-numeric:tabular-nums;color:var(--chu);font-weight:800;white-space:nowrap}
.menu-quan .tieu{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--chu-2);font-weight:800;justify-content:flex-start}
.quan .ghi-them{font-size:14px;color:var(--chu-2);font-weight:500}
[data-theme="dem"] .quan .anh-quan figcaption{background:rgba(62,58,48,.86);color:var(--kem)}

/* 5 · bìa bài, ảnh nhỏ trong card bài, lê la quanh đây */
.bia-bai{margin:18px 0 0;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:var(--kraft-2);position:relative;max-width:760px;box-shadow:var(--bong-nho)}
.bia-bai img{width:100%;height:100%;object-fit:cover}
.bia-bai figcaption{position:absolute;left:12px;bottom:12px;font-size:12.5px;font-weight:700;background:rgba(255,248,236,.9);color:var(--olive);padding:4px 10px;border-radius:999px}
.bai-the{padding:0;overflow:hidden}
.bai-the .thumb{aspect-ratio:16/9;object-fit:cover;width:100%;background:var(--kraft-2)}
.bai-the>.chu{display:grid;gap:8px;padding:14px 18px 18px}
.bai-the .ht{top:10px;right:12px;filter:drop-shadow(0 0 3px rgba(255,248,236,.9))}

/* 6 · lê la nghe: máy nghe + list bắt mắt */
.may-nhac{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:stretch;margin-top:22px;background:var(--olive);color:var(--kem);border-radius:26px;padding:18px;box-shadow:var(--bong)}
@media (max-width:760px){.may-nhac{grid-template-columns:1fr;padding:14px}}
.may-nhac .khung-yt{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#2F2B23;position:relative}
.may-nhac .khung-yt iframe,.may-nhac .khung-yt>div{position:absolute;inset:0;width:100%;height:100%;border:0}
.may-nhac .khung-yt .cho{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;font-size:14.5px;font-weight:600;color:rgba(255,248,236,.85)}
.may-nhac .khung-yt .cho img{width:110px;height:auto;margin-bottom:6px}
.may-chu{display:grid;align-content:center;gap:8px;min-width:0}
.may-chu .dang-list{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--bo)}
.may-chu .dang-bai{font-size:22px;font-weight:900;line-height:1.2;overflow-wrap:anywhere}
.may-chu .dang-ns{font-size:15px;color:rgba(255,248,236,.75);font-weight:600}
.may-nut{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.may-nut button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--bo);background:transparent;color:var(--kem);font:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:transform 150ms var(--ease),background var(--cham)}
.may-nut button.chinh{background:var(--bo);color:var(--olive)}
.may-nut button:active{transform:scale(.96)}
.may-nut button svg{width:16px;height:16px;fill:currentColor}
.goi-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
@media (max-width:860px){.goi-list{grid-template-columns:1fr 1fr}}
.goi-list button{display:grid;gap:4px;justify-items:start;text-align:left;background:var(--the);border:2px solid var(--vien);border-radius:18px;padding:12px 14px;font:inherit;color:var(--chu);cursor:pointer;transition:transform 150ms var(--ease),border-color var(--cham)}
.goi-list button:hover{border-color:var(--olive)}
.goi-list button:active{transform:scale(.97)}
.goi-list b{font-size:16px}
.goi-list span{font-size:13.5px;color:var(--chu-2);font-weight:600}
.goi-list .so{width:auto;height:auto;padding:2px 10px;border-radius:999px;font-size:12.5px}
.list-nhac .the{padding:0;overflow:hidden;--mau:var(--bo);--chu-mau:var(--olive)}
.list-nhac .dau-list{background:var(--mau);color:var(--chu-mau);padding:16px 18px 14px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;position:relative;overflow:hidden}
.list-nhac .dau-list .ht{position:absolute;right:-6px;top:-8px;width:90px;opacity:.16;transform:rotate(-12deg)}
.list-nhac .dau-list .noi{position:static;transform:rotate(-2deg);font-size:20px;padding:8px 18px;justify-self:start}
.list-nhac .dau-list .dai-list{color:inherit;opacity:.8}
.list-nhac .dau-list .nghe-list{grid-row:span 2;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:999px;border:2px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:800;font-size:15px;cursor:pointer;position:relative;z-index:1;transition:transform 150ms var(--ease),background var(--cham)}
.list-nhac .dau-list .nghe-list:active{transform:scale(.96)}
.list-nhac .dau-list .nghe-list svg{width:16px;height:16px;fill:currentColor}
.list-nhac .than-list{padding:12px 14px 16px;display:grid;gap:8px}
.list-nhac .than-list .chu-y{padding:0 4px}
.list-nhac ol{display:grid;gap:2px;margin-top:4px}
.list-nhac ol li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 8px;border-radius:12px;font-size:15px;transition:background var(--cham)}
.list-nhac ol li::before{content:counter(bai,decimal-leading-zero);counter-increment:bai;font-weight:900;font-variant-numeric:tabular-nums;color:var(--chu-2);font-size:13px}
.list-nhac ol li .ten{display:grid;min-width:0}
.list-nhac ol li .ten b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-nhac ol li .ten span{font-size:13.5px;color:var(--chu-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-nhac ol li .phat{width:38px;height:38px;border-radius:999px;border:2px solid var(--vien);background:var(--nen);color:var(--chu);display:grid;place-items:center;cursor:pointer;transition:transform 150ms var(--ease),background var(--cham),border-color var(--cham)}
.list-nhac ol li .phat svg{width:14px;height:14px;fill:currentColor}
.list-nhac ol li .phat:active{transform:scale(.92)}
.list-nhac ol li.dang{background:var(--dao-2)}
.list-nhac ol li.dang .phat{background:var(--dao);border-color:var(--dao);color:var(--olive)}
.list-nhac ol li .lk{display:none}
.list-nhac .m-dao{--mau:var(--dao);--chu-mau:var(--olive)}
.list-nhac .m-sage{--mau:var(--sage);--chu-mau:var(--olive)}
.list-nhac .m-olive{--mau:var(--olive);--chu-mau:var(--kem)}
.list-nhac .m-kraft{--mau:var(--kraft);--chu-mau:var(--olive)}
.list-nhac .m-olive .noi{background:var(--bo);color:var(--olive)}
.nghe-ghi{font-size:14px;color:var(--chu-2);font-weight:500;margin-top:14px}

/* 7 · bản 2.2: trang chủ 5 mục lê la gọn (cuộn ngang trên điện thoại), ảnh cơ sở khổ dọc */
.the-muc.goc-nha{margin-top:18px}
.the-muc.goc-nha img{width:56px}
.the-muc.goc-nha b{font-size:16px}
.the-muc.goc-nha span{font-size:13.5px}
@media (max-width:860px){.the-muc.goc-nha{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;margin-inline:-20px;padding-inline:20px;scrollbar-width:thin}
  .the-muc.goc-nha a{flex:0 0 170px;scroll-snap-align:start}}
.bai-moi-nhat{margin-top:14px;font-size:15px;font-weight:600;color:var(--chu-2)}
.bai-moi-nhat a{font-weight:800;color:var(--chu)}
.co-so-the>img{aspect-ratio:4/5}
.goi-list{display:none}

/* 8 · bản 2.3: lịch workshop tuần */
.lich-ws{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
@media (max-width:760px){.lich-ws{grid-template-columns:1fr}}
.lich-ws li{background:var(--the);border:1.5px solid var(--vien);border-radius:16px;padding:12px 14px;font-size:15px;font-weight:600;color:var(--chu-2)}
.lich-ws li b a{color:var(--chu);text-decoration:none}
.lich-ws li span{display:block;margin-top:4px;font-size:14px;font-weight:500}

/* 9 · 07/10 anh dặn: mọi sticker đều động, rõ hơn — pill chữ và sticker giấy lắc theo nhịp ~1,3 s (mèo lắc trong file SVG) */
@keyframes lac-pill{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(1deg) translateY(-2px)}}
@keyframes lac-bo{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-3px)}}
@keyframes lac-dao{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(0deg) translateY(-3px)}}
@keyframes lac-kem{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(0.5deg)}}
.noi{animation:lac-pill 1.3s ease-in-out infinite}
.sticker.st-bo:not(.dan),.sticker.st-bo.da-dan{animation:lac-bo 1.5s ease-in-out infinite}
.sticker.st-dao:not(.dan),.sticker.st-dao.da-dan{animation:lac-dao 1.7s ease-in-out infinite}
.sticker.st-kem{animation:lac-kem 1.6s ease-in-out infinite}
.sticker.da-dan{animation-delay:.3s}
.kicker{animation:lac-pill 1.9s ease-in-out infinite}
.hop-gio{animation:lac-pill 1.4s ease-in-out infinite}
.list-nhac .dau-list .noi{animation-duration:1.6s}

/* 10 · 07/10: thẻ 5 mục lê la có ảnh ngẫu nhiên của một chỗ, mèo đậu góc ảnh */
.the-muc a{padding:0;overflow:visible;gap:0}
.the-muc .anh{position:relative;width:100%;aspect-ratio:16/10;border-radius:22px 22px 0 0;overflow:hidden;background:var(--kraft-2)}
.the-muc .anh img.nen{width:100%;height:100%;object-fit:cover;display:block}
.the-muc .anh small{position:absolute;left:8px;bottom:6px;font-size:10.5px;font-weight:700;background:rgba(255,248,236,.85);color:var(--olive);padding:2px 7px;border-radius:999px}
.the-muc .meo-goc-anh{position:absolute;right:6px;bottom:-16px;width:62px;height:auto;z-index:2;filter:drop-shadow(0 2px 2px rgba(78,72,59,.25))}
.the-muc .chu{display:grid;gap:5px;padding:14px 16px 16px}
.the-muc.goc-nha .meo-goc-anh{width:56px}