/* NBRE Selected Assets — bộ sưu tập động · thẻ TEASER kiểu Rolex (ảnh lớn, canh giữa, tối giản).
   THEME-AWARE: dùng --ink/--text/--serif của site → tối ở chế độ tối, sáng ở chế độ sáng, KHÔNG mất chữ
   (bản cũ hardcode var(--ink) làm sáng-trên-sáng ⇒ vô hình ở light mode). */
.collection01{
  padding:clamp(80px,10vw,150px) clamp(20px,5vw,76px);
  background:var(--ink);
  color:var(--text);
  border-top:1px solid var(--line);
}
.collection01__head{max-width:820px;margin:0 auto clamp(52px,7vw,96px);text-align:center}
.collection01__head h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em;line-height:var(--lh-title);
  margin:.28em 0;text-wrap:balance;
}
.collection01__intro{
  max-width:600px;margin:0 auto;font-size:var(--fs-lg);line-height:1.8;color:var(--muted);
}

/* 3 thẻ — nhiều khoảng thở, canh giữa kiểu vitrine Rolex */
.collection01__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,72px);max-width:1360px;margin:0 auto;
}
.collection-asset{
  cursor:pointer;background:transparent;outline:none;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .55s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.collection-asset:hover,.collection-asset:focus-visible{transform:translateY(-8px)}
.collection-asset:focus-visible .ca__addr{text-decoration:underline;text-underline-offset:6px}

.ca__media{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--ink-3)}
.ca__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease,cubic-bezier(.2,.7,.2,1))}
.collection-asset:hover .ca__media img{transform:scale(1.04)}

.ca__body{padding-top:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;align-items:center;width:100%}
.ca__code{font-size:var(--fs-2xs);letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
/* ĐỊA CHỈ = HERO */
.ca__addr{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.015em;line-height:var(--lh-title);
  margin:.5rem 0 .35rem;
}
.ca__loc{margin:0;font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* THẾ MẠNH — điểm khác biệt (essence của phép so sánh) */
.ca__strength{
  margin:1.5rem 0 0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.4;color:var(--text);max-width:24ch;
}
.ca__price{margin:clamp(22px,2.4vw,34px) 0 0;display:flex;align-items:baseline;gap:.4em}
.ca__price b{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1;font-variant-numeric:tabular-nums}
.ca__price i{font-style:normal;font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* đơn giá/m² TỰ TÍNH + diện tích — số liệu để so sánh giá trị (đi kèm danh hiệu "đơn giá/m² tốt nhất") */
.ca__ppm{margin-top:.5rem;font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.ca__cta{
  margin-top:clamp(20px,2vw,28px);display:inline-flex;gap:.6em;align-items:center;
  font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding-bottom:5px;
  transition:color .3s,border-color .3s;
}
.collection-asset:hover .ca__cta{color:var(--gold-bright);border-color:var(--gold)}
.ca__cta em{font-style:normal}

@media(max-width:900px){
  .collection01__grid{grid-template-columns:1fr;gap:0}
  .collection-asset{max-width:520px;width:100%;margin:0 auto;padding-bottom:clamp(44px,10vw,64px)}
  .ca__media{aspect-ratio:4/3;margin-top:clamp(30px,8vw,46px)}
  .collection-asset:first-child .ca__media{margin-top:0}
}

/* ── Trang Bộ sưu tập (overlay có URL thật /collections/…) ── */
.collection-page{position:fixed;inset:0;z-index:820;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ink);color:var(--text);opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .45s var(--ease),visibility .45s,transform .5s var(--ease)}
.collection-page.is-open{opacity:1;visibility:visible;transform:none}
.cp-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem clamp(1rem,4vw,2.2rem);background:color-mix(in srgb,var(--ink) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.cp-bar .ep-brand img{width:clamp(104px,9vw,128px);height:auto;display:block}
.cp-bar__sp{width:80px}
.collection01--page{padding-top:clamp(48px,7vw,88px)}