/* base.css — reset + element mặc định + header public (05/03). */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--oq-font); font-size:var(--oq-fs-14);
  line-height:var(--oq-lh-body); color:var(--oq-text-1);
  background:var(--oq-bg); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:var(--oq-lh-head); margin:0; font-weight:600}
h1{font-size:var(--oq-fs-24)} h2{font-size:var(--oq-fs-20)} h3{font-size:var(--oq-fs-18)}
a{color:var(--oq-accent); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0}
.oq-container{max-width:var(--oq-container); margin:0 auto; padding:0 var(--oq-sp-4)}
@media(min-width:1024px){.oq-container{padding:0 var(--oq-sp-6)}}
.oq-muted{color:var(--oq-text-2)}
.oq-dim{color:var(--oq-text-3)}
.oq-mono{font-family:var(--oq-font-mono)}

/* ---------- HEADER public ---------- */
.oq-head{
  position:sticky; top:0; z-index:var(--oq-z-sticky);
  height:var(--oq-header-h); background:var(--oq-surface);
  border-bottom:1px solid var(--oq-border); display:flex; align-items:center;
}
.oq-head__inner{display:flex; align-items:center; gap:var(--oq-sp-6); width:100%}
.oq-logo{font-weight:600; font-size:var(--oq-fs-18); color:var(--oq-text-1)}
.oq-logo b{color:var(--oq-accent)}
.oq-head nav{display:flex; gap:var(--oq-sp-5); margin-left:var(--oq-sp-4)}
.oq-head nav a{color:var(--oq-text-2); font-weight:500}
.oq-head__right{margin-left:auto; display:flex; align-items:center; gap:var(--oq-sp-3)}
@media(max-width:640px){.oq-head nav{display:none}}