/* ==========================================================================
   VinaCircle — design tokens
   ========================================================================== */
:root {
  --vc-primary: #0f62d6;
  --vc-primary-dark: #0b4bab;
  --vc-navy: #0b1f3a;
  --vc-navy-soft: #12294d;
  --vc-accent: #e8542a;
  --vc-bg: #f6f8fc;
  --vc-card: #ffffff;
  --vc-line: #e4e9f2;
  --vc-text: #17203a;
  --vc-muted: #64708a;
  --vc-radius: 18px;
  --vc-shadow: 0 10px 30px rgba(15, 31, 58, 0.08);
  --vc-shadow-lg: 0 20px 45px rgba(15, 31, 58, 0.14);
  --bs-font-sans-serif: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--vc-text);
  background: var(--vc-bg);
}

a { color: var(--vc-primary); text-decoration: none; }
a:hover { color: var(--vc-primary-dark); }

h1, h2, h3, h4, h5, .vc-heading {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vc-navy);
}

.vc-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--vc-primary);
}

.vc-muted { color: var(--vc-muted); }

.vc-section { padding: 64px 0; }
.vc-section--tight { padding: 40px 0; }
.vc-section--soft { background: #eef3fb; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary {
  background-color: var(--vc-primary);
  border-color: var(--vc-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--vc-primary-dark);
  border-color: var(--vc-primary-dark);
}
.btn-accent {
  background-color: var(--vc-accent);
  border-color: var(--vc-accent);
  color: #fff;
}
.btn-accent:hover { background-color: #c8431c; color: #fff; }
.btn, .form-control, .form-select {
  border-radius: 999px;
}
.btn-lg { padding: 0.75rem 1.75rem; }
.rounded-card { border-radius: var(--vc-radius) !important; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.vc-navbar {
  background: var(--vc-navy);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.vc-navbar .navbar-brand {
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.vc-navbar .navbar-brand span { color: var(--vc-accent); }
.vc-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  padding: 0.55rem 0.9rem !important;
}
.vc-navbar .nav-link:hover,
.vc-navbar .nav-link.active { color: #fff; }
.vc-navbar .dropdown-menu {
  border-radius: 14px;
  border: none;
  box-shadow: var(--vc-shadow-lg);
  padding: 0.5rem;
}
.vc-navbar .dropdown-item { border-radius: 10px; padding: 0.5rem 0.75rem; }
.vc-city-switcher .btn {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
}
.vc-city-switcher .btn:hover { background: rgba(255, 255, 255, 0.16); }
.vc-city-switcher .dropdown-menu { max-height: 360px; overflow-y: auto; }
.vc-icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vc-icon-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
#vcSearchBar { background: var(--vc-navy-soft); border-top: 1px solid rgba(255, 255, 255, 0.1); }
#vcSearchBar .form-control { border-radius: 999px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.vc-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(11,31,58,.15) 0%, rgba(11,31,58,.85) 100%), var(--vc-navy);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 64px 0 40px;
}
.vc-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.vc-hero-search {
  background: #fff;
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow-lg);
  padding: 14px;
}
.vc-hero-search .form-select,
.vc-hero-search .form-control { border-radius: 999px; border-color: var(--vc-line); }

/* ==========================================================================
   Category pills
   ========================================================================== */
.vc-cat-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vc-card);
  border: 1px solid var(--vc-line);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  color: var(--vc-text);
  white-space: nowrap;
  transition: all .15s ease;
}
.vc-cat-pill:hover {
  border-color: var(--vc-primary);
  color: var(--vc-primary);
  box-shadow: var(--vc-shadow);
}
.vc-cat-pill.active {
  background: var(--vc-primary);
  border-color: var(--vc-primary);
  color: #fff;
}
.vc-cat-pill i { color: var(--vc-accent); }
.vc-cat-pill.active i { color: #fff; }
.vc-pill-scroller {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

/* ==========================================================================
   Listing cards
   ========================================================================== */
.vc-card {
  background: var(--vc-card);
  border: 1px solid var(--vc-line);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
}
.vc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--vc-shadow);
  border-color: transparent;
}
.vc-card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #eef3fb; }
.vc-card-media img { width: 100%; height: 100%; object-fit: cover; }
.vc-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(11, 31, 58, 0.85);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
}
.vc-card-badge span,
.vc-card-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-card-badge i { color: var(--vc-accent); flex-shrink: 0; }
.vc-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.vc-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vc-navy);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}
.vc-card a.stretched-link:hover { color: inherit; }
.vc-card-meta {
  font-size: 0.78rem;
  color: var(--vc-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.vc-card-meta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-card-meta i { color: var(--vc-primary); flex-shrink: 0; }
.vc-card-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--vc-line);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vc-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vc-card-footer i { color: var(--vc-primary); font-size: 0.7rem; }

/* ==========================================================================
   Section heading
   ========================================================================== */
.vc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.vc-section-head .btn { flex-shrink: 0; }

/* ==========================================================================
   Ad slots
   ========================================================================== */
.vc-ad-slot { display: block; text-align: center; margin: 28px 0; min-width: 280px; }
.vc-ad-slot .adsbygoogle { display: block; width: 100%; }
/* Match the header banner's width to the narrowed single-listing content column (col-xl-10, only from the xl breakpoint up — below that the content is full-width too). */
@media (min-width: 1200px) {
  .single-vc_place .vc-ad--header,
  .single-vc_restaurant .vc-ad--header {
    max-width: 83.3333%;
    margin-left: auto;
    margin-right: auto;
  }
}
.vc-ad-placeholder {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border: 1px dashed #b9c4d6;
  border-radius: 12px;
  background: #eef2f9;
  color: var(--vc-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}
.vc-ad--sidebar .vc-ad-placeholder { min-height: 250px; max-width: 300px; }
.vc-ad--infeed .vc-ad-placeholder { min-height: 120px; }

/* ==========================================================================
   Single listing
   ========================================================================== */
.vc-single-hero {
  aspect-ratio: 3 / 1;
  max-height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: var(--vc-radius);
  overflow: hidden;
  background-color: #dfe6f2;
}
.vc-info-card {
  background: var(--vc-card);
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-radius);
  padding: 22px;
  box-shadow: var(--vc-shadow);
}
.vc-info-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vc-line); }
.vc-info-row:last-child { border-bottom: none; }
.vc-info-row i { color: var(--vc-primary); width: 20px; text-align: center; margin-top: 2px; }
.vc-map-embed { border-radius: var(--vc-radius); overflow: hidden; border: 1px solid var(--vc-line); }
.vc-map-embed iframe { width: 100%; height: 280px; border: 0; display: block; }
.vc-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}
.vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef3fb;
  color: var(--vc-primary);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
}

