/* Trang giới thiệu.
   Bố cục theo mockup: giới thiệu hai cột, thẻ nhà sáng lập, dải tầm nhìn chuyển
   màu, ba thẻ đối tượng phục vụ, dải số liệu, quy trình bốn bước, cam kết, nguyên
   tắc và dải kêu gọi. Bảng màu giữ nhận diện CNK. */

.cnk-landing-page .ab-section { padding: 54px 0 60px; background: #fff; }
.cnk-landing-page .ab-kicker { margin: 0 0 8px !important; color: var(--lp-red); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cnk-landing-page .ab-title { margin: 0 0 18px; color: #061d3d; font: 800 clamp(1.4rem, 2.4vw, 1.9rem)/1.3 Manrope, sans-serif; }

/* --- giới thiệu hai cột --- */
.cnk-landing-page .ab-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.cnk-landing-page .ab-intro p { color: var(--lp-gray); font-size: 13.5px; line-height: 1.8; }
.cnk-landing-page .ab-intro__media img { width: 100%; height: auto; border-radius: 10px; }

/* --- thẻ nhà sáng lập --- */
.cnk-landing-page .ab-founder { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; margin-top: 34px; padding: 30px; border-radius: 12px; background: #f5f7f9; }
.cnk-landing-page .ab-founder__photo img { width: 100%; height: auto; border-radius: 8px; }
.cnk-landing-page .ab-founder__name { margin: 0 0 12px; color: #061d3d; font: 800 1.3rem/1.3 Manrope, sans-serif; }
.cnk-landing-page .ab-founder p { color: var(--lp-gray); font-size: 13px; line-height: 1.75; }
.cnk-landing-page .ab-founder__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 22px 0; padding: 20px 0; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); }
.cnk-landing-page .ab-founder__stat + .ab-founder__stat { border-left: 1px solid var(--lp-line); padding-left: 22px; }
.cnk-landing-page .ab-founder__value { margin: 0 0 2px !important; color: #061d3d; font: 800 1.5rem/1.15 Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.cnk-landing-page .ab-founder__label { margin: 0 !important; color: var(--lp-gray); font-size: 12.5px; }
.cnk-landing-page .ab-founder__block { margin-top: 16px; }
.cnk-landing-page .ab-founder__block strong { display: block; margin-bottom: 6px; color: #061d3d; font-size: 13px; font-weight: 700; }

/* --- dải tầm nhìn --- */
.cnk-landing-page .ab-vision {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  margin-top: 26px; padding: 34px 36px; border-radius: 12px; color: #fff;
  background: linear-gradient(104deg, #061d3d 0%, #123a5c 50%, #6e1313 100%);
}
.cnk-landing-page .ab-vision .ab-kicker { color: rgba(255,255,255,.66); }
.cnk-landing-page .ab-vision__quote { margin: 0; color: #fff; font: 700 1.15rem/1.6 Manrope, sans-serif; }
.cnk-landing-page .ab-vision__quote::before { content: "“"; display: block; margin-bottom: -14px; color: rgba(255,255,255,.42); font-size: 40px; line-height: 1; }
.cnk-landing-page .ab-vision__copy p { margin: 0; color: rgba(255,255,255,.8); font-size: 13.5px; line-height: 1.8; }

/* --- ba thẻ đối tượng --- */
.cnk-landing-page .ab-serve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cnk-landing-page .ab-serve__item { display: grid; grid-template-columns: 110px minmax(0, 1fr); border: 1px solid var(--lp-line); border-radius: 10px; overflow: hidden; background: #fff; }
.cnk-landing-page .ab-serve__media { background: #e6ecef; }
.cnk-landing-page .ab-serve__media img { width: 100%; height: 100%; object-fit: cover; }
.cnk-landing-page .ab-serve__body { padding: 18px; }
.cnk-landing-page .ab-serve__body strong { display: block; margin-bottom: 6px; color: #061d3d; font-size: 14px; font-weight: 700; }
.cnk-landing-page .ab-serve__body p { margin: 0 0 10px; color: var(--lp-gray); font-size: 12.5px; line-height: 1.65; }
.cnk-landing-page .ab-serve__body ul { margin: 0; padding: 0; list-style: none; }
.cnk-landing-page .ab-serve__body li { position: relative; padding-left: 18px; color: var(--lp-gray); font-size: 12.5px; line-height: 1.9; }
.cnk-landing-page .ab-serve__body li::before { content: "✓"; position: absolute; left: 0; color: var(--lp-red); font-size: 11px; font-weight: 800; }

/* --- dải số liệu --- */
.cnk-landing-page .ab-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 12px;
  border-radius: 10px; color: #fff;
  background: linear-gradient(104deg, #061d3d 0%, #123a5c 52%, #6e1313 100%);
}
.cnk-landing-page .ab-stat { padding: 20px 18px; text-align: center; }
.cnk-landing-page .ab-stat + .ab-stat { border-left: 1px solid rgba(255,255,255,.18); }
.cnk-landing-page .ab-stat__value { margin: 0 0 2px !important; color: #fff; font: 800 1.5rem/1.15 Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.cnk-landing-page .ab-stat__label { margin: 0 !important; color: rgba(255,255,255,.76); font-size: 12px; }

/* --- quy trình bốn bước --- */
.cnk-landing-page .ab-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cnk-landing-page .ab-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.cnk-landing-page .ab-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 44px; right: -22px; border-top: 1px dashed var(--lp-line); }
.cnk-landing-page .ab-step__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lp-red); color: #fff; font: 800 13px Manrope, sans-serif; }
.cnk-landing-page .ab-step strong { display: block; margin-bottom: 5px; color: #061d3d; font-size: 13.5px; font-weight: 700; }
.cnk-landing-page .ab-step p { margin: 0; color: var(--lp-gray); font-size: 12.5px; line-height: 1.65; }

/* --- cam kết --- */
.cnk-landing-page .ab-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cnk-landing-page .ab-trust__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 18px; border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; }
.cnk-landing-page .ab-trust__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fbeeee; }
.cnk-landing-page .ab-trust__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--lp-red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cnk-landing-page .ab-trust strong { display: block; margin-bottom: 5px; color: #061d3d; font-size: 13.5px; font-weight: 700; }
.cnk-landing-page .ab-trust p { margin: 0; color: var(--lp-gray); font-size: 12.5px; line-height: 1.65; }

/* --- nguyên tắc --- */
.cnk-landing-page .ab-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cnk-landing-page .ab-principle + .ab-principle { border-left: 1px solid var(--lp-line); padding-left: 26px; }
.cnk-landing-page .ab-principle strong { display: block; margin-bottom: 6px; color: #061d3d; font-size: 13.5px; font-weight: 700; }
.cnk-landing-page .ab-principle p { margin: 0; color: var(--lp-gray); font-size: 12.5px; line-height: 1.7; }

/* --- dải kêu gọi --- */
.cnk-landing-page .ab-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  margin-top: 34px; padding: 28px 34px; border-radius: 12px; color: #fff;
  background: linear-gradient(104deg, #061d3d 0%, #123a5c 48%, #6e1313 100%);
}
.cnk-landing-page .ab-cta__copy { flex: 1 1 340px; min-width: 0; }
.cnk-landing-page .ab-cta__title { margin: 0 0 6px !important; color: #fff; font: 800 1.35rem/1.3 Manrope, sans-serif; }
.cnk-landing-page .ab-cta__copy p { margin: 0; color: rgba(255,255,255,.8); font-size: 13.5px; line-height: 1.7; }
.cnk-landing-page .ab-cta .wp-block-buttons { gap: 14px; }
.cnk-landing-page .ab-cta .lp-button--light .wp-block-button__link { border-color: rgba(255,255,255,.55); }

/* --- khổ hẹp --- */
@media (max-width: 1000px) {
  .cnk-landing-page .ab-intro,
  .cnk-landing-page .ab-vision { grid-template-columns: 1fr; gap: 24px; }
  .cnk-landing-page .ab-founder { grid-template-columns: 1fr; }
  .cnk-landing-page .ab-founder__photo img { max-width: 260px; }
  .cnk-landing-page .ab-serve,
  .cnk-landing-page .ab-steps,
  .cnk-landing-page .ab-trust,
  .cnk-landing-page .ab-principles { grid-template-columns: 1fr 1fr; }
  .cnk-landing-page .ab-stats { grid-template-columns: 1fr 1fr 1fr; }
  .cnk-landing-page .ab-step::after { display: none; }
  .cnk-landing-page .ab-principle:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .cnk-landing-page .ab-serve,
  .cnk-landing-page .ab-steps,
  .cnk-landing-page .ab-trust,
  .cnk-landing-page .ab-principles,
  .cnk-landing-page .ab-founder__stats { grid-template-columns: 1fr; }
  .cnk-landing-page .ab-stats { grid-template-columns: 1fr 1fr; }
  .cnk-landing-page .ab-founder__stat + .ab-founder__stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--lp-line); padding-top: 16px; }
  .cnk-landing-page .ab-principle + .ab-principle { border-left: 0; padding-left: 0; }
  .cnk-landing-page .ab-vision,
  .cnk-landing-page .ab-founder { padding: 24px 20px; }
}

/* Nhịp dọc giữa các dải: dòng nhãn mở đầu mỗi phần cần khoảng thở với khối trên,
   nếu không các dải dính liền nhau và mắt không tách được từng phần. */
.cnk-landing-page .ab-vision + .ab-kicker,
.cnk-landing-page .ab-serve + .ab-kicker,
.cnk-landing-page .ab-stats + .ab-kicker,
.cnk-landing-page .ab-steps + .ab-kicker,
.cnk-landing-page .ab-trust + .ab-kicker { margin-top: 44px !important; }
.cnk-landing-page .ab-serve,
.cnk-landing-page .ab-steps,
.cnk-landing-page .ab-trust,
.cnk-landing-page .ab-principles { margin-top: 4px; }