/* Giao diện dùng chung cho trang quản trị và trang khách hàng. */

:root {
  --nen: #0b1117;
  --nen-the: #131c26;
  --nen-o: #0d151d;
  --vien: #223040;
  --chu: #e6edf3;
  --chu-mo: #8b9bb0;
  --nhan: #2dd4bf;
  --nhan-dam: #14b8a6;
  --loi-nen: #3b1620;
  --loi-vien: #7f1d33;
  --loi-chu: #fda4af;
  --ok-nen: #10291f;
  --ok-vien: #1c5340;
  --ok-chu: #6ee7b7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #16303a 0%, var(--nen) 55%);
  color: var(--chu);
  line-height: 1.55;
}

/*
  Bo gach chan o MOI lien ket.

  Truoc day quy tac nay chi dat mau, nen trinh duyet tu gach chan theo mac dinh -
  va gach chan hien ra o nhung cho khong mong doi. Mau ngoc lam da du de nhan ra
  do la lien ket giua nen toi.
*/
a { color: var(--nhan); text-decoration: none; }

.giua {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.the {
  width: 100%;
  max-width: 420px;
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.the-rong { max-width: 520px; }

h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.3px; }

.phu { margin: 0 0 24px; color: var(--chu-mo); font-size: 14px; }

label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chu-mo);
}

input[type=text], input[type=email], input[type=password], input[type=number] {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 16px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  border-radius: 9px;
  color: var(--chu);
  font-size: 15px;
  font-family: inherit;
}

input:focus {
  outline: none;
  border-color: var(--nhan-dam);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .14);
}

button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: var(--nhan-dam);
  color: #04201d;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

button:hover { background: var(--nhan); }

.loi, .ok {
  padding: 11px 13px;
  border-radius: 9px;
  margin-bottom: 20px;
  font-size: 14px;
}

.loi { background: var(--loi-nen); border: 1px solid var(--loi-vien); color: var(--loi-chu); }
.ok  { background: var(--ok-nen);  border: 1px solid var(--ok-vien);  color: var(--ok-chu); }

.goi-y { margin-top: -8px; margin-bottom: 16px; font-size: 12px; color: var(--chu-mo); }

.duoi-form {
  margin: 20px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--chu-mo);
}

/* --- Đăng nhập bằng Google --- */

.hoac {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
  color: var(--chu-mo);
  font-size: 13px;
}

.hoac::before,
.hoac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vien);
}

/*
  Nút giữ đúng nền trắng và logo bốn màu theo hướng dẫn nhận diện của Google.
  Đổi màu nút hoặc tô lại logo một màu là vi phạm điều kiện sử dụng của họ.
*/
.nut-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid #dadce0;
  border-radius: 9px;
  background: #fff;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.nut-google:hover { background: #f1f3f4; }

.nut-google:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .45);
}

/* --- Ô mật khẩu có nút con mắt --- */

.o-mat-khau { position: relative; }

/* Chừa chỗ cho nút, chữ dài không chui xuống dưới biểu tượng. */
.o-mat-khau > input { padding-right: 46px; }

/*
  Căn giữa theo chiều dọc bằng top/bottom thay vì tính chiều cao cụ thể:
  bottom = 16px đúng bằng margin-bottom của input, nên nút luôn nằm giữa ô
  dù cỡ chữ hay padding có đổi.
*/
.nut-mat {
  position: absolute;
  top: 0;
  bottom: 16px;
  right: 4px;
  width: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--chu-mo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nut-mat:hover { background: none; color: var(--chu); }

.nut-mat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .4);
}

.nut-mat .mat-an { display: none; }
.nut-mat[data-hien="1"] .mat-hien { display: none; }
.nut-mat[data-hien="1"] .mat-an { display: block; }

/* --- Trang có thanh trên và lưới ô số --- */

.khung { max-width: 900px; margin: 0 auto; padding: 32px 24px; }

