/* NGOC AN V16 — shared visual language, progressive enhancement */
:root{--na-ink:#101a32;--na-muted:#66718b;--na-red:#df180e;--na-red-dark:#b90f08;--na-bg:#f5f7fc;--na-line:#e4e9f4;--na-radius:20px;--na-shadow:0 14px 38px rgba(20,35,74,.065);--na-focus:0 0 0 4px rgba(223,24,14,.15)}
html{scroll-behavior:auto}body{font-family:Inter,'Segoe UI',Arial,sans-serif;color:var(--na-ink);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}button:not(:disabled){cursor:pointer}button:active,a:active{transform:scale(.985)}:focus-visible{outline:2px solid var(--na-red)!important;outline-offset:3px}input:focus,textarea:focus,select:focus{box-shadow:var(--na-focus);border-color:#ec756d!important}input,select,textarea{max-width:100%;min-height:44px}textarea{min-height:100px}img{max-width:100%}
/* Dashboard and staff pages: unified components without changing functionality */
body:not(.auth-screen):not(.na-public) :is(.card,.panel,.stat-card,.summary-card,.section-card,.table-card,.workspace-card,.modal-content,.modal-dialog){border-radius:var(--na-radius);box-shadow:var(--na-shadow)}
body:not(.auth-screen):not(.na-public) :is(main,.main-content,.workspace-main,.page-content){min-width:0}body:not(.auth-screen):not(.na-public) :is(h1,h2,h3){letter-spacing:-.035em}body:not(.auth-screen):not(.na-public) :is(table){border-collapse:separate;border-spacing:0;width:100%}body:not(.auth-screen):not(.na-public) :is(th){letter-spacing:.045em;text-transform:uppercase;font-size:11px}body:not(.auth-screen):not(.na-public) :is(td,th){padding-block:13px;border-bottom:1px solid var(--na-line)}body:not(.auth-screen):not(.na-public) :is(.badge,.status-pill){border-radius:999px}body:not(.auth-screen):not(.na-public) :is(.btn-primary,button.primary,.btn-danger){box-shadow:0 6px 16px rgba(223,24,14,.12)}body:not(.auth-screen):not(.na-public) :is(.btn-primary,button.primary,.btn-danger):hover{filter:brightness(.96);transform:translateY(-1px)}
/* Public pages */
body.na-public{background:#fff}body.na-public :is(h1,h2,h3){letter-spacing:-.045em}body.na-public :is(.service-tile,.package-card,.product-card,.feature-card,.quote-card){border-radius:22px;box-shadow:0 12px 30px rgba(16,26,50,.06);border:1px solid #e8ebf3;transition:transform .25s ease,box-shadow .25s ease}body.na-public :is(.service-tile,.package-card,.product-card,.feature-card,.quote-card):hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(16,26,50,.11)}body.na-public .hero{position:relative;isolation:isolate}body.na-public .hero :is(h1,h2){text-wrap:balance}body.na-public .hero :is(.btn,.button){box-shadow:0 9px 24px rgba(223,24,14,.18)}body.na-public :is(.service-grid,.packages-grid,.product-grid){gap:clamp(16px,2vw,28px)}
/* Hero: staggered entrance; no hidden content and no scroll interception */
@keyframes na-rise{from{opacity:.35;transform:translateY(19px)}to{opacity:1;transform:translateY(0)}}@keyframes na-glow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-8px,0)}}
body.na-public.na-motion .hero :is(.eyebrow,.hero-kicker,.tiny-intro){animation:na-rise .6s ease-out both}body.na-public.na-motion .hero h1{animation:na-rise .72s .09s ease-out both}body.na-public.na-motion .hero p{animation:na-rise .72s .19s ease-out both}body.na-public.na-motion .hero :is(.hero-actions,.hero-buttons){animation:na-rise .72s .28s ease-out both}body.na-public.na-motion .hero :is(.hero-image,.hero-visual,.hero-photo){animation:na-rise .85s .2s ease-out both}
body.na-public .na-reveal{transition:opacity .55s ease,transform .55s ease}body.na-public.na-motion .na-reveal:not(.na-visible){opacity:.72;transform:translateY(15px)}body.na-public .na-reveal.na-visible{opacity:1;transform:none}body.na-public .na-reveal:nth-child(3n+2){transition-delay:65ms}body.na-public .na-reveal:nth-child(3n){transition-delay:110ms}
/* Authentication */
body.auth-screen{background:#f5f7fc}body.auth-screen .auth-form-panel{background:radial-gradient(circle at 100% 0%,#fff0ef,transparent 48%),#fff}body.auth-screen .auth-form{border-radius:24px}body.auth-screen .auth-form :is(input,button){border-radius:12px}body.auth-screen .auth-promo{background-image:linear-gradient(135deg,rgba(11,20,41,.88),rgba(44,17,31,.68)),url('../assets/hero-event.webp');background-position:center;background-size:cover}body.auth-screen .auth-promo-content h1{letter-spacing:-.05em;text-wrap:balance}body.auth-screen .auth-submit{min-height:50px}
/* Responsive and accessible touch controls */
@media(max-width:900px){body:not(.na-public) :is(.workspace-main,.main-content,.page-content){padding-inline:clamp(12px,3vw,24px)}body:not(.na-public) :is(.modal-content,.modal-dialog){max-width:calc(100vw - 24px)}body:not(.na-public) :is(.table-wrapper,.table-scroll,.table-responsive){overflow-x:auto;overscroll-behavior-x:contain}body:not(.na-public) :is(.stat-grid,.stats-grid,.dashboard-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}}
@media(max-width:600px){body{font-size:14px}body :is(button,.btn,input,select){min-height:44px}body.na-public :is(.service-grid,.packages-grid,.product-grid){grid-template-columns:1fr}body:not(.na-public) :is(.modal,.dialog){padding:12px}body:not(.na-public) :is(.filters,.filter-bar,.toolbar){flex-wrap:wrap;gap:10px}body:not(.na-public) :is(.filters input,.filter-bar input){max-width:100%}body:not(.na-public) :is(.card,.panel,.section-card){max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}body.na-public .na-reveal{opacity:1!important;transform:none!important}}