.thp-bkk-atlas {
  --thp-bkk-night: #062f2d;
  --thp-bkk-mint: #dff1ea;
  --thp-bkk-coral: #a94732;
  margin: 0 0 86px;
  color: var(--thp-ink);
}

.thp-bkk-atlas button,
.thp-bkk-atlas input,
.thp-bkk-atlas select { font: inherit; }

.thp-bkk-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr);
  gap: 36px;
  align-items: end;
  margin-bottom: 32px;
}

.thp-bkk-intro h2 {
  max-width: 850px;
  margin: 0;
  color: var(--thp-forest-deep);
  font-size: clamp(34px, 4.7vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.thp-bkk-intro-copy { margin: 18px 0 0; color: #4d625e; font-size: 18px; }
.thp-bkk-method { margin: 0; padding: 18px 20px; border: 1px solid #d9e4df; border-radius: 18px; background: #f3f8f5; color: #45615c; font-size: 13px; line-height: 1.55; }
.thp-bkk-method strong { display: block; margin-bottom: 4px; color: var(--thp-forest); font-size: 14px; }

.thp-bkk-related-links { display: flex; align-items: baseline; gap: 14px; margin: 0 0 24px; padding: 15px 18px; border-right: 4px solid #c88b2c; border-radius: 14px; background: #f8f4eb; }
.thp-bkk-related-links > span { flex: 0 0 auto; color: #5d4a2e; font-size: 12px; font-weight: 900; }
.thp-bkk-related-links p { margin: 0; color: #465b57; font-size: 14px; line-height: 1.65; }
.thp-bkk-related-links a { font-weight: 900; }

.thp-bkk-controls {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) repeat(3, minmax(150px, .75fr)) auto;
  gap: 12px;
  align-items: end;
  min-inline-size: 0;
  margin: 0;
  padding: 22px;
  border: 1px solid #d8e2de;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(7, 47, 45, .08);
}

.thp-bkk-field { min-width: 0; display: grid; gap: 8px; }
.thp-bkk-field > span,
.thp-bkk-budget-line > label { color: #536965; font-size: 12px; font-weight: 900; }
.thp-bkk-field select { width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid #cbd9d4; border-radius: 12px; color: var(--thp-ink); background: #f8faf9; }
.thp-bkk-budget-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.thp-bkk-budget-line output { color: var(--thp-forest); font-weight: 900; }
.thp-bkk-field input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--thp-teal); }
.thp-content .thp-bkk-reset,
.thp-content .thp-bkk-reset:hover,
.thp-content .thp-bkk-reset:focus { min-height: 46px; padding: 9px 16px; border: 1px solid #b8cbc4 !important; border-radius: 12px; color: var(--thp-forest) !important; background: #edf5f2 !important; box-shadow: none !important; font-weight: 900; cursor: pointer; }
.thp-content .thp-bkk-field select:focus-visible,
.thp-content .thp-bkk-field input:focus-visible,
.thp-content .thp-bkk-reset:focus-visible,
.thp-bkk-related-links a:focus-visible { outline: 3px solid #0b3f3c !important; outline-offset: 3px !important; }
.thp-bkk-controls[hidden],
.thp-bkk-result-bar[hidden],
.thp-bkk-cost[hidden] { display: none !important; }
.thp-bkk-result-bar { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 4px 10px; }
.thp-bkk-result-bar strong { color: var(--thp-forest); }
.thp-bkk-result-bar span { color: var(--thp-muted); font-size: 13px; }

.thp-bkk-workspace { display: grid; grid-template-columns: minmax(360px, .86fr) minmax(0, 1.14fr); gap: 22px; align-items: start; }
.thp-bkk-map-shell { position: sticky; top: 24px; padding: 18px; border-radius: 26px; color: #fff; background: var(--thp-bkk-night); box-shadow: 0 24px 65px rgba(5, 40, 38, .22); }
.thp-bkk-map-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 5px 5px 16px; }
.thp-bkk-map-head h3 { margin: 0; color: #fff; font-size: 23px; }
.thp-bkk-map-head p { margin: 5px 0 0; color: #bcd4cf; font-size: 12px; }
.thp-bkk-atlas:not(.is-interactive) .thp-bkk-map-head p { display: none; }
.thp-bkk-map-key { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.thp-bkk-map-key span { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #dbe9e5; font-size: 10px; }

.thp-bkk-map {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 25% 22%, rgba(92, 184, 166, .22), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(216, 110, 77, .15), transparent 28%),
    repeating-linear-gradient(0deg, transparent 0 49px, rgba(255, 255, 255, .055) 50px),
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(255, 255, 255, .055) 50px),
    linear-gradient(145deg, #0a4844, #062c2a);
}

.thp-bkk-map::before,
.thp-bkk-map::after { content: ""; position: absolute; pointer-events: none; }
.thp-bkk-map::before { width: 74%; height: 54%; inset: 25% 12% auto auto; border: 2px solid rgba(228, 188, 107, .22); border-radius: 48% 38% 44% 35%; transform: rotate(-12deg); }
.thp-bkk-map::after { width: 150%; height: 26px; inset: 54% -24% auto auto; border-top: 5px solid rgba(118, 204, 187, .46); border-bottom: 2px solid rgba(118, 204, 187, .25); transform: rotate(-23deg); }
.thp-bkk-rail { position: absolute; z-index: 1; height: 4px; border-radius: 999px; opacity: .7; transform-origin: center; }
.thp-bkk-rail.is-bts { width: 112%; top: 52%; right: -7%; background: #86c56a; transform: rotate(-24deg); }
.thp-bkk-rail.is-mrt { width: 90%; top: 47%; right: 4%; background: #63a8d9; transform: rotate(66deg); }
.thp-bkk-rail-label { position: absolute; z-index: 2; padding: 3px 7px; border-radius: 999px; background: rgba(4, 35, 33, .86); color: #e1eeea; font-size: 9px; font-weight: 900; }
.thp-bkk-rail-label.is-bts { top: 61%; right: 15%; }
.thp-bkk-rail-label.is-mrt { top: 21%; right: 58%; }

.thp-content .thp-bkk-marker,
.thp-content .thp-bkk-marker:hover,
.thp-content .thp-bkk-marker:focus {
  position: absolute;
  z-index: 4;
  top: var(--thp-map-y);
  left: var(--thp-map-x);
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  border-radius: 999px;
  color: #fff !important;
  background: var(--thp-bkk-coral) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28) !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.thp-content .thp-bkk-marker:hover,
.thp-content .thp-bkk-marker.is-selected { z-index: 7; color: #17332f !important; background: #f2b34f !important; transform: translate(-50%, -50%) scale(1.16); }
.thp-content .thp-bkk-marker:focus-visible { outline: 3px solid #f3b54c !important; outline-offset: 3px !important; }
.thp-content .thp-bkk-marker:disabled { opacity: .78; cursor: default; }
.thp-content .thp-bkk-marker:disabled:hover { z-index: 4; color: #fff !important; background: var(--thp-bkk-coral) !important; transform: translate(-50%, -50%); }
.thp-content .thp-bkk-marker[hidden] { display: none !important; }

.thp-bkk-area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.thp-bkk-area-card { min-width: 0; overflow: hidden; border: 1px solid #d9e3df; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(9, 58, 54, .07); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.thp-bkk-area-card.is-selected { border-color: #8f5a0a; box-shadow: 0 18px 45px rgba(133, 94, 34, .15); transform: translateY(-2px); }
.thp-bkk-area-card[hidden] { display: none !important; }
.thp-bkk-area-card > header { padding: 23px 23px 18px; }
.thp-bkk-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.thp-bkk-area-card h3 { margin: 0; color: var(--thp-forest-deep); font-size: 23px; line-height: 1.15; }
.thp-bkk-area-card h3 small { display: block; margin-top: 6px; color: #5c6d69; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.thp-bkk-corridor { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #38645e; background: var(--thp-bkk-mint); font-size: 10px; font-weight: 900; }
.thp-bkk-fit { margin: 14px 0 0; color: #425854; font-size: 14px; line-height: 1.55; }
.thp-bkk-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 23px 20px; }
.thp-bkk-prices div { padding: 12px; border-radius: 13px; background: #f3f7f5; }
.thp-bkk-prices dt { color: #596a66; font-size: 10px; font-weight: 900; }
.thp-bkk-prices dd { margin: 3px 0 0; color: var(--thp-forest); font-size: 14px; font-weight: 900; }
.thp-bkk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 23px 20px; list-style: none; }
.thp-bkk-tags li { padding: 4px 8px; border: 1px solid #dfe6e3; border-radius: 999px; color: #60716e; font-size: 10px; }
.thp-bkk-area-card details { border-top: 1px solid #e3e9e6; }
.thp-bkk-area-card summary { padding: 14px 23px; color: var(--thp-forest); background: #fafcfb; font-size: 13px; font-weight: 900; cursor: pointer; }
.thp-bkk-area-card summary:focus-visible,
.thp-bkk-district-directory > summary:focus-visible,
.thp-bkk-atlas-sources details > summary:focus-visible { outline: 3px solid #0b3f3c !important; outline-offset: -3px !important; }
.thp-bkk-area-detail { display: grid; gap: 14px; padding: 19px 23px 23px; color: #4b605c; font-size: 13px; line-height: 1.55; }
.thp-bkk-area-detail p { margin: 0; }
.thp-bkk-area-detail strong { display: block; margin-bottom: 3px; color: var(--thp-forest-deep); }

.thp-bkk-district-directory { margin-top: 26px; border: 1px solid #d9e3df; border-radius: 20px; background: #f7faf8; }
.thp-bkk-district-directory > summary { padding: 18px 22px; color: var(--thp-forest); font-weight: 900; cursor: pointer; }
.thp-bkk-district-directory > p { margin: 0; padding: 0 22px 16px; color: #596c68; font-size: 13px; }
.thp-bkk-district-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 22px 22px; list-style: none; }
.thp-bkk-district-list li { min-width: 0; padding: 9px 10px; border-radius: 10px; background: #fff; color: #405651; font-size: 12px; }
.thp-bkk-district-list small { display: block; overflow: hidden; color: #60706c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.thp-bkk-area-card bdi,
.thp-bkk-district-list bdi,
.thp-bkk-station-label bdi { unicode-bidi: isolate; }

.thp-bkk-planning { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; margin-top: 62px; }
.thp-bkk-cost,
.thp-bkk-lease { padding: 30px; border-radius: 24px; }
.thp-bkk-cost { color: #fff; background: linear-gradient(145deg, #0d5651, #062f2d); box-shadow: 0 20px 50px rgba(7, 47, 45, .18); }
.thp-bkk-cost h3,
.thp-bkk-lease h3 { margin: 0; font-size: 28px; line-height: 1.18; }
.thp-bkk-cost h3 { color: #fff; }
.thp-bkk-cost > p { color: #c8ded9; }
.thp-bkk-cost-field { display: grid; gap: 8px; margin-top: 24px; color: #d8e8e4; font-size: 12px; font-weight: 900; }
.thp-bkk-cost input { width: 100%; min-height: 44px; margin: 0; accent-color: #e9b75b; }
.thp-bkk-cost input:focus-visible { outline: 3px solid #f3b54c !important; outline-offset: 3px !important; }
.thp-bkk-cost output { color: #fff; font-size: 22px; }
.thp-bkk-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.thp-bkk-cost-grid div { padding: 15px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 15px; background: rgba(255, 255, 255, .06); }
.thp-bkk-cost-grid span,
.thp-bkk-cost-grid strong { display: block; }
.thp-bkk-cost-grid span { color: #bcd4cf; font-size: 11px; }
.thp-bkk-cost-grid strong { margin-top: 4px; color: #fff; font-size: 19px; }
.thp-bkk-cost small { display: block; margin-top: 16px; color: #a9c6c0; font-size: 11px; line-height: 1.5; }
.thp-bkk-lease { border: 1px solid #e3d8c5; background: #fbf5e9; }
.thp-bkk-lease h3 { color: #533f23; }
.thp-bkk-lease > p { color: #715d40; }
.thp-bkk-legal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.thp-bkk-legal-list li { padding: 16px; border: 1px solid rgba(125, 92, 41, .18); border-radius: 15px; background: rgba(255, 255, 255, .65); color: #5f4c31; font-size: 13px; line-height: 1.5; }
.thp-bkk-legal-list strong { display: block; margin-bottom: 5px; color: #49381f; font-size: 14px; }
.thp-bkk-cost[hidden] + .thp-bkk-lease { grid-column: 1 / -1; }
.thp-bkk-atlas-sources { margin-top: 30px; padding: 20px 24px; border-top: 1px solid #dce4e1; border-bottom: 1px solid #dce4e1; }
.thp-bkk-atlas-sources details > summary { color: var(--thp-forest); font-weight: 900; cursor: pointer; }
.thp-bkk-atlas-sources ul { columns: 2; gap: 32px; margin: 16px 0 0; padding-right: 20px; }
.thp-bkk-atlas-sources li { break-inside: avoid; margin-bottom: 7px; color: #5c6d69; font-size: 12px; }
.thp-bkk-atlas-sources a { font-weight: 800; }

@media (max-width: 1080px) {
  .thp-bkk-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thp-bkk-reset { width: 100%; }
  .thp-bkk-workspace { grid-template-columns: minmax(310px, .8fr) minmax(0, 1.2fr); }
  .thp-bkk-area-grid { grid-template-columns: 1fr; }
}

@media (min-width: 821px) and (max-width: 1230px) {
  .thp-bkk-map-shell { top: 100px; }
}

@media (max-width: 820px) {
  .thp-bkk-atlas { margin-bottom: 64px; }
  .thp-bkk-intro,
  .thp-bkk-workspace,
  .thp-bkk-planning { grid-template-columns: 1fr; }
  .thp-bkk-map-shell { position: relative; top: auto; }
  .thp-bkk-map { min-height: 500px; }
  .thp-bkk-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thp-bkk-district-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .thp-bkk-controls,
  .thp-bkk-area-grid,
  .thp-bkk-legal-list { grid-template-columns: 1fr; }
  .thp-bkk-controls { padding: 17px; }
  .thp-bkk-related-links { display: block; }
  .thp-bkk-related-links > span { display: block; margin-bottom: 4px; }
  .thp-bkk-intro h2 { font-size: 35px; }
  .thp-bkk-map-shell { margin-inline: -8px; padding: 10px; border-radius: 20px; }
  .thp-bkk-map-head { display: block; }
  .thp-bkk-map-key { justify-content: start; margin-top: 10px; }
  .thp-bkk-map { min-height: 430px; }
  .thp-content .thp-bkk-marker,
  .thp-content .thp-bkk-marker:hover,
  .thp-content .thp-bkk-marker:focus { min-width: 32px; min-height: 32px; padding: 0 6px; font-size: 9px; }
  .thp-bkk-cost,
  .thp-bkk-lease { padding: 23px; }
  .thp-bkk-atlas-sources ul { columns: 1; }
  .thp-bkk-district-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .thp-bkk-area-card,
  .thp-bkk-marker { transition: none !important; }
}