/* ===== RESET NHẸ ===== */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
html { -webkit-text-size-adjust: 100%; }
:root{
  /* Token spacing/type cơ bản */
  --container-max: 1620px;
  --container-pad: 10px;
  --gap-min: 16px;
  --gap-max: 40px;
}

/* ===== CONTAINER 1620 + padding 10 ===== */
.container{
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 576px){  .container{ max-width: 540px;  } }
@media (min-width: 768px){  .container{ max-width: 720px;  } }
@media (min-width: 992px){  .container{ max-width: 960px;  } }
@media (min-width: 1200px){ .container{ max-width: 1140px; } }
@media (min-width: 1400px){ .container{ max-width: 1320px; } }
@media (min-width: 1620px){ .container{ max-width: var(--container-max); } }

/* ===== UTILITIES NHANH ===== */
.hidden-md{ display: none; }
@media (min-width: 992px){ .hidden-md{ display: initial; } }

.gap-fluid{ gap: clamp(var(--gap-min), 3vw, var(--gap-max)); }
.text-clip{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap{ word-wrap: break-word; overflow-wrap: anywhere; }