/* public/ban-do.css — màn 🧭 Bản đồ doanh nghiệp (30/09/2026).
   Mọi class mang tiền tố bd- để không đụng khối khác (bài học 01/09: hai thành
   phần dùng chung một tên class là khối sau đè khối trước, im lặng).
   Bản đồ là một bức tranh đêm nên màu của nó cố định; phần chữ/khung xung quanh
   vẫn đi theo biến màu của app. */

#ban-do { display: grid; gap: 1rem; }

/* ---- Trang chủ = bản đồ (01/10): đầu trang → bản đồ → chân trang ---- */
#view-dashboard > #ban-do { margin: 1.15rem 0; }
#view-dashboard > #ban-do:empty { display: none; }
.home-chan-grid { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 681px) {
  .home-chan-grid .home-profile-meter { display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; }
  .home-chan-grid .home-meter-orbit { grid-row: 1 / 4; margin: 0; }
  .home-chan-grid .home-profile-meter > button,
  .home-chan-grid .home-activity,
  .home-chan-grid .home-empty-hint { grid-column: 2; }
}
#ban-do .card { margin: 0; }

/* ---- HUD ---- */
.bd-hud { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.5fr); gap: .75rem; }
.bd-hud-o { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .9rem 1rem; border: 1px solid var(--rule);
  border-radius: var(--radius-sm); background: var(--panel); }
