/* === incard: trang Du lịch dựng bằng Bricks — /vi/linh-vuc/travel-tourism/ === */
/*
 * Lớp này nạp SAU incard.css và hai lớp cầu nối cũ, nên với cùng trọng số thì
 * thắng. Đặt ở đây thay vì trong group `css` của theme style Bricks vì theme
 * style in inline TRƯỚC incard.css: mọi rule một-class ở đó đều bị incard.css
 * đè (đã trả giá: rail của timeline và số bước biến mất).
 *
 * Mỗi selector đều gắn thêm class element của Bricks (.brxe-text, .brxe-block,
 * .brxe-div, .brxe-accordion) để đạt trọng số (0,2,0) — đủ để thắng cả những
 * rule hai-class của lớp cũ.
 *
 * Tiền tố là `incard-tvl-`, KHÔNG phải `incard-ind-`: bộ `.incard-ind-*` trong
 * group css của theme style đã thuộc trang 272 hospitality (mốc
 * `== incard-industry:start ==`) với hình học khác — dùng chung tên là hai trang
 * đè nhau mà CSS vẫn hợp lệ.
 */

/* Element `text` của Bricks chạy nội dung qua wpautop nên svg + span bị bọc
   trong một <p>; cái <p> đó làm vỡ layout flex bên ngoài. */
.brxe-text.incard-tvl-callout > p,
.brxe-text.incard-tvl-metric > p,
.brxe-text.incard-tvl-result > p,
.brxe-text.incard-tvl-pill > p,
.brxe-text.incard-tvl-num > p,
.brxe-text.incard-tvl-stepnum > p,
.brxe-text.incard-tvl-timeline > p { display: contents; }

.brxe-heading .incard-tvl-accent { color: var(--on-ink-accent); white-space: nowrap; }

/* Hero: ảnh minh hoạ có nền trắng cứng trong file, nên đặt trong một thẻ trắng
   thay vì để nguyên một khối trắng trên nền ink. */
.brxe-block.incard-tvl-figure {
  /* Bricks in `align-items: initial` cho global class incard-hero-grid, nên cột
     ảnh bị kéo cao bằng cột chữ và thẻ trắng thừa ra một khoảng dưới ảnh. */
  align-self: center;
  background: var(--brand-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-sm);
  box-shadow: var(--shadow-lg);
}

/* Thẻ chung của trang: hover nhạt để lưới phản hồi khi trỏ chuột */
.brxe-block.incard-tvl-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.brxe-block.incard-tvl-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: rgba(20, 128, 65, .28);
}

/* Hộp tóm tắt nhanh */
.brxe-block.incard-tvl-factbox { border-left: 4px solid var(--brand-green); box-shadow: var(--shadow-md); }

/* Dòng kết luận dưới lưới thẻ */
.brxe-text.incard-tvl-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--chip-green);
}
.brxe-text.incard-tvl-callout svg {
  width: 22px; height: 22px; flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-accent);
}

/* Panel gradient chứa các chỉ số tham chiếu */
.brxe-block.incard-tvl-gradient-panel {
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.brxe-text.incard-tvl-metric {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  /* Nền kính bằng ink, không phải bằng trắng: trắng 14% làm nền gradient sáng
     lên, chữ trắng 14px chỉ còn ~2.8:1. Ink 20% kéo tương phản lên ~6:1. */
  background: rgba(8, 45, 64, .20);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--on-ink-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
.brxe-text.incard-tvl-metric svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Viên thuốc kết quả, đặt giữa dưới mỗi lưới giai đoạn */
.brxe-text.incard-tvl-result {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background-image: var(--gradient);
  color: var(--on-ink-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  box-shadow: var(--shadow-md);
}
.brxe-text.incard-tvl-result svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Hai panel Chatbot / Voice Bot */
.brxe-block.incard-tvl-panel {
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
}
.brxe-block.incard-tvl-panel--green { background: var(--green-wash); border-color: rgba(20, 128, 65, .22); }
.brxe-block.incard-tvl-panel--blue { background: var(--blue-wash); border-color: rgba(18, 114, 188, .22); }
.brxe-div.incard-tvl-row {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--brand-surface);
  box-shadow: var(--shadow-sm);
}
p.brxe-text-basic.incard-tvl-note {
  padding: 10px var(--space-md);
  border-radius: var(--radius-md);
  background: var(--chip-blue);
  color: var(--text-link-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

/* Viên thuốc "chuyển cho người thật" */
.brxe-text.incard-tvl-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--brand-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--brand-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}
.brxe-text.incard-tvl-pill svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-link); }

/* Luồng trải nghiệm: ray dọc + thẻ so le */
.brxe-block.incard-tvl-flow { position: relative; }
.brxe-block.incard-tvl-flow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px;
  right: auto;
  width: 2px;
  height: auto;
  border: 0;
  background-image: linear-gradient(to bottom,
    rgba(20, 128, 65, 0) 0%, var(--brand-green) 7%,
    var(--brand-blue) 93%, rgba(18, 114, 188, 0) 100%);
}
.brxe-block.incard-tvl-flow-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-md);
  align-items: start;
}
.brxe-text.incard-tvl-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-image: var(--gradient);
  color: var(--on-ink-strong);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 6px var(--brand-bg);
}
@media (min-width: 992px) {
  .brxe-block.incard-tvl-flow::before { left: 50%; transform: translateX(-50%); }
  .brxe-block.incard-tvl-flow-row {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    column-gap: var(--space-lg);
    align-items: center;
  }
  .brxe-block.incard-tvl-flow-row > .incard-tvl-num { grid-column: 2; grid-row: 1; }
  /* thẻ là flex column bó theo nội dung, nên text-align một mình không đẩy chữ
     sang phải — phải kéo chính các con về cạnh phải */
  .brxe-block.incard-tvl-flow-row > .incard-tvl-flowcard {
    grid-column: 1; grid-row: 1;
    max-width: 30rem; margin-left: auto;
    text-align: right; align-items: flex-end;
  }
  .brxe-block.incard-tvl-flow-row--alt > .incard-tvl-flowcard {
    grid-column: 3;
    margin-left: 0; margin-right: auto;
    text-align: left; align-items: flex-start;
  }
}

