/* Hướng Mực: nền mực, chữ trắng, cam chỉ làm nét. */
.dir-muc {
  --bg: var(--ink); --fg: #fff; --muted: #A9B8C8; --line: rgba(255, 255, 255, .14); --surface: #fff;
  --cta-bg: var(--orange); --cta-fg: var(--ink); --header-bg: var(--ink); --header-line: rgba(255, 255, 255, .1);
  --footer-bg: #0A1A29; --cream: #FBF7F0;
}
.dir-muc .nav-mobile { color: var(--ink); }
/* Vân hạt mịn phủ cả trang cho nền mực có chất liệu (như giấy in), không bắt sự kiện chuột. */
.dir-muc::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .09;
  mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dir-muc .demo-ribbon { background: #0A1A29; color: #C9D4DF; }

.dir-muc section { padding: clamp(64px, 9vw, 128px) 0; }
.dir-muc main h2 { font-size: clamp(var(--step-3), 4vw, var(--step-5)); }
.dir-muc .sec-head { display: grid; gap: 12px; max-width: 46ch; margin-bottom: clamp(32px, 5vw, 64px); }
.dir-muc .lede { font-size: var(--step-1); color: var(--muted); max-width: 40ch; }
.dir-muc .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Hero: chữ trái, ô vòm phải ôm bởi vòng cung mặt trời */
.dir-muc .hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 80px); overflow: hidden; }
.dir-muc .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.dir-muc .kicker { color: var(--tagline-on-dark); font-weight: 500; margin-bottom: 20px; }
.dir-muc .hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; margin-bottom: 24px; }
.dir-muc .hero-art { position: relative; aspect-ratio: 1 / 1.08; }
.dir-muc .arch { position: absolute; inset: 12% 12% 4% 12%; border-radius: 999px 999px 18px 18px; }
.dir-muc .sun-arc { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Quầng nắng sau ô vòm (Ánh Dương = ánh mặt trời). */
.dir-muc .sun-glow { position: absolute; left: 50%; top: 60%; width: 135%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(240, 138, 28, .6), rgba(240, 138, 28, .26) 42%, rgba(179, 32, 47, .08) 70%, transparent); }

/* Bình minh: quầng nắng dâng lên, ô vòm mở từ dưới, ảnh lắng dần, vòng cung vẽ quanh. */
.motion .dir-muc .sun-glow { animation: sunrise 2.6s .1s var(--ease) both, breathe 7s 2.7s ease-in-out infinite alternate; }
@keyframes sunrise { from { opacity: 0; transform: translateY(30%) scale(.5); } }
@keyframes breathe { to { transform: scale(1.08); opacity: .8; } }
.motion .dir-muc .arch { animation: arch-up 1.5s .35s var(--ease-io) both; }
@keyframes arch-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.motion .dir-muc .arch img { animation: settle 6s .35s var(--ease) both; }
@keyframes settle { from { transform: scale(1.25); } }
.motion .dir-muc .sun-arc path { stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: draw 1.8s 1s var(--ease-io) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Căn hộ: lưới 2 cột lệch nhịp */
.dir-muc .listings { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); row-gap: 56px; }
.dir-muc .listing:nth-child(even) { translate: 0 calc(96px + var(--py, 0px)); }
.dir-muc .listings { padding-bottom: 150px; }
.dir-muc .listing .ph { aspect-ratio: 4 / 3; border-radius: 4px; }
.dir-muc .listing-body { display: grid; gap: 6px; padding-top: 18px; border-top: 0; }
.dir-muc .where { display: flex; align-items: center; gap: 12px; color: var(--tagline-on-dark); font-weight: 500; }
.dir-muc .tag { font-size: var(--step--1); padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); }
.dir-muc .listing h3 { font-size: var(--step-2); font-weight: 600; }
.dir-muc .specs { color: var(--muted); }
.dir-muc .price { font-size: var(--step-2); font-weight: 800; }
.dir-muc .listing:hover .ph img, .dir-muc .project:hover .ph img { transform: scale(1.06); }
.dir-muc .featured .center { margin-top: 48px; }