.bd-hud-nhan { font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.bd-hud-o small { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.bd-cap-so { font-size: 1.15rem; color: var(--ink); }
.bd-cap-thanh { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bd-cap-thanh i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff6428, #ffb457); box-shadow: 0 0 12px rgba(255, 140, 60, .5); }
.bd-cap small b { color: var(--ink); }
.bd-nguon { font-size: .7rem !important; color: var(--faint) !important; }
.bd-dem { flex-direction: row; align-items: center; gap: 1.1rem; }
.bd-dem > div { display: grid; grid-template-columns: auto auto; grid-template-areas: "i b" "i e"; column-gap: .45rem; align-items: center; }
.bd-dem span { grid-area: i; font-size: 1.6rem; }
.bd-dem b { grid-area: b; font-size: 1.25rem; line-height: 1; color: var(--ink); }
.bd-dem b small { font-size: .78rem; color: var(--muted); font-weight: 500; }
.bd-dem em { grid-area: e; font-style: normal; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.bd-viec b { font-size: .92rem; line-height: 1.35; color: var(--ink); }
.bd-viec .btn { align-self: flex-start; margin-top: .2rem; }
.bd-con { color: var(--accent2) !important; }

.bd-goiy { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem 1rem; border: 1px dashed var(--rule-hi);
  border-radius: var(--radius-sm); color: var(--muted); font-size: .84rem; }

/* ---- Khung bản đồ + bảng chi tiết ---- */
.bd-khung { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.bd-map { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 150, 80, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .02); background: #0b0806; }
.bd-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }

.bd-troi { fill: url(#bdTroiNen); }
/* ⚠️ HIỆU NĂNG (chủ app 01/10: "vuốt hơi lag"): MỌI chuyển động bên trong một
   <svg> bắt trình duyệt vẽ lại CẢ tấm bản đồ mỗi khung hình, và filter
   (blur/drop-shadow) làm mỗi lần vẽ đắt gấp nhiều lần. Luật cho tệp này:
   KHÔNG filter trong SVG, KHÔNG hiệu ứng vô hạn — chỉ vài nhịp lúc mở màn rồi đứng. */
.bd-sao-troi { fill: #ffe7cf; opacity: .3; }
.bd-map { position: relative; }
.bd-nhap { position: absolute; inset: 0; pointer-events: none; }
.bd-nhap i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe7cf; opacity: .1;
  will-change: opacity; animation: bdLapLanh 4.2s ease-in-out infinite; }
@keyframes bdLapLanh { 0%, 100% { opacity: .1; } 50% { opacity: .75; } }

.bd-dao { opacity: .95; }
.bd-dao-xay { fill: url(#bdDaoXay); }
.bd-dao-sang { fill: url(#bdDaoSang); }
.bd-dao-trum { fill: url(#bdDaoTrum); }
.bd-dao-quai { fill: url(#bdDaoQuai); }
.bd-dao-suong { fill: url(#bdDaoSuong); }

.bd-duong-nen { fill: none; stroke: #2a1a10; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.bd-duong-cham { fill: none; stroke: #5a3a24; stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.bd-duong-da { fill: none; stroke: #ffb457; stroke-width: 5; stroke-dasharray: 14 10; stroke-linecap: round; }
.bd-duong-da-toa { fill: none; stroke: #ff6428; stroke-width: 14; opacity: .22; stroke-linecap: round; }

/* ---- Nút vùng ---- */
.bd-nut { cursor: pointer; outline: none; animation: bdHien .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--tre, 0ms);
  transform-box: fill-box; transform-origin: center; }
@keyframes bdHien { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
.bd-nut text { text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.bd-tt { font-size: 26px; opacity: .8; }
.bd-vong-nen { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.bd-vong { fill: none; stroke: #ff9a4c; stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.bd-dia { fill: #1f140d; stroke: #6a4128; stroke-width: 2; transition: transform .2s ease, filter .2s ease; transform-box: fill-box; transform-origin: center; }
.bd-icon { font-size: 38px; }
.bd-so { font-size: 13px; font-weight: 800; fill: #1a0f08; paint-order: stroke; stroke: #ffb457; stroke-width: 7px; stroke-linejoin: round; }
.bd-ten { font-size: 17px; font-weight: 800; fill: #fff3e6; paint-order: stroke; stroke: #0c0806; stroke-width: 5px; stroke-linejoin: round; }
.bd-ten-phu { font-size: 12.5px; font-weight: 600; fill: #c9ad98; paint-order: stroke; stroke: #0c0806; stroke-width: 4px; }
.bd-sao { font-size: 19px; fill: #3b2c22; paint-order: stroke; stroke: #0c0806; stroke-width: 3px; }
.bd-sao.sang { fill: #ffd166; }

.bd-nut:hover .bd-dia, .bd-nut:focus-visible .bd-dia { transform: scale(1.07); }
.bd-nut.chon .bd-dia { stroke: #ffd166; stroke-width: 5; }
.bd-nut:focus-visible .bd-vong-nen { stroke: #8fb8ff; }

.bd-nut-sang .bd-dia { fill: #3a2a0c; stroke: #ffd166; }
.bd-nut-sang .bd-vong { stroke: #ffd166; }
.bd-nut-quai .bd-dia { fill: #22143a; stroke: #9b7bff; }
.bd-nut-quai .bd-vong { stroke: #b39bff; }
.bd-nut-trum .bd-dia { fill: #3a0f0f; stroke: #ff5d66; }
.bd-nut-trum .bd-vong { stroke: #ff5d66; }
.bd-nut-suong .bd-dia { fill: #1a1715; stroke: #3a332e; }
.bd-nut-suong .bd-icon, .bd-nut-suong .bd-tt { opacity: .45; filter: grayscale(.8); }
.bd-nut-suong .bd-ten { fill: #a3948a; }

.bd-quai { font-size: 26px; transform-box: fill-box; transform-origin: center; transform: rotate(-8deg); }
/* Trùm + người chơi: nhún 4 nhịp lúc mở màn cho sống động, rồi ĐỨNG YÊN. */
.bd-trum { font-size: 54px; animation: bdTrum 1.8s ease-in-out 4; transform-box: fill-box; transform-origin: center; }
@keyframes bdTrum { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.08); } }
.bd-trum-hao { fill: rgba(255, 60, 60, .12); stroke: rgba(255, 93, 102, .7); stroke-width: 2; stroke-dasharray: 6 6; }
.bd-may text { font-size: 34px; opacity: .55; }

/* ---- Người chơi ---- */
.bd-nguoi text { text-anchor: middle; dominant-baseline: middle; }
.bd-nguoi.nhun { animation: bdNhun 1.4s ease-in-out 4; transform-box: fill-box; transform-origin: bottom center; }
@keyframes bdNhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.bd-bong { fill: rgba(0, 0, 0, .5); }
.bd-nguoi-vien { fill: #ff6428; stroke: #ffe0c2; stroke-width: 3; }
.bd-nguoi-icon { font-size: 26px; }
.bd-nhan-ban { fill: #ffd166; }
.bd-nhan-ban-chu { font-size: 11px; font-weight: 800; fill: #1a0f08; }

/* ---- Bảng chi tiết vùng ---- */
.bd-panel { position: sticky; top: 84px; display: grid; gap: .7rem; padding: 1.1rem !important; }
.bd-panel.moi { animation: bdMoPanel .28s ease both; }
@keyframes bdMoPanel { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bd-panel-dau { display: flex; gap: .8rem; align-items: flex-start; }
.bd-panel-icon { flex: 0 0 3.2rem; height: 3.2rem; display: grid; place-items: center; font-size: 1.9rem; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 150, 70, .25), rgba(255, 150, 70, .04)); border: 1px solid var(--rule-hi); }
.bd-panel-dau small { color: var(--muted); font-size: .72rem; }
.bd-panel-dau h3 { margin: .1rem 0 .35rem; font-size: 1.15rem; }
.bd-pill { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  border: 1px solid var(--rule-hi); color: var(--muted); margin: 0 .3rem .25rem 0; }
.bd-p-trum { color: #ff8a90; border-color: rgba(255, 93, 102, .45); background: rgba(255, 93, 102, .1); }
.bd-p-quai { color: #c4b1ff; border-color: rgba(155, 123, 255, .45); background: rgba(155, 123, 255, .1); }
.bd-p-sang { color: #ffd166; border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .1); }
.bd-p-xay { color: var(--accent2); border-color: rgba(255, 154, 76, .4); }
.bd-p-ban { color: #1a0f08; background: #ffd166; border-color: #ffd166; }
.bd-y { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.bd-h4 { margin: .3rem 0 0; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

.bd-hop { padding: .8rem .9rem; border-radius: var(--radius-sm); display: grid; gap: .4rem; }
.bd-hop p { margin: 0; font-size: .84rem; line-height: 1.45; }
.bd-hop small { color: var(--muted); font-size: .74rem; line-height: 1.4; }
.bd-hop-dau { display: flex; align-items: center; gap: .5rem; }
.bd-hop-dau span { font-size: 1.5rem; }
.bd-hop-nut { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.bd-hop-trum { border: 1px solid rgba(255, 93, 102, .45); background: linear-gradient(160deg, rgba(255, 93, 102, .14), rgba(255, 93, 102, .03)); }
.bd-hop-trum .bd-hop-dau b { color: #ff8a90; }
.bd-hop-quai { border: 1px solid rgba(155, 123, 255, .4); background: rgba(155, 123, 255, .07); }

.bd-sao-ds, .bd-ct-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bd-sao-ds li { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--rule); opacity: .75; }
.bd-sao-ds li.sang { opacity: 1; border-color: rgba(255, 209, 102, .4); background: rgba(255, 209, 102, .06); }
.bd-sao-icon { font-size: 1.25rem; filter: grayscale(1); opacity: .6; }
.bd-sao-ds li.sang .bd-sao-icon { filter: none; opacity: 1; }
.bd-sao-ds b { display: block; font-size: .84rem; }
.bd-sao-ds b em { font-style: normal; color: #ffd166; }
.bd-sao-ds small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.bd-ct-ds li { display: flex; gap: .6rem; align-items: center; justify-content: space-between; }
.bd-ct-ds li > div { min-width: 0; flex: 1; }
.bd-ct-ds b { display: block; font-size: .83rem; }
.bd-ct-ds small { display: block; color: var(--muted); font-size: .72rem; }
.bd-ct-thanh { display: block; height: 5px; margin-top: .3rem; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bd-ct-thanh span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; }
.bd-fw { display: flex; flex-wrap: wrap; gap: .35rem; }
.bd-fw span { font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--rule-hi); color: var(--muted); }
.bd-panel-nut .btn { width: 100%; justify-content: center; }
.bd-hoi-vung { justify-self: start; }

/* ---- Tường chiến tích + cách chơi ---- */
.bd-cup h3 { margin: 0 0 .6rem; }
.bd-cup ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.bd-cup li { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; border: 1px solid rgba(255, 209, 102, .3); background: rgba(255, 209, 102, .05); }
.bd-cup li span { font-size: 1.4rem; filter: grayscale(.4); }
.bd-cup li b { display: block; font-size: .82rem; }
.bd-cup li small { color: var(--muted); font-size: .72rem; }
.bd-cach summary { cursor: pointer; font-weight: 700; }
.bd-cach ul { margin: .7rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.bd-cach b { color: var(--ink); }

/* ---- Màn mừng ---- */
.bd-mung { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(5, 3, 2, .62);
  backdrop-filter: blur(3px); animation: bdMoMung .25s ease both; padding: 16px; }
.bd-mung.tat { animation: bdTatMung .25s ease both; }
@keyframes bdMoMung { from { opacity: 0; } to { opacity: 1; } }
@keyframes bdTatMung { to { opacity: 0; } }
.bd-mung-the { position: relative; width: min(360px, 100%); padding: 1.6rem 1.4rem 1.3rem; text-align: center; border-radius: 22px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 140, 60, .28), transparent 60%), var(--panel, #120c09);
  border: 1px solid rgba(255, 180, 90, .45); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 110, 40, .25);
  animation: bdNay .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bdNay { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.bd-mung-icon { font-size: 4rem; line-height: 1; animation: bdXoay 1.2s ease-in-out infinite alternate; }
@keyframes bdXoay { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.1); } }
.bd-mung-the b { display: block; margin-top: .6rem; font-size: 1.3rem; color: #ffd166; }
.bd-mung-the p { margin: .4rem 0 .8rem; color: var(--muted); font-size: .88rem; }
.bd-mung-the ul { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .3rem; font-size: .82rem; color: var(--ink); }
.bd-mung-phao { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bd-mung-phao i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--mau);
  animation: bdRoi 2.6s cubic-bezier(.3, .6, .6, 1) var(--tre) both; }
@keyframes bdRoi { to { transform: translateY(105vh) rotate(720deg); opacity: .2; } }

/* ---- Màn hẹp ---- */
@media (max-width: 1180px) {
  .bd-khung { grid-template-columns: minmax(0, 1fr); }
  .bd-panel { position: static; }
}
@media (max-width: 900px) {
  .bd-hud { grid-template-columns: minmax(0, 1fr) auto; }
  .bd-viec { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bd-hud { grid-template-columns: minmax(0, 1fr); }
  .bd-dem { justify-content: space-around; }
  .bd-doc .bd-ten { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-nut, .bd-trum, .bd-nguoi.nhun, .bd-mung-icon, .bd-mung-the, .bd-panel.moi { animation: none !important; }
}