/* Hop thu Ngai - mobile-first, khong build step.
   Bang mau lay dung tu ngai-web/site/assets/css/ngai.css */
:root {
  --xanh: #578736;
  --xanh-tham: #2e542d;
  --xanh-nhat: #7ba75c;
  --cam: #f8b000;
  --kem: #f6f3ea;

  --nen: var(--kem);
  --the: #fff;
  --chu: #24301f;
  --chu-mo: #6b7563;
  --vien: #e2ded1;
  --do: #b3261e;
  --do-nen: #fdecea;
  --vang-nen: #fff6dd;

  --r: 12px;
  --bong: 0 1px 3px rgba(36, 48, 31, .09), 0 1px 2px rgba(36, 48, 31, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --nen: #171a14;
    --the: #1f241c;
    --chu: #e9ece4;
    --chu-mo: #9aa392;
    --vien: #333a2e;
    --do: #f2b8b5;
    --do-nen: #3a201e;
    --vang-nen: #3a3115;
    --bong: none;
  }
}
:root[data-theme='dark'] {
  --nen: #171a14; --the: #1f241c; --chu: #e9ece4; --chu-mo: #9aa392;
  --vien: #333a2e; --do: #f2b8b5; --do-nen: #3a201e; --vang-nen: #3a3115; --bong: none;
}
:root[data-theme='light'] {
  --nen: var(--kem); --the: #fff; --chu: #24301f; --chu-mo: #6b7563;
  --vien: #e2ded1; --do: #b3261e; --do-nen: #fdecea; --vang-nen: #fff6dd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 16px/1.5 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--xanh-tham); }
@media (prefers-color-scheme: dark) { a { color: var(--xanh-nhat); } }

/* ---- Dang nhap ---- */
.giua {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

.the {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--r);
  box-shadow: var(--bong);
  padding: 28px 24px;
  width: 100%;
  max-width: 380px;
}

.hieu {
  text-align: center;
  margin-bottom: 22px;
}
.hieu b {
  display: block;
  font-size: 26px;
  letter-spacing: .5px;
  color: var(--xanh-tham);
}
@media (prefers-color-scheme: dark) { .hieu b { color: var(--xanh-nhat); } }
.hieu span { color: var(--chu-mo); font-size: 14px; }

label { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--chu-mo); }

input, textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--vien);
  border-radius: 9px;
  background: var(--nen);
  color: var(--chu);
  /* 16px de iOS khong tu phong to khi bam vao o nhap */
  font: 16px/1.4 inherit;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--xanh-nhat);
  outline-offset: 1px;
  border-color: var(--xanh);
}

button {
  font: 600 16px/1.4 inherit;
  border: 0;
  border-radius: 9px;
  padding: 12px 16px;
  background: var(--xanh-tham);
  color: #fff;
  cursor: pointer;
  min-height: 44px; /* vung bam du lon tren dien thoai */
}
button:hover:not(:disabled) { background: var(--xanh); }
button:disabled { opacity: .55; cursor: default; }
button.phu { background: transparent; color: var(--chu); border: 1px solid var(--vien); }
button.phu:hover:not(:disabled) { background: var(--nen); }
button.rong { width: 100%; margin-top: 20px; }
/* Nut phu tren thanh dau - van giu du cao de bam tren dien thoai */
button.nho { padding: 8px 13px; min-height: 38px; font-size: 14px; }

/* Duong dan trong nhu nut phu */
.nut-lien {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  min-height: 38px;
  border: 1px solid var(--vien);
  border-radius: 9px;
  font: 600 14px/1.4 inherit;
  color: var(--chu);
  text-decoration: none;
  white-space: nowrap;
}
.nut-lien:hover { background: var(--nen); }

.loi {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--do-nen);
  color: var(--do);
  font-size: 14px;
}
.loi:empty { display: none; }

