/* map-floating.css — dua `/seed-map/` va `/3d/` sang Google-inspired Minimalist Floating UI.
 *
 * Luat chung cho moi web tool cua mang 9Minecraft ([[feedback_web_tool_google_floating_ui]]):
 *   nen phang xam rat nhat · moi khoi la THE NOI tren bong mem, KHONG vien · bo goc 28/16/12
 *   nut vien thuoc 999px · mot mau nhan duy nhat · phan cap bang co chu va mau xam
 *   tieu de muc 11px IN HOA gian chu .9px · co sang/toi
 *
 * Tep nay NAP SAU CUNG, sau `seedmap.css`, `main-*.css` va `viewer3d-*.css`. No khong sua
 * ba tep kia: ba tep do deu viet theo BIEN, nen doi bien la doi gan het dien mao.
 *
 * ⛔ KHONG doi bat ky `id`/`class` nao trong than ung dung: bo JS tim phan tu theo dung ten
 *    do. Day la tep CSS — chi them luat, khong bao gio doi cau truc.
 *
 * ⛔ DO SANG/TOI O DAY CHI CO HAI TRANG THAI, khong phai ba. Bo JS cua ung dung tu giai quyet
 *    "theo he thong" ngay khi tai: no doc `ez-theme`, neu trong thi doc `prefers-color-scheme`,
 *    roi DAT HAN `data-theme=dark` hoac BO thuoc tinh. Nen o day:
 *        khong co thuoc tinh  =>  SANG        [data-theme=dark]  =>  TOI
 *    Dung thu them `@media(prefers-color-scheme:dark)` nhu cac trang khac cua site: luc do
 *    nguoi chon SANG tren may dat che do toi se ra nua sang nua toi.
 *
 * ⛔ Khoi SANG phai du do dac hieu de thang `:root:not([data-theme])` trong `seedmap.css`
 *    (khoi `@media (prefers-color-scheme: light)` cua no). Mot `:root` tran KHONG du —
 *    cung do dac hieu thi luat sau thang, nhung `:root:not(...)` cao hon mot bac. Vi the
 *    danh sach chon duoi day phai giu ca ba dang.
 */

/* ───────────────────────────── 1. bo bien ───────────────────────────── */

:root,
:root:not([data-theme]),
:root[data-theme="light"] {
  /* nen va mat phang */
  --bg: #f1f3f4;            /* seedmap.css */
  --s1: #ffffff;
  --s2: #f1f3f4;
  --s3: #e8eaed;
  --bd: transparent;
  --bd2: rgba(60, 64, 67, .12);
  --fg: #1f1f1f;
  --mut: #5f6368;
  --dim: #80868b;
  --acc: #1a73e8;
  --acc-ink: #ffffff;
  --acc-deep: #1557b0;
  --blue: #1a73e8;
  --gold: #b06000;
  --ad: #f1f3f4;
  --ad-bd: transparent;
  --cta: #1a73e8;
  --cta-hover: #1b66c9;
  --cta-ink: #ffffff;

  /* hai tang bong mem — dung het cho moi the noi */
  --e1: 0 1px 2px rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --e2: 0 1px 3px rgba(60, 64, 67, .30), 0 4px 8px 3px rgba(60, 64, 67, .15);
  --shadow: var(--e1);

  /* main-*.css (ung dung ban do) */
  --bg-app: #f1f3f4;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f3f4;
  --bg-surface-3: #e8eaed;
  --bg-overlay: rgba(255, 255, 255, .97);
  --border-subtle: transparent;
  --border: rgba(60, 64, 67, .12);
  --border-strong: rgba(60, 64, 67, .18);
  --text-primary: #1f1f1f;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
  --text-disabled: #9aa0a6;
  --accent: #1a73e8;
  --accent-hover: #1b66c9;
  --accent-active: #1557b0;
  --accent-bg: #e8f0fe;
  --accent-bg-hover: #d2e3fc;
  --accent-border: rgba(26, 115, 232, .32);
  --accent-ring: rgba(26, 115, 232, .25);
  --success: #188038;
  --success-bg: #e6f4ea;
  --warning: #b06000;
  --warning-bg: #fef7e0;
  --error: #c5221f;
  --error-bg: #fce8e6;
  --info: #1a73e8;
  --info-bg: #e8f0fe;
  --shadow-xs: 0 1px 2px rgba(60, 64, 67, .18);
  --shadow-sm: 0 1px 2px rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --shadow-md: 0 1px 3px rgba(60, 64, 67, .30), 0 4px 8px 3px rgba(60, 64, 67, .15);
  --shadow-lg: 0 2px 6px rgba(60, 64, 67, .28), 0 10px 26px 4px rgba(60, 64, 67, .16);
  --shadow-glow: 0 0 0 3px var(--accent-ring);

  /* viewer3d-*.css (ban 3D) */
  --bg-2: #e8eaed;
  --panel: rgba(255, 255, 255, .95);
  --muted: #5f6368;
  --accent-2: #1a73e8;

  /* bo goc: 28 khoi chinh · 16 khoi con · 12 anh · 999 nut */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --r: 16px;
  --r-lg: 28px;
  --r-img: 12px;
  --pill: 999px;

  /* chu */
  --font-ui: "Google Sans Text", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ⛔ OpenLayers co bo bien RIENG (`--ol-*`) khong lien quan toi bo cua ung dung, va mac dinh
     la `--ol-background-color: white`. Quen doi la o che do TOI, hai dai o le ban do (cho
     chua co o ban do) sang trung len giua nen toi — khong co gi bao, phai nhin moi thay. */
  --ol-background-color: #f1f3f4;
  --ol-accent-background-color: #e8eaed;
  --ol-subtle-background-color: rgba(60, 64, 67, .18);
  --ol-partial-background-color: rgba(255, 255, 255, .80);
  --ol-foreground-color: #1f1f1f;
  --ol-subtle-foreground-color: #5f6368;
  --ol-brand-color: #1a73e8;
}

