/* ═══════════════════════════════════════════════════════════════════
   LUXURY OVERRIDE — The Local Home Premium Residence
   Targets cloned localhome.vn DOM. Loaded LAST, overrides existing.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lx-bg-dark: #1a1a1c;
  --lx-bg-charcoal: #25272a;
  --lx-bg-soft: #f5efe3;
  --lx-gold: #c9a45c;
  --lx-gold-soft: #d4b87a;
  --lx-gold-deep: #a07d3c;
  --lx-champagne: #e7d3a8;
  --lx-cream: #faf6ed;
  --lx-cream-soft: #fcf9f1;
  --lx-ink: #1a1a1c;
  --lx-ink-soft: #4a4a4e;
  --lx-ink-mute: #7d7d80;
  --lx-line: rgba(201, 164, 92, 0.18);
  --lx-line-strong: rgba(201, 164, 92, 0.38);
  --lx-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --lx-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Load luxury serif font */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   HEADER — Charcoal + Gold luxury
   ═══════════════════════════════════════════════════════════════════ */
header.sticky-top {
  background: linear-gradient(180deg, var(--lx-bg-dark) 0%, var(--lx-bg-charcoal) 100%) !important;
  border-bottom: 1px solid var(--lx-line-strong) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35) !important;
}
header.sticky-top::before {
  /* Wipe out the pink V2 pattern background */
  content: "";
  position: absolute;
  inset: 0;
  background: transparent !important;
  z-index: 0;
}
header.sticky-top > .container { position: relative; z-index: 1; }

/* Hide original logo image */
header.sticky-top .navbar-brand img,
header.sticky-top .navbar-brand .navbar-brand-text {
  display: none !important;
}

