/* ============================================================
   KIỂU DÙNG CHUNG — HỆ THỐNG QUẢN LÝ GIAO THÔNG PHƯỜNG NGHĨA LỘ
   Tệp này do PHẦN B viết, các phần khác chỉ dùng lại (không sửa).
   Mọi trang đều nạp tệp này TRƯỚC các tệp css riêng.
   ============================================================ */

/* ---------- 1. Biến màu và kích thước ---------- */
:root {
  --nen: #f4f6f9;              /* nền trang */
  --nen-phu: #ffffff;          /* nền thẻ, bảng, ô nhập */
  --chu: #1b2430;              /* chữ chính */
  --chu-phu: #5d6b7d;          /* chữ phụ, ghi chú */
  --vien: #d8dfe8;             /* đường viền */
  --chinh: #0b4f9e;            /* màu chủ đạo */
  --tot: #34c759;              /* tình trạng tốt */
  --tb: #ffcc00;              /* tình trạng trung bình */
  --kem: #ff3b30;              /* tình trạng kém */

  /* Biến phụ trợ (dẫn xuất) */
  --chinh-dam: #083d7b;
  --chinh-nhat: #e9f1fb;
  --nen-mo: rgba(255, 255, 255, .95);
  --bong: 0 1px 2px rgba(16, 32, 56, .08), 0 6px 20px rgba(16, 32, 56, .10);
  --bong-nhe: 0 1px 3px rgba(16, 32, 56, .12);
  --bo-goc: 10px;
  --bo-goc-nho: 7px;
  --cao-nut: 44px;             /* chiều cao tối thiểu của nút bấm */
  --phong: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --phong-so: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* ---------- 2. Chế độ tối ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #10151d;
    --nen-phu: #1a212c;
    --chu: #e7edf5;
    --chu-phu: #9dabbd;
    --vien: #2c3644;
    --chinh: #3d8fe0;          /* sáng hơn để đọc được trên nền tối */
    --tot: #3ddc6a;
    --tb: #ffd426;
    --kem: #ff5c52;

    --chinh-dam: #2b76c2;
    --chinh-nhat: #16283d;
    --nen-mo: rgba(26, 33, 44, .95);
    --bong: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .45);
    --bong-nhe: 0 1px 3px rgba(0, 0, 0, .5);
  }
}

/* ---------- 3. Nền tảng ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--phong);
  font-size: 15px;
  line-height: 1.55;
  color: var(--chu);
  background: var(--nen);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--chinh); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 10px; line-height: 1.3; font-weight: 700; }
h1 { font-size: 21px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

p { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--vien); margin: 12px 0; }
code, .ma-hieu { font-family: var(--phong-so); font-size: .92em; }

.chu-phu { color: var(--chu-phu); }
.nho { font-size: 12.5px; }
.an { display: none !important; }
.giua { text-align: center; }
.phai { text-align: right; }
.so { font-variant-numeric: tabular-nums; }

/* ---------- 4. Thanh điều hướng ----------
   Khớp chính xác cấu trúc do dungThanhDieuHuong() trong js/chung.js sinh ra:
   nav.thanh-dieu-huong > a.hieu(span.dau, span.ten-he-thong)
                        + button.nut-menu
                        + div.cac-muc > a[.dang-chon]
                        + div.khu-nguoi-dung > button#nut-tai-khoan.chip-tai-khoan
                                             + div#tam-tai-khoan.tam-tai-khoan
   Trạng thái mở trên điện thoại: nav.thanh-dieu-huong.mo
   Kiểu của menu tài khoản nằm ở Mục 13 phía dưới.
------------------------------------------------------------ */
.thanh-dieu-huong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--chinh);
  color: #fff;
  box-shadow: var(--bong-nhe);
  position: relative;
  z-index: 1200;
}

/* Khối hiệu: tên hệ thống + dòng phụ ghi người xây dựng */
.thanh-dieu-huong .khoi-hieu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.thanh-dieu-huong .hieu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.thanh-dieu-huong .hieu:hover { text-decoration: none; opacity: .9; }

/* Dòng phụ: người xây dựng, đơn vị, điện thoại liên lạc.
   Màn hình hẹp ẩn đi cho đỡ chật — nội dung vẫn xem đủ ở hộp
   "Thông tin tài khoản" trong menu tài khoản. */
