/* ============================================================
   Bestvinhomes — HEADER (port thiết kế, scope bvh-, KHÔNG rule global)
   Font: Playfair Display (wordmark) + Be Vietnam Pro (UI).
   ============================================================ */
:root {
  --bvh-hdr-bg:            #F7F3EB;
  --bvh-hdr-ink:           #1C1A16;
  --bvh-hdr-ink-2:         #34302A;
  --bvh-hdr-muted:         #756D60;
  --bvh-hdr-accent:        #B28E4B;
  --bvh-hdr-accent-bright: #C9A85E;
  --bvh-hdr-accent-deep:   #8C6E36;
  --bvh-hdr-serif: "Playfair Display", Georgia, serif;
  --bvh-hdr-sans:  "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --bvh-hdr-maxw: 1240px;
  --bvh-hdr-gutter: clamp(20px, 5vw, 64px);
}
.bvh-site-header, .bvh-mobile-menu { box-sizing: border-box; }
.bvh-site-header *, .bvh-mobile-menu * { box-sizing: border-box; }
.bvh-site-header a, .bvh-mobile-menu a { text-decoration: none; color: inherit; }
.bvh-wrap { width: 100%; max-width: var(--bvh-hdr-maxw); margin: 0 auto; padding: 0 var(--bvh-hdr-gutter); }
.bvh-site-header { position: relative; z-index: 40; font-family: var(--bvh-hdr-sans); }

.bvh-topbar { background: var(--bvh-hdr-ink); color: #d9d2c4; font-size: 12.5px; letter-spacing: .02em; }
.bvh-topbar .bvh-wrap { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.bvh-topbar a { color: #d9d2c4; transition: color .25s; }
.bvh-topbar a:hover { color: var(--bvh-hdr-accent-bright); }
.bvh-tb-left  { display: flex; gap: 22px; align-items: center; }
.bvh-tb-right { display: flex; gap: 22px; align-items: center; }
.bvh-sep { color: #4a463d; }
.bvh-tb-phone { color: #fff; font-weight: 600; letter-spacing: .04em; }

.bvh-nav { background: rgba(247,243,235,.92); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(28,26,22,.08); transition: background .3s; }
.bvh-nav .bvh-wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.bvh-wordmark { font-family: var(--bvh-hdr-serif); font-size: 25px; font-weight: 600; letter-spacing: .01em; color: var(--bvh-hdr-ink); }
.bvh-wordmark .bvh-dot { color: var(--bvh-hdr-accent); }
.bvh-nav-links { display: flex; gap: 38px; align-items: center; list-style: none; margin: 0; padding: 0; }
.bvh-nav-links > li > a { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bvh-hdr-ink-2); position: relative; padding: 8px 0; }
.bvh-nav-links > li > a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--bvh-hdr-accent); transition: width .3s ease; }
.bvh-nav-links > li > a:hover::after { width: 100%; }
.bvh-nav-burger { display: none; }

.bvh-mobile-menu { position: fixed; inset: 0; background: var(--bvh-hdr-bg); z-index: 55; padding: calc(40px + 78px + 18px) 0 48px; overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: hidden; transition: visibility 0s linear .38s; font-family: var(--bvh-hdr-sans); }
.bvh-mobile-menu.is-open { visibility: visible; transition: visibility 0s; }
.bvh-mm-inner { max-width: 680px; margin: 0 auto; padding: 0 var(--bvh-hdr-gutter); opacity: 0; transform: translateY(-14px); transition: opacity .38s ease, transform .38s cubic-bezier(.4,0,.2,1); }
.bvh-mobile-menu.is-open .bvh-mm-inner { opacity: 1; transform: translateY(0); }
.bvh-mm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: none; background: none; text-align: left; cursor: pointer; color: var(--bvh-hdr-ink); font-family: var(--bvh-hdr-sans); font-weight: 500; padding: 18px 0; }
.bvh-mm-row > .bvh-mm-label { flex: 1; }
.bvh-mm-l1 { border-top: 1px solid rgba(28,26,22,.12); }
.bvh-mm-l1:first-child { border-top: none; }
.bvh-mm-l1 > .bvh-mm-row { font-size: 24px; }
.bvh-mm-l2 > .bvh-mm-row { font-size: 17px; color: var(--bvh-hdr-ink-2); padding: 13px 0; }
.bvh-mm-l2 > .bvh-mm-row .bvh-mm-label { letter-spacing: .01em; }
.bvh-mm-l3 > .bvh-mm-row { font-size: 15px; font-weight: 400; color: var(--bvh-hdr-muted); padding: 10px 0; }
.bvh-mm-leaf > .bvh-mm-row:hover .bvh-mm-label { color: var(--bvh-hdr-accent-deep); }
.bvh-mm-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1); }
.bvh-mm-item.open > .bvh-mm-children { grid-template-rows: 1fr; }
.bvh-mm-children-inner { overflow: hidden; min-height: 0; padding-left: 16px; border-left: 1px solid rgba(28,26,22,.08); margin-left: 2px; }
.bvh-mm-chev { width: 18px; height: 18px; flex: none; position: relative; transition: transform .35s ease; color: var(--bvh-hdr-accent-deep); }
.bvh-mm-chev::before, .bvh-mm-chev::after { content: ''; position: absolute; top: 8px; left: 3px; width: 8px; height: 1.6px; background: currentColor; border-radius: 2px; }
.bvh-mm-chev::before { transform: rotate(45deg); left: 3px; }
.bvh-mm-chev::after  { transform: rotate(-45deg); left: 8px; }
.bvh-mm-item.open > .bvh-mm-row > .bvh-mm-chev { transform: rotate(180deg); }
.bvh-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
body.bvh-menu-open { overflow: hidden; }

