/* ==========================================================================
   KBW Digital — Trang dịch vụ: Marketing online trọn gói
   Stylesheet RIÊNG của dich-vu-marketing-online.php.
   Nạp sau style.css, toàn bộ class dùng prefix .dm-* để không xung đột.

   1. Tokens riêng
   2. Breadcrumb
   3. Hero
   4. Button
   5. Flow diagram (brand → kênh → kết quả)
   6. Responsive
   7. Reduced motion
   8. Section head
   9. Hạng mục dịch vụ
  11. Triển khai đúng trọng tâm
  12. Khách hàng
  13. Quy trình triển khai
  14. Form thu lead
   ========================================================================== */

/* ==========================================================================
   1. TOKENS RIÊNG — kế thừa palette từ style.css
   ========================================================================== */

.page-digital-marketing {
  --dm-bg: var(--slate-50);
  --dm-bg-soft: var(--blue-100);
  --dm-accent: var(--blue-600);
  --dm-accent-soft: var(--blue-100);
  --dm-mint: var(--mint-600);
  --dm-mint-soft: var(--mint-100);
}

/* ==========================================================================
   2. BREADCRUMB
   ========================================================================== */

.dm-crumb {
  position: relative;
  z-index: 2;
}

.dm-crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

.dm-crumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.dm-crumb__link {
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.dm-crumb__link:hover,
.dm-crumb__link:focus-visible { color: var(--dm-accent); }

.dm-crumb__sep {
  display: inline-flex;
  color: var(--slate-300);
}

.dm-crumb__current {
  color: var(--dm-accent);
  font-weight: 600;
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

.dm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--space-3));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--dm-bg) 55%, var(--dm-bg-soft) 100%);
}

.dm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.dm-hero__aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(40% 34% at 16% 10%, rgba(47, 107, 255, 0.20), transparent 68%),
    radial-gradient(36% 32% at 84% 16%, rgba(0, 211, 167, 0.16), transparent 70%),
    radial-gradient(44% 38% at 50% 98%, rgba(91, 139, 255, 0.18), transparent 72%);
  filter: blur(10px);
}

.dm-hero__spot {
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(1100px, 92%);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.5) 46%, transparent 72%);
}

.dm-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.dm-hero__title {
  max-width: 40ch;
  margin: 0 auto;
  font-size: clamp(1.65rem, 1rem + 2.15vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.dm-hero__title-lead,
.dm-hero__title-accent { display: block; }

.dm-hero__title-lead { color: var(--ink-800); }
.dm-hero__title-accent { color: var(--dm-accent); }

.dm-hero__lede {
  max-width: 64ch;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--text-soft);
  text-wrap: pretty;
}

.dm-hero__lede strong {
  color: var(--ink-800);
  font-weight: 700;
}

.dm-hero__cta { margin-top: var(--space-6); }

.dm-hero__cta-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: var(--space-3) 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-faint);
}

.dm-hero__cta-sub svg { flex: none; }

/* ==========================================================================
   4. BUTTON
   ========================================================================== */

.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.dm-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
}

.dm-btn--primary:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
}

.dm-btn:focus-visible {
  outline: 3px solid rgba(29, 78, 216, 0.45);
  outline-offset: 3px;
}

/* ==========================================================================
   5. FLOW DIAGRAM — thương hiệu → kênh → kết quả
   ========================================================================== */

.dm-flow {
  width: 100%;
  margin-top: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}

.dm-flow__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  align-items: center;
  text-align: left;
}

/* Lớp SVG nằm dưới các node, JS vẽ path theo vị trí thực tế */
.dm-flow__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.dm-wire {
  fill: none;
  stroke: rgba(47, 107, 255, 0.28);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dm-wire--result { stroke: rgba(0, 168, 138, 0.32); }

/* Đường ẩn chỉ để gói dữ liệu chạy theo, không hiển thị nét */
.dm-wire--ghost {
  stroke: none;
  fill: none;
}

/* Gói dữ liệu chạy trên đường nối */
.dm-packet { fill: var(--dm-accent); }
.dm-packet--result { fill: var(--dm-mint); }

.dm-flow__col {
  position: relative;
  z-index: 1;
}

.dm-flow__label {
  margin: 0 0 var(--space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
  text-align: center;
}

.dm-flow__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Node chung --- */

.dm-node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--fs-xs);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-800);
  /* box-shadow khởi điểm trong suốt để GSAP nội suy được khi phát sáng */
  box-shadow: 0 0 0 0 rgba(47, 107, 255, 0);
  transition: border-color var(--dur) var(--ease);
}

.dm-node__icon {
  /* GSAP animate transform trên phần tử này nên không đặt transition
     để hai bên không cùng nội suy transform */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--dm-accent-soft);
  color: var(--dm-accent);
}

