/* Giao diện Hải An được bảo trì trực tiếp trong Bandoso, giữ nguyên quy tắc hiển thị.
   Phần bổ sung riêng cho Bandoso (intro, 2D Mapbox, VR360, lớp nền) nằm ở cuối tệp. */
:root {
  font-family: 'Be Vietnam Pro',system-ui,sans-serif;
  color: #f0f7fc;
  background: #062037;
  font-synthesis: none;
  --cyan: #37d1f4;
  --muted: #9cbccc;
  --line: #83cce731;
  --panel: linear-gradient(145deg,#0b3148ee,#031d30f5);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,input,select {
  font: inherit;
}

button,a,input {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
}

button,a {
  transition: background .18s,color .18s,border-color .18s,box-shadow .18s;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline: 2px solid #6ce1ff;
  outline-offset: 4px;
}

svg {
  flex-shrink: 0;
}

button svg {
  vertical-align: middle;
}

input {
  min-width: 0;
}

.app {
  --header-height: 60px;
  --explorer-width: 244px;
  --detail-width: 286px;
  --map-left: calc(var(--explorer-width) + 20px);
  --map-right: 12px;
  --detail-height: min(42dvh, 360px);
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at 61% 47%,#124d69 0,#0c3956 37%,#082b45 67%,#042137 100%);
}

.app::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 60% 20%,#44c6e708,transparent 60%);
}

.header {
  height: var(--header-height);
  position: absolute;
  z-index: 25;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 18px;
  border-bottom: 0;
  background: none;
  box-shadow: none;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 0;
  flex-shrink: 0;
}

