/* ==========================================================================
   BAMFLOW — trang "Dự án" (du-an.html)
   Chỉ dùng cho trang này. Nhịp nền: hero xanh → trắng → xám → trắng → xám.
   Chuyển động một chiều (lớp .is-in do du-an.js gắn một lần), tắt khi giảm chuyển động.
   ========================================================================== */

.da-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Biểu tượng lĩnh vực — dùng chung ở hero và thẻ
   -------------------------------------------------------------------------- */
.fi {
  --c: #1d4ed8; --t: #e8f0fe;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  background: var(--t); color: var(--c);
}
.fi svg { width: 22px; height: 22px; }
.fi--ban-hang { --c: #1d4ed8; --t: #e8f0fe; }
.fi--kho-van { --c: #0e7490; --t: #e0f3f7; }
.fi--san-xuat { --c: #4338ca; --t: #ecebfd; }
.fi--nhan-su { --c: #0f766e; --t: #e0f4f0; }
.fi--cong-viec { --c: #6d28d9; --t: #f1eafd; }
.fi--bao-tri { --c: #b45309; --t: #fdf1dd; }
.fi--don-hang-kpi { --c: #0369a1; --t: #e2f0fa; }
.fi--giao-duc { --c: #15803d; --t: #e4f5e9; }

/* --------------------------------------------------------------------------
   1. Hero xanh
   -------------------------------------------------------------------------- */
.dh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--header-offset) + clamp(40px, 7vh, 84px)) 0 clamp(64px, 9vh, 104px);
  background:
    radial-gradient(70% 60% at 88% 8%, rgba(96, 165, 250, 0.38), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgba(29, 78, 216, 0.55), transparent 70%),
    linear-gradient(160deg, #133c9f 0%, #1d4ed8 56%, #2b67e4 100%);
  color: #ffffff;
}
.dh__tex {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 80%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 80%);
}
.dh__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.dh__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #ffffff;
}
.dh__sub {
  max-width: 46ch;
  margin: 20px 0 0;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.dh__stats { display: flex; flex-wrap: nowrap; margin-top: 32px; }
.dh__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: clamp(14px, 2.4vw, 32px); }
.dh__stat + .dh__stat { padding-left: clamp(14px, 2.4vw, 32px); border-left: 1px solid rgba(255, 255, 255, 0.28); }
.dh__stat b { font-family: var(--font-display); font-size: clamp(2.1rem, 3.3vw, 2.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: #ffffff; }
.dh__stat span { font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); text-wrap: balance; }

.dh__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.dh__actions .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.dh__actions .btn svg { width: 18px; height: 18px; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.dh__actions .btn:hover svg { transform: translateX(3px); }
.dh .dh__actions .btn--primary { background: #ffffff; color: #133c9f; border-color: #ffffff; box-shadow: 0 14px 30px -14px rgba(3, 15, 60, 0.6); }
.dh .dh__actions .btn--primary:hover { background: #eef4ff; transform: translateY(-1px); }
.dh .dh__actions .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.7); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dh .dh__actions .btn--ghost:hover { background: #ffffff; color: #133c9f; transform: translateY(-1px); }

.dh__partner {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; padding: 7px 14px 7px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  font-size: 0.92rem; font-weight: 600; color: #ffffff; text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dh__partner svg { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.dh__partner:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); }

/* Không gian ứng dụng — cửa sổ nghiêng 3D */
.dh__visual { position: relative; perspective: 1600px; padding: 28px 8px 34px; }
.dh__back {
  position: absolute; inset: 44px 36px 8px 44px; z-index: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  transform: rotateY(-14deg) rotateX(7deg) translate3d(-26px, 26px, -60px);
}
.dh__win {
  --tilt: rotateY(-14deg) rotateX(7deg) rotateZ(0.6deg);
  position: relative; z-index: 1;
  border-radius: 20px;
  background: #ffffff;
  color: #0b1633;
  box-shadow: 0 50px 90px -40px rgba(3, 15, 60, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: var(--tilt);
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dh__visual:hover .dh__win { transform: rotateY(-6deg) rotateX(3deg); }
.dh__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; }
.dh__dots { display: inline-flex; gap: 5px; }
.dh__dots i { width: 9px; height: 9px; border-radius: 50%; background: #dbe3ee; }
.dh__bar b { font-size: 0.85rem; font-weight: 600; color: #0b1633; }
.dh__bar em { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #e8f0fe; font-style: normal; font-size: 0.75rem; font-weight: 600; color: #1d4ed8; }
.dh__apps {
  list-style: none; margin: 0; padding: 16px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  transform-style: preserve-3d;
}
.dh__apps li { transform-style: preserve-3d; }
.dh__app {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  height: 100%; padding: 14px 12px 14px;
  border-radius: 14px;
  background: #f6f9fe;
  border: 1px solid #e3ecf9;
  text-decoration: none;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease, border-color 200ms ease, box-shadow 320ms ease;
}
.dh__app b { font-size: 0.86rem; font-weight: 600; line-height: 1.3; color: #0b1633; }
.dh__app .fi { transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.dh__app:hover, .dh__app:focus-visible {
  background: #ffffff; border-color: #93c5fd;
  transform: translateZ(26px) translateY(-3px);
  box-shadow: 0 18px 30px -18px rgba(29, 78, 216, 0.55);
}
.dh__app:hover .fi { transform: scale(1.1) rotate(-4deg); }
.dh__app:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }

.dh__float {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #ffffff; color: #0b1633;
  font-size: 0.82rem; font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(3, 15, 60, 0.55);
}
.dh__float i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.dh__float--a { top: 4px; right: 12%; }
.dh__float--b { bottom: 6px; left: 8%; }

/* Hiện một lần khi tải trang (chỉ phần minh hoạ; chữ hiện ngay) */
.da-js .dh__win { animation: dh-win 1000ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards; }
.da-js .dh__back { animation: dh-fade 900ms ease 380ms backwards; }
.da-js .dh__app { animation: dh-tile 640ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(420ms + var(--i, 0) * 60ms); }
.da-js .dh__float--a { animation: dh-float 700ms cubic-bezier(0.22, 1, 0.36, 1) 900ms backwards; }
.da-js .dh__float--b { animation: dh-float 700ms cubic-bezier(0.22, 1, 0.36, 1) 1020ms backwards; }
@keyframes dh-win { from { opacity: 0; transform: rotateY(-30deg) rotateX(16deg) translate3d(40px, 50px, -80px); } }
@keyframes dh-fade { from { opacity: 0; } }
@keyframes dh-tile { from { opacity: 0; transform: translate3d(0, 12px, 40px); } }
@keyframes dh-float { from { opacity: 0; transform: translateY(12px) scale(0.94); } }

/* --------------------------------------------------------------------------
   2. Ứng dụng theo lĩnh vực
   -------------------------------------------------------------------------- */
.dg { padding-block: var(--space-16) var(--space-20); }
.dg__head { max-width: 760px; margin: 0 auto; text-align: center; }
.dg__head h2, .dcl__head h2, .dp__top h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #0b1633;
}
.dg__head p, .dcl__head p { margin: 0; font-size: var(--text-lg); line-height: 1.6; color: #475569; }

/* Bộ lọc: thanh phân đoạn, nền trượt theo mục đang chọn */
.dchips-wrap { display: flex; justify-content: center; margin: var(--space-8) 0 var(--space-8); }
.dchips {
  position: relative;
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  max-width: 100%;
  padding: 5px;
  border-radius: 26px;
  background: #f1f5fb;
  border: 1px solid #e2e8f2;
}
.dchip {
  position: relative; z-index: 1;
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
  background: transparent;
  font: 600 0.92rem/1.2 var(--font-body);
  color: #475569; white-space: nowrap;
  transition: color 220ms ease, background 220ms ease;
}
.dchip:hover { color: #0b1633; background: rgba(255, 255, 255, 0.85); }
.dchip[aria-pressed="true"] { background: #1d4ed8; color: #ffffff; }
.dchip:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dchips__thumb {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 0; height: 0; border-radius: 999px;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 8px 18px -8px rgba(29, 78, 216, 0.7);
  opacity: 0;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1), height 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dchips__thumb.is-static { transition: none; }
.dchips.has-thumb .dchips__thumb { opacity: 1; }
.dchips.has-thumb .dchip[aria-pressed="true"] { background: transparent; }
.dchips.has-thumb .dchip[aria-pressed="true"]:hover { background: transparent; color: #ffffff; }

/* Lưới thẻ */
.dg__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  overflow-clip-margin: 40px;
}
.dcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: 12px;
  border-radius: 20px;
  background: #f6f9fe;
  border: 1px solid #e3ecf9;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease, border-color 220ms ease, background 220ms ease;
}
.dcard[hidden] { display: none !important; }
.dcard:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: #bcd3f6;
  box-shadow: 0 26px 44px -28px rgba(29, 78, 216, 0.5);
}
.dcard__mock { border-radius: 13px; }
.dcard__mock .mk { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease; }
.dcard:hover .dcard__mock .mk { transform: scale(1.012); box-shadow: 0 10px 22px -16px rgba(15, 23, 42, 0.35); }
.dcard__body { padding: 16px 8px 8px; }
.dcard__title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dcard__title .fi { width: 36px; height: 36px; border-radius: 11px; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.dcard__title .fi svg { width: 20px; height: 20px; }
.dcard:hover .dcard__title .fi { transform: scale(1.08) rotate(-4deg); }
.dcard__title h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; color: #0b1633; }
.dcard__mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dcard__mods li { position: relative; padding-left: 16px; font-size: 0.93rem; line-height: 1.5; color: #475569; }
.dcard__mods li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: #1d4ed8; }
.dcard__cta {
  display: none;
  align-items: center; gap: 8px;
  margin-top: 22px; padding: 11px 18px;
  appearance: none; border: 1px solid #1d4ed8; border-radius: 12px; cursor: pointer;
  background: #1d4ed8; color: #ffffff;
  font: 600 0.95rem/1.2 var(--font-body);
  transition: background 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
}
.dcard__cta span { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.dcard__cta:hover { background: #133c9f; transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(29, 78, 216, 0.7); }
.dcard__cta:hover span { transform: translateX(3px); }
.dcard__cta:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; }

/* Ô "Lĩnh vực khác" */
.dcard--more {
  align-items: flex-start; justify-content: center;
  padding: 28px 26px;
  background: #ffffff;
  border: 1.5px dashed #bcd3f6;
}
.dcard--more:hover { border-style: solid; }
.dcard--more__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: #e8f0fe; color: #1d4ed8; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.dcard--more__ico svg { width: 22px; height: 22px; }
.dcard--more:hover .dcard--more__ico { transform: rotate(90deg); }
.dcard--more h3 { margin: 18px 0 8px; font-size: 1.25rem; letter-spacing: -0.01em; color: #0b1633; }
.dcard--more p { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.6; color: #475569; max-width: 34ch; }

/* Chế độ một lĩnh vực: thẻ trải ngang, minh hoạ lớn hơn, hiện thêm chi tiết */
.dg__grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.dg__grid.is-solo .dcard {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: 16px;
  background: #ffffff;
  border-color: #d6e4fa;
  box-shadow: 0 30px 60px -40px rgba(29, 78, 216, 0.45);
}
.dg__grid.is-solo .dcard:hover { transform: none; }
.dg__grid.is-solo .dcard__body { padding: 8px 24px 8px 0; }
.dg__grid.is-solo .dcard__title .fi { width: 46px; height: 46px; border-radius: 14px; }
.dg__grid.is-solo .dcard__title .fi svg { width: 24px; height: 24px; }
.dg__grid.is-solo .dcard__title h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.dg__grid.is-solo .dcard__mods { gap: 10px; }
.dg__grid.is-solo .dcard__mods li { font-size: 1.02rem; }
.dg__grid.is-solo .dcard__cta { display: inline-flex; }
.dg__grid:not(.is-solo) .mk-more { display: none !important; }

/* --------------------------------------------------------------------------
   Giao diện minh hoạ nhỏ (aria-hidden, dữ liệu mẫu)
   -------------------------------------------------------------------------- */
.mk {
  display: flex; flex-direction: column;
  min-height: 214px;
  overflow: hidden;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid #e3ecf9;
  font-family: var(--font-body);
  font-size: 11.5px; line-height: 1.35;
  color: #334155;
}
.mk__bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #eef2f7; background: #fbfcfe; }
.mk__dots { display: inline-flex; gap: 4px; }
.mk__dots i { width: 6px; height: 6px; border-radius: 50%; background: #d6deea; }
.mk__bar b { font-size: 10.5px; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; }
.mk ul, .mk ol { list-style: none; margin: 0; padding: 0; }
.mk b { font-weight: 700; color: #0b1633; }
.mk-dim { color: #64748b; }
.mk-code { font-family: var(--font-mono); font-size: 0.95em; }

.mk-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-row > .mk-dim { white-space: nowrap; }
.mk-row .mk-tag { margin-left: auto; }
.mk-row .mk-meter { flex: 1 1 auto; }
.mk-note { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 6px 8px; border-radius: 8px; background: #f6f9fe; border: 1px solid #eef2f7; color: #475569; white-space: nowrap; overflow: hidden; }
.mk-note > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.mk-note .mk-tag, .mk-note > b { margin-left: auto; }
.mk-note + .mk-note { margin-top: 0; }

.mk-tag { display: inline-flex; align-items: center; flex: none; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 10px; font-weight: 600; font-style: normal; white-space: nowrap; }
.mk-tag--green { background: #e3f5ea; color: #15803d; }
.mk-tag--amber { background: #fdf1d8; color: #b45309; }
.mk-tag--blue { background: #e8f0fe; color: #1d4ed8; }
.mk-tag--red { background: #fde6e6; color: #b91c1c; }
.mk-btn { margin-left: auto; padding: 4px 10px; border-radius: 7px; background: #1d4ed8; color: #ffffff; font-size: 10.5px; font-weight: 600; }

.mk-meter { position: relative; display: block; height: 6px; min-width: 40px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.mk-meter > span { display: block; width: var(--v); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #1d4ed8); transform-origin: left center; }

/* Bán hàng */
.mk-row--top { justify-content: space-between; }
.mk-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: #f1f5f9; }
.mk-seg span { padding: 2px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 600; color: #64748b; }
.mk-seg .is-on { background: #ffffff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.mk-scan { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #1d4ed8; }
.mk-scan svg { width: 16px; height: 12px; }
.mk-lines { display: grid; gap: 1px; border-radius: 8px; overflow: hidden; background: #eef2f7; }
.mk-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px; gap: 8px; align-items: center; padding: 5px 8px; background: #ffffff; }
.mk-lines li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-lines em { font-style: normal; color: #94a3b8; }
.mk-lines b { text-align: right; font-weight: 600; }
.mk-total { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.mk-total > span:first-child { color: #64748b; }
.mk-total b { font-size: 13px; }

/* Kho */
.mk-tabs { display: flex; gap: 4px; }
.mk-tabs span { padding: 2px 9px; border-radius: 999px; background: #f1f5f9; font-size: 10.5px; font-weight: 600; color: #64748b; }
.mk-tabs .is-on { background: #1d4ed8; color: #ffffff; }
.mk-stock { display: grid; gap: 6px; }
.mk-stock li { display: grid; grid-template-columns: minmax(0, 1fr) 38px 64px; gap: 8px; align-items: center; }
.mk-stock li > span:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.mk-stock b { text-align: right; font-weight: 600; }
.mk-stock .is-low b { color: #b91c1c; }
.mk-stock .is-low .mk-meter > span { background: linear-gradient(90deg, #f87171, #dc2626); }
.mk-qr { width: 14px; height: 14px; flex: none; color: #1d4ed8; }

/* Sản xuất */
.mk-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 2px; }
.mk-steps::before { content: ""; position: absolute; top: 8px; left: 12.5%; right: 12.5%; height: 2px; background: #e2e8f0; }
.mk-steps::after { content: ""; position: absolute; top: 8px; left: 12.5%; width: 50%; height: 2px; background: #1d4ed8; transform-origin: left center; }
.mk-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; color: #64748b; text-align: center; }
.mk-steps i { width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 2px solid #cbd5e1; }
.mk-steps .is-done i { background: #1d4ed8; border-color: #1d4ed8; }
.mk-steps .is-now i { border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.16); }
.mk-steps .is-done span, .mk-steps .is-now span { color: #0b1633; font-weight: 600; }
.mk-bom { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px 8px; border-radius: 8px; background: #f6f9fe; border: 1px solid #eef2f7; }
.mk-bom b { margin-right: 2px; font-size: 10.5px; }
.mk-bom span { padding: 2px 7px; border-radius: 6px; background: #ffffff; border: 1px solid #e2e8f0; font-size: 10.5px; }

/* Nhân sự */
.mk-check { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; background: #f0f7ff; border: 1px solid #dbe7fb; }
.mk-pin { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: #1d4ed8; color: #ffffff; }
.mk-pin svg { width: 11px; height: 13px; }
.mk-check__t { display: flex; flex-direction: column; min-width: 0; }
.mk-check__t span { font-size: 10.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-check .mk-tag { margin-left: auto; }
.mk-people { display: grid; gap: 6px; }
.mk-people li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-people li > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-people i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #e8f0fe; color: #1d4ed8; font-style: normal; font-size: 10px; font-weight: 700; }
.mk-people .mk-tag { margin-left: auto; }

/* Công việc — kanban */
.mk-kb__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mk-kb__col { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px; border-radius: 8px; background: #f6f9fe; border: 1px solid #eef2f7; }
.mk-kb__col > b { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.mk-kb__col em { font-style: normal; padding: 0 5px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 9.5px; }
.mk-kb__card { padding: 5px 6px; border-radius: 6px; background: #ffffff; border: 1px solid #e2e8f0; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04); }
.mk-kb__card.is-hot { border-color: #fbbf24; background: #fffbeb; }
.mk-kb__card.is-done { color: #94a3b8; text-decoration: line-through; }
.mk-toast { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 6px 8px; border-radius: 9px; background: #0b1633; color: #ffffff; font-size: 10.5px; white-space: nowrap; overflow: hidden; box-shadow: 0 10px 18px -12px rgba(11, 22, 51, 0.8); }
.mk-toast svg { width: 16px; height: 16px; flex: none; }
.mk-toast span { overflow: hidden; text-overflow: ellipsis; }

/* Bảo trì */
.mk-week { display: flex; gap: 4px; }
.mk-week span { flex: 1 1 0; padding: 4px 0; border-radius: 6px; background: #f1f5f9; text-align: center; font-size: 10.5px; font-weight: 600; color: #64748b; }
.mk-week .is-due { background: #fdf1d8; color: #b45309; box-shadow: inset 0 0 0 1px #fcd34d; }
.mk-tasks { display: grid; gap: 1px; border-radius: 8px; overflow: hidden; background: #eef2f7; }
.mk-tasks li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #ffffff; }
.mk-tasks li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tasks .mk-tag { margin-left: auto; }

/* KPI */
.mk-bars { display: grid; gap: 9px; }
.mk-bars li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.mk-bars li > span:first-child { color: #475569; }
.mk-bars b { text-align: right; font-weight: 600; }
.mk-bars .mk-meter { height: 8px; }
.mk-note b { color: #0b1633; }

/* Giáo dục */
.mk-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mk-cal > span { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; min-width: 0; padding: 5px 4px; border-radius: 7px; background: #f6f9fe; border: 1px solid #eef2f7; text-align: center; }
.mk-cal b { font-size: 10px; color: #64748b; font-weight: 600; }
.mk-cal i { padding: 3px 2px; border-radius: 5px; font-style: normal; font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.mk-cal .c1 { background: #e8f0fe; color: #1d4ed8; }
.mk-cal .c2 { background: #e4f5e9; color: #15803d; }
.mk-cal .c3 { background: #f1eafd; color: #6d28d9; }
.mk-edu .mk-row .mk-dim { width: 92px; flex: none; }
.mk-edu .mk-row b { width: 36px; text-align: right; font-weight: 600; }

/* Chế độ một lĩnh vực: minh hoạ to hơn */
.dg__grid.is-solo .mk { min-height: 0; font-size: 13px; }
.dg__grid.is-solo .mk__bar { padding: 10px 14px; }
.dg__grid.is-solo .mk__bar b { font-size: 12px; }
.dg__grid.is-solo .mk__body { gap: 12px; padding: 16px 18px; }
.dg__grid.is-solo .mk-tag, .dg__grid.is-solo .mk-seg span, .dg__grid.is-solo .mk-scan, .dg__grid.is-solo .mk-tabs span,
.dg__grid.is-solo .mk-steps li, .dg__grid.is-solo .mk-bom span, .dg__grid.is-solo .mk-bom b, .dg__grid.is-solo .mk-check__t span,
.dg__grid.is-solo .mk-kb__col > b, .dg__grid.is-solo .mk-kb__card, .dg__grid.is-solo .mk-toast, .dg__grid.is-solo .mk-week span,
.dg__grid.is-solo .mk-cal b, .dg__grid.is-solo .mk-btn { font-size: 11.5px; }
.dg__grid.is-solo .mk-cal i { font-size: 11px; }
.dg__grid.is-solo .mk-cal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dg__grid.is-solo .mk-lines li { padding: 8px 10px; grid-template-columns: minmax(0, 1fr) auto 90px; }
.dg__grid.is-solo .mk-stock li { grid-template-columns: minmax(0, 1fr) 48px 120px; }
.dg__grid.is-solo .mk-bars li { grid-template-columns: 52px minmax(0, 1fr) 40px; }
.dg__grid.is-solo .mk-meter { height: 8px; }
.dg__grid.is-solo .mk-bars .mk-meter { height: 10px; }
.dg__grid.is-solo .mk-edu .mk-row .mk-dim { width: 120px; }
.dg__grid.is-solo .mk-tasks li, .dg__grid.is-solo .mk-note, .dg__grid.is-solo .mk-toast { padding: 8px 10px; }
.dg__grid.is-solo .mk-steps::before, .dg__grid.is-solo .mk-steps::after { top: 9px; }
.dg__grid.is-solo .mk-steps i { width: 16px; height: 16px; }
.dg__grid.is-solo .mk-total b { font-size: 16px; }

/* --------------------------------------------------------------------------
   3. Doanh nghiệp đang vận hành
   -------------------------------------------------------------------------- */
.dcl { padding-block: var(--space-16); }
.dcl__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dcl__head p { max-width: 36ch; }
.dcl__wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-radius: 20px; overflow: hidden;
  background: #dbe4f1;
  border: 1px solid #dbe4f1;
  box-shadow: 0 30px 60px -48px rgba(15, 40, 100, 0.5);
}
.dcl__wall li {
  display: flex; align-items: center; justify-content: center;
  min-height: 78px; padding: 12px 10px;
  background: #ffffff;
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  color: #334155; text-align: center;
  transition: color 220ms ease, background 220ms ease;
}
.dcl__wall li:hover { color: #1d4ed8; background: #f5f9ff; }
.dcl__wall .dcl__more { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: #1d4ed8; background: #f5f9ff; }

/* --------------------------------------------------------------------------
   4. Cách một dự án được triển khai
   -------------------------------------------------------------------------- */
.dp { padding-block: var(--space-16); }
.dp__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--space-10); }
.dp__top h2 { margin: 0; }
.dp__link { display: inline-flex; align-items: center; gap: 6px; flex: none; padding-bottom: 6px; font-weight: 600; color: #1d4ed8; text-decoration: none; }
.dp__link span { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.dp__link:hover { color: #133c9f; }
.dp__link:hover span { transform: translateX(4px); }
.dp__steps {
  --gap: 24px;
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap);
}
.dp__steps::before {
  content: ""; position: absolute; z-index: 0;
  top: 21px; left: 22px; right: calc((100% - 4 * var(--gap)) / 5 - 22px);
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #1d4ed8, #93c5fd);
  transform-origin: left center;
}
.dp__steps li { position: relative; z-index: 1; }
.dp__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #ffffff; border: 2px solid #1d4ed8;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #1d4ed8;
  box-shadow: 0 0 0 6px #ffffff;
  transition: background 220ms ease, color 220ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dp__steps li:hover .dp__n { background: #1d4ed8; color: #ffffff; transform: scale(1.08); }
.dp__steps h3 { margin: 18px 0 6px; font-size: 1.1rem; letter-spacing: -0.01em; color: #0b1633; }
.dp__steps p { margin: 0; font-size: 0.94rem; line-height: 1.55; color: #64748b; max-width: 24ch; }
.dp__note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: var(--space-10) 0 0; padding-top: var(--space-6);
  border-top: 1px solid #e2e8f0;
  font-size: 0.97rem; line-height: 1.6; color: #475569;
}
.dp__note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #1d4ed8; }
.dp__note b { color: #0b1633; }

/* --------------------------------------------------------------------------
   5. CTA cuối
   -------------------------------------------------------------------------- */
.dend { padding-block: var(--space-16); }
.dend .closing { margin-top: 0; }
.dend .closing .btn { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease, box-shadow 240ms ease; }
.dend .closing .btn:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Chuyển động khi cuộn tới — một chiều, không lặp lại
   -------------------------------------------------------------------------- */
@keyframes da-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes da-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes da-grow { from { transform: scaleX(0); } }
@keyframes da-draw { from { transform: scaleX(0); } }
@keyframes da-drawY { from { transform: scaleY(0); } }
@keyframes da-cell { from { opacity: 0; transform: translateY(10px); } }

.da-js [data-da-reveal]:not(.is-in) .dcard,
.da-js [data-da-reveal]:not(.is-in) .dcl__wall li,
.da-js [data-da-reveal]:not(.is-in) .dp__steps li,
.da-js [data-da-reveal]:not(.is-in) .closing { opacity: 0; }

.da-js .dg.is-in:not(.is-settled) .dcard { animation: da-rise 680ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.da-js .dg.is-in:not(.is-settled) .mk-meter > span { animation: da-grow 900ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(320ms + var(--i, 0) * 70ms); }
.da-js .dg.is-in:not(.is-settled) .mk-steps::after { animation: da-draw 900ms cubic-bezier(0.45, 0.05, 0.25, 1) backwards; animation-delay: calc(320ms + var(--i, 0) * 70ms); }
.da-js .dcl.is-in:not(.is-settled) .dcl__wall li { animation: da-cell 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 38ms); }
.da-js .dp.is-in:not(.is-settled) .dp__steps::before { animation: da-draw 1200ms cubic-bezier(0.45, 0.05, 0.25, 1) 120ms backwards; }
.da-js .dp.is-in:not(.is-settled) .dp__steps li { animation: da-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(80ms + var(--i, 0) * 150ms); }
.da-js .dp.is-in:not(.is-settled) .dp__n { animation: da-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(140ms + var(--i, 0) * 150ms); }
.da-js .dend.is-in:not(.is-settled) .closing { animation: da-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .dh__apps { gap: 10px; padding: 14px; }
  .dh__app { padding: 12px 10px; }
  .dh__app b { font-size: 0.8rem; }
}

@media (max-width: 960px) {
  .dh__grid { grid-template-columns: minmax(0, 1fr); }
  .dh__visual { max-width: 640px; perspective: 1400px; }
  .dh__win { --tilt: rotateX(8deg) rotateY(-4deg); }
  .dh__back { transform: rotateX(8deg) rotateY(-4deg) translate3d(-18px, 18px, -40px); }
  .dg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcard--more { grid-column: 1 / -1; }
  .dg__grid.is-solo .dcard { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dg__grid.is-solo .dcard__body { padding: 12px 10px 10px; }
  .dcl__grid { grid-template-columns: minmax(0, 1fr); }
  .dcl__head { text-align: center; }
  .dcl__head p { margin-inline: auto; }
  .dp__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .dp__steps::before { display: none; }
}

@media (max-width: 767px) {
  .dchips-wrap { justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .dchips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 999px; }
  .dchips::-webkit-scrollbar { display: none; }
  .dchip { flex: none; padding: 9px 14px; }
  .dp__top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dp__steps { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .dp__steps::before { display: block; top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; transform-origin: center top; }
  .da-js .dp.is-in:not(.is-settled) .dp__steps::before { animation-name: da-drawY; }
  .dp__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .dp__steps h3 { margin-top: 10px; }
  .dp__steps p { max-width: none; }
}

@media (max-width: 640px) {
  .dh { padding-bottom: 56px; }
  .dh__visual { display: none; }
  .dh__stats { margin-top: 26px; }
  .dh__stat b { font-size: 2.1rem; }
  .dh__stat span { font-size: 0.82rem; }
  .dh__actions .btn { flex: 1 1 100%; justify-content: center; }
  .dg { padding-block: var(--space-12) var(--space-16); }
  .dg__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dcard--more { grid-column: auto; }
  .dg__grid.is-solo .mk { font-size: 12px; }
  .dg__grid.is-solo .mk-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dg__grid.is-solo .mk-stock li { grid-template-columns: minmax(0, 1fr) 40px 70px; }
  .dcl__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcl__wall li { min-height: 64px; font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
  .da-js .dh__win, .da-js .dh__back, .da-js .dh__app, .da-js .dh__float--a, .da-js .dh__float--b,
  .da-js [data-da-reveal] *, .da-js [data-da-reveal] *::before, .da-js [data-da-reveal] *::after { animation: none !important; }
  .da-js [data-da-reveal] .dcard, .da-js [data-da-reveal] .dcl__wall li, .da-js [data-da-reveal] .dp__steps li, .da-js [data-da-reveal] .closing { opacity: 1 !important; }
  .dh__win, .dh__app, .dcard, .dcard__mock .mk, .dchips__thumb, .dp__n, .dh__partner { transition: none !important; }
  .dh__visual:hover .dh__win { transform: var(--tilt); }
  .dcard:hover, .dh__app:hover, .dcard:hover .dcard__mock .mk { transform: none; }
}

/* ==========================================================================
   Vòng 108 — rà soát trước khi mở trang
   ========================================================================== */
/* Mock-up trong thẻ: chữ không bị cắt cứng ("Dưới m", "A1 18:0") ở 961–1180px và ≤ 400px; mã lệnh không xuống dòng */
.mk-code { white-space: nowrap; }
.mk-cal i { text-overflow: ellipsis; }
@media (min-width: 961px) and (max-width: 1180px), (max-width: 400px) {
  .mk-stock li { grid-template-columns: minmax(0, 1fr) 30px 44px; gap: 6px; }
  .mk-cal i { font-size: 8.5px; letter-spacing: -0.03em; padding-inline: 1px; }
}
/* Tên ô ứng dụng ở hero: không để một chữ lẻ ở dòng dưới */
.dh__app b { text-wrap: balance; }
/* "Lĩnh vực khác" ở 641–960px trải hai cột → nội dung căn giữa, không bỏ trống nửa thẻ */
@media (min-width: 641px) and (max-width: 960px) {
  .dcard--more { align-items: center; text-align: center; }
  .dcard--more p { margin-inline: auto; }
}
/* 961–1180px: chín mục lọc nằm trên một hàng; hai nút hero (bản EN dài hơn) vẫn chung một hàng */
@media (min-width: 961px) and (max-width: 1180px) {
  .dchip { padding: 9px 11px; font-size: 0.88rem; }
  .dh__actions { gap: 10px; }
  .dh__actions .btn--lg { padding-inline: 16px; font-size: 0.94rem; }
}