:root{--blue:#063da8;--navy:#00184f;--cyan:#32b8ef;--red:#d71920;--paper:#fffdf7;--ink:#17213a;--gold:#ffd45e}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Be Vietnam Pro",sans-serif;background:#00133f;color:var(--ink)}button,input{font:inherit}.reader{height:100%;width:100%;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,#1761c9 0,#05286c 40%,#00123d 83%)}.reader:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 20% 80%,rgba(0,0,0,.35)),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,100% 5px;pointer-events:none}.light-rays{position:absolute;width:120vmax;height:120vmax;left:50%;top:47%;transform:translate(-50%,-50%);opacity:.28;background:repeating-conic-gradient(from -16deg,transparent 0 8deg,rgba(64,178,255,.22) 9deg 12deg,transparent 13deg 21deg);mask-image:radial-gradient(circle,#000 0,transparent 66%)}
.cover{width:min(438px,calc(100vw - 42px));aspect-ratio:426/602;max-height:calc(100vh - 82px);position:relative;color:#fff;overflow:hidden;background:linear-gradient(170deg,rgba(4,37,118,.2),rgba(0,31,106,.55)),radial-gradient(circle at 50% 46%,#2585dc 0,#073b9f 46%,#001b5c 100%);border:4px solid #0842a1;border-radius:3px 10px 10px 3px;box-shadow:8px 11px 0 #001848,12px 18px 42px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.25);animation:coverIn .65s ease}.cover:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent 2%,transparent 97%,rgba(0,0,0,.3)),repeating-radial-gradient(ellipse at 50% 70%,transparent 0 18px,rgba(63,180,255,.12) 20px 22px);pointer-events:none}.cover-lines{position:absolute;inset:0;background:repeating-conic-gradient(from 242deg at 50% 58%,transparent 0 5deg,rgba(96,201,255,.14) 5.5deg 7deg,transparent 7.5deg 12deg);opacity:.65}.cover-brand{position:absolute;top:4.8%;left:12%;right:12%;text-align:center;display:flex;align-items:center;flex-direction:column;text-shadow:0 2px 5px rgba(0,0,0,.35)}.phoenix{width:74px;height:62px;color:#fff;filter:drop-shadow(0 0 9px rgba(83,206,255,.8))}.cover-brand strong{font:700 clamp(10px,1.1vw,13px) "Roboto Condensed";letter-spacing:.04em}.cover-brand span{font:600 9px "Roboto Condensed";margin-top:3px}.cover-title{position:absolute;z-index:2;top:23%;left:7%;right:7%;text-align:center}.cover-title h1{font:800 clamp(30px,4vw,43px)/1 "Roboto Condensed";letter-spacing:.02em;margin:0 0 14px;text-shadow:0 3px 7px rgba(0,0,0,.4)}.cover-title p{font:600 clamp(15px,1.9vw,22px)/1.28 "Roboto Condensed";margin:0;text-shadow:0 2px 5px #00194f}.cover-illustration{position:absolute;inset:47% 0 0;background:linear-gradient(0deg,rgba(2,29,92,.95),transparent 80%)}.building{position:absolute;left:0;right:0;top:10%;height:33%;background:linear-gradient(rgba(130,202,245,.55),rgba(21,89,174,.6));border-top:5px solid rgba(188,226,255,.75);display:flex;justify-content:space-around;padding:36px 18px 0}.building i{width:20%;border:2px solid rgba(209,239,255,.5);background:linear-gradient(90deg,transparent 48%,rgba(213,238,255,.3) 50% 53%,transparent 55%)}.building span{position:absolute;top:7px;font:700 8px "Roboto Condensed";color:#fff}.phone{position:absolute;z-index:3;width:34%;height:51%;left:33%;bottom:8%;border:7px solid #101621;border-radius:24px;background:linear-gradient(#f5f8fb,#dfeaf7);box-shadow:0 8px 18px rgba(0,0,0,.45);color:#0a3a8f;text-align:center;padding-top:17%}.phone:before{content:"";position:absolute;top:5px;left:32%;right:32%;height:7px;border-radius:5px;background:#101621}.phone b{font:800 38px "Roboto Condensed";color:var(--red);display:block}.phone small{font:700 8px/1.3 "Roboto Condensed"}.phone-home{position:absolute;bottom:7px;left:45%;width:10%;height:3px;border-radius:2px;background:#7f8c9d}.people{position:absolute;left:3%;right:3%;bottom:3%;display:flex;justify-content:space-between;align-items:end}.people i{width:18%;height:75px;border-radius:50% 50% 8px 8px;background:linear-gradient(#1b2c48 25%,#52739c 26%);box-shadow:0 5px 9px rgba(0,0,0,.45)}.people i:nth-child(2),.people i:nth-child(4){height:62px;background:linear-gradient(#33281e 25%,#0d5b85 26%)}.open-book{position:absolute;z-index:5;bottom:4.5%;left:50%;transform:translateX(-50%);border:1px solid rgba(255,255,255,.7);color:#fff;background:rgba(0,35,112,.72);border-radius:20px;padding:8px 17px;font-size:10px;font-weight:700;letter-spacing:.1em;cursor:pointer;box-shadow:0 0 15px rgba(59,193,255,.4)}.open-book:hover{background:#fff;color:#073a9d}.open-book span{font-size:17px;vertical-align:-1px}.cover-foot{position:absolute;z-index:4;bottom:1.2%;width:100%;text-align:center;font:600 7px "Roboto Condensed";letter-spacing:.05em}
.book{position:relative;width:min(1070px,calc(100vw - 130px));height:min(720px,calc(100vh - 70px));display:grid;grid-template-columns:1fr 20px 1fr;filter:drop-shadow(0 22px 32px rgba(0,0,0,.55));perspective:1600px;animation:bookOpen .7s ease}.book[hidden]{display:none}.page{background:linear-gradient(90deg,#fffdf6,#fff);position:relative;overflow:hidden;border:1px solid #ddd6c7}.page:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(113,84,36,.015) 0 1px,transparent 1px 4px)}.page-left{border-radius:8px 0 0 8px;padding:26px 34px 50px;background:linear-gradient(90deg,#fff 0,#fffdf7 88%,#e9e2d5 100%)}.page-right{border-radius:0 8px 8px 0;padding:32px 38px 56px;background:linear-gradient(90deg,#ebe4d8 0,#fffdf8 7%,#fff 100%)}.book-spine{background:linear-gradient(90deg,#9a8e7a,#eee6d8 45%,#847966);box-shadow:inset 0 0 8px rgba(0,0,0,.3)}.page-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dcd4c6;padding-bottom:14px}.mini-brand{display:flex;align-items:center;color:var(--blue);font:700 13px "Roboto Condensed"}.mini-brand svg{width:42px;height:42px;color:var(--red)}.mini-brand span{display:flex;flex-direction:column}.mini-brand small{font-size:8px;color:#647188}.icon-btn{border:0;background:#eef2f7;color:#23416f;width:31px;height:31px;border-radius:50%;font-size:19px;cursor:pointer}.toc-heading{margin:26px 0 18px}.toc-heading span{display:block;color:var(--red);font:800 12px "Roboto Condensed";letter-spacing:.18em}.toc-heading strong{display:block;font:700 31px "Roboto Condensed";color:#073783;margin-top:4px}.book-search{height:44px;border:1px solid #cfdae9;border-radius:5px;display:flex;align-items:center;padding:0 12px;background:#f8fbff;gap:9px}.book-search span{font-size:24px;color:#1764bd}.book-search input{border:0;outline:0;background:transparent;width:100%;font-size:12px}.book-nav{display:grid;gap:9px;margin-top:18px}.book-nav button{border:0;text-align:left;background:#f0f5fb;color:#17345c;padding:13px 15px;border-left:4px solid #80a8d3;font:700 12px "Be Vietnam Pro";cursor:pointer;display:flex;justify-content:space-between}.book-nav button:after{content:"›";font-size:17px}.book-nav button.active,.book-nav button:hover{background:linear-gradient(90deg,#0750b8,#0b70cf);color:#fff;border-left-color:var(--gold)}.book-stat{position:absolute;left:34px;right:34px;bottom:63px;background:linear-gradient(120deg,#eaf5ff,#f8fcff);border:1px solid #ccdef1;padding:11px 17px;display:flex;align-items:center;gap:13px}.book-stat strong{font:800 35px "Roboto Condensed";color:var(--red)}.book-stat span{font:600 10px/1.5 "Be Vietnam Pro";text-transform:uppercase;color:#3a526e}.page-number{position:absolute;bottom:22px;left:0;right:0;text-align:center;font:600 10px "Roboto Condensed";color:#8a8176}
.content-head{border-bottom:3px solid #0c57b8;padding-bottom:13px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:end}.content-head small{font:700 9px "Roboto Condensed";color:var(--red);letter-spacing:.15em}.content-head h2{font:700 25px "Roboto Condensed";color:#073783;margin:3px 0 0}.content-head>span{font:600 9px "Be Vietnam Pro";color:#758197}.book-list{display:grid;gap:6px}.procedure-row{border-bottom:1px dotted #c4c4c4;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:7px 4px;cursor:pointer;transition:.15s}.procedure-row:hover{background:#edf6ff;padding-left:9px}.procedure-row .num{width:28px;height:28px;display:grid;place-items:center;background:#0d5ab9;color:#fff;font:700 10px "Roboto Condensed";border-radius:50%}.procedure-row h3{font:600 10.5px/1.35 "Be Vietnam Pro";margin:0;color:#25334a}.procedure-row small{display:block;font-size:8px;color:#7c8590;margin-top:3px}.procedure-row .go{color:var(--red);font-size:18px}.empty{text-align:center;padding:70px 10px;color:#788497;font-size:12px}.book-controls{position:absolute;z-index:4;bottom:16px;left:35px;right:35px;display:flex;justify-content:center;align-items:center;gap:12px}.book-controls button{width:28px;height:28px;border-radius:50%;border:1px solid #b9c6d7;background:#fff;color:#0b4da4;cursor:pointer;font-size:18px;line-height:1}.book-controls button:disabled{opacity:.3}.book-controls span{font:600 9px "Roboto Condensed";color:#7d8895}.book-detail{height:calc(100% - 82px);overflow:auto;padding-right:9px}.back-link{border:0;background:none;color:#0756b7;font:700 10px "Be Vietnam Pro";padding:0;cursor:pointer}.detail-code{font:700 9px "Roboto Condensed";color:var(--red);letter-spacing:.1em;margin-top:12px}.book-detail h3{font:700 23px/1.2 "Roboto Condensed";color:#063783;margin:5px 0 10px}.detail-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}.detail-tags span{font-size:8px;background:#edf4fb;color:#37536d;padding:4px 6px}.detail-actions{display:flex;gap:7px;margin-bottom:12px}.detail-actions a{font-size:8px;text-decoration:none;background:#0759bd;color:#fff;padding:7px 9px;border-radius:3px}.detail-actions a.secondary{background:#eaf1f8;color:#174877}.detail-warning{font-size:9px;background:#fff4d9;color:#775100;padding:8px}.detail-section{border-top:1px solid #d9d2c6;padding:11px 0}.detail-section h4{font:700 12px "Roboto Condensed";color:#0b4eaa;margin:0 0 6px}.detail-section pre{white-space:pre-wrap;font:8.5px/1.55 "Be Vietnam Pro";color:#3f4958;margin:0}.reader-tools{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:grid;gap:7px}.reader-tools button{width:38px;height:38px;border:1px solid rgba(255,255,255,.35);background:rgba(0,17,58,.75);color:#fff;border-radius:5px;cursor:pointer;font-size:17px}.reader-tools button:hover{background:#1670cc}.product-note{position:absolute;bottom:7px;color:rgba(255,255,255,.72);font:600 8px "Roboto Condensed";letter-spacing:.12em;margin:0}.svg-defs{position:absolute}@keyframes coverIn{from{opacity:0;transform:translateY(25px) scale(.94)}to{opacity:1;transform:none}}@keyframes bookOpen{from{opacity:0;transform:rotateY(-12deg) scale(.82)}to{opacity:1;transform:none}}
@media(max-width:850px){.book{width:calc(100vw - 48px);height:calc(100vh - 70px);grid-template-columns:1fr}.page-left,.book-spine{display:none}.page-right{border-radius:8px;padding:24px 24px 54px}.reader-tools{right:5px}.reader-tools button{width:32px;height:32px}.procedure-row{padding-block:9px}.procedure-row h3{font-size:11px}}@media(max-width:480px){.cover{max-height:calc(100vh - 70px)}.cover-title h1{font-size:30px}.cover-title p{font-size:15px}.book{width:calc(100vw - 20px)}.page-right{padding:18px 16px 52px}.content-head h2{font-size:21px}.reader-tools{display:none}.product-note{font-size:6px}.procedure-row{grid-template-columns:30px 1fr}.procedure-row .go{display:none}}

.phoenix-logo{width:68px;height:68px;object-fit:contain;border-radius:50%;background:#fff;padding:4px;filter:drop-shadow(0 0 9px rgba(83,206,255,.8));margin-bottom:3px}.cover-illustration{inset:48% 0 0;overflow:hidden}.cover-building-photo{position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,26,86,.88),rgba(0,45,128,.05)),url("assets/trung-tam-hanh-chinh-vinh-bao.png") center/cover no-repeat;filter:saturate(.88)}.phone{height:49%;bottom:7%;background:linear-gradient(#fff,#e4effc)}.mini-brand img{width:42px;height:42px;object-fit:contain;margin-right:5px}.intro-nav{display:grid;gap:5px;margin:10px 0}.intro-nav button{border:0;background:#fff6e6;border-left:4px solid #e52b2f;padding:8px 10px;text-align:left;color:#17345c;font:700 10px "Be Vietnam Pro";cursor:pointer}.intro-nav button:hover{background:#eaf4ff;border-left-color:#0759bd}.toc-heading{margin:15px 0 8px}.toc-heading strong{font-size:27px}.book-search{height:38px}.book-nav{gap:5px;margin-top:8px}.book-nav button{padding:8px 12px;font-size:10px}.book-stat{bottom:48px;padding:7px 14px}.book-stat strong{font-size:29px}.book-stat span{font-size:8px}.intro-hero{height:150px;margin:-1px -1px 16px;background:url("assets/vinh-bao-hoa-phuong.png") center/cover;color:#fff;position:relative;display:flex;align-items:end;padding:18px}.intro-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,37,107,.94),rgba(0,54,133,.12))}.intro-hero h3{position:relative;margin:0!important;color:#fff!important;font-size:24px!important}.intro-copy{font-size:10px;line-height:1.7;color:#3b4655}.intro-points{display:grid;gap:8px;margin:13px 0}.intro-points div{border-left:4px solid #0a62c4;background:#eef6ff;padding:9px 11px}.intro-points strong{display:block;color:#074798;font-size:11px}.intro-points span{font-size:9px;color:#566474}.center-card{display:grid;grid-template-columns:1fr 112px;gap:15px;align-items:center;background:#f0f7ff;padding:13px;margin:12px 0}.center-card img{width:112px;height:112px;object-fit:cover}.contact-line{font-size:10px;line-height:1.8}.qr-card{display:flex;gap:12px;align-items:center;margin-top:14px}.qr-card img{width:100px;height:100px;border:5px solid #fff;box-shadow:0 2px 10px #b5c2d3}.qr-card a{color:#0759bd;font-size:10px;font-weight:700}