/* ==========================================================================
   Comments (wpDiscuz)
   ========================================================================== */
.vc-comments {
  background: var(--vc-card);
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-radius);
  padding: 24px;
}
.vc-comments,
.vc-comments * { font-family: var(--bs-font-sans-serif); }

/* ==========================================================================
   Newsletter / CTA panel
   ========================================================================== */
.vc-cta-panel {
  background: radial-gradient(circle at top right, var(--vc-navy-soft), var(--vc-navy));
  border-radius: 28px;
  color: #fff;
  padding: 48px;
}
.vc-cta-panel h2 { color: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.vc-footer {
  background: var(--vc-navy);
  color: rgba(255, 255, 255, 0.75);
  padding-top: 56px;
}
.vc-footer h5 { color: #fff; font-weight: 700; font-size: 1rem; }
.vc-footer a { color: rgba(255, 255, 255, 0.7); }
.vc-footer a:hover { color: #fff; }
.vc-footer ul { list-style: none; padding: 0; margin: 0; }
.vc-footer li { margin-bottom: 8px; }
.vc-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 40px;
  padding: 20px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.vc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  margin-right: 8px;
}
.vc-social a:hover { background: var(--vc-primary); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.vc-breadcrumb .breadcrumb { font-size: 0.85rem; }
.vc-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--vc-muted); }

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width: 767.98px) {
  .vc-section { padding: 40px 0; }
  .vc-hero { min-height: 320px; padding: 40px 0 28px; }
  .vc-cta-panel { padding: 32px 22px; border-radius: 20px; }
  .vc-info-card { padding: 18px; }
}