/* ---- Khung chinh ---- */
.dau {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--the);
  border-bottom: 1px solid var(--vien);
}
.dau b { color: var(--xanh-tham); font-size: 18px; }
@media (prefers-color-scheme: dark) { .dau b { color: var(--xanh-nhat); } }
.dau .day { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dau small { color: var(--chu-mo); }

.loc {
  position: sticky;
  top: 57px;
  z-index: 4;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  background: var(--nen);
  border-bottom: 1px solid var(--vien);
  scrollbar-width: none;
}
.loc::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--vien);
  background: var(--the);
  color: var(--chu-mo);
  font-size: 14px;
  cursor: pointer;
  min-height: 0;
}
.chip[aria-pressed='true'] {
  background: var(--xanh-tham);
  border-color: var(--xanh-tham);
  color: #fff;
}

.ds { list-style: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom); }

.ds li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  border-bottom: 1px solid var(--vien);
  cursor: pointer;
}
.ds li:hover { background: var(--the); }

.avt {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--xanh-nhat);
  color: #fff;
  font-weight: 700;
}

.than { min-width: 0; flex: 1; }
.than .ten { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.than .xem {
  color: var(--chu-mo);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nhan {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--vien);
  color: var(--chu-mo);
  font-weight: 500;
}
.nhan.cs { background: var(--kem); }
@media (prefers-color-scheme: dark) { .nhan.cs { background: transparent; } }
.nhan.canh { background: var(--vang-nen); border-color: var(--cam); color: #7a5600; }
@media (prefers-color-scheme: dark) { .nhan.canh { color: var(--cam); } }

.ben { flex: 0 0 auto; text-align: right; color: var(--chu-mo); font-size: 12px; }
.cham { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--xanh); }

.trong { padding: 48px 24px; text-align: center; color: var(--chu-mo); }

/* ---- Khung chat ---- */
.trang-chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
.trang-chat .dau b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bang { padding: 10px 16px 0; display: grid; gap: 8px; }
.canh-do, .canh-vang {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.45;
}
.canh-do { background: var(--do-nen); color: var(--do); }
.canh-vang { background: var(--vang-nen); color: #7a5600; }
@media (prefers-color-scheme: dark) { .canh-vang { color: var(--cam); } }

.chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bong {
  max-width: min(78%, 520px);
  padding: 9px 13px;
  border-radius: 15px;
  background: var(--the);
  border: 1px solid var(--vien);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.bong.trai { align-self: flex-start; border-bottom-left-radius: 5px; }
.bong.phai {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: var(--xanh-tham);
  border-color: var(--xanh-tham);
  color: #fff;
}
/* Tin do bot soan - vien xanh nhat de nhan vien phan biet ngay */
.bong.bot { background: transparent; border: 2px dashed var(--xanh-nhat); color: var(--chu); }
.bong.loi-gui { border-color: var(--do); }

.bong .ai { font-size: 11px; font-weight: 600; opacity: .75; margin-bottom: 3px; }
.bong .noi { white-space: pre-wrap; }
.bong .gio { font-size: 11px; opacity: .65; margin-top: 4px; }
.bong img { max-width: 100%; border-radius: 9px; margin-top: 6px; display: block; }

.soan {
  border-top: 1px solid var(--vien);
  background: var(--the);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.soan-hang { display: flex; gap: 8px; align-items: flex-end; }
.soan textarea { resize: none; max-height: 140px; }
.soan button { flex: 0 0 auto; }

.khoa {
  font-size: 13px;
  color: var(--chu-mo);
  padding: 0 2px 8px;
}
.khoa.do { color: var(--do); font-weight: 600; }

.soan .loi { margin-top: 8px; }

/* Thanh hanh dong trong khung chat */
.trang-chat .loc { top: 0; position: static; }
.trang-chat .loc select.chip {
  padding: 6px 10px;
  max-width: 46vw;
  appearance: auto;
}

/* Ngan cau tra loi mau */
.mau-ngan {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--vien);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--nen);
}
.mau-mot {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--chu);
  border: 0;
  border-bottom: 1px solid var(--vien);
  border-radius: 0;
  padding: 10px 12px;
  font-weight: 400;
  font-size: 14px;
}
.mau-mot:last-child { border-bottom: 0; }
.mau-mot:hover { background: var(--the); }
.mau-mot b { color: var(--xanh-tham); }
@media (prefers-color-scheme: dark) { .mau-mot b { color: var(--xanh-nhat); } }
.mau-xem { color: var(--chu-mo); font-size: 13px; margin-top: 2px; }
.mau-nhom {
  position: sticky;
  top: 0;
  padding: 6px 12px;
  background: var(--the);
  border-bottom: 1px solid var(--vien);
  font-size: 12px;
  font-weight: 600;
  color: var(--chu-mo);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.mau-trong { padding: 14px; color: var(--chu-mo); font-size: 14px; text-align: center; }

/* ---- The dat lich ---- */
.dat-ngan {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--vien);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--nen);
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}
.dat-nhan { font-size: 12px; font-weight: 600; color: var(--chu-mo); text-transform: uppercase; letter-spacing: .4px; }
.dat-form { display: grid; gap: 8px; }
.dat-hang { display: flex; gap: 8px; }
.dat-o { display: block; flex: 1; min-width: 0; margin: 0; }
.dat-o span { display: block; font-size: 12px; color: var(--chu-mo); margin-bottom: 3px; }
.dat-o input, .dat-o select { padding: 8px 10px; }
.dat-nut { display: flex; flex-wrap: wrap; gap: 8px; }
.dat-chip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--chu-mo); }
.dat-tong { font-size: 13px; color: var(--chu-mo); }

