/* ============================================================
   ToanTranVillas — Awwwards prototype, shared styles
   Token màu lấy từ DESIGN-SYSTEM-TTV.md (không đổi giá trị ở đây)
   ============================================================ */

:root {
  --primary: #189A6A;
  --primary-dark: #0F6B49;
  --primary-light: #E3F3EC;
  --accent: #C2683C;
  --accent-dark: #A8542C;
  --accent-light: #F7E7DD;
  --secondary: #2E9BD6;
  --secondary-dark: #176899;
  --secondary-light: #E2F1FB;
  --highlight: #F2A93B;
  --highlight-light: #FCEFD6;
  --surface: #FFFFFF;
  --surface-alt: #F7F5F0;
  --surface-sunken: #EFEBE3;
  --border: #E5E0D6;
  --on-surface: #1F2421;
  --on-surface-muted: #5B6660;
}

html { scroll-behavior: auto; }
body {
  background: var(--surface);
  color: var(--on-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary-light); color: var(--primary-dark); }

/* Scrollbar tinh tế */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-alt); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid var(--surface-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ---------- Hạt grain mỏng phủ toàn trang ---------- */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Con trỏ tuỳ biến (chỉ desktop) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; border-radius: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 7px; height: 7px; background: var(--accent-dark); }
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(168, 84, 44, .45);
  transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1),
              background-color .35s, border-color .35s;
}
.cursor-ring.is-hover {
  width: 72px; height: 72px;
  background: rgba(194, 104, 60, .07);
  border-color: rgba(168, 84, 44, .7);
}
.cursor-ring.is-view::after {
  content: "Xem"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 'Manrope', sans-serif; color: var(--accent-dark);
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Màn chuyển trang ---------- */
.page-curtain {
  position: fixed; inset: 0; z-index: 9990;
  background: var(--primary-dark);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.page-curtain .curtain-logo {
  font: 700 clamp(22px, 3vw, 34px)/1 'Noto Serif', serif;
  color: #fff; opacity: 0;
}

/* ---------- Header ---------- */
#site-header { transition: transform .45s cubic-bezier(.22,1,.36,1), background-color .35s, box-shadow .35s, border-color .35s; }
#site-header.is-scrolled {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
#site-header.is-hidden { transform: translateY(-100%); }
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1.5px; background: var(--accent-dark);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--primary-dark); }

/* Menu mobile */
#mobile-menu { clip-path: circle(0% at calc(100% - 44px) 36px); transition: clip-path .7s cubic-bezier(.65,0,.35,1); }
#mobile-menu.is-open { clip-path: circle(150% at calc(100% - 44px) 36px); }

/* ---------- Chấm pulse (trạng thái "đang trực") ---------- */
.pulse-ring { position: relative; }
.pulse-ring::before, .pulse-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  border: 2px solid currentColor; opacity: 0;
  animation: ttv-pulse 2.6s cubic-bezier(.2,.6,.35,1) infinite;
}
.pulse-ring::after { animation-delay: 1.3s; }
@keyframes ttv-pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; will-change: transform; animation: ttv-marquee 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes ttv-marquee { to { transform: translateX(-50%); } }

