/* ===== ROLLBACK: STEP SLIDER 2x4 (7 card + 1 CTA cố định) ===== */
.tcp8step{
  --tcp8-card-w: 280px;
  --tcp8-card-h: 420px;
  --tcp8-gap: 30px;
  position: relative;
  width: calc(4 * var(--tcp8-card-w) + 3 * var(--tcp8-gap));
  margin-inline: auto;
}

/* Lưới 8 slot */
.tcp8step__grid{
  display:grid;
  grid-template-columns: repeat(4, var(--tcp8-card-w));
  grid-template-rows: repeat(2, var(--tcp8-card-h));
  gap: var(--tcp8-gap);
  justify-content:center;
  align-items:center;
}
.tcp8step__slot,
.tcp8step__cta{
  width: var(--tcp8-card-w);
  height: var(--tcp8-card-h);
}

/* Vị trí slot; CTA luôn hàng 2 cột 4 */
.tcp8step__slot[data-slot="1"]{ grid-area: 1 / 1; }
.tcp8step__slot[data-slot="2"]{ grid-area: 1 / 2; }
.tcp8step__slot[data-slot="3"]{ grid-area: 1 / 3; }
.tcp8step__slot[data-slot="4"]{ grid-area: 1 / 4; }
.tcp8step__slot[data-slot="5"]{ grid-area: 2 / 1; }
.tcp8step__slot[data-slot="6"]{ grid-area: 2 / 2; }
.tcp8step__slot[data-slot="7"]{ grid-area: 2 / 3; }
.tcp8step__cta{ grid-area: 2 / 4; }

/* ===== Nút prev/next (bản ổn định) ===== */
.tcp8step__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.16);
  cursor:pointer; font-size:22px; line-height:1; text-align:center;
  z-index:5;
  opacity:.45; transition:opacity .2s ease, box-shadow .2s ease;
}
.tcp8step__nav:hover{ opacity:1; box-shadow:0 14px 34px rgba(0,0,0,.20); }
.tcp8step__prev{ left:-56px; }
.tcp8step__next{ right:-56px; }

/* Con trỏ tay khi hover card (trừ CTA) */
.tcp8step .tcp8-card{ cursor:pointer; }

/* ===== Skin card/CTA (y như grid) ===== */
.tcp8step .tcp8-card{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  width: var(--tcp8-card-w); height: var(--tcp8-card-h);
  border-radius:15px; overflow:hidden; background:#03036D; color:#fff;
  box-shadow:0 10px 24px rgba(3,3,109,.18);
}
.tcp8step .tcp8-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: var(--tcp8-bg);
  background-position:150px 100px; background-repeat:no-repeat; background-size:contain;
}
.tcp8step .tcp8-card__top{
  position:relative; z-index:1; padding:20px; min-height:150px;
  display:flex; flex-direction:column; gap:10px;
}
.tcp8step .tcp8-name{     margin:0; font:800 18px/1.33 "Inter",sans-serif; color:#fff; }
.tcp8step .tcp8-position{            font:400 14px/1.71 "Inter",sans-serif; color:#fff; }
.tcp8step .tcp8-company{             font:700 16px/1.5  "Inter",sans-serif; color:#fff; }

.tcp8step .tcp8-card__image{
  position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-end;
}
.tcp8step .tcp8-card__image img{
  width:100%; max-width:none; height:250px; object-fit:cover; object-position:center center; display:block;
  filter:brightness(100%) contrast(100%) saturate(100%) blur(0) hue-rotate(0deg);
}

/* CTA kiểu khung trắng + panel trong */
.tcp8step .tcp8-card--cta{
  background:transparent; border-radius:20px; padding:12px; box-shadow:0 16px 50px rgba(31,45,97,.18);
}
.tcp8step .tcp8-cta{
  height:100%; border-radius:16px; background:#EEF2FF;
  display:flex; flex-direction:column; justify-content:center; padding:28px; color:#0a0a2a; text-align:center;
}
.tcp8step .tcp8-cta__badge{ display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(45,39,147,.1); font:700 13px/1 "Inter",sans-serif; margin-bottom:10px; }
.tcp8step .tcp8-cta__title{ margin:0 0 8px; font:900 28px/1.2 "Inter",sans-serif; }
.tcp8step .tcp8-cta__desc{ margin:0 0 14px; opacity:.9; }
.tcp8step .tcp8-cta__btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:800;
  padding:12px 18px; border-radius:999px; background:linear-gradient(90deg,#3420B3,#5E1BE2); color:#fff;
  box-shadow:0 10px 26px rgba(52,32,179,.28);
}

/* ===== Responsive (scale cụm để khỏi vỡ hàng) ===== */
@media (max-width:1240px){ .tcp8step{ transform: scale(.95); transform-origin: top center; } }
@media (max-width:1100px){ .tcp8step{ transform: scale(.90); } }
@media (max-width:980px){  .tcp8step{ transform: scale(.86); } }
@media (max-width:880px){  .tcp8step{ transform: scale(.82); } }

/* Mobile: card lớn hơn một chút (tuỳ chọn) */
@media (max-width:640px){
  .tcp8step{ --tcp8-card-w: 300px; --tcp8-gap: 20px; }
}


/* ===== Fix nav: luôn là hình tròn, mũi tên căn giữa ===== */
.tcp8step__nav{
  /* ép bỏ mọi padding mặc định của theme/button */
  padding: 0 !important;
  box-sizing: content-box !important;

  /* kích thước và tỷ lệ 1:1 để không bao giờ méo */
  width: 44px !important;
  height: 44px !important;
  aspect-ratio: 1 / 1;

  /* layout & style */
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.06);
  cursor: pointer;
  z-index: 10;

  /* tránh ảnh hưởng bởi font/line-height của theme */
  font-size: 0 !important;
  line-height: 1 !important;

  /* mờ mặc định */
  opacity: .15;
  transition: opacity .2s, box-shadow .2s, transform .2s;
}

/* mũi tên vẽ bằng viền, luôn ở chính giữa */
.tcp8step__nav::before{
  content: "";
  display: block;
  width: 12px; height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;         /* vẽ 2 cạnh tạo chevron */
  transform: rotate(135deg);         /* ← */
}

.tcp8step__next::before{ transform: rotate(-45deg); } /* → */

/* vị trí hai nút (thò nhẹ ra ngoài) */
.tcp8step__prev{ left: -22px; }
.tcp8step__next{ right: -22px; }

/* hover/hiện rõ (desktop) */
.tcp8step:hover .tcp8step__nav,
.tcp8step__nav:hover,
.tcp8step__nav:focus-visible{
  opacity: 1;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
  background-color: #03036d;
  border-color: #03036d;
}

/* mobile: ẩn mặc định, khi JS thêm .nav--on thì hiện */
@media (max-width: 768px){
  .tcp8step__nav{ opacity: 0; pointer-events: none; }
  .tcp8step.nav--on .tcp8step__nav{ opacity: 1; pointer-events: auto; }
}
/* Ẩn NAV */
.tcp8step__nav {
	display:none;
}