.thanh-dieu-huong .dong-nguoi-xay-dung {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.thanh-dieu-huong .dong-nguoi-xay-dung a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .55);
}
.thanh-dieu-huong .dong-nguoi-xay-dung a:hover { color: #fff; text-decoration: none; }

.thanh-dieu-huong .dau {
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

.thanh-dieu-huong .ten-he-thong { font-size: 16px; letter-spacing: .1px; }

.thanh-dieu-huong .nut-menu {
  display: none;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--bo-goc-nho);
  cursor: pointer;
}
.thanh-dieu-huong .nut-menu:hover { background: rgba(255, 255, 255, .24); }

.thanh-dieu-huong .cac-muc {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
}

.thanh-dieu-huong .cac-muc a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: var(--bo-goc-nho);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  text-decoration: none;
  opacity: .88;
}
.thanh-dieu-huong .cac-muc a:hover {
  background: rgba(255, 255, 255, .16);
  text-decoration: none;
  opacity: 1;
}
.thanh-dieu-huong .cac-muc a.dang-chon {
  background: rgba(255, 255, 255, .95);
  color: var(--chinh);
  opacity: 1;
}

.thanh-dieu-huong .khu-nguoi-dung {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ---------- 5. Nút bấm ---------- */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--cao-nut);
  padding: 0 16px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--chu);
  background: var(--nen-phu);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.nut:hover { background: var(--chinh-nhat); border-color: var(--chinh); text-decoration: none; }
.nut:active { transform: translateY(1px); }
.nut:focus-visible { outline: 3px solid var(--chinh); outline-offset: 1px; }
.nut:disabled, .nut[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.nut-chinh {
  color: #fff;
  background: var(--chinh);
  border-color: var(--chinh);
}
.nut-chinh:hover { background: var(--chinh-dam); border-color: var(--chinh-dam); color: #fff; }

.nut-phu {
  color: var(--chinh);
  background: transparent;
  border-color: var(--vien);
}
.nut-phu:hover { background: var(--chinh-nhat); border-color: var(--chinh); }

.nut-nguy { color: #fff; background: var(--kem); border-color: var(--kem); }
.nut-nguy:hover { color: #fff; background: #d32d24; border-color: #d32d24; }

/* Nút nhỏ (dùng trong bảng, thẻ) — vẫn đủ lớn để bấm bằng ngón tay */
.nut-nho { min-height: 34px; padding: 0 11px; font-size: 13.5px; }

/* ---------- 6. Ô nhập ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--chu-phu); margin-bottom: 4px; }

input, select, textarea {
  width: 100%;
  min-height: var(--cao-nut);
  padding: 9px 11px;
  font-family: inherit;
  font-size: 15px;
  color: var(--chu);
  background: var(--nen-phu);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc-nho);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--chinh);
  box-shadow: 0 0 0 3px rgba(11, 79, 158, .18);
}
input::placeholder, textarea::placeholder { color: var(--chu-phu); opacity: .75; }
input:disabled, select:disabled, textarea:disabled { background: var(--nen); opacity: .7; }

input[type="checkbox"], input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  vertical-align: middle;
  accent-color: var(--chinh);
  flex: none;
}
input[type="file"] { padding: 8px; }

/* Ô có nhãn nằm cùng dòng (hộp kiểm) */
.o-kiem {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--chu);
  cursor: pointer;
  margin-bottom: 0;
}

/* Nhóm trường trong biểu mẫu */
.truong { margin-bottom: 12px; }
.hang-truong { display: flex; gap: 12px; flex-wrap: wrap; }
.hang-truong > .truong { flex: 1 1 150px; margin-bottom: 12px; }

/* ---------- 7. Thẻ ---------- */
.the {
  background: var(--nen-phu);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong-nhe);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.the > :last-child { margin-bottom: 0; }
.the-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: -14px -16px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--vien);
  border-radius: var(--bo-goc) var(--bo-goc) 0 0;
  background: var(--chinh-nhat);
  font-weight: 700;
}

/* ---------- 8. Bảng ---------- */
table.bang {
  width: 100%;
  border-collapse: collapse;
  background: var(--nen-phu);
  font-size: 14px;
}
table.bang th, table.bang td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--vien);
  text-align: left;
  vertical-align: top;
}
table.bang thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--chinh-nhat);
  color: var(--chinh);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--vien);
}
table.bang tbody tr:hover { background: var(--chinh-nhat); }
table.bang td.so, table.bang th.so { text-align: right; font-variant-numeric: tabular-nums; }
table.bang tfoot td { font-weight: 700; background: var(--nen); }

