/* Trình đọc online — AI Engineering · Cẩm nang minh hoạ 2026 (CyberSoft) */
:root{--bar:56px;--bg:#e9e6de;--ink:#23243a;--ma:#7A1E2C;--g:#F5B83D;--blue:#4C6FFF}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);font-family:'Be Vietnam Pro',Roboto,Arial,sans-serif;color:var(--ink);overflow:hidden}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none;user-drag:none}
button{font:inherit;cursor:pointer}
/* thanh trên */
#bar{position:fixed;left:0;right:0;top:0;height:var(--bar);z-index:50;display:flex;align-items:center;gap:8px;padding:0 12px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 2px 14px rgba(35,36,58,.12)}
#bar .r-brand img{height:28px;display:block}
#bar .ttl{flex:1;min-width:0;font-weight:800;font-size:14px;color:var(--ma);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px}
.rbtn{border:1.5px solid #e2ddd0;background:#fff;border-radius:10px;height:36px;min-width:36px;padding:0 10px;font-size:14px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:4px}
.rbtn:hover{border-color:var(--blue);color:var(--blue)}.rbtn.on{background:#EEF2FF;border-color:#c9d3ff;color:var(--blue)}
.mode{display:flex;background:#f2efe7;border-radius:12px;padding:3px}
.mode button{border:0;background:none;padding:7px 12px;border-radius:9px;font-weight:800;font-size:13px;color:#5e6788}
.mode button.on{background:#fff;color:var(--ma);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.nav{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px}
#pg{width:52px;height:36px;border:1.5px solid #e2ddd0;border-radius:10px;text-align:center;font:inherit;font-weight:800}
body.splash-on #bar .nav,body.splash-on #bar .mode,body.splash-on #bThumb,body.splash-on #bAnim{visibility:hidden}
/* thanh bên */
#side{position:fixed;left:0;top:var(--bar);bottom:0;width:340px;z-index:45;background:#fff;box-shadow:6px 0 30px rgba(35,36,58,.18);transform:translateX(-105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
body.side-open #side{transform:none}
.tabs{display:flex;gap:6px;padding:10px;border-bottom:1px solid #eee8dc}
.tabs button{flex:1;border:0;background:#f4f1ea;border-radius:10px;padding:9px;font-weight:800;color:#5e6788}
.tabs button.on{background:var(--ma);color:#fff}.tabs #bClose{flex:none;width:40px}
#tocList{flex:1;min-height:0;overflow:auto;padding:8px 10px 30px}
.r-tc{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-top:6px;border-radius:12px;background:linear-gradient(90deg,#FBEDEE,#fff);cursor:pointer;font-weight:800;color:var(--ma);font-size:14px}
.r-tc i{font-style:normal;font-weight:900;color:#F0604F;min-width:24px}.r-tc em{margin-left:auto;font-style:normal;color:#5e6788;font-size:12px}
.r-ts{display:flex;gap:8px;padding:5px 10px 5px 44px;cursor:pointer;font-size:13px;color:#40445c;border-radius:8px}
.r-ts em{margin-left:auto;font-style:normal;color:#8a8fa8;font-size:12px}
.r-tc:hover,.r-ts:hover{background:#EEF2FF}.cur{outline:2px solid var(--blue)}
#thumbGrid{flex:1;min-height:0;overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.r-th{position:relative;cursor:pointer;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);height:0;padding-top:141.4%}
.r-th img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.r-th span{position:absolute;right:4px;bottom:4px;background:rgba(122,30,44,.9);color:#F5B83D;font-size:10px;font-weight:900;border-radius:8px;padding:1px 6px}
.r-th.cur{outline:3px solid var(--blue)}
/* vùng đọc */
#view{position:fixed;left:0;right:0;top:var(--bar);bottom:0;overflow:hidden}
#scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:24px 0 80px;scroll-behavior:auto}
.slot{position:relative;margin:0 auto 22px;background:#fffdf8;box-shadow:0 10px 34px rgba(35,36,58,.18);border-radius:4px;overflow:hidden}
.slot>.pg{position:absolute!important;left:0;top:0;transform-origin:0 0;box-shadow:none!important;margin:0!important}
.slot .ld{position:absolute;inset:0;display:grid;place-items:center;color:#b5ad9c;font-weight:800;font-size:13px;background:#fffdf8}
.slot .ld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px);opacity:.55}
/* lật trang */
#flip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:2600px}
#spread{position:relative;display:flex;transform-style:preserve-3d}
#spread .slot{margin:0}
#spread.two .slot:first-child{border-radius:4px 0 0 4px;box-shadow:-10px 14px 34px rgba(35,36,58,.2)}
#spread.two .slot:last-child{border-radius:0 4px 4px 0;box-shadow:10px 14px 34px rgba(35,36,58,.2)}
#spread.two .slot:first-child:after{content:'';position:absolute;right:0;top:0;bottom:0;width:50px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12));pointer-events:none;z-index:9}
#spread.two .slot:last-child:after{content:'';position:absolute;left:0;top:0;bottom:0;width:50px;background:linear-gradient(270deg,transparent,rgba(0,0,0,.12));pointer-events:none;z-index:9}
.leaf{position:absolute;top:0;transform-style:preserve-3d;z-index:20;transition:transform .85s cubic-bezier(.45,.05,.25,1)}
.leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fffdf8}
.leaf .face.back{transform:rotateY(180deg)}
.leaf .face>.slot{margin:0;box-shadow:none}
.leaf .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 60%);opacity:0;transition:opacity .85s}
.fz{position:absolute;top:0;bottom:0;width:12%;border:0;background:transparent;z-index:30}
.fz-l{left:0;cursor:w-resize}.fz-r{right:0;cursor:e-resize}
/* trang chào */
#splash{position:absolute;inset:0;overflow:auto;padding:40px 24px 60px;background:radial-gradient(circle at 80% 10%,#E7EDFF,transparent 45%),radial-gradient(circle at 5% 90%,#FFF1D2,transparent 40%),#fffdf8}
.sp-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center}
.sp-book{position:relative;perspective:1600px;justify-self:center}
.sp-3d{position:relative;width:330px;transform:rotateY(-22deg) rotateX(6deg);transform-style:preserve-3d;animation:spf 6s ease-in-out infinite;box-shadow:24px 30px 60px rgba(35,36,58,.35);border-radius:4px 10px 10px 4px}
.sp-3d img{width:100%;display:block;border-radius:4px 10px 10px 4px}
.sp-3d i{position:absolute;left:0;top:0;bottom:0;width:22px;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent);border-radius:4px 0 0 4px}
.sp-3d:after{content:'';position:absolute;right:-14px;top:6px;bottom:6px;width:14px;background:repeating-linear-gradient(90deg,#f7f2e6 0 2px,#e2dccd 2px 3px);transform:rotateY(70deg);transform-origin:left}
@keyframes spf{0%,100%{transform:rotateY(-22deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-14deg) rotateX(4deg) translateY(-10px)}}
.sp-free{position:absolute;right:-26px;top:-22px;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FF8A7A,#E23B4E 70%);border:5px solid #fff;color:#fff;font-weight:900;font-size:22px;line-height:1;display:grid;place-items:center;text-align:center;transform:rotate(12deg);box-shadow:0 14px 30px rgba(226,59,78,.5),0 0 0 5px rgba(245,184,61,.9);z-index:3}
.sp-k{font-size:12px;font-weight:900;letter-spacing:.2em;color:#F0604F;margin:0}
#splash h1{font-size:54px;line-height:1.02;margin:10px 0 14px;color:var(--ma);letter-spacing:-.03em}
#splash h1 span{font-size:30px;background:linear-gradient(90deg,#4C6FFF,#7C5CF0 55%,#E0457B);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-d{font-size:16px;line-height:1.6;color:#40445c;margin:0 0 18px}
.sp-st{list-style:none;display:flex;gap:12px;padding:0;margin:0 0 22px;flex-wrap:wrap}
.sp-st li{background:#fff;border:1.5px solid #ece6d8;border-radius:14px;padding:10px 16px;font-size:12px;color:#5e6788;font-weight:700;display:flex;flex-direction:column}
.sp-st b{font-size:24px;color:var(--ma);line-height:1}
.sp-btn{display:flex;gap:12px;flex-wrap:wrap}
.sp-btn button{border:2px solid var(--ma);background:#fff;color:var(--ma);font-weight:900;font-size:16px;border-radius:14px;padding:14px 22px}
.sp-btn .pri{background:linear-gradient(135deg,#7A1E2C,#C0453F);color:#fff;border-color:transparent;box-shadow:0 14px 26px -12px rgba(122,30,44,.7)}
.sp-note{font-size:13px;color:#8a8fa8;margin-top:12px}
.sp-ch{max-width:1080px;margin:46px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sp-ch a{display:block;background:#fff;border:1.5px solid #ece6d8;border-radius:16px;padding:14px 16px;text-decoration:none;color:inherit;box-shadow:0 10px 24px -18px rgba(35,36,58,.5);transition:transform .2s}
.sp-ch a:hover{transform:translateY(-3px);border-color:#c9d3ff}
.sp-ch b{display:block;color:var(--ma);font-size:15px}.sp-ch small{display:block;color:#5e6788;font-size:12.5px;line-height:1.45;margin-top:4px}
.sp-ch h2{grid-column:1/-1;font-size:22px;color:var(--ink);margin:0 0 4px}
/* chặn chụp/in */
#shield{position:fixed;inset:0;z-index:200;background:rgba(30,20,24,.96);display:grid;place-items:center;color:#fff;text-align:center;padding:30px}
#shield b{display:block;font-size:22px;margin-bottom:8px;color:#F5B83D}#shield span{font-size:14px;opacity:.85}
#wm{position:fixed;inset:var(--bar) 0 0 0;z-index:40;pointer-events:none;opacity:.05;background-repeat:repeat}
#noprint{display:none}
@media print{body>*{display:none!important}#noprint{display:block!important;padding:40px;font-size:20px}html,body{overflow:visible;background:#fff}}
/* điện thoại */
@media (max-width:900px){
 #bar{gap:4px;padding:0 6px}#bar .ttl,.rbtn span,#bFull,.mode .lb{display:none}#bar .r-brand img{height:20px}
 .rbtn{min-width:32px;height:32px;padding:0 6px}.mode button{padding:6px 8px;font-size:15px}#pg{width:38px;height:32px}#tot{display:none}
 .sp-in{grid-template-columns:1fr;gap:30px}.sp-3d{width:230px}#splash h1{font-size:38px}#splash h1 span{font-size:22px}.sp-ch{grid-template-columns:1fr}
 #side{width:88vw}
}
/* ───── HIỆU ỨNG (chỉ chạy khi trang đang hiển thị: .pg.on) ───── */
.anim .pg .s3s{opacity:0}
.anim .pg.on .s3s{animation:s3in .65s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(var(--i,0) * 55ms);transform-box:fill-box;transform-origin:50% 100%}
@keyframes s3in{from{opacity:0;transform:translateY(-26px) scale(.92)}to{opacity:1;transform:none}}
.anim .pg .s3-lt,.anim .pg .s3-lf,.anim .pg .s3-tag,.anim .pg .s3-pill,.anim .pg .s3-num{opacity:0}
.anim .pg.on .s3-lt,.anim .pg.on .s3-lf,.anim .pg.on .s3-tag,.anim .pg.on .s3-pill,.anim .pg.on .s3-num{animation:fadeup .45s ease both;animation-delay:calc(var(--lab,600) * 1ms)}
.anim .pg .s3-ic{opacity:0}
.anim .pg.on .s3-ic{animation:fadeup .4s ease both,bob 3.2s ease-in-out infinite;animation-delay:calc(var(--lab,600) * 1ms),calc(var(--lab,600) * 1ms + 400ms)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes fadeup{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1}}
.anim .pg .s3-num{animation-name:pop}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}70%{transform:translate(-50%,-50%) scale(1.2)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.anim .pg .s3-ln,.anim .pg .dg-e{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)}
.anim .pg.on .s3-ln,.anim .pg.on .dg-e{animation:draw 1s ease forwards;animation-delay:calc(var(--lab,400) * 1ms)}
.anim .pg.on .s3-ln.s3-dash,.anim .pg.on .dg-e.dash{animation:draw 1s ease forwards,flowdash 1.2s linear infinite;animation-delay:calc(var(--lab,400) * 1ms),calc(var(--lab,400) * 1ms + 1000ms)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flowdash{from{stroke-dasharray:7 6;stroke-dashoffset:26}to{stroke-dasharray:7 6;stroke-dashoffset:0}}
.anim .pg .s3-dt{display:none}
.mv{filter:drop-shadow(0 0 4px currentColor)}
.anim .pg .rv{opacity:0}
.anim .pg.on .rv{animation:rvin .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes rvin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.anim .pg.on .bt i{animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both;transform-origin:left;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.anim .pg.on .cyr path{animation:flowdash 1.4s linear infinite}
/* bước đang chạy (step by step) */
.fn,.st,.jr3-s .jr3-d,.cyn,.dg-n,.lg3-i,.mini,.opi,.tb-c,.nm-r{transition:box-shadow .35s,transform .35s,background .35s}
.anim .pg .now.fn,.anim .pg .now.cyn,.anim .pg .now.dg-n{transform:translateY(-4px) scale(1.04)!important;box-shadow:0 0 0 3px var(--kc,#4C6FFF),0 12px 24px -8px rgba(0,0,0,.35)!important;z-index:5}
.anim .pg .now.st{transform:translateX(6px)!important;box-shadow:0 0 0 2.5px var(--kc,#4C6FFF),0 10px 20px -10px rgba(0,0,0,.3)!important}
.anim .pg .now .jr3-d{transform:scale(1.18);box-shadow:0 0 0 4px var(--kc,#4C6FFF),0 0 18px var(--kc,#4C6FFF)!important}
.anim .pg .now.lg3-i span{animation:pulse .8s ease}
@keyframes pulse{50%{transform:scale(1.35)}}
.anim .pg .cl.rv{opacity:0}
.stepbadge{position:absolute;z-index:8;font-size:10px;font-weight:900;color:#fff;background:#F0604F;border-radius:999px;padding:2px 8px;pointer-events:none;box-shadow:0 4px 10px rgba(240,96,79,.45);transform:translate(-50%,-140%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.anim .pg *{animation:none!important;opacity:1!important}}