/* =========================================================================
   Vinaweb – Trang Phần mềm theo yêu cầu & ứng dụng AI (pages/phan-mem-theo-yeu-cau.php)
   Nạp SAU about.css, gws.css và odoo.css: banner dùng phero, khối chữ–hình và
   thẻ dùng od-*, hỏi đáp và thanh mục lục dùng gw-*. File này chỉ gồm phần riêng.
   ========================================================================= */
.dv-h2 { margin-top: 22px; }
.dv-lead { margin-top: 18px; font-size: 16.5px; line-height: 1.75; }

/* ---------- Banner ---------- */
.dv-hero .phero__title span { font-weight: inherit; background: linear-gradient(90deg, #ff6b70, #ffc59a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dv-ticks { display: grid; gap: 10px; max-width: 540px; margin-top: 18px; list-style: none; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); animation: pheroIn 1s var(--ease) .2s both; }
.dv-ticks li { position: relative; padding-left: 30px; }
.dv-ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 19px; height: 19px; border-radius: 50%; background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.dv-ticks b { color: #fff; font-weight: 700; }
.dv-hero .phero__actions { margin-top: 30px; }

/* Ảnh minh hoạ banner: cửa sổ ứng dụng + hộp hội thoại AI, dựng bằng CSS */
.dv-shot { position: relative; padding: 0 0 70px 0; }
.dv-win { overflow: hidden; border-radius: 16px; background: #fff; color: var(--black); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 40px 80px -30px rgba(0,0,0,.8); rotate: 1.5deg; }
.dv-win__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f3f3f3; border-bottom: 1px solid #e6e6e6; }
.dv-win__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6d6d6; }
.dv-win__bar i:first-child { background: #ed1c24; }
.dv-win__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: 11.5px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-win__body { display: grid; grid-template-columns: 54px 1fr; min-height: 300px; }
.dv-win__side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; background: #fafafa; border-right: 1px solid #eee; }
.dv-win__side b { width: 26px; height: 26px; margin-bottom: 6px; background: var(--red); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dv-win__side span { width: 22px; height: 6px; border-radius: 3px; background: #e2e2e2; }
.dv-win__side span.is-on { background: #f3c4c6; }
.dv-win__main { padding: 18px; }
.dv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dv-kpis div { padding: 11px 12px; border-radius: 10px; background: #f6f4ee; }
.dv-kpis small { display: block; font-size: 10.5px; line-height: 1.3; color: var(--gray); }
.dv-kpis b { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--black); font-variant-numeric: tabular-nums; }
.dv-kpis em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #1e8e3e; }
.dv-kpis em.is-warn { color: var(--red); }
.dv-chart { display: flex; align-items: flex-end; gap: 7px; height: 96px; margin-top: 16px; padding: 10px 12px 0; border-radius: 10px; border: 1px solid #eee; }
.dv-chart span { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: #e9e6de; transform-origin: bottom; animation: dvBar 1s var(--ease) both; }
.dv-chart span:nth-child(n+8) { background: var(--red); }
.dv-chart span:nth-child(2n) { animation-delay: .1s; }
.dv-chart span:nth-child(3n) { animation-delay: .2s; }
@keyframes dvBar { from { transform: scaleY(0); } }
.dv-rows { display: grid; gap: 8px; margin-top: 14px; }
.dv-rows span { height: 9px; border-radius: 5px; background: #efefef; }
.dv-rows span:nth-child(1) { width: 92%; } .dv-rows span:nth-child(2) { width: 76%; } .dv-rows span:nth-child(3) { width: 84%; }

.dv-chat { position: absolute; left: -34px; bottom: 0; width: min(340px, 82%); display: grid; gap: 8px; animation: dvFloat 6s ease-in-out infinite alternate; }
@keyframes dvFloat { from { translate: 0 -6px; } to { translate: 0 8px; } }
.dv-chat p { margin: 0; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.dv-chat__q { justify-self: end; max-width: 85%; border-bottom-right-radius: 4px; background: var(--red); color: #fff; }
.dv-chat__a { display: flex; gap: 10px; align-items: flex-start; border-bottom-left-radius: 4px; background: #fff; color: var(--black); }
.dv-chat__ai { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #141414; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; }

/* Logo AI bay quanh khung minh hoạ */
.dv-orb { position: absolute; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 18px 34px -14px rgba(0,0,0,.65); animation: dvFloat 5s ease-in-out infinite alternate; }
.dv-orb img { width: 32px; height: 32px; }
.dv-orb--1 { left: -26px; top: 52px; }
.dv-orb--2 { right: -22px; top: -22px; width: 64px; height: 64px; animation-delay: -1.5s; }
.dv-orb--2 img { width: 36px; height: 36px; }
.dv-orb--3 { right: -30px; top: 168px; animation-delay: -3s; }
.dv-orb--4 { right: 34px; bottom: 34px; width: 50px; height: 50px; border-radius: 14px; animation-delay: -2.2s; }
.dv-orb--4 img { width: 50px; height: 50px; border-radius: 14px; }
.dv-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 1px solid rgba(255,255,255,.22); animation: dvPulse 2.8s ease-out infinite; }
.dv-orb--2::after { animation-delay: -1s; } .dv-orb--3::after { animation-delay: -2s; }
@keyframes dvPulse { from { opacity: .9; scale: .92; } to { opacity: 0; scale: 1.25; } }

/* ---------- Dải logo AI chạy ngang ---------- */
.dv-logos { padding: 54px 0 46px; background: #fff; overflow: hidden; }
.dv-logos__title { margin: 0 auto 26px; padding: 0 16px; text-align: center; font-size: 16px; color: var(--gray); }
.dv-logos__title b { color: var(--black); }
.dv-marquee { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.dv-marquee + .dv-marquee { margin-top: 14px; }
.dv-marquee__track { display: flex; gap: 14px; width: max-content; list-style: none; animation: dvMarquee 46s linear infinite; }
.dv-marquee--rev .dv-marquee__track { animation-direction: reverse; animation-duration: 52s; }
.dv-marquee:hover .dv-marquee__track { animation-play-state: paused; }
.dv-marquee li { display: flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 14px; border: 1px solid #ececec; background: #fff; font-size: 16px; font-weight: 600; color: var(--black); white-space: nowrap; transition: border-color .3s, box-shadow .3s, translate .3s var(--ease); }
.dv-marquee li:hover { border-color: rgba(186,19,26,.35); box-shadow: 0 14px 28px -18px rgba(186,19,26,.5); translate: 0 -3px; }
.dv-marquee img { width: 30px; height: 30px; }
@keyframes dvMarquee { to { transform: translateX(calc(-50% - 7px)); } }

/* ---------- Giới thiệu: tình huống + cụm ảnh thực tế ---------- */
.dv-intro { padding-top: 70px; }
.dv-pains { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; list-style: none; }
.dv-pains li { position: relative; display: grid; gap: 4px; padding: 18px 18px 18px 56px; border-radius: 16px; background: var(--beige); transition: opacity .8s var(--ease) var(--d, 0s), translate .8s var(--ease) var(--d, 0s), background .3s, box-shadow .3s; }
.dv-pains li::before { content: "!"; position: absolute; left: 18px; top: 19px; display: grid; place-items: center; width: 24px; height: 27px; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dv-pains b { font-size: 16px; color: var(--black); }
.dv-pains span { font-size: 14px; line-height: 1.55; color: var(--gray); }
@media (hover: hover) { .dv-pains li:hover { background: #fff; box-shadow: 0 0 0 1px rgba(186,19,26,.3), 0 16px 30px -20px rgba(33,34,82,.35); } }

.dv-collage { position: relative; padding: 0 0 70px 40px; }
.dv-collage figure { margin: 0; overflow: hidden; }
.dv-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-collage__main { aspect-ratio: 4 / 3.4; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(33,34,82,.45); }
.dv-collage__main img { transition: transform 1.2s var(--ease); }
.dv-collage:hover .dv-collage__main img { transform: scale(1.04); }
.dv-collage__sub { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border-radius: 18px; border: 6px solid #fff; box-shadow: 0 24px 40px -20px rgba(33,34,82,.5); }
.dv-chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: 0 18px 36px -18px rgba(33,34,82,.5); animation: dvFloat 6s ease-in-out infinite alternate; }
.dv-chip b { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--red); }
.dv-chip span { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--black); }
.dv-chip--a { right: -18px; top: 26px; }
.dv-chip--b { right: 24px; bottom: 30px; animation-delay: -2s; background: linear-gradient(150deg, #ba131a, #7f070c); }
.dv-chip--b b, .dv-chip--b span { color: #fff; }
.dv-chip--c { left: 12px; top: 40%; animation-delay: -4s; }

/* ---------- Dịch vụ ---------- */
.dv-svc[id], .dv-demo__tabs [role="tab"], .dv-demo { scroll-margin-top: 150px; }
.dv-svc.is-target { box-shadow: 0 0 0 2px var(--red), 0 24px 40px -24px rgba(186,19,26,.5); }
.dv-ic { color: var(--red); transition: background .35s, color .35s, rotate .5s var(--ease); }
.dv-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dv-svc { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.dv-svc__no { position: absolute; right: 22px; top: 18px; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: rgba(186,19,26,.08); transition: color .35s; }
.dv-svc__tools { display: flex; gap: 8px; margin-top: auto; padding-top: 20px; }
.dv-svc__tools span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #f6f4ee; transition: translate .35s var(--ease), background .35s; }
.dv-svc__tools img { width: 22px; height: 22px; }
.dv-svc > p { margin-bottom: 0; }
@media (hover: hover) {
  .dv-svc:hover .dv-ic { background: var(--red); color: #fff; rotate: -6deg; }
  .dv-svc:hover .dv-svc__no { color: rgba(186,19,26,.16); }
  .dv-svc:hover .dv-svc__tools span { background: #fff; box-shadow: 0 0 0 1px #eee; }
  .dv-svc:hover .dv-svc__tools span:nth-child(1) { translate: 0 -4px; transition-delay: 0s; }
  .dv-svc:hover .dv-svc__tools span:nth-child(2) { translate: 0 -4px; transition-delay: .05s; }
  .dv-svc:hover .dv-svc__tools span:nth-child(3) { translate: 0 -4px; transition-delay: .1s; }
  .dv-svc:hover .dv-svc__tools span:nth-child(4) { translate: 0 -4px; transition-delay: .15s; }
}

/* Box thứ 6 (đỏ): mục tiêu chung – 5 dịch vụ hội tụ về một hệ thống */
.dv-goal { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 26px 24px 26px; border-radius: 20px; color: #fff;
  background: radial-gradient(320px 220px at 100% 0%, rgba(255,255,255,.18), transparent 70%), linear-gradient(155deg, #ba131a, #7f070c); box-shadow: 0 24px 44px -26px rgba(127,7,12,.8);
  transition: opacity .8s var(--ease), translate .8s var(--ease), transform .35s var(--ease), box-shadow .35s; }
.dv-goal::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32.33' viewBox='0 0 84 48.5'%3E%3Cpath d='M14 0H42L56 24.25L42 48.5H14L0 24.25ZM56 24.25H84' fill='none' stroke='%23fff' stroke-opacity='.1'/%3E%3C/svg%3E"); -webkit-mask: radial-gradient(260px 200px at 85% 15%, #000, transparent 75%); mask: radial-gradient(260px 200px at 85% 15%, #000, transparent 75%); }
@media (hover: hover) { .dv-goal:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -24px rgba(127,7,12,.9); } }
.dv-hub { position: absolute; right: 14px; top: 12px; z-index: -1; width: 120px; height: 120px; }
.dv-goal__kicker, .dv-goal h3 { max-width: calc(100% - 118px); }
.dv-goal__kicker { margin-top: 4px; }
.dv-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv-hub__lines line { stroke: rgba(255,255,255,.4); stroke-width: 1.4; stroke-dasharray: 4 5; animation: dvFlow 1.6s linear infinite; }
@keyframes dvFlow { to { stroke-dashoffset: -18; } }
.dv-hub__node { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; color: var(--red); box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); animation: dvNode 3s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
.dv-hub__node svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@keyframes dvNode { 50% { scale: 1.12; } }
.dv-hub__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 50px; height: 56px; margin: -28px 0 0 -25px; background: #fff; color: var(--red); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dv-hub__core svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dv-goal__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.dv-goal h3 { margin-top: 8px; font-size: 19px; font-weight: 700; line-height: 1.35; }
.dv-goal p:not(.dv-goal__kicker) { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.88); }
.dv-goal__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 700; color: #fff; }
.dv-goal__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: translate .3s var(--ease); }
.dv-goal__cta:hover svg { translate: 4px 0; }

/* ---------- Ứng dụng AI (nền tối) ---------- */
.dv-ai { position: relative; isolation: isolate; overflow: hidden; padding: var(--sec) 0; color: #fff; background: radial-gradient(900px 500px at 85% 0%, rgba(186,19,26,.45), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(186,19,26,.18), transparent 65%), #121212; }
.dv-ai__hex { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48.5' viewBox='0 0 84 48.5'%3E%3Cpath d='M14 0H42L56 24.25L42 48.5H14L0 24.25ZM56 24.25H84' fill='none' stroke='%23fff' stroke-opacity='.075'/%3E%3C/svg%3E") 0 0 / 84px 48.5px;
  -webkit-mask: radial-gradient(900px 500px at 80% 10%, #000, transparent 75%); mask: radial-gradient(900px 500px at 80% 10%, #000, transparent 75%); }
.dv-ai .badge { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; filter: none; }
.dv-ai .h2 { margin-top: 22px; color: #fff; }
.dv-ai .h2 em { color: var(--red-soft); }
.dv-ai__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.dv-ai__head > div { max-width: 620px; }
.dv-ai__lead { max-width: 400px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); }

.dv-demo { display: grid; grid-template-columns: 340px 1fr; gap: 20px; margin-top: 48px; }
.dv-demo__tabs { display: grid; gap: 8px; align-content: start; }
.dv-demo__tabs button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.03); color: rgba(255,255,255,.78); font: inherit; font-size: 15.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .3s, border-color .3s, color .3s, translate .3s var(--ease); }
.dv-demo__tabs button:hover { color: #fff; border-color: rgba(255,255,255,.25); translate: 4px 0; }
.dv-demo__tabs button[aria-selected="true"] { color: #fff; border-color: transparent; background: linear-gradient(150deg, #ba131a, #7f070c); box-shadow: 0 16px 30px -16px rgba(186,19,26,.8); }
.dv-demo__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.08); }
.dv-demo__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dv-demo__tabs [aria-selected="true"] .dv-demo__ic { background: rgba(255,255,255,.18); }
.dv-demo__stage { position: relative; min-height: 380px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(6px); overflow: hidden; }
.dv-pane { display: flex; flex-direction: column; height: 100%; min-height: 380px; }
.dv-pane[hidden] { display: none; }
.dv-pane.is-on { animation: dvPaneIn .5s var(--ease) both; }
@keyframes dvPaneIn { from { opacity: 0; translate: 0 12px; } }
.dv-pane__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.dv-pane__title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
.dv-pane__title i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
.dv-pane__models { display: flex; }
.dv-pane__models img { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #1c1c1c; }
.dv-pane__models img + img { margin-left: -8px; }
.dv-pane__chat { display: grid; gap: 16px; padding: 26px 24px; }
.dv-msg { margin: 0; max-width: 82%; padding: 14px 18px; border-radius: 18px; font-size: 15.5px; line-height: 1.6; }
.dv-msg--me { justify-self: end; border-bottom-right-radius: 5px; background: #fff; color: var(--black); }
.dv-msg--ai { display: flex; gap: 12px; align-items: flex-start; border-bottom-left-radius: 5px; background: rgba(255,255,255,.1); color: #fff; }
.dv-msg__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; }
.dv-msg__av img { width: 20px; height: 20px; }
.dv-msg__text.is-typing::after { content: ""; display: inline-block; width: 7px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--red-soft); animation: dvCaret .8s steps(1) infinite; }
@keyframes dvCaret { 50% { opacity: 0; } }
.dv-pane__result { display: flex; align-items: center; gap: 10px; margin: auto 24px 24px; padding: 12px 16px; border-radius: 12px; background: rgba(61,220,132,.1); color: #9ff0c4; font-size: 14.5px; font-weight: 600; }
.dv-pane__result svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.dv-ai__cta { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 28px; margin-top: 40px; padding: 14px 30px 14px 14px; border-radius: 22px; background: linear-gradient(150deg, #ba131a, #7f070c); }
.dv-ai__photo { margin: 0; height: 140px; border-radius: 14px; overflow: hidden; }
.dv-ai__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dv-ai__cta:hover .dv-ai__photo img { transform: scale(1.06); }
.dv-ai__cta-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.dv-ai__cta-body p + p { margin-top: 6px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.88); }
.dv-ai__cta b { color: #fff; }
.dv-ai__cta .btn { flex: none; }

/* ---------- Quy trình: thẻ ảnh thực tế, chữ phủ trên ảnh ---------- */
.dv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; padding: 0; list-style: none; }
.dv-step { position: relative; isolation: isolate; aspect-ratio: 4 / 3.3; border-radius: 20px; overflow: hidden; color: #fff; background: #222; transition: opacity .8s var(--ease) var(--d, 0s), translate .8s var(--ease) var(--d, 0s), box-shadow .4s; }
.dv-step img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dv-step::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(10,10,10,.6) 55%, rgba(10,10,10,.94) 100%); transition: background .4s; }
.dv-step__no { position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 44px; height: 50px; background: var(--red); color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dv-step__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 22px; }
.dv-step h3 { font-size: 19px; font-weight: 700; line-height: 1.35; }
.dv-step p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.9); }
.dv-step__body, .dv-tile figcaption { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
@media (hover: hover) {
  .dv-step:hover img { transform: scale(1.07); }
  .dv-step:hover::after { background: linear-gradient(180deg, rgba(127,7,12,.1) 10%, rgba(127,7,12,.92) 100%); }
  .dv-step:hover { box-shadow: 0 30px 50px -30px rgba(186,19,26,.7); }
}

/* ---------- Công nghệ ---------- */
.dv-stack { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.dv-stack__intro { position: sticky; top: 150px; }
.dv-lead b { color: var(--black); }
.dv-coders { display: flex; gap: 12px; margin-top: 28px; }
.dv-coders span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #fff; box-shadow: 0 16px 30px -18px rgba(33,34,82,.45); animation: dvFloat 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
.dv-coders img { width: 34px; height: 34px; }
.dv-coders span:nth-child(2) img { width: 64px; height: 64px; border-radius: 18px; }
.dv-stack__groups { display: grid; gap: 14px; }
.dv-stack__group { padding: 20px 22px; border-radius: 18px; background: #fff; }
.dv-stack__group h3 { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.dv-stack__group ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; list-style: none; }
.dv-stack__group li { display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 11px; border: 1px solid #ececec; font-size: 14px; font-weight: 600; color: var(--black); transition: border-color .3s, translate .3s var(--ease), box-shadow .3s; }
.dv-stack__group li img { width: 22px; height: 22px; }
@media (hover: hover) { .dv-stack__group li:hover { border-color: rgba(186,19,26,.35); translate: 0 -2px; box-shadow: 0 10px 20px -14px rgba(186,19,26,.5); } }

/* ---------- Vì sao chọn Vinaweb: lưới ảnh thực tế ---------- */
.dv-bento { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: 250px 250px; gap: 16px; margin-top: 44px; }
.dv-tile { position: relative; isolation: isolate; margin: 0; border-radius: 22px; overflow: hidden; color: #fff; background: #222; }
.dv-tile--1 { grid-row: span 2; }
.dv-tile--2 { grid-column: 2; grid-row: 1; }
.dv-tile--3 { grid-column: 2; grid-row: 2; }
.dv-tile--4 { grid-column: 3; grid-row: span 2; }
.dv-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dv-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(8,8,8,.55) 55%, rgba(8,8,8,.92) 100%); transition: background .45s; }
.dv-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 22px; }
.dv-tile__no { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--red-soft); }
.dv-tile b { font-size: 20px; line-height: 1.3; }
.dv-tile__text { max-width: 440px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.88); }
.dv-tile small { font-size: 12px; color: rgba(255,255,255,.6); }
.dv-tile:hover img, .dv-tile:focus-within img { transform: scale(1.06); }
.dv-tile:hover::after { background: linear-gradient(180deg, rgba(127,7,12,.15) 0%, rgba(127,7,12,.92) 100%); }

@media (max-width: 1024px) {
  .dv-shot { max-width: 560px; margin-inline: auto; padding-left: 20px; }
  .dv-chat { left: 0; }
  .dv-orb--1 { left: -6px; }
  .dv-orb--3 { right: -10px; }
  .dv-ai__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .dv-demo { grid-template-columns: 1fr; }
  .dv-demo__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .dv-demo__tabs button:hover { translate: none; }
  .dv-ai__cta { grid-template-columns: 180px 1fr; }
  .dv-ai__cta .btn { grid-column: 1 / -1; justify-self: start; }
  .dv-steps { grid-template-columns: 1fr 1fr; }
  .dv-stack { grid-template-columns: 1fr; gap: 30px; }
  .dv-stack__intro { position: static; }
  .dv-collage { max-width: 620px; margin-inline: auto; }
  .dv-bento { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 240px); }
  .dv-tile--1 { grid-column: 1; grid-row: span 2; }
  .dv-tile--2 { grid-column: 2; grid-row: 1; }
  .dv-tile--3 { grid-column: 2; grid-row: 2; }
  .dv-tile--4 { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 680px) {
  .dv-win__body { grid-template-columns: 1fr; min-height: 0; }
  .dv-win__side { display: none; }
  .dv-win__main { padding: 14px; }
  .dv-kpis { gap: 6px; }
  .dv-kpis div { padding: 9px; }
  .dv-kpis b { font-size: 18px; }
  .dv-shot { padding-left: 0; padding-bottom: 90px; }
  .dv-chat { width: 92%; }
  .dv-orb { width: 46px; height: 46px; border-radius: 13px; }
  .dv-orb img { width: 26px; height: 26px; }
  .dv-orb--1 { left: -8px; top: 70px; }
  .dv-orb--2 { right: -6px; top: -18px; width: 50px; height: 50px; }
  .dv-orb--3 { right: -8px; top: 150px; }
  .dv-orb--4 { display: none; }
  .dv-logos { padding: 40px 0 34px; }
  .dv-marquee li { padding: 9px 16px 9px 10px; font-size: 14px; }
  .dv-marquee img { width: 24px; height: 24px; }
  .dv-pains { grid-template-columns: 1fr; }
  .dv-collage { padding: 0 0 50px 18px; }
  .dv-chip { padding: 9px 12px; }
  .dv-chip b { font-size: 20px; }
  .dv-chip span { font-size: 11px; }
  .dv-chip--a { right: -6px; top: 14px; }
  .dv-chip--c { display: none; }
  .dv-demo__stage, .dv-pane { min-height: 0; }
  .dv-pane__chat { padding: 20px 16px; }
  .dv-msg { max-width: 92%; font-size: 14.5px; }
  .dv-pane__result { margin: 0 16px 18px; }
  .dv-ai__cta { grid-template-columns: 1fr; padding: 14px 18px 22px 14px; gap: 18px; }
  .dv-ai__photo { height: 170px; }
  .dv-steps { grid-template-columns: 1fr; gap: 12px; }
  .dv-bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 260px; }
  .dv-tile--1, .dv-tile--2, .dv-tile--3, .dv-tile--4 { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-marquee__track, .dv-orb, .dv-orb::after, .dv-chip, .dv-coders span, .dv-chat, .dv-hub__lines line, .dv-hub__node { animation: none; }
}

/* Hỏi đáp nền be để xen kẽ với khối "Vì sao chọn Vinaweb" (nền trắng) phía trên */
.dv .gw-faq { background: var(--beige); }
.dv .gw-faq .gw-qa { background: #fff; }