/* Chỉ số hiệu quả trên nền gradient */
.brxe-block.incard-tvl-kpi {
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  background: rgba(8, 45, 64, .22);
  border: 1px solid rgba(255, 255, 255, .22);
  text-align: center;
}
.brxe-text.incard-tvl-chip-glass { background: rgba(255, 255, 255, .2); color: var(--on-ink-strong); }
p.brxe-text-basic.incard-tvl-kpi__value {
  color: var(--on-ink-strong);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.1;
}
p.brxe-text-basic.incard-tvl-kpi__label {
  /* --on-ink-body (.72 trắng) chỉ đạt ~2.8:1 trên nền gradient; nhãn 14px cần
     trắng đặc. */
  color: var(--on-ink-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* Badge "giai đoạn": .incard-badge-soft-* của theme style là rule một-class, bị
   `.brxe-text-basic { color: var(--text-copy) }` của incard.css (nạp sau) đè, nên
   viên badge ra chữ xám thay vì xanh. Nói lại ở lớp này. */
p.brxe-text-basic.incard-badge-soft-green { color: var(--text-accent-strong); }
p.brxe-text-basic.incard-badge-soft-blue { color: var(--text-link-strong); }

/* Triển khai: 5 bước nối bằng dấu nhọn */
.brxe-text.incard-tvl-timeline {
  color: var(--text-link-strong);
  gap: 8px;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}
.brxe-text.incard-tvl-timeline svg { width: 15px; height: 15px; flex: 0 0 auto; }
.brxe-text.incard-tvl-stepnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-image: var(--gradient);
  color: var(--on-ink-strong);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1;
}
.brxe-block.incard-tvl-step { position: relative; }
@media (min-width: 992px) {
  .brxe-block.incard-tvl-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 9px;
    height: 9px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--brand-blue);
    border-right: 2px solid var(--brand-blue);
  }
}

/* Chip nền ink cho band bảo mật */
.brxe-text.incard-tvl-chip-ink { background: var(--brand-ink); color: var(--on-ink-strong); }

/* FAQ: mỗi mục là một thẻ riêng */
.brxe-accordion.incard-tvl-faq .accordion-item {
  background: var(--brand-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.brxe-accordion.incard-tvl-faq .accordion-item + .accordion-item { margin-top: var(--space-sm); }
.brxe-accordion.incard-tvl-faq .accordion-title-wrapper { cursor: pointer; gap: var(--space-md); align-items: flex-start; }
.brxe-accordion.incard-tvl-faq .accordion-item.brx-open,
.brxe-accordion.incard-tvl-faq .accordion-item.active,
.brxe-accordion.incard-tvl-faq .accordion-item.open { border-color: rgba(20, 128, 65, .35); box-shadow: var(--shadow-md); }

/* CTA cuối trang */
.brxe-block.incard-tvl-cta {
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 767px) {
  /* Global class `incard-hero-grid` tự khai media query bằng selector một class,
     nhưng Bricks in phần setting của nó ra `.incard-hero-grid.brxe-block` (hai
     class) nên rule mobile bị chính nó đè: hero giữ hai cột ở 414px. Lặp lại ở
     đây với trọng số đủ, chỉ cho trang này. */
  .brxe-block.incard-tvl-hero-grid { grid-template-columns: 1fr; row-gap: var(--space-lg); }
  .brxe-block.incard-tvl-cta { padding: var(--space-xl) var(--space-md); }
  .brxe-block.incard-tvl-panel { padding: var(--space-md); }
  .brxe-block.incard-tvl-gradient-panel { padding: var(--space-lg) var(--space-md); }
}
/* === end incard trang lĩnh vực === */


/* STAT-SM STEP: font.stat 40px -> font.stat-sm 24px below 768px (3.4). This page keeps its
   base size on a class rule, so a media query wins here; pages whose base size sits in the
   element settings need the step on the element instead (Bricks emits those as #id rules). */
@media (max-width: 767px) {
  p.brxe-text-basic.incard-tvl-kpi__value { font-size: var(--text-h3); }
}