.brand-mark {
  width: 38px;
  height: 42px;
  display: grid;
  place-items: start center;
  padding-top: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid #b1dbde99;
  border-radius: 16px 16px 25px 25px;
  color: #ffe3af;
  background: linear-gradient(150deg,#166676,#126080 67%);
  box-shadow: inset 0 0 15px #93dce831,0 4px 15px #00172566;
}

.brand-mark>svg {
  width: 27px;
  height: 27px;
  z-index: 1;
  filter: drop-shadow(0 2px 0 #543f28);
}

.brand-waves {
  position: absolute;
  bottom: -12px;
  width: 90px;
  height: 32px;
  border-radius: 50%;
  border-top: 2px solid #a3ebf1;
  background: #1a829d;
  transform: rotate(-9deg);
  box-shadow: 0 -6px 0 #126477,0 -7px 0 #d0efe5;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-copy strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.5px;
  white-space: nowrap;
}

.brand-copy strong>span {
  color: #fff;
}

.brand-copy small>span {
  white-space: nowrap;
}

.brand-copy small {
  font-size: 9.5px;
  font-weight: 500;
  color: #d6e8f0;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Hải An logo (owner 2026-10-21): a square avatar artwork shown in a round frame. */
.brand-logo {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #ffffffe0,0 4px 12px #00172566;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d7f0ffcc;
  border-radius: 24px;
  padding: 8px 12px;
  color: #125074;
  background: linear-gradient(125deg,#f2faff,#c8e4f2);
  box-shadow: 0 0 20px #28b9eb13,inset 0 1px #fff;
}

.search:focus-within {
  border-color: #50d7ff;
  box-shadow: 0 0 0 3px #32c8f01f;
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  color: #123951;
  background: transparent;
  font-size: 12px;
}

.search input::placeholder {
  color: #406b83;
}

.search button {
  padding: 0;
  color: #29657f;
}

.header-search {
  margin-left: auto;
  flex: 1;
  max-width: 330px;
  min-width: 190px;
}

.search-hint {
  white-space: nowrap;
  border-left: 1px solid #87aebd55;
  padding-left: 9px;
  font-size: 9px;
  color: #5e8297;
}

.sidebar-search {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.tour-button,.header-exhibition {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #36bfe0a1;
  border-radius: 22px;
  background: #00284099;
  box-shadow: inset 0 0 12px #1caada14;
  color: #e9f8ff;
  font-size: 11px;
  white-space: nowrap;
}

.tour-button:hover,.tour-button.active,.header-exhibition:hover {
  background: #0b6483;
  border-color: #52e3ff;
}

.tour-button svg {
  fill: currentColor;
  stroke-width: 1;
}

.mode-switch {
  display: flex;
  padding: 3px;
  border: 1px solid #b0d6e6;
  border-radius: 23px;
  background: #b9d8e7;
  box-shadow: inset 0 1px #fff8;
}

.mode-switch button {
  padding: 7px 12px;
  border-radius: 18px;
  font-size: 12px;
  color: #113c58;
  font-weight: 600;
}

.mode-switch button.active {
  background: linear-gradient(145deg,#0c8ad4,#005697);
  color: #fff;
  box-shadow: 0 1px 7px #04547a77;
}

.language {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 11px;
  color: #daecf6;
}

.panel {
  border: 1px solid #43a7ca69;
  background: var(--panel);
  box-shadow: inset 0 1px #c4ebfa10,0 16px 38px #00192c42;
}

.explorer {
  position: absolute;
  z-index: 15;
  left: 12px;
  top: 72px;
  bottom: 24px;
  width: var(--explorer-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
}

.explorer-collapsed {
  --map-left: 12px;
}

.explorer-collapsed .explorer {
  display: none;
}

.explorer-reopen {
  position: absolute;
  z-index: 16;
  top: 72px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
}

.explorer-reopen small {
  color: var(--muted);
}

.explorer-heading {
  padding: 12px 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eyebrow {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 500;
  color: #82bdd1;
}

.explorer h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.6px;
  line-height: 1.4;
  margin: 0;
}

.explorer-subtitle {
  color: #a6c5d7;
  font-size: 10px;
  font-weight: 600;
  margin: 4px 12px 12px;
}

.filters {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--line);
}

.filters button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  font-size: 10px;
  padding: 7px 4px;
  white-space: nowrap;
  border: 1px solid #5c9fbd24;
  border-radius: 7px;
  color: #bad1dd;
  background: #163c536b;
}

.filters button.active {
  color: #00263f;
  background: linear-gradient(135deg,#3ed4f5,#06b0e7);
  border-color: #35d7fd;
  font-weight: 600;
  box-shadow: 0 3px 12px #02b7e221;
}

.filters button:hover:not(.active) {
  background: #1f526b;
  color: #fff;
}

.list-heading {
  display: flex;
  justify-content: space-between;
  margin: 10px 13px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #a6c5d7;
  letter-spacing: 0;
}

.list-heading>span:last-child {
  color: #d7ebf3;
  letter-spacing: 0;
}

.destination-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: #527f9699 transparent;
}

.destination {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 9px;
  padding: 7px 5px;
  min-height: 60px;
  border: 1px solid transparent;
  border-radius: 9px;
  position: relative;
}

.destination+.destination::before {
  content: '';
  position: absolute;
  left: 62px;
  right: 9px;
  top: -1px;
  height: 1px;
  background: #b1d2e211;
}

.destination:hover,.destination.is-hovered {
  background: #24617b62;
  border-color: #7fc8dc45;
}

.destination.is-hovered .destination-index {
  color: #543408;
  background: #ffe0a0;
}

.destination.selected {
  background: linear-gradient(110deg,#08709299,#04405c88);
  border-color: #23cff5;
  box-shadow: inset 0 0 15px #00a9e321,0 0 11px #0bcaff0a;
}

.destination-visual {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 42px;
}

.heritage-photo {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg,#244e5b,#133441);
  color: #9cbdad;
}

.heritage-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #a3d3de29;
  border-radius: inherit;
}

.heritage-photo>svg {
  opacity: .7;
}

.heritage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.photo-placeholder {
  background: radial-gradient(ellipse at 50% 100%,#376357,#153e51 85%);
}

.destination-visual>.heritage-photo {
  border-radius: 7px;
}

.destination-index {
  position: absolute;
  bottom: -2px;
  left: -3px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 600;
  background: #d2e7ef;
  color: #10334a;
  border: 2px solid #10364b;
  box-shadow: 0 2px 5px #0005;
}

.destination.selected .destination-index {
  color: #452504;
  background: #ffcd82;
  border-color: #6b754a;
}

.destination-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.destination-text strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  color: #ecf6fc;
}

.destination-text small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: #8bb0c3;
  font-size: 9px;
  line-height: 1.5;
}

.destination-text .located-label {
  color: #93cddc;
}

.destination-text small>span {
  display: none;
}

.destination>svg {
  color: #81b2c6;
  width: 12px;
}

.explorer-footer {
  margin: 5px 11px 12px;
  border: 1px solid #39a7ce66;
  padding: 13px 11px;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: radial-gradient(ellipse at 90% 110%,#1487a454,transparent 80%),linear-gradient(110deg,#0b3a57,#0b3049);
}

.explorer-footer:hover {
  border-color: #46d2fb;
  background-color: #135072;
}

.footer-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #e6f6ff;
  border: 1px solid #54c7e0aa;
  background: #196b8a55;
  flex-shrink: 0;
}

.footer-icon svg {
  fill: #b2eaff;
  stroke-width: 1;
}

.explorer-footer>span:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.explorer-footer small {
  font-size: 7px;
  color: #7fbad0;
  letter-spacing: 1.3px;
}

.explorer-footer strong {
  font-size: 10px;
  font-weight: 500;
  color: #ecf5ff;
}

.explorer-footer>span>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #73d9f4;
  font-size: 9px;
}

.map-area {
  position: absolute;
  left: var(--map-left);
  top: calc(var(--header-height) + 4px);
  right: var(--map-right);
  bottom: 22px;
}

.has-detail {
  --map-right: calc(var(--detail-width) + 24px);
}

.scene-stage {
  position: absolute;
  inset: 0;
}

.scene-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.live-dot {
  width: 4px;
  height: 4px;
  background: #53d8e7;
  border-radius: 50%;
  box-shadow: 0 0 8px #6ae7ff;
}

.north-control {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #e4f4fe;
}

.north-control svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 7px #00253a);
  stroke-width: 1.25;
}

.scene-controls {
  position: absolute;
  right: 10px;
  bottom: 65px;
  z-index: 4;
  padding: 3px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccecff;
  border-radius: 11px;
  background: linear-gradient(145deg,#effaff,#b3dce9);
  box-shadow: 0 6px 24px #00172e66;
}

.scene-controls button {
  width: 32px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #173e59;
}

.scene-controls button:hover,.scene-controls button.active {
  color: #00658f;
  background: #8ccde499;
}

.scene-controls>span {
  height: 1px;
  background: #4d8fab44;
  margin: 2px 5px;
}

.map-bottom {
  position: absolute;
  left: 12px;
  right: 10px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-hint {
  display: none;
  align-items: center;
  gap: 7px;
  color: #8db4c7;
  font-size: 9px;
}

.map-hint>span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.map-hint i {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

.data-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  white-space: nowrap;
  color: #bdd7e2;
  padding: 7px 9px;
  border: 1px solid #80c2d32b;
  background: #062b4059;
  border-radius: 5px;
}

.status-dot {
  width: 4px;
  height: 4px;
  background: #edc885;
  border-radius: 50%;
}

.scene-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 3D heritage name: white text with a dark halo, no box. The button is placed by its top-left corner (translate3d from the engine). */
.scene-marker {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  will-change: transform;
  pointer-events: auto;
  z-index: 2;
  transition: opacity .25s;
}

.scene-marker[hidden] {
  display: none;
}

.scene-marker .marker-name {
  display: block;
  height: auto;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1px;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: 0 0 2px #071a22, 0 0 5px #071a22, 0 1px 3px #0000008c;
  transition: color .2s, text-shadow .2s;
}

/* Hover: the name glows cyan. Its size does not change, and a selected name looks like any other (only the dot shows it). */
.scene-marker.is-hovered .marker-name {
  color: #f2feff;
  text-shadow: 0 0 2px #04202c, 0 0 6px #46d7f0f2, 0 0 14px #46d7f0bf, 0 0 24px #46d7f073;
}

/* The anchor dot: bronze with a pulsing ring, cyan on hover or selection. Pointer-transparent; the engine picks within 14 px. */
.marker-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff1cf, #d6aa5c 55%, #9a6d2c);
  box-shadow: 0 0 0 2px #ffe2a847, 0 0 12px 3px #deb060bf;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
  transition: background .2s, box-shadow .2s, opacity .25s;
}

.marker-dot[hidden] {
  display: none;
}

.marker-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid #e8be6e8c;
  animation: marker-dot-ring 2.6s ease-out infinite;
}

@keyframes marker-dot-ring {
  0% {
    transform: scale(.4);
    opacity: .9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.marker-dot.is-hovered,.marker-dot.selected {
  background: radial-gradient(circle at 35% 35%, #f0ffff, #45d6ee 55%, #0f86a6);
  box-shadow: 0 0 0 3px #a0f5ff66, 0 0 22px 8px #46d7f0e6;
}

.marker-dot.is-hovered::after,.marker-dot.selected::after {
  border-color: #78e8fab3;
}

.marker-dot.is-hovered::after {
  animation-duration: 1.3s;
}

.marker-dot.context-muted:not(.is-hovered):not(.selected) {
  opacity: .55;
}

@media(prefers-reduced-motion:reduce) {
  .marker-dot::after {
    animation: none;
    opacity: 0;
  }
}

.marker-number {
  width: 28px;
  height: 31px;
  flex-shrink: 0;
  pointer-events: auto;
  display: grid;
  place-items: center;
  border: 1.5px solid #ffe8b1;
  border-radius: 50% 50% 45% 45%;
  font-size: 11px;
  font-weight: 600;
  color: #fff5df;
  background: linear-gradient(155deg,#cb8a27,#a95208);
  box-shadow: 0 2px 8px #12332388,inset 0 1px #ffe2a066;
  position: relative;
}

.marker-number::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  bottom: -4px;
  left: calc(50% - 3px);
  background: #a8560d;
  transform: rotate(45deg);
  border-right: 1px solid #ffe3a5;
  border-bottom: 1px solid #ffe3a5;
}

.marker-name {
  color: #f1f6f5;
  background: #072c40ed;
  border: 1px solid #a0d0d84d;
  border-radius: 5px;
  height: 26px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  padding: 4px 8px;
  pointer-events: auto;
  box-shadow: 0 3px 10px #00172455;
}

.scene-marker:hover,.scene-marker.selected,.scene-marker.is-hovered {
  z-index: 8;
}

.scene-marker.name-hidden .marker-name,.scene-marker.label-hidden .marker-name {
  visibility: hidden;
  pointer-events: none;
}

.scene-marker.context-muted:not(:hover):not(.is-hovered):not(.selected) {
  opacity: .35;
}

.place-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,-50%);
  will-change: transform;
  pointer-events: none;
  color: #23454e;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 4px 7px;
  border: 1px solid #eef8f186;
  border-radius: 5px;
  background: #d4e9dfdb;
  box-shadow: 0 2px 6px #092e3526;
  text-shadow: 0 1px #f4fcf659;
  display: flex;
  gap: 6px;
  align-items: center;
}

.place-label[hidden] {
  display: none;
}

.place-label--major {
  color: #183e4b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}

.place-label--local {
  color: #32575e;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2px;
  background: #d4e9dfc9;
}

.bottom-toolbar {
  position: absolute;
  z-index: 17;
  bottom: 28px;
  left: calc(var(--map-left) + (100% - var(--map-left) - var(--map-right))/2);
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  align-items: center;
  white-space: nowrap;
  border-radius: 12px;
  padding: 3px;
  border-color: #2cacd17d;
  background: linear-gradient(160deg,#0b3b57ed,#03283ded);
  box-shadow: inset 0 1px #b5f1ff14,0 7px 22px #00203566;
}

.bottom-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 10px;
  color: #d2e7f2;
}

.bottom-toolbar button>span {
  display: none;
}

.bottom-toolbar button:hover {
  background: #236a875e;
}

.bottom-toolbar button.active {
  color: #8feaff;
  background: #2687a315;
}

.toolbar-separator {
  height: 22px;
  width: 1px;
  margin: 0 2px;
  background: #72bbd522;
}

.attribution {
  position: absolute;
  z-index: 18;
  bottom: 10px;
  left: 19px;
  display: flex;
  gap: 6px;
  align-items: center;
  color: #85afc3;
  font-size: 7px;
}

.attribution button {
  color: #a0c9dd;
  font-size: inherit;
  padding: 0 0 0 6px;
  border-left: 1px solid #5188a199;
}

.attribution a:hover {
  color: #d4f4ff;
}

.chat-button {
  position: absolute;
  bottom: 28px;
  right: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f0fbff;
  background: linear-gradient(140deg,#138edf,#035391);
  border: 1px solid #b2e4ff;
  border-radius: 13px;
  padding: 9px;
  font-size: 10px;
  box-shadow: 0 0 0 4px #268acc1a,0 0 24px #268edc24,inset 0 1px #fff4;
}

.chat-button>span {
  display: none;
}

.chat-button:hover {
  background: #0c92d2;
  box-shadow: 0 0 0 4px #40b5ed33,0 0 24px #268edc55;
}

.icon-button {
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: 7px;
  color: #c0dde9;
}

.icon-button:hover {
  background: #70bcd035;
}

.popover-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.popover-heading>strong {
  font-size: 14px;
  font-weight: 500;
}

.layer-panel {
  position: absolute;
  right: 60px;
  bottom: 65px;
  z-index: 20;
  width: 230px;
  border-radius: 12px;
  padding: 16px;
}

.layer-panel label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-size: 12px;
  color: #c5dce7;
}

.layer-panel label:last-child {
  padding-bottom: 2px;
}

.layer-panel input {
  accent-color: #25c1e6;
  width: 16px;
  height: 16px;
}

/* Ánh sáng (3D): công tắc giờ thực và thanh trượt giờ trong ngày */
.layer-panel .light-title {
  margin: 14px 0 2px;
}

.layer-panel .light-switch {
  min-height: 44px;
  border-top: 0;
  padding: 6px 0;
  cursor: pointer;
}

.layer-panel .light-switch input[role="switch"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0 0 0 10px;
  border-radius: 10px;
  background: #35566a;
  cursor: pointer;
  transition: background .15s;
}

.layer-panel .light-switch input[role="switch"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eaf7fd;
  transition: transform .15s;
}

.layer-panel .light-switch input[role="switch"]:checked {
  background: #1fa9cc;
}

.layer-panel .light-switch input[role="switch"]:checked::after {
  transform: translateX(16px);
}

.light-time {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 2px 0 2px;
  font-size: 12px;
  color: #c5dce7;
}

.layer-panel .light-time input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  touch-action: pan-y;
}

.light-label {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #eaf7fd;
}

.light-time.is-live .light-label {
  grid-column: 1 / -1;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.light-default {
  min-width: 32px;
  min-height: 32px;
  border: 1px solid #43a7ca69;
  border-radius: 8px;
  padding: 0 12px;
  background: transparent;
  font-size: 12px;
  color: #c5dce7;
  cursor: pointer;
}

.light-default:hover {
  background: #70bcd024;
}

.layer-panel input[type="range"]:focus-visible,
.layer-panel .light-switch input[role="switch"]:focus-visible,
.light-default:focus-visible {
  outline: 2px solid #6ce1ff;
  outline-offset: 3px;
}

/* Chất lượng (3D, 2026-10-21): bốn mức thành một dải nút như công tắc 2D/3D; dòng nhỏ dưới cho biết đang tự động. */
.quality-switch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 3px;
  border: 1px solid #43a7ca69;
  border-radius: 10px;
}

.quality-switch button {
  min-height: 30px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #c5dce7;
}

.quality-switch button:hover {
  background: #70bcd024;
}

.quality-switch button.active {
  background: linear-gradient(145deg,#0c8ad4,#005697);
  color: #fff;
  box-shadow: 0 1px 7px #04547a77;
}

.quality-switch button:focus-visible {
  outline: 2px solid #6ce1ff;
  outline-offset: 2px;
}

.quality-mode {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 32px;
  margin-top: 6px;
  font-size: 11px;
  color: #9fc1d1;
}

/* Nền ảnh vệ tinh (3D): công tắc dưới các lớp, ghi chú khi ảnh tạm dừng, nguồn ảnh Mapbox trên cảnh */
.layer-panel .light-switch.ground-look {
  border-top: 1px solid var(--line);
}

.layer-panel .light-switch.ground-look:has(input:disabled) {
  cursor: default;
  opacity: .72;
}

.layer-panel .light-switch input[role="switch"]:disabled {
  cursor: default;
}

.ground-look-note {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #9fc1d1;
}

.detail {
  position: absolute;
  z-index: 15;
  top: 72px;
  right: 12px;
  bottom: 80px;
  width: var(--detail-width);
  padding: 8px;
  border-radius: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a819777 transparent;
}

.detail-hero {
  height: clamp(150px,19dvh,212px);
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: #184a5a;
}

.detail-hero>.heritage-photo {
  position: absolute;
  inset: 0;
}

.detail-hero>.heritage-photo>svg {
  width: 78px;
  height: 78px;
  opacity: .45;
}

.detail-hero::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,#062638e8,transparent 62%);
}

.photo-count {
  position: absolute;
  z-index: 1;
  top: 11px;
  left: 11px;
  padding: 4px 7px;
  border: 1px solid #e0f1f34d;
  border-radius: 20px;
  color: #edf7f5;
  background: #072a3c99;
  font-size: 9px;
  backdrop-filter: blur(8px);
}

/* Tên di tích nằm trên ảnh (owner 2026-10-22): thay dòng "Di sản Hải An"; loại hình đã có trong phần thông tin bên dưới. */
.detail-hero>h2 {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 10px;
  margin: 0;
  color: #fff;
  line-height: 1.25;
  text-wrap: balance;
  text-shadow: 0 1px 2px #001523cc,0 2px 10px #00152399;
}

.detail-number {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  right: 14px;
  color: #fff2ce;
  font-size: 21px;
  font-weight: 500;
  text-shadow: 0 2px 10px #0005;
}

.detail-close {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #fff;
  background: #062b4699;
  border: 1px solid #daefff77;
  backdrop-filter: blur(8px);
}

.detail-close:hover {
  background: #063047;
}

.photo-strip {
  display: flex;
  gap: 5px;
  height: 40px;
  margin-top: 8px;
}

.photo-strip button {
  width: 45px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 5px;
}

.photo-strip button.active {
  border-color: #39d5f5;
}

.photo-strip .heritage-photo {
  border-radius: 3px;
}

.photo-strip>a {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  color: #8eb8ca;
  font-size: 7px;
  line-height: 1.6;
}

.photo-strip>a:hover {
  color: #d0eff9;
}

.detail-content {
  padding: 17px 8px 9px;
}

.detail h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.7px;
  line-height: 1.45;
  margin: 4px 0 8px;
}

.detail-content>p {
  font-size: 12px;
  line-height: 1.85;
  color: #bed3df;
  margin: 0 0 17px;
}

.story-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -7px 0 18px;
  color: #94becb;
  font-size: 10px;
  line-height: 1.6;
}

.story-source:hover,.tour-source:hover {
  color: #f2d498;
}

.tour-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: #a5c7ce;
  font-size: 10px;
}