/* --- Node nhóm kênh: đầu nhóm + danh sách kênh con --- */

.dm-node--channel {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4);
}

.dm-node__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-800);
}

.dm-node__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-node__tags li {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* --- Node thương hiệu --- */

.dm-node--brand {
  align-items: center;
  padding: var(--space-5) var(--space-4);
  border-color: var(--dm-accent);
  background: linear-gradient(180deg, #fbfcff 0%, #ffffff 60%);
}

.dm-node__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--dm-accent-soft);
  color: var(--dm-accent);
}

.dm-node__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dm-node__text b {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.dm-node__text span {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-faint);
}

/* --- Node kết quả: tông mint để phân biệt với kênh --- */

.dm-node--result .dm-node__icon {
  background: var(--dm-mint-soft);
  color: var(--dm-mint);
}

.dm-node--result:hover { border-color: var(--dm-mint); }
.dm-node--channel:hover { border-color: var(--dm-accent); }

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .dm-flow__stage {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Về một cột thì bỏ đường nối, sơ đồ đọc theo thứ tự dọc */
  .dm-flow__wires { display: none; }

  .dm-node--brand { justify-content: center; }
}

@media (max-width: 560px) {
  .dm-hero__lede { font-size: var(--fs-xs); }
  .dm-btn--primary { width: 100%; }
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dm-btn { transition: none; }
  .dm-btn--primary:hover { transform: none; }
}

/* ==========================================================================
   8. SECTION HEAD — dùng chung cho các section của trang này
   ========================================================================== */

.dm-head {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}

.dm-head__eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
}

.dm-head__title {
  margin: var(--space-3) auto 0;
  max-width: 34ch;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink-800);
}

.dm-head__lede {
  margin: var(--space-4) auto 0;
  max-width: 70ch;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* --- Nút chuyển đổi View: Danh sách cuộn vs Lưới tổng quan --- */
.dm-view-switch {
  display: inline-flex;
  align-items: center;
  margin-top: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  padding: 4px;
  background: var(--slate-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 2px rgba(10, 20, 36, 0.04);
}

.dm-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
}

.dm-view-btn:hover {
  color: var(--ink-900);
}

.dm-view-btn.is-active {
  background: #ffffff;
  color: var(--dm-accent);
  box-shadow: 0 2px 8px rgba(10, 20, 36, 0.08), 0 1px 2px rgba(10, 20, 36, 0.04);
}

.dm-view-btn__icon {
  display: inline-block;
  flex-shrink: 0;
  color: currentColor;
}

/* ==========================================================================
   9. HẠNG MỤC DỊCH VỤ
   ========================================================================== */

.dm-services {
  padding: var(--section-y) 0;
  background:
    radial-gradient(50% 36% at 50% 0%, rgba(47, 107, 255, 0.06), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--dm-bg) 100%);
}

/* Danh sách xếp chồng: mỗi card dính lại, card sau trượt lên phủ card trước */
.dm-services__list {
  --stack-top: calc(var(--header-h) + 1.5rem);
  --stack-step: 12px;
  --stack-gap: 14vh;

  display: block;
  margin: clamp(2.25rem, 1.6rem + 2vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Khoảng cuộn giữa các card; card cuối không cần thêm khoảng */
.dm-services__list > .dm-service {
  margin-bottom: var(--stack-gap);
}

.dm-services__list > .dm-service:last-child {
  margin-bottom: 0;
}

/* Mỗi hạng mục là một hàng: ảnh bên trái, nội dung bên phải */
.dm-service {
  position: sticky;
  /* Mỗi card dừng thấp hơn card trước một bậc để thấy được mép card bên dưới */
  top: calc(var(--stack-top) + var(--stack-i, 0) * var(--stack-step));

  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Nền phải đục hoàn toàn để không lộ nội dung card bên dưới */
  background: #fff;
  box-shadow: 0 -8px 24px -18px rgba(10, 20, 36, 0.35);
  transform-origin: top center;
  transition: border-color var(--dur) var(--ease);
}

.dm-service:hover { border-color: var(--dm-accent); }

/* --- Cột ảnh --- */

.dm-service__media {
  min-width: 0;
}

.dm-service__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Khung giữ chỗ khi chưa có ảnh thật */
.dm-service__ph {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 190px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--slate-100) 100%);
}

.dm-service__ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--dm-accent-soft);
  color: var(--dm-accent);
}

/* --- Cột nội dung --- */

.dm-service__body {
  min-width: 0;
}

.dm-service__name {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink-800);
}

.dm-service__lead {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.875rem;
  line-height: 1.68;
  color: var(--text-soft);
  text-wrap: pretty;
}

.dm-service__tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
  list-style: none;
  align-content: start;
}

