/* ==========================================================================
   Trang chủ – House DNA Radar (FR-01 → FR-13)
   ========================================================================== */

/* ---------- Hero layout ----------
   Desktop:  [ stage | intro    ]
             [ stage | controls ]
   Mobile:   intro → stage → controls → dock (cố định đáy)               */
.dna-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr);
  grid-template-areas: "stage intro" "stage controls";
  grid-template-rows: auto 1fr;
  column-gap: var(--space-7);
  row-gap: var(--space-5);
  padding-block: var(--space-7) var(--space-12);
  align-items: start;
}
.dna-hero__intro { grid-area: intro; display: grid; gap: var(--space-3); }
.dna-hero__stage { grid-area: stage; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.dna-hero__controls { grid-area: controls; display: grid; gap: var(--space-4); }
.dna-hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }

@media (max-width: 1023.98px) {
  .dna-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "stage" "controls";
    grid-template-rows: auto;
    padding-block: var(--space-5) var(--space-6);
    row-gap: var(--space-4);
  }
  .dna-hero__stage { position: static; margin-inline: calc(var(--space-4) * -1); }
}

/* ---------- Stage: ảnh + hotspot ---------- */
.dna-stage__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  aspect-ratio: 3 / 2;
}
.dna-stage__frame img { width: 100%; height: 100%; object-fit: cover; }
.dna-stage__caption { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }

.dna-hotspot {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  padding: 0; background: transparent;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dna-hotspot:hover { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.dna-hotspot.is-active {
  border: 3px solid var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-glow), 0 0 28px rgba(43, 212, 138, .55);
}
.dna-hotspot:focus-visible { outline-offset: 0; }

.dna-stage__zoom {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  display: none;
  background: rgba(11, 20, 18, .85); border: 0; color: var(--color-text);
}
@media (max-width: 1023.98px) {
  .dna-stage__frame { border-radius: 0; border-inline: 0; }
  .dna-stage__zoom { display: inline-flex; }
  .dna-stage__caption { padding-inline: var(--space-4); }
  .dna-hotspot.is-active { border-width: 2.5px; box-shadow: 0 0 0 3px var(--color-accent-glow), 0 0 18px rgba(43, 212, 138, .6); }
}

/* ---------- Tabs 6 trục ---------- */
.dna-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.dna-tab {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 56px; padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--color-surface); color: var(--color-text);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dna-tab:hover { border-color: var(--color-border-strong); }
.dna-tab[aria-selected="true"] { background: var(--color-surface-active); border-color: var(--color-accent); }
.dna-tab__text { display: grid; line-height: 1.2; min-width: 0; }
.dna-tab__name { font-weight: 700; font-size: var(--fs-sm); }
.dna-tab__status { font-size: var(--fs-xs); color: var(--color-text-muted); }
.dna-tab.has-selection .dna-tab__status { color: var(--color-accent); }

@media (max-width: 1023.98px) {
  .dna-tabs {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4);
    scrollbar-width: none;
  }
  .dna-tabs::-webkit-scrollbar { display: none; }
  .dna-tab { flex: 0 0 auto; min-height: 48px; border-radius: var(--radius-pill); padding: 0 var(--space-4) 0 var(--space-2); scroll-snap-align: start; }
  .dna-tab__status { display: none; }
}

/* ---------- Panel tiêu chí ---------- */
.dna-panel { display: grid; gap: var(--space-3); }
.dna-panel__head { display: flex; align-items: center; gap: var(--space-3); }
.dna-panel__name { font-size: var(--fs-lg); font-weight: 800; }
.dna-panel__question { color: var(--color-text-soft); font-size: 15px; max-width: 60ch; }

/* ---------- Dock: bộ đếm + CTA ---------- */
.dna-dock { display: grid; gap: var(--space-3); }
.dna-counter { display: grid; gap: var(--space-2); }
.dna-counter__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dna-counter__main { display: flex; align-items: baseline; gap: var(--space-2); }
.dna-counter__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-counter); font-weight: 600; line-height: 1; color: var(--color-accent); }
.dna-counter__label { color: var(--color-text-muted); }
.dna-counter__total, .dna-counter__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
.dna-counter.is-loading .dna-counter__value { opacity: .55; }
.dna-dock__actions { display: grid; gap: var(--space-2); }

@media (max-width: 1023.98px) {
  .dna-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
    background: var(--color-bg-alt); border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    gap: var(--space-2);
  }
  .dna-dock .c-card { background: transparent; border: 0; padding: 0; }
  .dna-counter__value { font-size: 1.625rem; }
  .dna-counter__note, .dna-dock__secondary { display: none; }
  .has-dock { padding-bottom: 150px; }
}

/* ---------- Khối "Mỗi căn một báo cáo" ---------- */
.report-teaser { background: var(--color-bg-alt); border-block: 1px solid var(--color-border); }
.report-teaser__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-12); align-items: center; padding-block: var(--space-14); }
.report-teaser__text { display: grid; gap: var(--space-4); max-width: 56ch; }
.report-teaser__lead { color: var(--color-text-soft); }
.report-teaser__figure { justify-self: center; width: min(100%, 460px); }
@media (max-width: 1023.98px) {
  .report-teaser__inner { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
}

/* ---------- Giá theo khu vực ---------- */
.area-prices { display: grid; gap: var(--space-6); padding-block: var(--space-14); }
.area-prices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-7); }
.area-prices__name { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--space-2); }
.area-prices__link {
  display: flex; justify-content: space-between; gap: var(--space-2);
  min-height: var(--size-touch); align-items: center;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text); text-decoration: none;
}
.area-prices__link:hover { color: var(--color-accent); }
.area-prices__price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ==========================================================================
   Bổ sung khi ghép vào site (views/home.js)
   ========================================================================== */

