/* Chat Mỏ Cày. Bố cục kiểu bảng điều khiển: các khung trắng bo tròn nổi trên nền xám xanh. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/font/inter-vietnamese-wght-normal.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/font/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/font/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nen: #eef2f8;
  --khung: #ffffff;
  --mem: #f6f8fc;
  --mem-2: #edf1f7;
  --chu: #0f1b3d;
  --chu-phu: #6b7894;
  --chu-nhat: #98a3b9;
  --vien: #e3e8f1;
  --chinh: #1f5fae;
  --chinh-dam: #174a8a;
  --chinh-nhat: #e8f0fb;
  --bong-toi: #1f5fae;
  --chu-bong-toi: #ffffff;
  --bong-ban: #ffffff;
  --xanh-la: #1f9d63;
  --xanh-la-nhat: #e6f6ee;
  --vang: #b7790b;
  --vang-nhat: #fdf4e1;
  --tim-nhat: #efebfb;
  --tim: #6b4fd1;
  --nguy: #d23b3b;
  --nguy-nhat: #fcebeb;
  --bong: 0 1px 2px rgba(15, 27, 61, .04), 0 6px 20px rgba(15, 27, 61, .05);
  --bong-noi: 0 10px 30px rgba(15, 27, 61, .12);
  --bo: 16px;
  --bo-nho: 10px;
  --cao-dau: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: #0b1220; --khung: #121b2d; --mem: #172238; --mem-2: #1c2942; --chu: #e8edf7; --chu-phu: #9aa8c2;
    --chu-nhat: #6c7a96; --vien: #22304b; --chinh: #5b9be6; --chinh-dam: #8ab8f0; --chinh-nhat: #1a2c4a;
    --bong-toi: #2d6cc0; --bong-ban: #1c2942; --xanh-la: #4cc98f; --xanh-la-nhat: #15332a; --vang: #e8b04a;
    --vang-nhat: #33290f; --tim-nhat: #241f43; --tim: #a593ff; --nguy: #ff7d7d; --nguy-nhat: #3a1c22;
    --bong: 0 1px 2px rgba(0, 0, 0, .3); --bong-noi: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --nen: #0b1220; --khung: #121b2d; --mem: #172238; --mem-2: #1c2942; --chu: #e8edf7; --chu-phu: #9aa8c2;
  --chu-nhat: #6c7a96; --vien: #22304b; --chinh: #5b9be6; --chinh-dam: #8ab8f0; --chinh-nhat: #1a2c4a;
  --bong-toi: #2d6cc0; --bong-ban: #1c2942; --xanh-la: #4cc98f; --xanh-la-nhat: #15332a; --vang: #e8b04a;
  --vang-nhat: #33290f; --tim-nhat: #241f43; --tim: #a593ff; --nguy: #ff7d7d; --nguy-nhat: #3a1c22;
  --bong: 0 1px 2px rgba(0, 0, 0, .3); --bong-noi: 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--nen);
  color: var(--chu);
  font: 14.5px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--chinh); }
[hidden] { display: none !important; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--chinh); outline-offset: 2px; }

#goc { height: 100dvh; display: flex; flex-direction: column; }
.man-cho { margin: auto; text-align: center; color: var(--chu-phu); }
.man-cho img { display: block; margin: 0 auto 6px; }

/* ---------- Nút, ô nhập ---------- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--vien);
  background: var(--khung); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--chu);
  transition: background .15s, border-color .15s;
}
.nut:hover { background: var(--mem); }
.nut-chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; }
.nut-chinh:hover { background: var(--chinh-dam); border-color: var(--chinh-dam); }
.nut-nguy { color: var(--nguy); }
.nut-nho { min-height: 32px; padding: 0 12px; font-size: 13px; }
.nut:disabled { opacity: .55; cursor: default; }
.nut-icon {
  width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent;
  display: inline-grid; place-items: center; color: var(--chu-phu); flex: none; position: relative;
  transition: background .15s, color .15s;
}
.nut-icon:hover { background: var(--mem); color: var(--chu); }
.nut-icon svg { width: 20px; height: 20px; }
.o-nhap {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--bo-nho);
  border: 1px solid var(--vien); background: var(--khung); transition: border-color .15s, box-shadow .15s;
}
.o-nhap:focus, .o-tim input:focus { outline: none; border-color: var(--chinh); box-shadow: 0 0 0 3px var(--chinh-nhat); }
label.nhan { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.goi-y { color: var(--chu-phu); font-size: 12.5px; margin: 4px 0 0; }
.loi { color: var(--nguy); background: var(--nguy-nhat); padding: 10px 12px; border-radius: var(--bo-nho); margin-top: 12px; font-size: 13.5px; }

/* ---------- Đăng nhập, link mời ---------- */
.trang-vao { margin: auto; width: min(420px, 100% - 32px); padding: 28px 0; }
.trang-vao .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.trang-vao .logo img { width: 64px; height: 64px; flex: none; }
.trang-vao h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.trang-vao .phu { color: var(--chu-phu); margin: 0; font-size: 13.5px; }
.the { background: var(--khung); border: 1px solid var(--vien); border-radius: 20px; padding: 24px; box-shadow: var(--bong); }
.the .nut-chinh { width: 100%; margin-top: 20px; min-height: 46px; }

