/* =========================================================
   CREDENT - Trang Giới thiệu (PC)
   ========================================================= */

/* ---------- Tiêu đề trộn sans + serif (line-height 1.3) ---------- */
.mix-title {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 500;
  line-height: 0;
  color: var(--navy-12);
}
.mix-title__sans { font-size: 32px; line-height: 42px; }
.mix-title__serif {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  font-style: italic;
  line-height: 43px;
  color: var(--gold);
}
.mix-title__comma { font-size: 36px; line-height: 43px; }
.mix-title--center { text-align: center; }
.mix-title--light { color: var(--white); }

/* ---------- Banner trang con (dùng chung cho các trang) ---------- */
.page-banner { position: relative; height: 273px; overflow: hidden; }
.page-banner__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(21, 34, 56) 0%, rgba(21, 34, 56, .394) 39.968%, rgba(21, 34, 56, .107) 67.005%, rgba(21, 34, 56, 0) 82.091%),
    url("../images/banner.jpg") 0 -211.4px / 100% 806.4px no-repeat;
}
.page-banner__band { position: absolute; left: 0; top: 97px; width: 100%; height: 176px; background: rgba(21, 34, 56, .65); }
.page-banner__content { position: absolute; left: calc(50% - 599px); top: 137px; width: 689px; display: flex; flex-direction: column; gap: 8px; color: var(--white); }
.page-banner__crumb { height: 16px; font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: .6px; color: rgba(255, 255, 255, .45); }
.page-banner__crumb span { color: var(--white); }
.page-banner__crumb a { color: rgba(255, 255, 255, .45); transition: color .3s var(--ease); }
.page-banner__crumb a:hover { color: var(--gold); }
.page-banner__title { font-family: "Barlow Semi Condensed", var(--sans); font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: .34px; }

/* ---------- Note card (thẻ ghi chú viền vàng) ---------- */
.note-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 294px;
  padding: 8px;
  border: 1px solid var(--gold);
  border-radius: 9px;
  background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.note-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(17, 34, 58, .12); }
.note-card p { width: 216px; font-size: 13px; font-weight: 400; line-height: 17px; color: var(--text-body); }

.lw-dark { color: var(--black); }

/* Icon tròn nền kem trong note-card */
.note-card__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  background: var(--gold-02);
}
.note-card__icon img { width: 19.98px; height: 19.98px; }

/* =========================================================
   LUẬT CREDENT
   ========================================================= */
