/* ==============================================
   hdev Button – Custom Element Styles
   ============================================== */

.hdev-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hdev-btn-gap, 8px);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  border: none;
  transition:
    background-color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
  box-sizing: border-box;
}

.hdev-button__icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.hdev-button__text {
  white-space: nowrap;
}

/* ==============================================
   Alignment Controls
   ============================================== */
.hdev-button-wrapper {
  display: flex;
  width: 100%;
  margin-bottom: 1em; /* Giống nút mặc định */
}

/* Desktop Alignment */
.hdev-align-left { justify-content: flex-start; }
.hdev-align-center { justify-content: center; }
.hdev-align-right { justify-content: flex-end; }
.hdev-align-block .hdev-button { width: 100%; }

/* Mobile Alignment (Flatsome mobile & tablet breakpoint = 849px) */
@media (max-width: 849px) {
  .hdev-align-mobile-left { justify-content: flex-start !important; }
  .hdev-align-mobile-center { justify-content: center !important; }
  .hdev-align-mobile-right { justify-content: flex-end !important; }
  .hdev-align-mobile-block .hdev-button { width: 100% !important; }
}