/* NGỌC AN V15 • public design enhancements, loaded after legacy CSS */
:root{--na-ink:#13223b;--na-accent:#d81e31;--na-border:#e3e9f2}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
button,a,input,textarea,select{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #4f7bd8;outline-offset:2px}
.site-header{z-index:80;backdrop-filter:blur(12px)}
.site-header .brand{min-width:0}
.site-nav a{font-size:14px}
.site-header .btn-small{min-height:44px;display:inline-flex;align-items:center}
.btn,.menu-toggle{min-height:44px}
.hero{overflow:hidden;min-height:0;background:linear-gradient(135deg,#fff 3%,#f5f7fd 90%)}
.hero-bg{background:none!important}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);grid-auto-rows:auto;align-items:center;column-gap:clamp(26px,4vw,76px);padding:clamp(56px,6vw,94px) 0 72px!important;min-height:575px}
.hero-inner>.eyebrow,.hero-inner>h1,.hero-inner>.hero-desc,.hero-inner>.hero-actions,.hero-inner>.hero-stats{grid-column:1;min-width:0}
.hero h1{font-size:clamp(38px,4.5vw,64px);line-height:1.1;letter-spacing:-.045em;overflow-wrap:anywhere;max-width:620px;margin:15px 0 20px}
.hero-desc{font-size:clamp(15px,1.15vw,17px);line-height:1.75;max-width:540px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 30px}
.hero-stats{display:flex;gap:16px;padding-top:18px;max-width:540px}
.hero-visual{grid-column:2;grid-row:1/span 5;margin:0;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 28px 70px #1c30442e;isolation:isolate;background:#e4e9f2}
.hero-visual picture,.hero-visual img{display:block;width:100%;height:100%}
.hero-visual img{object-fit:cover;object-position:center}
.hero-visual figcaption{position:absolute;right:14px;bottom:14px;border-radius:99px;color:#fff;background:#071d33b8;backdrop-filter:blur(8px);padding:8px 13px;font-size:11px;font-weight:700}
.section-head h2,.cta-panel h2{line-height:1.18;letter-spacing:-.03em}
.section-head p,.package-body p,.service-tile p,.process-item p{font-size:clamp(14px,.95vw,15px);line-height:1.7}
.service-tile,.package-card,.detail-panel{transition:box-shadow .16s,border-color .16s,transform .16s}
.package-card:hover{transform:translateY(-3px)}
.package-cover img,.detail-gallery img,.device-detail-card img{object-fit:cover}
.package-cover img{width:100%;height:100%}
.package-cover{background:#eaf0f6}
.footer a{min-height:26px}
@media(max-width:1100px){.hero-inner{column-gap:25px}.hero h1{font-size:clamp(36px,4.5vw,50px)}.hero-visual{aspect-ratio:4/5}}
@media(max-width:760px){
 .wrap{width:calc(100% - 32px)}.nav-inner{height:70px}
 .site-nav{top:70px;background:white!important;padding:18px 16px!important;max-height:calc(100dvh - 70px);overflow-y:auto;box-shadow:0 18px 34px #192b3b20}
 .site-nav a{min-height:44px;display:flex;align-items:center}
 .menu-toggle{min-width:46px;min-height:46px}
 .hero-inner{grid-template-columns:minmax(0,1fr);padding:50px 0 46px!important;min-height:0;gap:0}
 .hero-inner>.eyebrow,.hero-inner>h1,.hero-inner>.hero-desc,.hero-inner>.hero-actions,.hero-inner>.hero-stats{grid-column:1}
 .hero h1{font-size:clamp(36px,10.4vw,54px);letter-spacing:-.044em;margin:12px 0 18px;line-height:1.1}
 .hero-desc{font-size:15px}
 .hero-actions{margin:22px 0 20px;gap:10px}
 .hero-actions .btn{flex:1 1 210px;justify-content:center;text-align:center}
 .hero-visual{grid-column:1;grid-row:auto;aspect-ratio:16/11;border-radius:16px;margin:0 0 26px}
 .hero-visual figcaption{font-size:10px;padding:7px 10px}
 .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0;padding-top:7px}
 .hero-stats>div{padding-right:6px!important}.hero-stats strong{font-size:12px}.hero-stats small{font-size:10px;line-height:1.4}
 .section{padding:56px 0!important}.section-head{gap:12px}.section-head h2{font-size:clamp(28px,7.5vw,39px)}
 .cards,.service-grid,.process-grid,.footer-grid{grid-template-columns:minmax(0,1fr)!important}
 .service-tile{min-height:0}.cta-panel{padding:28px 20px}
 .floating-call{bottom:14px;right:14px;font-size:12px;padding:12px}
 .detail-gallery{height:auto}.detail-feature{height:250px}.detail-secondary{height:125px}
 .detail-panel{padding:21px 18px}.detail-columns{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:390px){.hero h1{font-size:35px}.brand b{font-size:15px}.nav-cta .menu-toggle{width:44px}.footer-bottom{line-height:1.9}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service-tile,.package-card,.detail-panel{transition:none!important}.package-card:hover{transform:none}}