/* Local art-direction trial. Decorative geometry stays behind the reading surface. */
:root{--bg-draft-line:rgba(63,91,139,.045);--bg-draft-ink:#7388ad;--bg-draft-opacity:.13}
[data-theme=dark]{--bg-draft-line:rgba(144,172,220,.035);--bg-draft-ink:#a0b9e0;--bg-draft-opacity:.10}
.aw-hero,.mp-hero{position:relative;isolation:isolate}
.aw-hero::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(var(--bg-draft-line) 1px,transparent 1px),linear-gradient(90deg,var(--bg-draft-line) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 28%,transparent 72%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 28%,transparent 72%,#000)}
.aw-hero::after,.mp-hero::after{content:'';position:absolute;right:-170px;top:35px;width:640px;height:640px;z-index:-1;pointer-events:none;background:var(--bg-draft-ink);opacity:var(--bg-draft-opacity);mask:url('/assets/construction-background.svg') center/contain no-repeat;-webkit-mask:url('/assets/construction-background.svg') center/contain no-repeat;transform:rotate(-8deg);animation:background-draft-enter 1.2s ease-out both}
.mp-hero::after{right:-190px;top:-30px;transform:rotate(0)}
.aw-hero>.h-wrap,.mp-hero>.h-wrap{position:relative;z-index:1}
/* Small setting-out marks on the section margins, outside text and figures. */
.home>section.h-section{position:relative}
.home>section.h-section:not(.aw-delegation):not(.h-cta){background-image:linear-gradient(var(--bg-draft-line),var(--bg-draft-line)),linear-gradient(90deg,var(--bg-draft-line),var(--bg-draft-line));background-size:1px 44px,44px 1px;background-position:28px 42px,6px 64px;background-repeat:no-repeat}
.home #erp,.home #trong-tam{background-image:linear-gradient(90deg,transparent calc(100% - 72px),var(--bg-draft-line) calc(100% - 72px),var(--bg-draft-line) calc(100% - 71px),transparent calc(100% - 71px));background-size:100% 100%;background-repeat:no-repeat}
/* Drawing-field texture follows each workflow without covering its content. */
.mp .mp-frame{background:var(--c-surface)}
.cp-article-body{background-image:none!important}
@keyframes background-draft-enter{from{opacity:0;translate:0 8px}to{opacity:var(--bg-draft-opacity);translate:0 0}}
@media(min-width:1450px){.aw-hero::after{right:-100px}.mp-hero::after{right:-80px}}
@media(max-width:760px){.aw-hero::before{background-size:48px 48px;mask-image:linear-gradient(#000,transparent 260px);-webkit-mask-image:linear-gradient(#000,transparent 260px)}.aw-hero::after,.mp-hero::after{width:360px;height:360px;right:-220px;top:10px;opacity:.07}.home>section.h-section{background-image:none!important}}
@media(prefers-reduced-motion:reduce){.aw-hero::after,.mp-hero::after{animation:none}}