/* CSS bổ sung cho v2: những gì template2 vốn dựa vào JS của Elementor (sticky header,
   menu mobile, off-canvas) — ở đây làm bằng CSS + state của React. */

.smartix-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.smartix-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.smartix-burger span {
  width: 22px;
  height: 2px;
  background: #fff;
}

.smartix-mobile-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #020617;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 20px 20px;
}
.smartix-mobile-menu .elementor-nav-menu > li > a,
.smartix-mobile-menu .sub-menu a {
  display: block;
  padding: 10px 0;
  color: #fff;
}
.smartix-mobile-menu .sub-menu {
  padding-left: 16px;
  opacity: 0.8;
}

/* Thẻ trong lưới Cards có thể bấm được */
.smartix-card-link {
  text-decoration: none;
}

/* Heading giữa trang: section gốc (34b4b2a) padding 120px trên/dưới và chữ 3.2rem,
   dùng cho tiêu đề dài thì quá trống — thu lại. Selector khớp specificity của Elementor. */
.elementor-17 .elementor-element.elementor-element-34b4b2a.smartix-section-head {
  --padding-top: 5rem;
  --padding-bottom: 2rem;
  --align-items: center;
}
.elementor-17 .smartix-section-head .elementor-element.elementor-element-cffdf7c .elementor-heading-title {
  font-size: 2.2rem;
  line-height: 1.25;
}
.elementor-17 .smartix-section-head .elementor-element.elementor-element-cffdf7c {
  width: 100%;
  max-width: 100%;
}

/* Mô tả phụ trong thẻ số 01–04 */
.smartix-num-text {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #cbd5e1;
  font-weight: 400;
}

/* Dải số liệu */
.smartix-stats {
  --content-width: 1140px;
  --padding-top: 4rem;
  --padding-bottom: 2.5rem;
  --padding-left: 20px;
  --padding-right: 20px;
}
.smartix-stats > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
  justify-items: stretch;
}
.smartix-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.smartix-stat:first-child {
  border-left: 0;
}
.smartix-stat-num {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: #7ec8ee;
}
.smartix-stat-cap {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #cbd5e1;
}
@media (max-width: 767px) {
  .smartix-stats > .e-con-inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .smartix-stat:nth-child(odd) {
    border-left: 0;
  }
}

/* Đoạn nội dung dài (mục tiêu dịch vụ, nội dung bài viết) */
.smartix-prose {
  --content-width: 1140px;
  --padding-top: 0;
  --padding-bottom: 4rem;
  --padding-left: 20px;
  --padding-right: 20px;
}
.smartix-prose .deha-post-content p {
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Danh sách gạch đầu dòng trong khối xen kẽ: template gốc không có, tăng độ tương phản */
.elementor-element-1ea356ca .elementor-icon-list-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
}
.elementor-element-1ea356ca .elementor-icon-list-icon i {
  color: #fff;
}

/* ---- Hiệu ứng xuất hiện khi cuộn (class do components/v2/Reveal.tsx gắn) ---- */
.smartix-reveal {
  opacity: 0;
  transform: translateY(28px);
}
.smartix-reveal.is-visible {
  animation: smartixReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms) forwards;
}
@keyframes smartixReveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Nội dung slide hero: chạy lại mỗi lần slide được active (giống reveal của template2) */
.elementor-element-1b4059d .swiper-slide-active .e-con-inner > * {
  animation: smartixReveal 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.elementor-element-1b4059d .swiper-slide-active .e-con-inner > *:nth-child(1) {
  animation-delay: 0.05s;
}
.elementor-element-1b4059d .swiper-slide-active .e-con-inner > *:nth-child(2) {
  animation-delay: 0.15s;
}
.elementor-element-1b4059d .swiper-slide-active .e-con-inner > *:nth-child(3) {
  animation-delay: 0.25s;
}
.elementor-element-1b4059d .swiper-slide-active .e-con-inner > *:nth-child(4) {
  animation-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .smartix-reveal,
  .smartix-reveal.is-visible,
  .elementor-element-1b4059d .swiper-slide-active .e-con-inner > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Chi tiết bài viết: template2 có cột nút share (cần JS) bên trái — v2 bỏ cột đó.
   Cột nội dung gốc rộng 60% và section canh giữa nên tự về giữa, không cần override width. */
/* Bài chưa có nội dung chi tiết (chỉ có excerpt) thì hiển thị như đoạn dẫn */
.elementor-1319 .deha-post-content > p:only-child {
  font-size: 1.2rem;
  line-height: 1.9;
  color: #e2e8f0;
}

/* Khối dịch vụ/giải pháp xen kẽ: template2 đặt sticky (top, offset 120, sticky_parent)
   cho từng thẻ để chúng xếp chồng lên nhau khi cuộn. Elementor làm bằng JS —
   ở đây dùng position:sticky thuần CSS, hiệu ứng giống mà không cần thư viện. */
.elementor-element-ebe9cab > .e-con {
  position: sticky;
  top: 120px;
}
@media (max-width: 767px) {
  .elementor-element-ebe9cab > .e-con {
    top: 84px;
  }
}

/* Card tin tức (loop-item 1301): ô grid đã cao bằng nhau nhưng khung viền bên trong
   co theo nội dung nên 3 thẻ so le → kéo khung đầy ô, khối text giãn, nút sát đáy. */
.elementor-1301 .elementor-element.elementor-element-fbe4967,
.elementor-1301 .elementor-element.elementor-element-fbe4967 > .e-con-inner {
  height: 100%;
}
.elementor-1301 .elementor-element.elementor-element-2f47aa4 {
  flex-grow: 1;
}
.elementor-1301 .elementor-element.elementor-element-70fa7d8 {
  margin-top: auto;
}


/* Mô tả dưới tiêu đề khối xen kẽ (mẫu có đoạn dẫn này, template2 thì không) */
.smartix-eco-text p {
  max-width: 560px;
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.7;
  color: #94a3b8;
}

/* ---- Nội dung bài viết (content/articles.ts render qua components/Prose.tsx) ---- */
.elementor-1319 .deha-post-content h2 {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 1.6rem;
  line-height: 1.3;
  color: #fff;
  margin: 2.5rem 0 0.9rem;
}
.elementor-1319 .deha-post-content h3 {
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: #e2e8f0;
  margin: 1.8rem 0 0.6rem;
}
.elementor-1319 .deha-post-content p {
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0 0 1rem;
}
.elementor-1319 .deha-post-content ul {
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  list-style: none;
}
.elementor-1319 .deha-post-content li {
  position: relative;
  /* theme đặt sẵn padding-left cho li, bỏ đi để chấm tròn nằm sát chữ */
  padding-left: 0;
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 0.6rem;
}
.elementor-1319 .deha-post-content li::before {
  content: "";
  position: absolute;
  left: -1.2rem;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8dc441;
}
.elementor-1319 .deha-post-content strong {
  color: #fff;
  font-weight: 600;
}
.elementor-1319 .deha-post-content a {
  color: #8dc441;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor-1319 .deha-post-content a:hover {
  color: #fff;
}