/* =========================================================
   CREDENT - Trang Chi tiết luật sư (PC)
   Dùng chung: .page-banner__crumb, .mix-title (gioi-thieu.css), .lawyer-card (luat-su.css),
   .news-item__meta (style.css)
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.ld-hero {
  position: relative;
  height: 460px;
  overflow: hidden;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 460' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-126.45 -46 33.775 -92.846 1264.5 460)'><stop stop-color='rgba(6,54,121,1)' offset='0'/><stop stop-color='rgba(7,51,111,1)' offset='0.19757'/><stop stop-color='rgba(14,37,68,1)' offset='0.48554'/><stop stop-color='rgba(17,34,58,1)' offset='0.67452'/><stop stop-color='rgba(17,31,50,1)' offset='0.80259'/><stop stop-color='rgba(11,24,43,1)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}
.ld-hero__glow { position: absolute; left: calc(50% + 40px); top: -60px; pointer-events: none; }
.ld-hero__card { position: absolute; left: calc(50% + 114px); top: 60px; width: 486px; height: 400px; border-radius: 12px 12px 0 0; background: var(--white); }
.ld-hero__photo { position: absolute; left: calc(50% + 172px); top: 89px; width: 371px; height: 371px; overflow: hidden; border-radius: 12px 12px 0 0; }
.ld-hero__photo img { position: absolute; left: -24.27%; top: -9.35%; width: 147.08%; height: 118.69%; max-width: none; transition: transform .6s var(--ease); transform-origin: center bottom; }
.ld-hero__photo:hover img { transform: scale(1.03); }
.ld-hero__content { position: absolute; left: calc(50% - 600px); top: 87px; width: 689px; color: var(--white); }
.ld-hero__content .page-banner__crumb { margin-left: 1px; }
.ld-hero__name { width: 391px; white-space: nowrap; margin-top: 18px; font-size: 56px; font-weight: 500; line-height: 64px; }
.ld-hero__name span { font-size: 42px; line-height: 48px; }
.ld-hero__name em { font-family: var(--serif); font-size: 52px; font-weight: 600; line-height: 60px; color: var(--gold); }
.ld-hero__role { margin-top: 8px; font-size: 22px; font-weight: 400; line-height: 29px; color: rgba(255, 255, 255, .85); }
.ld-hero__contact { margin-top: 25px; display: flex; flex-direction: column; gap: 10px; list-style: none; }
.ld-hero__contact li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.ld-hero__contact img { flex: none; }
.ld-hero__contact a { transition: color .3s var(--ease); }
.ld-hero__contact a:hover { color: var(--gold); }
.ld-hero__actions { display: flex; align-items: flex-start; gap: 12px; margin-top: 42px; }
.ld-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  line-height: 19px;
  color: var(--white);
  white-space: nowrap;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ld-btn--gold { padding: 8px 26px; background: var(--gold); }
.ld-btn--gold:hover { background: var(--gold-15); }
.ld-btn--outline { padding: 8px 24px; border: 1px solid rgba(255, 255, 255, .6); }
.ld-btn--outline img { transition: filter .3s var(--ease); }
.ld-btn--outline:hover { border-color: var(--white); background: var(--white); color: var(--navy-12); }
.ld-btn--outline:hover img { filter: brightness(0) saturate(100%) invert(10%) sepia(25%) saturate(2000%) hue-rotate(190deg); }

/* =========================================================
   NỘI DUNG
   ========================================================= */
