/* ==============================================
   hdev – Class tiện ích gắn vào element có sẵn của Flatsome
   (nhập vào ô "Class" của col / ux_stack / ux_text / ux_image / ux_gallery / hdev_button)
   ============================================== */

/* ── Cột co giãn: dùng với row v_align="equal" ─────────────
   .hdev-col-stretch  : gắn vào col
   .hdev-push-bottom  : gắn vào phần tử cần dính đáy cột   */
.hdev-col-stretch > .col-inner {
  display: flex;
  flex-direction: column;
}

.hdev-col-stretch > .col-inner > .hdev-push-bottom {
  margin-top: auto;
}

/* ── Nhóm chiều ngang bằng tiêu đề: gắn vào ux_stack (Vertical)
   Các phần tử trong nhóm rộng đúng bằng tiêu đề H1.
   (ux_stack reset margin của phần tử con → dùng gap)          */
.stack.hdev-fit-width {
  gap: 20px;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .hdev-fit-width {
    width: min-content;
    max-width: 100%;
  }

  .hdev-fit-width .hdev-heading__title {
    white-space: nowrap;
  }
}

/* ── Đoạn văn có khoảng cách chuẩn: gắn vào ux_text ───────
   (style.css của theme đặt p { margin-bottom: 0 } cho toàn site) */
.hdev-prose {
  font-size: 16px;
  line-height: 1.75;
}

.hdev-prose p {
  margin-bottom: 16px;
}

.hdev-prose p:last-child {
  margin-bottom: 0;
}

/* Khoảng cách khi chip / nhóm nút đứng ngay sau đoạn văn */
.text + .hdev-icon-list--chips {
  margin-top: 24px;
}

/* Nhóm nút dính đáy cột vẫn luôn cách nội dung phía trên tối thiểu 32px */
.hdev-col-stretch > .col-inner > .stack.hdev-push-bottom {
  padding-top: 32px;
}

/* ── Đoạn văn căn đều 2 bên (desktop): gắn vào ux_text ──── */
@media (min-width: 850px) {
  .hdev-text-justify p {
    text-align: justify;
  }
}

/* ── Nhóm nút nằm ngang: gắn vào ux_stack (Horizontal) ──── */
.stack.hdev-actions {
  flex-wrap: wrap;
  gap: 12px;
}

.hdev-actions .hdev-button-wrapper {
  width: auto;
  margin-bottom: 0;
}

@media (max-width: 549px) {
  .hdev-actions .hdev-button-wrapper,
  .hdev-actions .hdev-button {
    width: 100%;
  }
}

/* ── Nút hdev_button ───────────────────────────────────── */
.hdev-button.hdev-btn-strong {
  font-weight: 600;
}

/* Viền: dùng cùng bg_color trắng + text_color cam */
.hdev-button.hdev-btn-outline {
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Mũi tên → sau chữ */
.hdev-button.hdev-btn-arrow::after,
.hdev-button.hdev-btn-play::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--hdev-btn-mask) center / contain no-repeat;
  mask: var(--hdev-btn-mask) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.hdev-button.hdev-btn-arrow::after {
  --hdev-btn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

.hdev-button.hdev-btn-arrow:hover::after {
  transform: translateX(3px);
}

/* Icon ▶ trước chữ */
.hdev-button.hdev-btn-play::before {
  --hdev-btn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 8.3v7.4l5.8-3.7z' fill='black'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
}

/* ── Ảnh bo góc: gắn vào ux_image ──────────────────────── */
.hdev-img-rounded .img-inner {
  overflow: hidden;
  border-radius: 20px;
}

.hdev-img-rounded {
  margin-bottom: 0;
}

/* ── Gallery bo góc: gắn vào ux_gallery ────────────────── */
.hdev-gallery-rounded .box-image {
  overflow: hidden;
  border-radius: var(--hdev-radius, 16px);
}

.hdev-gallery-rounded .box-text {
  display: none;
}

/* ── Khối CTA: gắn vào col ─────────────────────────────── */
.hdev-cta-box > .col-inner {
  padding: 56px 40px;
  border: 1px solid var(--hdev-orange-line, #f6c79b);
  border-radius: 24px;
  background-color: var(--hdev-cream, #fefaf5);
  text-align: center;
}

.hdev-cta-box .hdev-heading {
  margin-bottom: 26px;
}

@media (max-width: 549px) {
  .hdev-cta-box > .col-inner {
    padding: 36px 20px;
  }
}