/* =========================================================
   CREDENT - Trang Luật sư (PC)
   Dùng chung: .page-banner, .mix-title, .note-card, .ab-intro__* (gioi-thieu.css)
   ========================================================= */

/* =========================================================
   GIỚI THIỆU ĐỘI NGŨ
   ========================================================= */
.lw-intro { position: relative; z-index: 1; height: 550px; overflow-x: clip; }
.lw-intro__bg {
  position: absolute;
  left: calc(50% - 830px);
  top: -21px;
  width: 1660px;
  height: 1094px;
  background: url("../images/luat-su/bg-intro.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.lw-intro__text { position: absolute; left: calc(50% - 600px); top: 69px; width: 588px; display: flex; flex-direction: column; gap: 37px; }
.lw-intro__visual { position: absolute; left: calc(50% + 12px); top: 0; width: 708px; height: 544px; overflow: hidden; }
.lw-intro__group { position: absolute; left: 64px; top: 32px; width: 524px; height: 512px; }
.lw-intro__glow { position: absolute; left: 46px; top: -63px; pointer-events: none; }
.lw-intro__scale { position: absolute; left: 0; top: 0; width: 421px; height: 421px; object-fit: cover; }
.lw-intro__tag {
  position: absolute;
  left: 167px;
  top: 297px;
  width: 196px;
  height: 38px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--gold);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  color: var(--white);
  white-space: nowrap;
}
.lw-intro__note--1 { left: 230px; top: 344px; }
.lw-intro__note--2 { left: 140px; top: 415px; }

/* =========================================================
   PHỐI HỢP
   ========================================================= */
.lw-team { height: 861px; background: var(--white); }
.lw-team .container { z-index: 2; padding-top: 235px; display: flex; flex-direction: column; gap: 32px; }
.lw-team__cols { display: flex; align-items: flex-start; gap: 24px; }
.lw-team__col1 { flex: 1; font-size: 16px; font-weight: 500; line-height: 21px; color: var(--n-1200); text-align: justify; }
.lw-team__col2 { flex: 1; font-size: 13px; line-height: 18px; color: var(--n-1200); text-align: justify; }
.lw-team__roles { display: flex; align-items: stretch; gap: 24px; }
.lw-role {
  flex: 1;
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: var(--white);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s var(--ease);
}
.lw-role--first { flex: none; width: 385px; }
.lw-role:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(17, 34, 58, .1); }
.lw-role__num { font-family: var(--serif); font-size: 36px; font-weight: 600; font-style: italic; line-height: 47px; color: var(--gold); white-space: nowrap; }
.lw-role__title { font-size: 18px; font-weight: 600; line-height: 23px; color: var(--black); }
.lw-role__text { font-size: 13.5px; line-height: 20px; color: var(--n-1200); text-align: justify; }

/* =========================================================
   DANH SÁCH LUẬT SƯ
   ========================================================= */