.structure-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.structure-tabs button {
  font-size: 9px;
  border: 1px solid #4887a366;
  border-radius: 6px;
  padding: 8px;
  color: #adc8d6;
}

.structure-tabs button.active {
  background: #125d7c;
  border-color: #32c6e8;
  color: #e3f9ff;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
}

.primary-button,.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 11px 8px;
  min-height: 44px;
  font-size: 11px;
  font-weight: 600;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg,#049ce5,#0764bd);
  border: 1px solid #57c6ff;
  box-shadow: 0 3px 13px #007fdf25,inset 0 1px #a5edff3b;
}

.primary-button:hover {
  background: linear-gradient(135deg,#04b2ef,#137acb);
}

.primary-button>span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.primary-button small {
  font-size: 7px;
  font-weight: 400;
  color: #bfe5fc;
}

.secondary-button {
  background: linear-gradient(135deg,#dff5ff,#b7daee);
  color: #103b5e;
  border: 1px solid #dcf5ff;
  box-shadow: inset 0 1px #fff9;
}

.secondary-button:hover {
  background: #eefbff;
}

.detail-facts {
  margin: 12px 0 8px;
}

.detail-facts>div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid #82bad124;
  font-size: 10px;
  color: #a9c9d9;
}

.detail-facts svg {
  color: #c8e1ec;
}

.detail-facts>div>span {
  width: 55px;
  flex-shrink: 0;
}

.detail-facts strong {
  flex: 1;
  font-size: 10px;
  line-height: 1.7;
  font-weight: 400;
  color: #d8e9f3;
  white-space: pre-line;
}

.detail .location-note {
  font-size: 9px;
  line-height: 1.7;
  color: #cbb788;
  padding: 9px 10px;
  background: #b0863210;
  border-radius: 5px;
  margin: 0 0 15px;
}

.detail-sources {
  margin-top: 17px;
}

.detail-sources>.eyebrow {
  font-size: 8px;
}

.detail-sources a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.6;
  color: #8dd5ed;
}

.detail-sources a:hover {
  color: #d6f6ff;
}

.heritage-message {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 18px -1px 0;
  padding: 14px 9px;
  border-radius: 9px;
  color: #acd9e7;
  background: radial-gradient(ellipse at bottom left,#2285a047,transparent 75%),#10465e77;
  border: 1px solid #3b93b044;
}

.heritage-message>span {
  font-size: 10px;
  line-height: 1.9;
  font-style: italic;
}

.heritage-message strong {
  font-weight: 500;
  color: #d6eef5;
}

.toast {
  position: absolute;
  z-index: 60;
  bottom: 91px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px 14px 18px;
  max-width: calc(100vw - 30px);
  border: 1px solid #64b4d0;
  border-radius: 11px;
  background: #0a3550f7;
  box-shadow: 0 10px 30px #00152580;
  color: #e6f5fc;
  font-size: 12px;
  line-height: 1.7;
}

.toast>svg {
  color: #71ddfa;
}

.toast>span {
  min-width: 200px;
}

.empty-text {
  padding: 20px;
  font-size: 12px;
  color: #a7c8d6;
}

.empty-state {
  padding: 35px 18px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  color: #96becf;
}

.empty-state>svg {
  padding: 9px;
  width: 52px;
  height: 52px;
  background: #285e7355;
  border-radius: 50%;
}

.empty-state b {
  font-size: 13px;
  color: #dbedf5;
  font-weight: 500;
}

.empty-state p {
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
}

.empty-state button {
  font-size: 12px;
  color: #78ddf5;
  padding: 8px 12px;
  background: #14648655;
  border-radius: 7px;
}

.loading,.scene-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background: #082b4599;
  z-index: 5;
}

.loading strong,.scene-error strong {
  font-size: 15px;
  font-weight: 500;
  color: #e4f4fc;
}

.loading>span,.scene-error p {
  font-size: 11px;
  line-height: 1.8;
  color: #91bdcf;
  text-align: center;
}

.scene-error p {
  max-width: 340px;
}

.scene-error>svg {
  color: #a9dce8;
}

.scene-error button {
  border: 1px solid #31bee7;
  background: #17627f;
  border-radius: 7px;
  padding: 10px 20px;
  font-size: 12px;
}

.loading-ring {
  height: 42px;
  width: 42px;
  border: 2px solid #75d5ee1c;
  border-top-color: #5ad7f7;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.tour-tray {
  position: absolute;
  top: 72px;
  left: calc(var(--map-left) + (100% - var(--map-left) - var(--map-right))/2);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  width: min(440px,calc(100% - var(--map-left) - var(--map-right) - 92px));
  gap: 9px;
  padding: 13px 16px 12px;
  border-radius: 13px;
  border-color: #b9a37361;
  background: linear-gradient(145deg,#113b4bf2,#052638f7);
  z-index: 21;
}

.tour-heading,.tour-footer,.tour-playback {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-heading>.eyebrow {
  color: #dbbd87;
  font-size: 8px;
}

.tour-step {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #ffe3ad;
}

.tour-step>span {
  font-size: 9px;
  color: #86a7b7;
}

.tour-caption>strong {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: #f5f7ee;
}

.tour-caption>p {
  margin: 5px 0 0;
  font-size: 11px;
  color: #b0cbd7;
  line-height: 1.7;
}

.tour-footer {
  justify-content: space-between;
}

.tour-status {
  font-size: 9px;
  color: #93c7d0;
}

.is-paused .tour-status {
  color: #e2bf83;
}

.tour-playback {
  gap: 5px;
}

.tour-playback button {
  width: 31px;
  height: 30px;
}

.tour-playback button:disabled {
  opacity: .3;
  background: transparent;
}

.tour-pause {
  color: #ffe7b9;
  background: #d7ab5730;
  border: 1px solid #d9ba7259;
}

.tour-progress {
  display: flex;
  gap: 3px;
  width: 100%;
}

.tour-progress>span {
  flex: 1;
  height: 3px;
  background: #b2cbd426;
  overflow: hidden;
  border-radius: 3px;
}

.tour-progress i {
  display: block;
  height: 100%;
  background: #91bdc5;
  transform-origin: left;
}

.tour-progress .current i {
  background: #e6c081;
}

.modal-backdrop {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: #001a2bbb;
  backdrop-filter: blur(8px);
}

.source-modal {
  width: min(600px,100%);
  max-height: 88dvh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 27px;
  scrollbar-width: thin;
}

.source-modal h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.5px;
  margin: 8px 0 0;
}

.source-modal>p {
  font-size: 12px;
  line-height: 1.9;
  color: #a8c6d6;
}

.data-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 15px;
  margin: 24px 0;
}