.thanh-tren {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--vien);
}

.thanh-tren form { margin: 0; }

.thanh-tren button {
  width: auto;
  padding: 8px 16px;
  background: #24323f;
  color: var(--chu);
  font-weight: 600;
}

.thanh-tren button:hover { background: #2f3f4e; }

.luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.o {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 12px;
  padding: 18px;
}

.o .so { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.o .ten { font-size: 13px; color: var(--chu-mo); margin-top: 2px; }

.ghi-chu {
  margin-top: 28px;
  padding: 16px 18px;
  background: #101a24;
  border: 1px solid var(--vien);
  border-left: 3px solid var(--nhan-dam);
  border-radius: 10px;
  font-size: 14px;
  color: var(--chu-mo);
}

/* --- Trang quản trị: tab, bảng, nhãn --- */

.khung-rong { max-width: 1240px; }

.tab-hang {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tab {
  padding: 8px 16px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-mo);
  text-decoration: none;
  background: var(--nen-the);
  white-space: nowrap;
}

a.tab:hover { color: var(--chu); border-color: #33465a; }

.tab.dang-xem {
  color: var(--chu);
  border-color: var(--nhan-dam);
  background: #14262c;
}

/* Tab chưa xây dựng: nhìn thấy để biết sẽ có, nhưng không bấm được. */
.tab.tat {
  opacity: .4;
  cursor: not-allowed;
  border-style: dashed;
}

.bang-khung {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.bang-dau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--vien);
  font-weight: 600;
  font-size: 15px;
}

.bang-dau .dem { color: var(--chu-mo); font-size: 13px; font-weight: 500; }

.than-khoi { padding: 18px; }
.than-khoi form { margin: 0; }

.o-tim { padding: 14px 18px; border-bottom: 1px solid var(--vien); position: relative; }
.o-tim input { margin-bottom: 0; }

.xoa-tim {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
}

/* Bảng rộng hơn màn hình thì cuộn trong khung của nó, không đẩy cả trang lệch. */
.bang-cuon { overflow-x: auto; }

.bang { width: 100%; border-collapse: collapse; font-size: 14px; }

.bang th {
  text-align: left;
  padding: 11px 18px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--chu-mo);
  border-bottom: 1px solid var(--vien);
  white-space: nowrap;
}

.bang td {
  padding: 13px 18px;
  border-bottom: 1px solid #1a2531;
  vertical-align: top;
}

.bang tbody tr:last-child td { border-bottom: 0; }
.bang tbody tr:hover { background: #16202b; }

.bang .phai { text-align: right; }
.bang .dam { font-weight: 700; }
.bang .nho { font-size: 12.5px; color: var(--chu-mo); }
.bang .cong { color: var(--ok-chu); }
.bang .tru { color: var(--loi-chu); }

.bang a.chinh { font-weight: 600; text-decoration: none; }
.bang a.chinh:hover { text-decoration: underline; }

.tt {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.tt-song { background: var(--ok-nen); color: var(--ok-chu); border: 1px solid var(--ok-vien); }
.tt-khoa { background: var(--loi-nen); color: var(--loi-chu); border: 1px solid var(--loi-vien); }

.nhan {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #1c2836;
  border: 1px solid var(--vien);
  font-size: 11.5px;
  color: var(--chu-mo);
}

.nhan-admin { margin-left: 6px; color: var(--nhan); border-color: #2a4a4a; }

.nut-nho {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 8px;
  background: #24323f;
  border: 1px solid var(--vien);
  color: var(--chu);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nut-nho:hover { background: #2f3f4e; color: var(--chu); }

/* Nút làm việc không đảo ngược được: phải nhìn khác hẳn nút thường. */
.nut-nguy { background: #7f1d33; color: #ffe4e9; }
.nut-nguy:hover { background: #9b2340; }

.phan-trang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px;
  border-top: 1px solid var(--vien);
  font-size: 14px;
  color: var(--chu-mo);
}

.trong { padding: 30px 18px; text-align: center; color: var(--chu-mo); margin: 0; }

.quay-lai { margin: -8px 0 18px; font-size: 14px; }

.doi-cot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--vien);
}

.doi-cot > div {
  background: var(--nen-the);
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.doi-cot span { font-size: 12.5px; color: var(--chu-mo); }
.doi-cot b { font-size: 15px; }
.doi-cot .noi-bat-so { color: var(--nhan); font-size: 18px; }

.cap-khoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.cap-khoi .bang-khung { margin-bottom: 0; }

/* --- Ô chọn và ô nhập nhiều dòng --- */

select, textarea {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 16px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  border-radius: 9px;
  color: var(--chu);
  font-size: 15px;
  font-family: inherit;
}

textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

select:focus, textarea:focus {
  outline: none;
  border-color: var(--nhan-dam);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .14);
}

/* --- Khối cảnh báo --- */

.canh-bao {
  padding: 14px 16px;
  margin-bottom: 20px;
  background: #2a2110;
  border: 1px solid #6b4f16;
  border-left: 3px solid #d9a441;
  border-radius: 10px;
  font-size: 14px;
  color: #f0d9a8;
  line-height: 1.6;
}

.canh-bao code { background: #1a1608; padding: 1px 5px; border-radius: 4px; }

.tt-tat { background: #1c2836; color: var(--chu-mo); border: 1px solid var(--vien); }

/* Hàng thao tác trong bảng: các ô nằm ngang, không chiếm hết chiều rộng. */
.hang-thao-tac {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

.hang-thao-tac select,
.hang-thao-tac input {
  width: auto;
  margin-bottom: 0;
  padding: 6px 10px;
  font-size: 13px;
}

.hang-thao-tac .o-so-nho { width: 96px; text-align: right; }

.hang-thao-tac button {
  width: auto;
  padding: 7px 14px;
  font-size: 13px;
  background: #24323f;
  color: var(--chu);
}

.hang-thao-tac button:hover { background: #2f3f4e; }

/* Nút hành động chính trong đầu bảng. */
.nut-nho-dam {
  width: auto;
  padding: 8px 16px;
  font-size: 13.5px;
  border-radius: 8px;
}

/* --- Hiển thị khoá và lệnh --- */

/*
  Khoá phải xuống dòng được: nó dài hơn màn hình, mà cắt bớt thì người dùng
  bôi đen copy sẽ thiếu mất phần cuối mà không hề biết.
*/
.khoa-hien {
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #0a1219;
  border: 1px solid var(--nhan-dam);
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--nhan);
  word-break: break-all;
  line-height: 1.6;
  user-select: all;
}

.khoi-lenh {
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #0a1219;
  border: 1px solid var(--vien);
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #c3cedb;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.7;
}

/* --- Thanh điều hướng của khách --- */

.thanh-khach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 10px;
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 14px;
}

.thanh-khach-nut {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tên ứng dụng, bên trái thanh. Dùng lại đúng biểu tượng của trang chủ. */
.hieu-khach {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  color: var(--chu);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.hieu-khach:hover { color: var(--nhan); }

.hieu-dau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #0a1219;
  border: 1px solid var(--vien);
  color: var(--nhan);
}

/* Số dư đặt ngay cạnh nút Nạp thêm: thấy còn bao nhiêu rồi bấm nạp là một mạch. */
.vien-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0a1219;
  border: 1px solid var(--vien);
  color: var(--chu-mo);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}

.vien-credit b { color: var(--nhan); font-size: 15px; font-weight: 700; }
.vien-cham { color: var(--nhan); font-size: 11px; }

/*
  Dùng chung cho cả <a>, <span> và <button> để ba loại thẻ trông y hệt nhau.
  Nút Đăng xuất buộc phải là <button> trong form POST kèm mã CSRF - đăng xuất
  bằng đường dẫn GET thì trang khác có thể nhúng ảnh trỏ vào đó và đá khách ra.
*/
.nut-thanh {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--vien);
  background: #1b2836;
  color: var(--chu);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  width: auto;
}

a.nut-thanh:hover,
button.nut-thanh:hover { background: #24323f; border-color: #33465a; }

.nut-thanh.dang-xem { border-color: var(--nhan-dam); color: var(--nhan); }

.nut-thanh-chinh {
  background: var(--nhan-dam);
  border-color: var(--nhan-dam);
  color: #04211d;
}

a.nut-thanh-chinh:hover { background: var(--nhan); border-color: var(--nhan); }

/* Chức năng chưa làm: vẫn hiện để thấy toàn cảnh, nhưng bấm không được. */
.nut-thanh-mo {
  opacity: 0.42;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .thanh-khach { justify-content: center; }
  .thanh-khach-nut { justify-content: center; }
}

/* --- Các mức nạp credit --- */

.cac-muc { display: flex; flex-direction: column; gap: 14px; }

.muc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 16px;
}

/* Mức khuyến khích chọn: viền và nền lấy màu riêng của chính mức đó. */
.muc-noi-bat {
  border-color: color-mix(in srgb, var(--mau-muc) 55%, transparent);
  background: color-mix(in srgb, var(--mau-muc) 7%, var(--nen-the));
}

.muc-dang-chon { border-color: var(--nhan); }

.muc-trai { flex: 1 1 340px; min-width: 0; }

.muc-dong-dau {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.muc-credit { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }

.the-nho {
  padding: 3px 9px;
  border-radius: 999px;
  background: #0a1219;
  border: 1px solid var(--vien);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--chu-mo);
  white-space: nowrap;
}

.the-thuong {
  color: var(--ok-chu);
  border-color: var(--ok-vien);
  background: var(--ok-nen);
}

.the-best {
  color: #10230a;
  background: var(--mau-muc);
  border-color: var(--mau-muc);
  font-weight: 800;
}

.muc-ten {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mau-muc);
  margin-bottom: 11px;
}

.muc-y { list-style: none; margin: 0; padding: 0; }

.muc-y li {
  position: relative;
  padding-left: 21px;
  margin-bottom: 5px;
  font-size: 13.5px;
  color: var(--chu-mo);
  line-height: 1.5;
}

/* Dấu kiểm vẽ bằng CSS - không cần tải thêm ảnh hay bộ biểu tượng nào. */
.muc-y li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--mau-muc);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.muc-phai { flex: 0 0 auto; text-align: right; }

.muc-gia { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; }
.muc-gia s { color: #64748b; font-size: 14px; }
.muc-gia b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.muc-dong { font-size: 15px; color: var(--chu-mo); }

.muc-phu { margin: 2px 0 12px; font-size: 12px; color: var(--chu-mo); }

.muc-nut {
  display: block;
  min-width: 186px;
  padding: 11px 22px;
  border-radius: 10px;
  background: var(--chu);
  color: #0b1117;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.muc-nut:hover { background: #fff; }

@media (max-width: 640px) {
  .muc { padding: 18px; }
  .muc-phai { flex: 1 1 100%; text-align: left; }
  .muc-gia { justify-content: flex-start; }
  .muc-nut { min-width: 0; }
}

/* --- Thẻ thanh toán --- */

/*
  Thẻ này cố ý dùng nền SÁNG giữa trang tối. Mã QR bắt buộc phải nằm trên nền
  trắng mới quét được; đặt một ô trắng lẻ loi giữa nền tối trông như lỗi hiển
  thị, nên cả thẻ sáng lên thì gọn hơn và giống hộp thanh toán quen thuộc.
*/
.the-tt {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  color: #1a2330;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.tt-dau {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border-bottom: 1px solid #e8edf3;
}

.tt-hinh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #e8f8f5;
  color: #0f766e;
  flex: 0 0 auto;
}

.tt-tieu-de { flex: 1 1 auto; min-width: 0; }
.tt-tieu-de b { font-size: 16px; }
.tt-phu { margin-top: 2px; font-size: 12.5px; color: #5b6b7f; }

.tt-dong {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 22px;
  line-height: 1;
  color: #7b8a9c;
}

.tt-dong:hover { background: #f1f5f9; color: #1a2330; }

.tt-the-hang {
  display: flex;
  gap: 6px;
  padding: 14px 20px 0;
}

.tt-the {
  padding: 9px 18px;
  border-radius: 9px 9px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #7b8a9c;
  border: 1px solid transparent;
  border-bottom: none;
}

.tt-the:hover { color: #1a2330; }

.tt-the.dang-xem {
  color: #0f766e;
  background: #fff;
  border-color: #e8edf3;
}

.tt-than {
  padding: 22px 20px;
  border-top: 1px solid #e8edf3;
  margin-top: -1px;
  text-align: center;
}

/*
  Khoi bao "da nhan tien".

  The thanh toan la khu vuc SANG (nen trang), khac phan con lai cua trang - nen
  mau o day lay theo he sang, khong dung bien mau toi cua trang.
*/
.tt-xong {
  padding: 30px 20px 26px;
  border-top: 1px solid #e8edf3;
  margin-top: -1px;
  text-align: center;
}

.tt-xong-tich {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
}

.tt-xong-tieu-de {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  color: #15803d;
}

/*
  Ba dong so, nhan trai gia tri phai - doc luot mat la thay ngay so du moi, thu
  khach can biet nhat luc nay.
*/
.tt-xong-so {
  margin: 16px auto 0;
  max-width: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  font-size: 14px;
  text-align: left;
}

.tt-xong-so dt { color: #5b6b7f; }
.tt-xong-so dd { margin: 0; text-align: right; color: #1a2330; }
.tt-xong-so dd.cong { color: #15803d; font-weight: 600; }

.tt-nut-dam {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 22px;
  border-radius: 9px;
  background: #0f766e;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.tt-nut-dam:hover { background: #115e56; color: #fff; }

.tt-qr {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.tt-chu-thich {
  margin: 10px auto 0;
  max-width: 380px;
  font-size: 13px;
  color: #5b6b7f;
  line-height: 1.6;
}

.tt-bang {
  margin: 0 auto;
  max-width: 400px;
  text-align: left;
}

.tt-bang dt {
  font-size: 12.5px;
  color: #7b8a9c;
  margin-top: 12px;
}

.tt-bang dt:first-child { margin-top: 0; }

.tt-bang dd {
  margin: 3px 0 0;
  padding: 9px 13px;
  background: #f5f8fb;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

.tt-dam { font-weight: 700; }

.tt-ma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 400px;
  margin: 18px auto 0;
  padding: 12px 15px;
  background: #ecfdf7;
  border: 1px solid #99e6d3;
  border-radius: 10px;
  text-align: left;
}

.tt-ma-nhan { font-size: 12.5px; color: #0f766e; }

.tt-ma-so {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  color: #0b5f58;
  letter-spacing: 0.04em;
  user-select: all;
}

.tt-canh-bao {
  max-width: 420px;
  margin: 14px auto 0;
  font-size: 12.5px;
  color: #5b6b7f;
  line-height: 1.65;
  text-align: left;
}

.tt-chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 20px;
  background: #f5f8fb;
  border-top: 1px solid #e8edf3;
  font-size: 12.5px;
  color: #5b6b7f;
}

.tt-chan a { color: #0f766e; font-weight: 600; }

.tt-nut {
  padding: 9px 26px;
  border-radius: 9px;
  background: #1a2330;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.tt-nut:hover { background: #2b3a4d; color: #fff; }


/* --- Thu vien: luoi ket qua khach da tao --- */

.tv-dau {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.tv-loc { display: flex; gap: 8px; flex-wrap: wrap; }

.tv-trong {
  margin-top: 22px;
  padding: 34px 26px;
  background: var(--nen-the);
  border: 1px dashed var(--vien);
  border-radius: 14px;
  text-align: center;
}

/*
  auto-fill + minmax: so cot tu doi theo be ngang man hinh, khong can diem ngat
  rieng cho dien thoai va may tinh. Man hinh hep tu rut ve mot cot.
*/
.tv-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.tv-o { position: relative; }

.tv-the {
  display: block;
  position: relative;
  /* Moi o vuong nen luoi thang hang du anh goc ti le nao. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
}

.tv-the:hover { border-color: var(--nhan); }

/*
  object-fit: cover - anh phu kin o va bi cat bot phan thua, thay vi bi bop meo.
  Anh AI ra du moi ti le, khong co dong nay thi luoi nhin nhu guong meo.
*/
.tv-anh {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  O don HONG.

  Dung cung khuon vuong va cung bo goc voi o binh thuong de luoi khong bi gap
  khuc, nhung doi mau vien va nen sang do nhat - nhin luot qua la biet ngay o nao
  khong ra ket qua, khong phai doc chu moi hieu.

  KHONG dung mau do gat: mot phan lon don hong la loi cua nha cung cap chu khong
  phai khach lam sai, ma bang mau bao dong thi doc ra thanh loi cua ho.
*/
.tv-o-hong {
  display: flex;
  flex-direction: column;
  /* Ly do nam giua, ten model va gio bi day xuong day o - xem quy tac .tv-day. */
  justify-content: center;
  gap: 7px;
  aspect-ratio: 1 / 1;
  padding: 14px 12px 10px;
  text-align: center;
  border-radius: 14px;
  background: rgba(220, 84, 84, 0.06);
  border: 1px solid rgba(220, 84, 84, 0.28);

  /*
    BAT BUOC phai co overflow: hidden.

    O binh thuong duoc the .tv-the cat hộ; o hong khong nam trong the do nen
    khong ai cat. Thieu dong nay thi mot ten model dai tran thang sang o ben
    canh - chu de len chu, khong doc duoc o nao ca.
  */
  overflow: hidden;
}

/*
  min-width: 0 cho MOI con.

  Mac dinh mot phan tu trong flexbox khong chiu co nho hon noi dung cua no, nen
  text-overflow: ellipsis khong bao gio duoc kich hoat - chu cu the tran ra. Day
  la ly do that su cua canh chu tran o anh chup, khong phai do thieu ellipsis.
*/
.tv-o-hong > * {
  min-width: 0;
  max-width: 100%;
}

.tv-hong-dau {
  color: #d76a6a;
  /* Bieu tuong khong duoc co lai khi ly do dai; no la thu bat mat dau tien. */
  flex: 0 0 auto;
}

.tv-hong-nhan {
  font-size: 13px;
  font-weight: 600;
  color: #e08a8a;
}

/*
  Cat ly do sau ba dong.

  Mot vai thong bao cua nha cung cap dai ca doan; de nguyen thi chu day het o va
  de len ca ten model. Ba dong du de biet chuyen gi, phan con lai xem o Don hang.
*/
.tv-hong-loi {
  font-size: 12px;
  line-height: 1.45;
  color: var(--chu-phu);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Mot chuoi dai khong dau cach - ma loi, duong dan - phai duoc cat giua chung. */
  overflow-wrap: anywhere;
}

/*
  Ten model va gio: day xuong DAY o, giong het o binh thuong.

  margin-top: auto an het khoang trong con lai nen hai dong nay luon nam duoi
  cung, du ly do dai mot dong hay ba dong. Khong co no thi moi o hong lai dat
  nhan o mot do cao khac nhau va luoi nhin nhu bi xo lech.
*/
.tv-o-hong .tv-day {
  position: static;
  margin-top: auto;
  padding: 8px 0 0;
  background: none;
  width: 100%;
}

/* flex: 1 1 auto de ten dai chiu co lai va hien dau ba cham thay vi tran ra. */
.tv-o-hong .tv-ten { flex: 1 1 auto; text-align: left; }

.tv-khong-anh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #46586e;
}

.tv-video {
  position: absolute;
  top: 9px;
  left: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(11, 17, 23, 0.72);
  color: #fff;
}

/*
  Dai chu nam de len anh. Nen chuyen dan tu trong suot xuong dam de chu doc duoc
  tren ca anh sang lan anh toi - to nen dac se che mat mot phan anh.
*/
.tv-day {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 10px 8px;
  background: linear-gradient(to top, rgba(8, 12, 17, 0.9), rgba(8, 12, 17, 0));
  font-size: 11.5px;
}

.tv-ten {
  color: #e6edf3;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-luc { color: #b6c4d4; flex: 0 0 auto; }

.tv-tai {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(11, 17, 23, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e6edf3;
}

.tv-tai:hover { background: var(--nhan-dam); border-color: var(--nhan); color: #04211d; }

.tv-trang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.tv-trang-so { font-size: 13.5px; color: var(--chu-mo); }

.tv-nhac {
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: 11px;
  background: #2a2113;
  border: 1px solid #6b5220;
  color: #f0d9a8;
  font-size: 13.5px;
  line-height: 1.55;
}

/*
  Nhan han dat goc duoi TRAI, doi dien nut tai o goc tren phai - hai thu khong
  bao gio de len nhau du o co hep den dau.
*/
.tv-con {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11, 17, 23, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd8e6;
  font-size: 10.5px;
  font-weight: 600;
  z-index: 1;
}

/* Sap het thi doi mau, khong chi doi chu: mau bat mat truoc khi doc. */
.tv-con-gap {
  background: #7f1d33;
  border-color: #b03a52;
  color: #ffe4e9;
}

/*
  Day chu day len de khong nam duoi nhan han.
  Nhan cao khoang 20px, cong khoang tho la 26px.
*/
.tv-day { padding-bottom: 26px; }

/* --- Trang thông báo quản trị --- */

.tb-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.tb-loc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.tb-trong {
  margin-top: 18px;
  padding: 34px 26px;
  background: var(--nen-the);
  border: 1px dashed var(--vien);
  border-radius: 14px;
  text-align: center;
}

.tb-danh-sach { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.tb-muc {
  padding: 13px 16px;
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 12px;
  /*
    Vien trai la cho danh dau. De trong suot o muc thuong thay vi bo han, de moi
    muc rong bang nhau - khong thi danh sach nhay ngang khi co muc chua doc.
  */
  border-left: 3px solid transparent;
}

.tb-chua-doc { border-left-color: var(--nhan); background: #16212c; }

/* Tin nang: nguon tat model dang ban, hoac gia von tang. */
.tb-nang { border-left-color: #b03a52; }

.tb-hang {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tb-hang b { font-size: 14.5px; }

.tb-luc { flex: 0 0 auto; font-size: 12px; color: var(--chu-mo); }

.tb-than { margin-top: 4px; font-size: 13px; color: var(--chu-mo); line-height: 1.5; }

.tb-nhan {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  font-size: 11.5px;
  color: var(--chu-mo);
}

/* Ô nhập giá bán trong trang Model quản trị. */
.o-gia {
  width: 92px;
  padding: 5px 8px;
  text-align: right;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  border-radius: 7px;
  color: var(--chu);
  font-size: 13.5px;
  font-family: inherit;
}

/*
  O da tu dat nhin KHAC han o dang dung gia mac dinh.
  Khong phan biet thi luot qua sau muoi dong khong biet cai nao dang bi ghi de,
  va mot gia dat nham nam yen do mai.
*/
.o-gia-tu-dat { border-color: var(--nhan); color: var(--nhan); font-weight: 700; }

.o-gia::placeholder { color: #5b6b7f; font-weight: 400; }

/* --- Bảng điều hành: thống kê tài chính --- */

.tk-loc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.tk-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/*
  Bang theo ngay cao toi da roi cuon trong chinh no.
  Ba muoi dong day het man hinh se day moi thu khac xuong duoi tam nhin.
*/
.tk-cuon { max-height: 420px; overflow-y: auto; }

/* Ngay khong co gi: lam mo ca dong de mat luot nhanh qua, tim ngay co viec. */
.tk-trong td { color: #4b5b6e; }

/* --- Kết quả kiểm tra model --- */

.kt-khoi { border-bottom: 1px solid var(--vien); }

.kt-tong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.kt-the {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.kt-ok { background: var(--ok-nen); border: 1px solid var(--ok-vien); color: var(--ok-chu); }
.kt-hong { background: var(--loi-nen); border: 1px solid var(--loi-vien); color: var(--loi-chu); }

/* Dòng hỏng nổi hẳn lên: đó là thứ duy nhất cần làm gì đó. */
.kt-dong-hong td { background: #2a1620; }

/* --- Bảng giá: lưới thẻ model --- */

.bg-loc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.bg-loc-hang { margin-top: 10px; }

.bg-nhan-loc {
  font-size: 12px;
  color: var(--chu-mo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

.bg-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.bg-the {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 15px;
}

.bg-the:hover { border-color: #33475c; }

.bg-the-dau { display: flex; align-items: flex-start; gap: 11px; }

.bg-bieu-tuong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  color: var(--nhan);
}

.bg-ten {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  /* Ten dai khong duoc day cot ma vo bo cuc luoi. */
  overflow-wrap: anywhere;
}

.bg-hang {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--chu-mo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bg-ma {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  font-size: 11px;
  color: var(--chu-mo);
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-chip { display: flex; gap: 6px; flex-wrap: wrap; }

.bg-nhan {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  font-size: 11.5px;
  color: var(--chu-mo);
}

/* Hai nhan nay la ly do khach chon model, nen phai noi hon cac nhan khac. */
.bg-nhan-anh { border-color: #3f6ea8; color: #93c5fd; }
.bg-nhan-nhanh { border-color: var(--ok-vien); color: var(--ok-chu); }

.bg-dem {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--chu-mo);
}

.bg-chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--vien);
}

.bg-gia { font-size: 13px; color: var(--chu-mo); }
.bg-gia b { font-size: 18px; color: var(--chu); letter-spacing: -0.01em; }

/* --- Danh sách nhãn/giá trị trên nền TỐI --- */

/*
  KHONG dung .tt-bang o cac trang nen toi.

  .tt-bang thuoc ve the chuyen khoan SePay - the do co nen SANG rieng, nen dd cua
  no dat background gan trang va de chu thua huong mau sang cua trang. Dat len
  nen toi thi thanh chu sang tren nen sang: doc khong ra.
*/
.dl-toi { margin: 0; }

.dl-toi dt {
  margin-top: 13px;
  font-size: 12.5px;
  color: var(--chu-mo);
}

.dl-toi dt:first-child { margin-top: 0; }

.dl-toi dd {
  margin: 4px 0 0;
  padding: 8px 12px;
  background: var(--nen-o);
  border: 1px solid var(--vien);
  border-radius: 8px;
  color: var(--chu);
  font-size: 13.5px;
  line-height: 1.5;
  /* Danh sach gia tri dai (17 thoi luong) phai xuong dong, khong tran ra ngoai. */
  overflow-wrap: anywhere;
}

/* Nhãn tên tham số dùng chữ đơn cách cho khớp với lúc khách gõ vào code. */
.dl-toi dt code,
.dl-toi dt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }