/* node — trang chi tiết node trong layout site mới (templates/content/
   node--lpc-site*.html.twig). Nạp SAU lpc-design-system.css. */

/* Hero: tiêu đề bài/dự án dài hơn tiêu đề trang giới thiệu nên nhỏ hơn. */
.lpc-node-hero .hero-content { max-width: 900px; }
.lpc-node-title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.15; }
.lpc-node-parent { color: inherit; text-decoration: none; }
.lpc-node-parent:hover { color: #fff; text-decoration: underline; }

/* Nội dung soạn trong trình soạn thảo (body của dự án, bài tin). */
.lpc-prose { max-width: 820px; font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
.row .lpc-prose { max-width: none; }
.lpc-prose > :first-child { margin-top: 0; }
.lpc-prose h2, .lpc-prose h3, .lpc-prose h4 { margin: 2rem 0 .75rem; line-height: 1.3; }
.lpc-prose h2 { font-size: 1.5rem; }
.lpc-prose h3 { font-size: 1.25rem; }
.lpc-prose h4 { font-size: 1.0625rem; }
.lpc-prose a { color: var(--lpc-blue); }
.lpc-prose img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius); }
.lpc-prose figure { margin: 1.5rem 0; }
.lpc-prose figcaption { margin-top: .5rem; font-size: .875rem; color: var(--bs-secondary-color); text-align: center; }
.lpc-prose iframe, .lpc-prose video { max-width: 100%; }
.lpc-prose table { display: block; max-width: 100%; overflow-x: auto; margin-bottom: 1rem; border-collapse: collapse; }
.lpc-prose th, .lpc-prose td { padding: .5rem .75rem; border: 1px solid var(--bs-border-color); }
.lpc-prose blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--lpc-red); color: var(--bs-secondary-color); }

/* Khung thông số bên cạnh nội dung dự án. */
.lpc-facts {
  position: sticky; top: calc(var(--lpc-header-h) + 1.5rem);
  padding: 1.5rem; border-left: 3px solid var(--lpc-red);
  background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius);
}

/* ---------- Nội dung Layout Builder của site cũ (.lpc-legacy) ----------
   Các trang Dịch vụ, Giải pháp công nghệ soạn bằng Layout Builder với markup
   Bootstrap của theme cũ (lpc), nhiều chỗ có màu viết thẳng trong style và
   nền trắng. Giữ khối này ở giao diện sáng kể cả khi site đang ở chế độ tối
   để chữ không bị chìm. */
.lpc-legacy {
  --bs-body-color: #333; --bs-heading-color: #0B1F44; --bs-secondary-color: #5f6b7a;
  --bs-body-bg: #fff; --bs-tertiary-bg: #F4F6F9; --bs-border-color: #dee2e6;
  color: var(--bs-body-color); background: var(--bs-body-bg);
  padding-bottom: var(--lpc-section-y);
}
.lpc-legacy .text-secondary { color: var(--bs-secondary-color) !important; }
.lpc-legacy .text-align-justify { text-align: justify; }
.lpc-legacy img { max-width: 100%; height: auto; }
.lpc-legacy .accordion { --bs-accordion-bg: #fff; --bs-accordion-color: #333; --bs-accordion-btn-color: #0B1F44; }

/* Thẻ dịch vụ con: ảnh phủ lớp màu, rê chuột thì phóng ảnh và bỏ lớp phủ
   (theo scss/_service-section.scss của theme lpc). */
.lpc-legacy .services-section .service-card { position: relative; overflow: hidden; }
.lpc-legacy .services-section .service-card-inner { transition: transform 1s ease-in-out; }
.lpc-legacy .services-section .service-card .overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center; text-align: center;
  background: rgba(11, 31, 68, .5); transition: opacity .5s ease-in-out;
}
.lpc-legacy .services-section .service-card:hover .overlay { opacity: 0; }
.lpc-legacy .services-section .service-card:hover .service-card-inner { transform: scale(1.1); }
.lpc-legacy .group-item .ratio { overflow: hidden; border-radius: var(--bs-border-radius); }
.lpc-legacy .group-item img { transition: transform .6s ease; }
.lpc-legacy .group-item:hover img { transform: scale(1.05); }

/* Dải "Cam kết hiệu quả..." cuối trang: chữ trắng trên ảnh nền của section. */
.lpc-legacy .cta-banner { position: relative; }
.lpc-legacy .cta-banner .btn-cta { color: var(--lpc-navy) !important; }
@media (prefers-reduced-motion: reduce) {
  .lpc-legacy .services-section .service-card-inner,
  .lpc-legacy .group-item img { transition: none; }
}