/* ---------- Bố cục chính: menu, danh sách, khung chat ---------- */
.khung {
  flex: 1; min-height: 0; display: grid; gap: 12px; padding: 12px;
  grid-template-columns: 232px 340px 1fr;
}
.khung-con { background: var(--khung); border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: var(--bong); min-height: 0; }
.thanh-nav { display: flex; flex-direction: column; padding: 18px 14px 14px; }
.cot-trai { display: flex; flex-direction: column; overflow: hidden; }
.cot-phai { display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; }

.thuong-hieu { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; text-decoration: none; color: var(--chu); }
.thuong-hieu img { width: 42px; height: 42px; flex: none; }
.thuong-hieu b { font-size: 16px; letter-spacing: -.01em; display: block; line-height: 1.2; }
.thuong-hieu small { color: var(--chu-phu); font-size: 11.5px; }
.nhom-nav { font-size: 11.5px; color: var(--chu-nhat); font-weight: 600; margin: 14px 8px 6px; }
.muc-nav {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--bo-nho);
  color: var(--chu-phu); text-decoration: none; font-weight: 500; font-size: 14px; position: relative;
}
.muc-nav svg { width: 18px; height: 18px; flex: none; }
.muc-nav:hover { background: var(--mem); color: var(--chu); }
.muc-nav.chon { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }
.muc-nav .so-moi { margin-left: auto; }
.day-nav { margin-top: auto; }
.the-goi-y { background: var(--chinh-nhat); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.the-goi-y b { display: block; font-size: 14px; margin-bottom: 4px; }
.the-goi-y p { margin: 0 0 12px; color: var(--chu-phu); font-size: 12.5px; }
.the-goi-y .nut { width: 100%; }
.toi-nho { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--vien); text-decoration: none; color: var(--chu); }
.toi-nho b { display: block; font-size: 13.5px; line-height: 1.3; }
.toi-nho small { color: var(--chu-phu); font-size: 12px; }
.toi-nho > span:last-child { min-width: 0; }

/* Màn vừa: thu menu thành cột biểu tượng */
@media (max-width: 1180px) and (min-width: 761px) {
  .khung { grid-template-columns: 72px 320px 1fr; }
  .thanh-nav { padding: 14px 10px; align-items: center; }
  .thuong-hieu { padding: 0 0 14px; }
  .thuong-hieu span, .nhom-nav, .muc-nav .chu-nav, .the-goi-y, .toi-nho > span:last-child { display: none; }
  .muc-nav { padding: 11px; }
  .muc-nav .so-moi { position: absolute; top: 2px; right: 0; margin: 0; }
  .toi-nho { padding: 12px 0 0; }
}