/* ---------- Placeholder ảnh (thay bằng ảnh thật khi deploy) ---------- */
.img-ph {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.img-ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: overlay;
}
.ph-green   { background: linear-gradient(150deg, #DDF0E6 0%, #9CCDB6 55%, #4F9B79 100%); }
.ph-terra   { background: linear-gradient(150deg, #F9EADF 0%, #E5B696 55%, #C2683C 100%); }
.ph-sky     { background: linear-gradient(150deg, #E6F3FC 0%, #A8D4EE 55%, #4D9FCC 100%); }
.ph-amber   { background: linear-gradient(150deg, #FDF2DC 0%, #F4CD8D 55%, #DD9A33 100%); }
.ph-dusk    { background: linear-gradient(160deg, #FCEFD6 0%, #EFB98A 45%, #7E9C8B 80%, #2F5D49 100%); }
.ph-river   { background: linear-gradient(165deg, #FCEFD6 0%, #F2C189 35%, #8FB8A6 70%, #176899 100%); }
.img-ph .ph-mark {
  position: relative; z-index: 1; text-align: center;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(31,36,33,.25);
}
.img-ph .ph-mark .material-symbols-outlined { font-size: 44px; }
.img-ph .ph-note {
  position: absolute; bottom: 8px; right: 10px; z-index: 1;
  font: 500 10px/1 'Manrope', sans-serif; letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}

/* Zoom ảnh khi hover card */
.card-zoom .img-ph, .card-zoom img { transition: transform .9s cubic-bezier(.22,1,.36,1); }
.card-zoom:hover .img-ph, .card-zoom:hover img { transform: scale(1.06); }

/* ---------- Card nghiêng 3D ---------- */
.tilt-wrap { perspective: 1000px; }
.tilt-card { transform-style: preserve-3d; will-change: transform; }
.tilt-card .tilt-pop { transform: translateZ(36px); }
.tilt-card .tilt-glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.34), transparent 55%);
  opacity: 0; transition: opacity .4s;
}
.tilt-card:hover .tilt-glare { opacity: 1; }

/* ---------- SplitText: ẩn cho đến khi split xong ---------- */
[data-split], [data-split-hero] { visibility: hidden; }
[data-split].is-ready, [data-split-hero].is-ready { visibility: visible; }

/* ---------- Đường kẻ tiêu đề section ---------- */
.kicker { display: inline-flex; align-items: center; gap: .75rem; letter-spacing: .22em; }
.kicker::before { content: ""; width: 2.5rem; height: 1px; background: var(--accent-dark); }

/* ---------- Hero scene ---------- */
.hero-scene svg { display: block; width: 100%; height: 100%; }
.sun-glow { animation: ttv-sunglow 7s ease-in-out infinite alternate; transform-origin: center; }
@keyframes ttv-sunglow { from { opacity: .75; } to { opacity: 1; } }
.river-shimmer { animation: ttv-shimmer 9s ease-in-out infinite alternate; }
@keyframes ttv-shimmer { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
.leaf-sway { transform-origin: bottom center; animation: ttv-sway 6.5s ease-in-out infinite alternate; }
.leaf-sway.delay { animation-delay: 2.2s; }
@keyframes ttv-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }
.bird { animation: ttv-bird 26s linear infinite; }
.bird.b2 { animation-delay: 7s; }
.bird.b3 { animation-delay: 14s; }
@keyframes ttv-bird {
  0% { transform: translate(-6%, 0); opacity: 0; }
  6% { opacity: .8; }
  50% { transform: translate(55vw, -36px); opacity: .8; }
  100% { transform: translate(110vw, -10px); opacity: 0; }
}

/* Mũi tên cuộn */
.scroll-hint { animation: ttv-hint 2.2s ease-in-out infinite; }
@keyframes ttv-hint { 0%,100% { transform: translateY(0); opacity: .9; } 55% { transform: translateY(10px); opacity: .4; } }

/* ---------- Timeline hành trình ---------- */
.journey-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.journey-dot { transform: scale(0); transform-origin: center; transform-box: fill-box; }

/* ---------- Filter chips ---------- */
.chip {
  transition: background-color .3s, color .3s, border-color .3s;
}
.chip.is-active {
  background: var(--primary-dark); color: #fff; border-color: var(--primary-dark);
}

/* ---------- Bản đồ khu vực ---------- */
.map-pin { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.map-pin .pin-pulse { transform-box: fill-box; transform-origin: center; animation: ttv-pinpulse 2.4s ease-out infinite; }
@keyframes ttv-pinpulse { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.map-pin:hover circle.pin-core, .map-pin.is-active circle.pin-core { stroke-width: 3; }
.map-tooltip { pointer-events: none; transition: opacity .25s, transform .25s; opacity: 0; transform: translateY(6px); }
.map-tooltip.is-on { opacity: 1; transform: translateY(0); }

/* ---------- Carousel kéo ---------- */
.drag-row { cursor: grab; }
.drag-row:active { cursor: grabbing; }

/* ---------- Biểu đồ ---------- */
.chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart-area { opacity: 0; }
.chart-dot { transform: scale(0); transform-origin: center; transform-box: fill-box; }
.bar-track { overflow: visible; }
.bar-fill { transform: scaleX(0); transform-origin: left; }

/* ---------- Form ---------- */
.input-ttv {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .65rem;
  padding: .8rem 1rem;
  width: 100%;
  font: 500 14px/1.4 'Manrope', sans-serif;
  color: var(--on-surface);
  transition: border-color .3s, box-shadow .3s;
}
.input-ttv:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ---------- Công cụ tính tài chính (dùng chung 4 landing) ---------- */
.calc input[type="range"] {
  width: 100%; height: 30px;
  accent-color: var(--accent-dark);
  cursor: pointer;
  margin-top: .35rem;
}
.calc-row { margin-top: .9rem; }
.calc-row output {
  font: 800 13px/1.4 'Manrope', sans-serif;
  color: var(--primary-dark);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.calc .calc-o-vay, .calc .calc-o-von, .calc .calc-o-gop,
.calc .calc-o-bu, .calc .calc-o-chi { transition: color .2s; }
.calc .is-bump { color: var(--accent); }

/* ---------- Khác ---------- */
.text-stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
}
.section-num { font-feature-settings: "tnum"; }
img { user-select: none; }

/* ---------- FAQ (details/summary thuần) ---------- */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { list-style: none; }
.faq-chevron { transition: transform .3s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }