/* === incard solution pages: Bricks bridge (generated) === */
/*
 * Lets incard-child/assets/css/incard.css keep styling the solution pages now
 * that they are built out of native Bricks elements.
 * Generated by tools/solutions/build-bricks-shim.mjs from the live theme
 * stylesheet — edit the generator, not this block.
 */

/* 1. Buttons: the theme's own declarations, retargeted from the Gutenberg inner
      link onto the anchor Bricks renders. */
a.brxe-button.bricks-button.incard-sol-btn-primary:not(.outline),
a.brxe-button.bricks-button.incard-sol-cta__button:not(.outline) {
  box-sizing: border-box;
  min-height: 46px;
  padding: 13px 24px;
  border: 1px solid var(--incard-green);
  border-radius: 8px;
  background: var(--incard-green);
  color: var(--ag-on-green, #0c1922);
  font-size: var(--text-btn);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(22, 139, 71, 0.18);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

a.brxe-button.bricks-button.incard-sol-btn-primary:not(.outline):hover {
  border-color: var(--incard-green-hover);
  background: var(--incard-green-hover);
  color: var(--incard-surface);
}

a.brxe-button.bricks-button.incard-sol-btn-primary:not(.outline):active,
a.brxe-button.bricks-button.incard-sol-cta__button:not(.outline):active {
  transform: translateY(1px);
}

a.brxe-button.bricks-button.incard-sol-cta__button:not(.outline) {
  border-color: var(--incard-surface);
  background: var(--incard-surface);
  color: var(--incard-blue);
  box-shadow: 0 8px 20px rgba(8, 45, 64, 0.16);
}

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

@media (max-width: 600px) {
  .incard-sol-cta__action a.brxe-button.bricks-button:not(.outline),
  .incard-sol-hero__actions a.brxe-button.bricks-button:not(.outline) {
    width: 100%;
  }
}

/* 2. Width caps and centring the theme asks for, restored above the reset that
      was written for Gutenberg's inner container. */
.incard-sol-hero > .incard-sol-section__header,
.incard-sol-section > .incard-sol-section__header,
.incard-sol-cta > .incard-sol-section__header {
  max-width: 720px;
  margin: 0 auto 40px !important;
}

.incard-sol-hero > .incard-sol-section__lead,
.incard-sol-section > .incard-sol-section__lead,
.incard-sol-cta > .incard-sol-section__lead {
  max-width: 640px;
  margin: 12px auto 0 !important;
}

.incard-sol-hero > .incard-sol-hero__title,
.incard-sol-section > .incard-sol-hero__title,
.incard-sol-cta > .incard-sol-hero__title {
  max-width: 900px;
  margin: 0 auto !important;
}

.incard-sol-hero > .incard-sol-hero__lead,
.incard-sol-section > .incard-sol-hero__lead,
.incard-sol-cta > .incard-sol-hero__lead {
  max-width: 720px;
  margin: 16px auto 0 !important;
}

.incard-sol-hero > .incard-sol-hero__cards,
.incard-sol-section > .incard-sol-hero__cards,
.incard-sol-cta > .incard-sol-hero__cards {
  margin: 40px 0 0 !important;
}

.incard-sol-hero > .incard-sol-hero__panel,
.incard-sol-section > .incard-sol-hero__panel,
.incard-sol-cta > .incard-sol-hero__panel {
  margin: 20px 0 0 !important;
}

.incard-sol-hero > .incard-sol-hero__eyebrow,
.incard-sol-section > .incard-sol-hero__eyebrow,
.incard-sol-cta > .incard-sol-hero__eyebrow {
  margin: 0 0 12px !important;
}

.incard-sol-hero > .incard-sol-role-grid,
.incard-sol-section > .incard-sol-role-grid,
.incard-sol-cta > .incard-sol-role-grid {
  margin: 0 !important;
}

.incard-sol-hero > .incard-sol-step-row,
.incard-sol-section > .incard-sol-step-row,
.incard-sol-cta > .incard-sol-step-row {
  margin: 18px 0 0 !important;
}

.incard-sol-hero > .incard-sol-cta__layout,
.incard-sol-section > .incard-sol-cta__layout,
.incard-sol-cta > .incard-sol-cta__layout {
  margin: 0 !important;
}

.incard-sol-hero > .incard-sol-stat-grid,
.incard-sol-section > .incard-sol-stat-grid,
.incard-sol-cta > .incard-sol-stat-grid {
  margin: 38px 0 0 !important;
}

.incard-sol-hero > .incard-sol-callout,
.incard-sol-section > .incard-sol-callout,
.incard-sol-cta > .incard-sol-callout {
  max-width: 900px;
  margin: 0 auto !important;
}

.incard-sol-hero > .incard-sol-step-row--two,
.incard-sol-section > .incard-sol-step-row--two,
.incard-sol-cta > .incard-sol-step-row--two {
  max-width: 900px;
  margin-inline: auto !important;
}

.incard-sol-hero > .incard-sol-faq__actions,
.incard-sol-section > .incard-sol-faq__actions,
.incard-sol-cta > .incard-sol-faq__actions {
  margin: 26px 0 0 !important;
}

.incard-sol-hero > .incard-sol-hero__eyebrow--center,
.incard-sol-section > .incard-sol-hero__eyebrow--center,
.incard-sol-cta > .incard-sol-hero__eyebrow--center {
  margin-inline: auto !important;
}

.incard-sol-hero > .incard-sol-hero__figure,
.incard-sol-section > .incard-sol-hero__figure,
.incard-sol-cta > .incard-sol-hero__figure {
  max-width: 860px;
  margin: 34px auto 0 !important;
}

.incard-sol-hero > .incard-sol-result-grid,
.incard-sol-section > .incard-sol-result-grid,
.incard-sol-cta > .incard-sol-result-grid {
  margin: 0 !important;
}

.incard-sol-hero > .incard-sol-feature,
.incard-sol-section > .incard-sol-feature,
.incard-sol-cta > .incard-sol-feature {
  margin: 0 0 22px !important;
}

.incard-sol-hero > .incard-sol-footnote,
.incard-sol-section > .incard-sol-footnote,
.incard-sol-cta > .incard-sol-footnote {
  max-width: 760px;
  margin: 24px auto 0 !important;
}

.incard-sol-hero > .incard-sol-examples,
.incard-sol-section > .incard-sol-examples,
.incard-sol-cta > .incard-sol-examples {
  max-width: 720px;
  margin: 26px auto 0 !important;
}

.incard-sol-hero > .incard-sol-callout--prose,
.incard-sol-section > .incard-sol-callout--prose,
.incard-sol-cta > .incard-sol-callout--prose {
  max-width: 860px;
}

/* 3. Bricks' own .bricks-button adds half a pixel of letter-spacing that the
      Gutenberg button never had. The type scale does not ask for it. */
a.brxe-button[class*="incard-sol-"] {
  letter-spacing: normal;
}

/* 4. Button rows: what Gutenberg's .wp-block-buttons used to provide. A row that
      sits directly in a band belongs to a centred composition — the hero, the
      FAQ close, the stub sections all centre their copy — so it centres too.
      Rows nested inside a card or the CTA grid keep their own alignment. */
.incard-sol-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.incard-sol-hero > .incard-sol-buttons,
.incard-sol-section > .incard-sol-buttons {
  justify-content: center;
}

/* 5. Bricks marks a figure-mode image with .tag, whose base rule makes it
      inline-block at width:auto. Every image frame in this design is a block
      that fills its column. */
figure.brxe-image[class*="incard-sol-"] {
  display: block;
  width: 100%;
}

/* 6. Paragraph margins the global Bricks style zeroes, restated at the weight it
      takes to win them back. */
p.incard-sol-section__header {
  margin: 0 auto 40px;
}

p.incard-sol-section__lead {
  margin: 12px auto 0;
}

p.incard-sol-card__copy {
  margin: 10px 0 0;
}

p.incard-sol-card__link {
  margin: auto 0 0;
}

p.incard-sol-check-list {
  margin: 16px 0 0;
}

p.incard-sol-step-list {
  margin: 16px 0 0;
}

p.incard-sol-hero__title {
  margin: 0 auto;
}

p.incard-sol-hero__lead {
  margin: 16px auto 0;
}

p.incard-sol-hero__cards {
  margin: 40px 0 0;
}

p.incard-sol-hero__card-image {
  margin: 0;
}

p.incard-sol-hero__panel {
  margin: 20px 0 0;
}

p.incard-sol-hero__eyebrow {
  margin: 0 0 12px;
}

p.incard-sol-hero__panel-text {
  margin: 0;
}

p.incard-sol-hero__panel-link {
  margin: auto 0 0;
}

p.incard-sol-hero__panel-image {
  margin: 0;
}

p.incard-sol-role-grid {
  margin: 0;
}

p.incard-sol-stage__image {
  margin: 0;
}

p.incard-sol-step-row {
  margin: 18px 0 0;
}

p.incard-sol-step__text {
  margin: 0;
}

p.incard-sol-cta__layout {
  margin: 0;
}

p.incard-sol-cta__lead {
  margin: 10px 0 0;
}

p.incard-sol-stat-grid {
  margin: 38px 0 0;
}

p.incard-sol-stat__value {
  margin: 0;
}

p.incard-sol-stat__label {
  margin: 10px 0 0;
}

p.incard-sol-stat__note {
  margin: 4px 0 0;
}

p.incard-sol-callout {
  margin: 0 auto !important;
}

p.incard-sol-chip {
  margin: 0;
}

p.incard-sol-case-card__tags {
  margin: 0 0 12px;
}

p.incard-sol-tag {
  margin: 0;
}

p.incard-sol-faq__actions {
  margin: 26px 0 0;
}

p.incard-sol-hero__figure {
  margin: 34px auto 0 !important;
}

p.incard-sol-hero__figure-image {
  margin: 0;
}

p.incard-sol-result-grid {
  margin: 0;
}

p.incard-sol-result__value {
  margin: 0;
}

p.incard-sol-result__label {
  margin: 8px 0 0;
}

p.incard-sol-feature {
  margin: 0 0 22px;
}

p.incard-sol-feature__image {
  margin: 0;
}

p.incard-sol-footnote {
  margin: 24px auto 0 !important;
}

p.incard-sol-value-note {
  margin: 18px 0 0;
}

p.incard-sol-examples {
  margin: 26px auto 0 !important;
}

p.incard-sol-examples__label {
  margin: 0 0 12px;
}

p.incard-sol-example-list {
  margin: 0;
}

p.incard-sol-solo {
  margin: 0 auto !important;
}

p.incard-sol-section__lead--center {
  margin: 0 auto 30px !important;
}

p.incard-sol-photo-grid {
  margin: 0;
}

p.incard-sol-photo__image {
  margin: 0;
}

p.incard-sol-card__image {
  margin: 0 0 18px;
}

/* 7. Card titles: the same treatment one level down, so a step card under a
      subheading can be an h4 without losing its type. */
.incard-sol-role-card h4,
.incard-sol-channel-card h4,
.incard-sol-rollout-card h4,
.incard-sol-resource-card h4 {
  margin: 0;
  color: var(--incard-deep-navy);
  font-weight: 700;
}

.incard-sol-panel h4 {
  margin: 0;
  color: var(--incard-deep-navy);
  font-weight: 700;
}

.incard-sol-panel--solution h4 {
  color: var(--incard-green);
}

.incard-sol-resource-card h4 {
}

.incard-sol-flow-card h4,
.incard-sol-phase-card h4 {
  margin: 10px 0 0;
  color: var(--incard-deep-navy);
  font-weight: 700;
}

.incard-sol-industry-card h4,
.incard-sol-case-card h4 {
  margin: 0;
  color: var(--incard-deep-navy);
  font-weight: 700;
}

.incard-sol-feature__copy h4 {
  margin: 0;
  color: var(--incard-deep-navy);
  font-weight: 700;
}

.incard-sol-flow-grid--auto .incard-sol-flow-card h4 {
  margin-top: 0;
}

.incard-sol-solo h4 {
  margin: 0;
  color: var(--incard-deep-navy);
  font-weight: 700;
}

/* 8. The image elements are lazy-loaded by Bricks, which sizes the placeholder
      from the width/height attributes. Let the frame's own aspect rules win. */
figure.brxe-image[class*="incard-sol-"] > img {
  max-width: 100%;
}

/* ------------------------------------------------------------------------
   Part B — components the Solutions landing page needs and the system did
   not have yet. Built from https://www.incard.biz/vi/solutions, expressed in
   the existing tokens: no raw hex, no invented spacing.
   ------------------------------------------------------------------------ */

/* A left-aligned subheading inside a band: "Cách vận hành (4 bước)". */
.incard-sol-subhead {
  max-width: none;
  margin: 40px 0 18px;
  color: var(--incard-deep-navy);
  font-size: var(--text-lead);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: left;
}

/* "Phù hợp cho: …" — a quiet qualifier under the band lead. */
p.incard-sol-fit-note {
  max-width: 760px;
  margin: 0 auto 30px;
  color: var(--incard-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
}

/* The band reset pins inline margins with !important, so centring this one has
   to say so too. */
.incard-sol-section > p.incard-sol-fit-note {
  margin-inline: auto !important;
}

p.incard-sol-fit-note strong {
  color: var(--incard-deep-navy);
  font-weight: 600;
}

/* The Trước / Trong / Sau row. The reference tints the third panel purple,
   which is not in the palette, so it takes the deep navy accent. */
.incard-sol-panel-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin: 0;
}

.incard-sol-panel-row > * {
  margin-block: 0;
}

.incard-sol-panel-row .incard-sol-panel {
  border: 1px solid var(--sol-line);
  border-left-width: 4px;
  background: var(--incard-surface);
  box-shadow: var(--sol-shadow-sm);
}

/* The accent has to outrank the border shorthand above it, and the title colour
   has to outrank the theme's own .incard-sol-panel h3 rule. */
.incard-sol-panel-row .incard-sol-panel--pre {
  border-left-color: var(--incard-blue);
}

.incard-sol-panel-row .incard-sol-panel--during {
  border-left-color: var(--incard-green);
}

.incard-sol-panel-row .incard-sol-panel--post {
  border-left-color: var(--incard-deep-navy);
}

.incard-sol-panel-row .incard-sol-panel--pre h3,
.incard-sol-panel-row .incard-sol-panel--pre h4 {
  color: var(--incard-blue);
}

.incard-sol-panel-row .incard-sol-panel--during h3,
.incard-sol-panel-row .incard-sol-panel--during h4 {
  color: var(--incard-green);
}

.incard-sol-panel-row .incard-sol-panel--post h3,
.incard-sol-panel-row .incard-sol-panel--post h4 {
  color: var(--incard-deep-navy);
}

/* "KPI tham chiếu": a tinted panel of metric tiles. */
.incard-sol-kpi {
  margin: 34px 0 0;
  padding: 22px 24px 24px;
  border: 1px solid rgba(22, 139, 71, 0.18);
  border-radius: var(--sol-radius);
  background: var(--sol-green-wash);
}

p.incard-sol-kpi__title {
  margin: 0 0 16px;
  color: var(--incard-deep-navy);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
}

.incard-sol-kpi__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin: 0;
}

.incard-sol-kpi__grid > * {
  margin-block: 0;
}

p.incard-sol-kpi__item {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--incard-surface);
  box-shadow: var(--sol-shadow-sm);
  color: var(--incard-green);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.incard-sol-kpi p.incard-sol-footnote {
  margin: 14px 0 0;
  text-align: center;
}

/* Channel chips, laid out as a centred row. */
.incard-sol-chip-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
}

.incard-sol-chip-row > * {
  margin-block: 0;
}

/* On a tinted band the chip's own blue wash all but disappears, so a channel
   chip sits on surface with a hairline instead. */
.incard-sol-chip-row .incard-sol-chip {
  padding: 7px 14px;
  border: 1px solid var(--sol-line);
  background: var(--incard-surface);
  font-size: var(--text-xs);
}

/* The quieter of the two buttons in each solution band. */
a.brxe-button.bricks-button.incard-sol-btn-secondary:not(.outline) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 24px;
  border: 1px solid var(--sol-line);
  border-radius: 8px;
  background: var(--incard-surface);
  color: var(--incard-deep-navy);
  font-size: var(--text-btn);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--sol-shadow-sm);
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

a.brxe-button.bricks-button.incard-sol-btn-secondary:not(.outline):hover {
  border-color: var(--incard-green);
  color: var(--incard-green);
}

a.brxe-button.bricks-button.incard-sol-btn-secondary:not(.outline):active {
  transform: translateY(1px);
}

/* The gradient card, wherever it is used: the same text colours the closing band
   already gets. */
.incard-sol-cta__layout h2 {
  max-width: 640px;
  margin: 0;
  color: var(--incard-surface);
  font-weight: 700;
}

/* FAQ: Bricks renders the accordion as a <ul> of <li class="accordion-item">,
   each holding a title wrapper and a sibling content wrapper. The card is the
   list item — styling the title wrapper instead left every answer outside it. */