/* Bảng cuộn ngang trên màn hình hẹp */
.khung-bang { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Bảng hai cột kiểu "nhãn — giá trị" */
table.bang-thuoc-tinh { width: 100%; border-collapse: collapse; font-size: 14px; }
table.bang-thuoc-tinh th {
  width: 42%;
  padding: 6px 8px 6px 0;
  text-align: left;
  font-weight: 600;
  color: var(--chu-phu);
  vertical-align: top;
  border-bottom: 1px solid var(--vien);
}
table.bang-thuoc-tinh td {
  padding: 6px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--vien);
}

/* ---------- 9. Huy hiệu ---------- */
.huy-hieu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--chinh);
  background: var(--chinh-nhat);
  border: 1px solid transparent;
}
.huy-hieu.tot { color: #12692f; background: rgba(52, 199, 89, .18); border-color: rgba(52, 199, 89, .5); }
.huy-hieu.tb { color: #7a5b00; background: rgba(255, 204, 0, .22); border-color: rgba(255, 204, 0, .6); }
.huy-hieu.kem { color: #8f1f19; background: rgba(255, 59, 48, .16); border-color: rgba(255, 59, 48, .5); }
.huy-hieu.chua { color: var(--chu-phu); background: rgba(154, 165, 177, .2); border-color: rgba(154, 165, 177, .5); }

@media (prefers-color-scheme: dark) {
  .huy-hieu.tot { color: #6ee59a; }
  .huy-hieu.tb { color: #ffd95e; }
  .huy-hieu.kem { color: #ff8a82; }
}

/* Ô màu nhỏ (chú giải, danh sách cấp hạng) */
.o-mau {
  display: inline-block;
  width: 22px;
  height: 5px;
  border-radius: 3px;
  vertical-align: middle;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

/* ---------- 10. Khu thông báo ---------- */
.khu-thong-bao {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  max-width: min(380px, calc(100vw - 28px));
  pointer-events: none;
}

.thong-bao {
  pointer-events: auto;
  padding: 11px 15px;
  border-radius: var(--bo-goc-nho);
  border-left: 5px solid var(--chinh);
  background: var(--nen-phu);
  color: var(--chu);
  box-shadow: var(--bong);
  font-size: 14.5px;
  font-weight: 500;
  animation: hien-thong-bao .28s ease-out;
  transition: opacity .35s ease, transform .35s ease;
}
.thong-bao.tot { border-left-color: var(--tot); }
.thong-bao.loi { border-left-color: var(--kem); }
.thong-bao.tin { border-left-color: var(--chinh); }
.thong-bao.tan { opacity: 0; transform: translateX(18px); }

@keyframes hien-thong-bao {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .thong-bao { animation: none; transition: opacity .2s linear; }
}

/* ---------- 11. Khối nội dung trang thường ---------- */
.khung-trang {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* Vòng quay chờ */
.dang-nap {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--vien);
  border-top-color: var(--chinh);
  border-radius: 50%;
  animation: quay .8s linear infinite;
  vertical-align: middle;
}
@keyframes quay { to { transform: rotate(360deg); } }

/* ---------- 12. Đáp ứng màn hình điện thoại ---------- */
@media (max-width: 760px) {
  body { font-size: 15.5px; }

  .thanh-dieu-huong { padding: 6px 12px; gap: 6px; }
  .thanh-dieu-huong .ten-he-thong { font-size: 15px; }
  .thanh-dieu-huong .nut-menu { display: inline-flex; }
  /* Màn hình hẹp: giấu dòng người xây dựng cho đỡ chật */
  .thanh-dieu-huong .dong-nguoi-xay-dung { display: none; }

  .thanh-dieu-huong .cac-muc {
    display: none;
    width: 100%;
    margin-left: 0;
    order: 4;                    /* xuống hàng dưới khi mở menu */
  }

  /* Khu tài khoản LUÔN hiện trên điện thoại — đây là lối vào duy nhất của
     menu tài khoản, không được giấu sau nút ☰. */
  .thanh-dieu-huong .khu-nguoi-dung {
    order: 2;
    margin-left: auto;
  }
  .thanh-dieu-huong .nut-menu { order: 3; margin-left: 0; }

  .thanh-dieu-huong.mo .cac-muc {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .25);
  }
  .thanh-dieu-huong.mo .cac-muc a { min-height: var(--cao-nut); font-size: 15.5px; }

  .nut, .nut-nho { min-height: var(--cao-nut); }
  .the { padding: 12px 13px; border-radius: var(--bo-goc); }
  .the-dau { margin: -12px -13px 10px; padding: 9px 13px; }
  .khung-trang { padding: 14px 12px 32px; }
  table.bang { font-size: 13.5px; }
  table.bang th, table.bang td { padding: 7px 8px; }
  .khu-thong-bao { left: 12px; right: 12px; bottom: 12px; max-width: none; align-items: stretch; }
}

@media (max-width: 400px) {
  .thanh-dieu-huong .ten-he-thong { font-size: 14px; }
}

/* ---------- 13. Menu tài khoản ----------
   Tham chiếu: HOP-DONG-TOAN-TINH.md — Mục 7A. Làm theo mẫu tấm tài khoản của hệ
   WebGIS (`Hệ thống GIS/css/style.css`, các lớp `.tk-`).

   Cấu trúc do htmlKhuTaiKhoan() trong js/chung.js sinh ra:
   div.khu-nguoi-dung > button#nut-tai-khoan.chip-tai-khoan
                          > span.tk-anh + span.tk-chu(.tk-ten + .tk-vai-tro) + span.tk-mui
                      + div#tam-tai-khoan.tam-tai-khoan[hidden]
                          > div.tk-trong[role=menu]
                              > div.tk-keo + div.tk-dau + div.tk-cac-muc

   Máy tính: menu thả xuống neo vào chip. Điện thoại: tấm trượt từ dưới lên.
------------------------------------------------------------ */

.chip-tai-khoan {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 260px;
  min-height: 40px;
  padding: 3px 9px 3px 4px;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.chip-tai-khoan:hover { background: rgba(255, 255, 255, .26); }
.chip-tai-khoan:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.chip-tai-khoan[aria-expanded="true"] { background: rgba(255, 255, 255, .3); }

.tk-anh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0a3f80, #1877d4);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
}

.tk-chu {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.tk-chu .tk-ten {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-chu .tk-vai-tro {
  font-size: 11.5px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-tai-khoan .tk-mui { font-size: 11px; opacity: .85; flex: none; }

/* --- Tấm menu --- */
.tam-tai-khoan[hidden] { display: none !important; }

.tam-tai-khoan {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 1500;
}

/* Trạng thái NHÌN THẤY là trạng thái mặc định của tấm menu; hiệu ứng mở chỉ là một
   khung hình động chạy thêm. Làm ngược lại (mặc định trong suốt, chờ hiệu ứng đưa
   về rõ) thì trình duyệt nào không chạy hiệu ứng sẽ để lại một tấm vô hình mà vẫn
   bấm được — che mất cả trang. */
.tk-trong {
  width: 290px;
  color: var(--chu);
  background: var(--nen-phu);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  overflow: hidden;
}
.tam-tai-khoan.hien .tk-trong { animation: tk-tha-xuong .16s ease-out; }

@keyframes tk-tha-xuong {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.tk-keo { display: none; }

.tk-dau {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--chinh-nhat);
  border-bottom: 1px solid var(--vien);
}
.tk-dau .tk-anh { width: 42px; height: 42px; font-size: 18px; }
.tk-dau .tk-ten { font-size: 15px; font-weight: 700; color: var(--chu); white-space: normal; }
.tk-dau .tk-vai-tro { font-size: 12.5px; color: var(--chu-phu); white-space: normal; opacity: 1; }

.tk-cac-muc { padding: 5px 0 6px; }

.tk-muc {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--chu);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.tk-muc:hover { background: var(--chinh-nhat); }
.tk-muc:focus-visible { outline: 3px solid var(--chinh); outline-offset: -3px; }
.tk-muc .tk-bt { width: 22px; font-size: 17px; text-align: center; flex: none; }
.tk-muc.tk-thoat { color: var(--kem); font-weight: 700; }
.tk-muc.tk-thoat:hover { background: rgba(255, 59, 48, .12); }

.tk-vach { margin: 5px 0; border-top: 1px solid var(--vien); }

/* --- Hộp thoại dùng chung (thông tin tài khoản, đổi mật khẩu) --- */
.hop-thoai {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .45);
  animation: hien-thong-bao .18s ease-out;
}

.ht-trong {
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--nen-phu);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
  overflow: hidden;
}

.ht-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--chinh-nhat);
  border-bottom: 1px solid var(--vien);
}
.ht-dau h3 { margin: 0; font-size: 16px; }

.ht-dong {
  min-width: 36px;
  min-height: 36px;
  font-size: 15px;
  color: var(--chu-phu);
  background: none;
  border: 0;
  border-radius: var(--bo-goc-nho);
  cursor: pointer;
}
.ht-dong:hover { background: rgba(0, 0, 0, .08); color: var(--chu); }

.ht-than { padding: 14px; overflow: auto; }
.ht-than > :last-child { margin-bottom: 0; }

.ht-chan {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--nen);
  border-top: 1px solid var(--vien);
}

/* Bảng "nhãn — giá trị" trong hộp Thông tin tài khoản */
.tk-bang th { width: 46%; }

.tk-tieu-de-phu {
  margin: 16px 0 6px;
  padding-top: 12px;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--chu-phu);
  border-top: 1px solid var(--vien);
}

.tk-the {
  display: inline-block;
  margin: 2px 5px 2px 0;
  padding: 1px 9px;
  font-size: 12.5px;
  color: var(--chinh);
  background: var(--chinh-nhat);
  border: 1px solid var(--vien);
  border-radius: 999px;
}

.tk-dem {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--chu-phu);
}

.tk-ghi-chu { margin-top: 10px; font-size: 12.5px; color: var(--chu-phu); }

.tk-bao {
  margin: 10px 0 0;
  padding: 8px 11px;
  font-size: 13.5px;
  border-radius: var(--bo-goc-nho);
  border-left: 4px solid var(--chinh);
  background: var(--nen);
}
.tk-bao.tot { border-left-color: var(--tot); }
.tk-bao.loi { border-left-color: var(--kem); }

/* --- Điện thoại: tấm trượt từ dưới lên --- */
@media (max-width: 760px) {
  /* Chip thu về đúng vòng tròn ảnh đại diện cho gọn thanh tiêu đề */
  .chip-tai-khoan { max-width: none; padding: 3px; gap: 0; }
  .chip-tai-khoan .tk-chu,
  .chip-tai-khoan .tk-mui { display: none; }
  .chip-tai-khoan .tk-anh { width: 34px; height: 34px; }

  .tam-tai-khoan {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    z-index: 2500;
    background: rgba(15, 23, 42, .45);
  }
  .tam-tai-khoan.hien { animation: tk-hien-nen .2s ease-out; }

  .tk-trong {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border: 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .tam-tai-khoan.hien .tk-trong { animation: tk-truot-len .25s ease-out; }

  @keyframes tk-hien-nen {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes tk-truot-len {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  .tk-keo {
    display: block;
    width: 44px;
    height: 5px;
    margin: 9px auto 2px;
    background: var(--vien);
    border-radius: 3px;
    cursor: pointer;
  }

  .tk-dau { background: var(--nen-phu); padding: 10px 18px 13px; }
  .tk-muc { min-height: var(--cao-nut); padding: 14px 18px; font-size: 15.5px; }
  .tk-muc:not(:last-child) { border-bottom: 1px solid var(--nen); }

  .ht-trong { width: 100%; max-height: calc(100vh - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .tam-tai-khoan.hien,
  .tam-tai-khoan.hien .tk-trong,
  .hop-thoai { animation: none; }
}