/* ==============================================
   hdev elements – Tokens & helpers dùng chung
   Màu thương hiệu lấy từ Flatsome: --fs-color-primary
   ============================================== */

:root {
  --hdev-orange: var(--fs-color-primary, #f38320);
  --hdev-orange-btn: #e5731a;
  --hdev-orange-dark: #b5560a;
  --hdev-orange-darker: #9a4808;
  --hdev-orange-soft: #fde9d6;
  --hdev-orange-line: #f6c79b;
  --hdev-orange-tint: #fff6ec;
  --hdev-cream: #fefaf5;
  --hdev-text: #1a1a1a;
  --hdev-text-2: #3d3d3d;
  --hdev-muted: #555555;
  --hdev-radius: 16px;
  --hdev-shadow: 0 10px 30px rgba(154, 72, 8, 0.08);
}

/* Cụm từ nhấn mạnh trong tiêu đề: {cụm từ} */
.hdev-hl {
  color: var(--hdev-highlight, var(--hdev-orange));
}

/* Ngắt dòng "|" chỉ áp dụng desktop */
@media (max-width: 849px) {
  br.hdev-br {
    display: none;
  }
}

/* Icon SVG */
.hdev-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

img.hdev-icon--img {
  object-fit: contain;
}

/* Khung trống – chỉ hiện trong UX Builder */
.hdev-builder-empty {
  padding: 14px;
  border: 1px dashed var(--hdev-orange-line);
  border-radius: 8px;
  color: var(--hdev-muted);
  font-size: 13px;
  text-align: center;
}

/* Vòng tròn icon cam nhạt */
.hdev-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--hdev-orange-soft);
  color: var(--hdev-orange-btn);
  font-size: 22px;
}