/* ===== ป๊อปอัพอ่านบท: ให้มีมิติ ===== */
.rdov{background:radial-gradient(ellipse 80% 70% at 50% 35%,rgba(58,40,28,.72) 0%,rgba(10,7,5,.9) 70%,rgba(4,3,2,.96) 100%);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);animation:rdoFade .28s ease-out both}
.rdov .rdscroll{perspective:1600px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
/* กระดาษ: ลอยเหนือพื้นหลัง เงาหลายชั้น */
.rdov .rdpaper{position:relative;border-radius:8px;background:linear-gradient(180deg,#fffefb 0%,#fffcf5 40%,#fbf6ea 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 0 rgba(255,255,255,.9) inset,0 2px 3px rgba(0,0,0,.25),0 14px 28px rgba(0,0,0,.35),0 46px 100px rgba(0,0,0,.6),0 0 120px rgba(245,154,35,.07);
  transform-origin:50% 0;animation:rdoPaper .55s cubic-bezier(.2,.9,.3,1.12) backwards}
.rdov .rdpaper::after{content:"";position:absolute;left:0;right:0;top:0;height:140px;border-radius:8px 8px 0 0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent)}
.rdov .rdpaper>*{position:relative;z-index:1}
.rdov .rdpaper.rded{box-shadow:0 0 0 3px rgba(245,154,35,.65),0 0 0 8px rgba(245,154,35,.12),0 2px 3px rgba(0,0,0,.25),0 14px 28px rgba(0,0,0,.35),0 46px 100px rgba(0,0,0,.6)}
/* แผงเมนูข้างกระดาษ: กระจกฝ้า */
.rdov .rdbar{background:linear-gradient(180deg,rgba(52,43,37,.9),rgba(24,19,15,.94));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -1px 0 rgba(0,0,0,.45) inset,0 2px 4px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.45),0 34px 70px rgba(0,0,0,.5)}
.rdov .rdbar button{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 3px 8px rgba(0,0,0,.3);transition:background .18s,transform .18s cubic-bezier(.2,.8,.3,1.3),box-shadow .18s,border-color .18s}
.rdov .rdbar button:hover{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));border-color:rgba(255,255,255,.2);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 7px 14px rgba(0,0,0,.4)}
.rdov .rdbar button:active{transform:translateY(1px) scale(.98);box-shadow:0 1px 3px rgba(0,0,0,.4) inset}
.rdov .rdbar button.on{background:linear-gradient(180deg,rgba(245,154,35,.32),rgba(245,154,35,.14));border-color:rgba(245,154,35,.7);color:#ffc062}
.rdov .rdbar .rdx{background:linear-gradient(180deg,#f4202b,#c8070f);border-color:rgba(255,255,255,.12);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 16px rgba(229,9,20,.35)}
.rdov .rdbar .rdx:hover{background:linear-gradient(180deg,#ff3039,#d60a13)}
.rdov .rdbar h3{text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media(min-width:1180px){.rdov .rdbar{animation:rdoBar .5s .08s cubic-bezier(.2,.9,.3,1.1) backwards}}
@media(max-width:1179px){.rdov .rdbar{animation:rdoFade .4s .1s ease-out backwards}}
@keyframes rdoFade{from{opacity:0}to{opacity:1}}
@keyframes rdoPaper{from{opacity:0;transform:translateY(34px) scale(.965) rotateX(4deg)}to{opacity:1;transform:none}}
@keyframes rdoBar{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rdov,.rdov .rdpaper,.rdov .rdbar{animation:none!important}}