:root {
  --mau-do: #A2242F;
  --mau-do-dam: #861C25;
  --mau-do-nhat: #FDF2F3;
  --mau-kem: #F8F5F0;
  --mau-kem-dam: #F2EAE0;
  --mau-xanh: #4A6B48;
  --mau-xanh-nhat: #EBF2EA;
  --mau-go: #D4B895;
  --mau-go-nhat: #F5ECE0;
  --mau-than: #2C2A29;
  --mau-xam: #6E6762;
  --mau-trang: #FFFFFF;
  --mau-cam: #B85D19;
  --mau-cam-nhat: #FFF3E6;
  --font-tieu-de: "Playfair Display", Georgia, serif;
  --font-chu: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--mau-kem);
  color: var(--mau-than);
  font-family: var(--font-chu);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.an { display: none !important; }

h1, h2, h3, .ten-ung-dung, .tieu-de-lon, .tieu-de-the, .tieu-de-ngay {
  font-family: var(--font-tieu-de);
  color: var(--mau-than);
  margin: 0;
}

a { color: var(--mau-do); text-decoration: underline; }

button, input, select, textarea {
  font-family: var(--font-chu);
  font-size: 16px;
  color: var(--mau-than);
}

.thanh-mat-ket-noi {
  background-color: var(--mau-do);
  color: var(--mau-kem);
  text-align: center;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 14px;
}

/* Nút chuẩn (>= 44px) */
.nut, .chip, .nut-tab, .nut-tab-duoi {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--mau-go);
  background-color: var(--mau-trang);
  color: var(--mau-than);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.nut:disabled, .chip:disabled, .nut-tab:disabled, .nut-tab-duoi:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nut-chinh { background-color: var(--mau-do); border-color: var(--mau-do); color: var(--mau-kem); }
.nut-chinh:hover:not(:disabled) { background-color: var(--mau-do-dam); }
.nut-xanh { background-color: var(--mau-xanh); border-color: var(--mau-xanh); color: var(--mau-trang); }
.nut-vien { background-color: var(--mau-trang); border-color: var(--mau-go); color: var(--mau-than); }
.nut-nho { padding: 6px 12px; font-size: 14px; }
.nut-rong { width: 100%; }
.nut-truc.dang-truc { background-color: var(--mau-xanh); border-color: var(--mau-xanh); color: var(--mau-trang); }
.nut-truc.nghi-truc { background-color: var(--mau-kem-dam); border-color: var(--mau-go); color: var(--mau-than); }

.nhan-o { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.nhan-nho { font-weight: 600; font-size: 14px; }

.o-nhap {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--mau-go);
  border-radius: 8px;
  background-color: var(--mau-trang);
  color: var(--mau-than);
}

.o-nhap:focus { outline: 2px solid var(--mau-do); outline-offset: 1px; }
.o-nhap-nho { width: auto; }

.chu-loi {
  color: var(--mau-do);
  background-color: var(--mau-do-nhat);
  border: 1px solid var(--mau-do);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  font-size: 14px;
  font-weight: 600;
}

/* Màn hình đăng nhập */
.man-dang-nhap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--mau-kem);
}

.the-dang-nhap {
  width: 100%;
  max-width: 400px;
  background-color: var(--mau-trang);
  border: 1px solid var(--mau-go);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 6px 20px rgba(44, 42, 41, 0.08);
}

.dau-dang-nhap { text-align: center; margin-bottom: 20px; }
.logo-lon { width: 60px; height: 60px; border-radius: 14px; margin-bottom: 10px; }
.tieu-de-lon { font-size: 26px; color: var(--mau-do); }
.phu-de { margin: 4px 0 0; color: var(--mau-xam); font-size: 14px; }
.form-doc { display: flex; flex-direction: column; gap: 12px; }

/* Màn hình chính */
.man-chinh {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.thanh-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background-color: var(--mau-trang);
  border-bottom: 1px solid var(--mau-go);
  flex-shrink: 0;
}

