*{box-sizing:border-box;}
  body{margin:0; background:#EFE8D6; color:#2A2620; font-family:'Literata',serif; line-height:1.6;}
  .page{max-width:720px; margin:0 auto; position:relative; padding-left:34px;}

  /* sổ tay xoắn ốc bên trái */
  .spiral{position:fixed; left:0; top:0; bottom:0; width:34px; background:#E2D9C0; z-index:5;
    background-image:radial-gradient(circle at 17px 0, transparent 7px, #C9BC97 7px, #C9BC97 9px, transparent 9px);
    background-size:34px 30px; background-repeat:repeat-y;}
  @media(max-width:720px){.spiral{display:none;} .page{padding-left:0;}}

  .cover{padding:50px 24px 30px; text-align:center;}
  .cover .eyebrow{font-size:13px; color:#8A7F63; margin-bottom:6px;}
  .cover h1{font-family:'Patrick Hand','Caveat',cursive; font-weight:700; font-size:58px; margin:0 0 6px; color:#3B2E1D; transform:rotate(-1deg);}
  .cover p{margin:0; color:#5C5238; font-size:15px;}

  /* bàn cắt dán ảnh - collage */
  .collage{
    position:relative; height:560px; margin:20px 16px 10px;
    background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.08) inset;
  }
  .collage::before{content:"BÀN DÁN ẢNH CỦA LỚP"; position:absolute; top:8px; left:12px; font-size:11px; letter-spacing:.1em; color:#C4BBA0;}
  .pin{
    position:absolute; background:#fff; padding:8px 8px 26px; box-shadow:0 8px 18px rgba(0,0,0,.18);
  }
  .pin img{display:block; width:100%; height:100%; object-fit:cover;}
  .pin figcaption{font-family:'Patrick Hand','Caveat',cursive; font-size:16px; text-align:center; position:absolute; bottom:4px; left:0; right:0;}
  .pin.p1{width:150px; height:170px; top:40px; left:6%; transform:rotate(-6deg); z-index:3;}
  .pin.p2{width:170px; height:190px; top:20px; left:36%; transform:rotate(3deg); z-index:2;}
  .pin.p3{width:140px; height:160px; top:60px; right:5%; transform:rotate(7deg); z-index:4;}
  .pin.p4{width:160px; height:180px; top:260px; left:2%; transform:rotate(4deg); z-index:2;}
  .pin.p5{width:150px; height:170px; top:280px; left:34%; transform:rotate(-4deg); z-index:5;}
  .pin.p6{width:160px; height:180px; top:250px; right:4%; transform:rotate(-8deg); z-index:1;}
  .tape{position:absolute; width:50px; height:20px; background:rgba(255,236,180,.75); box-shadow:0 1px 3px rgba(0,0,0,.12);}
  .string{position:absolute; border-top:1.5px dashed #B7A879; z-index:0;}
  .s1{top:130px; left:20%; width:180px; transform:rotate(6deg);}
  .s2{top:340px; left:15%; width:220px; transform:rotate(-3deg);}

  .see-full{text-align:center; margin:8px 0 40px;}
  .see-full a{font-family:'Patrick Hand','Caveat',cursive; font-size:20px; color:#3B2E1D; text-decoration:none; border-bottom:1px dashed #3B2E1D;}

  /* trang lưu bút - ghi chú rải rác */
  .notebook-page{margin:0 16px 40px; background:#fff; padding:26px 20px 40px; box-shadow:0 4px 16px rgba(0,0,0,.08); position:relative;}
  .notebook-page::before{content:""; position:absolute; left:32px; top:0; bottom:0; width:1px; background:#F0B5B5;}
  .notebook-page h2{font-family:'Patrick Hand','Caveat',cursive; font-size:30px; margin:0 0 18px 20px; color:#3B2E1D;}
  .sticky{
    display:inline-block; width:44%; margin:0 2% 22px 20px; padding:14px; font-family:'Patrick Hand','Caveat',cursive; font-size:17px;
    background:#FFF3B0; box-shadow:2px 4px 8px rgba(0,0,0,.12); vertical-align:top;
  }
  .sticky:nth-child(odd){transform:rotate(-3deg); background:#FFF3B0;}
  .sticky:nth-child(even){transform:rotate(2deg); background:#D7F0DA;}
  .sticky cite{display:block; margin-top:8px; font-style:normal; font-weight:600; text-align:right;}
  @media(max-width:520px){.sticky{width:90%; display:block;}}

  .share{margin:0 16px 40px; background:#3B2E1D; color:#EFE8D6; padding:30px 22px; text-align:center; border-radius:2px;}
  .share h2{font-family:'Patrick Hand','Caveat',cursive; font-size:28px; margin:0 0 6px;}
  .share p{font-size:14px; color:#C9BC97; 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(255,255,255,.1); padding:6px 12px; border-radius:20px;}
  .link-row button{background:#E8C15A; border:none; padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer;}

  .foot{text-align:center; font-size:12.5px; color:#8A7F63; padding:0 16px 40px;}