/* =========================================================================
   library.css — trang chủ dạng thư viện, kệ chia theo chủ đề.
   index.html được sinh tự động bởi tools/build.mjs.
   ========================================================================= */

:root{
  --ink:#221A33;
  --soft:#5F5476;
  --bg:#F7F2EA;
  --card:#FFFFFF;
  --line:#E6DCCB;
  --wood:#A06A3C;
  --wood-d:#6B4423;
  --wood-dd:#4A2E15;
  --night:#241A38;
  --shadow:0 12px 30px rgba(34,26,51,.10);
  --shadow-lg:0 26px 56px rgba(34,26,51,.20);
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Baloo 2","Be Vietnam Pro",sans-serif; font-weight:700; margin:0; line-height:1.25}
a{color:inherit}
.wrap{max-width:900px; margin:0 auto; padding:0 20px}

/* ============================== HERO ============================== */
/* nền trùng đúng màu sàn trong tranh, để không lộ đường nối */
.hero{position:relative; background:#1B1329; overflow:hidden}
.hero-scene{width:100%; aspect-ratio:900/480; overflow:hidden; line-height:0}
.hero-scene svg{width:100%; height:100%; display:block}
/* trên điện thoại thì cắt bớt hai bên, phóng vào giữa cho đỡ bé */
@media (max-width:700px){ .hero-scene{aspect-ratio:4/3} }

.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:54%;
  background:linear-gradient(to bottom,
    rgba(27,19,41,0) 0%, rgba(27,19,41,.55) 26%, rgba(27,19,41,.92) 52%, var(--bg) 100%);
  pointer-events:none;
}
.hero-txt{
  position:relative; margin-top:-13%; padding-bottom:34px; text-align:center; color:#fff;
}
.lbl{
  display:inline-block; background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.24); font-weight:600; font-size:12px;
  letter-spacing:.16em; padding:6px 15px; border-radius:99px; backdrop-filter:blur(4px);
}
.hero h1{
  font-size:clamp(32px,7.4vw,58px); font-weight:800; margin-top:16px; letter-spacing:-.012em;
  text-shadow:0 4px 22px rgba(0,0,0,.45);
}
.hero h1 em{font-style:normal; color:#FFD48A}
.hero .lead{
  margin:16px auto 0; max-width:50ch; font-size:clamp(15.5px,2.1vw,18px);
  color:rgba(255,255,255,.84); font-weight:300;
}
.hero-links{display:flex; gap:11px; flex-wrap:wrap; justify-content:center; margin-top:24px}
.hero-links a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:500; font-size:14.5px; padding:10px 18px; border-radius:99px;
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.hero-links a:hover{background:rgba(255,255,255,.26); transform:translateY(-2px)}

@media (max-width:700px){ .hero-txt{margin-top:-16%} }

/* ========================== THANH CHỌN KỆ ========================== */
.shelf-nav{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.shelf-nav .wrap{display:flex; gap:8px; overflow-x:auto; padding-top:11px; padding-bottom:11px;
  scrollbar-width:none}
.shelf-nav .wrap::-webkit-scrollbar{display:none}
.shelf-nav a{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:99px;
  padding:8px 15px; font-size:14px; font-weight:500; color:var(--soft);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.shelf-nav a span{font-size:15px}
.shelf-nav a:hover{color:var(--ink); border-color:var(--wood); transform:translateY(-1px)}

/* ================================ KỆ ================================ */
.shelf{margin:44px 0 0; scroll-margin-top:74px}
.shelf-head{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:16px;
}
.shelf-emo{
  flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-size:25px; background:color-mix(in srgb, var(--sc) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--sc) 26%, #fff);
}
.shelf-head > div{flex:1; min-width:0}
.shelf-head h2{font-size:clamp(21px,4vw,27px); color:var(--sc)}
.shelf-head p{margin:3px 0 0; color:var(--soft); font-size:14.5px; font-weight:300; line-height:1.55}
.shelf-n{
  flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--sc); white-space:nowrap;
  background:color-mix(in srgb, var(--sc) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--sc) 24%, #fff);
  padding:5px 12px; border-radius:99px; margin-top:5px;
}

/* --- thân kệ: sách đứng trên ván gỗ --- */
.shelf-body{
  display:flex; align-items:flex-end; gap:18px;
  padding:0 4px 0;
}
.shelf-books{
  flex:1; min-width:0;
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
}
.shelf-deco{
  flex:0 0 auto; width:92px; color:var(--sc); align-self:flex-end;
  opacity:.95; pointer-events:none;
}
.shelf-deco svg{width:100%; height:auto; display:block}

/* ván gỗ dưới đáy kệ */
.shelf-plank{margin-top:-2px}
.shelf-plank i{
  display:block; height:17px; border-radius:4px;
  background:linear-gradient(180deg, var(--wood) 0%, var(--wood-d) 62%, var(--wood-dd) 100%);
  box-shadow:0 14px 26px rgba(74,46,21,.32), inset 0 1.5px 0 rgba(255,255,255,.26);
}

/* ============================ MỘT CUỐN ============================ */
.bk{
  flex:1 1 300px; min-width:0; max-width:100%;
  display:grid; grid-template-columns:98px 1fr; gap:16px; align-items:flex-end;
  text-decoration:none; padding:0 0 8px;
}
.bk-3d{
  position:relative; display:block; width:88px; height:126px;
  perspective:820px; perspective-origin:130% 50%;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.bk:hover .bk-3d, .bk:focus-visible .bk-3d{transform:translateY(-9px)}
.bk:focus-visible{outline:none}
.bk:focus-visible .bk-cover{box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent), 8px 10px 22px rgba(34,26,51,.30)}

/* xấp giấy lộ mép phải */
.bk-pages{
  position:absolute; top:4px; bottom:4px; right:-4px; width:11px; border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(90deg,#fff 0 2px,#E2D8C6 2px 3px);
  box-shadow:2px 4px 10px rgba(34,26,51,.24);
}
/* gáy sách */
.bk-spine{
  position:absolute; left:0; top:0; bottom:0; width:15px; border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--c2) 76%, #000) 0%, var(--c2) 60%,
    color-mix(in srgb, var(--c2) 72%, #000) 100%);
  z-index:3; overflow:hidden;
}
.bk-spine-t{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center; white-space:nowrap;
  font-family:"Baloo 2",sans-serif; font-weight:600; font-size:8.5px;
  color:rgba(255,255,255,.72); letter-spacing:.02em;
}
/* bìa trước — hé mở khi chạm */
.bk-cover{
  position:absolute; inset:0; left:13px; border-radius:3px 6px 6px 3px;
  background:linear-gradient(152deg, var(--c) 0%, var(--c2) 100%);
  box-shadow:6px 8px 18px rgba(34,26,51,.26), inset 0 0 0 1px rgba(255,255,255,.13);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.3,.7,.3,1), box-shadow .5s ease;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10px 9px; overflow:hidden; z-index:4;
}
.bk-cover-l{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.24) 0%, transparent 44%);
}
.bk-cover::before{
  content:""; position:absolute; left:3px; top:0; bottom:0; width:2px; background:rgba(0,0,0,.17);
}
.bk:hover .bk-cover, .bk:focus-visible .bk-cover{
  transform:rotateY(-42deg);
  box-shadow:18px 14px 30px rgba(34,26,51,.34), inset 0 0 0 1px rgba(255,255,255,.13);
}
.bk-emoji{
  position:absolute; top:9px; left:10px; font-size:19px; line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.bk-no{
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:26px; line-height:.9;
  color:rgba(255,255,255,.95); letter-spacing:-.03em; position:relative; z-index:2;
}
.bk-cover-t{
  font-family:"Baloo 2",sans-serif; font-weight:600; font-size:9.5px; line-height:1.22;
  color:rgba(255,255,255,.92); margin-top:4px; position:relative; z-index:2;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* --- chữ bên phải --- */
.bk-meta{display:block; min-width:0; padding-bottom:2px}
.bk-tag{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  color:var(--c); background:color-mix(in srgb, var(--c) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 24%, #fff);
  padding:3px 9px; border-radius:99px; margin-bottom:7px;
}
.bk-title{
  display:block; font-family:"Baloo 2",sans-serif; font-weight:700;
  font-size:18px; line-height:1.24; letter-spacing:-.004em;
}
.bk-desc{
  display:block; margin-top:5px; color:var(--soft);
  font-size:14px; line-height:1.6; font-weight:300;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bk-foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px;
  font-size:12.5px; color:var(--soft);
}
.bk-go{
  display:inline-flex; align-items:center; gap:5px; margin-left:auto;
  font-weight:600; font-size:13.5px; color:var(--c);
}
.bk-go svg{transition:transform .24s ease}
.bk:hover .bk-go svg{transform:translateX(4px)}

/* --- kệ trống --- */
.bk-soon{
  flex:1 1 100%; display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px dashed var(--line); border-radius:var(--r);
  padding:20px 22px; color:var(--soft); font-size:14.5px; font-weight:300;
  margin-bottom:8px;
}
.bk-soon b{color:var(--ink); font-weight:600}
.bk-soon-i{font-size:26px; flex:0 0 auto}

/* ============================== KẾT ============================== */
.soon{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 28px; margin:46px 0 0; text-align:center; box-shadow:var(--shadow);
}
.soon h2{font-size:19px; margin-bottom:7px}
.soon p{margin:0; color:var(--soft); font-size:15px; font-weight:300}
.soon-rss{
  margin-top:16px !important; display:flex; flex-direction:column;
  align-items:center; gap:6px;
}
.soon-rss a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:color-mix(in srgb, var(--wood) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--wood) 30%, #fff);
  color:var(--wood-d); font-weight:600; font-size:14px;
  padding:8px 16px; border-radius:99px;
  transition:border-color .2s ease, transform .2s ease;
}
.soon-rss a:hover{border-color:var(--wood); transform:translateY(-1px)}
.soon-rss span{font-size:12.5px; color:var(--soft)}
.foot{padding:40px 0 56px; text-align:center; color:var(--soft); font-size:14px}

/* ============================== MOBILE ============================== */
@media (max-width:700px){
  .bk{flex:1 1 100%; grid-template-columns:82px 1fr; gap:14px}
  .bk-3d{width:74px; height:106px}
  .bk-no{font-size:22px}
  .bk-cover-t{font-size:8.5px; -webkit-line-clamp:2}
  .shelf-deco{width:66px}
  .shelf-head{gap:11px}
  .shelf-emo{width:40px; height:40px; font-size:21px; border-radius:12px}
  .shelf-n{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bk-3d,.bk-cover,.bk-go svg,.hero-links a,.shelf-nav a{transition:none !important}
  .bk:hover .bk-cover{transform:none}
  .bk:hover .bk-3d{transform:none}
}

/* =========================================================================
   HOẠT HOẠ — cảnh thư viện sống dậy một chút.
   Tất cả đều rất chậm và nhẹ, để nhìn lâu không bị mỏi mắt.
   Ai bật "giảm chuyển động" trong máy thì tự động tắt hết.
   ========================================================================= */

/* --- mèo ngủ: đuôi ve vẩy, người phập phồng thở, zzz bay lên --- */
.a-cat{animation:breathe 4.4s ease-in-out infinite; transform-origin:700px 340px}
.a-tail{animation:tail 3.6s ease-in-out infinite; transform-origin:-36px 2px; transform-box:fill-box}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.022)}}
@keyframes tail{0%,100%{transform:rotate(0deg)} 35%{transform:rotate(-13deg)} 70%{transform:rotate(7deg)}}