.cum-thuong-hieu { display: flex; align-items: center; gap: 8px; }
.logo-nho { width: 34px; height: 34px; border-radius: 8px; }
.ten-ung-dung { font-size: 19px; font-weight: 700; color: var(--mau-do); }
.tab-ngang { display: none; gap: 6px; }
.nut-tab.dang-chon, .nut-tab-duoi.dang-chon, .chip.dang-chon {
  background-color: var(--mau-do);
  border-color: var(--mau-do);
  color: var(--mau-kem);
}

.cum-dieu-khien { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ten-nhan-vien { font-weight: 600; font-size: 14px; padding: 0 4px; }

.hop-chuong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: 8px;
  background-color: var(--mau-kem);
  border: 1px solid var(--mau-go);
  font-weight: 700;
}

.hop-chuong.co-thong-bao {
  background-color: var(--mau-do-nhat);
  border-color: var(--mau-do);
  color: var(--mau-do);
}

.huy-hieu-dem {
  background-color: var(--mau-do);
  color: var(--mau-kem);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
}

.nut-tab.dang-chon .huy-hieu-dem,
.nut-tab-duoi.dang-chon .huy-hieu-dem {
  background-color: var(--mau-kem);
  color: var(--mau-do);
}

.khung-noi-dung { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

.thanh-chip {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  background-color: var(--mau-kem);
  border-bottom: 1px solid var(--mau-go);
  flex-shrink: 0;
}

.chip { white-space: nowrap; font-size: 13px; padding: 6px 12px; }

/* Bố cục chia đôi & 1 cột */
.khung-chia-doi { flex: 1; display: flex; overflow: hidden; }
.cot-danh-sach { width: 100%; display: flex; flex-direction: column; overflow: hidden; background-color: var(--mau-kem); }
.cot-chi-tiet { display: none; width: 100%; flex-direction: column; overflow: hidden; background-color: var(--mau-kem); }
.khung-chia-doi.dang-mo-chi-tiet .cot-danh-sach { display: none; }
.khung-chia-doi.dang-mo-chi-tiet .cot-chi-tiet { display: flex; }

.danh-sach-cuon {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dong-muc {
  background-color: var(--mau-trang);
  border: 1px solid var(--mau-go);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.dong-muc:hover, .dong-muc.dang-chon { background-color: var(--mau-go-nhat); }
.dong-muc.dang-chon { border-color: var(--mau-do); }
.dong-muc.dong-cho-nguoi { border-left: 5px solid var(--mau-do); }

.hang-tren-muc { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.cum-nhan, .thong-tin-chat-mo, .cum-nut-hanh-dong, .hang-dau-chat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Nhãn / Badge */
.nhan {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--mau-go);
  background-color: var(--mau-kem);
  color: var(--mau-than);
}

.nhan-do { background-color: var(--mau-do); border-color: var(--mau-do); color: var(--mau-kem); }
.nhan-do-nhat { background-color: var(--mau-do-nhat); border-color: var(--mau-do); color: var(--mau-do); }
.nhan-xanh { background-color: var(--mau-xanh-nhat); border-color: var(--mau-xanh); color: var(--mau-xanh); }
.nhan-cam { background-color: var(--mau-cam-nhat); border-color: var(--mau-cam); color: var(--mau-cam); }
.nhan-chua-co {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  background-color: var(--mau-kem-dam);
  color: var(--mau-xam);
  border: 1px solid var(--mau-go);
}

.ten-khach { font-weight: 700; font-size: 15px; }
.tin-cuoi { color: var(--mau-xam); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly-do-chuyen { font-size: 13px; color: var(--mau-do); font-weight: 600; }
.thoi-gian-nho { font-size: 12px; color: var(--mau-xam); }

/* Chi tiết hội thoại & bong bóng */
.trang-thai-trong { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--mau-xam); padding: 24px; text-align: center; }
.khung-chat-mo, .khung-goi-mo, .khung-mot-cot { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.dau-chi-tiet, .thanh-cong-cu {
  padding: 8px 12px;
  background-color: var(--mau-trang);
  border-bottom: 1px solid var(--mau-go);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.khu-phieu-dinh-kem {
  padding: 6px 12px;
  background-color: var(--mau-go-nhat);
  border-bottom: 1px solid var(--mau-go);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 110px;
  overflow-y: auto;
}

.the-phieu-nho {
  background-color: var(--mau-trang);
  border: 1px solid var(--mau-go);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.khung-tin-nhan, .danh-sach-the, .noi-dung-goi-mo {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dong-bong { display: flex; flex-direction: column; max-width: 82%; }
.dong-bong.ben-khach { align-self: flex-start; }
.dong-bong.ben-ai, .dong-bong.ben-nhan-vien { align-self: flex-end; }
.dong-bong.ben-he-thong { align-self: center; max-width: 92%; }

.bong-tin {
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--mau-go);
  background-color: var(--mau-trang);
}

.ben-ai .bong-tin { background-color: var(--mau-xanh-nhat); border-color: var(--mau-xanh); }
.ben-nhan-vien .bong-tin { background-color: var(--mau-go-nhat); border-color: var(--mau-go); }
.ben-he-thong .bong-tin {
  background-color: var(--mau-kem-dam);
  border-color: var(--mau-go);
  font-size: 13px;
  color: var(--mau-xam);
  text-align: center;
  padding: 5px 10px;
}

.nhan-nguoi-gui { font-size: 12px; font-weight: 700; margin-bottom: 3px; color: var(--mau-xam); }
.ben-ai .nhan-nguoi-gui { color: var(--mau-xanh); }
.noi-dung-tin { white-space: pre-wrap; word-break: break-word; }
.khu-dinh-kem { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.anh-dinh-kem { max-width: 220px; max-height: 220px; border-radius: 8px; border: 1px solid var(--mau-go); display: block; }
.loi-gui-tin { margin-top: 4px; color: var(--mau-do); font-size: 13px; font-weight: 600; }

.khung-tra-loi { padding: 8px 12px; background-color: var(--mau-trang); border-top: 1px solid var(--mau-go); }
.hang-nhap-tin { display: flex; gap: 8px; align-items: flex-end; }
.o-tin-nhan { flex: 1; resize: vertical; min-height: 48px; max-height: 140px; }

.cum-loc-ngay, .cum-tao-dat-ban { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.the-muc {
  background-color: var(--mau-trang);
  border: 1px solid var(--mau-go);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.the-muc.the-gap { border-left: 5px solid var(--mau-do); }
.tieu-de-ngay { font-size: 17px; padding: 6px 4px 2px; border-bottom: 1px solid var(--mau-go); color: var(--mau-do); }

.the-form {
  margin: 10px 12px 0;
  padding: 14px;
  background-color: var(--mau-trang);
  border: 1px solid var(--mau-go);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 65vh;
  overflow-y: auto;
}

.tieu-de-the { font-size: 18px; }
.luoi-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.may-nghe-ghi-am { width: 100%; margin: 4px 0; }

.tab-duoi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background-color: var(--mau-trang);
  border-top: 1px solid var(--mau-go);
  flex-shrink: 0;
}

.nut-tab-duoi { padding: 6px 4px; font-size: 13px; }

.hop-thong-bao {
  position: fixed;
  bottom: 70px;
  right: 16px;
  left: 16px;
  max-width: 420px;
  margin-left: auto;
  background-color: var(--mau-do);
  color: var(--mau-kem);
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(44, 42, 41, 0.22);
  z-index: 1000;
}

@media (min-width: 900px) {
  .tab-ngang { display: flex; }
  .tab-duoi, .nut-quay-lai { display: none; }
  .cot-danh-sach { width: 370px; min-width: 330px; border-right: 1px solid var(--mau-go); }
  .cot-chi-tiet, .khung-chia-doi.dang-mo-chi-tiet .cot-danh-sach { display: flex; }
  .cot-chi-tiet { flex: 1; }
  .luoi-form { grid-template-columns: repeat(3, 1fr); }
  .danh-sach-the { max-width: 960px; width: 100%; margin: 0 auto; }
  .hop-thong-bao { bottom: 20px; left: auto; }
}

/* Số điện thoại / tệp đính kèm: đủ lớn để bấm bằng ngón tay */
a.lien-ket-bam { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* Báo động WhatsApp hỏng (chỉ chủ / quản lý) */
.thanh-canh-bao-wa {
  background-color: var(--mau-do);
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
}