/* ============ Siêu Nhím — Main Styles (from demo.html) ============ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff); font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{margin:0;line-height:1.16;font-weight:800;letter-spacing:-.02em;text-wrap:balance} h1{font-size:clamp(2.4rem,1.5rem + 3.6vw,3.9rem)} h2{font-size:clamp(1.7rem,1.3rem + 1.9vw,2.5rem)} h3{font-size:1.18rem;letter-spacing:-.01em} p{margin:0} a{color:var(--brand-ink);text-underline-offset:3px} img{max-width:100%;display:block;height:auto} svg{display:block} :focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:5px} ::selection{background:var(--brand);color:#fff} /* layout */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,.5rem + 2vw,2.4rem)} section.band{padding-block:clamp(3.2rem,2.2rem + 4vw,5.6rem)} .band--tint{background:var(--surface)} /* eyebrow + section head */ .eyebrow{display:block;font-weight:700;font-size:.82rem;letter-spacing:.16em; text-transform:uppercase;color:var(--brand);margin:0 0 .8rem} .sec-head{max-width:46rem;margin:0 auto 2.8rem;text-align:center} .sec-head.left{margin-inline:0;text-align:left} .sec-head p{margin-top:.9rem;color:var(--ink-2);font-size:1.04rem} /* buttons */ .btn{--_b:var(--brand);--_f:#fff;display:inline-flex;align-items:center;justify-content:center; gap:.5rem;font-weight:600;font-size:.97rem;line-height:1;padding:.95rem 1.5rem;border-radius:999px; border:1.5px solid transparent;background:var(--_b);color:var(--_f);cursor:pointer;text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease; box-shadow:0 12px 24px -12px rgba(240,78,35,.55)} .btn:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(240,78,35,.55)} .btn svg{width:1.05em;height:1.05em} .btn--ghost{--_b:transparent;--_f:var(--brand-ink);border-color:var(--brand);box-shadow:none} .btn--ghost:hover{background:var(--brand-wash);border-color:var(--brand);transform:translateY(-2px)} .btn--lg{padding:1.08rem 1.8rem;font-size:1.03rem} .btn--sm{padding:.68rem 1.1rem;font-size:.9rem} /* header */ .sn-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} .sn-header.scrolled{border-color:var(--line);box-shadow:0 8px 24px -16px rgba(120,50,25,.35)} .sn-nav{display:flex;align-items:center;gap:1.6rem;height:5rem} .sn-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none} /* Logo header. Trước đây đặt cứng height:110px — với file logo tỉ lệ 1460x271 thì ra 593px bề ngang, cao hơn cả thanh header (80px), làm menu vỡ dòng trên desktop và đẩy scrollWidth lên 724px khiến TOÀN SITE trượt ngang trên mobile. Cho co theo màn hình và chặn bề ngang tối đa để không bao giờ phá layout. */ .sn-brand img{height:clamp(2.1rem,1.1rem + 2.2vw,3.2rem);width:auto; max-width:min(56vw,300px);object-fit:contain} .sn-brand .fallback{font-weight:800;font-size:1.2rem;letter-spacing:-.02em} .sn-brand .fallback b{color:var(--brand-red)}.sn-brand .fallback i{color:var(--brand-2);font-style:normal} /* Menu chính. Trước đây CSS viết cho trần vì template cắt bỏ thẻ