.a-z{opacity:0}
.a-z1{animation:zfloat 3.4s ease-in-out infinite}
.a-z2{animation:zfloat 3.4s ease-in-out infinite 1.1s}
@keyframes zfloat{
  0%{opacity:0; transform:translate(0,6px) scale(.7)}
  25%{opacity:.9}
  100%{opacity:0; transform:translate(9px,-20px) scale(1.15)}
}

/* --- chim: nhún nhảy và chớp mắt --- */
.a-bird{animation:hop 5.2s ease-in-out infinite; transform-origin:center}
@keyframes hop{
  0%,58%,100%{transform:translate(200px,178px)}
  64%{transform:translate(200px,170px)}
  70%{transform:translate(200px,178px)}
  76%{transform:translate(200px,173px)}
  82%{transform:translate(200px,178px)}
}
.a-blink{animation:blink 4.6s steps(1,end) infinite; transform-box:fill-box; transform-origin:center}
@keyframes blink{0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.1)}}

/* --- bướm bay lượn --- */
.a-fly1{animation:fly1 11s ease-in-out infinite}
.a-fly2{animation:fly2 9s ease-in-out infinite}
@keyframes fly1{
  0%,100%{transform:translate(560px,190px)}
  25%{transform:translate(596px,158px)}
  50%{transform:translate(566px,132px)}
  75%{transform:translate(528px,166px)}
}
@keyframes fly2{
  0%,100%{transform:translate(268px,86px)}
  30%{transform:translate(304px,62px)}
  60%{transform:translate(282px,110px)}
}

