/* ==========================================================================
   section-4-linhvuc.css — Lĩnh vực kinh doanh (Figma node 1134:1206)
   Nền đỏ brand + dải cần cẩu blend color-burn; tiêu đề trái / intro phải;
   4 thẻ trắng liền nhau đánh số 01–04.
   ========================================================================== */

.linhvuc {
  position: relative;
  background-color: var(--dsh-red);
  color: var(--dsh-white);
  padding-block: clamp(64px, 7vw, 120px);
  overflow: hidden;
}

/* Dải cần cẩu chạy ngang phía sau (Figma: opacity 18%, mix-blend color-burn) */
.linhvuc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: .18;
  mix-blend-mode: color-burn;
  pointer-events: none;
  user-select: none;
}

.linhvuc > .container { position: relative; z-index: 1; }

/* -------- Đầu section: tiêu đề trái · intro phải -------- */
.linhvuc-head { margin-bottom: clamp(2rem, 4vw, 4rem); }

.linhvuc-title {
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.06;
  margin: 0;
}

.linhvuc-intro {
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--dsh-white);
  margin: 0;
}

/* -------- Dải 4 thẻ trắng liền nhau -------- */
.linhvuc-grid {
  background-color: rgba(13, 37, 69, .08);
  border-radius: var(--radius);
  overflow: hidden;
}

.linhvuc-item {
  position: relative;
  height: 100%;
  background-color: var(--dsh-white);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 3rem);
  /* Chuyển động mượt cho hiệu ứng spotlight khi hover */
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    filter var(--transition-base),
    opacity var(--transition-base);
}

/* Viền vàng phát sáng bao quanh thẻ được hover */
.linhvuc-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  pointer-events: none;
  transition: border-color var(--transition-base);
}

/* Gạch đỏ chạy ngang đáy thẻ khi hover */
.linhvuc-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background-color: var(--dsh-red);
  transition: width var(--transition-base);
  z-index: 1;
}


/* -------- Hiệu ứng spotlight: làm nổi thẻ đang hover, làm mờ các thẻ còn lại -------- */
/* Khi trỏ vào dải thẻ, mọi thẻ tối & mờ đi (nền) */
.linhvuc-grid:hover .linhvuc-item {
  opacity: .55;
  filter: brightness(.82) blur(1.5px);
}

/* Riêng thẻ đang hover thì nổi bật: rõ nét, phóng nhẹ, viền vàng phát sáng */
.linhvuc-grid .linhvuc-item:hover {
  opacity: 1;
  filter: none;
  transform: translateY(-8px) scale(1.06);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(154, 18, 32, .5);
  z-index: 2;
}

.linhvuc-grid .linhvuc-item:hover::before {
  border-color: var(--dsh-red);
  box-shadow:
    0 0 20px 2px rgba(154, 18, 32, .55),
    inset 0 0 12px rgba(154, 18, 32, .22);
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
  .linhvuc-item,
  .linhvuc-grid:hover .linhvuc-item,
  .linhvuc-grid .linhvuc-item:hover {
    transition: none;
    transform: none;
    filter: none;
  }
}

/* Thân thẻ: kéo dài hết chiều cao để dãy tag của 4 thẻ luôn thẳng hàng dưới đáy */
.linhvuc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.linhvuc-num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 3.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--dsh-red-bright);
}

.linhvuc-item h3 {
  color: var(--dsh-ink);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.linhvuc-item p {
  color: var(--dsh-slate);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.45;
  margin-bottom: var(--space-4);
}

/* Thẻ tag viền mảnh (Figma: hộp chữ nhật, không bo tròn) */
.linhvuc-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: auto;
}

/* Cỡ chữ co theo bề rộng cột để 4 tag luôn nằm gọn trên một hàng */
.lv-tag {
  border: 1px solid rgba(13, 37, 69, .1);
  color: var(--dsh-slate);
  font-size: clamp(.625rem, .72vw, .875rem);
  line-height: 1;
  padding: .45em .6em;
  white-space: nowrap;
}

/* Thẻ là link tới trang thẻ: bỏ gạch chân, hover viền đỏ brand */
a.lv-tag {
  text-decoration: none;
  transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

a.lv-tag:hover {
  color: var(--dsh-red);
  border-color: var(--dsh-red);
  background-color: rgba(154, 18, 32, .06);
}

/* Khi các thẻ xếp chồng 1 cột, thêm đường kẻ ngăn cách */
@media (max-width: 767.98px) {
  .linhvuc-col + .linhvuc-col .linhvuc-item {
    border-top: 1px solid rgba(13, 37, 69, .1);
  }
}