:root[data-theme="dark"] {
  --bg: #0f1115;
  --s1: #1b212b;
  --s2: #242b36;
  --s3: #2d3542;
  --bd: transparent;
  --bd2: rgba(255, 255, 255, .14);
  --fg: #e8eaed;
  --mut: #9aa0a6;
  --dim: #80868b;
  --acc: #8ab4f8;
  --acc-ink: #0f1115;
  --acc-deep: #aecbfa;
  --blue: #8ab4f8;
  --gold: #fdd663;
  --ad: #1b212b;
  --ad-bd: transparent;
  --cta: #8ab4f8;
  --cta-hover: #aecbfa;
  --cta-ink: #0f1115;

  --e1: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 3px 1px rgba(0, 0, 0, .35);
  --e2: 0 1px 3px rgba(0, 0, 0, .6), 0 4px 8px 3px rgba(0, 0, 0, .35);
  --shadow: var(--e1);

  --bg-app: #0f1115;
  --bg-surface: #1b212b;
  --bg-surface-2: #242b36;
  --bg-surface-3: #2d3542;
  --bg-overlay: rgba(27, 33, 43, .97);
  --border-subtle: transparent;
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .20);
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted: #80868b;
  --text-disabled: #5f6368;
  --accent: #8ab4f8;
  --accent-hover: #aecbfa;
  --accent-active: #d2e3fc;
  --accent-bg: #1f2a3a;
  --accent-bg-hover: #27364a;
  --accent-border: rgba(138, 180, 248, .34);
  --accent-ring: rgba(138, 180, 248, .30);
  --success: #81c995;
  --success-bg: #1c2b21;
  --warning: #fdd663;
  --warning-bg: #2c2415;
  --error: #f28b82;
  --error-bg: #2d1b1a;
  --info: #8ab4f8;
  --info-bg: #1f2a3a;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 3px 1px rgba(0, 0, 0, .35);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, .6), 0 4px 8px 3px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .6), 0 10px 26px 4px rgba(0, 0, 0, .45);

  --bg-2: #242b36;
  --panel: rgba(27, 33, 43, .95);
  --muted: #9aa0a6;
  --accent-2: #8ab4f8;

  --ol-background-color: #0f1115;
  --ol-accent-background-color: #242b36;
  --ol-subtle-background-color: rgba(255, 255, 255, .18);
  --ol-partial-background-color: rgba(15, 17, 21, .80);
  --ol-foreground-color: #e8eaed;
  --ol-subtle-foreground-color: #9aa0a6;
  --ol-brand-color: #8ab4f8;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-app);
  color: var(--text-primary);
}

