/*
 * ChoThueDaNang / demo2
 * Semantic styling derived from Penpot: UI KIT & Design system.
 * The screen boards are references, not pixel-locked screenshots.
 * No framework: HTML + CSS + progressive vanilla JS only.
 */
:root {
  --ctdn-primary-500:#247DC7;
  --ctdn-primary-600:#1F70B5;
  --ctdn-navy-800:#143C73;
  --ctdn-accent-400:#FF994A;
  --ctdn-cyan-300:#56D4F5;
  --ctdn-neutral-900:#0F172A;
  --ctdn-neutral-700:#334155;
  --ctdn-neutral-500:#64748B;
  --ctdn-border:#E2E8F0;
  --ctdn-surface:#FFFFFF;
  --ctdn-surface-subtle:#F5FBFF;
  --ctdn-success:#10B981;
  --ctdn-grad-brand-depth:linear-gradient(135deg,#143C73,#247DC7);
  --ctdn-grad-azure-ocean:linear-gradient(90deg,#247DC7,#56D4F5);
  --ctdn-grad-warm-sunset:linear-gradient(135deg,#FF994A,#FFBC77);
  --ctdn-grad-azure-mist:linear-gradient(180deg,#FFFFFF,#E5F5FF);
  --ctdn-grad-premium-vip:linear-gradient(135deg,#0E2A52,#1F70B5,#56D4F5);
  --ctdn-focus:3px solid #56D4F5;
  --ctdn-duration-fast:150ms;
  --ctdn-duration-normal:250ms;
  --ctdn-duration-slow:350ms;
  --ctdn-ease:cubic-bezier(.22,1,.36,1);
  --ctdn-radius-sm:6px;
  --ctdn-radius-md:8px;
  --ctdn-radius-lg:12px;
  --ctdn-radius-xl:16px;
  --ctdn-space-1:4px;
  --ctdn-space-2:8px;
  --ctdn-space-3:12px;
  --ctdn-space-4:16px;
  --ctdn-space-6:24px;
  --ctdn-space-8:32px;
  --ctdn-space-12:48px;
  --navy:var(--ctdn-navy-800);
  --azure:var(--ctdn-primary-500);
  --blue:var(--ctdn-primary-600);
  --orange:var(--ctdn-accent-400);
  --muted:var(--ctdn-neutral-500);
  --line:var(--ctdn-border);
  --surface:var(--ctdn-surface);
  --soft:var(--ctdn-surface-subtle);
  --success:var(--ctdn-success);
  --shadow:0 8px 24px rgba(15,23,42,.075);
}
html { scroll-padding-top:96px; }
body,button,input,textarea,select {
  font-family:'Be Vietnam Pro',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body { background:var(--ctdn-surface-subtle);color:var(--ctdn-neutral-900); }
h1,h2,h3,h4 { color:var(--ctdn-navy-800); }
p { color:var(--ctdn-neutral-500); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible { outline:var(--ctdn-focus);outline-offset:3px; }
.site-header { background:rgba(255,255,255,.98);box-shadow:0 2px 10px rgba(20,60,115,.04); }
.header-wrap { min-height:68px; }
.brand-mark { background:var(--ctdn-grad-brand-depth);border-radius:50%; }
.desktop-nav a { transition:color var(--ctdn-duration-fast) ease; }
.desktop-nav a.active { color:var(--azure); }
.btn { transition:background var(--ctdn-duration-fast) ease,box-shadow var(--ctdn-duration-fast) ease,
  transform var(--ctdn-duration-fast) var(--ctdn-ease),border-color var(--ctdn-duration-fast) ease;
}
.btn-primary { background:linear-gradient(98deg,#1F70B5,#247DC7);color:#fff; }
.btn-orange { background:var(--ctdn-grad-warm-sunset);color:#143C73;
  box-shadow:0 5px 15px rgba(255,153,74,.21); }
.btn-orange:hover,.btn-orange:focus-visible { color:#143C73;box-shadow:0 8px 18px rgba(255,153,74,.30); }
.btn-navy { background:var(--ctdn-grad-brand-depth); }
.btn-outline:hover,.btn-ghost:hover { background:#F5FBFF;border-color:#BCE0F7; }
.btn:disabled,.btn[disabled] { filter:grayscale(.5);opacity:.55;transform:none; }
.badge { border-radius:var(--ctdn-radius-sm); }
.badge-owner { color:#047857;background:#ECFDF5; }
.surface,.property-card,.listing-row,.news-card,.broker-card { border-color:var(--ctdn-border);
  box-shadow:0 4px 15px rgba(20,60,115,.055); }
.property-card:hover,.listing-row:hover,.news-card:hover { box-shadow:0 9px 25px rgba(20,60,115,.10); }
.card-title,.listing-row .card-title { color:var(--ctdn-navy-800);font-weight:600; }
.card-price,.listing-row .card-price,.detail-price { color:var(--ctdn-accent-400);font-weight:700; }
.card-specs { color:var(--ctdn-neutral-700); }
.card-bottom { border-top-color:#F1F5F9; }
.section-top h2 { position:relative; }
.section-top h2::before { content:'';display:block;width:30px;height:3px;margin:0 0 10px;background:var(--ctdn-grad-azure-ocean);border-radius:8px; }
.section-top .text-link:hover { color:var(--ctdn-primary-600); }
.search-band { background:var(--ctdn-grad-azure-mist);border-bottom-color:#E5F0F9; }
.search-control { background:#fff;border-color:#DDE8F0;transition:border-color var(--ctdn-duration-fast) ease,box-shadow var(--ctdn-duration-fast) ease; }
.search-control:focus-within { border-color:var(--ctdn-primary-500);box-shadow:0 0 0 3px #56D4F533; }
.search-control:has(select:focus-visible),.search-control:has(input:focus-visible) { z-index:1; }
.category .category-icon { background:#fff;border-color:#CBE6FA; }
.category:hover .category-icon { background:var(--ctdn-grad-azure-mist);border-color:var(--ctdn-primary-500); }
.hero-image-overlay { background:linear-gradient(90deg,rgba(14,42,82,.96),rgba(20,60,115,.84) 45%,rgba(31,112,181,.17)); }
.hero-slide-copy h1 { font-weight:700;letter-spacing:-.035em; }
.hero-arrow,.gallery-nav { width:44px;height:44px; }
.carousel-arrow { width:40px;height:40px;flex-basis:40px; }
.carousel-track { gap:24px; }
.carousel-viewport:focus-visible { outline:var(--ctdn-focus); }
.feature-strip { background:linear-gradient(100deg,#143C73F3,#143C73D6 52%,#143C7357 100%),url('/assets/photos/office-modern.jpg') center 48%/cover; }
.page-banner { background:var(--ctdn-grad-brand-depth); }
.map-page { background:var(--ctdn-surface-subtle); }
.fake-map { position:relative; }
.fake-map .map-label { background:#FFFFFFDD;padding:5px 10px;border-radius:20px; }
.filter-sidebar { background:#fff; }
.news-feature .copy h2 { color:var(--ctdn-navy-800); }
.news-feature .copy { background:#fff; }
.site-footer { background:var(--ctdn-grad-azure-mist); }
.demo-notice { background:#E5F5FF;color:#275783; }
.demo-notice b { color:var(--ctdn-navy-800); }
.footer-newsletter:focus-within { outline:var(--ctdn-focus);outline-offset:2px; }
@media(max-width:900px){
  .container,.header-wrap { width:calc(100% - 36px); }
  .hero-arrow,.gallery-nav { width:40px;height:40px; }
  .carousel-track { gap:16px; }
}
@media(max-width:620px){
  html { scroll-padding-top:75px; }
  body { font-size:13px; }
  .container,.header-wrap { width:calc(100% - 32px); }
  .header-wrap { min-height:56px; }
  .btn { min-height:44px; }
  .btn-small { min-height:36px; }
  .header-actions .post-btn { min-height:36px; }
  .mobile-menu-btn,.mobile-phone-btn { min-width:44px;min-height:44px; }
  .search-control { min-height:44px; }
  .search-home .search-control { min-height:40px; }
  .search-home .search-keyword { min-height:44px; }
  .hero-slide { padding:20px 24px; }
  .hero-slide-copy h1 { font-size:21px;letter-spacing:-.02em; }
  .hero-slide-copy .btn { min-height:40px; }
  .hero-image-overlay { background:linear-gradient(90deg,#143C73F2,#143C73DC 67%,#143C7360); }
  .section-top h2::before { margin-bottom:7px; }
  .carousel-track { gap:12px; }
  .carousel-arrow { width:36px;height:36px;flex-basis:36px; }
  .category .category-icon { height:54px; }
  .listing-row .card-title { font-size:12px; }
  .listing-row .card-price { font-size:15px; }
  .mobile-bottom { padding-bottom:calc(7px + env(safe-area-inset-bottom)); }
  .mobile-bottom a { min-height:48px; }
  .mobile-bottom a:focus-visible { outline-offset:-2px; }
  .gallery-stage { height:258px; }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { scroll-behavior:auto!important;animation:none!important;transition:none!important; }
}