ul.incard-sol-faq-list {
  max-width: 860px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.incard-sol-faq-list .accordion-item {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--sol-line);
  border-radius: 12px;
  background: var(--incard-surface);
  box-shadow: var(--sol-shadow-sm);
  list-style: none;
}

.incard-sol-faq-list .accordion-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
}

/* A chevron of its own: no icon was set on the element, and the open state is
   already published on the button as aria-expanded. */
.incard-sol-faq-list .accordion-title-wrapper::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--incard-green);
  border-bottom: 2px solid var(--incard-green);
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.incard-sol-faq-list .accordion-title-wrapper[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.incard-sol-faq-list .accordion-title .title {
  margin: 0;
  color: var(--incard-deep-navy);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.incard-sol-faq-list .accordion-content-wrapper {
  padding: 0 20px 18px;
  border-left: 0;
}

.incard-sol-faq-list .accordion-content-wrapper p {
  margin: 0;
  color: var(--incard-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}
/* === end incard solution pages === */


/* Non-interactive "coming soon" badge. A Bricks button without a link renders as a bare
   <span> and never picks up the button skin, which left blue text on the blue end of the CTA
   gradient at 1.01:1. White text + white hairline reads on both gradient surfaces. */
p.brxe-text-basic.incard-sol-soon {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}


/* IMAGE-AS-ELEMENT: the Bricks image element IS the <img> and carries the class itself, so the
   theme rules written for a Gutenberg wrapper (.incard-sol-hero__figure-image img { width:100% })
   never match, and a nearby max-width:none leaves the image at natural size (measured 1280px
   inside an 860px figure). Constrain the element itself. */
img.incard-sol-hero__figure-image,
img.incard-sol-feature__image,
img.incard-sol-hero__panel-image,
img.incard-sol-stage__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
   MOBILE-APP POLISH — visual defects found by screenshotting the built page.
   Scoped to the solutions system, so it applies to the sibling pages too where
   they use the same components.
   ========================================================================== */

/* 1. Cards in a grid were sizing to their own content, so a row of four ended up
      with four different heights (worst on "Ai nên dùng giải pháp này?", where one
      title wraps to two lines). Stretch the tracks and let the card fill one. */
.incard-sol-channel-grid,
.incard-sol-flow-grid,
.incard-sol-resource-grid,
.incard-sol-step-row {
	align-items: stretch;
}

.incard-sol-channel-grid > .incard-sol-channel-card,
.incard-sol-flow-grid > .incard-sol-flow-card,
.incard-sol-resource-grid > .incard-sol-resource-card,
.incard-sol-step-row > .incard-sol-step {
	height: 100%;
	margin: 0;
}

/* 2. Card titles inherited the h3 step (24px) while the card body is 14px, so the
      title dominated a 190–290px card. 20px is the card-title size the rest of the
      set already renders at, and it is in the approved scale. */
.incard-sol-channel-card h3,
.incard-sol-flow-card h3,
.incard-sol-resource-card h3 {
	font-size: var(--text-h4);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* 3. The quick-nav was borrowing .incard-sol-examples, which paints a dashed
      "search examples" box and left the six links wrapping 2/3/1 inside it. */
.incard-sol-quicknav {
	max-width: 900px;
	margin: 28px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--sol-line);
	text-align: center;
}

.incard-sol-quicknav h3 {
	margin: 0 0 14px;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.incard-sol-quicknav__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.incard-sol-quicknav__row .bricks-button {
	padding: 9px 16px;
	font-size: var(--text-sm);
}

/* 4. The FAQ accordion sat at 860px hard against the left edge under a centred
      heading. Centre it. */
.incard-sol-faq .incard-sol-faq-list {
	margin-inline: auto;
}

/* 5. Section heading blocks: the small label above the h2 read as loose text
      rather than a badge. */
.incard-sol-capability .incard-sol-section__header .incard-sol-chip {
	display: inline-flex;
	align-items: center;
	margin: 0 auto 10px;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--chip-blue);
	color: var(--brand-blue-hover);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* 6. In a text|visual pair the copy was centred against a much taller image,
      which pushed the first line far down the column. Top-align both. */
.incard-sol-feature {
	align-items: start !important;
}

/* 7. Visual heights were driven by the asset's own ratio: 16:9 photos came out 371px tall
      while 1:1 illustrations came out 660px, which left the copy column half empty beside
      them. Cap the height and letterbox instead of cropping, so every pair reads the same. */
img.incard-sol-feature__image {
	max-height: 420px;
	object-fit: contain;
	/* the tint belongs to the wrapper look; on a letterboxed illustration it showed as
	   two blue bars, so let the card surface show through instead */
	background: transparent;
}

/* 8. Five items in a three-column grid left a visible hole in the second row. Flex-wrap
      centres the short row instead, which reads as deliberate. */
.incard-sol-outcomes .incard-sol-step-row,
.incard-sol-feature__copy .incard-sol-channel-grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
}

.incard-sol-outcomes .incard-sol-step-row > .incard-sol-step {
	flex: 0 1 calc((100% - 32px) / 3);
	min-width: 240px;
}

.incard-sol-feature__copy .incard-sol-channel-grid > .incard-sol-channel-card {
	flex: 1 1 170px;
	min-width: 0;
}

/* 9. The quick-nav sat left of centre because its 900px cap centred inside a full-width
      section. Let the rule span the content width and centre only the row. */
.incard-sol-quicknav {
	max-width: none;
}

/* ==========================================================================
   CASE STUDIES — components the listing page needs on top of the incard-sol set.
   ========================================================================== */

/* Two chips above each case title: industry, then the product it used. */
.incard-sol-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.incard-sol-chip-row > p.incard-sol-chip {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--chip-blue);
	color: var(--brand-blue-hover);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* the product chip reads as the secondary of the pair */
.incard-sol-chip-row > p.incard-sol-chip--product {
	background: var(--chip-green);
	color: var(--brand-green-hover);
}

/* "Kết quả Chính" / "Thách thức" — sub-labels inside a card. Deliberately not h4:
   3.4 has no fourth heading tier, so these are labels, not headings. */
p.incard-sol-caselabel {
	margin: 26px 0 12px;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The challenge body arrives as rich text (a paragraph plus a bullet list). */
.incard-sol-caseprose p {
	margin: 0 0 10px;
	color: var(--text-copy);
	font-size: var(--text-sm);
	line-height: 1.65;
}

.incard-sol-caseprose ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.incard-sol-caseprose li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 20px;
	color: var(--text-copy);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.incard-sol-caseprose li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-green);
}

.incard-sol-caseprose li:last-child,
.incard-sol-caseprose p:last-child {
	margin-bottom: 0;
}

/* Four metrics per case fill the existing four-column result grid exactly; inside a
   card column they need to sit tighter than the full-width version. */
.incard-sol-feature__copy .incard-sol-result-grid {
	gap: 12px;
}

.incard-sol-feature__copy .incard-sol-result {
	padding: 16px 14px 18px;
}

.incard-sol-feature__copy .incard-sol-result__value {
	font-size: var(--text-h3);
}

.incard-sol-feature__copy .incard-sol-result__label {
	font-size: var(--text-xs);
}

@media (max-width: 991px) {
	.incard-sol-feature__copy .incard-sol-result-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* A case card carries a lot of copy, so give the pair more room than the default
   feature card and let the image sit at the top of its column. */
.incard-sol-case .incard-sol-feature {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	padding: 30px;
}

/* --b flips the visual with order:-1, so without this the image would land in the wider
   track and the copy in the narrow one — the columns swapped width with the side. */
.incard-sol-case .incard-sol-feature--b {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

/* Sticky-top pinned the image to the top of a much taller copy column, so all the slack
   collected underneath it. Centring spreads it and reads as intentional. Cropping to fill
   was the other option, but these are laptop mockups and wide photos that crop badly. */
.incard-sol-case .incard-sol-feature__visual {
	align-self: center;
}

@media (max-width: 860px) {
	.incard-sol-case .incard-sol-feature {
		grid-template-columns: 1fr;
	}

	.incard-sol-case .incard-sol-feature__visual {
		align-self: stretch;
	}
}

/* headings that arrived inside the challenge HTML, demoted to labels */
.incard-sol-caseprose p.incard-sol-caselabel--inline {
	margin: 20px 0 10px;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.incard-sol-caseprose p.incard-sol-caselabel--inline:first-child {
	margin-top: 0;
}

/* the prose block follows the metrics grid directly; its first label zeroes its own top
   margin, so the gap has to live on the block itself */
.incard-sol-feature__copy .incard-sol-caseprose {
	margin-top: 22px;
}

/* The two closing buttons were rendering flush against each other. */
.incard-sol-cta__action {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   CASE STUDY DETAIL PAGES
   ========================================================================== */

/* hero: copy beside the featured image, on the dark gradient */
.incard-sol-casehero {
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
	margin: 0;
}

.incard-sol-casehero__copy,
.incard-sol-casehero__visual {
	min-width: 0;
}

.incard-sol-casehero .incard-sol-casehero__title {
	max-width: none;
	margin: 14px 0 0;
	text-align: left;
}

.incard-sol-casehero .incard-sol-casehero__lead {
	max-width: 60ch;
	margin: 14px 0 0;
	text-align: left;
}

p.incard-sol-casehero__meta {
	margin: 18px 0 0;
	color: var(--on-ink-body);
	font-size: var(--text-sm);
	font-weight: 600;
}

p.incard-sol-backlink {
	margin: 0 0 16px;
	font-size: var(--text-sm);
	font-weight: 600;
}

p.incard-sol-backlink a {
	color: var(--on-ink-accent);
	text-decoration: none;
}

p.incard-sol-backlink a:hover {
	text-decoration: underline;
}

/* the hero chips sit on a dark surface, so keep the light pill but centre nothing */
.incard-sol-casehero .incard-sol-chip-row {
	justify-content: flex-start;
	margin: 0;
}

img.incard-sol-casehero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 440px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 48px rgba(8, 45, 64, 0.28);
}

/* journey: a step label column beside the body */
.incard-sol-casestep {
	display: grid !important;
	grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	margin: 0 0 22px;
	padding: 26px 28px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: var(--incard-surface);
}

.incard-sol-casestep:last-child {
	margin-bottom: 0;
}

.incard-sol-casestep__side,
.incard-sol-casestep__body {
	min-width: 0;
}

p.incard-sol-stepnum {
	margin: 0;
	color: var(--brand-green-hover);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.incard-sol-casestep .incard-sol-casestep__title {
	margin: 8px 0 0;
	color: var(--text-primary);
}

.incard-sol-casestep__body .incard-sol-caseprose {
	margin-top: 0;
}

/* about the client */
.incard-sol-clientcard {
	margin: 0;
	padding: 28px 30px 30px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: var(--incard-surface);
}

.incard-sol-clientcard .incard-sol-clientcard__name {
	margin: 0 0 20px;
	color: var(--text-primary);
}

.incard-sol-clientgrid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

.incard-sol-clientfield {
	min-width: 0;
}

p.incard-sol-clientfield__label {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

p.incard-sol-clientfield__value {
	margin: 6px 0 0;
	color: var(--text-primary);
	font-size: var(--text-body);
	font-weight: 600;
}

@media (max-width: 860px) {
	.incard-sol-casehero,
	.incard-sol-casestep {
		grid-template-columns: 1fr;
	}

	.incard-sol-clientgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 478px) {
	.incard-sol-clientgrid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   PRICING PAGE — the mock is table-heavy, so tables get real styling and a
   horizontal scroll container instead of being squeezed on narrow screens.
   ========================================================================== */

.incard-pr-tablewrap {
	overflow-x: auto;
	margin: 0 0 8px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius);
	background: var(--incard-surface);
	-webkit-overflow-scrolling: touch;
}

table.incard-pr-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

table.incard-pr-table th,
table.incard-pr-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--sol-line);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}

table.incard-pr-table thead th {
	position: sticky;
	top: 0;
	background: var(--sol-band);
	color: var(--text-primary);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

table.incard-pr-table tbody tr:last-child th,
table.incard-pr-table tbody tr:last-child td {
	border-bottom: 0;
}

table.incard-pr-table td {
	color: var(--text-copy);
}

table.incard-pr-table td.incard-pr-table__rowhead {
	color: var(--text-primary);
	font-weight: 600;
}

table.incard-pr-table tbody tr:nth-child(even) {
	background: rgba(8, 45, 64, 0.02);
}

/* real sub-sections inside a product block */
.incard-pr-product .incard-pr-subhead,
.incard-pr-addon .incard-pr-subhead {
	margin: 26px 0 10px;
	color: var(--text-primary);
	font-size: var(--text-h4);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* the product blocks carry a lot of stacked content; give the parts room to breathe */
.incard-pr-product > p,
.incard-pr-product > .brxe-text,
.incard-pr-fees > p,
.incard-pr-fees > .brxe-text {
	margin-block: 0 14px;
}

.incard-pr-product > p.incard-sol-caselabel {
	margin: 26px 0 10px;
}

.incard-pr-addon .incard-sol-clientcard p.incard-sol-caselabel {
	margin: 18px 0 6px;
}

/* the "Phổ biến" flag that the mock shows on its recommended plan */
span.incard-pr-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: var(--chip-green);
	color: var(--brand-green-hover);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* numbered process steps and card terms inside a pricing product block */
p.incard-pr-stepnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 0 12px;
	border-radius: 50%;
	background-image: var(--gradient);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1;
}

p.incard-pr-cardtitle {
	margin: 0 0 8px;
	color: var(--text-primary);
	font-size: var(--text-h4);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.incard-sol-channel-grid.incard-pr-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* five cards in a three-column grid leave a hole in the second row; flex-wrap centres the
   short row instead (same treatment as the Inka block on the mobile-app page) */
.incard-sol-channel-grid.incard-sol-grid-wrap {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
}

.incard-sol-channel-grid.incard-sol-grid-wrap > .incard-sol-channel-card {
	/* a third of the row, and no growing: that keeps 3+2 with both rows the same card width,
	   and the short row is centred by justify-content */
	flex: 0 1 calc((100% - 40px) / 3);
	min-width: 260px;
	/* height:100% inherited from the grid rule kills flex stretch, so heights went ragged */
	height: auto;
	align-self: stretch;
}