/* ─────────────────── 2. dai + thanh dieu huong noi ─────────────────── */

.fl-back {
  background: var(--bg-surface);
}

/* ⛔ Chi dung MOT cach can le, giong het `.fl-top` va `#seedbar`. Dung dong thoi `max-width`
   + `margin:auto` + `padding` la cong ca hai, chu lech sang phai so voi logo ben duoi. */
.fl-back .fl-in {
  padding: 0 max(16px, calc((100% - 1500px) / 2));
  display: flex;
}

.fl-back a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  color: var(--text-primary);
  font: 600 13px/1.2 var(--font-ui);
  text-decoration: none;
}

.fl-back a:hover { color: var(--accent); }
.fl-back svg { width: 15px; height: 15px; stroke-width: 2.4; flex: none; fill: none; stroke: currentColor; }

.fl-top {
  padding: 10px max(16px, calc((100% - 1500px) / 2)) 0;
  background: var(--bg-app);
}

/* ⛔ Thanh nay mang `id="site-nav"`: bo JS cua ung dung nghe su kien bam TREN CHINH no de
   chuyen 2D/3D (uy nhiem su kien). Doi id la nut 2D/3D chet cam — van bam duoc, van sang
   len, nhung ban do khong doi che do. */
#site-nav.fl-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 10px 0 16px;
  background: var(--bg-surface);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--e1);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

#site-nav.fl-nav .fl-logo { display: flex; align-items: center; flex: none; }
#site-nav.fl-nav .fl-logo img { height: 30px; width: auto; display: block; }

#site-nav.fl-nav .fl-links { display: flex; gap: 2px; margin-left: 6px; min-width: 0; }

#site-nav.fl-nav .fl-links a {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font: 600 13.5px/1 var(--font-ui);
  white-space: nowrap;
  text-decoration: none;
}

#site-nav.fl-nav .fl-links a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
#site-nav.fl-nav .fl-links a[aria-current] { background: var(--accent-bg); color: var(--accent); }

#site-nav.fl-nav .fl-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* nut 2D / 3D — vien thuoc, mot mau nhan */
#site-nav.fl-nav .viewseg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
}

#site-nav.fl-nav .view-mode-btn {
  min-width: 46px;
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: 700 13px/1 var(--font-ui);
  letter-spacing: .2px;
  cursor: pointer;
}

#site-nav.fl-nav .view-mode-btn:hover { color: var(--text-primary); }

#site-nav.fl-nav .view-mode-btn.active {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--e1);
}

/* nut sang/toi — dung dung cap mat troi / mat trang cua 9minecraft.net */
#site-nav.fl-nav .fl-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  cursor: pointer;
  flex: none;
}

#site-nav.fl-nav .fl-theme:hover { background: var(--bg-surface); box-shadow: var(--e1); }

/* ⛔ Luat co kich thuoc nay KHONG duoc dat `display`. No la `#site-nav.fl-nav .fl-theme svg`
   — mot id + ba muc nua — nen manh hon han cac luat an/hien ben duoi; de `display:block` o
   day la CA HAI icon cung hien, mat troi va mat trang nam canh nhau trong nut. Da gap that.
   An/hien do rieng cac luat duoi quyet dinh, va chung mang cung tien to de khong ai thang ai. */
#site-nav.fl-nav .fl-theme svg { width: 20px; height: 20px; pointer-events: none; }

/* sang thi hien mat troi, toi thi hien mat trang (xem chu thich do sang/toi o dau tep) */
#site-nav.fl-nav .fl-theme .ic-sun { display: block; }
#site-nav.fl-nav .fl-theme .ic-moon { display: none; }
:root[data-theme="dark"] #site-nav.fl-nav .fl-theme .ic-sun { display: none; }
:root[data-theme="dark"] #site-nav.fl-nav .fl-theme .ic-moon { display: block; }

@media (max-width: 860px) {
  #site-nav.fl-nav { height: 52px; gap: 6px; padding: 0 8px 0 12px; }
  #site-nav.fl-nav .fl-logo img { height: 26px; }
  #site-nav.fl-nav .fl-links { display: none; }
}