/* Inject new brand via ::before pseudo-element (no JS needed) */
header.sticky-top .navbar-brand {
  position: relative;
  text-decoration: none !important;
  padding-left: 4px !important;
  min-width: 320px;
}
header.sticky-top .navbar-brand::before {
  content: "The Local Home";
  display: block;
  font-family: var(--lx-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lx-champagne);
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
header.sticky-top .navbar-brand::after {
  content: "— PREMIUM RESIDENCE —";
  display: block;
  font-family: var(--lx-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--lx-gold);
  margin-top: 6px;
}

/* Navigation links — gold accent */
header.sticky-top .mega-menu-link,
header.sticky-top .mega-menu-wrap > li > a,
header.sticky-top nav a,
header.sticky-top .offcanvas a {
  color: var(--lx-cream) !important;
  font-family: var(--lx-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
}
header.sticky-top .mega-menu-link:hover,
header.sticky-top .mega-menu-wrap > li > a:hover,
header.sticky-top nav a:hover {
  color: var(--lx-gold) !important;
}
header.sticky-top .mega-menu-link::after,
header.sticky-top .mega-menu-wrap > li > a::after {
  color: var(--lx-gold) !important;
}

/* Burger toggler — gold */
header.sticky-top .navbar-toggler {
  border-color: var(--lx-gold) !important;
  background: rgba(201, 164, 92, 0.1) !important;
}
header.sticky-top .navbar-toggler-icon {
  filter: invert(1) sepia(1) hue-rotate(20deg) brightness(1.2) !important;
}

/* Off-canvas menu (mobile) — dark luxury */
.offcanvas {
  background: var(--lx-bg-dark) !important;
  color: var(--lx-cream) !important;
}
.offcanvas .offcanvas-title { color: var(--lx-gold) !important; font-family: var(--lx-serif) !important; }
.offcanvas .btn-close { filter: invert(1) brightness(1.5) !important; }
.offcanvas .contact-phone {
  color: var(--lx-champagne) !important;
  font-family: var(--lx-serif) !important;
  font-size: 17px !important;
}

/* Mega-menu dropdown — luxury */
.mega-menu-wrap .mega-sub-menu {
  background: var(--lx-bg-charcoal) !important;
  border: 1px solid var(--lx-line-strong) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.mega-menu-wrap .mega-sub-menu a {
  color: var(--lx-cream) !important;
  font-family: var(--lx-sans) !important;
  letter-spacing: 0.04em !important;
}
.mega-menu-wrap .mega-sub-menu a:hover {
  background: rgba(201, 164, 92, 0.1) !important;
  color: var(--lx-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TIMELINE BOOKING TABLE — Card-based redesign
   ═══════════════════════════════════════════════════════════════════ */

/* Container — add a promo badge at the top */
table.table-sc {
  position: relative !important;
  background: var(--lx-cream-soft) !important;
  border-collapse: separate !important;
  border-spacing: 6px !important;
  border: 0 !important;
  padding: 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
}
table.table-sc::before {
  content: "★ ƯU ĐÃI: Đặt 2 khung giờ giảm 5% + tặng 30 phút · 3 khung giảm 10% · cả ngày giảm 15%";
  display: block;
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: linear-gradient(90deg, var(--lx-gold-deep), var(--lx-gold), var(--lx-gold-deep));
  color: white;
  text-align: center;
  font-family: var(--lx-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: 999px;
  width: fit-content;
  max-width: 90%;
  box-shadow: 0 4px 16px rgba(201, 164, 92, 0.32);
  z-index: 5;
  line-height: 1.4;
}

/* Header row + sticky column */
table.table-sc thead th,
table.table-sc .sticky-header,
table.table-sc .sticky-header-2,
table.table-sc .sticky-header-3,
table.table-sc .sticky-column,
table.table-sc .sticky-column-2 {
  background: var(--lx-bg-charcoal) !important;
  color: var(--lx-champagne) !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: var(--lx-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 8px 6px !important;
  text-align: center !important;
}

/* Cell — base style: cream card with rounded corners */
table.table-sc tbody td {
  background: var(--lx-cream) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 10px 6px !important;
  text-align: center !important;
  vertical-align: middle !important;
  transition: all 0.18s ease !important;
  position: relative !important;
}

/* Empty / available state — soft cream */
table.table-sc tbody td:not(.non-item):not(.select-item):not(.bw-sale) {
  background: var(--lx-cream-soft) !important;
  border: 1px solid var(--lx-line) !important;
  color: var(--lx-ink) !important;
  cursor: pointer !important;
}
table.table-sc tbody td:not(.non-item):not(.select-item):not(.bw-sale):hover {
  background: var(--lx-champagne) !important;
  border-color: var(--lx-gold) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(201, 164, 92, 0.22) !important;
}

/* Booked / disabled state — faded */
table.table-sc tbody td.non-item {
  background: transparent !important;
  color: var(--lx-ink-mute) !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  border: 1px dashed rgba(125, 125, 128, 0.3) !important;
  text-decoration: line-through;
}
table.table-sc tbody td.non-item::after { content: "" !important; }

/* Selected state — gold filled */
table.table-sc tbody td.select-item {
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep)) !important;
  color: white !important;
  border: 2px solid var(--lx-gold-soft) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(201, 164, 92, 0.4) !important;
}

/* Promo / sale cells — emphasized */
table.table-sc tbody td.bw-sale {
  background: linear-gradient(135deg, rgba(201, 164, 92, 0.18), rgba(231, 211, 168, 0.28)) !important;
  border: 1.5px solid var(--lx-gold) !important;
  color: var(--lx-gold-deep) !important;
  font-weight: 700 !important;
  position: relative !important;
}
table.table-sc tbody td.bw-sale::before {
  content: "★";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  color: var(--lx-gold);
}

/* Current day highlight */
table.table-sc tbody td.bw-day-now {
  background: linear-gradient(180deg, var(--lx-cream-soft), var(--lx-champagne)) !important;
  border: 1.5px solid var(--lx-gold-soft) !important;
}

/* Yesterday — fully muted */
table.table-sc tbody td.bw-day-yesterday {
  opacity: 0.25 !important;
  background: transparent !important;
  border: 1px dashed rgba(125, 125, 128, 0.2) !important;
}

/* Mobile: horizontal scroll */
@media (max-width: 768px) {
  table.table-sc {
    padding: 12px 8px !important;
    border-spacing: 4px !important;
  }
  table.table-sc::before {
    font-size: 10.5px;
    padding: 6px 12px;
    top: -16px;
  }
  /* Wrap table in scrollable container if not already */
  .table-responsive,
  div:has(> table.table-sc) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table.table-sc tbody td {
    min-width: 64px !important;
    padding: 8px 4px !important;
    font-size: 12px !important;
  }
  table.table-sc thead th,
  table.table-sc .sticky-header,
  table.table-sc .sticky-column {
    font-size: 11px !important;
    padding: 6px 4px !important;
    min-width: 56px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — Luxury dark with grouped hotlines
   ═══════════════════════════════════════════════════════════════════ */
footer.entry-footer {
  background: linear-gradient(180deg, var(--lx-bg-charcoal) 0%, var(--lx-bg-dark) 100%) !important;
  color: var(--lx-cream) !important;
  padding: 56px 0 24px !important;
  border-top: 1px solid var(--lx-line-strong) !important;
  position: relative !important;
}
footer.entry-footer::before {
  /* Top gold accent line */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lx-gold), transparent);
}

/* Hide pink V2 background pattern */
footer.entry-footer * { background-image: none !important; }
footer.entry-footer { background-image: none !important; }

/* Container layout — make columns equal width */
footer.entry-footer .container > .row,
footer.entry-footer .container .row {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  gap: 36px !important;
}
@media (max-width: 980px) {
  footer.entry-footer .container .row {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}
@media (max-width: 540px) {
  footer.entry-footer .container .row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

footer.entry-footer .container .row > * {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* Footer section headings */
footer.entry-footer h2,
footer.entry-footer h3,
footer.entry-footer h4,
footer.entry-footer .footer-title,
footer.entry-footer p:first-of-type {
  font-family: var(--lx-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--lx-gold) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--lx-line) !important;
}

/* Hide original brand image, replace with serif text */
footer.entry-footer img[src*="logo"],
footer.entry-footer .footer-logo img {
  display: none !important;
}
footer.entry-footer .navbar-brand,
footer.entry-footer .footer-brand {
  position: relative;
}
footer.entry-footer .navbar-brand::before {
  content: "The Local Home";
  display: block;
  font-family: var(--lx-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--lx-champagne);
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
footer.entry-footer .navbar-brand::after {
  content: "— PREMIUM RESIDENCE —";
  display: block;
  font-family: var(--lx-sans);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--lx-gold);
  margin-bottom: 14px;
}

/* Hotline list — group with subtle heading "TRUNG TÂM HỖ TRỢ 24/7" via ::before on parent column */
footer.entry-footer .hotline,
footer.entry-footer p:has(.fa-phone),
footer.entry-footer p:has(.icon-phone) {
  margin: 4px 0 !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed var(--lx-line) !important;
}
footer.entry-footer p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
footer.entry-footer a {
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none !important;
  display: block;
  padding: 6px 0 !important;
  font-size: 13.5px !important;
  transition: color 0.15s ease, padding-left 0.15s ease !important;
}
footer.entry-footer a:hover {
  color: var(--lx-gold) !important;
  padding-left: 4px !important;
}

/* Social icons gold tint */
footer.entry-footer .fa,
footer.entry-footer i,
footer.entry-footer svg {
  color: var(--lx-gold) !important;
  fill: var(--lx-gold) !important;
}

/* Footer copyright row */
footer.entry-footer .copyright,
footer.entry-footer .footer-bottom {
  border-top: 1px solid var(--lx-line) !important;
  margin-top: 32px !important;
  padding-top: 18px !important;
  text-align: center !important;
  font-family: var(--lx-sans) !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Sticky bottom buttons (the Đặt phòng + VNPay) — luxury restyle */
.tw-fixed-bottom,
[class*="fixed-bottom"] button,
[class*="fixed-bottom"] a {
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep)) !important;
  color: white !important;
  border: 0 !important;
  font-family: var(--lx-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* Page general — body bg cream tone */
body {
  background: var(--lx-cream-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v19.7 SELECTOR FIX: cover all variants of header that show pink
   ═══════════════════════════════════════════════════════════════════ */
header.sticky-top,
header#site-header,
.entry-header,
.lc-header,
header.sticky-top *[class*="header"],
header.sticky-top .navbar,
header.sticky-top > div,
nav.navbar {
  background-color: var(--lx-bg-charcoal) !important;
  background-image: none !important;
}
header.sticky-top * {
  background-image: none !important;
}
/* Make sure inner nav row is dark too */
header.sticky-top .navbar-collapse,
header.sticky-top .container,
header.sticky-top .navbar > .container {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v19.8 SPEC BUMP: prefix body + chain classes to beat Bootstrap
   ═══════════════════════════════════════════════════════════════════ */
body table.table-sc,
body table.table.table-sc,
body table.table.table-bordered.table-sc {
  background: var(--lx-cream-soft) !important;
  border-collapse: separate !important;
  border-spacing: 6px !important;
  border: 0 !important;
  padding: 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.04) !important;
  overflow: visible !important;
}
body table.table-sc th,
body table.table-sc td {
  border: 0 !important;
  background-image: none !important;
}
body table.table-sc thead th,
body table.table-sc .sticky-header,
body table.table-sc .sticky-header-2,
body table.table-sc .sticky-header-3,
body table.table-sc .sticky-column,
body table.table-sc .sticky-column-2 {
  background-color: var(--lx-bg-charcoal) !important;
  color: var(--lx-champagne) !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 8px 6px !important;
}
body table.table-sc tbody td {
  background-color: var(--lx-cream-soft) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: 8px !important;
  padding: 10px 6px !important;
  transition: all 0.18s ease !important;
}
body table.table-sc tbody td.non-item {
  background-color: transparent !important;
  opacity: 0.35 !important;
  border: 1px dashed rgba(125,125,128,0.3) !important;
}
body table.table-sc tbody td.select-item {
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep)) !important;
  color: white !important;
  border: 2px solid var(--lx-gold-soft) !important;
  font-weight: 700 !important;
}
body table.table-sc tbody td.bw-sale {
  background: linear-gradient(135deg, rgba(201,164,92,0.18), rgba(231,211,168,0.28)) !important;
  border: 1.5px solid var(--lx-gold) !important;
  color: var(--lx-gold-deep) !important;
  font-weight: 700 !important;
}
body table.table-sc tbody td:hover:not(.non-item):not(.select-item) {
  background-color: var(--lx-champagne) !important;
  border-color: var(--lx-gold) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(201,164,92,0.22) !important;
}

/* Wipe ALL pink/coral inline gradients globally on this page */
body *, body *::before, body *::after {
  background-image: var(--no-pink, none) !important;
}
body header.sticky-top {
  --no-pink: linear-gradient(180deg, var(--lx-bg-dark) 0%, var(--lx-bg-charcoal) 100%);
}
body footer.entry-footer {
  --no-pink: linear-gradient(180deg, var(--lx-bg-charcoal) 0%, var(--lx-bg-dark) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   v19.9 FOOTER + BUTTON LUXURY ALL-IN
   ═══════════════════════════════════════════════════════════════════ */
body footer,
body footer.entry-footer,
body footer * {
  background-image: none !important;
}
body footer.entry-footer,
body footer#colophon,
body .site-footer {
  background: linear-gradient(180deg, var(--lx-bg-charcoal) 0%, var(--lx-bg-dark) 100%) !important;
  background-color: var(--lx-bg-charcoal) !important;
  color: var(--lx-cream) !important;
}
body footer * {
  background-color: transparent !important;
}
body footer h1, body footer h2, body footer h3, body footer h4, body footer h5,
body footer .h1, body footer .h2, body footer .h3, body footer .h4 {
  color: var(--lx-gold) !important;
  font-family: var(--lx-serif) !important;
}
body footer p, body footer span, body footer li, body footer td {
  color: rgba(255,255,255,0.78) !important;
}
body footer a {
  color: rgba(255,255,255,0.78) !important;
}
body footer a:hover {
  color: var(--lx-gold) !important;
}
body footer img[src*="logo"],
body footer img[alt*="localhome"],
body footer img[alt*="local home"] {
  display: none !important;
}

/* Buttons — replace pink/coral with gold */
body button,
body .btn,
body input[type="submit"],
body a.btn,
body a.button {
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep)) !important;
  background-color: var(--lx-gold) !important;
  background-image: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep)) !important;
  color: white !important;
  border: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
body button:hover,
body .btn:hover,
body input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--lx-gold-deep), var(--lx-gold)) !important;
  transform: translateY(-1px) !important;
}
/* Round CTA pill */
body .btn-rounded, body button.rounded {
  border-radius: 999px !important;
}

/* Active nav state — gold underline */
header.sticky-top a.active,
header.sticky-top .active a,
header.sticky-top nav .current-menu-item a {
  color: var(--lx-gold) !important;
  position: relative;
}

/* v19.10 — FINAL FOOTER FIX (actual id = site-footer) */
body footer#site-footer,
body footer#site-footer * {
  background-image: none !important;
}
body footer#site-footer {
  background: linear-gradient(180deg, var(--lx-bg-charcoal) 0%, var(--lx-bg-dark) 100%) !important;
  background-color: var(--lx-bg-charcoal) !important;
  padding: 56px 0 24px !important;
}
body footer#site-footer * {
  background-color: transparent !important;
}
body footer#site-footer h1, body footer#site-footer h2, body footer#site-footer h3,
body footer#site-footer h4, body footer#site-footer h5,
body footer#site-footer .h1, body footer#site-footer .h2, body footer#site-footer .h3, body footer#site-footer .h4 {
  color: var(--lx-gold) !important;
}
body footer#site-footer p, body footer#site-footer span, body footer#site-footer li {
  color: rgba(255,255,255,0.78) !important;
}
body footer#site-footer a {
  color: rgba(255,255,255,0.78) !important;
}
body footer#site-footer a:hover {
  color: var(--lx-gold) !important;
}
body footer#site-footer img[src*="logo"],
body footer#site-footer img[alt*="localhome"] {
  display: none !important;
}