.dat-don {
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--the);
  display: grid;
  gap: 5px;
}
.dat-don.mo { opacity: .55; }
.dat-don-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dat-don-phu { font-size: 13px; color: var(--chu-mo); }
.dat-soan { display: grid; gap: 8px; margin-top: 4px; }
.dat-soan textarea { resize: vertical; font-size: 14px; }

.dat-bao { padding: 9px 11px; border-radius: 9px; font-size: 14px; display: grid; gap: 6px; }
.dat-bao.do { background: var(--do-nen); color: var(--do); }
.dat-bao.xanh { background: var(--vang-nen); color: #7a5600; }
@media (prefers-color-scheme: dark) { .dat-bao.xanh { color: var(--cam); } }

/* ---- Trang lich ngay ---- */
.lich-thanh { display: flex; gap: 8px; padding: 10px 16px; align-items: flex-end; flex-wrap: wrap; }
.lich-thanh .dat-o { flex: 0 1 170px; }

.lich-ds { list-style: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom); }
.lich-ds li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vien);
}
.lich-gio { flex: 0 0 62px; font-weight: 700; color: var(--xanh-tham); }
@media (prefers-color-scheme: dark) { .lich-gio { color: var(--xanh-nhat); } }
.lich-gio small { display: block; font-weight: 400; color: var(--chu-mo); }

.suc-chua { padding: 12px 16px; display: grid; gap: 7px; border-bottom: 1px solid var(--vien); }
.suc-chua-mot { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.suc-chua-mot > span:first-child { flex: 0 0 150px; color: var(--chu-mo); }
.suc-chua-mot input { width: 78px; padding: 6px 8px; }
.thanh-do {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--vien);
  overflow: hidden;
  min-width: 60px;
}
.thanh-do i { display: block; height: 100%; background: var(--xanh); }
.thanh-do i.day { background: var(--do); }

/* ---- Ban nhap tra loi cua may ----
   Nam ngay tren o soan, khong nam trong dong chat: no CHUA phai tin nhan, va
   khong duoc nhin nham thanh tin da gui cho khach. */
.goi-y-ngan {
  max-height: 45vh;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.goi-y {
  border: 1px solid var(--vien);
  border-left: 3px solid var(--xanh);
  border-radius: 10px;
  background: var(--the);
  padding: 9px 11px;
  display: grid;
  gap: 6px;
}
.goi-y-dau {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  font-size: 13px;
}
.goi-y-dau small { color: var(--chu-mo); }
.goi-y-chu { white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.goi-y-canh {
  font-size: 13px;
  background: var(--vang-nen);
  color: #7a5600;
  border-radius: 8px;
  padding: 6px 8px;
}
@media (prefers-color-scheme: dark) { .goi-y-canh { color: var(--cam); } }
.goi-y-nut { display: flex; flex-wrap: wrap; gap: 8px; }