/* =========================================================
   CREDENT - Trang Lĩnh vực hoạt động (PC)
   Dùng chung: .page-banner, .mix-title, .note-card, .ab-intro__* (gioi-thieu.css)
   ========================================================= */

/* =========================================================
   GIẢI PHÁP PHÁP LÝ
   ========================================================= */
.lv-intro { position: relative; z-index: 1; height: 813px; overflow-x: clip; }
.lv-intro__bg {
  position: absolute;
  left: calc(50% - 876px);
  top: -30px;
  width: 1752px;
  height: 1303px;
  background: url("../images/linh-vuc/bg-intro.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.lv-intro__text { position: absolute; left: calc(50% - 599px); top: 69px; width: 588px; display: flex; flex-direction: column; gap: 37px; }
.lv-intro__visual { position: absolute; left: calc(50% + 12px); top: 0; width: 708px; height: 588px; overflow: hidden; }
.lv-intro__group { position: absolute; left: 62px; top: 89px; width: 478px; height: 407px; }
.lv-intro__glow { position: absolute; left: -21px; top: -92px; pointer-events: none; }
.lv-intro__globe { position: absolute; left: 78px; top: 0; width: 395px; height: 395px; object-fit: cover; }
.lv-intro__tag {
  position: absolute;
  left: 329px;
  top: 75px;
  width: 120px;
  height: 38px;
  padding: 9px 19px;
  border-radius: 6px;
  background: var(--gold);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  color: var(--white);
  white-space: nowrap;
}
.lv-intro__note { left: 0; top: 2px; width: 329px; }
.lv-intro__note p { width: 259px; }

/* =========================================================
   DANH SÁCH LĨNH VỰC
   ========================================================= */
.lv-list { padding-bottom: 80px; background: #f7f7f7; }
.lv-list__inner { position: relative; z-index: 2; width: 1203px; margin: 0 auto; display: flex; flex-direction: column; }

/* Tab danh mục cuộn ngang */
.cat-tabs { position: relative; display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.cat-tabs__viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.cat-tabs.is-scrolled .cat-tabs__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 37px, #000 72px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent 37px, #000 72px, #000 calc(100% - 24px), transparent);
}
.cat-tabs.is-end .cat-tabs__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 37px, #000 72px);
          mask-image: linear-gradient(90deg, transparent 37px, #000 72px);
}
.cat-tabs.is-start.is-end .cat-tabs__viewport { -webkit-mask-image: none; mask-image: none; }
.cat-tabs__viewport::-webkit-scrollbar { display: none; }
.cat-tabs__viewport.is-dragging { cursor: grabbing; }
.cat-tabs__viewport.is-dragging .cat-tab { pointer-events: none; }
.cat-tabs__track { display: flex; align-items: flex-start; gap: 10px; width: max-content; }
.cat-tab {
  flex: none;
  height: 37px;
  padding: 8px 24px;
  border: 1px solid var(--gold);
  border-radius: 100px;
  background: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 19px;
  color: var(--n-1400);
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.cat-tab:hover { background: var(--gold-02); }
.cat-tab.is-active { height: 35px; border: 0; background: var(--gold); color: var(--white); }

.cat-tabs__arrow {
  flex: none;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  transition: background-color .3s var(--ease), opacity .3s var(--ease);
}
.cat-tabs__arrow img { display: block; transition: filter .3s var(--ease); }
.cat-tabs__arrow--next img { transform: scaleX(-1); }
.cat-tabs__arrow:hover { background: var(--gold); }
.cat-tabs__arrow--prev:hover { background: var(--gold); box-shadow: 10px 0 12px #f7f7f7; }
.cat-tabs__arrow:hover img { filter: brightness(0) invert(1); }
.cat-tabs__arrow:disabled { opacity: .35; pointer-events: none; }
/* Mũi tên lùi nổi đè lên đầu thanh tab, chỉ hiện khi đã cuộn sang phải */
.cat-tabs__arrow--prev { display: none; position: absolute; left: 0; top: 0; z-index: 2; background: #f7f7f7; box-shadow: 10px 0 12px #f7f7f7; }
.cat-tabs.is-scrolled .cat-tabs__arrow--prev,
.cat-tabs.is-end:not(.is-start) .cat-tabs__arrow--prev { display: block; }

/* Lưới bài viết */
.lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; margin-top: 40px; }
.lv-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px;
  border-radius: 5px;
  background: var(--white);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.lv-card.is-hidden { display: none; }
.lv-card:nth-child(n+7) { min-height: 476px; }
.lv-card:hover {
  transform: translateY(-4px);
  box-shadow: 5px 7px 19px rgba(158, 158, 158, .1), 19px 28px 34px rgba(158, 158, 158, .09), 43px 63px 46px rgba(158, 158, 158, .05), 77px 112px 54px rgba(158, 158, 158, .01);
}
.lv-card__img { display: block; height: 265px; overflow: hidden; border-radius: 5px; }
.lv-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lv-card:hover .lv-card__img img { transform: scale(1.05); }
.lv-card__body { display: flex; flex-direction: column; line-height: 18px; }
.lv-card__title { font-size: 18px; font-weight: 700; line-height: 23px; color: var(--navy-12); }
.lv-card__title a { transition: color .3s var(--ease); }
.lv-card__title a:hover { color: var(--gold); }
.lv-card__desc { margin-top: 6px; font-size: 14px; line-height: 18px; color: var(--text-body); text-align: justify; }
.lv-card__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: .05em;
  transition: color .3s var(--ease);
}
.lv-card__more:hover { color: var(--navy-12); }
.lv-empty { margin-top: 40px; font-size: 14px; text-align: center; color: var(--text-body); }

/* Phân trang */
.pager { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 48px; }
.pager__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: var(--gold-02);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: .6px;
  color: #d7a875;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.pager__item:hover,
.pager__item.is-active { background: var(--gold); color: var(--white); }

/* =========================================================
   NGUYÊN TẮC
   ========================================================= */
.lv-principles { padding: 100px 0; background: var(--white); }
.lv-principles__head { width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.lv-principles__head > p { font-size: 13px; line-height: 18px; color: var(--text-body); }
.lv-principles__grid { width: 1200px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.principle {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.principle:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(17, 34, 58, .08); }
.principle__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background: var(--gold-02);
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  color: var(--gold);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.principle:hover .principle__num { background: var(--gold); color: var(--white); }
.principle__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.principle__body h3 { font-size: 22px; font-weight: 500; line-height: 29px; color: var(--navy-12); }
.principle__body p { font-size: 13px; line-height: 18px; color: var(--text-body); text-align: justify; }

.cat-tabs__dots { display: none; }

/* =========================================================
   RESPONSIVE - Trang Lĩnh vực hoạt động
   ========================================================= */
@media (max-width: 1239px) {
  /* Giải pháp pháp lý: xếp dọc */
  .lv-intro { height: auto; padding-top: 69px; }
  .lv-intro__text { position: relative; left: auto; top: auto; width: min(704px, calc(100% - 64px)); margin: 0 auto; }
  .lv-intro__visual { position: relative; left: auto; width: 100%; height: 520px; margin-top: 20px; }
  .lv-intro__group { left: 50%; margin-left: -239px; top: 40px; }

  /* Danh sách */
  .lv-list { padding-top: 40px; }
  .lv-list__inner { width: calc(100% - 64px); }
  .lv-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .lv-card:nth-child(n+7) { min-height: 0; }
  .lv-card__img { height: auto; aspect-ratio: 343 / 265; }

  /* Nguyên tắc */
  .lv-principles { padding: 80px 0; }
  .lv-principles__head { width: min(860px, calc(100% - 64px)); }
  .lv-principles__grid { width: calc(100% - 64px); }
}

@media (max-width: 1023px) {
  .lv-principles__grid { grid-template-columns: 1fr; }
}

/* ---------- MOBILE (Figma 402px) ---------- */
@media (max-width: 767px) {
  /* Giải pháp pháp lý */
  .lv-intro { padding-top: 58px; }
  .lv-intro__bg {
    left: calc(50% - 305px);
    top: -20px;
    width: 610px;
    height: 1734px;
    background-image: url("../images/linh-vuc/mobile/bg-intro.webp");
  }
  .lv-intro__text { width: calc(100% - 32px); }
  .lv-intro__visual { height: auto; margin-top: 58px; padding: 0 16px; overflow: visible; }
  .lv-intro__group { position: relative; left: auto; top: auto; width: 100%; max-width: 371px; height: 447px; margin: 0 auto; }
  .lv-intro__glow { left: -101.8px; top: -25.3px; }
  .lv-intro__globe { left: 1px; top: 71px; width: 365.375px; height: 365.375px; }
  .lv-intro__tag { left: auto; right: 5px; top: 75px; }
  .lv-intro__note { top: 0; }

  /* Danh sách */
  .lv-list { padding-top: 189px; padding-bottom: 58px; }
  .lv-list__inner { width: calc(100% - 32px); }
  .cat-tabs { flex-wrap: wrap; gap: 0; margin-top: 27px; margin-right: -16px; }
  .cat-tabs__arrow { display: none !important; }
  .cat-tabs__viewport { flex: 0 0 100%; cursor: auto; -webkit-mask-image: none !important; mask-image: none !important; }
  .cat-tabs__track { gap: 8px; padding-right: 16px; }
  .cat-tab { height: 35px; padding: 7px 11px; }
  .cat-tab.is-active { padding: 8px 12px; }
  /* Thứ tự tab theo thiết kế mobile */
  .cat-tab { order: 3; }
  .cat-tab[data-filter-btn="all"] { order: 0; }
  .cat-tab[data-filter-btn="doanh-nghiep"] { order: 1; }
  .cat-tab[data-filter-btn="so-huu-tri-tue"] { order: 2; }
  .cat-tabs__dots { display: flex; flex: 0 0 100%; justify-content: center; margin: 26px 16px 0 0; }
  .lv-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  /* Chiều cao thẻ theo thiết kế mobile */
  .lv-card { min-height: 473px; }
  .lv-card:nth-child(n+4) { min-height: 496px; }
  .lv-card:nth-child(n+7) { min-height: 476px; }
  .lv-card__img { aspect-ratio: auto; height: 265px; }
  .pager { margin-top: 32px; }

  /* Nguyên tắc */
  .lv-principles { padding: 59px 0 88px; }
  .lv-principles__head { width: calc(100% - 32px); }
  .lv-principles__head > p { text-align: left; }
  .lv-principles__grid { width: calc(100% - 32px); gap: 24px; }
  .principle { padding: 24px; }
}