/* === incard industry pages: Bricks bridge === */
/*
 * Lớp riêng cho các trang /vi/linh-vuc/ dựng bằng Bricks. Tách khỏi
 * incard-solutions-bricks.css để lần sinh lại lớp giải pháp không xoá mất
 * những rule ở đây.
 *
 * Mọi rule đều khoanh trong `body.page-id-271` — class WordPress tự in cho
 * chính trang này. Hai lý do: (1) không khoanh thì chúng chạm luôn 13 trang giải
 * pháp đang dùng cùng bộ class incard-sol-*, tức là sửa những trang không ai yêu
 * cầu sửa; (2) một session khác đang viết lại lớp `incard-ind-*` cho
 * /vi/linh-vuc/travel-tourism/ (xem incard-linhvuc-bricks.css), nên mọi class
 * tự đặt đều có nguy cơ trùng tên khác nghĩa. Body class thì không.
 *
 * Mỗi rule ở đây là một chỗ hệ thiết kế chưa gặp: nó được viết cho các trang
 * giải pháp, nơi những thành phần này xuất hiện trong bố cục khác.
 */

/* 1. Chip "giai đoạn" trong header band.
      .incard-sol-chip nền #eaf5ff, đặt trên band tint #f2f6fa thì viên pill
      biến mất, chỉ còn chữ xanh lơ lửng. Cho nó nền trắng + hairline để đọc
      được trên cả band trắng và band tint. */
body.page-id-271 .incard-sol-section__header > p.incard-sol-chip {
  padding: 6px 14px;
  border: 1px solid rgba(8, 45, 64, 0.14);
  background: var(--incard-surface);
  box-shadow: 0 1px 2px rgba(8, 45, 64, 0.06);
}

/* 2. Tiêu đề band dài.
      Header bị chặn 720px, nên "Giai đoạn 3 – AI hỗ trợ học vụ & chăm sóc học
      viên" rớt một chữ xuống dòng thứ hai. Nới hộp header; lead bên trong vẫn
      tự giữ 640px của nó. Trọng số (0,3,0) > (0,2,0) của lớp giải pháp. */
body.page-id-271 .incard-sol-section > .incard-sol-section__header {
  max-width: 880px;
}

/* 3. Callout đứng ngay sau một lưới.
      incard.css chỉ đặt `margin: 0 auto` cho callout vì ở các trang giải pháp
      nó luôn là phần tử duy nhất trong band; ở đây nó là câu kết dưới lưới thẻ,
      nên cần khoảng nghỉ. */
body.page-id-271 .incard-sol-section > .incard-sol-channel-grid + p.incard-sol-callout,
body.page-id-271 .incard-sol-section > .incard-sol-flow-grid + p.incard-sol-callout {
  margin-top: 30px !important;
}

/* 4. Hàng chip khi nó là toàn bộ nội dung của band ("Phù hợp với mô hình nào?").
      Cỡ chip mặc định (13px) được tính cho việc đứng dưới một lưới; đứng một
      mình thì quá nhỏ so với chiều cao band. */
body.page-id-271 .incard-sol-chip-row--lg .incard-sol-chip {
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  box-shadow: 0 1px 2px rgba(8, 45, 64, 0.06);
}

/* 5. Accordion FAQ.
      ul.incard-sol-faq-list tự khai `margin-inline: auto`, nhưng reset của band
      (`.incard-sol-section > * { margin-inline: 0 !important }`) mạnh hơn nên
      danh sách dạt về lề trái dưới một tiêu đề căn giữa. Lớp giải pháp đã trả
      lại việc căn giữa cho từng loại con của band, chỉ thiếu accordion vì trên
      13 trang giải pháp nó không nằm trực tiếp trong band. */
body.page-id-271 .incard-sol-section > ul.brxe-accordion.incard-sol-faq-list {
  margin-inline: auto !important;
}

/* 6. Nút thứ hai trong card CTA gradient.
      Bản gốc (incard.biz/vi/industries/education) đặt hai nút cạnh nhau — một
      nút trắng đặc và một nút viền trắng. Hệ thiết kế chỉ có nút trắng đặc
      (.incard-sol-cta__button), nên biến thể viền được thêm ở đây.

      Trọng số phải thắng hai rule đứng trước:
        - global style của site: .bricks-button:not([class*="bricks-background-"])
          :not([class*="bricks-color-"]):not(.outline)              → (0,4,0)
        - lớp giải pháp: a.brxe-button.bricks-button
          .incard-sol-cta__button:not(.outline)                     → (0,4,1)
      Selector dưới đây là (0,6,1). */
body.page-id-271 a.brxe-button.bricks-button.incard-sol-cta__button.incard-sol-cta__button--ghost:not(.outline) {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: var(--incard-surface);
  box-shadow: none;
}

body.page-id-271 a.brxe-button.bricks-button.incard-sol-cta__button.incard-sol-cta__button--ghost:not(.outline):hover {
  border-color: var(--incard-surface);
  background: var(--incard-surface);
  color: var(--incard-blue);
}

/* Hai nút cạnh nhau trong cột hành động: giữ một hàng ở desktop, mỗi nút một
   hàng ở mobile. */
body.page-id-271 .incard-sol-cta__action .incard-sol-buttons {
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.page-id-271 .incard-sol-cta__action a.brxe-button.bricks-button:not(.outline) {
  white-space: nowrap;
}

@media (max-width: 860px) {
  body.page-id-271 .incard-sol-cta__action a.brxe-button.bricks-button:not(.outline) {
    width: 100%;
  }
}
/* === end incard industry pages === */