/* Điện thoại: một màn mỗi lúc, menu xuống đáy */
@media (max-width: 760px) {
  .dau-ds .logo-nho { display: block; }
  .khung { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 0; gap: 0; }
  .khung-con { border-radius: 0; border: 0; box-shadow: none; }
  .thanh-nav {
    grid-row: 2; flex-direction: row; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vien);
  }
  .thuong-hieu, .nhom-nav, .day-nav { display: none; }
  .muc-nav { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 11px; flex: 1; max-width: 90px; }
  .muc-nav.chon { background: none; }
  .muc-nav .so-moi { position: absolute; top: 0; left: 50%; margin: 0 0 0 4px; }
  .khung.dang-xem { grid-template-rows: 1fr; }
  .khung.dang-xem .thanh-nav, .khung.dang-xem .cot-trai { display: none; }
  .khung:not(.dang-xem) .cot-phai { display: none; }
  .khung .cot-trai, .khung .cot-phai { grid-row: 1; }
}
@media (min-width: 761px) { .chi-dt { display: none !important; } }

.dau {
  min-height: calc(var(--cao-dau) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0 18px;
  display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--vien); flex: none;
}
@media (min-width: 761px) { .dau { padding-top: 0; min-height: var(--cao-dau); } }
.dau h1, .dau h2 { font-size: 16px; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.dau .phu { display: block; font-size: 12px; font-weight: 400; color: var(--chu-phu); overflow: hidden; text-overflow: ellipsis; }
.dau-kenh { padding-left: 8px; gap: 10px; }
.dau-kenh .anh-dai-dien { width: 38px; height: 38px; }
.dau-ds h1 { display: flex; align-items: center; gap: 8px; }
.logo-nho { display: none; width: 30px; height: 30px; flex: none; }
.dem { font-size: 12px; font-weight: 600; color: var(--chinh); background: var(--chinh-nhat); border-radius: 999px; padding: 1px 8px; }

.o-tim { position: relative; padding: 12px 14px 8px; flex: none; }
.o-tim svg { position: absolute; left: 26px; top: 50%; margin-top: 2px; transform: translateY(-50%); width: 16px; height: 16px; color: var(--chu-nhat); pointer-events: none; }
.o-tim input { width: 100%; height: 38px; border-radius: var(--bo-nho); border: 1px solid var(--vien); background: var(--mem); padding: 0 12px 0 36px; }
.chip { display: flex; gap: 6px; padding: 2px 14px 10px; flex: none; overflow-x: auto; scrollbar-width: none; }
.chip button {
  border: 1px solid var(--vien); background: var(--khung); border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  font-weight: 600; color: var(--chu-phu); white-space: nowrap;
}
.chip button.chon { background: var(--chu); border-color: var(--chu); color: var(--khung); }

.ds-kenh { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; }
.ds-kenh li button {
  width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px;
  border: 0; background: transparent; text-align: left; transition: background .12s;
}
.ds-kenh li button:hover { background: var(--mem); }
.ds-kenh li.dang-mo button { background: var(--chinh-nhat); }
.anh-dai-dien {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; color: #fff; font-size: 14px; background: var(--chinh); letter-spacing: .02em;
}
.anh-dai-dien.kenh { border-radius: 12px; background: var(--chinh-nhat); color: var(--chinh); font-size: 17px; }
.anh-dai-dien.kenh svg { width: 20px; height: 20px; }
.anh-dai-dien.nho { width: 30px; height: 30px; font-size: 11.5px; }
.kenh-giua { flex: 1; min-width: 0; }
.kenh-ten { display: flex; gap: 8px; align-items: baseline; }
.kenh-ten b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 14px; }
.kenh-ten time { font-size: 11.5px; color: var(--chu-nhat); flex: none; }
.kenh-tom { display: flex; gap: 8px; align-items: center; color: var(--chu-phu); font-size: 13px; margin-top: 1px; }
.kenh-tom span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kenh-tom svg { width: 14px; height: 14px; flex: none; color: var(--chu-nhat); }
.co-moi .kenh-ten b, .co-moi .kenh-tom span { color: var(--chu); font-weight: 700; }
.co-moi .kenh-ten time { color: var(--chinh); font-weight: 600; }
.so-moi {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--chinh);
  color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; font-style: normal;
}
.trong { color: var(--chu-phu); text-align: center; padding: 40px 20px; font-size: 13.5px; }
.trong-lon { margin: auto; text-align: center; color: var(--chu-phu); padding: 24px; max-width: 380px; }
.trong-lon .vong { width: 72px; height: 72px; border-radius: 22px; background: var(--chinh-nhat); color: var(--chinh); display: grid; place-items: center; margin: 0 auto 16px; }
.trong-lon .vong svg { width: 32px; height: 32px; }
.trong-lon b { display: block; color: var(--chu); font-size: 17px; margin-bottom: 6px; letter-spacing: -.01em; }
.trong-lon p { margin: 0; font-size: 13.5px; }