.lw-list { padding: 81px 0 125px; background: #f7f7f7; }
.lw-list .container { display: flex; flex-direction: column; gap: 40px; }
.lw-tabs { display: flex; align-items: flex-start; gap: 10px; }
.lw-tab {
  height: 37px;
  padding: 7px 23px;
  border: 1px solid var(--gold);
  border-radius: 100px;
  background: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--n-1400);
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lw-tab:hover { background: var(--gold-02); }
.lw-tab.is-active { border-color: var(--gold); background: var(--gold); color: var(--white); }
.lw-grid { display: grid; grid-template-columns: repeat(4, 282px); gap: 24px; grid-template-rows: 340px; grid-auto-rows: 337px; align-items: start; margin-top: 8px; }
.lawyer-card {
  display: flex;
  flex-direction: column;
  height: 337px;
  overflow: hidden;
  border-radius: 4px;
  background: #b37c39;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.lawyer-card.is-hidden { display: none; }
.lawyer-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(17, 34, 58, .15); }
.lawyer-card__img { display: block; flex: none; height: 230px; overflow: hidden; background: var(--white); }
.lawyer-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lawyer-card:hover .lawyer-card__img img { transform: scale(1.05); }
.lawyer-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 16px;
  background: var(--gold);
  line-height: 17px;
  transition: background-color .3s var(--ease);
}
.lawyer-card:hover .lawyer-card__info { background: var(--gold-13); }
.lawyer-card__name { font-size: 18px; font-weight: 800; line-height: 23px; color: var(--white); }
.lawyer-card__role { margin-top: 2px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.lawyer-card__contact { display: flex; align-items: center; gap: 30px; margin-top: 10px; }
.lawyer-card__contact > span { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.lawyer-card__contact img { flex: none; width: 15px; height: 15px; padding: .6px; }
.lawyer-card__contact img.lawyer-card__mail { height: 15px; padding: 1.9px .6px; }

/* =========================================================
   A&Q
   ========================================================= */
.lw-faq { height: 675px; background: var(--navy-14); }
.lw-faq__inner { padding-top: 89px; display: flex; align-items: flex-start; justify-content: space-between; }
.lw-faq__title { width: 486px; font-size: 32px; font-weight: 500; line-height: 42px; color: var(--white); }
.lw-faq__title .mix-title__serif { font-size: 36px; line-height: 43px; }
.lw-faq__acc { flex: none; width: 587px !important; }
.lw-faq .acc-item.is-open .acc-item__name { width: auto; }
.lw-faq .acc-item__desc { width: 521px; height: auto; text-align: justify; }
.lw-faq .acc-item.is-open .acc-item__body-inner { padding-bottom: 24px; }
.lw-faq .acc-item.is-open:not(:first-child) { margin-top: 30px; }
.lw-faq .acc-item.is-open:not(:last-child) { margin-bottom: 30px; }

/* =========================================================
   RESPONSIVE - Trang Luật sư
   ========================================================= */
@media (max-width: 1239px) {
  /* Giới thiệu đội ngũ: xếp dọc */
  .lw-intro { height: auto; padding-top: 69px; }
  .lw-intro__text { position: relative; left: auto; top: auto; width: min(704px, calc(100% - 64px)); margin: 0 auto; }
  .lw-intro__visual { position: relative; left: auto; width: 100%; height: 544px; margin-top: 20px; }
  .lw-intro__group { left: 50%; margin-left: -262px; }

  /* Phối hợp */
  .lw-team { height: auto; padding: 120px 0 80px; }
  .lw-team .container { padding-top: 0; width: min(1200px, calc(100% - 64px)); }
  .lw-team__cols { flex-direction: column; gap: 16px; }
  .lw-team__roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .lw-role--first { width: auto; }

  /* Danh sách luật sư */
  .lw-list { padding: 81px 0 100px; }
  .lw-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-template-rows: none; grid-auto-rows: auto; align-items: stretch; }
  .lawyer-card { height: auto; }
  .lawyer-card__info { min-height: 107px; }
  .lawyer-card__img { height: auto; aspect-ratio: 282 / 230; }
  .lawyer-card__info { padding: 18px 16px 16px; }
  .lawyer-card__contact { gap: 8px 14px; flex-wrap: wrap; }

  /* A&Q */
  .lw-faq { height: auto; padding: 89px 0 80px; }
  .lw-faq__inner { padding-top: 0; flex-direction: column; gap: 40px; }
  .lw-faq__title { width: auto; }
  .lw-faq__acc { width: 100% !important; }
  .lw-faq .acc-item__desc { width: auto; }
}

/* ---------- MOBILE (Figma 402px) ---------- */
@media (max-width: 767px) {
  /* Giới thiệu đội ngũ */
  .lw-intro { padding-top: 58px; }
  .lw-intro__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 402 / 1351;
    background-image: url("../images/luat-su/mobile/bg-intro.jpg");
  }
  .lw-intro__text { width: calc(100% - 32px); }
  .lw-intro__visual { height: auto; margin-top: 48px; padding: 0 16px; overflow: visible; }
  .lw-intro__group { position: relative; left: auto; top: auto; width: 100%; max-width: 370px; height: 419px; margin: 0 auto; }
  .lw-intro__glow { left: -30.2px; top: -33.1px; }
  .lw-intro__scale { width: 301.88px; height: 301.88px; }
  .lw-intro__tag { left: 27px; top: 156px; }
  .lw-intro__note--1 { left: auto; right: 1px; top: 279px; }
  .lw-intro__note--2 { left: 0; top: 350px; }

  /* Phối hợp */
  .lw-team { padding: 225px 0 73px; }
  .lw-team .container { width: calc(100% - 32px); gap: 40px; }
  .lw-team .mix-title { text-align: center; }
  .lw-team__roles { grid-template-columns: 1fr; }

  /* Danh sách luật sư */
  .lw-list { padding: 58px 0 100px; }
  .lw-list .mix-title { text-align: center; }
  .lw-tabs { gap: 8px; }
  .lw-tab { height: 35px; padding: 7px 11px; font-size: 13px; font-weight: 500; line-height: 17px; }
  .lw-tab.is-active { padding: 8px 12px; border: 0; }
  /* 2 nhân sự mỗi hàng */
  .lw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: -8px; }
  .lawyer-card__img { aspect-ratio: 179 / 170; }
  .lawyer-card__info { min-height: 0; padding: 12px 12px 12px; }
  .lawyer-card__name { font-size: clamp(11px, 3.23vw, 13px); line-height: 17px; }
  .lawyer-card__role { margin-top: 1px; font-size: 12px; line-height: 16px; }
  .lawyer-card__contact { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
  .lawyer-card__contact > span { gap: 8px; font-size: 12px; line-height: 16px; }

  /* A&Q */
  .lw-faq { padding: 58px 0; }
  .lw-faq .container { width: calc(100% - 32px); }
  .lw-faq__title { text-align: center; }
}