.data-stats>div {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  background: #24617b33;
  border-radius: 9px;
}

.data-stats strong {
  font-size: 27px;
  font-weight: 500;
  color: #a0e6ef;
  letter-spacing: -1px;
}

.data-stats span {
  font-size: 10px;
  color: #b1cfdc;
  line-height: 1.6;
}

.quality-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid #ae955742;
  border-radius: 9px;
  background: #b0913020;
  color: #d3c594;
}

.quality-note>svg {
  margin-top: 2px;
}

.quality-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.9;
}

.source-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.source-link>span {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.source-link strong {
  font-size: 12px;
  font-weight: 500;
  color: #b6e1f0;
}

.source-link small {
  font-size: 10px;
  line-height: 1.7;
  color: #89afc2;
}

.source-link:hover strong {
  color: #e7faff;
}

.source-modal .source-footnote {
  font-size: 10px;
  color: #84a8bb;
}

.mobile-only,.mobile-list-button,.sheet-handle {
  display: none;
}

@media(min-width:1600px) {
  .app {
    --explorer-width: 280px;
    --detail-width: 340px;
  }
  .explorer-heading {
    padding: 16px 15px 0;
  }
  .explorer-subtitle {
    margin-left: 15px;
    font-size: 11px;
  }
  .destination {
    gap: 11px;
    padding: 9px 7px;
    min-height: 68px;
  }
  .destination-visual {
    width: 49px;
    height: 46px;
  }
  .destination-text strong {
    font-size: 13px;
  }
  .destination-text small {
    font-size: 10px;
  }
  .detail {
    padding: 10px;
  }
  .detail-content {
    padding: 18px 10px 12px;
  }
  .detail h2 {
    font-size: 25px;
  }
  .detail-content>p {
    font-size: 13px;
  }
  .detail-facts>div,.detail-facts strong,.detail-sources a {
    font-size: 11px;
  }
  .detail-hero {
    height: clamp(180px,21dvh,245px);
  }
  .header {
    gap: 24px;
    padding: 0 20px;
  }
  .brand-copy strong {
    font-size: 16px;
  }
  .brand-copy small {
    font-size: 11px;
  }
  .header-search {
    max-width: 390px;
  }
  .header-actions {
    gap: 17px;
  }
  .tour-button,.header-exhibition {
    font-size: 12px;
    padding: 0 18px;
  }
}

@media(min-width:1920px) {
  .app {
    --explorer-width: 304px;
    --detail-width: 360px;
  }
  .explorer-heading {
    padding-left: 18px;
    padding-right: 18px;
  }
  .explorer-subtitle {
    margin-left: 18px;
  }
  .destination-list {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media(max-width:1250px) and (min-width:1001px) {
  .header {
    gap: 17px;
    padding: 0 19px;
  }
  .brand-copy strong {
    font-size: 14px;
  }
  .brand-copy small {
    font-size: 9px;
  }
  .brand-mark {
    width: 38px;
    height: 42px;
  }
  .header-actions {
    gap: 8px;
  }
  .header-exhibition {
    padding: 0 9px;
  }
  .header-exhibition span {
    display: none;
  }
  .header-search {
    max-width: 300px;
  }
  .search-hint {
    display: none;
  }
  .has-detail .bottom-toolbar button {
    padding: 10px;
  }
  .has-detail .bottom-toolbar button>span {
    display: none;
  }
  .chat-button>span {
    display: none;
  }
  .chat-button {
    padding: 11px;
  }
  .has-detail .map-hint {
    display: none;
  }
  .has-detail .map-bottom {
    justify-content: flex-start;
  }
}

@media(max-width:1000px) {
  .app {
    min-height: 0;
  }
  .header {
    height: var(--header-height);
    padding: 0 12px;
    gap: 10px;
  }
  .brand {
    gap: 9px;
    min-width: 0;
    flex-shrink: 1;
  }
  .brand-mark {
    flex-shrink: 0;
    width: 33px;
    height: 38px;
    padding-top: 5px;
    border-radius: 11px 11px 18px 18px;
  }
  .brand-mark>svg {
    width: 25px;
    height: 25px;
  }
  .brand-logo {
    width: 36px;
    height: 36px;
  }
  .brand-copy {
    gap: 5px;
    min-width: 0;
  }
  .brand-copy strong {
    font-size: 10px;
    letter-spacing: -.25px;
    white-space: normal;
    max-width: 160px;
    line-height: 1.4;
  }
  .brand-copy strong>span {
    display: block;
    font-size: 14px;
  }
  /* Phone: the place line shows in full, "Hải Phòng" over "Bản đồ số 3D" (owner 2026-10-21). */
  .brand-copy small {
    display: flex;
    flex-direction: column;
    font-size: 8.5px;
    line-height: 1.35;
    letter-spacing: .1em;
  }
  .brand-copy small>.brand-dot {
    display: none;
  }
  .header-search,.header-exhibition,.language {
    display: none;
  }
  .header-actions {
    margin-left: auto;
    gap: 9px;
  }
  .tour-button {
    padding: 0;
    height: 31px;
    width: 31px;
  }
  .tour-button>span {
    display: none;
  }
  .mode-switch {
    padding: 2px;
  }
  .mode-switch button {
    padding: 6px 9px;
    font-size: 10px;
  }
  .map-area,.has-detail .map-area {
    left: 0;
    right: 0;
    top: var(--header-height);
    bottom: 22px;
  }
  .has-detail .map-area {
    bottom: calc(var(--detail-height) + 84px);
  }
  .north-control {
    right: 14px;
    top: 14px;
    gap: 4px;
  }
  .north-control>svg {
    width: 28px;
    height: 28px;
  }
  .scene-controls {
    right: 12px;
    bottom: 106px;
    padding: 2px;
    border-radius: 9px;
  }
  .scene-controls button {
    width: 34px;
    height: 38px;
  }
  .map-bottom {
    left: auto;
    right: 12px;
    bottom: 67px;
    gap: 5px;
  }
  .map-hint {
    font-size: 8px;
    gap: 5px;
  }
  .map-hint>svg {
    width: 12px;
  }
  .map-hint>span {
    gap: 5px;
  }
  .data-status {
    font-size: 8px;
    padding: 6px;
    gap: 5px;
  }
  .place-label {
    font-size: 9px;
  }
  .explorer {
    display: none;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 76px;
    width: auto;
    max-height: calc(100dvh - 148px);
    height: 72dvh;
    z-index: 40;
    border-radius: 18px;
    background: linear-gradient(145deg,#0e3c56fa,#042b43fc);
    box-shadow: 0 -15px 60px #00182780;
  }
  .explorer.mobile-open {
    display: flex;
  }
  .explorer-collapse,.explorer-reopen {
    display: none;
  }
  .sheet-handle {
    display: block;
    flex-shrink: 0;
    width: 31px;
    height: 3px;
    border-radius: 5px;
    background: #8ebdd069;
    margin: 8px auto 0;
  }
  .explorer-heading {
    padding: 8px 15px 0;
  }
  .explorer-heading .eyebrow {
    font-size: 8px;
  }
  .explorer h1 {
    font-size: 18px;
    margin-top: 0;
  }
  .explorer-subtitle {
    margin: 4px 15px 12px;
    font-size: 11px;
  }
  .mobile-only {
    display: grid;
  }
  .sidebar-search {
    display: flex;
    margin: 0 17px 13px;
    padding: 11px 12px;
    border-radius: 9px;
  }
  .sidebar-search input {
    font-size: 13px;
  }
  .filters {
    padding: 0 12px 12px;
    gap: 3px;
  }
  .filters button {
    font-size: 10px;
    padding: 7px 4px;
  }
  .list-heading {
    margin-top: 12px;
  }
  .destination {
    min-height: 62px;
    padding: 7px 9px;
    gap: 10px;
  }
  .destination-visual {
    width: 48px;
    height: 44px;
  }
  .destination-text strong {
    font-size: 13px;
  }
  .destination-text small {
    font-size: 10px;
    gap: 6px;
  }
  .explorer-footer {
    margin: 4px 13px 12px;
    padding: 12px;
  }
  .explorer-footer strong {
    font-size: 11px;
  }
  .explorer-footer small {
    font-size: 8px;
  }
  .bottom-toolbar,.has-detail .bottom-toolbar {
    bottom: 24px;
    left: 50%;
    padding: 2px;
    gap: 1px;
    border-radius: 10px;
  }
  .bottom-toolbar button {
    padding: 12px 11px;
  }
  .bottom-toolbar button>span {
    display: none;
  }
  .bottom-toolbar button>svg {
    width: 18px;
    height: 18px;
  }
  .toolbar-separator {
    height: 19px;
    margin: 0;
  }
  .mobile-list-button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    left: 12px;
    width: 44px;
    bottom: 24px;
    height: 44px;
    z-index: 42;
    background: linear-gradient(135deg,#1784ad,#07577c);
    border: 1px solid #7cd5ef;
    box-shadow: 0 4px 20px #00233b55,inset 0 1px #cffbff26;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 500;
  }
  .mobile-list-button>span {
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 1px 3px;
    border-radius: 4px;
    background: #82d6ee1c;
    font-size: 8px;
  }
  .mobile-list-button>svg {
    width: 18px;
  }
  .chat-button {
    width: 44px;
    height: 44px;
    padding: 0;
    bottom: 24px;
    right: 12px;
    border-radius: 12px;
  }
  .chat-button>span {
    display: none;
  }
  .attribution {
    left: 16px;
    bottom: 8px;
    font-size: 6px;
    gap: 5px;
  }
  .detail {
    top: auto;
    bottom: 76px;
    left: 10px;
    right: 10px;
    width: auto;
    height: var(--detail-height);
    z-index: 25;
    padding: 0 0 9px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(140deg,#0b3b53fa,#032a41fc);
  }
  .detail-header > .sheet-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .detail-hero {
    height: 100px;
    border-radius: 0;
  }
  .detail-hero > .heritage-photo::after {
    box-shadow: none;
  }
  .detail-number {
    font-size: 23px;
  }
  .detail-close {
    top: 9px;
    right: 9px;
  }
  .photo-strip {
    height: 34px;
  }
  .photo-strip button {
    width: 51px;
  }
  .photo-strip>a {
    font-size: 7px;
  }
  .detail-content {
    padding: 10px 17px 8px;
  }
  .detail h2 {
    font-size: 21px;
  }
  .detail-content>p {
    font-size: 12px;
  }
  .detail-actions {
    grid-template-columns: 1.15fr 1fr;
  }
  .primary-button,.secondary-button {
    font-size: 12px;
    min-height: 46px;
  }
  .primary-button small {
    font-size: 8px;
  }
  .detail-facts>div,.detail-facts strong {
    font-size: 11px;
  }
  .detail-facts>div>span {
    width: 60px;
  }
  .detail .location-note {
    font-size: 10px;
  }
  .detail-sources a {
    font-size: 11px;
  }
  .heritage-message>span {
    font-size: 11px;
  }
  .has-detail .scene-controls {
    top: 15px;
    bottom: auto;
    right: 16px;
  }
  .has-detail .north-control {
    display: none;
  }
  .has-detail .map-bottom {
    display: none;
  }
  .layer-panel,.has-detail .layer-panel {
    position: fixed;
    top: 72px;
    bottom: auto;
    right: 59px;
    z-index: 55;
    width: 219px;
    padding: 15px;
  }
  .layer-panel label {
    font-size: 12px;
  }
  .toast {
    bottom: 80px;
    width: calc(100% - 26px);
    font-size: 11px;
    padding: 12px;
  }
  .toast>span {
    min-width: 0;
  }
  .tour-tray {
    top: 70px;
    left: 12px;
    right: 65px;
    width: auto;
    transform: none;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px 8px;
    padding: 9px 10px;
  }
  .tour-heading,.tour-progress {
    grid-column: 1 / -1;
  }
  .tour-heading .icon-button {
    padding: 2px 4px;
  }
  .tour-caption {
    min-width: 0;
  }
  .tour-caption>strong {
    display: block;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tour-caption>p,.tour-caption>.tour-source,.tour-status {
    display: none;
  }
  .tour-playback {
    gap: 2px;
  }
  .tour-playback button {
    width: 27px;
    height: 27px;
  }
  .modal-backdrop {
    padding: 12px;
  }
  .source-modal {
    padding: 22px 17px;
    max-height: 86dvh;
  }
  .source-modal h2 {
    font-size: 19px;
  }
  .data-stats {
    gap: 8px;
  }
  .data-stats>div {
    padding: 10px 8px;
  }
  .data-stats strong {
    font-size: 21px;
  }
  .data-stats span {
    font-size: 8px;
  }
}

@media(max-height:730px) and (min-width:1001px) {
  .explorer-heading {
    padding-top: 10px;
  }
  .explorer-subtitle {
    margin-bottom: 12px;
  }
  .explorer-footer {
    padding: 10px;
  }
  .detail-hero {
    height: 112px;
  }
  .detail-content {
    padding-top: 10px;
  }
  .detail h2 {
    font-size: 20px;
  }
}

.attribution {
  flex-wrap: wrap;
  max-width: calc(100% - 36px);
  line-height: 1.5;
  row-gap: 1px;
}

@media(min-width:1001px) {
  .filters {
    gap: 2px;
  }
  .filters button {
    font-size: 9px;
    padding: 7px 4px;
  }
}

@media(max-width:1000px) {
  .attribution {
    font-size: 5.5px;
    column-gap: 4px;
    max-width: calc(100% - 32px);
    bottom: 6px;
  }
  .photo-strip>a {
    font-size: 7px;
  }
}

@media(max-width:370px) {
  .brand-copy strong {
    font-size: 10px;
    white-space: nowrap;
  }
  .brand-logo {
    width: 30px;
    height: 30px;
  }
  /* 320 px: the language button keeps only its flag so the name and place line fit in full. */
  .language-trigger>span,
  .language-trigger>svg {
    display: none;
  }
  .brand-copy small {
    letter-spacing: .06em;
  }
  .brand-copy strong>span {
    font-size: 13px;
  }
  .header {
    padding: 0 12px;
  }
  .header-actions {
    gap: 6px;
  }
}

/* Keep the tour below the focused pin and directly above the portrait detail sheet. */
@media(max-width:599px) and (orientation:portrait) {
  .has-detail .tour-tray {
    top: auto;
    bottom: calc(var(--detail-height) + 88px);
    left: 12px;
    right: 12px;
    gap: 6px 8px;
    padding: 8px 10px;
  }
}

/* Short landscape screens keep details alongside the scene instead of above the controls. */
@media(min-width:600px) and (max-width:1000px) and (max-height:600px) {
  .app {
    --map-right: 0px;
  }
  .has-detail {
    --map-right: 288px;
  }
  .has-detail .map-area {
    right: var(--map-right);
    bottom: 22px;
  }
  .detail {
    top: 70px;
    left: auto;
    right: 10px;
    bottom: 76px;
    width: 268px;
    height: auto;
  }
  .bottom-toolbar,.has-detail .bottom-toolbar {
    left: calc((100% - var(--map-right))/2);
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto!important;
    transition: none!important;
  }
  .loading-ring {
    animation: none;
  }
}

/* ======================================================================
   Bổ sung riêng cho Bandoso Hải An (không có trong bản gốc của đội 3D)
   ====================================================================== */
html,
body.hai-an-body {
  height: 100%;
}

body.hai-an-body {
  margin: 0;
  overflow: hidden;
  background: #062037;
}

.no-script {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  color: #e6f5fc;
  font-size: 14px;
  text-align: center;
}

/* Intro: ảnh lấy từ cấu hình Nền Globe (desktop/tablet/mobile) */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  height: 100dvh;
  display: block;
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s;
}

.intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-picture,
.intro-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Nền phủ kín màn hình theo tỷ lệ ảnh, giữ tâm khi cắt mép. */
.intro-image {
  object-fit: cover;
  object-position: center;
}

/* Keep live Vietnamese type aligned with the centered cover crop of each banner. */
@font-face {
  font-family: 'Itim';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/itim/Itim-Regular-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: 'Itim';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/itim/Itim-Regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.intro-type-canvas {
  --intro-canvas-width: max(100vw,177.7778dvh);
  --intro-canvas-height: max(100dvh,56.25vw);
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: var(--intro-canvas-width);
  height: var(--intro-canvas-height);
  display: none;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.intro-type-canvas.enabled-desktop {
  display: block;
}

.intro-type-canvas .intro-heading {
  position: absolute;
  left: 13.3%;
  top: 26%;
  width: 36.4%;
  color: #f6ebdd;
  font-family: 'Be Vietnam Pro',system-ui,sans-serif;
  font-style: normal;
  font-synthesis: none;
  text-align: center;
}

.intro-type-canvas .intro-eyebrow {
  margin: 0;
  color: #d8c6a6;
  font-size: calc(var(--intro-canvas-width) * .013);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .08em;
  white-space: nowrap;
}

.intro-type-canvas .intro-title {
  margin: calc(var(--intro-canvas-width) * .012) 0 0;
  color: #e9bd61;
  font-size: calc(var(--intro-canvas-width) * .08);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.intro-type-canvas .intro-subtitle {
  margin: calc(var(--intro-canvas-width) * .002) 0 0;
  color: #f6ebdd;
  font-family: 'Itim','Be Vietnam Pro',system-ui,sans-serif;
  font-size: calc(var(--intro-canvas-width) * .027);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .03em;
  white-space: nowrap;
  transform: none;
}

.intro-type-canvas .intro-heritage-art {
  position: absolute;
  left: -2%;
  top: 71%;
  width: 46%;
  height: 27%;
  display: block;
  object-fit: contain;
  object-position: left bottom;
  opacity: .78;
}

@media(max-width:1100px) {
  .intro-type-canvas .intro-heritage-art {
    display: none;
  }
}

@media(max-width:1100px) and (orientation:portrait) {
  .intro-type-canvas {
    --intro-canvas-width: max(100vw,65.6664dvh);
    --intro-canvas-height: max(100dvh,152.2849vw);
  }

  .intro-type-canvas.enabled-desktop,
  .intro-type-canvas.enabled-tablet,
  .intro-type-canvas.enabled-mobile {
    display: none;
  }

  .intro-type-canvas.enabled-tablet {
    display: block;
  }

  /* Trên máy thật, thanh địa chỉ/thanh công cụ trình duyệt làm màn hình thấp hơn ảnh nên ảnh cover bị cắt
     mép trên (nửa phần dư); đẩy cụm chữ xuống vừa đủ nằm trong vùng nhìn thấy, khi không bị cắt thì giữ nguyên. */
  .intro-type-canvas .intro-heading {
    --intro-heading-top: 9%;
    left: 14%;
    top: max(var(--intro-heading-top),calc((var(--intro-canvas-height) - 100dvh) / 2 + env(safe-area-inset-top,0px) + 24px));
    width: 72%;
    text-align: center;
  }

  .intro-type-canvas .intro-eyebrow {
    font-size: calc(var(--intro-canvas-width) * .023);
  }

  .intro-type-canvas .intro-title {
    margin-top: calc(var(--intro-canvas-width) * .028);
    font-size: calc(var(--intro-canvas-width) * .17);
    line-height: 1.05;
  }

  .intro-type-canvas .intro-subtitle {
    margin-top: calc(var(--intro-canvas-width) * .003);
    font-size: calc(var(--intro-canvas-width) * .055);
  }

}

@media(max-width:580px) and (orientation:portrait) {
  .intro-type-canvas {
    --intro-canvas-width: max(100vw,46.2085dvh);
    --intro-canvas-height: max(100dvh,216.4103vw);
  }

  .intro-type-canvas.enabled-desktop,
  .intro-type-canvas.enabled-tablet,
  .intro-type-canvas.enabled-mobile {
    display: none;
  }

  .intro-type-canvas.enabled-mobile {
    display: block;
  }

  .intro-type-canvas .intro-heading {
    --intro-heading-top: 9.5%;
    left: 12%;
    width: 76%;
  }

  .intro-type-canvas .intro-eyebrow {
    font-size: calc(var(--intro-canvas-width) * .025);
  }

  .intro-type-canvas .intro-title {
    margin-top: calc(var(--intro-canvas-width) * .028);
  }

  .intro-type-canvas .intro-subtitle {
    margin-top: calc(var(--intro-canvas-width) * .003);
    font-size: calc(var(--intro-canvas-width) * .06);
  }

}

.intro-content {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: max(20px,calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100% - 32px);
}

.intro-enter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  border: 1px solid #9be9ff;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(135deg,#0c8ad4,#005697);
  box-shadow: 0 0 0 6px #37d1f42b,0 12px 34px #00182c80;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  transition: box-shadow .4s, background .2s;
}

/* Tiến độ tải cảnh phía sau: nền nút sáng dần từ trái sang phải (--intro-progress 0..1). */
.intro-enter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#39d0f5,#7fe3ff);
  opacity: .42;
  transform: scaleX(var(--intro-progress,0));
  transform-origin: left center;
}

.intro-enter:hover {
  background: linear-gradient(135deg,#14a0ea,#0868b0);
}

.intro-enter.is-ready {
  box-shadow: 0 0 0 6px #37d1f44d,0 0 28px #37d1f470,0 12px 34px #00182c80;
}

.intro-enter.is-ready::before {
  opacity: .28;
}

/* Trạng thái tải chỉ dành cho trình đọc màn hình (người xem thấy qua thanh trên nút và tooltip). */
.intro-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media(max-width:600px) {
  .intro-content {
    bottom: max(64px,calc(env(safe-area-inset-bottom) + 56px));
  }

  .intro-enter {
    padding: 10px 18px;
    font-size: 13px;
  }
}

@media(max-height:450px) {
  .intro-content {
    bottom: max(12px,calc(env(safe-area-inset-bottom) + 8px));
  }

  .intro-enter {
    padding: 6px 16px;
    gap: 8px;
    font-size: 12px;
  }
}

/* Hai sân khấu 2D/3D dùng chung vùng bản đồ của giao diện Hải An.
   Hai class để thắng .mapboxgl-map { position: relative } của mapbox-gl.css (nạp sau). */
.map-area .map2d-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #4daba6;
}

.scene-stage,
.map2d-stage {
  transition: opacity .25s;
}

.stage-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.map2d-stage .mapboxgl-canvas {
  outline: none;
}

.map2d-stage .mapboxgl-ctrl-bottom-left {
  bottom: 30px;
}

.map2d-stage .mapboxgl-ctrl-bottom-right {
  bottom: 28px;
}

.map2d-stage .mapboxgl-ctrl-attrib {
  font-size: 9px;
}

.mode-2d .attribution-3d {
  display: none;
}

/* Marker 2D theo cùng phong cách marker 3D của Hải An */
.map-marker {
  position: relative;
  display: block;
  width: 28px;
  height: 36px;
  padding: 0;
  cursor: pointer;
}

.map-marker .marker-number {
  position: absolute;
  left: 0;
  top: 0;
}

.map-marker .marker-icon {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.map-marker .marker-name {
  position: absolute;
  left: 34px;
  top: 3px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-marker:hover,
.map-marker.selected,
.map-marker.is-hovered {
  z-index: 3;
}

.map-marker:hover .marker-number,
.map-marker.selected .marker-number,
.map-marker.is-hovered .marker-number {
  color: #66320a;
  background: linear-gradient(145deg,#ffe8b0,#ffc16a);
  box-shadow: 0 0 0 5px #fff2bd21,0 0 22px #efb04288;
  border-color: #fff4d8;
}

.map-marker.selected .marker-name,
.map-marker.is-hovered .marker-name {
  color: #ffdfac;
  border-color: #dbb76e88;
  background: #103b4dec;
}

.map-marker.name-hidden .marker-name {
  display: none;
}

/* Tên không còn chỗ trống (Mapbox2DAdapter.layoutLabels): ẩn cho tới khi zoom gần hơn; ghim đang chọn hoặc rê chuột vẫn hiện tên. */
.map-marker.label-collided:not(.selected):not(.is-hovered):not(:hover) .marker-name {
  visibility: hidden;
}

.map-marker.context-muted:not(:hover):not(.is-hovered):not(.selected) {
  opacity: .4;
}

/* Nhóm ghim 2D khi zoom xa (Mapbox2DAdapter.updateClusters): ghim trong nhóm ẩn, thay bằng vòng tròn đếm số
   địa điểm như mẫu Hải Phòng. Không đặt transform ở đây: Mapbox dùng transform để định vị marker. */
.map-marker.clustered {
  display: none;
}

.map-cluster {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #3db5ea;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 3px 10px #00213a59;
  cursor: pointer;
}

.map-cluster.is-large {
  width: 46px;
  height: 46px;
  font-size: 16px;
}

.map-cluster:hover,
.map-cluster.is-hovered {
  z-index: 3;
  background: #1f9fd8;
  box-shadow: 0 0 0 5px #3db5ea40,0 3px 12px #00213a73;
}

.map-cluster.context-muted:not(:hover):not(.is-hovered) {
  opacity: .55;
}

/* Bảng lớp: nút lớp mang phong cách Hải An, ở 2D dùng để đổi lớp bản đồ nền */
.layer-section-title {
  margin: 4px 0 8px;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #89acbd;
}

.basemap-list {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
  margin-bottom: 6px;
}

.basemap-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 5px;
  border: 1px solid #5c9fbd33;
  border-radius: 9px;
  color: #cfe3ed;
  background: #163c536b;
  font-size: 11px;
  text-align: left;
}

.basemap-option img,
.basemap-option .basemap-thumb {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 6px;
  object-fit: cover;
  background: linear-gradient(145deg,#244e5b,#133441);
}

.basemap-option.active {
  border-color: #35d7fd;
  box-shadow: inset 0 0 0 1px #35d7fd;
  color: #fff;
}

.basemap-option:hover:not(.active) {
  background: #1f526b;
}

/* Lớp phủ tour VR360 / bài viết, giữ nguyên trạng thái bản đồ phía sau */
.vr-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #020f19;
}

.vr-overlay[hidden] {
  display: none;
}

/* VR360 toàn màn hình: tên di tích, nút "Bản đồ di sản" và các nút thao tác nằm trong viewer (giao diện Hải An,
   viewer/css/hai-an-skin.css). Nút .vr-back dưới đây chỉ là nút dự phòng, đặt trùng chỗ nút của viewer, hiện
   khi tour đang tải hoặc khi viewer không tự vẽ nút (tour ngoài, lỗi) và ẩn khi viewer báo đã sẵn sàng. */
.vr-overlay iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020f19;
}

.vr-back {
  position: absolute;
  z-index: 2;
  top: calc(16px + env(safe-area-inset-top));
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 10px;
  border: 1px solid #36bfe080;
  border-radius: 999px;
  color: #f0f7fc;
  background: linear-gradient(145deg,#0b3148ee,#031d30f5);
  box-shadow: inset 0 0 12px #1caada14, 0 4px 14px #00172540;
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.vr-back:hover {
  border-color: #37d1f4;
  background: linear-gradient(145deg,#0f4260f2,#042840f7);
}

.vr-overlay.has-tour-ui .vr-back {
  display: none;
}

@media (max-width: 768px) {
  .vr-back {
    top: calc(10px + env(safe-area-inset-top));
    left: 10px;
    height: 36px;
    padding: 0 10px 0 8px;
  }

  .vr-back span {
    display: none;
  }
}

.vr-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #cfe8f3;
  font-size: 13px;
  pointer-events: none;
}

.vr-overlay.is-loaded .vr-loading {
  display: none;
}

.admin-banner {
  position: absolute;
  z-index: 30;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 9px 14px;
  border: 1px solid #64b4d0;
  border-radius: 9px;
  color: #e6f5fc;
  background: #0a3550f7;
  font-size: 12px;
  text-align: center;
}

.destination-text .outside-scene {
  color: #e1bb7d;
}

/* Ngôn ngữ đang chọn và menu VI/EN gọn trong thanh trên. */
.header.language-menu-open {
  z-index: 45;
}

.language-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.language-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #36bfe0a1;
  border-radius: 22px;
  background: #00284099;
  box-shadow: inset 0 0 12px #1caada14;
  font-size: 11px;
  font-weight: 600;
  color: #edf8ff;
  white-space: nowrap;
}

.language-trigger:hover,
.language-trigger[aria-expanded="true"] {
  background: #0b6483;
  border-color: #52e3ff;
}

.language-switch img {
  display: block;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #ffffff40;
  pointer-events: none;
}

.language-trigger>svg {
  width: 12px;
  height: 12px;
  color: #a8d7e8;
}

.language-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 140px;
  max-width: calc(100vw - 24px);
  padding: 4px;
  border: 1px solid #54bdd77a;
  border-radius: 12px;
  background: #082b45fa;
  box-shadow: 0 8px 24px #00162666;
}

.language-menu[hidden] {
  display: none;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #b9d7e5;
  text-align: left;
  white-space: nowrap;
}

.language-option img {
  width: 24px;
  height: 16px;
}

.language-option>svg {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: #b2f1ff;
}

.language-option:hover {
  background: #164b66;
  color: #fff;
}

.language-option[aria-checked="true"] {
  background: #0b6483;
  color: #fff;
}

.language-trigger:focus,
.language-option:focus {
  outline: none;
}

.language-trigger:focus-visible,
.language-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px #7ee5fa;
}

.language-trigger:disabled,
.language-option:disabled {
  cursor: wait;
  opacity: .65;
}

@media(max-width:1000px) {
  .language-trigger {
    gap: 5px;
    height: 31px;
    padding: 0 7px;
  }
}

/* 3D: bầu trời ban ngày gần như trắng sau header. Chỉ viền tối sát quanh chữ (không phủ mờ bản đồ) để logo,
   tiêu đề và dòng nhỏ đọc được trên mọi bầu trời. */
.mode-3d .header .brand .brand-name,
.mode-3d .header .brand .brand-copy small {
  color: #fff;
  text-shadow: 0 0 1px #001523,0 0 2px #001523e6,0 1px 3px #001523cc;
}

/* Bản đồ 2D luôn hướng bắc lên trên: la bàn không có tác dụng (về toàn cảnh đã có ở thanh công cụ). */
.mode-2d .north-control {
  display: none;
}

/* Header nổi trên bản đồ: chỉ các cụm điều khiển có nền, khoảng trống cho phép kéo bản đồ. */
.header {
  background: transparent;
  pointer-events: none;
}

.header > .brand,
.header > .header-search,
.header-actions > * {
  pointer-events: auto;
}

.header .brand .brand-name {
  font-weight: 700;
  letter-spacing: -.2px;
  color: #f6fbff;
  text-shadow: 0 1px 2px #001523, 0 0 6px #001523cc;
}

.mode-2d .header .brand .brand-name {
  color: #10384e;
  text-shadow: 0 1px 0 #ffffffef, 0 0 5px #ffffffcc;
}

.header .tour-button,
.header .header-exhibition,
.header .language-trigger {
  background: #052b42e6;
  box-shadow: inset 0 0 12px #1caada14, 0 4px 12px #00172526;
  backdrop-filter: blur(8px);
}

.header .tour-button:hover,
.header .tour-button.active,
.header .header-exhibition:hover,
.header .language-trigger:hover,
.header .language-trigger[aria-expanded="true"] {
  background: #0b6483;
}

/* Bản đồ 2D/3D phủ kín màn hình, kể cả phía sau header. .map-area giữ các vị trí tiêu đề/nút
   bên dưới header; setViewInsets tính phần bị che để camera canh giữa vùng bản đồ nhìn thấy. */
.map-area .scene-stage,
.map-area .map2d-stage {
  position: fixed;
  inset: 0;
}

.attribution {
  padding: 3px 8px;
  border-radius: 6px;
  background: #032136a8;
  backdrop-filter: blur(4px);
}

.attribution:empty {
  display: none;
}

/* ======================================================================
   Bố cục toàn màn hình (sau khi bỏ khung viền). Desktop: lề 16px đồng nhất.
   Mobile giữ đúng số đo của hai-an (ngăn kéo dưới, thanh công cụ cách đáy 24px), cộng vùng an toàn.
   ====================================================================== */
.map-area {
  top: var(--header-height);
  bottom: 0;
}

@media(min-width:1001px) {
  .explorer,
  .explorer-reopen {
    top: calc(var(--header-height) + 12px);
  }
  .explorer {
    bottom: 16px;
  }
  /* Panel chi tiết bên phải, cùng mép trên với danh sách; cao theo nội dung, tối đa tới trên thanh công cụ rồi cuộn bên
     trong (owner 2026-10-22). */
  .detail {
    top: calc(var(--header-height) + 12px);
    bottom: auto;
    max-height: calc(100% - var(--header-height) - 12px - 76px);
  }
  .detail .detail-scroll {
    flex: 0 1 auto;
  }
  /* Vùng bản đồ bắt đầu cách mép phải danh sách đúng 12px (bằng lề ngoài); khi thu gọn thì cách mép
     màn hình 12px, thẳng với nút "Di tích". Tiêu đề, chú giải và logo bản đồ bám mép đó. */
  .app {
    --map-left: calc(var(--explorer-width) + 24px);
  }
  .app.explorer-collapsed {
    --map-left: 12px;
  }
  /* Thanh công cụ canh giữa màn hình, sát đáy. */
  .bottom-toolbar {
    left: 50%;
    bottom: 16px;
  }
  .chat-button {
    right: 16px;
    bottom: 16px;
  }
  .tour-tray {
    top: calc(var(--header-height) + 12px);
    left: 50%;
  }
  .toast {
    bottom: 80px;
  }
  /* Bảng lớp mở bên trái cụm nút, thẳng mép trên. */
  .layer-panel {
    top: 12px;
    right: 54px;
    bottom: auto;
  }
}

/* Cụm điều khiển bản đồ ở góc trên phải, chung một khung: la bàn (chỉ 3D), phóng to, thu nhỏ, lớp hiển thị.
   Góc dưới phải chỉ còn nút chat. */
.map-controls {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 4px;
  display: flex;
  flex-direction: column;
  padding: 3px;
  border: 1px solid #ccecff;
  border-radius: 11px;
  background: linear-gradient(145deg,#effaff,#b3dce9);
  box-shadow: 0 6px 24px #00172e66;
}

.map-controls .scene-controls {
  position: static;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* La bàn là nút đầu của khung, cùng cỡ với nút phóng to; vạch ngăn như giữa thu nhỏ và lớp hiển thị. */
.map-controls .north-control {
  position: relative;
  inset: auto;
  width: 32px;
  height: 34px;
  margin-bottom: 5px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #173e59;
}

.map-controls .north-control::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -3px;
  height: 1px;
  background: #4d8fab44;
}

.map-controls .north-control:hover {
  color: #00658f;
  background: #8ccde499;
}

.map-controls .north-control svg {
  width: 22px;
  height: 22px;
  filter: none;
  stroke-width: 1.65;
}

.mode-2d .map-controls .north-control {
  display: none;
}

/* Logo Mapbox và nút bản quyền "i" nằm cùng một hàng, thẳng mép trái và mép đáy với danh sách. */
.map2d-stage .mapboxgl-ctrl-bottom-left {
  left: var(--map-left);
  bottom: 16px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
}

.map2d-stage .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
  float: none;
  clear: none;
  margin: 0;
}

.map2d-stage .mapboxgl-ctrl-bottom-right {
  bottom: 12px;
}

/* Ẩn logo Mapbox và nút bản quyền "i" trên nền 2D theo yêu cầu (như bandoso_haiphong);
   ghi nguồn Mapbox / OpenStreetMap nằm trong bảng "Nguồn" (nút ⓘ của thanh công cụ). */
.map2d-stage .mapboxgl-ctrl-logo,
.map2d-stage .mapboxgl-ctrl-attrib {
  display: none !important;
}

@media(max-width:1000px) {
  .bottom-toolbar,
  .has-detail .bottom-toolbar,
  .mobile-list-button,
  .chat-button {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .detail,
  .explorer {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .toast {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
  /* Cùng hàng với tiêu đề (top 15px của hai-an), thẳng mép phải với nút chat. */
  .map-controls {
    top: 15px;
    right: 12px;
    padding: 2px;
    border-radius: 9px;
  }
  .map-controls .north-control {
    width: 34px;
    height: 38px;
  }
  .has-detail .map-controls .north-control {
    display: none;
  }
  .map2d-stage .mapboxgl-ctrl-bottom-left {
    left: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Popup chi tiết trên màn hình dọc: nâng mép trên và dành thêm chiều cao cho ảnh di tích. */
@media(max-width:1000px) and (orientation:portrait) {
  .app {
    --detail-height: min(52dvh, 440px);
  }
  .detail-hero {
    height: clamp(140px, 22dvh, 180px);
  }
}

/* Ghim 2D/3D không hiện số thứ tự (dữ liệu Bandoso không có thứ tự cố định): icon danh mục hoặc icon đình
   chùa nằm giữa phần tròn của ghim. */
.marker-number > svg {
  width: 15px;
  height: 15px;
  margin-top: -2px;
}

.scene-marker .marker-number > .marker-icon {
  width: 20px;
  height: 20px;
  margin-top: -2px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

/* An uploaded category marker is already a complete pin, including its tip. */
:is(.map-marker, .scene-marker) .marker-number:has(> .marker-icon--pin) {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

:is(.map-marker, .scene-marker) .marker-number:has(> .marker-icon--pin)::after {
  display: none;
}

.map-marker .marker-icon--pin,
.scene-marker .marker-number > .marker-icon--pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 36px;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #082a4055);
}

:is(.map-marker, .scene-marker):is(:hover, .selected, .is-hovered) .marker-icon--pin {
  filter: drop-shadow(0 0 5px #ffc569aa);
}

/* Nút đóng (X): khung vuông/tròn đều, dấu X đúng tâm. */
.detail-close {
  padding: 0;
}

/* Khung và nút đóng giữ nguyên vị trí; chỉ ảnh và nội dung bên trong cuộn. */
.detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail[hidden] {
  display: none;
}

.detail-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  height: 0;
}

.detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: inherit;
  scrollbar-color: inherit;
}

@media(max-width:1000px) {
  .detail-scroll {
    scrollbar-width: none;
  }
  .detail-scroll::-webkit-scrollbar {
    display: none;
  }
  .detail-header .detail-close {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
  }
  .detail-header .detail-close > svg {
    width: 16px;
    height: 16px;
  }
}

.search button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.search button:hover {
  background: #29657f1f;
}

@media(max-width:1000px) {
  .tour-heading .icon-button {
    padding: 2px;
  }
}

/* Logo upload trong Cài đặt/Globe thay cho biểu tượng mặc định, giữ đúng tỉ lệ ảnh. */
.brand-logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 42px;
  max-width: 180px;
  object-fit: contain;
}

@media(max-width:1000px) {
  .brand-logo {
    height: 38px;
    max-width: 120px;
  }
}

/* Tiêu đề di sản: một dòng trên desktop, tối đa hai dòng trên màn hẹp. */
.brand-copy strong.brand-name {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media(max-width:1000px) {
  .brand-copy strong.brand-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* Trợ lý di sản (ui/chat.js): khung chat mở phía trên nút chat ở góc dưới phải; khi panel chi tiết đang mở
   thì khung dời sang trái panel để vừa hỏi vừa xem địa điểm. Dưới 1000px khung phủ vùng bản đồ. */
.chat-panel {
  position: absolute;
  z-index: 25;
  right: 18px;
  bottom: 86px;
  width: min(372px, calc(100vw - 36px));
  height: min(560px, calc(100dvh - var(--header-height) - 110px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
}

.chat-panel[hidden] {
  display: none;
}

.has-detail .chat-panel {
  right: calc(var(--detail-width) + 24px);
}

.chat-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  border-bottom: 1px solid var(--line);
}

.chat-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid #b2e4ff;
  border-radius: 10px;
  background: linear-gradient(140deg,#138edf,#035391);
  color: #f0fbff;
}

.chat-heading-copy {
  flex: 1;
  min-width: 0;
}

.chat-heading h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.3px;
}

.chat-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.chat-heading .icon-button:disabled {
  opacity: .35;
  background: none;
}

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  scrollbar-width: thin;
  scrollbar-color: #4a819777 transparent;
}

.chat-message {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.chat-message.bot {
  align-self: flex-start;
  color: #e3f3fb;
  background: #0d3f5ccc;
  border: 1px solid #4fb3d633;
  border-bottom-left-radius: 4px;
}

.chat-message.user {
  align-self: flex-end;
  color: #f0fbff;
  background: linear-gradient(140deg,#138edf,#035391);
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}

.chat-message.chat-error,
.chat-message .chat-error {
  color: #ffd0c4;
}

.chat-message.chat-error {
  border-color: #ff8a7a55;
}

.chat-message>:first-child {
  margin-top: 0;
}

.chat-message>:last-child {
  margin-bottom: 0;
}

.chat-message p {
  margin: 0 0 .6em;
}

.chat-message ul,
.chat-message ol {
  margin: .3em 0 .6em;
  padding-left: 18px;
}

.chat-message li+li {
  margin-top: .25em;
}

.chat-message h1,
.chat-message h2,
.chat-message h3,
.chat-message h4 {
  margin: .7em 0 .35em;
  font-size: 13px;
  font-weight: 600;
}

.chat-message strong {
  font-weight: 600;
  color: #f4fbff;
}

.chat-message a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-message a.chat-place {
  font-weight: 600;
  text-decoration-style: dotted;
}

.chat-message a:hover {
  color: #9debff;
}

.chat-message code {
  padding: 1px 4px;
  border-radius: 4px;
  background: #021a2b99;
  font-size: 11.5px;
}

.chat-message table {
  border-collapse: collapse;
  margin: .4em 0 .7em;
  font-size: 11.5px;
}

.chat-message th,
.chat-message td {
  padding: 4px 7px;
  border: 1px solid #4fb3d644;
  text-align: left;
}

.chat-message hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: .7em 0;
}

.chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}

.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fd8ef;
  animation: chat-typing 1.2s infinite ease-in-out;
}

.chat-typing i:nth-child(2) {
  animation-delay: .15s;
}

.chat-typing i:nth-child(3) {
  animation-delay: .3s;
}

@keyframes chat-typing {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 8px;
  border-top: 1px solid var(--line);
}

.chat-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #43a7ca69;
  border-radius: 10px;
  background: #021b2d99;
  color: #f0f7fc;
  font-size: 13px;
}

.chat-form input::placeholder {
  color: #7fa6b8;
}

.chat-form input:focus-visible {
  outline: 0;
  border-color: #6ce1ff;
}

.chat-send {
  display: grid;
  place-items: center;
  width: 40px;
  flex-shrink: 0;
  border: 1px solid #b2e4ff;
  border-radius: 10px;
  background: linear-gradient(140deg,#138edf,#035391);
  color: #f0fbff;
}

.chat-send:hover {
  background: #0c92d2;
}

.chat-send:disabled {
  opacity: .45;
}

.chat-note {
  margin: 0;
  padding: 0 14px 10px;
  color: #7fa6b8;
  font-size: 9.5px;
  text-align: center;
}

@media(max-width:1000px) {
  .chat-panel,
  .has-detail .chat-panel {
    top: calc(var(--header-height) + 12px);
    left: 12px;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
  }
  /* Dưới 16px iOS tự phóng to trang khi chạm vào ô nhập. */
  .chat-form input {
    font-size: 16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .chat-typing i {
    animation: none;
    opacity: .7;
  }
}

/* Hướng dẫn sử dụng (nút "?" của thanh công cụ): hai cột như mẫu Đà Nẵng — giao diện chính bên trái, bản đồ &
   điều khiển bên phải; dưới 700px xếp thành một cột. Cuối bảng là đường vào "Nguồn tư liệu & bản quyền". */
.guide-modal {
  width: min(900px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 22px 28px 18px;
  scrollbar-width: thin;
  scrollbar-color: #4a819777 transparent;
}

.guide-heading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  margin-bottom: 18px;
}

.guide-heading h2 {
  margin: 0;
  padding: 0 40px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
}

.guide-heading .icon-button {
  position: absolute;
  top: 0;
  right: -6px;
}

.guide-body {
  display: grid;
  grid-template-columns: minmax(220px, 270px) 1fr;
}

.guide-column {
  padding: 2px 24px 6px 0;
}

.guide-column+.guide-column {
  padding: 2px 0 6px 24px;
  border-left: 1px solid var(--line);
}

.guide-column>.eyebrow {
  display: block;
  margin-bottom: 12px;
}

.guide-list,
.guide-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  color: #e3f3fb;
  font-size: 12.5px;
  line-height: 1.4;
}

.guide-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #5fc4e44d;
  border-radius: 10px;
  background: #0f4a6a99;
  color: #bdeeff;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 18px 12px;
}

.guide-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #e3f3fb;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
}

.guide-grid .guide-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

.guide-mode {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Cùng kiểu vòng tròn nhóm ghim trên bản đồ 2D (.map-cluster). */
.guide-cluster {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #3db5ea;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.guide-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.guide-footer:not(:has(.powered-by)) {
  justify-content: center;
}

.guide-sources {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  color: #a8d4e6;
  font-size: 11.5px;
}

.guide-sources:hover {
  color: #e3f6ff;
  background: #70bcd035;
}

@media(max-width:700px) {
  .guide-modal {
    padding: 18px 16px 14px;
    max-height: 86dvh;
  }
  .guide-body {
    grid-template-columns: 1fr;
  }
  .guide-column {
    padding: 0 0 14px;
  }
  .guide-column+.guide-column {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .guide-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 14px 8px;
  }
}

/* "Powered by VR360" (powered-by.png, chữ trắng trên nền trong suốt) như bản Đà Nẵng: góc dưới trái của intro,
   chân danh sách di tích và cuối hướng dẫn sử dụng. Để mờ cho nhẹ mắt, rõ dần khi rê chuột. */
.powered-by {
  display: inline-flex;
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .18s;
}

.powered-by:hover,
.powered-by:focus-visible {
  opacity: .9;
}

.powered-by img {
  display: block;
  width: 120px;
  height: auto;
}

.intro-powered {
  position: absolute;
  z-index: 1;
  left: max(16px, calc(env(safe-area-inset-left) + 12px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
}

.intro-powered img {
  width: 96px;
  filter: drop-shadow(0 1px 2px #00000099);
}

.explorer-powered {
  justify-content: center;
  padding: 9px 0 11px;
  border-top: 1px solid var(--line);
}

.explorer-powered img {
  width: 112px;
}