*{box-sizing:border-box;}
:root{--kyyeu-accent:#2E3B3A; --kyyeu-heading-font:'Philosopher','Marcellus',serif; --kyyeu-heading-scale:1;}
html{background:#F7F3EA;}
body{margin:0; color:#2B2B28; font-family:'Literata',serif; line-height:1.85; overflow-x:hidden;
  background:var(--kyyeu-bg,
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(46,59,58,.045), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 60%, rgba(150,60,50,.035), transparent 60%),
    #F7F3EA);
}
.wrap{max-width:700px; margin:0 auto;}
@media (prefers-reduced-motion: reduce){ .ink-frame{opacity:1 !important; clip-path:none !important;} }

/* BÌA CUỘN TRANH */
.cover{padding:60px 24px 34px; text-align:center; position:relative;}
.ink-splash{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:340px; height:200px; pointer-events:none; opacity:.08;
  background:radial-gradient(ellipse 55% 45% at 40% 40%, #2E3B3A, transparent 65%),
             radial-gradient(ellipse 40% 55% at 70% 55%, #2E3B3A, transparent 60%);
  filter:blur(6px);
}
.eyebrow{position:relative; font-size:10.5px; letter-spacing:.35em; color:#8A8478; margin-bottom:24px;}
.cover-scroll{position:relative; max-width:300px; margin:0 auto 24px;}
.scroll-rod{height:9px; background:linear-gradient(180deg,#8B6F4E,#5F4A31); border-radius:5px; box-shadow:0 2px 5px rgba(0,0,0,.2);}
.scroll-rod.top{margin-bottom:0;}
.scroll-rod.bottom{margin-top:0;}
.cover-photo{background:#FDFBF5; padding:16px; border-left:1px solid #E0D8C6; border-right:1px solid #E0D8C6;}
.cover-photo img{width:100%; height:300px; object-fit:cover; display:block; filter:saturate(.72) contrast(1.04);}
.cover h1{font-family:var(--kyyeu-heading-font); font-size:calc(40px * var(--kyyeu-heading-scale)); margin:0 0 10px; color:var(--kyyeu-accent); letter-spacing:.04em;}
.de-tu{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:16px; color:#7A6A52; margin:0 0 14px; letter-spacing:.03em;}
.cover-meta{margin:0; font-size:13px; color:#8A8478;}
.seal-stamp{
  display:inline-block; margin-top:20px; width:52px; height:52px; line-height:52px;
  background:#9C3B32; color:#F7F3EA; font-family:var(--kyyeu-heading-font); font-size:15px;
  border-radius:3px; box-shadow:0 4px 10px rgba(156,59,50,.3); transform:rotate(-3deg);
}

.section{padding:56px 24px 8px;}
.section-head{text-align:center; margin-bottom:32px;}
.section h2{font-family:var(--kyyeu-heading-font); font-size:calc(27px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 6px; letter-spacing:.04em;}
.section .sub{font-size:12.5px; color:#8A8478;}

/* THƠ DỌC */
.poem-scroll{max-width:520px; margin:0 auto; background:#FDFBF5; border:1px solid #E4DCC8; padding:34px 30px; position:relative;}
.poem-scroll::before, .poem-scroll::after{content:""; position:absolute; left:22px; right:22px; height:1px; background:#E4DCC8;}
.poem-scroll::before{top:14px;} .poem-scroll::after{bottom:14px;}
.poem-vertical{font-family:var(--kyyeu-heading-font); font-size:17.5px; line-height:2.1; color:#3A3A32; text-align:center; letter-spacing:.05em;}

/* TRANH MỰC LOANG */
.ink-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:30px 26px;}
.ink-frame{margin:0; opacity:0; transition:opacity 1s ease var(--d);}
.ink-frame.inked{opacity:1;}
.ink-mask{
  background:#FDFBF5; padding:12px; border:1px solid #E4DCC8;
  box-shadow:0 12px 26px rgba(43,43,40,.09);
}
.ink-mask img{
  width:100%; height:180px; object-fit:cover; display:block;
  filter:saturate(.68) contrast(1.05) brightness(1.02);
  clip-path:circle(0% at 50% 50%);
  transition:clip-path 1.4s cubic-bezier(.25,.8,.3,1) var(--d), filter .8s ease;
}
.ink-frame.inked .ink-mask img{clip-path:circle(75% at 50% 50%);}
.ink-frame:hover .ink-mask img{filter:saturate(.9) contrast(1.02);}
.ink-frame figcaption{text-align:center; font-family:var(--kyyeu-heading-font); font-style:italic; font-size:14px; color:#7A6A52; margin-top:12px;}
@media(max-width:520px){.ink-gallery{grid-template-columns:1fr;} .ink-mask img{height:220px;}}

.see-full{text-align:center; margin:40px 0 0;}
.see-full a{font-family:var(--kyyeu-heading-font); font-size:14.5px; color:var(--kyyeu-accent); text-decoration:none; border-bottom:1px solid #B8AE98; padding-bottom:3px;}

/* CHƯƠNG MỤC */
.chapter-scroll{max-width:520px; margin:0 auto;}
.chapter-row{display:flex; gap:20px; padding:20px 0; border-bottom:1px solid #E4DCC8;}
.chapter-row:last-child{border-bottom:none;}
.chapter-mark{font-family:var(--kyyeu-heading-font); font-size:14px; color:#9C3B32; min-width:52px; flex-shrink:0; letter-spacing:.04em;}
.chapter-body strong{display:block; font-family:var(--kyyeu-heading-font); font-size:16.5px; color:#2E3B3A; margin-bottom:3px;}
.chapter-body span{font-size:13.5px; color:#6E685C;}

/* BÚT TÍCH */
.ink-notes{max-width:520px; margin:0 auto;}
.ink-note{background:#FDFBF5; border-left:2px solid #9C3B32; padding:18px 22px; margin-bottom:16px; box-shadow:0 6px 14px rgba(43,43,40,.06);}
.ink-note p{margin:0 0 8px; font-size:15px; color:#3A3A32; line-height:1.8;}
.ink-note cite{font-family:var(--kyyeu-heading-font); font-style:normal; font-size:13.5px; color:#9C3B32;}

.share{margin:60px 24px 30px; padding:42px 26px; text-align:center; background:var(--kyyeu-accent); color:#F7F3EA;}
.share h2{font-family:var(--kyyeu-heading-font); font-size:25px; margin:0 0 8px; letter-spacing:.03em;}
.share p{font-size:13px; margin:0 0 20px; color:#B8BEBA;}
#qrcode{background:#fff; display:inline-block; padding:9px; 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,243,234,.1); padding:7px 13px;}
.link-row button{background:#9C3B32; color:#F7F3EA; border:none; padding:7px 15px; font-size:12px; font-weight:700; cursor:pointer;}

.foot{text-align:center; font-size:11.5px; color:#8A8478; padding:0 20px 44px;}

/* ============ HIỆU ỨNG ĐỘNG ============ */

/* 1. CUỘN TRANH MỞ RA KHI VÀO TRANG */
.cover-photo{overflow:hidden; max-height:0; animation:unroll 1.6s cubic-bezier(.3,.8,.3,1) .3s forwards;}
@keyframes unroll{from{max-height:0; opacity:.3;} to{max-height:360px; opacity:1;}}
.scroll-rod.bottom{animation:rodDown 1.6s cubic-bezier(.3,.8,.3,1) .3s forwards;}
@keyframes rodDown{from{transform:translateY(-330px);} to{transform:translateY(0);}}

/* 2. CON DẤU SON ĐÓNG XUỐNG */
.seal-stamp{opacity:0; animation:stampDown .55s cubic-bezier(.3,1.4,.5,1) 1.9s forwards;}
@keyframes stampDown{
  0%{opacity:0; transform:rotate(-3deg) scale(2.6);}
  70%{opacity:1; transform:rotate(-3deg) scale(.92);}
  100%{opacity:1; transform:rotate(-3deg) scale(1);}
}

/* 3. GIỌT MỰC RƠI NGẪU NHIÊN TRÊN NỀN */
.ink-drops{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.ink-drop{
  position:absolute; border-radius:50%; background:#2E3B3A; opacity:0;
  animation:dropBleed 5.5s ease-out forwards;
}
@keyframes dropBleed{
  0%{opacity:.16; transform:scale(.1);}
  55%{opacity:.07;}
  100%{opacity:0; transform:scale(3.4);}
}

/* 4. THƠ HIỆN TỪNG DÒNG */
.poem-line{display:block; opacity:0; transform:translateY(10px); filter:blur(3px);
  transition:opacity 1s ease, transform 1s ease, filter 1s ease;}
.poem-line.brushed{opacity:1; transform:translateY(0); filter:blur(0);}

/* 5. NÉT CỌ SVG VẼ DẦN LÀM ĐƯỜNG PHÂN CÁCH */
.brush-divider{display:block; width:170px; height:22px; margin:0 auto 26px;}
.brush-divider path{
  stroke:var(--kyyeu-accent); stroke-width:2.4; fill:none; stroke-linecap:round;
  stroke-dasharray:210; stroke-dashoffset:210; opacity:.65;
  transition:stroke-dashoffset 1.5s cubic-bezier(.3,.8,.3,1);
}
.brush-divider.drawn path{stroke-dashoffset:0;}

/* 6. TRANH: THÊM CHUYỂN ĐỘNG NHẸ KHI DI CHUỘT */
.ink-mask{transition:transform .6s cubic-bezier(.2,.8,.3,1), box-shadow .6s ease;}
.ink-frame:hover .ink-mask{transform:translateY(-5px) rotate(-.5deg); box-shadow:0 20px 38px rgba(43,43,40,.16);}