.dm-service__tasks li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.dm-service__tasks svg {
  flex: none;
  margin-top: 4px;
  color: var(--dm-mint);
}

/* --- Chế độ hiển thị Lưới tổng quan (Grid View) --- */
.dm-services__list[data-view="grid"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

.dm-services__list[data-view="grid"] > .dm-service {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin-bottom: 0 !important;
  transform: none !important;
  box-shadow: 0 4px 20px -6px rgba(10, 20, 36, 0.08);
  grid-template-columns: 1fr;
  gap: var(--space-4);
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: dmGridCardIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dmGridCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dm-services__list[data-view="grid"] .dm-service__media {
  height: 180px;
  flex-shrink: 0;
}

.dm-services__list[data-view="grid"] .dm-service__ph {
  height: 100%;
  min-height: 100%;
}

.dm-services__list[data-view="grid"] .dm-service__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dm-services__list[data-view="grid"] .dm-service__name {
  font-size: 1.15rem;
  line-height: 1.35;
}

.dm-services__list[data-view="grid"] .dm-service__lead {
  font-size: 0.84rem;
  line-height: 1.6;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--text-soft);
}

.dm-services__list[data-view="grid"] .dm-service__tasks {
  grid-template-columns: 1fr;
  gap: 0.45rem;
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px dashed var(--border);
}

.dm-services__list[data-view="grid"] .dm-service__tasks li {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-soft);
}

@media (max-width: 1050px) {
  .dm-services__list[data-view="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dm-services__list[data-view="grid"] {
    grid-template-columns: 1fr;
  }

  .dm-services__list[data-view="grid"] .dm-service__media {
    height: 160px;
  }
}

@media (max-width: 900px) {
  /* Mobile: bỏ xếp chồng, card xếp dọc bình thường */
  .dm-services__list { --stack-gap: var(--space-4); }

  .dm-service {
    position: static;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    box-shadow: none;
  }

  .dm-service__ph { min-height: 160px; }
}

@media (max-width: 560px) {
  .dm-service { padding: var(--space-4); }
  .dm-service__tasks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. REDUCED MOTION cho phần xếp chồng
   Đặt ở cuối file để override được rule sticky khai báo phía trên.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dm-services__list { --stack-gap: var(--space-4); }

  .dm-service {
    position: static;
    box-shadow: none;
  }
}

/* ==========================================================================
   11. TRIỂN KHAI ĐÚNG TRỌNG TÂM
   ========================================================================== */

.dm-focus {
  padding: var(--section-y) 0;
  background:
    radial-gradient(48% 34% at 14% 6%, rgba(0, 211, 167, 0.07), transparent 70%),
    linear-gradient(180deg, var(--dm-bg) 0%, #ffffff 100%);
}

.dm-focus__grid { align-items: center; }

.dm-focus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.25rem, 1.6rem + 2vw, 3rem);
}

.dm-focus__sub {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-400);
}

/* --- Cách triển khai --- */

.dm-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.dm-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.dm-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--dm-accent-soft);
  color: var(--dm-accent);
}

.dm-step__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-800);
}

.dm-step__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  line-height: 1.68;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* --- Nút CTA trong cột trái --- */

.dm-focus__cta {
  margin-top: var(--space-5);
}

/* --- Cột ảnh minh hoạ --- */

.dm-focus__media {
  min-width: 0;
}

.dm-focus__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Khung giữ chỗ khi chưa có ảnh thật */
.dm-focus__ph {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, var(--slate-100) 100%);
}

@media (max-width: 900px) {
  .dm-focus__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dm-focus__cta { width: 100%; }

  .dm-step {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   12. KHÁCH HÀNG — hai dòng logo chạy ngược chiều
   ========================================================================== */

.dm-clients {
  --dm-logo-gap: clamp(1rem, 0.6rem + 1.2vw, 2rem);
  --dm-marquee-dur: 34s;

  /* Section trên kết thúc bằng nền trắng nên cần đường kẻ và nền hơi khác
     màu, nếu không hai section dính thành một vùng trắng liền. */
  padding: clamp(3rem, 2rem + 3vw, 5rem) 0;
  border-top: 1px solid var(--border);
  overflow: hidden;
  background: linear-gradient(180deg, var(--dm-bg) 0%, #ffffff 60%, var(--dm-bg) 100%);
}

.dm-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--dm-logo-gap);
  margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem);
}

.dm-marquee__row {
  position: relative;
  overflow: hidden;
  /* Mờ dần hai mép để dải logo không bị cắt cứng */
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.dm-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--dm-logo-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

/* Danh sách được nhân đôi nên dịch 50% là lặp liền mạch.
   Dòng 1 chạy sang phải, dòng 2 chạy sang trái. */
.dm-marquee__row.is-rtl .dm-marquee__track {
  animation: dm-marquee-right var(--dm-marquee-dur) linear infinite;
}

.dm-marquee__row.is-ltr .dm-marquee__track {
  animation: dm-marquee-left var(--dm-marquee-dur) linear infinite;
}

.dm-marquee__row:hover .dm-marquee__track,
.dm-marquee__row:focus-within .dm-marquee__track {
  animation-play-state: paused;
}

@keyframes dm-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--dm-logo-gap) / 2), 0, 0); }
}