/* --- bụi trong nắng --- */
.a-motes circle{animation:mote 7s ease-in-out infinite}
.a-motes circle:nth-child(2){animation-duration:9s; animation-delay:-2s}
.a-motes circle:nth-child(3){animation-duration:8s; animation-delay:-4s}
.a-motes circle:nth-child(4){animation-duration:10s; animation-delay:-1s}
.a-motes circle:nth-child(5){animation-duration:7.5s; animation-delay:-5s}
.a-motes circle:nth-child(6){animation-duration:11s; animation-delay:-3s}
@keyframes mote{
  0%,100%{transform:translateY(0); opacity:.25}
  50%{transform:translateY(-16px); opacity:.75}
}

/* --- cây đung đưa --- */
.a-sway1{animation:sway 7s ease-in-out infinite; transform-origin:316px 392px}
.a-sway2{animation:sway 8.5s ease-in-out infinite -2s; transform-origin:596px 392px}
@keyframes sway{0%,100%{transform:rotate(-1.1deg)} 50%{transform:rotate(1.1deg)}}
.a-hang{animation:hang 6s ease-in-out infinite; transform-origin:812px 74px}
@keyframes hang{0%,100%{transform:rotate(-2.4deg)} 50%{transform:rotate(2.4deg)}}

/* --- nắng thở nhẹ --- */
.a-sun{animation:sunpulse 9s ease-in-out infinite}
@keyframes sunpulse{0%,100%{opacity:.75} 50%{opacity:1}}

