/* Hướng Dự án: nền trắng, xanh mực làm khung, nút đỏ tháp. Bản đồ là điểm nhớ. */
.dir-du-an {
  --bg: #fff; --fg: var(--ink); --muted: #56636F; --line: #DCE3EA; --surface: #fff;
  --cta-bg: var(--red); --cta-fg: #fff; --header-bg: rgba(255, 255, 255, .96);
}
.dir-du-an section { padding: clamp(56px, 8vw, 104px) 0; }
.dir-du-an main h2 { font-size: clamp(var(--step-3), 3.4vw, var(--step-4)); }
.dir-du-an .lede { font-size: var(--step-1); color: var(--muted); max-width: 40ch; }
.dir-du-an .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Hero + bản đồ */
.dir-du-an .hero { background: linear-gradient(#F5F8FB, #fff); padding-top: clamp(32px, 5vw, 72px); }
.dir-du-an .hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dir-du-an .kicker { color: var(--red); font-weight: 600; margin-bottom: 16px; }
.dir-du-an .hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 20px; }
.dir-du-an .map-card { background: #fff; padding: 12px; border-radius: 32px; border: 1px solid var(--line);
  box-shadow: 0 24px 48px rgba(13, 62, 110, .10); }
.dir-du-an .map { display: block; width: 100%; height: auto; font-family: "Be Vietnam Pro", sans-serif; }
.dir-du-an .map text { font-size: 13px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #EEF3F7; stroke-width: 4px; }
.dir-du-an .map .road { font-size: 10px; font-weight: 500; fill: #7A8794; stroke: none; }
.dir-du-an .map .water { font-size: 11px; font-weight: 500; fill: var(--navy); stroke: none; font-style: italic; }
.dir-du-an .map .area { font-size: 22px; font-weight: 800; fill: #9FB6C9; stroke: none; letter-spacing: -.01em; }
.dir-du-an .map .note { font-size: 10px; font-weight: 400; fill: #7A8794; stroke: none; }
.dir-du-an .map-wrap { position: relative; }
.dir-du-an .pin-dot { fill: var(--navy); transition: r .15s; }
.dir-du-an .flow { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 10 22; opacity: .8; }
.dir-du-an .ripple { opacity: 0; }

/* Thẻ dự án nổi cạnh ghim */
.dir-du-an .pop { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; width: max-content; max-width: 240px;
  padding: 8px 14px 8px 8px; background: #fff; border-radius: 16px; box-shadow: 0 16px 36px -10px rgba(13, 62, 110, .35);
  font-size: var(--step--1); line-height: 1.35; pointer-events: none; opacity: 0; translate: 22px -50%; scale: .92;
  transition: opacity .25s, scale .3s var(--ease); }
.dir-du-an .pop-left { translate: calc(-100% - 22px) -50%; }
.dir-du-an .pop.show { opacity: 1; scale: 1; }
.dir-du-an .pop img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; }
.dir-du-an .pop strong { display: block; font-weight: 700; }
.dir-du-an .pop span span { color: var(--muted); }

/* Bản đồ tự vẽ: đường kẻ ra, sông hiện, ghim rơi xuống lần lượt, văn phòng toả sóng; dòng sông chảy liên tục. */
.motion .dir-du-an .map-card { animation: card-in 1s .1s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.motion .dir-du-an .map .rd { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.5s var(--d, .4s) var(--ease-io) forwards; }
.motion .dir-du-an .map :is(.river, .park, .area, .road, .water, .flow) { animation: fade 1.2s .5s both; }
@keyframes fade { from { opacity: 0; } }
.motion .dir-du-an .map .flow { animation: fade 1.2s .8s both, flow 2.8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -64; } }
.motion .dir-du-an .pin { transform-box: fill-box; transform-origin: center bottom;
  animation: pin-drop .7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(1.3s + var(--i) * 140ms); }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-26px); } }
.motion .dir-du-an .office { animation: fade .6s 2s both; }
.motion .dir-du-an .ripple { transform-box: fill-box; transform-origin: center; animation: ripple 2.4s 2.2s ease-out infinite; }
@keyframes ripple { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }

/* Thanh chuyển dự án dính dưới thanh trên */
.dir-du-an .proj-nav { position: sticky; top: 72px; z-index: 10; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); transition: top .3s var(--ease); }
.scrolled .dir-du-an .proj-nav { top: 60px; }
.dir-du-an .proj-nav .wrap { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.dir-du-an .proj-nav a { flex: none; padding: 16px 0 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  white-space: nowrap; background: linear-gradient(var(--red), var(--red)) 50% 100% / 0 3px no-repeat;
  transition: color .3s, background-size .4s var(--ease); }
.dir-du-an .proj-nav a:hover { color: var(--ink); }
.dir-du-an .proj-nav a[aria-current] { color: var(--ink); background-size: 100% 3px; }
.dir-du-an .pin:hover .pin-dot, .dir-du-an .pin:focus-visible .pin-dot { fill: var(--red); r: 11; }
.dir-du-an .pin:focus-visible { outline: none; }

/* Khối từng dự án, xen trái/phải */
.dir-du-an .projects { padding-top: 24px; }
.dir-du-an .project { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start;
  padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); scroll-margin-top: 56px; }
.dir-du-an .project:first-child { border-top: 0; }
.dir-du-an .project.flip .project-photo { order: 2; }
.dir-du-an .project-photo { aspect-ratio: 4 / 3.3; border-radius: 28px; position: sticky; top: 148px; }
.motion .dir-du-an .project.flip .project-photo img { clip-path: inset(0 0 0 100%); }
.motion .dir-du-an .project .project-photo.in img { clip-path: inset(0); }
.dir-du-an .mini { transition: opacity .9s var(--ease), transform .9s var(--ease), border-color .3s, box-shadow .3s;
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }
.dir-du-an .mini:hover { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); box-shadow: 0 12px 28px -16px rgba(13, 62, 110, .3); }
.dir-du-an .mini:hover .ph img { transform: scale(1.08); }
.dir-du-an .project-body { display: grid; gap: 16px; align-content: start; justify-items: start; }
.dir-du-an .homes-h { font-size: var(--step-0); font-weight: 600; color: var(--muted); margin-top: 12px; }
.dir-du-an .minis { display: grid; gap: 12px; width: 100%; }
.dir-du-an .mini { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 10px;
  border: 1px solid var(--line); border-radius: 18px; }
.dir-du-an .mini .ph { aspect-ratio: 1; border-radius: 12px; }
.dir-du-an .mini .ph::after { display: none; }
.dir-du-an .mini-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--step--1); color: var(--muted); }
.dir-du-an .mini h4 { margin: 4px 0; font-size: var(--step-0); font-weight: 600; line-height: 1.35; }
.dir-du-an .price { font-weight: 800; }
.dir-du-an .badge { font-weight: 600; padding: 1px 8px; border-radius: 6px; }
.dir-du-an .badge-rent { background: #E3EEF8; color: var(--navy); }
.dir-du-an .badge-sale { background: #F7E3E5; color: var(--red); }

/* Dịch vụ: dải xanh mực */
.dir-du-an .services { background: var(--navy); color: #fff; }
.dir-du-an .services h2 { margin-bottom: 40px; }
.dir-du-an .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.dir-du-an .service-grid .icon { color: #fff; width: 40px; height: 40px; margin-bottom: 14px; }
.dir-du-an .service-grid h3 { font-size: var(--step-1); margin-bottom: 6px; }
.dir-du-an .service-grid p { color: #BCD0E3; font-size: var(--step--1); }

/* Ký gửi */
.dir-du-an .consign-box { display: grid; grid-template-columns: 1.1fr 1.3fr auto; gap: 40px; align-items: center; }
.dir-du-an .consign .lede { margin-top: 14px; }
.dir-du-an .steps { display: grid; gap: 10px; counter-reset: s; }
.dir-du-an .steps li { display: flex; gap: 14px; align-items: center; font-weight: 500; }
.dir-du-an .steps .n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--red); color: var(--red); font-weight: 800; }

/* Về chúng tôi */
.dir-du-an .about { background: #F5F8FB; }
.dir-du-an .about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dir-du-an .about h2 { margin-bottom: 16px; }
.dir-du-an .about p { font-size: var(--step-1); max-width: 40ch; }
.dir-du-an .storefront { margin: 0; }
.dir-du-an .storefront img { border-radius: 28px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

@media (max-width: 1024px) {
  .dir-du-an .consign-box { grid-template-columns: 1fr 1fr; }
  .dir-du-an .service-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .dir-du-an .hero-grid, .dir-du-an .about-grid, .dir-du-an .project, .dir-du-an .consign-box { grid-template-columns: 1fr; }
  .dir-du-an .project.flip .project-photo { order: 0; }
  .dir-du-an .project-photo { position: static; aspect-ratio: 16 / 10; }
  .dir-du-an .pop { display: none; }
}
@media (max-width: 560px) {
  .dir-du-an .proj-nav, .scrolled .dir-du-an .proj-nav { top: 64px; }
  .dir-du-an .proj-nav .wrap { gap: 20px; }
}
@media (max-width: 520px) {
  .dir-du-an .service-grid { grid-template-columns: 1fr; }
  .dir-du-an .mini { grid-template-columns: 84px 1fr; gap: 12px; }
  .dir-du-an .map-card { padding: 6px; border-radius: 22px; }
}