.ab-intro { position: relative; height: 658px; }
.ab-intro__text { position: absolute; left: calc(50% - 600px); top: 69px; width: 588px; display: flex; flex-direction: column; gap: 37px; }
.ab-intro__about { display: flex; flex-direction: column; gap: 12px; }
.ab-intro__name { font-size: 22px; font-weight: 700; line-height: 29px; color: #1c1c1c; }
.ab-intro__desc { font-size: 13px; line-height: 18px; color: var(--text-body); text-align: justify; }
.ab-intro__partner { display: flex; flex-direction: column; gap: 45px; }
.ab-intro__heading { display: flex; flex-direction: column; gap: 4px; }
.ab-intro__h2 { font-size: 32px; font-weight: 500; line-height: 42px; color: var(--navy-12); }
.ab-intro__slogan { font-family: var(--serif); font-size: 32px; font-weight: 600; font-style: italic; line-height: 38px; color: var(--gold); }
.ab-intro__quote { display: flex; flex-direction: column; gap: 14px; }
.ab-intro__quote p { font-size: 18px; font-weight: 600; line-height: 23px; color: #989898; text-align: justify; }

.ab-intro__visual { position: absolute; left: calc(50% + 12px); top: 0; width: 708px; height: 658px; overflow: hidden; }
.ab-intro__group { position: absolute; left: 78px; top: 135px; width: 510px; height: 388px; }
.ab-intro__glow { position: absolute; left: 59px; top: -40px; }
.ab-intro__gavel {
  position: absolute;
  left: 24px;
  top: 0;
  width: 486px;
  height: 388px;
  filter: drop-shadow(6px 1px 7px rgba(0, 0, 0, .1)) drop-shadow(25px 5px 13px rgba(0, 0, 0, .09)) drop-shadow(57px 12px 17px rgba(0, 0, 0, .05));
}
.ab-intro__tag {
  position: absolute;
  left: 0;
  top: 131px;
  width: 137px;
  height: 38px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--gold);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  color: var(--white);
}
.ab-intro__note--1 { left: 216px; top: 246px; }
.ab-intro__note--2 { left: 126px; top: 317px; }

/* =========================================================
   SỐ LIỆU
   ========================================================= */
.ab-stats { display: flex; align-items: center; gap: 126px; width: 1199px; height: 420px; margin: 78px auto 0; }
.ab-stats__grid { flex: none; width: 587px; display: flex; flex-wrap: wrap; gap: 24px; }
.ab-stat {
  width: 282px;
  height: 160px;
  padding: 15px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ab-stat--w281 { width: 281px; }
.ab-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(17, 34, 58, .1); }
.ab-stat__num { font-family: var(--serif); font-size: 52px; font-weight: 900; font-style: italic; line-height: 57px; color: var(--gold); white-space: nowrap; }
.ab-stat__info { display: flex; flex-direction: column; gap: 2px; }
.ab-stat__label { font-size: 17px; font-weight: 600; line-height: 22px; color: var(--navy-12); white-space: nowrap; }
.ab-stat__desc { font-size: 13px; line-height: 20px; color: var(--text-body); }

.ab-stats__text { flex: none; width: 486px; display: flex; flex-direction: column; gap: 20px; }
.ab-stats__text > p { font-size: 14.5px; line-height: 23px; color: var(--text-body); text-align: justify; }
.ab-stats__link {
  display: block;
  width: 201px;
  margin-top: -8px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  text-align: center;
  color: var(--gold);
  transition: color .3s var(--ease);
}
.ab-stats__link:hover { color: var(--navy-12); }

/* =========================================================
   GIÁ TRỊ
   ========================================================= */
.ab-values { position: relative; height: 1155px; margin-top: 85px; overflow: hidden; }
.ab-values__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #fff, rgba(255, 255, 255, .6)),
    url("../images/gioi-thieu/bg-values.jpg") center / cover no-repeat;
}
.ab-values__row { position: absolute; left: calc(50% - 720px); top: 92px; display: flex; align-items: center; gap: 24px; }
.ab-values__media { position: relative; flex: none; width: 402px; height: 971px; overflow: hidden; border-top-right-radius: 8px; }
.ab-values__img { position: absolute; left: -387.2px; top: -42.7px; width: 950.4px; height: 1389.2px; }
.ab-values__fade {
  position: absolute;
  left: -849px;
  top: -83px;
  width: 1922.6px;
  height: 1055px;
  background-image: linear-gradient(-0.033deg, rgba(255, 255, 255, 0) 31.105%, rgba(255, 254, 254, .85) 73.022%, rgba(255, 254, 254, .952) 82.018%, #fffefe 91.352%);
}
.ab-values__content { flex: none; width: 895px; display: flex; flex-direction: column; gap: 54px; }
.ab-values__lead { font-size: 13px; line-height: 18px; color: var(--text-body); text-align: justify; }
.ab-values__lead strong { line-height: 17px; }
.ab-values__lead-last { line-height: 17px; }
.ab-values__block { display: flex; flex-direction: column; gap: 38px; }
.ab-values__cards { display: flex; align-items: center; gap: 24px; }
.value-card {
  flex: none;
  width: 282px;
  height: 623px;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 4px;
  background: var(--white);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(17, 34, 58, .1); }
.value-card__head { display: flex; flex-direction: column; gap: 32px; }
.value-card__head h3 { font-size: 22px; font-weight: 600; line-height: 29px; color: var(--navy-12); }
.value-card__text { font-family: "Inter", sans-serif; font-size: 14px; line-height: 21px; color: var(--text-body); text-align: justify; }

/* =========================================================
   KẾT HỢP CHUYÊN MÔN
   ========================================================= */
.ab-expert { height: 738px; background: var(--navy); }
.ab-expert .container { padding-top: 69px; display: flex; flex-direction: column; gap: 32px; }
.ab-expert__cols { display: flex; align-items: flex-start; gap: 24px; }
.ab-expert__col1 { flex: none; width: 690px; font-size: 16px; font-weight: 500; line-height: 21px; color: var(--white); text-align: justify; }
.ab-expert__col2 { flex: 1; font-size: 13px; line-height: 18px; color: var(--white); text-align: justify; }
.ab-expert__roles { display: flex; align-items: stretch; gap: 24px; }
.role-card {
  flex: 1;
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  transition: background-color .3s var(--ease), transform .4s var(--ease);
}
.role-card:hover { background: rgba(255, 255, 255, .1); transform: translateY(-6px); }
.role-card__head { display: flex; flex-direction: column; gap: 32px; }
.role-card__head h3 { font-size: 22px; font-weight: 500; line-height: 29px; color: var(--white); }
.role-card__icon { position: relative; display: block; width: 40px; height: 40px; overflow: hidden; }
.role-card__icon > span { position: absolute; }
.role-card__icon img { position: absolute; display: block; width: auto; height: auto; max-width: none; }
.role-card__text { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .75); }
.role-card__text--justify { text-align: justify; }