.mat-ket-noi { background: var(--vang-nhat); color: var(--vang); font-weight: 600; font-size: 12.5px; padding: 6px 14px; text-align: center; flex: none; }

/* ---------- Khung chat ---------- */
.ds-tin { flex: 1; overflow-y: auto; padding: 8px 20px 16px; overscroll-behavior: contain; background: var(--mem); }
.ngay { text-align: center; margin: 18px 0 8px; position: sticky; top: 6px; z-index: 1; }
.ngay span { background: var(--khung); border: 1px solid var(--vien); color: var(--chu-phu); font-size: 11.5px; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.ngay.dau-chuyen { position: static; } /* chỉ nhãn ngày dính đầu khi cuộn */
.vach-moi { display: flex; align-items: center; gap: 10px; color: var(--nguy); font-size: 11.5px; font-weight: 700; margin: 14px 0; }
.vach-moi::before, .vach-moi::after { content: ""; flex: 1; height: 1px; background: var(--nguy); opacity: .35; }

.tin { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.tin.noi { margin-top: 3px; }
.tin.noi .anh-dai-dien { visibility: hidden; height: 0; }
.tin.cua-toi { flex-direction: row-reverse; }
.tin.cua-toi .anh-dai-dien { display: none; }
.bong {
  max-width: min(560px, 78%); background: var(--bong-ban); border: 1px solid var(--vien);
  border-radius: 16px 16px 16px 6px; padding: 8px 12px 6px; position: relative; overflow-wrap: anywhere;
}
.tin.noi:not(.cua-toi) .bong { border-radius: 6px 16px 16px 6px; }
.tin.cua-toi .bong { background: var(--bong-toi); color: var(--chu-bong-toi); border-color: transparent; border-radius: 16px 16px 6px 16px; }
.tin.cua-toi.noi .bong { border-radius: 16px 6px 6px 16px; }
.tin.cua-toi .bong a { color: inherit; }
.tin.bot .bong { border-left: 3px solid var(--chinh); }
.ten-gui { font-size: 12.5px; font-weight: 700; color: var(--chinh); margin-bottom: 2px; }
.nhan-bot { font-size: 10px; font-weight: 700; background: var(--chinh-nhat); color: var(--chinh); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.noi-dung { white-space: pre-wrap; }
.goi-ten { font-weight: 600; color: var(--chinh); }
.tin.cua-toi .goi-ten { color: inherit; text-decoration: underline; }
.goi-toi { background: var(--vang-nhat); border-radius: 4px; padding: 0 3px; }
.goc-tin { font-size: 10.5px; color: var(--chu-nhat); text-align: right; margin-top: 2px; }
.tin.cua-toi .goc-tin { color: rgba(255, 255, 255, .75); }
.tin.da-xoa .noi-dung { font-style: italic; opacity: .7; }
.tin.dang-gui .bong { opacity: .65; }
.tin.loi-gui .bong { outline: 2px solid var(--nguy); outline-offset: 1px; }
.loi-gui-nut { font-size: 12px; color: inherit; border: 0; background: none; padding: 2px 0 0; text-decoration: underline; }
.trich {
  border-left: 3px solid var(--chinh); padding: 3px 8px; margin: 2px 0 6px; font-size: 12.5px;
  background: var(--mem); border-radius: 6px; color: var(--chu-phu);
}
.tin.cua-toi .trich { border-left-color: #fff; background: rgba(255, 255, 255, .14); color: inherit; }
.trich b { display: block; color: var(--chu); font-size: 12px; }
.tin.cua-toi .trich b { color: inherit; }
.tin-anh { display: block; margin: 4px 0; border-radius: 12px; max-width: 100%; height: auto; cursor: zoom-in; background: var(--mem-2); }
.tin-tep {
  display: flex; align-items: center; gap: 10px; margin: 4px 0; padding: 9px 12px; border-radius: 12px;
  background: var(--mem); text-decoration: none; color: inherit; border: 1px solid var(--vien);
}
.tin-tep svg { width: 22px; height: 22px; flex: none; color: var(--chinh); }
.tin.cua-toi .tin-tep { background: rgba(255, 255, 255, .14); border-color: transparent; }
.tin.cua-toi .tin-tep svg { color: inherit; }
.tin-tep .ten { font-weight: 600; overflow-wrap: anywhere; display: block; }
.tin-tep small { display: block; opacity: .75; }
.da-xem { font-size: 11px; color: var(--chu-nhat); text-align: right; margin: 3px 4px 0; }
.thao-tac-tin {
  position: absolute; top: -42px; right: 0; z-index: 3; display: flex; gap: 2px; padding: 4px;
  background: var(--khung); border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong-noi);
}
.tin:not(.cua-toi) .thao-tac-tin { right: auto; left: 0; }
.thao-tac-tin button { border: 0; background: none; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--chu); white-space: nowrap; }
.thao-tac-tin button:hover { background: var(--mem); }
.thao-tac-tin .nut-nguy { color: var(--nguy); }
.dang-go { font-size: 12px; color: var(--chu-phu); padding: 0 20px 4px; min-height: 18px; flex: none; background: var(--mem); }

/* ---------- Ô gõ ---------- */
.khung-go { border-top: 1px solid var(--vien); background: var(--khung); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); flex: none; position: relative; }
@media (min-width: 761px) { .khung-go { padding-bottom: 12px; } }
.khung-go .hang {
  display: flex; gap: 4px; align-items: flex-end; background: var(--mem); border: 1px solid var(--vien);
  border-radius: 14px; padding: 4px; transition: border-color .15s, box-shadow .15s;
}
.khung-go .hang:focus-within { border-color: var(--chinh); box-shadow: 0 0 0 3px var(--chinh-nhat); }
.khung-go textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 9px 6px; border: 0; background: transparent; line-height: 1.4;
}
.khung-go textarea:focus { outline: none; }
.nut-gui { background: var(--chinh); color: #fff; border-radius: 10px; }
.nut-gui:hover { background: var(--chinh-dam); color: #fff; }
.thanh-tra-loi, .thanh-tep { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 0 4px 8px; }
.thanh-tra-loi div { flex: 1; min-width: 0; border-left: 3px solid var(--chinh); padding-left: 10px; }
.thanh-tra-loi div span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chu-phu); }
.thanh-tep { flex-wrap: wrap; }
.the-tep { display: flex; align-items: center; gap: 6px; background: var(--mem); border: 1px solid var(--vien); border-radius: 10px; padding: 4px 4px 4px 10px; max-width: 100%; }
.the-tep span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.the-tep small { color: var(--chu-phu); }
.the-tep button { border: 0; background: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--chu-phu); }
.the-tep button svg { width: 14px; height: 14px; }
.goi-y-ten {
  position: absolute; left: 12px; right: 12px; bottom: 100%; background: var(--khung); border: 1px solid var(--vien);
  border-radius: 14px; box-shadow: var(--bong-noi); list-style: none; margin: 0 0 6px; padding: 6px; max-height: 260px; overflow-y: auto;
}
.goi-y-ten button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; display: flex; gap: 8px; align-items: baseline; }
.goi-y-ten li.chon button, .goi-y-ten button:hover { background: var(--chinh-nhat); }
.goi-y-ten small { color: var(--chu-phu); }