@keyframes dm-marquee-right {
  from { transform: translate3d(calc(-50% - var(--dm-logo-gap) / 2), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* --- Ô logo --- */

.dm-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(140px, 15vw, 190px);
  height: clamp(72px, 8vw, 92px);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.dm-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Logo khách hàng nhiều màu, làm xám nhẹ để dải logo không rối */
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.dm-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.dm-logo__text {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-500);
  text-align: center;
}

/* Ô giữ chỗ khi chưa có logo thật */
.dm-logo__ph {
  display: block;
  width: 68%;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
}

@media (prefers-reduced-motion: reduce) {
  .dm-marquee__row {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .dm-marquee__track { animation: none; }
}

/* ==========================================================================
   13. QUY TRÌNH TRIỂN KHAI
   ========================================================================== */

.dm-process {
  padding: var(--section-y) 0;
  background:
    radial-gradient(46% 32% at 86% 8%, rgba(47, 107, 255, 0.06), transparent 70%),
    linear-gradient(180deg, var(--dm-bg) 0%, #ffffff 100%);
}

.dm-flowline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 0.9vw, 1.5rem);
  margin: clamp(2.5rem, 1.8rem + 2vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Đường nối ngang chạy qua tâm các số thứ tự */
.dm-flowline::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--border-strong) 0 6px,
    transparent 6px 12px
  );
}

.dm-flowline__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color var(--dur) var(--ease);
}

.dm-flowline__item:hover { border-color: var(--dm-accent); }

.dm-flowline__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: -2.15rem;
  border: 1px solid var(--dm-accent);
  border-radius: 50%;
  background: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--dm-accent);
  font-variant-numeric: tabular-nums;
}

.dm-flowline__title {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-800);
}

.dm-flowline__desc {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* Mốc thời gian luôn nằm sát chân card để các card thẳng hàng */
.dm-flowline__time {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--dm-mint);
}

.dm-flowline__time svg { flex: none; }
@media (max-width: 1080px) {
  .dm-flowline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }

  /* Nhiều hàng thì đường nối ngang không còn đúng, bỏ đi */
  .dm-flowline::before { display: none; }

  .dm-flowline__no { margin-top: 0; }
}

@media (max-width: 620px) {
  .dm-flowline { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. FORM THU LEAD
   ========================================================================== */

.dm-lead {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(55% 40% at 82% 0%, rgba(47, 107, 255, 0.08), transparent 70%),
    linear-gradient(180deg, var(--dm-bg) 0%, #ffffff 100%);
}

.dm-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  align-items: start;
}

.dm-lead__title {
  margin: var(--space-3) 0 0;
  max-width: 24ch;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink-800);
}

.dm-lead__lede {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--text-soft);
  text-wrap: pretty;
}

.dm-lead__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.dm-lead__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink-700);
}

.dm-lead__points svg {
  flex: none;
  margin-top: 2px;
  color: var(--dm-mint);
}

.dm-lead__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border);
}

.dm-lead__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--dm-accent);
  text-decoration: none;
}

.dm-lead__contact a:hover { text-decoration: underline; }

/* --- Card form --- */

.dm-form {
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--dm-accent);
  border-radius: var(--radius-lg);
  background: #fff;
}

.dm-form__title {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink-800);
}

.dm-form__sub {
  margin: 0.35rem 0 var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.dm-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.dm-form .field--full { grid-column: 1 / -1; }

.dm-form .field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
}

.dm-form .field .req { color: var(--rose-500); }

.dm-form .field input,
.dm-form .field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-800);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.dm-form .field input::placeholder,
.dm-form .field textarea::placeholder { color: var(--slate-400); }

.dm-form .field input:focus,
.dm-form .field textarea:focus {
  outline: none;
  border-color: var(--dm-accent);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.15);
}

.dm-form .field textarea { resize: vertical; }

.dm-form .field__error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--rose-500);
}

.dm-form__foot { margin-top: var(--space-5); }

.dm-form__submit { width: 100%; }

.dm-form__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: var(--space-3) 0 0;
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.dm-form__note svg { flex: none; }

.dm-form .form-status {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
}

.dm-form .form-status:empty { margin-bottom: 0; }

@media (max-width: 900px) {
  .dm-lead__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dm-form { padding: var(--space-5) var(--space-4); }
  .dm-form__grid { grid-template-columns: 1fr; }
}