/* =========================================================
   ĐỐI TÁC + CHỨNG NHẬN
   ========================================================= */
.ab-trust { padding: 80px 0 75px; }
.ab-trust .partners { margin-top: 0; }
.ab-certs { margin-top: 100px; display: flex; flex-direction: column; gap: 40px; }
.ab-certs__slider { gap: 37px; }
.cert-card {
  flex: none;
  width: 282px;
  height: 446px;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: 4px;
  background: var(--white);
}
.cert-card__img { position: relative; display: block; flex: none; width: 100%; height: 371px; overflow: hidden; border-radius: 4px; }
.cert-card--wide .cert-card__img { width: 282px; height: 391px; }
.cert-card__img img { position: absolute; max-width: none; transition: transform .6s var(--ease); }
.cert-card:hover .cert-card__img img { transform: scale(1.04); }
.cert-card__title { width: 100%; font-size: 13px; font-weight: 500; line-height: 17px; text-align: center; color: var(--navy-12); transition: color .3s var(--ease); }
.cert-card--wide .cert-card__title { width: 242px; }
.cert-card:hover .cert-card__title { color: var(--gold); }

/* =========================================================
   PHỐI HỢP CHUYÊN MÔN
   ========================================================= */
.ab-network { position: relative; height: 713px; overflow: hidden; }
.ab-network__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .9) 21.028%, rgba(255, 255, 255, .861) 60.513%, rgba(255, 255, 255, .6) 100%),
    url("../images/gioi-thieu/bg-network.jpg") center / cover no-repeat;
}
.ab-network__inner { position: absolute; left: calc(50% - 600px); top: 63px; display: flex; align-items: flex-start; gap: 126px; }
.ab-network__left { flex: none; width: 486px; display: flex; flex-direction: column; gap: 20px; }
.ab-network__left > p { font-size: 13px; line-height: 18px; color: var(--text-body); text-align: justify; }
.ab-network__right { flex: none; width: 588px; display: flex; flex-direction: column; gap: 24px; }
.ab-network__heading { font-size: 18px; font-weight: 700; line-height: 23px; color: var(--navy-12); white-space: nowrap; }
.unit-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: var(--white);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.unit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(17, 34, 58, .1); }
.unit-card__num { flex: none; font-family: var(--serif); font-size: 34px; font-style: italic; font-weight: 400; line-height: 44px; color: var(--gold); white-space: nowrap; }
.unit-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.unit-card__body h3 { font-size: 18px; font-weight: 600; line-height: 23px; color: var(--navy-12); }
.unit-card__body p { font-family: "Inter", sans-serif; font-size: 14px; line-height: 21px; color: var(--text-body); }
.unit-card__text--justify { text-align: justify; }

/* =========================================================
   RESPONSIVE - Trang Giới thiệu
   ========================================================= */