.ld-main { padding: 74px 0 80px; }
.ld-main__inner { width: 1202px; margin: 0 auto; }
.ld-layout { display: flex; align-items: flex-start; gap: 126px; }
.ld-content { flex: none; width: 793px; display: flex; flex-direction: column; gap: 38px; }
.ld-sec { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; }
.ld-sec__title { font-size: 18px; font-weight: 600; line-height: 23px; color: var(--n-1400); }
.ld-sec > p { font-size: 13px; line-height: 18px; color: var(--n-1200); text-align: justify; }
.ld-list { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.ld-list li { display: flex; align-items: center; gap: 14px; font-size: 13px; line-height: 18px; color: var(--n-1200); }
.ld-check { flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50px; background: #fbf5f1; }
.ld-cols { display: flex; gap: 24px; }
.ld-cols .ld-list { flex: none; width: 385px; }

/* Cột phải */
.ld-aside { flex: none; width: 282px; display: flex; flex-direction: column; gap: 48px; }
.ld-toc { padding: 30px 22px; border-radius: 8px; background: var(--n-200); }
.ld-toc__head { display: flex; align-items: flex-start; justify-content: space-between; }
.ld-toc__title { font-size: 22px; font-weight: 600; line-height: 29px; color: #747474; }
.ld-toc__toggle { font-size: 12px; line-height: 16px; color: #8c8c8c; transition: color .3s var(--ease); }
.ld-toc__toggle:hover { color: var(--gold); }
/* Thân mục lục: thu gọn toàn bộ danh sách khi bấm "Ẩn" */
.ld-toc__body { margin-top: 30px; animation: ld-toc-in .35s var(--ease); }
.ld-toc__list { list-style: none; }
.ld-toc.is-collapsed .ld-toc__body { display: none; }
@keyframes ld-toc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ld-toc__title { display: flex; align-items: center; gap: 10px; }
.ld-toc__icon { display: none; flex-direction: column; justify-content: space-between; width: 16px; height: 12px; }
.ld-toc__icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
/* Trạng thái đã ẩn: chỉ còn icon 3 gạch + MỤC LỤC + Hiện */
.ld-toc.is-collapsed { padding-top: 16px; padding-bottom: 16px; }
.ld-toc.is-collapsed .ld-toc__head { align-items: center; }
.ld-toc.is-collapsed .ld-toc__title { font-size: 14px; line-height: 18px; text-transform: uppercase; letter-spacing: .5px; color: var(--navy-12); }
.ld-toc.is-collapsed .ld-toc__icon { display: flex; }
.ld-toc.is-collapsed .ld-toc__toggle { font-weight: 600; color: var(--gold); }
.ld-toc__head { cursor: default; }
.ld-toc__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  color: #a0a0a0;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.ld-toc__list a::before { content: ""; flex: none; width: 3px; height: 16px; background: #e5e0d6; transition: background-color .3s var(--ease); }
.ld-toc__list a:hover { color: var(--navy-12); }
.ld-toc__list a.is-active { font-weight: 700; color: var(--navy-12); }
.ld-toc__list a.is-active::before,
.ld-toc__list a:hover::before { background: var(--gold); }

.ld-services { display: flex; flex-direction: column; gap: 30px; }
.ld-services__title { font-size: 26px; font-weight: 600; line-height: 34px; color: var(--gold); }
.ld-services__list { list-style: none; }
.ld-services__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid #e5e0d6;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  color: #8c8c8c;
  transition: color .3s var(--ease), padding .3s var(--ease);
}
.ld-services__list img { transition: transform .3s var(--ease); }
.ld-services__list a:hover { color: var(--gold); }
.ld-services__list a:hover img { transform: translateX(3px); }

/* Bài viết của luật sư */
.ld-posts { margin-top: 34px; display: flex; flex-direction: column; gap: 40px; scroll-margin-top: 24px; }
.ld-posts__title { font-size: 26px; font-weight: 500; line-height: 31px; color: var(--navy-12); }
.ld-posts__slider { width: 1202px; }
.ld-posts__slider .slider__track { align-items: flex-start; }
.ld-post { flex: none; width: 384px; min-height: 331px; display: flex; flex-direction: column; gap: 24px; }
.ld-post__img { display: block; height: 190px; overflow: hidden; border-radius: 8px; }
.ld-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ld-post:hover .ld-post__img img { transform: scale(1.05); }
.ld-post__body { display: flex; flex-direction: column; }
.ld-post__title { font-size: 16px; font-weight: 500; line-height: 21px; color: var(--n-1400); }
.ld-post__title a { transition: color .3s var(--ease); }
.ld-post__title a:hover { color: var(--gold); }
.ld-post .news-item__meta { margin-top: 4px; }
.ld-post__more {
  align-self: flex-start;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: .07em;
  transition: color .3s var(--ease);
}
.ld-post__more:hover { color: var(--navy-12); }

/* =========================================================
   NHÂN SỰ
   ========================================================= */
.ld-staff { height: 952px; padding-top: 62px; background: #f7f7f7; }
.ld-staff .mix-title { color: var(--navy-12); }
.ld-staff__grid { grid-template-rows: none; grid-auto-rows: 337px; margin-top: 48px; }

.ld-hero__media { display: contents; }

/* =========================================================
   RESPONSIVE - Trang Chi tiết luật sư
   ========================================================= */
@media (max-width: 1239px) {
  .ld-hero__content { left: 32px; }
  .ld-hero__card { left: auto; right: 32px; width: 420px; }
  .ld-hero__photo { left: auto; right: calc(32px + 24.5px); }
  .ld-hero__glow { left: auto; right: -280px; }

  .ld-main__inner { width: calc(100% - 64px); }
  .ld-layout { gap: 40px; }
  .ld-content { flex: 1; width: auto; min-width: 0; }
  .ld-cols .ld-list { flex: 1; width: auto; }
  .ld-posts__slider { width: 100%; }
  .ld-post { width: calc((100% - 48px) / 3); }

  .ld-staff { height: auto; padding-bottom: 100px; }
  .ld-staff .mix-title { text-align: center; }
  .ld-staff__grid { grid-auto-rows: auto; }
}

/* ---------- ≤1023px: xếp dọc như mobile ---------- */
@media (max-width: 1023px) {
  .ld-hero { height: auto; padding: 27px 32px 0; background-size: 100% 100%; }
  .ld-hero__glow { display: none; }
  .ld-hero__content { position: static; width: auto; }
  .ld-hero__media { display: block; }
  .ld-hero__card { position: static; width: 100%; height: auto; aspect-ratio: 370 / 304.53; }
  .ld-hero__photo { left: 50%; right: auto; top: auto; bottom: 0; width: 76.34%; height: auto; aspect-ratio: 1; transform: translateX(-50%); }
  .ld-hero__name { width: auto; margin-top: 12px; }
  .ld-hero__contact { margin-top: 32px; }
  .ld-hero__actions { margin-top: 32px; }
  .ld-hero__media { position: relative; width: 100%; max-width: 486px; margin: 48px auto 0; }

  .ld-main { padding-top: 58px; background: #f7f7f7; }
  .ld-main__inner { display: flex; flex-direction: column; }
  .ld-layout,
  .ld-aside { display: contents; }
  .ld-toc { order: 1; }
  .ld-content { order: 2; margin-top: 40px; }
  .ld-posts { order: 3; margin-top: 58px; }
  .ld-services { order: 4; margin-top: 65px; }
  .ld-post { width: calc((100% - 24px) / 2); }

  .ld-staff { padding-top: 0; }
}

/* ---------- MOBILE (Figma 402px) ---------- */
@media (max-width: 767px) {
  .ld-hero {
    padding: 27px 16px 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 402 707' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-31.1 -70.7 89.879 -93.395 311 707)'><stop stop-color='rgba(6,54,121,1)' offset='0'/><stop stop-color='rgba(10,45,94,1)' offset='0.28243'/><stop stop-color='rgba(14,37,68,1)' offset='0.56486'/><stop stop-color='rgba(17,34,58,1)' offset='0.716'/><stop stop-color='rgba(17,31,50,1)' offset='0.87931'/><stop stop-color='rgba(11,24,43,1)' offset='1'/></radialGradient></defs></svg>");
  }
  .ld-hero__content .page-banner__crumb { margin-left: 0; }
  .ld-hero__name { font-size: 56px; line-height: 64px; white-space: normal; }
  .ld-hero__name span { font-size: clamp(26px, 7.96vw, 32px); line-height: 37px; }
  .ld-hero__name em { font-size: clamp(32px, 9.95vw, 40px); line-height: 46px; }
  .ld-hero__role { font-size: 18px; font-weight: 600; line-height: 23px; }
  .ld-hero__contact li { align-items: center; white-space: normal; }
  .ld-hero__contact li:last-child span { width: 343px; max-width: calc(100% - 27px); }
  .ld-hero__actions { justify-content: center; }
  .ld-hero__media { max-width: 370px; }

  .ld-main { padding-bottom: 58px; }
  .ld-main__inner { width: calc(100% - 32px); }
  .ld-list li { align-items: center; }
  .ld-cols { flex-direction: column; gap: 18px; }
  .ld-post { width: 100%; min-height: 305px; }
  .ld-post:nth-child(n+4) { display: none; }

  /* Nhân sự: 1 hàng 2 nhân sự (theo yêu cầu) */
  .ld-staff { padding-bottom: 120px; }
  .ld-staff .container { width: calc(100% - 32px); display: flex; flex-direction: column; }
  .ld-staff__grid { margin-top: 40px; }
}