/* ==== main-block overrides vs base.css (from san-pham.html) ==== */
html{overflow-x:hidden}
.hdr__row{padding:0 clamp(14px,1.4vw,22px) 0 clamp(28px,3vw,64px)}
.grid .card{min-width:0}
.card__body{min-width:0}
.card__mat{padding-left:4px}
.card__variant{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.vbtn{font-size:11px;letter-spacing:.02em;padding:5px 11px;border:1px solid var(--line2);background:transparent;color:var(--ink2);cursor:pointer;font-family:var(--f);border-radius:30px;transition:.25s;line-height:1.2}
.vbtn:hover{border-color:var(--ink);color:var(--ink)}
.vbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.group-contact a{background:var(--ink2);border:1px solid var(--line2);box-shadow:0 8px 20px rgba(44,46,47,.16)}
@media(max-width:1000px){
  .hdr .tools{margin-left:auto}
}
/* reorder repair: base rules that originally loaded after the rules above — re-emitted so they still win */
@media(max-width:560px){
  .wrap{padding:0 20px}
}
@media(max-width:1000px){
  .hdr .tools{margin-left:auto}
  .hdr__row{padding-right:clamp(14px,1.4vw,22px)}
}

/* ==== to-top overrides vs base.css (from san-pham.html) ==== */
.to-top{background:var(--ink2);border:1px solid var(--line2);box-shadow:0 8px 20px rgba(44,46,47,.16)}

/* ==== list card alignment: pin price/Tư vấn row to the bottom so it lines up
        across a row regardless of name length or presence of variant buttons ==== */
.grid .card{display:flex;flex-direction:column}
.grid .card__body{flex:1;display:flex;flex-direction:column}
.grid .card__price{margin-top:auto}

/* ==== show product-grid cards immediately: the .stagger slide/fade reveal made
        the grid read as "uneven" while loading (cards popped in at different
        offsets). Keep the grid static so all 4 columns line up at once. ==== */
.plp .grid.stagger>*{opacity:1!important;transform:none!important;transition:none!important}