:root {
  --hong: #ff5c93;
  --hong-dam: #e23d77;
  --hong-nhat: #ffe3ee;
  --chu: #3b2a33;
  --chu-nhat: #8a7480;
  --the: #ffffff;
  --vien: #f1dfe7;
  --nen: #fff7fa;
  --bong: 0 6px 18px rgba(59, 42, 51, .18);
  --xanh: #3aa76d;
  --kinh: rgba(255, 255, 255, .9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chu: #fbeef3; --chu-nhat: #c7a9b7; --the: #2b2128; --vien: #45343e;
    --nen: #1d161b; --hong-nhat: #4a2335; --kinh: rgba(43, 33, 40, .92);
  }
}
:root[data-theme="dark"] {
  --chu: #fbeef3; --chu-nhat: #c7a9b7; --the: #2b2128; --vien: #45343e;
  --nen: #1d161b; --hong-nhat: #4a2335; --kinh: rgba(43, 33, 40, .92);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Baloo 2', system-ui, -apple-system, sans-serif;
  color: var(--chu);
  background: #6fb24a;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea { font: inherit; color: inherit; }

.dang-tai { padding: 40vh 16px; text-align: center; color: #fff; font-weight: 700; }

/* ---- Bản đồ toàn màn hình ---- */
.tg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; image-rendering: pixelated; }

.phu-tren {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  pointer-events: none;
}
.phu-tren > * { pointer-events: auto; }
.toi-nut {
  display: flex; align-items: center; gap: 6px; border: 0; background: var(--kinh);
  border-radius: 99px; padding: 3px 12px 3px 4px; box-shadow: var(--bong); font-weight: 800; min-width: 0; max-width: 52%;
}
.toi-nut img { width: 32px; height: 40px; image-rendering: pixelated; flex: none; }
.toi-nut span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tui { margin-left: auto; display: grid; grid-template-columns: repeat(2, auto); gap: 4px; justify-content: end; }
.tui span { background: var(--kinh); border-radius: 99px; padding: 0 7px; font-weight: 800; font-size: 13px; white-space: nowrap; box-shadow: var(--bong); }

.noi-noi {
  position: fixed; left: 12px; right: 12px; top: calc(62px + env(safe-area-inset-top)); z-index: 4;
  display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none;
}
.chip { pointer-events: auto; border: 0; border-radius: 99px; padding: 3px 12px; font-weight: 700; font-size: 14px; background: var(--kinh); box-shadow: var(--bong); }
.chip.hong { background: var(--hong); color: #fff; animation: nhun 1.6s ease-in-out infinite; }
.chip.mo { pointer-events: none; opacity: .92; }
@keyframes nhun { 50% { transform: translateY(-2px); } }

.phu-duoi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 0 10px calc(8px + env(safe-area-inset-bottom));
  display: grid; gap: 6px; max-width: 640px; margin: 0 auto;
}
.o-noi { display: flex; gap: 6px; }
.o-noi input {
  flex: 1; min-width: 0; border: 0; border-radius: 99px; padding: 9px 14px;
  background: var(--kinh); box-shadow: var(--bong); font-size: 16px;
}
.tron { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--kinh); box-shadow: var(--bong); font-size: 20px; flex: none; }
.tron.gui { background: var(--hong); color: #fff; font-size: 18px; }
.cx-hang { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-hang[hidden] { display: none; }
.cx-hang button { border: 0; border-radius: 14px; background: var(--kinh); box-shadow: var(--bong); font-size: 22px; padding: 4px 10px; }
.cx-hang button[data-ngoi] { font-size: 15px; font-weight: 700; }
.menu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.menu button {
  border: 0; border-radius: 14px; background: var(--kinh); box-shadow: var(--bong);
  font-size: 12px; font-weight: 700; padding: 4px 0 3px; line-height: 1.15; white-space: nowrap;
}
.menu b { display: block; font-size: 19px; }

/* ---- Tấm dưới ---- */
.sheet { position: fixed; inset: 0; z-index: 20; background: rgba(40, 20, 30, .4); display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet .trong {
  position: relative; background: var(--nen); width: 100%; max-width: 600px; max-height: 86vh; overflow: auto;
  border-radius: 22px 22px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.dong-x { position: absolute; top: 10px; right: 10px; border: 0; background: var(--hong-nhat); color: var(--hong-dam); width: 34px; height: 34px; border-radius: 50%; font-weight: 800; }
.sheet h3 { margin: 0 40px 4px 0; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.sheet h4 { margin: 18px 0 8px; font-size: 17px; }
.phu { color: var(--chu-nhat); margin: 0 0 10px; }
.nho-chu { font-size: 14px; }
.the { background: var(--the); border: 1px solid var(--vien); border-radius: 16px; padding: 12px; margin: 8px 0; }
.nut {
  border: 0; background: var(--hong); color: #fff; font-weight: 700;
  border-radius: 14px; padding: 10px 16px; font-size: 16px; box-shadow: 0 3px 0 var(--hong-dam);
}
.nut:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hong-dam); }
.nut:disabled { background: #d9c7cf; box-shadow: none; cursor: default; color: #fff; }
.nut.phu-nut { background: var(--hong-nhat); color: var(--hong-dam); box-shadow: none; }
.nut.rong { width: 100%; margin-top: 4px; }
.hang-nut { display: flex; gap: 8px; margin-top: 10px; }
.hang-nut .nut { flex: 1; }
.lien-ket { background: none; border: 0; color: var(--hong-dam); font-weight: 700; padding: 0; }
.nhan { display: inline-block; border-radius: 99px; padding: 0 9px; font-size: 13px; font-weight: 700; background: var(--hong-nhat); color: var(--hong-dam); }
.loi { color: #c0392b; font-weight: 600; min-height: 1.2em; margin: 6px 0; }

/* Nhà */
.san-nha { background: linear-gradient(#cfe9ff 0 52%, #8fd16a 52% 100%); border-radius: 18px; padding: 12px; margin-top: 8px; position: relative; }
.san-nha .lon { display: flex; align-items: flex-end; justify-content: center; }
.nha-anh { width: 46%; max-width: 200px; image-rendering: pixelated; }
.nv-anh { width: 15%; max-width: 64px; image-rendering: pixelated; margin-left: 2%; }
.o-san { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.o-san button, .o-san div { aspect-ratio: 1; border-radius: 10px; border: 2px dashed rgba(255,255,255,.85); background: rgba(255,255,255,.25); padding: 3px; display: grid; place-items: center; }
.o-san .co-do { border-style: solid; border-color: transparent; background: rgba(255,255,255,.55); }
.o-san svg { width: 100%; height: 100%; }
.o-san .cong { color: #fff; font-size: 22px; font-weight: 800; }
.tim { position: absolute; top: 10px; right: 12px; background: #fff; color: var(--hong-dam); border-radius: 99px; padding: 0 10px; font-weight: 800; }
textarea { width: 100%; border: 1px solid var(--vien); border-radius: 12px; padding: 8px 10px; background: var(--nen); resize: vertical; min-height: 60px; }

.so-khach { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.so-khach li { background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 9px 12px; }
.so-khach .ai small { color: var(--chu-nhat); }
.so-khach p { margin: 3px 0 0; overflow-wrap: anywhere; }
.so-khach .qua { color: var(--hong-dam); font-weight: 700; font-size: 14px; }
.so-khach .an { float: right; font-size: 13px; color: var(--chu-nhat); background: none; border: 0; }

/* Tiến độ */
.tien-do { display: grid; gap: 6px; margin: 10px 0; }
.dong-td { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.thanh { height: 12px; border-radius: 99px; background: var(--hong-nhat); overflow: hidden; }
.thanh i { display: block; height: 100%; background: linear-gradient(90deg, #ff8fb3, var(--hong)); border-radius: 99px; }
.thanh.du i { background: linear-gradient(90deg, #8fdc9f, var(--xanh)); }

.buoc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.o-buoc { display: flex; align-items: center; gap: 6px; border: 1px solid var(--vien); border-radius: 12px; padding: 4px 6px; background: var(--the); }
.o-buoc .bt { font-size: 20px; }
.o-buoc .so { min-width: 22px; text-align: center; font-weight: 800; }
.o-buoc button { border: 0; background: var(--hong-nhat); color: var(--hong-dam); border-radius: 9px; width: 30px; height: 30px; font-weight: 800; font-size: 18px; }
.o-buoc button:disabled { opacity: .35; }
.o-buoc .co { margin-left: auto; font-size: 12px; color: var(--chu-nhat); }

/* Danh sách người / khu */
.ds-nguoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ds-nguoi button { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--vien); border-radius: 14px; background: var(--the); padding: 6px 8px; min-width: 0; }
.ds-nguoi img { width: 32px; height: 40px; image-rendering: pixelated; flex: none; }
.ds-nguoi span { min-width: 0; }
.ds-nguoi b { display: block; line-height: 1.15; overflow-wrap: anywhere; }
.ds-nguoi small { color: var(--chu-nhat); font-size: 12px; }
.ds-khu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ds-khu button { border: 1px solid var(--vien); background: var(--the); border-radius: 12px; padding: 6px 10px; text-align: left; font-weight: 700; overflow-wrap: anywhere; }
.ds-khu button.cua-toi { border-color: var(--hong); background: var(--hong-nhat); }
.ds-khu small { display: block; color: var(--chu-nhat); font-weight: 500; }

.tin { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tin li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.tin li .bt { flex: none; width: 24px; text-align: center; }
.tin li small { color: var(--chu-nhat); white-space: nowrap; }
.tin li .noi { min-width: 0; overflow-wrap: anywhere; }
.hieu-khach { display: grid; gap: 6px; }
.hieu-khach div { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hieu-khach div b { margin-left: auto; color: var(--hong-dam); }

.luoi-tem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tem { aspect-ratio: 3/4; border-radius: 10px; border: 3px dotted var(--vien); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 13px; font-weight: 700; color: var(--chu-nhat); background: var(--the); }
.tem .bt { font-size: 30px; filter: grayscale(1); opacity: .35; }
.tem.co { border-color: var(--hong); color: var(--chu); background: var(--hong-nhat); }
.tem.co .bt { filter: none; opacity: 1; }
.tem span { overflow-wrap: anywhere; }

.ds-do { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.ds-do button { border: 1px solid var(--vien); border-radius: 14px; background: var(--the); padding: 8px; text-align: left; display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; }
.ds-do button:disabled { opacity: .45; }
.ds-do svg { width: 44px; height: 44px; }
.ds-do small { display: block; color: var(--chu-nhat); }

/* Tạo nhân vật */
.xem-thu { display: flex; justify-content: center; align-items: flex-end; gap: 4px; background: linear-gradient(#cfe9ff 0 60%, #8fd16a 60%); border-radius: 16px; padding: 10px; margin: 8px 0 12px; }
.xem-thu canvas { width: 96px; height: 120px; image-rendering: pixelated; }
.xem-thu img { width: 96px; image-rendering: pixelated; }
.nhan-o { display: block; font-weight: 700; margin-bottom: 10px; }
.nhan-o input { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--vien); border-radius: 12px; padding: 10px 12px; background: var(--the); font-size: 17px; }
.chon { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.chon button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--vien); }
.chon button.dang { border-color: var(--hong); box-shadow: 0 0 0 2px var(--the) inset; }
.chon button.chu-nut { width: auto; border-radius: 12px; padding: 0 12px; background: var(--hong-nhat); color: var(--hong-dam); font-weight: 700; }

.toast { position: fixed; left: 50%; top: calc(110px + env(safe-area-inset-top)); transform: translate(-50%, -10px); opacity: 0; transition: .25s; z-index: 30; background: #3b2a33; color: #fff; border-radius: 14px; padding: 9px 16px; font-weight: 700; max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.toast.hien { opacity: 1; transform: translate(-50%, 0); }

/* Đăng nhập */
.dang-nhap { max-width: 380px; margin: 0 auto; padding: 8vh 16px 40px; text-align: center; background: var(--nen); min-height: 100%; overflow: auto; }
body:has(.dang-nhap) { background: var(--nen); overflow: auto; }
.dang-nhap img { width: 130px; }
.dang-nhap h1 { font-size: 36px; margin: 4px 0; color: var(--hong); }
.dang-nhap form { text-align: left; margin-top: 18px; display: grid; gap: 10px; }
.dang-nhap input { width: 100%; border: 1px solid var(--vien); border-radius: 14px; padding: 11px 14px; background: var(--the); font-size: 17px; }
.dang-nhap .ghi { font-size: 14px; color: var(--chu-nhat); text-align: center; }

.chao { text-align: center; }
.chao img { width: 110px; }
.chao ul { text-align: left; padding-left: 20px; }