*{box-sizing:border-box;}
  body{margin:0; background:#EFE4D4; color:#3A2A1E; font-family:'Literata',serif; line-height:1.7;}
  .wrap{max-width:700px; margin:0 auto;}
  @media (prefers-reduced-motion: reduce){ *{transition-duration:.001s !important;} }

  .cover{padding:52px 24px 34px; text-align:center; background:#5B3A29; color:#F6EFE0;}
  .eyebrow{font-size:11.5px; letter-spacing:.25em; color:#D3B98B; margin-bottom:16px;}
  .book-cover{width:150px; height:190px; margin:0 auto 18px; background:#3E6E64; border:3px solid #D3B98B; box-shadow:0 16px 34px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; padding:14px;}
  .book-cover span{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:#F6EFE0; line-height:1.4;}
  .cover h1{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:34px; margin:0 0 8px;}
  .cover p{margin:0; font-size:14px; color:#D3B98B;}

  .section{padding:48px 24px 8px;}
  .section-head{text-align:center; margin-bottom:26px;}
  .section h2{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:26px; color:#5B3A29; margin:0 0 4px;}
  .section .sub{font-size:13.5px; color:#7A6650;}

  /* THẺ MỤC LỤC — DRAWER MỞ */
  .catalog{max-width:560px; margin:0 auto;}
  .card{background:#F6EFE0; border:1px solid #D3B98B; border-radius:2px; margin-bottom:12px; box-shadow:0 4px 10px rgba(58,42,30,.08); transition:box-shadow .3s;}
  .card.open{box-shadow:0 16px 32px rgba(58,42,30,.18);}
  .card-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; cursor:pointer;}
  .call-number{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12.5px; color:#8B2E2E; border:1px solid #8B2E2E; padding:2px 8px; border-radius:2px; margin-right:12px; flex-shrink:0;}
  .card-title{font-size:15px; font-weight:500; flex:1;}
  .card-toggle{font-size:18px; color:#3E6E64; transition:transform .3s;}
  .card.open .card-toggle{transform:rotate(45deg);}
  .card-body{max-height:0; overflow:hidden; transition:max-height .4s ease;}
  .card.open .card-body{max-height:280px;}
  .card-body-inner{padding:0 20px 20px; display:flex; gap:16px; align-items:flex-start;}
  .card-body-inner img{width:120px; height:120px; object-fit:cover; border-radius:2px; flex-shrink:0;}
  .card-body-inner p{margin:0 0 6px; font-size:14px;}
  .card-body-inner cite{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13px; color:#3E6E64;}
  @media(max-width:480px){.card-body-inner{flex-direction:column;} .card-body-inner img{width:100%; height:150px;} .card.open .card-body{max-height:420px;}}

  .see-full{text-align:center; margin:22px 0 0;}
  .see-full a{font-family:'Cormorant Garamond',serif; font-size:15px; color:#5B3A29; text-decoration:none; border-bottom:1px solid #D3B98B;}

  .share{margin:52px 24px 30px; padding:34px 24px; text-align:center; border-radius:2px; background:#5B3A29; color:#F6EFE0;}
  .share h2{font-family:'Cormorant Garamond',serif; font-size:26px; margin:0 0 6px;}
  .share p{font-size:13.5px; color:#D3B98B; margin:0 0 18px;}
  #qrcode{background:#fff; display:inline-block; padding:8px; margin-bottom:14px;}
  .link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px;}
  .link-row code{background:rgba(246,239,224,.12); padding:6px 12px; border-radius:20px;}
  .link-row button{background:#8B2E2E; color:#F6EFE0; border:none; padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer;}

  .foot{text-align:center; font-size:12px; color:#7A6650; padding:0 20px 40px;}