/* Danh sách liệt sĩ — giao diện ưu tiên điện thoại, chữ lớn, tương phản cao.
   Người dùng chính là thân nhân liệt sĩ, phần đông cao tuổi: mọi cỡ chữ,
   vùng bấm và khoảng cách bên dưới đều lấy mốc rộng rãi hơn web thông thường. */

:root {
  --nen: #faf7f2;
  --the: #ffffff;
  --chu: #17150f;
  --chu-nhat: #56514a;
  --vien: #ded6c9;
  --do: #8c1c13;
  --do-dam: #6b1009;
  --vang: #a97c12;
  --nen-nhe: #f3eee4;
  --bong: 0 1px 2px rgba(23, 21, 15, .06), 0 4px 14px rgba(23, 21, 15, .05);
  --bo-goc: 14px;
  --rong: 44rem;
}

* { box-sizing: border-box; }

html {
  /* 18px làm mốc: đây là ngưỡng đọc thoải mái không cần kính lúp. */
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
  overflow-wrap: break-word;
}

main {
  max-width: var(--rong);
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 .85rem; }

a { color: var(--do-dam); }

/* Bàn phím và trình đọc màn hình phải luôn thấy rõ vị trí đang đứng. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--vang);
  outline-offset: 2px;
}

/* --- Đầu trang --- */

.site-header {
  background: var(--do);
  padding: .7rem 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: var(--rong);
  margin: 0 auto;
  color: #fff;
  text-decoration: none;
}

.brand-star { color: #ffd257; font-size: 1.6rem; line-height: 1; }
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 1.15rem; letter-spacing: .01em; }
.brand-text small { font-size: .8rem; opacity: .9; }

/* --- Mở đầu --- */

.mo-dau { padding: 1.4rem 0 .4rem; text-align: center; }
.mo-dau h1 { font-size: 1.75rem; }
.dan-nhap { color: var(--chu-nhat); font-size: 1.05rem; margin-bottom: 0; }

/* --- Ô tra cứu --- */

.tim-kiem {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  padding: 1rem;
  margin: 1rem 0 1.5rem;
}

.nhan-chinh {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.o-nhap { display: flex; gap: .5rem; }

.o-nhap input {
  flex: 1;
  min-width: 0;
  /* 1.15rem để iOS không tự phóng to trang khi chạm vào ô nhập. */
  font-size: 1.15rem;
  padding: .85rem .9rem;
  min-height: 3.2rem;
  border: 2px solid var(--vien);
  border-radius: 10px;
  background: #fff;
  color: var(--chu);
}

.o-nhap input:focus { border-color: var(--do); }

.nut-tim {
  min-height: 3.2rem;
  padding: 0 1.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: var(--do);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.nut-tim:active { background: var(--do-dam); }

/* Dùng flex thay cho line-height cố định: nhãn tiếng Việt dài dễ xuống
   dòng, mà line-height bằng chiều cao nút sẽ đẩy dòng thứ hai lệch hẳn. */
.nut-rong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.25rem;
  padding: .7rem 1.2rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
}

.goi-y-go {
  margin: .7rem 0 0;
  font-size: .95rem;
  color: var(--chu-nhat);
}

/* --- Bộ lọc thu gọn --- */

.loc-them { margin-top: .9rem; border-top: 1px solid var(--vien); padding-top: .7rem; }

.loc-them > summary {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--do-dam);
  cursor: pointer;
  padding: .5rem 0;
  list-style: none;
}

.loc-them > summary::-webkit-details-marker { display: none; }
.loc-them > summary::before { content: "▸ "; }
.loc-them[open] > summary::before { content: "▾ "; }

.loc-noi-dung { padding-top: .5rem; }

.loc-noi-dung label {
  display: block;
  font-weight: 600;
  margin: .8rem 0 .3rem;
}

.loc-noi-dung select,
.loc-noi-dung input {
  width: 100%;
  font-size: 1.05rem;
  min-height: 3rem;
  padding: .6rem;
  border: 2px solid var(--vien);
  border-radius: 10px;
  background: #fff;
  color: var(--chu);
}

.hang-doi { display: flex; gap: .75rem; }
.hang-doi > div { flex: 1; }

.nut-phu {
  width: 100%;
  margin-top: 1rem;
  min-height: 3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--do-dam);
  background: var(--nen-nhe);
  border: 2px solid var(--do);
  border-radius: 10px;
  cursor: pointer;
}

/* --- Số liệu --- */

.so-lieu {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.75rem;
}

.the-so {
  flex: 1;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: .8rem .5rem;
  text-align: center;
}

.the-so b { display: block; font-size: 1.3rem; color: var(--do-dam); }
.the-so span { font-size: .85rem; color: var(--chu-nhat); }

/* --- Khối chỉ dẫn --- */

.chi-dan { margin-bottom: 1.75rem; }
.ds-buoc { padding-left: 1.3rem; margin: 0 0 .85rem; }
.ds-buoc li { margin-bottom: .6rem; }

.lien-ket-lon {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .5rem 0;
}

