/* ==========================================================================
   BẢO BĐS NORTON PARK BRAND THEME OVERRIDES
   Color Palette:
   - Primary Luxury Accent: #C49A6C (Warm Bronze / Gold)
   - Accent Hover: #B3885B / #A67C4E
   - Accent Light Glow: #D8B48A / #F0DFCC
   - Dark Obsidian Canvas: #191C20 / #121417 (Signature BaoBDS Dark)
   - Light Pearl Canvas: #FAF8F5 / #F6F3EC / #FFF8F3
   - Secondary Muted: #73766D / #66766D
   ========================================================================== */

:root {
  --forest: #191c20 !important;
  --canopy: #242930 !important;
  --cream: #fff8f3 !important;
  --pearl: #faf8f5 !important;
  --copper: #C49A6C !important;
  --baobds-gold: #C49A6C !important;
  --baobds-dark: #191c20 !important;
  --stone: #d7d4c8 !important;
  --ink: #191c20 !important;
  --muted: #73766d !important;
  --line: #e2dbcf !important;
}

/* Header & Brand Logo */
.site-header {
  background: rgba(250, 248, 245, 0.94) !important;
  border-bottom: 1px solid rgba(196, 154, 108, 0.22) !important;
  backdrop-filter: blur(12px) !important;
}

.baobds-brand, .gh-brand {
  display: flex !important;
  align-items: center !important;
}