/* Dải tên dự án chạy ngang: chữ rỗng xen chữ đặc, ngăn bằng cung mặt trời nhỏ. Rê chuột thì dừng. */
.dir-muc .ticker { overflow: hidden; padding: clamp(28px, 4vw, 52px) 0; border-top: 1px solid var(--line); background: #0A1A29; }
.dir-muc .track { display: flex; align-items: center; width: max-content; }
.dir-muc .track > * { margin-right: clamp(24px, 3vw, 48px); flex: none; }
.dir-muc .ticker span { font-size: clamp(2.6rem, 7vw, 6.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
  white-space: nowrap; }
.dir-muc .ticker .ghost { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .42); }
.dir-muc .spark { width: clamp(26px, 3.4vw, 50px); height: auto; }
.motion .dir-muc .track { animation: ticker 50s linear infinite; }
.dir-muc .ticker:hover .track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Dự án: 4 cột ảnh dọc */
.dir-muc .projects { background: #0A1A29; }
.dir-muc .project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dir-muc .project .ph { aspect-ratio: 3 / 4; border-radius: 4px; }
.dir-muc .project-text { padding-top: 16px; display: grid; gap: 6px; }
.dir-muc .project h3 { font-size: var(--step-1); justify-self: start; padding-bottom: 6px;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); }
.dir-muc .project:hover h3 { background-size: 100% 2px; }
.dir-muc .project .ph img { filter: saturate(.7) brightness(.88); transition: transform 1.2s var(--ease), filter .8s; }
.dir-muc .project:hover .ph img { filter: none; }
.dir-muc .project p { color: var(--muted); font-size: var(--step--1); }

/* Dịch vụ */
.dir-muc .services { padding-block: 72px; border-block: 1px solid var(--line); }
.dir-muc .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.dir-muc .service-grid .icon { color: var(--orange); width: 40px; height: 40px; margin-bottom: 16px; }
.dir-muc .service-grid h3 { font-size: var(--step-1); margin-bottom: 8px; }
.dir-muc .service-grid p { color: var(--muted); font-size: var(--step--1); }

/* Ký gửi: khối sáng giữa trang tối */
.dir-muc .consign { background: var(--cream); color: var(--ink); }
.dir-muc .consign .lede { color: #4F5D6B; margin-top: 20px; }
.dir-muc .consign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.dir-muc .steps { display: grid; gap: 0; }
.dir-muc .steps li { position: relative; display: flex; gap: 20px; align-items: baseline; padding: 22px 0; font-size: var(--step-1); font-weight: 500; }
/* Vạch kẻ dưới mỗi bước tự kéo ra khi bước hiện. */
.dir-muc .steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #E4DCCD;
  transform-origin: left; }
.motion .dir-muc .steps li::after { transform: scaleX(0); transition: transform 1.2s var(--ease) calc(var(--i, 0) * 90ms + .25s); }
.motion .dir-muc .steps li.in::after { transform: none; }
.dir-muc .steps li:first-child { border-top: 1px solid #E4DCCD; }
.dir-muc .steps .n { font-weight: 800; color: var(--red); min-width: 1.2em; }

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

@media (max-width: 960px) {
  .dir-muc .project-grid { grid-template-columns: 1fr 1fr; }
  .dir-muc .service-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .dir-muc .hero-grid, .dir-muc .consign-grid, .dir-muc .about-grid { grid-template-columns: 1fr; }
  .dir-muc .hero-art { max-width: 420px; width: 100%; margin: 0 auto; }
  .dir-muc .listings { grid-template-columns: 1fr; padding-bottom: 0; }
  .dir-muc .listing:nth-child(even) { translate: none; }
}
@media (max-width: 480px) {
  .dir-muc .project-grid { grid-template-columns: 1fr; }
  .dir-muc .project .ph { aspect-ratio: 16 / 10; }
  .dir-muc .service-grid { grid-template-columns: 1fr; gap: 28px; }
}