/* Tiêu chí chưa đủ dữ liệu (PRD mục 8): vẫn hiển thị để người dùng biết, nhưng không chọn được */
.c-chip--unavailable { border-style: dashed; color: var(--color-text-muted); cursor: not-allowed; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-block: var(--space-1); }
.c-chip--unavailable:hover { border-color: var(--color-border-strong); }
.c-chip__note { font-size: var(--fs-xs); font-weight: 500; }

/* Gợi ý nới tiêu chí khi 0 căn (FR-07) */
.dna-counter__relax { font-size: var(--fs-sm); color: var(--color-warn-text); }

/* Radar render phía server — màu từ token */
.c-radar__grid { fill: none; stroke: var(--color-border); stroke-width: 1; }
.c-radar__shape { fill: color-mix(in srgb, var(--color-accent) 22%, transparent); stroke: var(--color-accent); stroke-width: 2.5; stroke-linejoin: round; }
.c-radar__dot { fill: var(--axis-color); stroke: var(--color-text); stroke-width: 1.5; }
.c-radar__label { fill: var(--color-text); font-size: 18px; font-weight: 700; font-family: var(--font-sans); }

/* Giá theo khu vực */
.area-prices__lede { margin-top: var(--space-2); color: var(--color-text-muted); max-width: 72ch; }
.area-prices__name a { display: inline-flex; align-items: center; min-height: var(--size-touch); color: var(--color-text); text-decoration: none; }
.area-prices__name a:hover { color: var(--color-accent); }
.area-prices__link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.area-prices__price { white-space: nowrap; }

/* Vùng chạm ≥ 44px (FR-13): hotspot co theo ảnh nên đặt sàn tối thiểu; link báo cáo mẫu là link đứng riêng */
.dna-hotspot { min-width: var(--size-touch); min-height: var(--size-touch); }
.report-teaser__text a { display: inline-flex; align-items: center; min-height: var(--size-touch); }
/* CTA có số đếm cập nhật động: nội dung trong 1 span nhãn để giữ dấu cách quanh số */
[data-cta-map] { white-space: normal; }

/* PRD 5.5: tôn trọng prefers-reduced-motion — tắt glow; viền 3px vẫn giữ để biết trục đang chọn */
@media (prefers-reduced-motion: reduce) {
  .dna-hotspot.is-active { box-shadow: none; }
}
@media (max-width: 1023.98px) {
  .dna-tabs { overscroll-behavior-x: contain; }
}

/* ==========================================================================
   Khối "Thẩm định căn bất kỳ" — tính năng chủ lực, đặt ngay dưới bộ lọc
   ========================================================================== */
.home-check { background: var(--color-bg-alt); border-block: 1px solid var(--color-border); }
.home-check__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding-block: var(--space-14); }
.home-check__text { display: grid; gap: var(--space-4); max-width: 60ch; }
.home-check__lead { color: var(--color-text-soft); }
.hc-steps { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.hc-steps__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.hc-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-accent); color: var(--color-accent); font-weight: 600; }
.home-check__form { display: grid; gap: var(--space-3); padding: var(--space-6); border-color: var(--color-border-strong); }
.home-check__label { font-weight: 700; }
.home-check__input { width: 100%; min-height: 132px; resize: vertical; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font: inherit; line-height: var(--lh-base); }
.home-check__input::placeholder { color: var(--color-text-muted); }
.home-check__input:hover { border-color: var(--color-accent); }
.home-check__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); }
.home-check__note { font-size: var(--fs-sm); color: var(--color-text-muted); }
@media (max-width: 1023.98px) {
  .home-check__inner { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
  .home-check__form { padding: var(--space-5); }
}

/* ==========================================================================
   Khối "Điểm tin thị trường"
   ========================================================================== */
.news { display: grid; gap: var(--space-6); padding-block: var(--space-14) 0; }
.news__lede { margin-top: var(--space-2); color: var(--color-text-muted); max-width: 72ch; }
.news__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }
.news-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color var(--dur) var(--ease); }
.news-card:hover { border-color: var(--color-border-strong); }
.news-card:focus-within { border-color: var(--color-accent); }
.news-card__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }
.news-card__type { font-family: var(--font-mono); font-weight: 600; color: var(--color-accent); letter-spacing: .03em; }
.news-card__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; text-wrap: pretty; overflow-wrap: anywhere; }
.news-card__link { color: var(--color-text); text-decoration: none; }
.news-card__link:hover { color: var(--color-accent); }
.news-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.news-card__link:focus-visible { outline: none; }
.news-card__link:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.news-card__detail { font-size: var(--fs-sm); color: var(--color-text-soft); overflow-wrap: anywhere; }
.news-card__cta { margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-accent); }
.news__freshness { font-size: var(--fs-sm); color: var(--color-text-muted); }
@media (max-width: 1023.98px) {
  .news { padding-block: var(--space-8) 0; }
}