/* --- đồ trang trí trên từng kệ cũng động một chút --- */
.shelf-deco svg{animation:float 6s ease-in-out infinite}
.shelf:nth-child(2) .shelf-deco svg{animation-duration:7.4s; animation-delay:-1.5s}
.shelf:nth-child(3) .shelf-deco svg{animation-duration:8.2s; animation-delay:-3s}
.shelf:nth-child(4) .shelf-deco svg{animation-duration:6.8s; animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.8deg)} 50%{transform:translateY(-6px) rotate(.8deg)}}

/* --- sách khẽ nhô lên khi kệ vừa hiện ra --- */
@media (prefers-reduced-motion:no-preference){
  .bk-3d{animation:rise .55s cubic-bezier(.2,.8,.3,1) both}
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
}

@media (prefers-reduced-motion:reduce){
  .a-cat,.a-tail,.a-z,.a-bird,.a-blink,.a-fly1,.a-fly2,
  .a-motes circle,.a-sway1,.a-sway2,.a-hang,.a-sun,
  .shelf-deco svg,.bk-3d{animation:none !important}
  .a-z{opacity:.7}
}

/* ============================== ĐÔI LỜI ============================== */
.foot .note{
  max-width:640px; margin:0 auto; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px; box-shadow:var(--shadow);
}
.foot .note h2{
  font-size:19px; margin-bottom:12px; color:var(--ink);
}
.foot .note p{
  margin:0 0 .95em; font-size:15.5px; line-height:1.78;
  color:var(--soft); font-weight:300;
}
.foot .note .sig{
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:15px; color:var(--ink);
}
.foot .note .sig b{font-weight:600}
.foot .note .sig a{
  color:var(--soft); text-decoration-color:var(--line); text-underline-offset:3px;
}
.foot .note .sig a:hover{color:var(--wood-d)}
@media (max-width:560px){
  .foot .note{padding:22px 20px}
}

/* ============================ CHUỖI NGÀY ĐỌC ============================
   Cố tình KHÔNG làm kiểu Duolingo. Nghỉ một hôm không đứt chuỗi, và không
   có câu nào trách móc — khớp với luật trong cuốn "Từng bước một". */