.ds-tinh { display: flex; flex-wrap: wrap; gap: .5rem; }

.ds-tinh a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 999px;
  padding: .55rem .9rem;
  text-decoration: none;
  font-size: .98rem;
}

.ds-tinh a span { color: var(--chu-nhat); font-size: .85rem; }

/* --- Kết quả --- */

.tom-tat { margin-bottom: 1rem; font-size: 1.05rem; }
.tom-tat p { margin-bottom: .4rem; }
.ghi-chu { color: var(--chu-nhat); font-size: .95rem; }
.the-loc { display: flex; flex-wrap: wrap; gap: .4rem; }

.the {
  background: var(--nen-nhe);
  border: 1px solid var(--vien);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .9rem;
}

.ds-ket-qua { list-style: none; margin: 0; padding: 0; }
.ds-ket-qua li { margin-bottom: .85rem; }

/* Cả thẻ là một vùng bấm lớn — ngón tay run vẫn chạm trúng. */
.the-ls {
  display: block;
  background: var(--the);
  border: 1px solid var(--vien);
  border-left: 5px solid var(--do);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--chu);
}

.the-ls:active { background: var(--nen-nhe); }

.ls-ten {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--do-dam);
  margin-bottom: .35rem;
}

.ls-dong { display: block; font-size: 1rem; margin-bottom: .15rem; }
.ls-dong i { font-style: normal; color: var(--chu-nhat); }

.ls-mo {
  display: inline-block;
  margin-top: .45rem;
  background: var(--nen-nhe);
  border-radius: 8px;
  padding: .3rem .6rem;
  font-weight: 600;
  font-size: .98rem;
}

.ls-xem {
  display: block;
  margin-top: .5rem;
  font-weight: 600;
  color: var(--do);
}

/* --- Phân trang --- */

.phan-trang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: 1.5rem;
}

.nut-trang {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.2rem;
  padding: .5rem .8rem;
  background: var(--the);
  border: 2px solid var(--do);
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.vi-tri-trang {
  flex: 1 1 100%;
  order: 3;
  text-align: center;
  color: var(--chu-nhat);
}

/* --- Không có kết quả --- */

.khong-thay, .thong-bao {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: 1.2rem;
}

.khong-thay ul { padding-left: 1.3rem; }
.khong-thay li { margin-bottom: .5rem; }
.thong-bao { font-size: 1.05rem; }

/* --- Trang chi tiết --- */

.quay-lai {
  display: inline-block;
  padding: .7rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}

.ho-so {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  overflow: hidden;
}

.ho-so-dau {
  background: var(--do);
  color: #fff;
  padding: 1.2rem 1.1rem;
  text-align: center;
}

.danh-xung {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffd257;
}

.ho-so-dau h1 { font-size: 1.8rem; margin: .2rem 0; }
.ma-ho-so { margin: 0; font-size: .9rem; opacity: .85; }

.khoi { padding: 1.1rem; border-top: 1px solid var(--vien); }
.khoi:first-of-type { border-top: none; }
.khoi h2 { font-size: 1.15rem; color: var(--do-dam); }
.khoi-nhe { background: var(--nen-nhe); font-size: .98rem; }

.bang-tt { margin: 0; }
.bang-tt dt { font-size: .92rem; color: var(--chu-nhat); }
.bang-tt dd {
  margin: 0 0 .8rem;
  font-size: 1.1rem;
  font-weight: 600;
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--vien);
}
.bang-tt dd:last-child { border-bottom: none; margin-bottom: 0; }

.khoi-mo .ten-nghia-trang { font-size: 1.25rem; font-weight: 700; margin-bottom: .2rem; }
.dia-chi-nghia-trang { color: var(--chu-nhat); }

.vi-tri-mo { margin: 1rem 0; }
.nhan-mo { font-weight: 700; margin-bottom: .5rem; }

.o-mo { display: flex; flex-wrap: wrap; gap: .5rem; }

.o-mo span {
  flex: 1 1 40%;
  background: var(--nen-nhe);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: .6rem;
  text-align: center;
}

.o-mo i { display: block; font-style: normal; font-size: .85rem; color: var(--chu-nhat); }
.o-mo b { font-size: 1.35rem; color: var(--do-dam); }

.mo-goc { margin: .6rem 0 0; font-size: .88rem; color: var(--chu-nhat); }

.mo-nguyen-van {
  background: var(--nen-nhe);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: .7rem;
  font-weight: 600;
  margin: 0;
}

.loc-dan { font-size: .95rem; color: var(--chu-nhat); margin: 0 0 .3rem; }

.canh-bao-loc {
  background: #fdf6e3;
  border-left: 4px solid var(--vang);
  border-radius: 8px;
  padding: .7rem .8rem;
  font-size: .95rem;
  margin: .6rem 0 0;
}

.ly-do {
  background: #fdf6e3;
  border-left: 4px solid var(--vang);
  border-radius: 8px;
  padding: .8rem;
}

