:root{color-scheme:dark;--navy:#0c2234;--ink:#dce5ed;--blue:#83bddd}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 40%,#2d4658 0%,#142d40 46%,#091a29 100%);color:var(--ink);font:14px Arial,sans-serif;min-height:100dvh;display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:transparent;border:1px solid #ffffff2b;border-radius:5px;padding:9px 13px;cursor:pointer}button:hover,a.download:hover{background:#ffffff15}button:disabled{opacity:.25;cursor:default}:focus-visible{outline:3px solid #9bd5f5;outline-offset:4px}header{display:flex;align-items:center;gap:32px;padding:13px 30px;border-bottom:1px solid #ffffff14;background:#0717248c}.brand{display:flex;align-items:center;gap:12px;min-width:190px}.brand img{width:39px;height:44px;object-fit:contain}.brand span{font-weight:bold;font-size:18px;letter-spacing:1px}.brand small{display:block;font-size:8px;font-weight:normal;letter-spacing:1.8px;margin-top:5px}.edition{font-size:9px;letter-spacing:1.7px;color:#aabcc9}.edition b{margin-left:10px;color:white;font-size:17px}nav{margin-left:auto;display:flex;gap:9px;align-items:center}.download{padding:10px 14px;background:#ffffff0c;border:1px solid #ffffff36;border-radius:5px}.download span{margin-left:12px;color:#9bd5f5}main{flex:1;padding:19px 16px 12px;display:flex;flex-direction:column;justify-content:center}.eyebrow{text-align:center;font-size:9px;letter-spacing:2px;color:#a4bbc9;margin-bottom:15px}.stage{display:flex;align-items:center;justify-content:center;gap:23px;perspective:1600px;min-height:280px}#book{display:flex;position:relative;filter:drop-shadow(0 18px 22px #0007);touch-action:pan-y;max-width:calc(100vw - 160px)}.page{height:auto;width:min(47.37dvh,calc((100vw - 160px)/2),516px);aspect-ratio:595.276/841.89;position:relative;background:white;overflow:hidden;border:0;border-radius:0;padding:0;display:block;flex-shrink:0;cursor:zoom-in}.page img{width:100%;height:100%;display:block;object-fit:contain}.page.left:after{content:'';position:absolute;inset:0 0 0 auto;width:20px;background:linear-gradient(90deg,transparent,#0002);pointer-events:none}.page.right:after{content:'';position:absolute;inset:0 auto 0 0;width:16px;background:linear-gradient(90deg,#0002,transparent);pointer-events:none}.page a.hotspot{position:absolute;display:block;z-index:2;border-radius:2px}.page a.hotspot:hover{background:#288ecb25;outline:1px solid #167db8}.arrow{font-size:39px;border:0;padding:10px 8px;color:#b9d0df}.bottom{max-width:620px;margin:18px auto 0;width:100%;text-align:center}.progress{display:flex;gap:9px;justify-content:center;margin-bottom:13px}.progress button{height:5px;width:35px;padding:0;border:0;border-radius:2px;background:#ffffff28}.progress button.active{background:#8ccbea}.controls{display:flex;justify-content:center;align-items:center;gap:23px}#status{font-size:11px;color:#d5e4ef;min-width:120px}#zoom{font-size:11px;padding:6px 12px}.hint{font-size:10px;color:#92aab9;margin:11px 0 0}footer{display:flex;justify-content:center;gap:35px;padding:14px;border-top:1px solid #ffffff12;font-size:10px;color:#91aab9}footer a:hover{text-decoration:underline}aside{position:fixed;right:0;top:0;bottom:0;width:min(365px,94vw);background:#0b1e2e;box-shadow:-20px 0 70px #0007;z-index:20;padding:28px;overflow:auto}.aside-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.aside-head button{font-size:25px;border:0}aside ol{padding:0;list-style:none;margin:0 0 22px}aside li button{display:flex;gap:16px;width:100%;text-align:left;border:0;border-bottom:1px solid #ffffff15;border-radius:0;padding:18px 0}aside li span{color:#86beda;font-size:11px}aside>a{font-size:11px;color:#9bd5f5}dialog{border:0;padding:0;width:96vw;max-width:1500px;height:96dvh;max-height:96dvh;background:#142d40;color:white;border-radius:8px}dialog::backdrop{background:#000c}.zoom-toolbar{height:55px;display:flex;justify-content:center;align-items:center;gap:20px;padding:8px;border-bottom:1px solid #ffffff25}.zoom-toolbar button{padding:5px 12px}.zoom-scroll{height:calc(100% - 55px);overflow:auto;text-align:center;background:#263b4b}.zoom-scroll img{width:max(850px,75%);max-width:none;display:block;margin:auto}#closeZoom{margin-left:auto}#zoomTitle{font-size:12px}#zoomPrev{margin-left:auto}.noscript{position:fixed;inset:80px 0 auto;text-align:center;background:#102438;padding:30px}.turn-sheet{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;left:50%;z-index:5;pointer-events:none;animation:turn .64s cubic-bezier(.2,.65,.3,1) forwards}.turn-sheet.backward{left:0;transform-origin:right center;animation-name:turnBack}.turn-sheet .face{position:absolute;inset:0;backface-visibility:hidden;background:white}.turn-sheet .face img{width:100%;height:100%;display:block}.turn-sheet .back{transform:rotateY(180deg)}@keyframes turn{to{transform:rotateY(-180deg)}}@keyframes turnBack{to{transform:rotateY(180deg)}}.single-turn{animation:singleTurn .38s ease}@keyframes singleTurn{0%{opacity:.5;transform:translateX(18px)}100%{opacity:1;transform:translateX(0)}}@media(max-width:800px){header{padding:12px 15px;gap:10px;flex-wrap:wrap}.brand{min-width:150px}.brand span{font-size:16px}.brand img{height:36px;width:34px}.edition{margin-left:auto;font-size:8px}.edition b{font-size:15px}nav{width:100%;justify-content:center;margin:5px 0 0}nav button,.download{font-size:11px;padding:8px 12px}main{padding:17px 7px 15px}.eyebrow{font-size:7px;letter-spacing:1.4px;margin-bottom:13px}.stage{gap:3px}#book{max-width:calc(100vw - 64px)}.page{height:auto;width:min(calc(100vw - 74px),43vh);width:min(calc(100vw - 74px),43dvh);max-width:100%;}.arrow{font-size:31px;padding:8px 4px}.bottom{margin-top:18px}.progress button{width:25px}.hint{font-size:9px}footer{flex-wrap:wrap;gap:12px 24px;font-size:9px}.zoom-scroll img{width:1000px}.turn-sheet{display:none}}@media(prefers-reduced-motion:reduce){.turn-sheet,.single-turn{animation:none!important}*{scroll-behavior:auto!important}}

/* 2027 industrial gallery background */
body{isolation:isolate;background:#101e29;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(8,20,30,.76),rgba(19,39,53,.55) 48%,rgba(8,20,30,.78)),url('background-viet-son.jpg') center 48%/cover no-repeat;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 43%,rgba(119,163,184,.14),transparent 58%),linear-gradient(0deg,rgba(3,13,22,.92),transparent 35%,transparent 72%,rgba(3,13,22,.4));pointer-events:none}
header{background:rgba(7,20,31,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(173,202,222,.18);box-shadow:0 4px 28px #0002}
header::after{content:"";position:absolute;left:30px;bottom:0;width:62px;height:2px;background:#c93735}
header{position:relative}
.eyebrow{color:#d1e2ed;text-shadow:0 1px 8px #000;letter-spacing:2.3px}
#book{filter:drop-shadow(0 26px 35px #0009)}
.arrow{border:1px solid #c1d4e42b;background:#0d233669;backdrop-filter:blur(8px);border-radius:50%;width:43px;height:43px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 4px 16px #0003}
.arrow:hover{background:#25455dcc;border-color:#8db8d077}.arrow:disabled{background:transparent;box-shadow:none}
.controls{margin:0 auto;padding:8px 14px;max-width:320px;border:1px solid #ffffff15;border-radius:8px;background:#071b2b99;backdrop-filter:blur(12px)}
.progress button{background:#cbdce345;box-shadow:0 1px 4px #0004}.progress button.active{background:#a5d5ed;box-shadow:0 0 10px #83bedc44}
.hint{color:#b5c9d5;text-shadow:0 1px 6px #000}
footer{background:#071724c9;backdrop-filter:blur(12px);color:#b3c7d4}
@media(max-width:800px){body::before{background-position:38% center}.arrow{width:27px;height:35px;border-radius:6px;font-size:27px;flex-shrink:0}.stage{gap:5px}header::after{left:15px}.eyebrow{letter-spacing:1.3px}.controls{padding:6px 10px}}