.tv-streak{
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(150deg,#FFF6E6,#fff);
  border:1px solid #F0DCB4; border-radius:var(--r);
  padding:18px 20px; margin:26px 0 0; box-shadow:var(--shadow);
}
.tv-s-num{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  min-width:74px; line-height:1;
}
.tv-s-num .fire{font-size:20px; margin-bottom:2px}
.tv-s-num b{
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:38px;
  color:#C9821A; letter-spacing:-.02em;
}
.tv-s-num em{font-style:normal; font-size:12px; color:#9A7434; margin-top:3px}
.tv-s-body{flex:1; min-width:0}
.tv-s-dots{display:flex; gap:4px; margin-bottom:9px}
.tv-s-dots i{
  flex:1 1 0; height:9px; border-radius:3px; display:block;
  background:#EFE2C8;
}
.tv-s-dots i.on{background:#E0A02E}
.tv-s-dots i.nay{outline:2px solid #C9821A; outline-offset:1px}
.tv-streak p{margin:0; font-size:14.5px; line-height:1.6; color:#6B5530; font-weight:300}
.tv-streak p b{color:#4A3A16; font-weight:600}
.tv-s-sub{margin-top:5px !important; font-size:12.5px !important; color:#9A8556 !important}
@media (max-width:520px){
  .tv-streak{gap:13px; padding:15px 16px}
  .tv-s-num{min-width:60px}
  .tv-s-num b{font-size:31px}
}

/* thông báo mốc chuỗi */
.tv-mung{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:60; pointer-events:none; text-align:center;
  background:#fff; color:var(--ink); border-radius:18px;
  padding:15px 24px; box-shadow:0 16px 40px rgba(34,26,51,.28);
  font-size:17px; line-height:1.5; max-width:min(340px,88vw);
  animation:tv-mung 4.6s cubic-bezier(.2,.8,.3,1) both;
}
.tv-mung b{font-family:"Baloo 2",sans-serif; font-weight:700; font-size:19px}
.tv-mung span{display:block; margin-top:5px; font-size:14.5px; color:var(--soft); font-weight:300}
@keyframes tv-mung{
  0%{opacity:0; transform:translate(-50%,18px) scale(.94)}
  8%{opacity:1; transform:translate(-50%,0) scale(1)}
  88%{opacity:1; transform:translate(-50%,0) scale(1)}
  100%{opacity:0; transform:translate(-50%,-8px) scale(.98)}
}
@media (prefers-reduced-motion:reduce){ .tv-mung{animation:none} }

/* =========================== NHÓM NHÀ MÌNH ===========================
   Cố tình KHÔNG có ô gõ chữ tự do nào cho trẻ — chỉ chọn trong lời có sẵn. */
.tv-nhom{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; margin:16px 0 0; box-shadow:var(--shadow);
}
.tv-n-head{display:flex; gap:14px; align-items:flex-start}
.tv-n-head > span{
  flex:0 0 auto; width:42px; height:42px; border-radius:13px; display:grid;
  place-items:center; font-size:21px; background:#F3EFE4; border:1px solid var(--line);
}
.tv-n-head h3{font-size:18px; margin:0}
.tv-n-head p{margin:3px 0 0; font-size:14px; color:var(--soft); font-weight:300; line-height:1.6}
.tv-n-head p b{color:var(--ink); font-weight:600; letter-spacing:.06em}

.tv-n-act{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.tv-b{
  font-family:"Baloo 2",sans-serif; font-weight:600; font-size:15px; cursor:pointer;
  background:var(--wood-d); color:#fff; border:0; border-radius:99px; padding:10px 20px;
  transition:transform .18s ease, background .18s ease;
}
.tv-b:hover{transform:translateY(-2px)}
.tv-b.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.tv-b.ghost:hover{border-color:var(--wood)}

.tv-n-form{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.tv-n-form label{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px}
.tv-n-form input, .tv-n-form textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:#FBF8F2; border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; margin-bottom:10px; line-height:1.6; resize:vertical;
}
.tv-n-form input{letter-spacing:.14em; font-weight:600; text-align:center}
.tv-n-form input:focus, .tv-n-form textarea:focus{outline:2px solid var(--wood); outline-offset:1px}
.tv-n-note{
  background:#FDF6E7; border:1px solid #EDDCB6; border-radius:12px;
  padding:11px 14px; margin:0 0 12px; font-size:14px; color:#6B5530; font-weight:300; line-height:1.6;
}
.tv-n-msg{margin:0 0 10px; font-size:14px; color:var(--soft); min-height:20px}
.tv-n-sub{margin:9px 0 0; font-size:12.5px; color:var(--soft); font-weight:300; line-height:1.6}

.tv-n-ma{text-align:center; padding:8px 0 4px}
.tv-n-ma p{margin:0; font-size:14px; color:var(--soft)}
.tv-n-ma b{
  display:block; font-family:"Baloo 2",sans-serif; font-weight:800;
  font-size:40px; letter-spacing:.14em; color:var(--wood-d); margin:6px 0;
}
.tv-n-ai, .tv-n-loi{display:flex; gap:8px; flex-wrap:wrap}
.tv-n-loi .tv-b{font-size:14px; padding:9px 15px}

.tv-n-hop{
  background:#F1F8F3; border:1px solid #CDE7D5; border-radius:13px;
  padding:11px 14px; margin:14px 0 0; font-size:14.5px; color:#2E6B44; font-weight:300;
}
.tv-n-bang{list-style:none; margin:14px 0 0; padding:0}
.tv-n-bang li{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:13px; margin-bottom:7px;
  background:#FBF8F2; border:1px solid var(--line); font-size:15.5px;
}
.tv-n-bang li.toi{background:#FFF6E6; border-color:#F0DCB4}
.tv-n-ten{flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tv-n-ten em{font-style:normal; color:var(--soft); font-size:13px; font-weight:400}
.tv-n-so{flex:0 0 auto; font-weight:600; color:#C9821A; font-variant-numeric:tabular-nums}
.tv-n-30{flex:0 0 auto; font-size:12.5px; color:var(--soft); font-variant-numeric:tabular-nums}
.tv-n-khen{flex:0 0 auto; font-size:13px; color:#2E8B52; min-width:34px; text-align:right}
.tv-n-gui{
  flex:0 0 auto; background:transparent; border:1px solid var(--line);
  border-radius:99px; width:34px; height:34px; cursor:pointer; font-size:15px;
  transition:border-color .2s ease, transform .2s ease;
}
.tv-n-gui:hover{border-color:var(--wood); transform:scale(1.08)}
.tv-lk{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--soft); text-decoration:underline; text-underline-offset:3px;
}
.tv-lk:hover{color:var(--ink)}
@media (max-width:520px){
  .tv-nhom{padding:16px 16px}
  .tv-n-30{display:none}
}
.tv-n-canh{
  background:#FDF1E6; border:1px solid #F0D3B4; border-radius:12px;
  padding:11px 14px; margin:12px 0 0; font-size:13.5px; line-height:1.65;
  color:#7A4E22; font-weight:300; text-align:left;
}
.tv-n-canh b{color:#5A3612; font-weight:600}

/* ======================= KỆ MỞ / ĐÓNG =======================
   Trước đây đổ hết 7 kệ ra một mạch, phải kéo rất dài. Giờ mỗi kệ là một
   cánh cửa — đóng thì thấy có gì bên trong, bấm mới mở. */
.shelf-head{
  display:flex; align-items:flex-start; gap:14px; width:100%;
  margin-bottom:0; padding:14px 15px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; font:inherit; color:inherit;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.shelf-head:hover{
  border-color:var(--sc); transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(34,26,51,.10);
}
.shelf-head:focus-visible{outline:3px solid var(--sc); outline-offset:2px}
.shelf.mo .shelf-head{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  border-bottom-color:transparent; transform:none;
}
.shelf-txt{flex:1; min-width:0; display:block}
.shelf-h2{
  display:block; font-family:"Baloo 2",sans-serif; font-weight:700;
  font-size:clamp(19px,3.6vw,25px); line-height:1.25; color:var(--sc);
}
.shelf-p{
  display:block; margin-top:3px; color:var(--soft);
  font-size:14px; font-weight:300; line-height:1.55;
}
.shelf-caret{
  flex:0 0 auto; width:26px; height:26px; margin-top:6px; color:var(--sc);
  display:grid; place-items:center; transition:transform .3s cubic-bezier(.3,.7,.3,1);
}
.shelf-caret svg{width:20px; height:20px}
.shelf.mo .shelf-caret{transform:rotate(180deg)}

.shelf-wrap{
  overflow:hidden; height:0;
  transition:height .38s cubic-bezier(.3,.7,.3,1);
  border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r) var(--r);
  background:color-mix(in srgb, var(--sc) 4%, #fff);
}
.shelf-wrap[hidden]{display:none}
.shelf.mo .shelf-wrap{border-color:var(--sc)}
.shelf-wrap .shelf-body{padding:16px 15px 0}
.shelf-wrap .shelf-plank{padding:0 15px 15px}

/* nút "Mở cửa vào" ở bìa — giờ là nút thật */
button.lbl{
  font-family:inherit; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
button.lbl:hover{background:rgba(255,255,255,.28); transform:translateY(-2px)}
button.lbl:focus-visible{outline:3px solid #FFD48A; outline-offset:3px}

@media (max-width:520px){
  .shelf-head{gap:11px; padding:12px 13px}
  .shelf-n{display:inline-block; font-size:11.5px; padding:4px 9px}
  .shelf-wrap .shelf-body{padding:14px 12px 0}
}
@media (prefers-reduced-motion:reduce){
  .shelf-wrap{transition:none}
  .shelf-caret{transition:none}
}