:root {
  --hdnd-do: #9B1B2E;
  --hdnd-do-dam: #7A1515;
  --hdnd-vang: #C9A227;
  --hdnd-xanh: #12355C;
  --hdnd-kem: #FBF6EC;
  --brand-red: #9B1B2E;
  --brand-blue: #9B1B2E;
  --brand-teal: #C9A227;
  --brand-ivory: #FBF6EC;
  --brand-charcoal: #2A1A12;
}

.hdnd-brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
  color: var(--hdnd-do);
}

.hdnd-brand-symbol {
  display: block;
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.hdnd-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-align: center;
}

.hdnd-brand-name {
  color: var(--hdnd-do);
  font-size: clamp(1.05rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: normal;
  text-wrap: balance;
}

.hdnd-brand-tenant {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin-top: 0.42rem;
  color: var(--hdnd-xanh);
  font-size: clamp(0.76rem, 1.55vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-wrap: balance;
}

.hdnd-brand-tenant::before,
.hdnd-brand-tenant::after {
  width: 1.55rem;
  height: 0.15rem;
  margin: 0 0.5rem;
  border-radius: 999px;
  background: var(--hdnd-xanh);
  content: "";
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .hdnd-brand-lockup { gap: 0.5rem; }
  .hdnd-brand-symbol { width: 3.5rem; height: 3.5rem; }
  .hdnd-brand-name { font-size: 1.9rem; }
  .hdnd-brand-tenant { font-size: 0.68rem; letter-spacing: 0.025em; }
  .hdnd-brand-tenant::before,
  .hdnd-brand-tenant::after { width: 0.75rem; margin: 0 0.3rem; }
}