@media (max-width: 460px) {
  #site-nav.fl-nav .view-mode-btn { min-width: 40px; padding: 0 11px; }
}

/* ──────────────────── 3. thanh cong cu (#seedbar) ──────────────────── */

#seedbar {
  --sb-h: 40px;
  margin: 10px max(16px, calc((100% - 1500px) / 2)) 0;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 0;
  border-bottom: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--e1);
}

#seedbar select,
#seedbar input,
#seedbar button {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

#seedbar select:hover,
#seedbar .sb-icon:hover,
#seedbar .sb-dp:hover {
  border-color: transparent;
  background: var(--bg-surface);
  box-shadow: var(--e1);
  color: var(--text-primary);
}

#seedbar .sb-seg {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  padding: 3px;
  height: var(--sb-h);
  overflow: visible;
}

#seedbar .sb-seg-btn {
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 0 14px;
  font-weight: 700;
}

#seedbar .sb-seg-btn + .sb-seg-btn { border-left: 0; }

#seedbar .sb-seg-btn.active {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--e1);
}

/* o nhap seed — chu don khoang cach, nut sao chep nam trong o */
#seedbar #seedInput {
  padding: 0 44px 0 16px;
  font-family: var(--font-mono);
  letter-spacing: .2px;
}

#seedbar #seedInput:focus {
  border-color: transparent;
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px var(--accent-bg), var(--e1);
}

#seedbar .sb-copy {
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: transparent;
}

#seedbar .sb-copy:hover { background: var(--bg-surface-3); color: var(--accent); }

/* ⛔ Mau chu o day phai la `--acc-ink`, KHONG phai `--accent-ink`: bien thu hai khong he ton
   tai, nen `var(--accent-ink,#fff)` luon roi ve trang — o che do toi thanh chu trang tren
   nen xanh nhat `#8ab4f8`, gan nhu khong doc duoc. */
#seedbar .sb-go {
  padding: 0 22px;
  background: var(--accent);
  color: var(--acc-ink);
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: .2px;
}

#seedbar .sb-go:hover { background: var(--accent-hover); filter: none; box-shadow: var(--e1); }

#seedbar .sb-icon.on,
#seedbar .sb-icon[aria-expanded="true"] {
  border-color: transparent;
  background: var(--accent-bg);
  color: var(--accent);
}

#seedbar .sb-dp.on {
  border-color: transparent;
  background: var(--warning-bg);
  color: var(--text-primary);
}

#seedbar .sb-dp.on svg { color: var(--warning); }

#seedbar :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* trinh don va bang lich su — the noi, khong vien */
#seedbar .sb-menu,
#seedbar .seed-history-panel {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  padding: 8px;
}

#seedbar .sb-menu button { border-radius: var(--radius-md); }
#seedbar .sb-menu button:hover { background: var(--bg-surface-2); }
#seedbar .sb-menu .sb-menu-field { border-bottom: 1px solid var(--border); }
#seedbar .sb-menu-field select { border-radius: var(--radius-pill); }

/* ───────────────────────── 4. khung ban do ───────────────────────── */

#map-viewport { background: var(--bg-app); }

#map-viewport #map {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 9999px var(--bg-app), var(--e2);
}

#map-viewport #map-overlay-clip { border-radius: var(--radius-xl); }

body.fullscreen #map-viewport #map,
body.fullscreen #map-viewport #map-overlay-clip {
  border-radius: 0;
  box-shadow: none;
}

/* khung 3D nhung phai co cung dang the noi nhu khung ban do 2D */
body.view-3d:not(.fullscreen) #view-3d-iframe,
body.view-3d.threed-windowed #view-3d-iframe {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--e2);
  background: var(--bg-app);
}

/* ───── 4b. khay cong cu duoi ban do: mot the noi, the chon dang vien thuoc ───── */

#map-dock {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--e1);
  padding-top: 0;
  overflow: hidden;
}

#map-tabs {
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

#map-tabs .map-tab {
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  margin-bottom: 0;
  padding: 10px 6px 9px;
  letter-spacing: .9px;
}

#map-tabs .map-tab:hover { background: var(--bg-surface-2); }

#map-tabs .map-tab.active {
  border: 0;
  background: var(--accent-bg);
  color: var(--accent);
  margin-bottom: 0;
  padding: 10px 6px 9px;
}

