/* Đảo nhà: bảng, nút ngữ cảnh, chip chỉ đường về nhà (trinh_khach/src/dao_nha_ui.ts) */

/* ---- nút ngữ cảnh: máy tính = hàng nút giữa dưới; cảm ứng = hud.ts xếp lên vòng cung (class nut-vong) ---- */
#dn-thanh { position: fixed; left: 50%; bottom: calc(158px + var(--day, 0px)); transform: translateX(-50%); display: flex; gap: 8px; z-index: 6; pointer-events: none; }
#dn-thanh .dn-nut { pointer-events: auto; min-width: 96px; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: var(--nen); border: 1.5px solid var(--vien);
  color: var(--chu); font-weight: 800; font-size: 14px; box-shadow: 0 0 10px rgba(79, 227, 255, .35), 0 3px 8px rgba(0, 0, 0, .4); cursor: pointer; }
#dn-thanh .dn-nut[hidden] { display: none; }
#dn-thanh .dn-nut:hover { background: rgba(31, 111, 140, .92); }
#dn-nut-ra, #dn-nut-cap { border-color: #ffd866 !important; color: #ffe9a6 !important; }
#dn-nut-xuong { border-color: #9dffb0 !important; }
html body.cam-ung #dn-thanh { inset: 0; left: 0; bottom: 0; transform: none; display: block; z-index: 9; }
html body.cam-ung #dn-thanh .dn-nut { min-width: 0; min-height: 0; width: var(--vc); height: var(--vc); padding: 3px; font-size: 11px; border-radius: 50%; }

/* ---- chip chỉ đường về đảo nhà: dưới bản đồ nhỏ ---- */
#dn-ve { position: absolute; top: calc(11px + var(--tren, 0px) + var(--ban-do, 88px)); right: calc(8px + var(--phai, 0px)); min-width: var(--ban-do, 88px); min-height: 30px; padding: 4px 9px;
  display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 99px; background: rgba(4, 14, 26, .72); border: 1px solid var(--vien-mo);
  color: var(--chu); font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: auto; cursor: pointer; z-index: 2; }
