@charset "utf-8";

/**
 * Estate Standard design tokens — Bootstrap + CSS (không dùng Tailwind)
 * Nguồn: design/estate_standard/DESIGN.md
 */
:root {
  --re-bg: #f8f9ff;
  --re-surface: #ffffff;
  --re-surface-low: #eff4ff;
  --re-surface-container: #e5eeff;
  --re-on-surface: #0b1c30;
  --re-on-surface-variant: #444651;
  --re-outline: #757682;
  --re-outline-variant: #c5c5d3;
  --re-border: #e2e8f0;

  --re-primary: #00236f;
  --re-primary-container: #1e3a8a;
  --re-on-primary: #ffffff;
  --re-primary-soft: #4059aa;

  --re-sale: #059669;
  --re-sale-dark: #006c4a;
  --re-rent: #fc922b;
  --re-cta: #059669;
  --re-zalo: #0068ff;

  --re-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --re-container: 1280px;
  --re-gutter: 24px;
  --re-margin-mobile: 16px;
  --re-margin-desktop: 32px;
  --re-stack-sm: 12px;
  --re-stack-md: 24px;
  --re-stack-lg: 48px;
  --re-radius: 4px;
  --re-radius-lg: 8px;
  --re-shadow: 0 4px 20px rgba(30, 58, 138, 0.05);

  --re-header-h: 64px;
}

body {
  font-family: var(--re-font);
  background-color: var(--re-bg);
  color: var(--re-on-surface);
}

.re-container {
  width: 100%;
  max-width: var(--re-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--re-margin-mobile);
  padding-right: var(--re-margin-mobile);
}

@media (min-width: 768px) {
  .re-container {
    padding-left: var(--re-margin-desktop);
    padding-right: var(--re-margin-desktop);
  }
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.fill {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.re-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--re-radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.re-btn-primary {
  background: var(--re-primary-container);
  color: var(--re-on-primary);
}

.re-btn-primary:hover {
  background: var(--re-primary);
  color: var(--re-on-primary);
  text-decoration: none;
}

.re-btn-outline {
  background: transparent;
  color: var(--re-primary);
  border-color: var(--re-primary);
}

.re-btn-outline:hover {
  background: var(--re-surface-low);
  color: var(--re-primary);
  text-decoration: none;
}

.re-btn-cta {
  background: var(--re-cta);
  color: #fff;
}

.re-btn-cta:hover {
  background: var(--re-sale-dark);
  color: #fff;
  text-decoration: none;
}

.re-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--re-sale);
}

.re-badge.is-rent,
.re-badge.cho-thue {
  background: var(--re-rent);
  color: #fff;
}

.re-badge.is-sale,
.re-badge.mua-ban {
  background: var(--re-sale);
}