.baobds-brand img, .gh-brand img {
  height: 44px !important;
  width: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

.site-header nav a:hover {
  color: #C49A6C !important;
}

/* Primary Buttons */
.btn {
  background: #C49A6C !important;
  color: #191c20 !important;
  border: 1px solid #C49A6C !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(196, 154, 108, 0.24) !important;
  transition: all 0.25s ease !important;
}

.btn:hover {
  background: #b3885b !important;
  border-color: #b3885b !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(196, 154, 108, 0.35) !important;
}

.btn-cream {
  background: #EFE6DC !important;
  color: #281E18 !important;
  border: 1px solid #C49A6C !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(40, 30, 24, 0.12) !important;
}

.btn-cream:hover {
  background: #C49A6C !important;
  color: #191c20 !important;
  border-color: #C49A6C !important;
  box-shadow: 0 6px 18px rgba(196, 154, 108, 0.35) !important;
}

.btn-outline {
  background: #EFE6DC !important;
  border: 1px solid #C49A6C !important;
  color: #281E18 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(40, 30, 24, 0.12) !important;
}

.btn-outline:hover {
  background: #C49A6C !important;
  color: #191c20 !important;
  border-color: #C49A6C !important;
}

.header-cta {
  background: #C49A6C !important;
  color: #191c20 !important;
  border: 1px solid #C49A6C !important;
  font-weight: 700 !important;
}

.header-cta:hover {
  background: #b3885b !important;
  color: #fff !important;
}

/* Hero Section */
.hero {
  background: #191c20 !important;
  color: #fff8f3 !important;
}

.photo-shade {
  background: linear-gradient(90deg, rgba(25, 28, 32, 0.88), transparent 48%, rgba(25, 28, 32, 0.25)) !important;
}

@media (max-width: 800px) {
  .photo-shade {
    background: linear-gradient(0deg, #191c20 0%, transparent 68%) !important;
  }
}

.location-dot {
  background: #C49A6C !important;
  box-shadow: 0 0 0 5px rgba(196, 154, 108, 0.25) !important;
}

.title-mark {
  border-top-color: #C49A6C !important;
}

.hero-switch button.active {
  background: #C49A6C !important;
}

.film-orbit {
  background: rgba(25, 28, 32, 0.65) !important;
  border-color: rgba(196, 154, 108, 0.5) !important;
}

.film-orbit:hover {
  background: rgba(196, 154, 108, 0.35) !important;
  border-color: #C49A6C !important;
}

.play-icon {
  fill: #C49A6C !important;
  color: #C49A6C !important;
}

/* Titles and Highlights */
.section-topic {
  color: #C49A6C !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

.fact-ribbon strong {
  color: #C49A6C !important;
}

.fact-ribbon {
  border-top: 1px solid rgba(196, 154, 108, 0.28) !important;
  border-bottom: 1px solid rgba(196, 154, 108, 0.28) !important;
}

.fact-ribbon > div {
  border-left: 1px solid rgba(196, 154, 108, 0.28) !important;
}

.project-details {
  border: 1px solid rgba(196, 154, 108, 0.3) !important;
  background: rgba(246, 243, 236, 0.75) !important;
}

.project-details strong {
  color: #C49A6C !important;
}

/* Film Section */
.film-grid > button, .film-feature, .film-secondary {
  background: #191c20 !important;
}

.film-play-circle {
  border-color: #C49A6C !important;
  color: #C49A6C !important;
  background: rgba(25, 28, 32, 0.6) !important;
}

.film-grid > button:hover .film-play-circle {
  background: #C49A6C !important;
  color: #191c20 !important;
}

.film-tint {
  background: linear-gradient(0deg, rgba(25, 28, 32, 0.92), transparent 75%) !important;
}

/* Full Width MyMap Container */
.baobds-mymap-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px 0 0 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid rgba(196, 154, 108, 0.35) !important;
  border-bottom: 1px solid rgba(196, 154, 108, 0.35) !important;
  box-shadow: none !important;
  background: #191c20 !important;
  overflow: hidden !important;
}

.location-section {
  background: #f5f2eb !important;
  padding: 80px 0 40px 0 !important;
}

/* Developer Section */
.developer-section {
  background: #f2eee7 !important;
}

.developer-film {
  background: #191c20 !important;
}

.developer-film:after {
  background: linear-gradient(0deg, rgba(25, 28, 32, 0.94), transparent 65%) !important;
}

.developer-film-label strong {
  color: #fff8f3 !important;
}

.developer-values {
  border-top: 1px solid rgba(196, 154, 108, 0.3) !important;
  border-bottom: 1px solid rgba(196, 154, 108, 0.3) !important;
}

.developer-values strong {
  color: #C49A6C !important;
}

.developer-communities a {
  color: #191c20 !important;
  transition: color 0.2s !important;
}

.developer-communities a:hover {
  color: #C49A6C !important;
}

/* Lifestyle / Song Xanh Section */
.lifestyle-section {
  background: #191c20 !important;
  color: #fff8f3 !important;
}

.lifestyle-shade {
  background: linear-gradient(90deg, rgba(25, 28, 32, 0.9), transparent 75%),
              linear-gradient(0deg, rgba(25, 28, 32, 0.95), transparent 45%) !important;
}

.lifestyle-tabs button.active:before {
  background: #C49A6C !important;
}

.lifestyle-heading .section-topic {
  color: #C49A6C !important;
}

/* Finance Section */
.payment-choice.active {
  border-color: #C49A6C !important;
  background: rgba(196, 154, 108, 0.08) !important;
}

.plan-choice-check {
  background: #C49A6C !important;
  color: #191c20 !important;
}

.finance-bar span {
  background: #C49A6C !important;
}

.finance-results {
  background: #191c20 !important;
  color: #fff8f3 !important;
  border: 1px solid rgba(196, 154, 108, 0.3) !important;
}

.finance-results strong {
  color: #C49A6C !important;
}

.finance-tabs button[aria-selected="true"] {
  background: #C49A6C !important;
  color: #191c20 !important;
  font-weight: 700 !important;
}

/* Contact Section - NÂU & NÂU NHẠT */
.contact-section {
  background: #191c20 !important;
  color: #fff8f3 !important;
  border-top: 1px solid rgba(196, 154, 108, 0.35) !important;
}

.contact-section .section-topic {
  color: #C49A6C !important;
}

.contact-phone {
  color: #C49A6C !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 14px rgba(196, 154, 108, 0.28) !important;
}

.contact-phone:hover {
  color: #d8b48a !important;
}

.contact-actions {
  border-left: 1px solid rgba(196, 154, 108, 0.3) !important;
}

.contact-actions .btn-cream,
.contact-actions .btn:first-child {
  background: #C49A6C !important;
  color: #191C20 !important;
  border: 1px solid #C49A6C !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(196, 154, 108, 0.35) !important;
}

.contact-actions .btn-cream:hover,
.contact-actions .btn:first-child:hover {
  background: #B3885B !important;
  color: #FFFFFF !important;
  border-color: #B3885B !important;
}

.contact-actions .btn-outline {
  background: #EFE6DC !important;
  color: #281E18 !important;
  border: 1px solid #C49A6C !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(40, 30, 24, 0.15) !important;
}

.contact-actions .btn-outline:hover {
  background: #C49A6C !important;
  color: #191C20 !important;
  border-color: #C49A6C !important;
}

.contact-actions a[href^="mailto:"] {
  color: #D8B48A !important;
}

.contact-actions span {
  color: #A89584 !important;
}

/* Official 3D Experience Section - NÂU NHẠT (#F5EFEB) */
.official-masterplan {
  background: #F5EFEB !important;
  border: 1px solid rgba(196, 154, 108, 0.35) !important;
  border-radius: 30px !important;
  box-shadow: 0 12px 36px rgba(40, 30, 24, 0.08) !important;
  overflow: hidden !important;
}

.official-tour-copy {
  background: #F5EFEB !important;
}

.official-tour-copy h3 {
  color: #191c20 !important;
}

.official-tour-copy p {
  color: #645345 !important;
}

.official-tour-cover {
  background: #281E18 !important;
}

.official-cover-icon {
  background: #FAF6F0 !important;
  color: #C49A6C !important;
  box-shadow: 0 4px 14px rgba(40, 30, 24, 0.15) !important;
}

.official-heading p {
  color: #645345 !important;
}

.official-tour-copy .btn {
  background: #C49A6C !important;
  color: #191c20 !important;
  border: 1px solid #C49A6C !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(196, 154, 108, 0.3) !important;
}

.official-tour-copy .btn:hover {
  background: #B3885B !important;
  color: #ffffff !important;
}

.official-interior-choice {
  background: #FAF6F0 !important;
  border: 1px solid rgba(196, 154, 108, 0.35) !important;
  color: #191c20 !important;
}

.official-interior-choice:hover {
  background: #EFE6DC !important;
  border-color: #C49A6C !important;
}

.official-interior-choice strong {
  color: #191c20 !important;
}

.official-interior-choice > span {
  color: #7A695C !important;
}

.official-tour-dialog {
  background: #FAF6F0 !important;
  color: #191c20 !important;
}

.official-tour-bottom button {
  background: #C49A6C !important;
  color: #191c20 !important;
  font-weight: 700 !important;
}

/* Project Details & CTA blocks - NÂU NHẠT */
.project-details {
  background: #F6F1EA !important;
  border: 1px solid rgba(196, 154, 108, 0.35) !important;
}

.project-details strong {
  color: #C49A6C !important;
}

.project-details span {
  color: #645345 !important;
}

.cta-interlude {
  background: #F6F1EA !important;
  border: 1px solid rgba(196, 154, 108, 0.3) !important;
  border-radius: 24px !important;
}

.cta-interlude .btn {
  background: #C49A6C !important;
  color: #191C20 !important;
  font-weight: 700 !important;
}

.residence-bespoke {
  background: #F6F1EA !important;
  border: 1px solid rgba(196, 154, 108, 0.3) !important;
  border-radius: 24px !important;
}

.residence-bespoke .btn {
  background: #C49A6C !important;
  color: #191C20 !important;
  font-weight: 700 !important;
}

/* Footer */
.site-footer {
  background: #faf8f5 !important;
  border-top: 1px solid rgba(196, 154, 108, 0.25) !important;
  padding: 36px 48px !important;
}

.site-footer img {
  height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Dialogs */
.film-dialog {
  background: #191c20 !important;
  color: #fff8f3 !important;
  border: 1px solid rgba(196, 154, 108, 0.35) !important;
}

.film-dialog .dialog-close {
  background: rgba(196, 154, 108, 0.2) !important;
  color: #C49A6C !important;
}

.film-dialog .dialog-close:hover {
  background: #C49A6C !important;
  color: #191c20 !important;
}

.consult-dialog {
  border: 1px solid rgba(196, 154, 108, 0.3) !important;
}

.consult-dialog input:focus, .consult-dialog select:focus, .consult-dialog textarea:focus {
  border-color: #C49A6C !important;
  outline: 2px solid rgba(196, 154, 108, 0.4) !important;
}

/* Native Video & Classes */
.baobds-native-film, .gh-native-film {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.baobds-film-cover, .gh-film-cover {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.baobds-inline-player, .gh-inline-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

/* ========================================================
   ANNOUNCEMENT & BOOKING BAR (URGENCY BANNER)
   ======================================================== */
.baobds-announcement-bar {
  background: linear-gradient(90deg, #1C130D 0%, #2A1E17 50%, #1C130D 100%) !important;
  border-bottom: 1px solid rgba(196, 154, 108, 0.35) !important;
  color: #FAF6F0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  position: relative !important;
  z-index: 101 !important;
  padding: 10px 16px !important;
}

.baobds-announcement-bar .announcement-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}

.baobds-announcement-bar .announcement-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(196, 154, 108, 0.22);
  border: 1px solid #C49A6C;
  color: #EFE6DC;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.baobds-announcement-bar .announcement-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #C49A6C;
  border-radius: 50%;
  box-shadow: 0 0 8px #C49A6C;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.baobds-announcement-bar .announcement-text {
  color: #F5EFEB;
  font-weight: 500;
  max-width: 100%;
}

.baobds-announcement-bar .announcement-text strong {
  color: #C49A6C;
  font-weight: 700;
}

.baobds-announcement-bar .announcement-phone {
  color: #C49A6C;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.baobds-announcement-bar .announcement-phone:hover {
  color: #FAF6F0;
}

.baobds-announcement-bar .announcement-btn {
  background: #C49A6C !important;
  color: #191c20 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(196, 154, 108, 0.3) !important;
  min-height: unset !important;
}

.baobds-announcement-bar .announcement-btn:hover {
  background: #d8af80 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
  .baobds-announcement-bar {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  .baobds-announcement-bar .announcement-container {
    flex-direction: column !important;
    gap: 7px !important;
  }
  .baobds-announcement-bar .announcement-badge {
    font-size: 10px !important;
    padding: 3px 10px !important;
  }
  .baobds-announcement-bar .announcement-text {
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }
  .baobds-announcement-bar .announcement-btn {
    font-size: 11px !important;
    padding: 6px 14px !important;
  }
}

/* ========================================================
   IMPECCABLE ACCESSIBILITY & TYPOGRAPHY SYSTEM (WCAG AA)
   ======================================================== */
:root {
  --baobds-gold-dark: #8F6536;
  --baobds-muted-contrast: #52554C;
}

/* 1. Contrast: Deep Warm Bronze for text on light backgrounds (>= 4.5:1 WCAG AA) */
.section-topic {
  color: var(--baobds-gold-dark) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.contact-section .section-topic,
.hero .section-topic,
.baobds-announcement-bar .section-topic {
  color: #C49A6C !important;
}

/* High-contrast secondary text on light cards */
.project-details span,
.finance-explanation,
.library-item small,
.developer-copy>p,
.connection-note,
.place-content p {
  color: #52554C !important;
}

/* 2. Typography floor: All interactive & functional labels >= 11px */
.hero-developer,
.hero-caption,
.hero-foot-label,
.film-duration,
.developer-film-label small,
.developer-values span,
.developer-communities>span,
.finance-inputs label,
.input-unit span,
.finance-results>div>span,
.finance-results>p,
.library-downloads,
.library-downloads button,
.library-downloads a,
.site-footer,
.site-footer p,
.site-footer>button,
.site-footer>a,
.dialog-top>div>span,
.consult-heading>span,
.consult-dialog label,
.consult-ready>p,
.privacy-dialog p,
.map-brand span,
.place-type {
  font-size: 11.5px !important;
}

.fact-ribbon p,
.place-content p,
.connection-note p,
.residence-bespoke p,
.plan-copy .plan-insight {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.map-controls button,
.place-tabs button,
.plan-focus button,
.lifestyle-tabs button {
  font-size: 12px !important;
}

.consult-dialog input,
.consult-dialog select,
.consult-dialog textarea {
  font-size: 13.5px !important;
  color: #191c20 !important;
}

.consult-selected {
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* 3. Smooth intentional motion reduction */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}