/* Runtime layer for the HSG6 design-canvas export. */
:root { --font-body: Arial, Helvetica, sans-serif; --font-display: Georgia, 'Times New Roman', serif; }
body { margin: 0; font-family: var(--font-body); }
[hidden], [data-plan-panel][hidden], [data-lead-success][hidden] { display: none !important; }
html, body { overflow-x: hidden; }
.hsg-progress-placeholder { width: 100%; height: 100%; min-height: 320px; display: grid; place-items: center; background: linear-gradient(135deg, #e9e5dd, #c9c0b2); color: #6e665c; font: 500 12px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.hsg-mobile-actions { display: none; }
.hsg6-menu-toggle { display: none; }
body.hsg6-template-mobile header > div:first-child { position: relative; }
body.hsg6-template-mobile .hsg6-menu-toggle { position: absolute; top: 12px; right: clamp(150px, 34vw, 166px); width: 74px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 8px 6px; border: 1px solid #886D49; border-radius: 999px; background: #fff; color: #886D49; font: 500 9px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
body.hsg6-template-mobile header nav.hsg6-mobile-nav { display: none; flex-direction: column; gap: 0; max-height: 480px; overflow-y: auto; overflow-x: hidden; border-top: 1px solid #EFEDE9; background: rgba(255,255,255,.98); }
body.hsg6-template-mobile header nav.hsg6-mobile-nav.is-open { display: flex; }
body.hsg6-template-mobile header nav.hsg6-mobile-nav a { flex: 0 0 auto; width: 100%; box-sizing: border-box; padding: 15px 20px !important; border-bottom: 1px solid #EFEDE9; font-size: 11px !important; letter-spacing: .14em !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:first-child { min-height: 520px !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:first-child > div:last-child { justify-content: flex-start !important; padding: 42px 20px 28px !important; gap: 15px !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:first-child > div:last-child > div:first-child { font-size: 10px !important; letter-spacing: .18em !important; white-space: nowrap; }
body.hsg6-template-mobile section[data-screen-label="Hero"] h1 { max-width: 8ch; font-size: 36px !important; line-height: 1.08 !important; letter-spacing: .025em !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:first-child > div:last-child > p { max-width: 32ch; font-size: 15px !important; line-height: 1.55 !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:nth-child(2) { padding: 26px 20px 32px !important; gap: 18px !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) { gap: 8px !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div { padding-left: 9px !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div:first-child { padding-left: 0 !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div > div:first-child { font-size: 28px !important; }
body.hsg6-template-mobile section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div > div:last-child { font-size: 9px !important; letter-spacing: .08em !important; }
button { font: inherit; }
header nav a { transition: color 180ms ease, border-color 180ms ease; }
header nav a:hover { color: #886D49 !important; }
section[data-screen-label="Hero"] .hsg6-hero-media img {
  object-position: 50% 50% !important;
  filter: saturate(.9) contrast(1.04) brightness(.82);
  transform: scale(1.012);
  animation: hsg6-hero-settle 1200ms cubic-bezier(.16,1,.3,1) both;
}
section[data-screen-label="Hero"] > div:first-child > div:nth-child(2) {
  background:
    linear-gradient(90deg, rgba(9,19,15,.8) 0%, rgba(9,19,15,.44) 37%, rgba(9,19,15,.12) 61%, rgba(9,19,15,.42) 100%),
    linear-gradient(180deg, rgba(9,15,13,.2) 0%, rgba(9,15,13,.04) 35%, rgba(9,15,13,.86) 100%) !important;
}
section[data-screen-label="Hero"] h1,
section[data-screen-label="Hero"] p { text-shadow: 0 2px 22px rgba(4,10,8,.34); }
@keyframes hsg6-hero-settle {
  from { opacity: .65; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1.012); }
}
#mat-bang [data-plan-panel] { margin-top: 0; }
#mat-bang [data-plan-tab] { border: 1px solid #E3E0DB; background: transparent; color: #6E6A64; border-radius: 999px; padding: 13px 32px; font: 500 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all 220ms ease; }
#mat-bang [data-plan-tab].is-active { border-color: #886D49; background: #886D49; color: #fff; }
#mat-bang [data-apartment-list] > div { border-bottom: 1px solid #E3E0DB; }
#mat-bang [data-apartment-list] button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: none; border: 0; padding: 22px 0; cursor: pointer; text-align: left; }
#mat-bang [data-apartment-details] { padding: 0 0 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }
#vay input[type=range] { cursor: ew-resize; }
#vay [data-method] { border: 1px solid #E3E0DB; background: transparent; color: #6E6A64; border-radius: 999px; padding: 13px 18px; cursor: pointer; transition: all 220ms ease; }
#vay [data-method].is-active { border-color: #886D49; background: #886D49; color: #fff; }
form input, form select, form textarea { min-height: 48px; }
form input:focus, form select:focus, form textarea:focus { outline: 1px solid #886D49; outline-offset: -1px; }
.hsg6-form-message { margin-top: 2px; padding: 11px 13px; border: 1px solid currentColor; font: 400 13px/1.55 var(--font-body); }
.hsg6-form-message.is-error { color: #9E3F32; background: #FFF7F5; }
.hsg6-form-message.is-progress { color: #6B563A; background: #F7F2E9; }
form button[type="submit"]:disabled { cursor: wait !important; opacity: .65; }
form [aria-invalid="true"] { border-color: #9E3F32 !important; }
@media (min-width: 761px) and (max-width: 1280px) {
  header { flex-wrap: nowrap !important; padding-left: 28px !important; padding-right: 28px !important; gap: 20px !important; }
  header nav { flex-wrap: nowrap !important; gap: clamp(8px,1.1vw,16px) !important; }
  header nav a { font-size: clamp(9px,.85vw,11px) !important; white-space: nowrap; }
}
@media (max-width: 760px) {
  body { background: #FAF8F5 !important; padding-bottom: 70px; }
  body > div { max-width: 560px !important; margin: 0 auto; background: #fff !important; box-shadow: 0 0 60px rgba(0,0,0,.08); }
  header { display: block !important; padding: 0 !important; gap: 0 !important; }
  header > img { height: 34px !important; margin: 12px 20px !important; }
  header > a:last-child { position: absolute; top: 12px; right: 20px; padding: 8px 16px !important; font-size: 11px !important; }
  header > div:first-child { position: relative; }
  .hsg6-menu-toggle { position: absolute; top: 12px; right: clamp(136px,36vw,158px); width: 74px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 8px 6px; border: 1px solid #886D49; border-radius: 999px; background: #fff; color: #886D49; font: 500 9px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .hsg6-menu-toggle span:first-child { font-size: 14px; line-height: 0; letter-spacing: 0; }
  header nav.hsg6-mobile-nav { display: none !important; flex-direction: column; gap: 0; max-height: min(62vh, 480px); overflow-y: auto; overflow-x: hidden; border-top: 1px solid #EFEDE9; background: rgba(255,255,255,.98); }
  header nav.hsg6-mobile-nav.is-open { display: flex !important; }
  header nav.hsg6-mobile-nav a { flex: 0 0 auto; width: 100%; padding: 15px 20px !important; border-bottom: 1px solid #EFEDE9; font-size: 11px !important; letter-spacing: .14em !important; }
  section[data-screen-label="Hero"] > div:first-child { min-height: clamp(480px, 84vh, 680px) !important; }
  section[data-screen-label="Hero"] .hsg6-hero-media img { object-position: 63% 50% !important; filter: saturate(.94) contrast(1.03) brightness(.74); }
  section[data-screen-label="Hero"] > div:first-child > div:nth-child(2) { background:linear-gradient(180deg,rgba(7,15,12,.16) 0%,rgba(7,15,12,.36) 28%,rgba(7,15,12,.92) 100%) !important; }
  section[data-screen-label="Hero"] > div:first-child > div:last-child { padding: 0 20px 44px !important; gap: 18px !important; }
  section[data-screen-label="Hero"] h1 { font-size: clamp(30px, 8.5vw, 54px) !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) { display: flex !important; flex-direction: column; gap: 20px; padding: 32px 20px 36px !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) { grid-template-columns: repeat(3, 1fr) !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:last-child { display: flex; flex-wrap: wrap; gap: 10px; }
  section[data-screen-label="Hero"] > div:nth-child(2) a { padding: 13px 26px !important; font-size: 11px !important; }
  section[id] { scroll-margin-top: 112px !important; }
  #tong-quan, #vi-tri { padding: 58px 20px !important; display: flex !important; flex-direction: column; gap: 22px !important; }
  #tien-ich { padding: 58px 0 0 !important; }
  #tien-ich > div { padding-left: 20px !important; padding-right: 20px !important; }
  #vi-tri > div:last-of-type { margin-left: -20px !important; margin-right: -20px !important; }
  .hsg-mobile-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.96); border-top: 1px solid #E3E0DB; backdrop-filter: blur(14px); }
  .hsg-mobile-actions a { display: flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid #886D49; border-radius: 999px; color: #886D49; font: 500 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
  .hsg-mobile-actions a.is-primary { color: #fff; background: #886D49; }
  .hsg-floating-actions { display: none !important; }
  /* Keep the first screen calm and readable on small phones. */
  section[data-screen-label="Hero"] > div:first-child { min-height: 520px !important; }
  section[data-screen-label="Hero"] > div:first-child > div:last-child {
    justify-content: flex-start !important;
    padding: 42px 20px 28px !important;
    gap: 15px !important;
  }
  section[data-screen-label="Hero"] > div:first-child > div:last-child > div:first-child {
    font-size: 10px !important;
    letter-spacing: .18em !important;
    white-space: nowrap;
  }
  section[data-screen-label="Hero"] h1 {
    max-width: 8ch;
    font-size: 36px !important;
    line-height: 1.08 !important;
    letter-spacing: .025em !important;
  }
  section[data-screen-label="Hero"] > div:first-child > div:last-child > p {
    max-width: 32ch;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(2) { padding: 26px 20px 32px !important; gap: 18px !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) { gap: 8px !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div { padding-left: 9px !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div:first-child { padding-left: 0 !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div > div:first-child { font-size: 28px !important; }
  section[data-screen-label="Hero"] > div:nth-child(2) > div:nth-child(2) > div > div:last-child { font-size: 9px !important; letter-spacing: .08em !important; }
  #mat-bang [data-apartment-list] button { align-items: flex-start; }
  #mat-bang [data-apartment-list] button > span:last-child { flex-direction: column; align-items: flex-end !important; gap: 4px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  section[data-screen-label="Hero"] .hsg6-hero-media img { animation: none; }
}