/* Trang hub dịch vụ.
   Bố cục theo mockup: hero tối có thẻ trích dẫn, hàng sáu lối vào theo nhu cầu,
   dải dịch vụ cốt lõi chuyển màu, hai nhóm thẻ dịch vụ, quy trình năm bước, dải
   lý do chọn CNK và khối hỏi đáp kèm thẻ tư vấn. */

.cnk-landing-page .hb-section { padding: 52px 0; background: #fff; }
.cnk-landing-page .hb-section--soft { background: #f5f7f9; }
.cnk-landing-page .hb-head { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.cnk-landing-page .hb-head h2 { margin: 0 0 8px; color: #061d3d; font: 800 clamp(1.35rem, 2.4vw, 1.85rem)/1.35 Manrope, sans-serif; }
.cnk-landing-page .hb-head p { margin: 0; color: var(--lp-gray); font-size: 13.5px; line-height: 1.7; }

/* --- thẻ trích dẫn trong hero --- */
.cnk-landing-page .hb-hero-quote { padding: 4px 0 4px 22px; border-left: 3px solid var(--lp-red); }
.cnk-landing-page .hb-hero-quote p { margin: 0; color: #fff; font: 600 1.15rem/1.6 Manrope, sans-serif; }

/* --- sáu lối vào theo nhu cầu --- */
.cnk-landing-page .hb-entries { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cnk-landing-page .hb-entry { display: block; padding: 20px 16px; border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
.cnk-landing-page .hb-entry:hover { border-color: var(--lp-blue); box-shadow: 0 8px 22px rgba(6,29,61,.08); }
.cnk-landing-page .hb-entry__icon { display: block; width: 30px; height: 30px; margin-bottom: 14px; fill: none; stroke: #061d3d; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cnk-landing-page .hb-entry__tag { display: block; margin-bottom: 6px; color: #9aa4ae; font-size: 11px; }
.cnk-landing-page .hb-entry__name { display: block; color: #061d3d; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.cnk-landing-page .hb-entry__name::after { content: " →"; color: var(--lp-red); }

/* --- dải dịch vụ cốt lõi --- */
.cnk-landing-page .hb-core {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 34px; align-items: center;
  padding: 26px; border-radius: 12px; color: #fff;
  background: linear-gradient(104deg, #061d3d 0%, #123a5c 46%, #6e1313 100%);
}
.cnk-landing-page .hb-core__media img { width: 100%; height: auto; border-radius: 8px; }
.cnk-landing-page .hb-core__kicker { margin: 0 0 8px !important; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cnk-landing-page .hb-core h2 { margin: 0 0 12px; color: #fff; font: 800 1.6rem/1.3 Manrope, sans-serif; }
.cnk-landing-page .hb-core p { color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.75; }
.cnk-landing-page .hb-core ul { margin: 16px 0 20px; padding: 0; list-style: none; }
.cnk-landing-page .hb-core li { position: relative; padding: 5px 0 5px 28px; color: #fff; font-size: 13.5px; }
.cnk-landing-page .hb-core li::before { content: "✓"; position: absolute; left: 0; top: 5px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 10px; }
.cnk-landing-page .hb-core .wp-block-button__link { background: #fff; color: var(--lp-red); border-color: #fff; }
.cnk-landing-page .hb-core .wp-block-button__link:hover { background: #f3e6e6; }

/* --- thẻ dịch vụ --- */
.cnk-landing-page .hb-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cnk-landing-page .hb-cards--two { grid-template-columns: repeat(2, 1fr); }
.cnk-landing-page .hb-card { overflow: hidden; border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; }
.cnk-landing-page .hb-card__media { display: block; aspect-ratio: 16/9; background: #e6ecef; }
.cnk-landing-page .hb-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cnk-landing-page .hb-card__body { padding: 18px; }
.cnk-landing-page .hb-card__body strong { display: block; margin-bottom: 8px; color: #061d3d; font-size: 14px; font-weight: 700; }
.cnk-landing-page .hb-card__body p { margin: 0 0 12px; color: var(--lp-gray); font-size: 12.5px; line-height: 1.65; }
.cnk-landing-page .hb-card__more { margin: 0 !important; }
.cnk-landing-page .hb-card__more a { color: var(--lp-red); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.cnk-landing-page .hb-card__more a:hover { text-decoration: underline; }

/* --- khối trích dẫn người sáng lập --- */
.cnk-landing-page .hb-people { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 20px; align-items: stretch; }
.cnk-landing-page .hb-quote { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; }
.cnk-landing-page .hb-quote img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.cnk-landing-page .hb-quote__text { margin: 0 0 14px !important; color: #33455f; font: italic 500 13.5px/1.7 "Be Vietnam Pro", sans-serif; }
.cnk-landing-page .hb-quote__text::before { content: "“"; display: block; color: #c8d2da; font-size: 34px; line-height: .6; }
.cnk-landing-page .hb-quote__name { margin: 0 !important; color: #061d3d; font-size: 13.5px; font-weight: 700; }
.cnk-landing-page .hb-quote__role { margin: 2px 0 0 !important; color: var(--lp-gray); font-size: 12px; line-height: 1.5; }

/* --- quy trình năm bước --- */
.cnk-landing-page .hb-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-top: 18px; }
.cnk-landing-page .hb-step { position: relative; padding: 26px 16px 18px; border: 1px solid var(--lp-line); border-radius: 8px; background: #fff; text-align: center; }
.cnk-landing-page .hb-step__num { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lp-red); color: #fff; font: 800 12px Manrope, sans-serif; }
.cnk-landing-page .hb-step:not(:last-child)::after { content: ""; position: absolute; top: 0; right: -16px; width: 16px; border-top: 1px dashed var(--lp-line); }
.cnk-landing-page .hb-step strong { display: block; margin-bottom: 6px; color: #061d3d; font-size: 13px; font-weight: 700; }
.cnk-landing-page .hb-step p { margin: 0; color: var(--lp-gray); font-size: 12px; line-height: 1.6; }

/* --- dải lý do chọn CNK --- */
.cnk-landing-page .hb-why { position: relative; overflow: clip; padding: 44px 0; color: #fff; background: #061d3d; }
.cnk-landing-page .hb-why::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,29,61,.97) 0%, rgba(18,58,92,.9) 62%, rgba(110,19,19,.5)), var(--cnk-img-banner-home-alt, url("../images/home/banner-home-alt.png")) 70% center / cover no-repeat;
}
/* Không dùng bộ chọn con trực tiếp: WordPress chèn lớp bọc giữa nhóm và .lp-wrap
   nên vế `>` không khớp, nội dung mất z-index và bị lớp phủ nền che kín. */
.cnk-landing-page .hb-why > *,
.cnk-landing-page .hb-why .lp-wrap { position: relative; z-index: 1; }
.cnk-landing-page .hb-why::before { z-index: 0; }
.cnk-landing-page .hb-why h2 { margin: 0 0 24px; color: #fff; font: 800 1.5rem/1.3 Manrope, sans-serif; }
.cnk-landing-page .hb-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cnk-landing-page .hb-why__item { padding: 20px 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; background: rgba(255,255,255,.05); }
.cnk-landing-page .hb-why__item strong { display: block; margin-bottom: 8px; color: #fff; font-size: 13.5px; font-weight: 700; }
.cnk-landing-page .hb-why__item p { margin: 0; color: rgba(255,255,255,.75); font-size: 12.5px; line-height: 1.65; }

/* --- hỏi đáp và thẻ tư vấn --- */
.cnk-landing-page .hb-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cnk-landing-page .hb-faq h2 { margin: 0 0 16px; color: #061d3d; font: 800 1.2rem Manrope, sans-serif; }
.cnk-landing-page .hb-faq details { margin-bottom: 10px; border: 1px solid var(--lp-line); border-radius: 8px; background: #fff; }
.cnk-landing-page .hb-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; color: #061d3d; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.cnk-landing-page .hb-faq summary::-webkit-details-marker { display: none; }
.cnk-landing-page .hb-faq summary::after { content: "⌄"; color: var(--lp-gray); font-size: 15px; line-height: 1; transform: translateY(-3px); }
.cnk-landing-page .hb-faq details[open] summary::after { transform: rotate(180deg); }
.cnk-landing-page .hb-faq details p { margin: 0; padding: 0 18px 15px; color: var(--lp-gray); font-size: 12.5px; line-height: 1.7; }
.cnk-landing-page .hb-advice { padding: 28px; border-radius: 10px; color: #fff; background: linear-gradient(150deg, #061d3d 0%, #0f3253 100%); text-align: center; }
.cnk-landing-page .hb-advice h2 { margin: 0 0 10px; color: #fff; font: 800 1.15rem/1.4 Manrope, sans-serif; }
.cnk-landing-page .hb-advice p { margin: 0 0 20px; color: rgba(255,255,255,.78); font-size: 12.5px; line-height: 1.7; }
.cnk-landing-page .hb-advice .wp-block-buttons { justify-content: center; gap: 12px; }

/* --- khổ hẹp --- */
@media (max-width: 1000px) {
  .cnk-landing-page .hb-entries { grid-template-columns: repeat(3, 1fr); }
  .cnk-landing-page .hb-core,
  .cnk-landing-page .hb-bottom { grid-template-columns: 1fr; }
  .cnk-landing-page .hb-cards { grid-template-columns: 1fr 1fr; }
  .cnk-landing-page .hb-people { grid-template-columns: 1fr 1fr; }
  .cnk-landing-page .hb-quote { grid-column: 1 / -1; }
  .cnk-landing-page .hb-steps,
  .cnk-landing-page .hb-why__grid { grid-template-columns: 1fr 1fr; }
  .cnk-landing-page .hb-step::after { display: none; }
}
@media (max-width: 620px) {
  .cnk-landing-page .hb-entries,
  .cnk-landing-page .hb-cards,
  .cnk-landing-page .hb-cards--two,
  .cnk-landing-page .hb-people,
  .cnk-landing-page .hb-steps,
  .cnk-landing-page .hb-why__grid,
  .cnk-landing-page .hb-quote { grid-template-columns: 1fr; }
}