/* Prototype layer: smooth scroll + mobile adaptations over the desktop design */
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
.m-burger{display:none}
#app img{max-width:100%}

@media (max-width:1000px){
  #app [style*="padding:0 40px"]{padding-left:20px!important;padding-right:20px!important}
  #app .m-bar{gap:12px!important}
  #app .m-nav{display:none!important;order:10;flex:1 0 100%!important;flex-direction:column;gap:2px!important;padding:4px 0 18px;font-size:17px!important}
  #app .m-nav a{padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
  #app .m-bar.m-open .m-nav{display:flex!important}
  #app .m-bar>div:last-of-type{margin-left:auto}
  .m-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
}

@media (max-width:760px){
  #app h1{font-size:clamp(34px,10vw,48px)!important;line-height:1.06!important}
  #app h2{font-size:clamp(28px,8vw,40px)!important;line-height:1.1!important}
  #app [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  #app [style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #app [style*="flex:"],#app [style*="flex-basis"]{min-width:0!important}
  #app input,#app select,#app textarea{max-width:100%;min-width:0}
  #app fieldset{min-width:0!important;padding:22px 18px!important}
  #app [style*="padding-top:112px"],#app [style*="padding-top:120px"],#app [style*="padding-top:104px"],#app [style*="padding-top:96px"]{padding-top:64px!important}
  #app [style*="padding-bottom:112px"],#app [style*="padding-bottom:120px"],#app [style*="padding-bottom:104px"],#app [style*="padding-bottom:96px"]{padding-bottom:64px!important}
  #app [style*="padding:56px"],#app [style*="padding:64px"],#app [style*="padding:72px"],#app [style*="padding:80px"]{padding:28px 20px!important}
  #app [style*="padding:40px"],#app [style*="padding:48px"]{padding:24px 20px!important}
  #app [style*="font-size:72px"],#app [style*="font-size:64px"],#app [style*="font-size:56px"]{font-size:clamp(34px,10vw,48px)!important}
  #app [style*="font-size:52px"],#app [style*="font-size:48px"],#app [style*="font-size:44px"]{font-size:clamp(28px,8vw,38px)!important}
  #app form[role="search"]{max-width:100%!important}
  #app form[role="search"] input{min-width:0;width:100%}
  #app .m-bar a[href*="bao-gia"],#app .m-bar a[href*="quote"]{display:none!important}
  #app header img{height:38px!important}
  #app table{font-size:14px}
}

@media (max-width:560px){
  #app .cards,#app .grid,#app .rel{grid-template-columns:minmax(0,1fr)!important}
  #app .bento{gap:12px!important}
  #app .tile{padding:14px 14px 16px!important;border-radius:18px!important}
  #app .tile>div{padding-right:0!important}
  #app .tile>span[style*="position:absolute"]{display:none!important}
  #app .tile b{font-size:16px!important}
  #app .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #app .foot{grid-template-columns:minmax(0,1fr)!important}
}

/* ---------- Motion layer ---------- */
@media (prefers-reduced-motion:no-preference){
  /* hero entrance */
  @keyframes fx-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes fx-media{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
  #app .fx-hero>*{animation:fx-up .9s cubic-bezier(.2,.75,.2,1) both}
  #app .fx-hero>*:nth-child(2){animation-delay:.08s}
  #app .fx-hero>*:nth-child(3){animation-delay:.18s}
  #app .fx-hero>*:nth-child(4){animation-delay:.28s}
  #app .fx-hero>*:nth-child(5){animation-delay:.38s}
  #app .fx-hero>*:nth-child(n+6){animation-delay:.46s}
  #app .fx-hero-media{animation:fx-media 1.1s .25s cubic-bezier(.2,.75,.2,1) both}

  /* scroll reveal */
  #app .fx-reveal{opacity:0;transform:translateY(32px);transition:opacity .75s cubic-bezier(.2,.75,.2,1) var(--fx-d,0ms),transform .75s cubic-bezier(.2,.75,.2,1) var(--fx-d,0ms)}
  #app .fx-reveal.fx-in{opacity:1;transform:none}

  /* image zoom on hover */
  #app .card img,#app .tile img,#app article img{transition:transform .6s cubic-bezier(.2,.75,.2,1)}
  #app .card:hover img,#app .tile:hover img,#app article:hover img{transform:scale(1.06)}
  #app .tile:hover{box-shadow:0 24px 48px -24px rgba(7,26,51,.35)}

  /* primary button shine */
  #app .btn-p,#app a[style*="background:#1E5FD8"],#app button[style*="background:#1E5FD8"]{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
  #app .btn-p::after,#app a[style*="background:#1E5FD8"]::after,#app button[style*="background:#1E5FD8"]::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.75,.2,1);pointer-events:none}
  #app .btn-p:hover::after,#app a[style*="background:#1E5FD8"]:hover::after,#app button[style*="background:#1E5FD8"]:hover::after{transform:translateX(120%)}
  #app .btn-p:hover{transform:translateY(-2px)}

  /* pointer spotlight on the dark hero */
  #app .fx-spot::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(24,196,218,.16),transparent 60%);transition:background .1s}
}
.fx-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:50;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#18C4DA,#1E5FD8);pointer-events:none}