#map-tabs .map-tab.active .map-tab-ic { color: var(--accent); }

#map-panels {
  border: 0;
  border-radius: 0;
  background: var(--bg-surface);
}

/* the chon cau truc / sinh quyen — chip phang, khong vien */
.structure-item,
#rail-structures-grid .structure-item.rail-tile,
#map-panels .structures-modal-grid .structure-item {
  border: 0 !important;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  box-shadow: none;
}

.structure-item:hover,
#rail-structures-grid .structure-item.rail-tile:hover,
#map-panels .structures-modal-grid .structure-item:hover {
  background: var(--bg-surface-3);
}

.structure-item.active,
#rail-structures-grid .structure-item.rail-tile.active,
#map-panels .structures-modal-grid .structure-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  box-shadow: none !important;
}

/* ─────────────── 5. the noi trong ban do: bang, hop, nhan ─────────────── */

/* ⛔ Chi ha vien tren cac MAT PHANG NOI. Khong dung `*{border:0}`: cac duong ke ben trong
   bang va danh sach cung dung `border`, xoa het la cac hang dinh lien nhau. */
.modal-box,
.shortcuts-box,
.biomes-modal-box,
.settings-modal-box,
.finder-tips-box,
.datapack-popover,
.map-panel-card,
#tooltip,
#status-flash,
#welcome-banner,
.sm-toast,
.sm-marker-popup,
.sm-hover,
.sm-sidebar {
  border: 0 !important;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.modal-box h2,
.modal-box h3 {
  border-bottom: 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  letter-spacing: -.2px;
}

.modal-box {
  font-family: var(--font-ui);
  color: var(--text-primary);
  padding: 22px 24px;
}

.modal-box kbd {
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.modal-close {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}

.modal-close:hover { background: var(--bg-surface-3); color: var(--text-primary); }

/* nut tron tren ban do (phong to, dinh huong, toan man hinh) */
.map-ctl,
#fullscreen-corner,
.ol-zoom button,
.ol-control button {
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: var(--bg-overlay) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--e1);
}

.ol-control { background: transparent !important; }

/* tieu de muc: 11px in hoa, gian chu .9px, mau xam */
.sb-group-label,
.map-panel-title,
.sm-sidebar-title,
.legend-title,
.panel-label {
  font: 700 11px/1.3 var(--font-ui) !important;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

/* ──────────── 6. phan noi dung duoi ban do: cac the noi ──────────── */

.sm-below { background: var(--bg-app); }

.sm-below .sm-pop,
.sm-below .sm-guide {
  margin: 0 auto 22px;
  padding: 26px clamp(18px, 3vw, 34px) 30px;
  background: var(--bg-surface);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--e1);
}

.sm-below .sm-pop { max-width: 1500px; }

/* ⛔ Khoi huong dan la VAN XUOI, khong phai luoi the. De the rong 1500px thi chu chay het
   trong 72ch con nua phai cua the bo trong — nhin ro la loi bo cuc. Gioi han o do rong doc
   duoc, can giua tren nen phang. */
.sm-below .sm-guide { max-width: 980px; }

.sm-below h2,
.sm-below h3 {
  font-family: var(--font-ui);
  color: var(--text-primary);
  letter-spacing: -.3px;
}

.sm-below h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; margin: 26px 0 12px; }
.sm-below h2:first-child { margin-top: 0; }
.sm-below h3 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.sm-below p { color: var(--text-secondary); max-width: 72ch; }

.sm-below code {
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: 500 13.5px/1.5 var(--font-mono);
}

.sm-below #sm-pop-title {
  font: 700 11px/1.3 var(--font-ui);
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* cac buoc huong dan — so thu tu trong vien thuoc, the noi, khong vien
   ⛔ Bo `max-width` ma bo CSS cu dat theo `ch`: cac buoc la THE, khong phai van xuoi, nen gioi
      han theo so ky tu lam chung chi rong 632px nam lech trong the 980px. */
.sm-below ol {
  list-style: none;
  counter-reset: buoc;
  padding: 0;
  margin: 0;
  max-width: none;
}