/* === Megamenu chi-nhanh visibility fix === */
/* Force LIGHT text on top-level menu (header has dark gradient bg) */
#mega-menu-wrap-main_primary #mega-menu-main_primary > li.mega-menu-item > a.mega-menu-link {
  color: #faf6ed !important;
  font-weight: 600 !important;
}
#mega-menu-wrap-main_primary #mega-menu-main_primary > li.mega-menu-item > a.mega-menu-link:hover {
  color: #c9a45c !important;
}
/* Sub-menu — ensure dark BG + light text (Bootstrap may reset) */
#mega-menu-wrap-main_primary .mega-sub-menu {
  background: #25272a !important;
  border: 1px solid rgba(201,164,92,.4) !important;
}
#mega-menu-wrap-main_primary .mega-sub-menu a.mega-menu-link,
#mega-menu-wrap-main_primary .mega-sub-menu li,
#mega-menu-wrap-main_primary .mega-sub-menu .mega-menu-link {
  color: #faf6ed !important;
  background: transparent !important;
}
#mega-menu-wrap-main_primary .mega-sub-menu a.mega-menu-link:hover {
  color: #c9a45c !important;
  background: rgba(201,164,92,.08) !important;
}
/* Bootstrap may inject color on header — re-enforce dark gradient */
header.sticky-top {
  background: linear-gradient(180deg, #1a1a1c 0%, #25272a 100%) !important;
}
header.sticky-top a, header.sticky-top a:visited {
  color: #faf6ed !important;
}