@media (max-width: 1239px) {
  .page-banner__content { left: 32px; width: calc(100% - 64px); }

  /* Luật Credent: xếp dọc */
  .ab-intro { height: auto; padding-top: 69px; }
  .ab-intro__text { position: static; width: min(704px, calc(100% - 64px)); margin: 0 auto; }
  .ab-intro__h2 br { display: none; }
  .ab-intro__visual { position: relative; left: auto; width: 100%; height: 520px; }
  .ab-intro__group { left: 50%; top: 66px; margin-left: -255px; }

  /* Số liệu */
  .ab-stats { flex-direction: column; align-items: stretch; gap: 40px; width: min(704px, calc(100% - 64px)); height: auto; margin-top: 20px; }
  .ab-stats__text { order: -1; width: auto; }
  .ab-stats__grid { width: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .ab-stat,
  .ab-stat--w281 { width: auto; }

  /* Giá trị: ảnh búa gỗ tách thành khối riêng phía trên */
  .ab-values { height: auto; margin-top: 58px; overflow: visible; }
  .ab-values__bg { top: 667px; }
  .ab-values__row { position: relative; left: auto; top: auto; flex-direction: column; align-items: stretch; gap: 0; }
  .ab-values__media { width: 100%; height: 667px; border-top-right-radius: 0; }
  .ab-values__img { left: calc(50% - 386.5px); top: -6.3px; width: 630.7px; height: 921.8px; }
  .ab-values__fade { left: calc(50% - 693px); top: -33px; width: 1276px; height: 700px; }
  .ab-values__content { position: relative; width: min(704px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 77px; gap: 48px; }
  .ab-values__block { gap: 40px; }
  .ab-values__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
  .value-card { width: auto; height: auto; }

  /* Kết hợp chuyên môn */
  .ab-expert { height: auto; padding-bottom: 70px; }
  .ab-expert__cols { flex-direction: column; }
  .ab-expert__col1 { width: auto; }
  .ab-expert__roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  /* Phối hợp chuyên môn */
  .ab-network { height: auto; padding: 63px 0 70px; }
  .ab-network__inner { position: relative; left: auto; top: auto; flex-direction: column; gap: 40px; width: min(704px, calc(100% - 64px)); margin: 0 auto; }
  .ab-network__left,
  .ab-network__right { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1239px) {
  .ab-values__img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
  .ab-values__fade { left: 0; top: 0; width: 100%; height: 100%; }
}
@media (min-width: 768px) and (max-width: 1239px) {
  .cert-card,
  .cert-card--wide { width: calc((100% - 48px) / 3); height: auto; }
  .cert-card__img,
  .cert-card--wide .cert-card__img { width: 100%; height: auto; aspect-ratio: 242 / 371; }
  .cert-card--wide .cert-card__title { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cert-card,
  .cert-card--wide { width: calc((100% - 24px) / 2); }
}

/* ---------- MOBILE (Figma 402px) ---------- */
@media (max-width: 767px) {
  /* Banner */
  .page-banner { height: 399px; }
  .page-banner__bg { background: url("../images/mobile/bg-page-banner.jpg") center / cover no-repeat; }
  .page-banner__band { display: none; }
  .page-banner__content { left: 16px; top: 297px; width: calc(100% - 32px); }

  /* Luật Credent */
  .ab-intro { padding-top: 58px; }
  .ab-intro__text { width: calc(100% - 32px); }
  .ab-intro__visual { height: auto; margin-top: 48px; padding: 0 16px; overflow: visible; overflow-x: clip; }
  .ab-intro__group { position: relative; left: auto; top: auto; width: 100%; max-width: 370px; height: 385px; margin: 0 auto; }
  .ab-intro__glow { left: calc(38.07% - 9.2px); top: -66.3px; pointer-events: none; }
  .ab-intro__gavel { left: 0; width: 100%; height: auto; aspect-ratio: 370 / 295.39; }
  .ab-intro__tag { top: 185px; }
  .ab-intro__note--1 { left: auto; right: 0; top: 251px; }
  .ab-intro__note--2 { left: 0; top: 322px; }

  /* Số liệu */
  .ab-stats { width: calc(100% - 32px); margin-top: 59px; }
  .ab-stats__grid { grid-template-columns: 1fr; }
  .ab-stats__text { gap: 20px; }
  .ab-stats__link { margin-top: -8px; }

  /* Giá trị */
  .ab-values__bg { background: url("../images/gioi-thieu/mobile/bg-values.jpg") center top / cover no-repeat; }
  .ab-values__content { width: calc(100% - 32px); }
  .ab-values__cards { grid-template-columns: 1fr; }

  /* Kết hợp chuyên môn */
  .ab-expert { padding-bottom: 58px; }
  .ab-expert .container { padding-top: 58px; gap: 40px; }
  .ab-expert__cols { gap: 24px; margin-bottom: 8px; }
  .ab-expert__roles { grid-template-columns: 1fr; }
  .role-card { min-height: 383px; }

  /* Đối tác + chứng nhận */
  .ab-trust { padding: 58px 0; }
  .ab-certs { margin-top: 58px; gap: 38px; }
  .ab-certs .mix-title { text-align: center; }
  .ab-certs__slider { gap: 36px; }
  .cert-card,
  .cert-card--wide { width: 100%; height: auto; padding: 0; gap: 24px; background: transparent; }
  .cert-card__img,
  .cert-card--wide .cert-card__img { width: 100%; height: auto; aspect-ratio: 370 / 568; }
  .cert-card--wide .cert-card__title { width: 100%; }

  /* Phối hợp chuyên môn */
  .ab-network { padding: 58px 0; }
  .ab-network__bg { background: url("../images/gioi-thieu/mobile/bg-network.jpg") center top / cover no-repeat; }
  .ab-network__inner { width: calc(100% - 32px); }
  .ab-network__left .mix-title { text-align: center; }
  .ab-network__heading { white-space: normal; }
}