/* Giao diện An Tâm. Tự viết, không tải gì từ mạng ngoài. Ưu tiên điện thoại, rộng ra trên máy tính.
   Màu chủ đạo xanh lá đậm #1F6F5C, nền #F6F7F5, phông hệ thống. */
:root {
  --xanh: #1F6F5C;
  --xanh-dam: #17574A;
  --xanh-nhat: #E4F0EC;
  --nen: #F6F7F5;
  --the: #FFFFFF;
  --chu: #1C2321;
  --mo: #5B6763;
  --vien: #DCE1DE;
  --do: #B42318;
  --do-nhat: #FDECEA;
  --vang-nhat: #FFF6E0;
  --vang-vien: #E8C46A;
  --bo-goc: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--xanh); }
a:hover { color: var(--xanh-dam); }
h1 { font-size: 1.45rem; line-height: 1.25; margin: .4rem 0 .9rem; }
h2 { font-size: 1.12rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
p { margin: .45rem 0; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .92em; background: var(--xanh-nhat); padding: .05rem .3rem; border-radius: 4px; }
small { display: block; color: var(--mo); font-size: .82rem; margin-top: .2rem; }

/* ---- Đầu trang ---- */
.dau-trang { background: var(--xanh); color: #fff; }
.dau-trong { max-width: 1120px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; gap: .45rem; }
.logo:hover { color: #fff; }
.logo-dau { width: 1.7rem; height: 1.7rem; border-radius: 8px; background: #fff; color: var(--xanh); display: inline-grid; place-items: center; font-weight: 800; }
.dieu-huong { display: flex; align-items: center; gap: .9rem; font-size: .95rem; }
.dieu-huong a { color: #fff; text-decoration: none; }
.dieu-huong a.nut-nho { border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: .2rem .75rem; }
.dem-tin { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: #fff; color: var(--xanh-dam); font-size: .8rem; font-weight: 700; text-align: center; }
.noi-dong { display: inline; margin: 0; }
.nut-chu { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.bang-xem-thu { background: var(--vang-nhat); border-bottom: 1px solid var(--vang-vien); text-align: center; font-size: .85rem; padding: .3rem 1rem; }

/* ---- Khung nội dung ---- */
.khung { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 2.5rem; }
.khung.rong { max-width: 1120px; }
.chan-trang { max-width: 640px; margin: 0 auto; padding: 1rem; color: var(--mo); font-size: .8rem; text-align: center; }
.mo { color: var(--mo); font-size: .92rem; }
.hang-tieu-de { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.hang-tieu-de h1, .hang-tieu-de h2 { margin-bottom: .4rem; }
.ma { color: var(--mo); font-size: .88rem; font-variant-numeric: tabular-nums; }

/* ---- Thẻ ---- */
.the-noi { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 1rem; margin: 0 0 1rem; }
.the-noi.hep, .form.hep { max-width: 460px; }
.khung:not(.rong) .the-noi.hep { margin-left: auto; margin-right: auto; }
.the-noi.canh-bao { background: var(--vang-nhat); border-color: var(--vang-vien); }
.the-noi.loi { border-color: #f1b4ae; }
.the-noi.tot { border-color: var(--xanh); background: var(--xanh-nhat); }
.bao-loi { background: var(--do-nhat); color: var(--do); border-radius: 8px; padding: .6rem .8rem; }
.bao-tot { background: var(--xanh-nhat); color: var(--xanh-dam); border-radius: 8px; padding: .6rem .8rem; }

/* ---- Nút và form ---- */
.nut {
  display: inline-block; background: var(--xanh); color: #fff; border: 1px solid var(--xanh);
  border-radius: 10px; padding: .7rem 1.1rem; font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer; text-align: center; min-height: 44px;
}
.nut:hover { background: var(--xanh-dam); color: #fff; }
.nut-phu { background: #fff; color: var(--xanh); }
.nut-phu:hover { background: var(--xanh-nhat); color: var(--xanh-dam); }
.nut-do { background: var(--do); border-color: var(--do); }
.nut-do:hover { background: #8f1c13; }
.nut-rong { display: block; width: 100%; margin-top: .6rem; }
.hang-nut { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; }
.form label { display: block; font-weight: 600; margin: 0 0 .9rem; font-size: .95rem; }
.form input:not([type=checkbox]), .form textarea, .form select, .hang-o input {
  display: block; width: 100%; margin-top: .3rem; padding: .65rem .75rem; font: inherit; font-weight: 400;
  border: 1px solid var(--vien); border-radius: 10px; background: #fff; color: var(--chu); min-height: 44px;
}
.form input:focus, .form textarea:focus, .form select:focus, .hang-o input:focus { outline: 2px solid var(--xanh); outline-offset: 1px; border-color: var(--xanh); }
.o-tich { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 500 !important; }
.o-tich input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--xanh); flex: none; }
.hang-o { display: flex; gap: .5rem; max-width: 460px; }
.hang-o input { margin-top: 0; }
.o-lien-ket { width: 100%; font: inherit; padding: .6rem .7rem; border: 1px dashed var(--xanh); border-radius: 10px; background: var(--xanh-nhat); }

/* ---- Bảng tiền ---- */
.bang-tien { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bang-tien th { text-align: left; font-weight: 400; color: var(--mo); padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--vien); }
.bang-tien td { text-align: right; padding: .45rem 0; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang-tien tr.tong th { color: var(--chu); font-weight: 700; }
.bang-tien tr.tong td { font-weight: 700; color: var(--xanh-dam); font-size: 1.08rem; }
.noi-dung-ck { font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; }
.chu-dam { font-weight: 700; }
.so-tien-lon { font-size: 1.9rem; font-weight: 800; color: var(--xanh-dam); margin: .2rem 0 .6rem; font-variant-numeric: tabular-nums; }
.so-lon { font-size: 1.3rem; }

/* ---- Thanh tiến độ 4 bước ---- */
.tien-do { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: 0; margin: .4rem 0 1rem; counter-reset: b; }
.tien-do li { text-align: center; font-size: .78rem; color: var(--mo); position: relative; }
.tien-do li::before { content: ""; position: absolute; top: .85rem; left: -50%; right: 50%; height: 3px; background: var(--vien); z-index: 0; }
.tien-do li:first-child::before { display: none; }
.tien-do .so { position: relative; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: 0 auto .25rem; border-radius: 50%; background: #fff; border: 2px solid var(--vien); font-weight: 700; }
.tien-do .ten { display: block; }
.tien-do li.xong .so { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.tien-do li.xong::before, .tien-do li.dang::before { background: var(--xanh); }
.tien-do li.dang .so { border-color: var(--xanh); color: var(--xanh); }
.tien-do li.dang { color: var(--chu); font-weight: 700; }

/* ---- Nhãn trạng thái ---- */
.nhan { display: inline-block; font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--xanh-nhat); color: var(--xanh-dam); }
.nhan-awaiting_funds { background: var(--vang-nhat); color: #7a5300; }
.nhan-locked { background: var(--xanh); color: #fff; }
.nhan-expired, .nhan-cancelled { background: var(--do-nhat); color: var(--do); }
.trang-thai-lon .nhan { font-size: .95rem; padding: .3rem .8rem; }

/* ---- Danh sách ---- */
.ds-kiem-tra { padding-left: 1.2rem; margin: .3rem 0; }
.ds-kiem-tra li { margin: .15rem 0; }
.ds-xac-nhan { padding-left: 1.2rem; }
.ds-giao-dich { list-style: none; padding: 0; margin: 0; }
.ds-giao-dich li { margin-bottom: .6rem; }
.ds-giao-dich a { display: block; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: .8rem 1rem; text-decoration: none; color: var(--chu); }
.ds-giao-dich a:hover { border-color: var(--xanh); }
.dong-1, .dong-2 { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.dong-2 { margin-top: .3rem; }
.gia { font-weight: 700; color: var(--xanh-dam); white-space: nowrap; }
.ds-don { padding-left: 1.1rem; font-size: .92rem; }
.gioi-thieu h1 { font-size: 1.7rem; }
.cac-buoc-gioi-thieu { padding-left: 1.2rem; }
.cac-buoc-gioi-thieu li { margin: .4rem 0; }

/* ---- Mã QR ---- */
.qr { margin: .8rem auto; text-align: center; }
.qr svg { display: block; margin: 0 auto; width: 220px; height: auto; max-width: 100%; background: #fff; border-radius: 8px; }
.qr figcaption { color: var(--mo); font-size: .85rem; }
.o-giu-cho { border: 1px dashed var(--vien); border-radius: 10px; padding: 1.2rem; text-align: center; color: var(--mo); }
.han-nop { border-left: 4px solid var(--xanh); }

/* ---- Quản trị ---- */
.menu-qt { display: flex; gap: .3rem; flex-wrap: wrap; margin: 0 0 1rem; }
.menu-qt a { text-decoration: none; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--vien); background: #fff; font-size: .9rem; }
.menu-qt a[aria-current=page] { background: var(--xanh); color: #fff; border-color: var(--xanh); }
.luoi-so { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1rem; }
.the-so { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: .8rem 1rem; }
.the-so .nhan-so { display: block; color: var(--mo); font-size: .85rem; }
.the-so strong { display: block; font-size: 1.35rem; color: var(--xanh-dam); font-variant-numeric: tabular-nums; }
.the-so.can-xem { border-color: var(--vang-vien); background: var(--vang-nhat); }
.luoi-hai { display: grid; gap: 1rem; }
.cuon-ngang { overflow-x: auto; }
.bang { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.bang th, .bang td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang thead th { background: var(--xanh-nhat); color: var(--xanh-dam); font-weight: 600; white-space: nowrap; }
.bang td.so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bang tr.qua-han td { background: var(--do-nhat); }
.nhat-ky td { font-size: .85rem; }
.xac-nhan-lai h1 { font-size: 1.25rem; }

@media (min-width: 760px) {
  h1 { font-size: 1.7rem; }
  .luoi-so { grid-template-columns: repeat(4, 1fr); }
  .luoi-hai { grid-template-columns: 1fr 1fr; }
  .tien-do li { font-size: .88rem; }
}
.anh-phieu { max-width: 100%; max-height: 420px; border: 1px solid var(--vien, #ccc); border-radius: 6px; }