
/* Quang Anh — blueprint / pencil / construction */
.button{position:relative;isolation:isolate;border:1px solid #8aa9b8!important;border-radius:0!important;background:#173e59!important;color:#fff!important;box-shadow:none!important;overflow:visible!important;transition:background .25s,color .25s!important}
.button:before{content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid #ffffff29;background:linear-gradient(90deg,transparent 49%,#ffffff12 50%,transparent 51%);z-index:-1}
.button:after{content:"";position:absolute;inset:-5px;pointer-events:none;background:linear-gradient(#8aa9b8,#8aa9b8) left top/13px 1px no-repeat,linear-gradient(#8aa9b8,#8aa9b8) left top/1px 13px no-repeat,linear-gradient(#8aa9b8,#8aa9b8) right bottom/13px 1px no-repeat,linear-gradient(#8aa9b8,#8aa9b8) right bottom/1px 13px no-repeat}
.button:hover,.button:focus-visible,.button:active{background:#faf7ee!important;color:#161a1c!important;transform:none!important}
.button:hover:before,.button:focus-visible:before{inset:3px 2px 2px 4px;border:1px solid #222;border-radius:2% 1% 3% 1%;transform:rotate(-.7deg);background:none;box-shadow:1px 2px 0 -1px #222,-2px -1px 0 -1px #555}
.button:focus-visible{outline:2px solid #bc985f;outline-offset:8px}
.qa-build{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1;opacity:0}
.qa-build path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.button.qa-constructing .qa-build{opacity:.8}
.qa-constructing .qa-build path{animation:qa-erect .18s ease-out forwards}
.qa-constructing .qa-build path:nth-child(2){animation-delay:.12s}
.qa-constructing .qa-build path:nth-child(3){animation-delay:.26s}
@keyframes qa-erect{to{stroke-dashoffset:0}}
.page-intro.p1{isolation:isolate;overflow:hidden;background:#173e59!important;box-shadow:none}
.page-intro.p1:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(#d1e6ee0b 1px,transparent 1px),linear-gradient(90deg,#d1e6ee0b 1px,transparent 1px);background-size:28px 28px}
.page-intro.p1:after{display:none}
.qa-plan{position:absolute;right:0;top:50%;transform:translateY(-50%);width:60%;height:100%;min-height:250px;color:#deedf2;opacity:.10;z-index:-1;pointer-events:none}
.qa-plan path,.qa-plan circle{vector-effect:non-scaling-stroke}
@media(max-width:600px){.qa-plan{width:100%;right:-20%;opacity:.075}.button{max-width:100%;white-space:normal}.qa-build{stroke-width:.8}}
@media(prefers-reduced-motion:reduce){.button,.button:before{transition:none!important}.qa-constructing .qa-build path{animation:none;stroke-dashoffset:0}}

.qa-plan{display:block!important;min-height:0;height:100%;width:55%;right:4%;opacity:.28;z-index:0}.page-intro.p1> :not(.qa-plan){position:relative;z-index:1}@media(max-width:600px){.qa-plan{width:65%;right:-2%;opacity:.2}}
.qa-plan{width:68%;height:220%;min-height:0;right:0;top:50%;opacity:.16}.page-intro.p1:before{background-size:36px 36px}@media(max-width:600px){.qa-plan{width:90%;height:180%;right:-20%;opacity:.13}}

/* Layered drawing band: aligned to the content grid. */
.page-intro.p1{max-width:none;margin:0;padding:28px max(48px,calc((100vw - 1380px)/2 + 48px)) 27px;min-height:112px;display:flex;align-items:center;background:linear-gradient(105deg,#132f43 0%,#1a4058 57%,#254d63 100%)!important}
.page-intro.p1:before{z-index:-1;opacity:.7;background-image:linear-gradient(#d5edf01a 1px,transparent 1px),linear-gradient(90deg,#d5edf01a 1px,transparent 1px),linear-gradient(90deg,transparent 0 50%,#0e2b3c77 50% 50.15%,transparent 50.15%);background-size:32px 32px,32px 32px,100% 100%}
.page-intro.p1:after{display:block;position:absolute;inset:9px max(48px,calc((100vw - 1380px)/2 + 48px));width:auto;opacity:1;z-index:0;border-top:1px solid #b3d4df35;border-bottom:1px solid #b3d4df22;background:linear-gradient(90deg,#b6d9e44a 0 22px,transparent 22px) left top/120px 1px no-repeat,linear-gradient(90deg,transparent 0 60%,#83b2c31c 60% 86%,transparent 86%);clip-path:polygon(0 0,100% 0,100% 76%,97% 100%,0 100%);pointer-events:none}
.page-intro.p1 h1{margin:0;font-size:clamp(27px,2vw,34px);line-height:1.25;color:#fff}
.page-intro.p1 h1:before{content:'';display:inline-block;width:18px;height:1px;margin:0 14px 9px 0;background:#bdd8e0;vertical-align:middle}
.qa-plan{right:8%;width:54%;height:280%;opacity:.2;filter:drop-shadow(9px 8px 0 #7fb2c51b)}
@media(max-width:850px){.page-intro.p1{padding-left:30px;padding-right:30px}.page-intro.p1:after{left:30px;right:30px}}
@media(max-width:560px){.page-intro.p1{padding:22px 20px;min-height:90px}.page-intro.p1:after{left:20px;right:20px}.page-intro.p1 h1{font-size:24px}.page-intro.p1 h1:before{width:12px;margin-right:9px}.qa-plan{width:80%;right:-20%;height:210%;opacity:.14}}
.page-intro.p1 h1:before{display:none}
.page-intro.p1 + .section{padding-top:32px}@media(max-width:560px){.page-intro.p1 + .section{padding-top:24px}}
