/* ===== MUTECT — style chung =====
   Đổi màu thương hiệu: sửa --accent bên dưới. */
:root {
  color-scheme: light;
  --accent: #13804F;        /* nền nút, mảng màu chính */
  --accent-text: #13804F;   /* chữ màu xanh */
  --dark: #0F3D2B;
  --sun: #FFD25E;
  --bg: #F5F8F3;            /* nền trang */
  --surface: #FFFFFF;       /* nền thẻ, khung */
  --tint: #E3F4E6;          /* nền nhạt */
  --chip-y: #FFF0BF; --chip-p: #FDE2D2; --chip-t: #D7F1F4;
  --ink: #10291D;           /* chữ chính */
  --body: #3B5446;          /* chữ nội dung */
  --muted: #4F6658;         /* chữ phụ */
  --line: #DCE7DE; --line-2: #C5D8C9;
  --header-bg: rgba(255,255,255,0.94);
  --price: #C2410C; --warn: #9A5B00;
  --map-water: #CFEFF2; --map-land: #FFFFFF;
}
/* ===== Chế độ tối ===== */
[data-theme="dark"] {
  color-scheme: dark;
  --accent-text: #5FD39A;
  --bg: #0C1A13;
  --surface: #13281D;
  --tint: #1B3829;
  --chip-y: #3A3216; --chip-p: #3C2619; --chip-t: #12363A;
  --ink: #EEF6F0;
  --body: #C3D6C9;
  --muted: #98B0A1;
  --line: #264434; --line-2: #3B5E49;
  --header-bg: rgba(12,26,19,0.9);
  --price: #FFA266; --warn: #F2BE55;
  --map-water: #0F3038; --map-land: #1B3829;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); }
img { max-width: 100%; display: block; }
a { color: var(--accent-text); }
a:hover { color: #0B5C38; }
[data-theme="dark"] a:hover { color: #8FE8B8; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.bn-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 4px; }
.bn-skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hiệu ứng nền: hạt bông bồn bồn bay lên + bồn bồn đung đưa */
@keyframes bn-rise { 0% { transform: translate(0,0) rotate(0deg); opacity: 0 } 10% { opacity: .95 } 90% { opacity: .8 } 100% { transform: translate(80px,-115vh) rotate(160deg); opacity: 0 } }
@keyframes bn-sway { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } }
/* Máy bật "giảm chuyển động" (Windows: Hiệu ứng hoạt hình tắt; iPhone: Giảm chuyển động):
   tắt chuyển động lớn (cuộn mượt, bông/đom đóm bay xa) nhưng vẫn giữ cỏ nến đung đưa nhẹ và lửa lập loè. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .bn-seed { animation: none !important; display: none; }
  .bn-fly { animation-name: bn-blink !important; animation-duration: 3s !important; }
  .bn-reeds g, .bn-reeds-glow g, .bn-reeds-glow circle, .bn-reeds-glow rect { animation-duration: 9s !important; }
}

/* Menu trên điện thoại: cuộn ngang */
@media (max-width: 820px) {
  .bn-nav { flex-wrap: nowrap !important; overflow-x: auto; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .bn-nav a { white-space: nowrap; flex: 0 0 auto; }
}

/* ===== Chatbot & nút liên hệ nhanh ===== */
.bn-widget { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: 'Be Vietnam Pro', system-ui, sans-serif; color: var(--ink); line-height: 1.5; }
.bn-quick { display: flex; flex-direction: column; gap: 8px; }
.bn-quick a { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1.5px solid var(--ink); text-decoration: none; font-weight: 700; font-size: 13px; }
.bn-fab { width: 62px; height: 62px; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.bn-fab .bn-badge { position: absolute; top: -6px; right: -6px; background: var(--sun); color: var(--ink); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.bn-chat { width: min(360px, calc(100vw - 40px)); height: min(520px, calc(100vh - 140px)); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 48px rgba(16,41,29,.22); display: flex; flex-direction: column; overflow: hidden; }
.bn-chat-head { background: var(--accent); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.bn-chat-head strong { font-family: 'Montserrat', sans-serif; font-size: 15px; }
.bn-chat-head small { display: block; font-size: 12px; color: #D6F2DF; }
.bn-chat-close { margin-left: auto; width: 44px; height: 44px; border: none; background: none; color: #fff; cursor: pointer; font-size: 22px; }
.bn-msgs { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bn-msg { max-width: 85%; padding: 10px 14px; font-size: 14px; border-radius: 12px; }
.bn-msg.bot { align-self: flex-start; background: var(--tint); color: var(--ink); border-bottom-left-radius: 2px; }
.bn-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 2px; }
.bn-sugg { padding: 6px 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bn-sugg button { font: inherit; font-size: 13px; padding: 7px 11px; min-height: 36px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.bn-chat-form { padding: 12px; display: flex; gap: 8px; }
.bn-chat-form input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; padding: 11px 14px; border-radius: 4px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); }
.bn-chat-form button { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 4px; border: none; background: var(--accent); color: #fff; cursor: pointer; font-size: 18px; }

/* ===== Nút chuyển sáng / tối ===== */
.bn-theme { width: 42px; height: 42px; border-radius: 4px; border: 1.5px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bn-theme:hover { border-color: var(--accent-text); color: var(--accent-text); }
.bn-sun { display: none; }
[data-theme="dark"] .bn-moon { display: none; }
[data-theme="dark"] .bn-sun { display: block; }
html.bn-switching, html.bn-switching * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }

/* ===== Hiệu ứng nền theo chế độ =====
   Sáng: bồn bồn đung đưa + bông bay lên
   Tối:  bông cỏ nến cháy sáng như ngọn nến, bông hoá thành đốm sáng, đom đóm bay khắp trang */
.bn-reeds-glow, .bn-fireflies { display: none; }
[data-theme="dark"] .bn-reeds { display: none; }
[data-theme="dark"] .bn-reeds-glow { display: block; }
[data-theme="dark"] .bn-fireflies { display: block; }
[data-theme="dark"] .bn-seed {
  background: #FFE6A6 !important;
  box-shadow: 0 0 8px 2px rgba(255,205,110,0.75), 0 0 22px 6px rgba(255,180,80,0.35) !important;
}
@keyframes bn-flicker {
  0%   { transform: scale(1, 1) rotate(-1deg); opacity: .95; }
  35%  { transform: scale(.94, 1.08) rotate(2deg); opacity: 1; }
  70%  { transform: scale(1.04, .95) rotate(-2deg); opacity: .9; }
  100% { transform: scale(.97, 1.05) rotate(1deg); opacity: 1; }
}
@keyframes bn-ember { from { opacity: 0; } to { opacity: .55; } }
@keyframes bn-glow { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }

.bn-fly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #EAFF8F; box-shadow: 0 0 6px 2px rgba(214,255,110,0.85), 0 0 18px 6px rgba(190,255,90,0.35); }
@keyframes bn-blink { 0%, 100% { opacity: .15; } 40%, 60% { opacity: 1; } }
@keyframes bn-fly1 { 0% { transform: translate(0,0); } 33% { transform: translate(12vw,-9vh); } 66% { transform: translate(4vw,-18vh); } 100% { transform: translate(18vw,-6vh); } }
@keyframes bn-fly2 { 0% { transform: translate(0,0); } 33% { transform: translate(-10vw,6vh); } 66% { transform: translate(-16vw,-8vh); } 100% { transform: translate(-6vw,-14vh); } }
@keyframes bn-fly3 { 0% { transform: translate(0,0); } 33% { transform: translate(8vw,12vh); } 66% { transform: translate(-6vw,16vh); } 100% { transform: translate(-12vw,4vh); } }
@keyframes bn-fly4 { 0% { transform: translate(0,0); } 33% { transform: translate(-14vw,-6vh); } 66% { transform: translate(6vw,-12vh); } 100% { transform: translate(14vw,8vh); } }


/* ===== Bản đồ thật (Leaflet) ở trang Nguồn gốc ===== */
#bn-map { z-index: 0; font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
.bn-pin { display: flex !important; align-items: center; gap: 6px; width: auto !important; height: auto !important; background: none; border: none; cursor: pointer; }
.bn-pin-dot { width: 22px; height: 22px; border-radius: 50%; background: #F2A93B; border: 3px solid #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,.3); flex: 0 0 auto; transition: transform .2s; }
.bn-pin-label { font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: #FFFFFF; color: #10291D; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.bn-pin.is-active .bn-pin-dot { background: var(--accent); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(19,128,79,.3); }
.bn-pin.is-active .bn-pin-label { background: var(--accent); color: #FFFFFF; }
.leaflet-container a { color: var(--accent-text); }
[data-theme="dark"] #bn-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.8); }
[data-theme="dark"] .leaflet-control-zoom a, [data-theme="dark"] .leaflet-control-attribution { background: #13281D !important; color: #EEF6F0 !important; border-color: #264434 !important; }

/* ===== Hỏi & đáp (trang chủ) ===== */
.bn-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; transition: border-color .2s; }
.bn-faq details[open] { border-color: var(--accent-text); }
.bn-faq summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: 'Montserrat', 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--ink); }
.bn-faq summary::-webkit-details-marker { display: none; }
.bn-faq summary::after { content: '+'; flex: 0 0 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; background: var(--tint); color: var(--accent-text); }
.bn-faq details[open] summary::after { content: '\2212'; background: var(--accent); color: #FFFFFF; }
.bn-faq-a { padding: 0 20px 18px; color: var(--body); line-height: 1.7; }
.bn-faq-chat { font: inherit; font-weight: 600; color: var(--accent-text); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; }

/* ===== Logo MUTECT ===== */
.bn-logo img { display: block; }
@media (max-width: 560px) { .bn-logo-tag { display: none; } }
[data-theme="dark"] .bn-logo img { background: #FFFFFF; border-radius: 6px; padding: 4px 8px; box-sizing: content-box; height: 36px !important; }
.bn-foot-logo { align-self: flex-start; background: #FFFFFF; border-radius: 6px; padding: 8px 14px; }
.bn-foot-logo img { display: block; }
/* Công cụ ước tính */
#bn-calc input:focus, #bn-calc select:focus { outline: 3px solid var(--sun); outline-offset: 1px; }