/* ==========================================================================
   UTILITIES — Helper classes dùng nhanh
   Chỉ dùng khi component class không có sẵn.
   ========================================================================== */

/* ─── DISPLAY ─── */
.d-none          { display: none !important; }
.d-block         { display: block !important; }
.d-flex          { display: flex !important; }
.d-inline-flex   { display: inline-flex !important; }
.d-grid          { display: grid !important; }

/* ─── FLEX ─── */
.flex-row        { flex-direction: row; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1          { flex: 1; }
.gap-xs          { gap: var(--space-xs); }
.gap-sm          { gap: var(--space-sm); }
.gap-md          { gap: var(--space-md); }
.gap-lg          { gap: var(--space-lg); }
.gap-xl          { gap: var(--space-xl); }

/* ─── SPACING: Margin ─── */
.mt-0   { margin-top: 0 !important; }
.mt-xs  { margin-top: var(--space-xs) !important; }
.mt-sm  { margin-top: var(--space-sm) !important; }
.mt-md  { margin-top: var(--space-md) !important; }
.mt-lg  { margin-top: var(--space-lg) !important; }
.mt-xl  { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }

.mb-0   { margin-bottom: 0 !important; }
.mb-xs  { margin-bottom: var(--space-xs) !important; }
.mb-sm  { margin-bottom: var(--space-sm) !important; }
.mb-md  { margin-bottom: var(--space-md) !important; }
.mb-lg  { margin-bottom: var(--space-lg) !important; }
.mb-xl  { margin-bottom: var(--space-xl) !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── SPACING: Padding ─── */
.p-0   { padding: 0 !important; }
.p-xs  { padding: var(--space-xs) !important; }
.p-sm  { padding: var(--space-sm) !important; }
.p-md  { padding: var(--space-md) !important; }
.p-lg  { padding: var(--space-lg) !important; }
.p-xl  { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }

.px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }

/* ─── BACKGROUNDS ─── */
.bg-primary   { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-dark      { background-color: var(--bg-dark) !important; }
.bg-brand     { background-color: var(--brand-primary) !important; }

/* ─── BORDERS ─── */
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ─── SHADOWS ─── */
.shadow-none  { box-shadow: none !important; }
.shadow-sm    { box-shadow: var(--shadow-sm) !important; }
.shadow-md    { box-shadow: var(--shadow-md) !important; }
.shadow-lg    { box-shadow: var(--shadow-lg) !important; }

/* ─── POSITION ─── */
.relative  { position: relative; }
.absolute  { position: absolute; }
.sticky    { position: sticky; }
.overflow-hidden { overflow: hidden; }

/* ─── WIDTH ─── */
.w-full    { width: 100%; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 680px; }
.max-w-lg  { max-width: 960px; }
.max-w-xl  { max-width: var(--container-max); }

/* ─── IMAGES ─── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─── VISIBILITY (Responsive) ─── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}
@media (max-width: 1023px) {
  .hide-below-desktop { display: none !important; }
}
@media (min-width: 768px) {
  .hide-above-mobile { display: none !important; }
}

/* ─── CONTAINER ─── */
.container-custom {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ─── ANIMATIONS ─── */
.transition-all {
  transition: all var(--transition-base);
}

/* Hover lift effect */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}