.sm-below ol li {
  counter-increment: buoc;
  position: relative;
  margin: 8px 0;
  padding: 13px 16px 13px 52px;
  background: var(--bg-surface-2);
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: 14.5px;
}

.sm-below ol li::before {
  content: counter(buoc);
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font: 700 12px/1 var(--font-ui);
}

:root[data-theme="dark"] .sm-below ol li::before { color: #0f1115; }

/* the seed goi y */
.sm-below .pop-card {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
  box-shadow: none;
  overflow: hidden;
}

.sm-below .pop-card:hover { background: var(--bg-surface); box-shadow: var(--e2); transform: translateY(-2px); }
.sm-below .pop-card-img { border-bottom: 0; border-radius: 0; }
.sm-below .pop-card-meta { border-top: 1px solid var(--border); background: transparent; }
.sm-below .pop-card-seed { font-family: var(--font-mono); }
.sm-below .pop-card-copy { border: 0; border-radius: var(--radius-pill); background: var(--bg-surface-3); }

.sm-below .sm-pop-all,
.sm-below .seeds-all {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 18px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  font: 700 14.5px/1 var(--font-ui);
}

:root[data-theme="dark"] .sm-below .sm-pop-all,
:root[data-theme="dark"] .sm-below .seeds-all { color: #0f1115; }

.sm-below .sm-pop-all:hover,
.sm-below .seeds-all:hover { background: var(--accent-hover); filter: none; transform: none; box-shadow: var(--e1); }

/* ⛔ Trong `seedmap.css`, khoi `@media (max-width:600px)` nam TRUOC cac luat `.pop-card*` o
   cap goc. Cung do dac hieu thi luat SAU thang, nen tren dien thoai the seed van an theo so
   do cua man hinh rong: `.pop-card-meta` giu `padding:14px 18px` va nut sao chep giu 36px,
   cong lai vuot qua cot 156px — nut tran ra ngoai the 40px. Dat lai o day, sau tat ca. */
@media (max-width: 600px) {
  .sm-below .sm-pop,
  .sm-below .sm-guide { padding: 20px 14px 24px; }
  .sm-below .pop-card-meta { padding: 9px 11px; gap: 8px; }
  .sm-below .pop-card-body { padding: 10px 11px 8px; }
  .sm-below .pop-card-seed { font-size: 12px; }
  .sm-below .pop-card-copy { width: 30px; height: 30px; }
  .sm-below ol li { padding: 12px 14px 12px 46px; }
  .sm-below ol li::before { left: 11px; width: 24px; height: 24px; }
}

/* ───────────────────────── 7. ban 3D ───────────────────────── */

.sm-sidebar { font-family: var(--font-ui); }
.sm-sidebar-header { border-bottom: 1px solid var(--border); }

.sm-sidebar-toggle,
.sm-edge-tab,
.sm-edge-tab-mini {
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  background: var(--bg-overlay) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--e1);
}

.sm-edge-tab:hover,
.sm-edge-tab-mini:hover,
.sm-sidebar-toggle:hover { background: var(--bg-surface) !important; box-shadow: var(--e2); }

.sm-structures-grid button,
.sm-sidebar-actions button,
#find-biome-btn {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

.sm-structures-grid button:hover,
.sm-sidebar-actions button:hover,
#find-biome-btn:hover { background: var(--bg-surface-3); }

#find-biome-select,
#edition-select,
#dimension-select,
#seed-input {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

#seed-input { font-family: var(--font-mono); }

.sm-hover-coord,
.sm-marker-popup-coord { font-family: var(--font-mono); color: var(--text-secondary); }
.sm-hover-biome,
.sm-marker-popup-name { color: var(--text-primary); font-weight: 600; }

.sm-seedcard {
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.sm-seedcard-brand { font: 700 11px/1.3 var(--font-ui); letter-spacing: .9px; text-transform: uppercase; color: var(--text-muted); font-style: normal; }
.sm-seedcard-tld { color: var(--accent); font-style: normal; }
.sm-seedcard-row input,
.sm-seedcard-row select,
.sm-seedcard-row button { border: 0; border-radius: var(--radius-pill); background: var(--bg-surface-2); color: var(--text-primary); }

/* ⛔ Luat goc dat `background:var(--accent)!important;color:#04200a!important` — mau chu la
   xanh ret gan den, hop voi mau nhan cu mau xanh la. Voi mau nhan xanh duong cua ta no thanh
   chu den tren nen xanh. Phai ghi de ca hai, cung `!important`. */
.sm-seedcard-random { background: var(--accent) !important; color: var(--acc-ink) !important; border: 0 !important; border-radius: var(--radius-pill); font-weight: 700; }
.sm-seedcard-random:hover { background: var(--accent-hover) !important; filter: none; }

/* ─── 7b. khi mo `/3d/` truc tiep: khung dieu huong NOI tren khung canh 3D ───
   ⛔ `#world-canvas` chiem ca khung nhin (`position:fixed;inset:0`). De khung dieu huong o
      the dong binh thuong la no nam DUOI canvas — nguoi dung khong thay gi, con chan trang
      thi loang thoang xuyen qua mat dat. Phai cho khung noi len tren, va bo chan trang di:
      mot khung xem 3D toan man hinh khong co cho cho chan trang. */
body.trang-3d .fl-back,
body.trang-3d .ft { display: none; }

body.trang-3d .fl-top {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  background: transparent;
  pointer-events: none;
}

body.trang-3d #site-nav.fl-nav {
  width: auto;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}

/* the seed cua ban 3D nam goc duoi phai — day no len khoi vien duoi mot chut */
body.trang-3d .sm-seedcard { right: 16px; bottom: 16px; }

/* Trong iframe, nen phai TRONG SUOT de trang cha lo ra duoi khung bo goc 28px.
   `body.embed{background:transparent}` cua ung dung da lam viec nay — chi can dung
   `body` o khoi 1 phia tren ghi de len no. */
body.embed { background: transparent; }

/* ⛔ An khung dieu huong VA chan trang khi nam trong <iframe>. Ung dung chi biet an
   `header.top` va `.sm-seedcard` cua rieng no (`body.embed`); khung `.fl-*` va chan trang
   `.ft` la cua ta, no khong biet. Thieu luat nay la trang `/seed-map/` hien HAI thanh dieu
   huong va HAI chan trang long nhau — trang van 200, khong co gi bao. */
body.embed .fl-back,
body.embed .fl-top,
body.embed .ft { display: none; }

/* ──────────────────── 8. chan trang dung chung ──────────────────── */

.ft {
  background: var(--bg-surface);
  margin-top: 8px;
  padding: 34px 0 40px;
  color: var(--text-secondary);
  font-size: 13px;
}

.ft .ft9 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* ⛔ `seedmap.css` co luat `footer a{display:block}`. Khong chan lai thi dong ban quyen vo
   lam ba dong — "© 2012 – 2026" / "9Minecraft" / ". All rights reserved." — vi the <a> giua
   cau bi day thanh khoi. Phai tra ve `inline` TRUOC cac luat dieu huong phia duoi. */
.ft a { display: inline; }

.ft9-logo { display: block; line-height: 0; }
.ft9-logo img { height: 40px; width: auto; display: block; }
@media (max-width: 640px) { .ft9-logo img { height: 32px; } }
.ft9-tag { margin: 0; max-width: 62ch; line-height: 1.6; }
.ft9-nav, .ft9-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }

.ft9 .ft9-nav a {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13.5px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.ft9 .ft9-nav a:hover { background: var(--bg-surface-2); color: var(--accent); }

.ft9 .ft9-legal a {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.ft9 .ft9-legal a:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.ft9-line { width: 100%; max-width: 720px; height: 1px; background: var(--border); margin: 2px 0; }
.ft9-disc { margin: 0; max-width: 80ch; font-size: 11.5px; line-height: 1.7; opacity: .85; }
.ft9-disc strong { color: var(--text-primary); opacity: .92; }
.ft9-cpy { margin: 0; font-size: 12.5px; }
.ft9 .ft9-cpy a { color: var(--accent); font-weight: 700; text-decoration: none; }

@media (max-width: 640px) {
  .ft9-disc { font-size: 12px; }
  .ft9 .ft9-nav a { font-size: 13px; padding: 5px 11px; }
}

@media (hover: none) {
  .ft9 .ft9-nav a { padding: 11px 14px; }
  .ft9 .ft9-legal a { padding: 9px 11px; }
}

body.fullscreen .ft { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}