/* ---------- Bảng phụ: tìm, danh bạ, cài đặt, quản trị ---------- */
.bang { position: absolute; inset: 0; background: var(--khung); display: flex; flex-direction: column; z-index: 5; }
.than-bang { flex: 1; overflow-y: auto; padding: 20px; background: var(--mem); }
.than-bang > .o-nhap:first-child { margin-bottom: 14px; }
.ds-dong { list-style: none; margin: 0; padding: 0; background: var(--khung); border: 1px solid var(--vien); border-radius: 14px; overflow: hidden; }
.ds-dong > li { border-top: 1px solid var(--vien); }
.ds-dong > li:first-child { border-top: 0; }
.dong { display: flex; align-items: center; gap: 12px; padding: 11px 16px; width: 100%; border: 0; background: none; text-align: left; flex-wrap: wrap; }
button.dong:hover { background: var(--mem); }
.dong .giua { flex: 1; min-width: 160px; }
.dong .giua b { font-weight: 600; }
.dong .giua small { display: block; color: var(--chu-phu); font-size: 12.5px; }
.ket-qua-tim { padding: 12px 16px; }
.ket-qua-tim small { color: var(--chu-phu); margin-bottom: 2px; }
.ket-qua-tim mark { background: var(--vang-nhat); color: var(--chu); border-radius: 3px; padding: 0 2px; }
h3.muc { font-size: 12px; color: var(--chu-nhat); font-weight: 600; margin: 24px 4px 10px; }
h3.muc:first-child { margin-top: 0; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tab { display: flex; gap: 4px; padding: 10px 14px; flex: none; overflow-x: auto; border-bottom: 1px solid var(--vien); }
.tab button { border: 0; background: none; padding: 7px 14px; font-weight: 600; font-size: 13.5px; color: var(--chu-phu); border-radius: 999px; white-space: nowrap; }
.tab button:hover { background: var(--mem); }
.tab button.chon { color: var(--chinh); background: var(--chinh-nhat); }
.nhan-trang-thai {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 9px 2px 8px; border-radius: 999px;
  background: var(--mem-2); color: var(--chu-phu); white-space: nowrap; margin: 4px 4px 0 0;
}
.nhan-trang-thai::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nhan-trang-thai.xanh { background: var(--xanh-la-nhat); color: var(--xanh-la); }
.nhan-trang-thai.lam { background: var(--chinh-nhat); color: var(--chinh); }
.nhan-trang-thai.vang { background: var(--vang-nhat); color: var(--vang); }
.nhan-trang-thai.do { background: var(--nguy-nhat); color: var(--nguy); }
.link-moi { word-break: break-all; background: var(--mem); border: 1px dashed var(--vien); padding: 10px 12px; border-radius: var(--bo-nho); font-size: 12.5px; margin-top: 8px; user-select: all; font-family: ui-monospace, Consolas, monospace; }
.hop-chon { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.hop-chon input { width: 18px; height: 18px; accent-color: var(--chinh); }
.huong-dan { background: var(--khung); border: 1px solid var(--vien); border-radius: 14px; padding: 16px 18px; }
.huong-dan > p:first-child { margin-top: 0; }
.huong-dan ol { margin: 6px 0 0; padding-left: 20px; }
.chon-viec { width: auto; min-height: 34px; padding: 4px 10px; flex: none; font-size: 13px; border-radius: 999px; }

/* Ô số liệu kiểu bảng điều khiển */
.o-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px; }
.o-so div { border-radius: 14px; padding: 16px; background: var(--chinh-nhat); }
.o-so div:nth-child(2) { background: var(--xanh-la-nhat); }
.o-so div:nth-child(3) { background: var(--vang-nhat); }
.o-so div:nth-child(4) { background: var(--tim-nhat); }
.o-so b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.o-so span { color: var(--chu-phu); font-size: 12.5px; }

/* ---------- Xem ảnh, thông báo ---------- */
.xem-anh { position: fixed; inset: 0; background: rgba(8, 14, 28, .92); z-index: 20; display: grid; place-items: center; }
.xem-anh img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.xem-anh .dong-xem { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; color: #fff; background: rgba(255, 255, 255, .15); }
.xem-anh .tai-ve { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; }
#thong-bao {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); z-index: 30;
  background: #0f1b3d; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); box-shadow: var(--bong-noi);
}
#thong-bao.hien { opacity: 1; transform: translate(-50%, 0); }

/* Màu ảnh đại diện theo mã người */
.mau-0 { background: #1f5fae; }
.mau-1 { background: #1f9d63; }
.mau-2 { background: #6b4fd1; }
.mau-3 { background: #d06a2b; }
.mau-4 { background: #0e8a9a; }
.mau-5 { background: #b5487a; }

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

.mo-them { margin: 16px 0 4px; }
.mo-them > summary { list-style: none; display: inline-flex; }
.mo-them > summary::-webkit-details-marker { display: none; }
.mo-them[open] > summary { margin-bottom: 12px; background: var(--khung); color: var(--chinh); border-color: var(--vien); }