html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
.q-page{overflow-x:clip;max-width:100vw}
img,video,table{max-width:100%}
a,button,input{touch-action:manipulation}
a{color:#FFDE58}a:hover{color:#FFFFFF}
input::placeholder{color:#8F8AB8}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #FFDE58;outline-offset:2px}
[id]{scroll-margin-top:72px}

.q-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(140,170,255,.45))}
.q-nav{display:none}
.q-desk{display:none}
.q-mob-only{display:flex}

/* HERO: banner → tiêu đề → chỉ số giá → form */
.q-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "stats" "form";gap:18px}
.q-banner{position:relative;margin:-24px -16px 20px}
.q-banner img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.q-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,rgba(19,16,128,0),#13107F);pointer-events:none}
@keyframes q-pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes q-fade{from{opacity:0}to{opacity:1}}
.q-modal{animation:q-fade .25s ease-out}
.q-modal-card{animation:q-pop .35s cubic-bezier(.2,.8,.2,1)}
.q-hero-text{grid-area:text}
.q-hero-img{grid-area:img}
.q-hero-form{grid-area:form}
.q-hero-stats{grid-area:stats}
.q-h1{font-size:28px}
.q-h2{font-size:22px}
.q-split{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.q-sticky{display:grid;padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important}
.q-calc-live{position:sticky;top:68px;z-index:5}

@media (max-width: 959px){
  .q-sec{padding-top:40px !important;padding-bottom:40px !important}
  .q-header-cta{display:none !important}
  .q-chips{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-chips button{width:100%}
  .q-facts:not(.q-open) .q-more{display:none !important}
  .q-legal:not(.q-open) .q-more{display:none !important}
  .q-snap{display:grid !important;grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:0 16px 10px;scroll-padding-left:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .q-snap::-webkit-scrollbar{display:none}
  .q-snap > *{scroll-snap-align:start}
  .q-snap{align-items:start}
  .q-hero-stats{gap:8px !important}
  .q-hero-stats > div{padding:10px 12px !important;border-radius:14px !important}
  .q-hero-stats strong{font-size:18px !important}
  .q-pop-left{padding:16px 18px 14px !important;min-height:0 !important;gap:8px !important}
  .q-pop-left h2{font-size:18px !important}
  .q-pop-form{padding:16px 16px 14px !important;gap:9px !important}
  .q-pop-form input,.q-pop-form select{padding:10px 12px !important;min-height:44px}
  .q-pop-sub{display:none !important}
  .q-pop-form .q-pulse{animation:none !important}
}

@media (min-width: 960px){
  .q-nav{display:flex}
  .q-desk{display:flex}
  .q-mob-only{display:none !important}
  .q-calc-live{display:none !important}
  .q-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"text form" "stats form";column-gap:48px;row-gap:24px;align-items:start}
  .q-banner{margin-bottom:8px}
  .q-banner img{max-height:820px}
  .q-h1{font-size:54px}
  .q-h2{font-size:36px}
  .q-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px}
  .q-sticky{display:none !important}
  .q-page{padding-bottom:0 !important}
  .q-sec{padding-top:88px !important;padding-bottom:88px !important}
  .q-form-row{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* CTA effects */
@keyframes q-shine{0%{transform:translateX(-160%) skewX(-20deg)}55%,100%{transform:translateX(420%) skewX(-20deg)}}
@keyframes q-pulse{0%{box-shadow:0 0 0 0 rgba(255,222,88,.65)}70%{box-shadow:0 0 0 16px rgba(255,222,88,0)}100%{box-shadow:0 0 0 0 rgba(255,222,88,0)}}
@keyframes q-pulse-cyan{0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)}70%{box-shadow:0 0 0 14px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
@keyframes q-ring{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}
@keyframes q-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes q-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes q-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.q-cta{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.q-cta::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:translateX(-160%) skewX(-20deg);animation:q-shine 3.4s ease-in-out infinite;pointer-events:none;z-index:1}
.q-cta:active{transform:scale(.97)}
.q-cta svg{animation:q-arrow 1.4s ease-in-out infinite}
@media (hover:hover){
  .q-cta:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(255,222,88,.45);filter:brightness(1.06)}
  .q-ghost:hover{background:rgba(255,255,255,.14) !important;border-color:#FFDE58 !important;transform:translateY(-2px)}
  .q-tab:hover{transform:translateY(-2px)}
}
.q-pulse{animation:q-pulse 2.2s ease-out infinite}
.q-pulse-cyan{animation:q-pulse-cyan 2.2s ease-out infinite}
.q-ring svg{animation:q-ring 2s ease-in-out infinite;transform-origin:50% 50%}
.q-ghost{transition:background .2s ease,border-color .2s ease,transform .2s ease}
.q-ghost:active,.q-tab:active{transform:scale(.97)}
.q-tab{transition:background .2s ease,color .2s ease,transform .15s ease}
.q-fab{animation:q-float 3s ease-in-out infinite}
.q-swipe svg{animation:q-nudge 1.2s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  *,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}