.nut-ban-do {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  min-height: 3.2rem;
  padding: .7rem 1rem;
  line-height: 1.35;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: var(--do);
  border-radius: 10px;
  text-decoration: none;
}

.chua-ro { color: var(--chu-nhat); }

.khoi-trung { background: #fdf6e3; }
.khoi-trung h2 { color: var(--vang); }

.ds-ban-ghi { list-style: none; margin: .5rem 0 0; padding: 0; }
.ds-ban-ghi li { margin-bottom: .6rem; }

.ds-ban-ghi a {
  display: block;
  background: var(--the);
  border: 2px solid var(--vang);
  border-radius: 10px;
  padding: .8rem;
  text-decoration: none;
  color: var(--chu);
}

.ds-ban-ghi b { display: block; color: var(--do-dam); font-size: 1.05rem; }
.ds-ban-ghi span { display: block; font-size: .95rem; }
.ds-ban-ghi .bg-them { font-weight: 600; margin-top: .2rem; }
.ds-ban-ghi .bg-nt { color: var(--chu-nhat); }

.ds-lien-quan { list-style: none; margin: 0; padding: 0; }
.ds-lien-quan li { border-bottom: 1px solid var(--vien); }
.ds-lien-quan li:last-child { border-bottom: none; }

.ds-lien-quan a {
  display: block;
  padding: .8rem .2rem;
  text-decoration: none;
  font-weight: 600;
}

.ds-lien-quan a span { font-weight: 400; color: var(--chu-nhat); font-size: .9rem; }

/* --- Hướng dẫn --- */

.huong-dan .khoi {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  margin-bottom: 1rem;
}
.huong-dan ul { padding-left: 1.3rem; }
.huong-dan li { margin-bottom: .5rem; }

/* --- Đường dẫn phân cấp --- */

.duong-dan {
  max-width: var(--rong);
  margin: 0 auto;
  padding: .7rem 1rem 0;
  font-size: .95rem;
  color: var(--chu-nhat);
}

.duong-dan a { padding: .3rem 0; }
.duong-dan span { margin: 0 .2rem; }

/* --- Danh sách tỉnh và nghĩa trang --- */

.ds-tinh-lon, .ds-nghia-trang, .ds-ten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-tinh-lon li, .ds-nghia-trang li { margin-bottom: .6rem; }

.ds-tinh-lon a, .ds-nghia-trang a {
  display: block;
  background: var(--the);
  border: 1px solid var(--vien);
  border-left: 5px solid var(--do);
  border-radius: var(--bo-goc);
  padding: .85rem 1rem;
  text-decoration: none;
  color: var(--chu);
}

.ds-tinh-lon b, .ds-nghia-trang b {
  display: block;
  font-size: 1.15rem;
  color: var(--do-dam);
  margin-bottom: .2rem;
}

.ds-tinh-lon span, .nt-dia-chi, .nt-so {
  display: block;
  font-size: .95rem;
  color: var(--chu-nhat);
}

.nt-so { font-weight: 600; color: var(--chu); }

/* Danh sách tên trong một nghĩa trang: dày đặc hơn vì có thể tới 100 dòng. */
.ds-ten { counter-reset: none; margin-top: 1rem; }
.ds-ten li { border-bottom: 1px solid var(--vien); }
.ds-ten li:last-child { border-bottom: none; }

.ds-ten a {
  display: block;
  padding: .8rem .3rem;
  text-decoration: none;
  color: var(--chu);
  min-height: 2.8rem;
}

.ds-ten b {
  display: block;
  font-size: 1.1rem;
  color: var(--do-dam);
}

.ds-ten .ten-phu {
  display: block;
  font-size: .95rem;
  color: var(--chu-nhat);
}

/* --- Chân trang --- */

.footer-lien-ket { margin-bottom: .5rem; }

.site-footer {
  border-top: 1px solid var(--vien);
  background: var(--nen-nhe);
  padding: 1.5rem 1rem 2.5rem;
  text-align: center;
}

.site-footer a {
  display: inline-block;
  margin: 0 .75rem;
  padding: .5rem 0;
  font-weight: 600;
}

.footer-note {
  max-width: var(--rong);
  margin: .75rem auto 0;
  font-size: .9rem;
  color: var(--chu-nhat);
}

/* --- Màn hình lớn --- */

@media (min-width: 40rem) {
  html { font-size: 19px; }
  main { padding: 1.5rem 1.5rem 4rem; }
  .mo-dau h1 { font-size: 2.1rem; }
  .bang-tt { display: grid; grid-template-columns: 12rem 1fr; column-gap: 1rem; }
  .bang-tt dt { padding-bottom: .8rem; border-bottom: 1px dashed var(--vien); }
  .o-mo span { flex: 1; }
  .nut-rong { width: auto; display: inline-flex; padding: .7rem 2rem; }
}

/* Người dùng đặt chữ lớn trong hệ điều hành thì trang phải nở theo. */
@media (prefers-contrast: more) {
  :root { --vien: #8a8378; --chu-nhat: #3a3630; }
}

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