@media (max-width: 860px) {
  .bvh-nav-links, .bvh-topbar .bvh-tb-left .bvh-hide-sm { display: none; }
  .bvh-topbar { font-size: 11px; }
  .bvh-topbar .bvh-wrap { padding-left: 14px; padding-right: 14px; height: 38px; }
  .bvh-tb-right { gap: 11px; white-space: nowrap; }
  .bvh-tb-right a { white-space: nowrap; }
  .bvh-nav { position: relative; z-index: 60; backdrop-filter: none; background: var(--bvh-hdr-bg); }
  .bvh-topbar { position: relative; z-index: 60; }
  body.bvh-menu-open .bvh-site-header { position: fixed; top: 0; left: 0; right: 0; }
  .bvh-nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 24px; height: 24px; cursor: pointer; z-index: 60; }
  .bvh-nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--bvh-hdr-ink); transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
  .bvh-nav-burger.is-open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .bvh-nav-burger.is-open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
}
@media (min-width: 861px) {
  .bvh-mobile-menu { display: none; }
  .bvh-nav-links > li { position: relative; }
  .bvh-dropdown { position: absolute; top: 100%; left: -24px; padding-top: 16px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; z-index: 50; }
  .bvh-nav-links > li:hover .bvh-dropdown, .bvh-nav-links > li:focus-within .bvh-dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  .bvh-dropdown-inner { display: flex; flex-wrap: wrap; width: max-content; gap: 14px 36px; max-width: min(960px, calc(100vw - 32px)); background: #fff; border: 1px solid rgba(28,26,22,.08); box-shadow: 0 30px 60px -30px rgba(40,33,20,.35); border-radius: 12px; padding: 28px 32px; }
  .bvh-dd-col { min-width: 140px; }
  .bvh-dd-col > .bvh-dd-head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bvh-hdr-accent-deep); font-weight: 600; margin: 0 0 13px; white-space: nowrap; }
  .bvh-dd-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .bvh-dd-col li > a { font-size: 14px; color: var(--bvh-hdr-ink-2); white-space: nowrap; transition: color .2s; }
  .bvh-dd-col li > a:hover { color: var(--bvh-hdr-accent-deep); }
}