#dn-ve::before { content: ""; position: absolute; inset: -8px -4px; }
#dn-ve[hidden] { display: none; }
#dn-ve i { display: inline-block; font-style: normal; color: #ffd866; font-size: 14px; line-height: 1; transition: transform .2s linear; }
#dn-ve i[hidden] { display: none; }
#dn-ve.xa { border-color: rgba(255, 216, 102, .6); }
body.dn-bi-danh #dn-ve { border-color: #ff6a6a; animation: dn-nhay .5s infinite alternate; }
@keyframes dn-nhay { to { box-shadow: 0 0 12px #ff6a6a; } }
body.co-dao-thanh #dn-ve { top: calc(47px + var(--tren, 0px) + var(--ban-do, 88px)); }

#dn-chip { display: grid; gap: 2px; margin-top: 2px; padding: 3px 0 0; min-height: 30px; background: none; border: 0; border-top: 1px solid var(--vien-mo); text-align: left; width: 100%; cursor: pointer; }
#dn-chip[hidden] { display: none; }
#dn-chip span { font-size: 11px; font-weight: 800; color: #9dffb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dn-chip b { height: 6px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; display: block; }
#dn-chip i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1f9a58, #9dffb0); }

/* ---- bảng Đảo nhà ---- */
#bang-dn { width: min(720px, calc(100vw - 20px)); }
#bang-dn[hidden] { display: none; }
#than-dn { overflow-y: auto; padding: 8px 10px 12px; display: grid; gap: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.dn-the { padding: 9px 11px; border-radius: 9px; background: rgba(79, 227, 255, .06); border: 1px solid var(--vien-mo); }
.dn-the.noi { border-color: #9dffb0; background: rgba(60, 200, 120, .1); }
.dn-the h3 { margin: 0 0 2px; font-size: 17px; color: #ffe9a6; }
.dn-the h3 small { font-size: 12px; color: var(--chu-mo); font-weight: 600; }
.dn-the h4 { margin: 0 0 4px; font-size: 14px; color: var(--vien); }
.dn-the p { margin: 0 0 6px; font-size: 13px; line-height: 1.4; color: var(--chu); }
.dn-dau { display: flex; gap: 11px; align-items: center; }
.dn-hinh { position: relative; flex: 0 0 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 50% 62%, #f0dfa8 0 38%, #57d8d0 39% 52%, #1b6f8f 53%); border: 2px solid var(--vien);
  box-shadow: inset 0 0 10px rgba(2, 10, 20, .6); }
.dn-hinh i { position: absolute; left: 50%; top: 22%; width: 6px; height: 26px; margin-left: -3px; background: #8a5a34; border-radius: 3px; box-shadow: -9px -3px 0 3px #4fae5a, 9px -3px 0 3px #4fae5a, 0 -8px 0 4px #63c06c; }
.dn-hinh b { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: #ffd866; color: #3a2a06; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 2px solid #7a5b10; }
.dn-so { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--chu-mo); }
.dn-so b { color: var(--chu); }
.dn-cans { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.dn-can { display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 8px; background: rgba(255, 106, 106, .12); border: 1px solid rgba(255, 106, 106, .5); font-size: 12px; }
.dn-can.du { background: rgba(60, 200, 120, .12); border-color: rgba(120, 230, 160, .55); }
.dn-can img { width: 24px; height: 24px; image-rendering: pixelated; }
.dn-can b { font-size: 13px; }
.dn-can small { color: var(--chu-mo); }
.dn-dk { font-size: 12.5px !important; color: #9dffb0 !important; }
.dn-dk.thieu { color: #ff9a9a !important; }
.dn-hang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.dn-gio { margin-right: auto; font-size: 13px; color: var(--chu-mo); }
.dn-hang button { min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .1); color: var(--chu); font-weight: 800; font-size: 13.5px; cursor: pointer; }
.dn-hang button.chinh { border-color: var(--vien); background: linear-gradient(#1f6f8c, #134a63); }
.dn-hang button:disabled { opacity: .45; cursor: default; }
.dn-thanh { position: relative; height: 22px; border-radius: 11px; background: rgba(0, 0, 0, .5); overflow: hidden; margin: 4px 0 8px; }
.dn-thanh i { display: block; height: 100%; background: linear-gradient(90deg, #1f9a58, #9dffb0); }
.dn-thanh b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; text-shadow: 0 1px 2px #000; }
.dn-cts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; margin-bottom: 6px; }
.dn-ct { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 8px; background: rgba(4, 14, 26, .45); }
.dn-ct img { width: 40px; height: 40px; image-rendering: pixelated; flex: 0 0 auto; }
.dn-ct b { font-size: 13px; }
.dn-ct small { color: #9dffb0; font-size: 11.5px; }
.dn-ct p { font-size: 11.5px; color: var(--chu-mo); margin: 2px 0 0; line-height: 1.3; }
.dn-ct.khoa { opacity: .6; }
.dn-ct.khoa small { color: #ffb0a0; }
.dn-ghi { font-size: 12px !important; color: var(--chu-mo) !important; margin: 0 !important; line-height: 1.4; }

@media (max-width: 900px), (max-height: 500px) {
  .dn-hinh { flex-basis: 56px; height: 56px; }
  .dn-the { padding: 7px 9px; }
  .dn-cts { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 620px), (max-height: 500px) { #bang-dn { width: auto; } }

/* ---------- ghé thăm đảo (dao_nha_ui.ts) ---------- */
#tham-thanh { position: fixed; left: calc(50% + 46px); transform: translateX(-50%); top: calc(var(--tren) + 46px * var(--hud)); z-index: 30; display: flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: 99px; background: rgba(4, 14, 26, .82); border: 1px solid var(--vang); box-shadow: 0 0 10px rgba(255, 216, 74, .3); max-width: calc(100vw - 16px); }
#tham-thanh[hidden] { display: none; }
#tham-ten { font-size: 13px; font-weight: 800; color: #ffe9a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
#tham-thanh button { min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .1); font-weight: 700; font-size: 13px; white-space: nowrap; }
#tham-thanh button.chinh { border-color: var(--vien); background: linear-gradient(#1f6f8c, #134a63); }
#tham-thanh button:disabled { opacity: .5; }
#dn-nut-tham.mo { opacity: .7; }
body.dang-tham #nut-chinh, body.dang-tham #thanh-cam { opacity: .35; pointer-events: none; }
.th-cua { display: flex; gap: 6px; margin: 6px 0; }
.th-cua button { flex: 1; min-height: 40px; border-radius: 7px; border: 1px solid var(--vien-mo); background: rgba(79, 227, 255, .06); color: var(--chu-mo); }
.th-cua button.chon { color: var(--chu); background: rgba(79, 227, 255, .2); border-color: var(--vien); }
.th-but { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.th-dong { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border-radius: 7px; background: rgba(0, 0, 0, .25); font-size: 13px; }
.th-dong b { color: #ffe9a6; flex: 0 0 auto; }
.th-dong span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.th-dong small { color: var(--chu-mo); flex: 0 0 auto; }
.th-dong button { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(255, 106, 106, .4); background: rgba(255, 106, 106, .1); color: var(--do); }
.th-moi { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--do); color: #fff; vertical-align: middle; }